eea5b262cb
Adds a substantial chrome layer atop the bare template: Appbar - Font-size picker (root font-size scale): S/M/L/XL - Surface picker: tints --background/--card/--popover/--sidebar/--muted/ --secondary/--accent across light + dark - Background picker: 11 atmospheric gradients (Pearl, Linen, Mist, Dawn, Seafoam, Aurora, Sunset, Meadow, Midnight, Blush, Noir) + None - Vivid foreground tokens for stronger text contrast; fixed dark-mode blue-on-blue user bubble (deeper --primary, near-white --primary-fg) Assistant route - Multi-agent personas (~/lib/agents.ts): Atlas, Forge, Inkwell, Pilot, Cursor — each with name/role/sub-prompt; per-thread persona; agent picker with avatar tint + handoff submenu - Conversation threads (~/lib/threads.ts): new/switch/rename/delete, auto-titling from first user message, per-thread pinned indices - Compact summarization with snapshot-based Restore that preserves pinned messages verbatim - Edit & retry the last user message, Regenerate, Continue, Show system prompt, Copy / Export Markdown, Save to Library, Compare across agents (parallel completions in a side-by-side modal) - Per-message Pin / Read aloud (Web Speech) / Edit - Voice input via Web Speech Recognition - Two-column Actions popover (UI Control + Conversation / Share / Multi-agent / Clear sections) - Status bar: connection dot + LOCAL/API/MOCK chip + host chip + context progress bar - Compactly named threads picker; New conversation - DropdownMenuItem onSelect → onClick (base-ui Menu fires onClick) Library - ~/lib/library.ts store, /library route with search + detail panel (Copy / Download / Delete) Profile - /profile route + ~/lib/profile.ts (name/email/title/bio/signature/ avatar dataURL/default agent), AppShell uses live profile for the appbar avatar; account menu now navigates to /profile Settings - Sub-sidenav (LLM / Agents / Appearance / Account / About) - Editable system prompt with reset-to-default - Agents CRUD panel - Reorganized layout UI Control - Static action catalog in the system prompt so the assistant can drive controls on routes that aren't currently mounted - Always returns to /assistant after a UI Control sequence (model- side rule + deterministic safety net) - Cursor uses click-nav over direct navigate so the virtual cursor is visibly involved - New ids tagged across the app (sidebar, settings, profile, library, assistant tools, agent handoff, thread management) Hydration - root.tsx: suppressHydrationWarning on html/body since the pre-mount script sets dark/data-bg/data-surface/data-font-scale before React Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import {
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
isRouteErrorResponse,
|
|
} from "react-router"
|
|
|
|
import type { Route } from "./+types/root"
|
|
import "./app.css"
|
|
|
|
import { ToastProvider } from "@crema/notification-ui"
|
|
import { CommandBusProvider } from "@crema/action-bus"
|
|
// CREMA:PROVIDERS-IMPORTS
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<Meta />
|
|
<Links />
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `(function(){try{var t=localStorage.getItem('crema-theme');if(!t)t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(t==='dark')document.documentElement.classList.add('dark');var f=localStorage.getItem('crema-font-scale');if(f&&/^(sm|md|lg|xl)$/.test(f))document.documentElement.dataset.fontScale=f;var b=localStorage.getItem('crema-bg');if(b&&/^(pearl|linen|mist|dawn|seafoam|aurora|sunset|meadow|midnight|blush|noir)$/.test(b)){document.addEventListener('DOMContentLoaded',function(){document.body.dataset.bg=b;});}var s=localStorage.getItem('crema-surface');if(s&&/^(snow|stone|sage|slate)$/.test(s)){document.addEventListener('DOMContentLoaded',function(){document.body.dataset.surface=s;});}}catch(e){}})();`,
|
|
}}
|
|
/>
|
|
</head>
|
|
<body suppressHydrationWarning>
|
|
{children}
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
/* CREMA:PROVIDERS-WRAP-OPEN */
|
|
<ToastProvider>
|
|
<CommandBusProvider>
|
|
<Outlet />
|
|
</CommandBusProvider>
|
|
</ToastProvider>
|
|
/* CREMA:PROVIDERS-WRAP-CLOSE */
|
|
)
|
|
}
|
|
|
|
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|
let message = "Oops!"
|
|
let details = "An unexpected error occurred."
|
|
let stack: string | undefined
|
|
|
|
if (isRouteErrorResponse(error)) {
|
|
message = error.status === 404 ? "404" : "Error"
|
|
details =
|
|
error.status === 404
|
|
? "The requested page could not be found."
|
|
: error.statusText || details
|
|
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
|
details = error.message
|
|
stack = error.stack
|
|
}
|
|
|
|
return (
|
|
<main className="container mx-auto p-4 pt-16">
|
|
<h1>{message}</h1>
|
|
<p>{details}</p>
|
|
{stack && (
|
|
<pre className="w-full overflow-x-auto p-4">
|
|
<code>{stack}</code>
|
|
</pre>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|