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>
Hybrid traditional + AI-first webapp scaffold. Sibling to crema-app-template,
adds the AI assistant surface, command bus, scripts dialog, and virtual
cursor.
What's pre-wired:
- 6 routes: Overview, Resources, Activity, Assistant, Library, Settings
- Collapsible rail + appbar + avatar dropdown shell (template code, not a lib)
- Mobile sheet at <md
- /assistant: streaming chat via @crema/llm-ui, mock fallback, model selector,
token meter, retry probe, stop-while-streaming, persistent UI Control toggle
- /settings: editable LM Studio endpoint + context window + response cap, with
test-connection button
- Markdown rendering for assistant replies; ```action``` blocks rendered as a
small "Ran N actions" pill
- ⌘⇧P script runner dialog + Play icon in the appbar
- Two demo scripts in public/scripts/
- mightypix theme as default, scoped via <AppShell theme="mightypix">
Libs wired in tsconfig + app.css:
- @crema/action-bus (the bus, parser, runner, cursor, provider, ws, llm-bridge)
- @crema/llm-ui, @crema/chat-ui, @crema/aifirst-ui, @crema/notification-ui
- lib-theme-mightypix
Docs:
- README.md — pitch + quick start + structure
- docs/AI_FIRST.md — full system tour (data-action contract, bus, DSL, scripts,
cursor, LLM integration)
- app/components/layout/THEME_CONTRACT.md — every CSS variable a theme must declare
- CLAUDE.md — orientation for an LLM working in the repo
Genericized from comfy-cloud (the original prototype):
- Brand defaults to "App" / Sparkles icon (override via app/lib/identity.ts)
- User defaults to a stub (swap useUser() for real auth)
- localStorage namespace is "crema.*" (was "comfy.*")
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
