feat: appbar pickers, multi-agent personas, threads, library, profile
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>
This commit is contained in:
jules
382
app/app.css
382
app/app.css
@@ -113,4 +113,386 @@
|
||||
font-size: 18px;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
html[data-font-scale="sm"] { font-size: 16px; }
|
||||
html[data-font-scale="md"] { font-size: 18px; }
|
||||
html[data-font-scale="lg"] { font-size: 20px; }
|
||||
html[data-font-scale="xl"] { font-size: 22px; }
|
||||
}
|
||||
|
||||
/* ── Vivid text ──
|
||||
* Boost foreground tokens for more contrast + chroma than base mightypix.
|
||||
* NOT wrapped in @layer base — mightypix's `.dark{…}` block is unlayered,
|
||||
* which beats any layer. We use `html:root` / `html.dark` for matching
|
||||
* specificity and unlayered placement so the cascade resolves by source order. */
|
||||
html:root {
|
||||
--foreground: oklch(0.16 0.08 255);
|
||||
--card-foreground: oklch(0.16 0.08 255);
|
||||
--popover-foreground: oklch(0.16 0.08 255);
|
||||
--sidebar-foreground: oklch(0.16 0.08 255);
|
||||
--muted-foreground: oklch(0.38 0.07 255);
|
||||
--secondary-foreground: oklch(0.22 0.09 255);
|
||||
--accent-foreground: oklch(0.22 0.09 255);
|
||||
}
|
||||
html.dark {
|
||||
--foreground: oklch(0.98 0.025 80);
|
||||
--card-foreground: oklch(0.98 0.025 80);
|
||||
--popover-foreground: oklch(0.98 0.025 80);
|
||||
--sidebar-foreground: oklch(0.98 0.025 80);
|
||||
--muted-foreground: oklch(0.84 0.04 80);
|
||||
--secondary-foreground: oklch(0.96 0.03 80);
|
||||
--accent-foreground: oklch(0.96 0.03 80);
|
||||
/* Darker primary so the user chat bubble is deep blue, not bright blue. */
|
||||
--primary: oklch(0.48 0.18 255);
|
||||
/* Near-white text on filled buttons / user chat bubble (was dark-blue). */
|
||||
--primary-foreground: oklch(0.99 0.01 80);
|
||||
/* Deepen muted so assistant bubble (bg-muted) reads cleanly. */
|
||||
--muted: oklch(0.22 0.022 250);
|
||||
--secondary: oklch(0.24 0.025 250);
|
||||
}
|
||||
|
||||
/* ── Surface tints ──
|
||||
* Override card / popover / sidebar tokens via `body[data-surface="<id>"]`.
|
||||
* Light values are used in normal mode; dark values when `html.dark` is set.
|
||||
* Swatch preview classes (`.surface-swatch-<id>`) sample the same hues. */
|
||||
@layer base {
|
||||
body[data-surface="snow"] {
|
||||
--foreground: oklch(0.14 0.09 255);
|
||||
--card-foreground: oklch(0.14 0.09 255);
|
||||
--popover-foreground: oklch(0.14 0.09 255);
|
||||
--sidebar-foreground: oklch(0.14 0.09 255);
|
||||
--muted-foreground: oklch(0.36 0.08 255);
|
||||
--background: oklch(1 0 0);
|
||||
--card: oklch(0.99 0.002 250);
|
||||
--popover: oklch(1 0 0);
|
||||
--muted: oklch(0.96 0.004 250);
|
||||
--secondary: oklch(0.95 0.005 250);
|
||||
--accent: oklch(0.94 0.006 250);
|
||||
--sidebar: oklch(0.98 0.003 250);
|
||||
--sidebar-accent: oklch(0.94 0.005 250);
|
||||
}
|
||||
body[data-surface="stone"] {
|
||||
--foreground: oklch(0.18 0.1 40);
|
||||
--card-foreground: oklch(0.18 0.1 40);
|
||||
--popover-foreground: oklch(0.18 0.1 40);
|
||||
--sidebar-foreground: oklch(0.18 0.1 40);
|
||||
--muted-foreground: oklch(0.4 0.08 40);
|
||||
--background: oklch(0.97 0.012 65);
|
||||
--card: oklch(0.985 0.008 60);
|
||||
--popover: oklch(0.99 0.006 60);
|
||||
--muted: oklch(0.94 0.016 65);
|
||||
--secondary: oklch(0.93 0.02 65);
|
||||
--accent: oklch(0.91 0.024 65);
|
||||
--sidebar: oklch(0.95 0.014 65);
|
||||
--sidebar-accent: oklch(0.9 0.022 65);
|
||||
}
|
||||
body[data-surface="sage"] {
|
||||
--foreground: oklch(0.18 0.1 155);
|
||||
--card-foreground: oklch(0.18 0.1 155);
|
||||
--popover-foreground: oklch(0.18 0.1 155);
|
||||
--sidebar-foreground: oklch(0.18 0.1 155);
|
||||
--muted-foreground: oklch(0.4 0.08 155);
|
||||
--background: oklch(0.97 0.022 155);
|
||||
--card: oklch(0.985 0.014 155);
|
||||
--popover: oklch(0.99 0.012 155);
|
||||
--muted: oklch(0.94 0.025 155);
|
||||
--secondary: oklch(0.93 0.028 155);
|
||||
--accent: oklch(0.91 0.032 155);
|
||||
--sidebar: oklch(0.95 0.024 155);
|
||||
--sidebar-accent: oklch(0.9 0.034 155);
|
||||
}
|
||||
body[data-surface="slate"] {
|
||||
--foreground: oklch(0.16 0.11 240);
|
||||
--card-foreground: oklch(0.16 0.11 240);
|
||||
--popover-foreground: oklch(0.16 0.11 240);
|
||||
--sidebar-foreground: oklch(0.16 0.11 240);
|
||||
--muted-foreground: oklch(0.38 0.09 240);
|
||||
--background: oklch(0.96 0.014 240);
|
||||
--card: oklch(0.98 0.01 240);
|
||||
--popover: oklch(0.99 0.008 240);
|
||||
--muted: oklch(0.93 0.018 240);
|
||||
--secondary: oklch(0.92 0.022 240);
|
||||
--accent: oklch(0.9 0.026 240);
|
||||
--sidebar: oklch(0.94 0.018 240);
|
||||
--sidebar-accent: oklch(0.89 0.026 240);
|
||||
}
|
||||
|
||||
html.dark body[data-surface="snow"] {
|
||||
--foreground: oklch(0.98 0.02 250);
|
||||
--card-foreground: oklch(0.98 0.02 250);
|
||||
--popover-foreground: oklch(0.98 0.02 250);
|
||||
--sidebar-foreground: oklch(0.98 0.02 250);
|
||||
--muted-foreground: oklch(0.84 0.03 250);
|
||||
--background: oklch(0.18 0.004 250);
|
||||
--card: oklch(0.24 0.005 250);
|
||||
--popover: oklch(0.24 0.005 250);
|
||||
--muted: oklch(0.26 0.006 250);
|
||||
--secondary: oklch(0.28 0.007 250);
|
||||
--accent: oklch(0.3 0.008 250);
|
||||
--sidebar: oklch(0.16 0.004 250);
|
||||
--sidebar-accent: oklch(0.26 0.007 250);
|
||||
}
|
||||
html.dark body[data-surface="stone"] {
|
||||
--foreground: oklch(0.98 0.04 80);
|
||||
--card-foreground: oklch(0.98 0.04 80);
|
||||
--popover-foreground: oklch(0.98 0.04 80);
|
||||
--sidebar-foreground: oklch(0.98 0.04 80);
|
||||
--muted-foreground: oklch(0.84 0.05 80);
|
||||
--background: oklch(0.18 0.016 60);
|
||||
--card: oklch(0.24 0.014 60);
|
||||
--popover: oklch(0.24 0.014 60);
|
||||
--muted: oklch(0.26 0.018 60);
|
||||
--secondary: oklch(0.28 0.02 60);
|
||||
--accent: oklch(0.3 0.022 60);
|
||||
--sidebar: oklch(0.16 0.018 60);
|
||||
--sidebar-accent: oklch(0.27 0.022 60);
|
||||
}
|
||||
html.dark body[data-surface="sage"] {
|
||||
--foreground: oklch(0.98 0.04 145);
|
||||
--card-foreground: oklch(0.98 0.04 145);
|
||||
--popover-foreground: oklch(0.98 0.04 145);
|
||||
--sidebar-foreground: oklch(0.98 0.04 145);
|
||||
--muted-foreground: oklch(0.84 0.05 145);
|
||||
--background: oklch(0.18 0.025 155);
|
||||
--card: oklch(0.24 0.022 155);
|
||||
--popover: oklch(0.24 0.02 155);
|
||||
--muted: oklch(0.26 0.028 155);
|
||||
--secondary: oklch(0.28 0.03 155);
|
||||
--accent: oklch(0.3 0.032 155);
|
||||
--sidebar: oklch(0.16 0.026 155);
|
||||
--sidebar-accent: oklch(0.27 0.032 155);
|
||||
}
|
||||
html.dark body[data-surface="slate"] {
|
||||
--foreground: oklch(0.98 0.025 240);
|
||||
--card-foreground: oklch(0.98 0.025 240);
|
||||
--popover-foreground: oklch(0.98 0.025 240);
|
||||
--sidebar-foreground: oklch(0.98 0.025 240);
|
||||
--muted-foreground: oklch(0.84 0.04 240);
|
||||
--background: oklch(0.18 0.02 240);
|
||||
--card: oklch(0.24 0.018 240);
|
||||
--popover: oklch(0.24 0.016 240);
|
||||
--muted: oklch(0.26 0.024 240);
|
||||
--secondary: oklch(0.28 0.026 240);
|
||||
--accent: oklch(0.3 0.028 240);
|
||||
--sidebar: oklch(0.16 0.022 240);
|
||||
--sidebar-accent: oklch(0.27 0.028 240);
|
||||
}
|
||||
|
||||
.surface-swatch-default { background: var(--card); }
|
||||
.surface-swatch-snow { background: oklch(1 0 0); }
|
||||
.surface-swatch-stone { background: oklch(0.97 0.008 60); }
|
||||
.surface-swatch-sage { background: oklch(0.97 0.018 155); }
|
||||
.surface-swatch-slate { background: oklch(0.96 0.012 240); }
|
||||
html.dark .surface-swatch-snow { background: oklch(0.24 0.005 250); }
|
||||
html.dark .surface-swatch-stone { background: oklch(0.24 0.014 60); }
|
||||
html.dark .surface-swatch-sage { background: oklch(0.24 0.022 155); }
|
||||
html.dark .surface-swatch-slate { background: oklch(0.24 0.018 240); }
|
||||
}
|
||||
|
||||
/* ── Background atmospheres ──
|
||||
* Selected via `body[data-bg="<id>"]` (set by BackgroundPicker).
|
||||
* Default (no attribute) keeps the theme's flat surface. */
|
||||
@layer base {
|
||||
/* ── Light, airy variants ── */
|
||||
body[data-bg="pearl"],
|
||||
.bg-variant-pearl {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.98 0.02 320 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 82% 18%, oklch(0.97 0.03 220 / 0.75), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.98 0.025 260 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.99 0.02 60 / 0.65), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.99 0.005 280), oklch(0.97 0.012 240));
|
||||
}
|
||||
body[data-bg="linen"],
|
||||
.bg-variant-linen {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.98 0.03 80 / 0.8), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.97 0.035 60 / 0.75), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.98 0.025 40 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.99 0.02 90 / 0.65), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.99 0.012 75), oklch(0.97 0.018 60));
|
||||
}
|
||||
body[data-bg="mist"],
|
||||
.bg-variant-mist {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 18% 14%, oklch(0.97 0.02 220 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 82% 16%, oklch(0.96 0.025 200 / 0.75), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.97 0.02 240 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.98 0.018 180 / 0.65), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.98 0.008 220), oklch(0.96 0.012 210));
|
||||
}
|
||||
body[data-bg="dawn"],
|
||||
.bg-variant-dawn {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.97 0.04 30 / 0.8), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.96 0.035 320 / 0.75), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.97 0.03 50 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.98 0.025 290 / 0.65), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.99 0.012 40), oklch(0.97 0.018 320));
|
||||
}
|
||||
body[data-bg="seafoam"],
|
||||
.bg-variant-seafoam {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 14%, oklch(0.97 0.035 180 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.96 0.03 160 / 0.75), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.97 0.03 200 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.98 0.025 145 / 0.65), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.98 0.012 175), oklch(0.96 0.018 165));
|
||||
}
|
||||
|
||||
body[data-bg="aurora"],
|
||||
.bg-variant-aurora {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.88 0.11 250 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.9 0.1 320 / 0.75), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.9 0.12 200 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.92 0.09 145 / 0.65), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.97 0.02 260), oklch(0.94 0.03 280));
|
||||
}
|
||||
body[data-bg="sunset"],
|
||||
.bg-variant-sunset {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 12% 15%, oklch(0.9 0.13 50 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 65% 55% at 85% 10%, oklch(0.88 0.14 20 / 0.8), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 90%, oklch(0.9 0.12 340 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 85%, oklch(0.92 0.1 75 / 0.7), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.97 0.03 60), oklch(0.94 0.04 30));
|
||||
}
|
||||
body[data-bg="meadow"],
|
||||
.bg-variant-meadow {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.9 0.12 145 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.91 0.11 180 / 0.75), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.9 0.12 120 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.93 0.1 95 / 0.65), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.97 0.03 155), oklch(0.94 0.04 170));
|
||||
}
|
||||
body[data-bg="midnight"],
|
||||
.bg-variant-midnight {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.58 0.19 270 / 0.9), transparent 60%),
|
||||
radial-gradient(ellipse 65% 55% at 85% 20%, oklch(0.55 0.22 310 / 0.85), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.5 0.22 240 / 0.8), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.55 0.2 330 / 0.75), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.35 0.12 265), oklch(0.28 0.14 290));
|
||||
}
|
||||
body[data-bg="blush"],
|
||||
.bg-variant-blush {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 15%, oklch(0.92 0.1 10 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 15%, oklch(0.93 0.09 340 / 0.8), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.92 0.1 300 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 88%, oklch(0.94 0.08 45 / 0.7), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.98 0.02 20), oklch(0.95 0.03 355));
|
||||
}
|
||||
body[data-bg="noir"],
|
||||
.bg-variant-noir {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.85 0.01 260 / 0.9), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.82 0.01 280 / 0.85), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.8 0.01 240 / 0.8), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.84 0.01 200 / 0.75), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.95 0.005 260), oklch(0.9 0.005 260));
|
||||
}
|
||||
|
||||
/* ── Dark mode: same hues, deeper L, lower alpha ── */
|
||||
html.dark body[data-bg="pearl"],
|
||||
html.dark .bg-variant-pearl {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.42 0.06 320 / 0.55), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 82% 18%, oklch(0.4 0.07 220 / 0.5), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.06 260 / 0.45), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.05 60 / 0.4), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.18 0.015 280), oklch(0.15 0.02 240));
|
||||
}
|
||||
html.dark body[data-bg="linen"],
|
||||
html.dark .bg-variant-linen {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.42 0.07 80 / 0.55), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.08 60 / 0.5), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.07 40 / 0.45), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.06 90 / 0.4), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.18 0.025 75), oklch(0.15 0.03 60));
|
||||
}
|
||||
html.dark body[data-bg="mist"],
|
||||
html.dark .bg-variant-mist {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 18% 14%, oklch(0.4 0.06 220 / 0.55), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 82% 16%, oklch(0.4 0.07 200 / 0.5), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.06 240 / 0.45), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.05 180 / 0.4), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.17 0.018 220), oklch(0.14 0.022 210));
|
||||
}
|
||||
html.dark body[data-bg="dawn"],
|
||||
html.dark .bg-variant-dawn {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.42 0.1 30 / 0.55), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.1 320 / 0.5), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.09 50 / 0.45), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.08 290 / 0.4), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.18 0.03 40), oklch(0.15 0.035 320));
|
||||
}
|
||||
html.dark body[data-bg="seafoam"],
|
||||
html.dark .bg-variant-seafoam {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 14%, oklch(0.42 0.08 180 / 0.55), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.08 160 / 0.5), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.08 200 / 0.45), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.07 145 / 0.4), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.18 0.025 175), oklch(0.15 0.03 165));
|
||||
}
|
||||
|
||||
html.dark body[data-bg="aurora"],
|
||||
html.dark .bg-variant-aurora {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.45 0.18 250 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.42 0.2 320 / 0.65), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.4 0.18 200 / 0.6), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.16 145 / 0.55), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.16 0.04 260), oklch(0.13 0.05 280));
|
||||
}
|
||||
html.dark body[data-bg="sunset"],
|
||||
html.dark .bg-variant-sunset {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 12% 15%, oklch(0.5 0.18 50 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 65% 55% at 85% 10%, oklch(0.48 0.2 20 / 0.65), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 90%, oklch(0.45 0.18 340 / 0.6), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 85%, oklch(0.5 0.16 75 / 0.55), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.18 0.06 30), oklch(0.14 0.08 15));
|
||||
}
|
||||
html.dark body[data-bg="meadow"],
|
||||
html.dark .bg-variant-meadow {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.45 0.16 145 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.45 0.16 180 / 0.65), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.16 120 / 0.6), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.45 0.14 95 / 0.55), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.16 0.04 155), oklch(0.13 0.05 170));
|
||||
}
|
||||
html.dark body[data-bg="midnight"],
|
||||
html.dark .bg-variant-midnight {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.4 0.22 270 / 0.85), transparent 60%),
|
||||
radial-gradient(ellipse 65% 55% at 85% 20%, oklch(0.38 0.24 310 / 0.8), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.36 0.24 240 / 0.75), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.38 0.22 330 / 0.7), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.12 0.08 265), oklch(0.09 0.1 290));
|
||||
}
|
||||
html.dark body[data-bg="blush"],
|
||||
html.dark .bg-variant-blush {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 15%, oklch(0.5 0.16 10 / 0.7), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 15%, oklch(0.48 0.16 340 / 0.65), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.45 0.16 300 / 0.6), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 12% 88%, oklch(0.5 0.14 45 / 0.55), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.18 0.05 20), oklch(0.14 0.06 355));
|
||||
}
|
||||
html.dark body[data-bg="noir"],
|
||||
html.dark .bg-variant-noir {
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.3 0.01 260 / 0.9), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.28 0.01 280 / 0.85), transparent 55%),
|
||||
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.26 0.01 240 / 0.8), transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.28 0.01 200 / 0.75), transparent 55%),
|
||||
linear-gradient(180deg, oklch(0.12 0.005 260), oklch(0.08 0.005 260));
|
||||
}
|
||||
}
|
||||
@@ -56,7 +56,7 @@ export function MessageBody({ content }: { content: string }) {
|
||||
)}
|
||||
{actionCount > 0 && (
|
||||
<span
|
||||
className="mt-1 inline-flex items-center gap-1.5 rounded-full border border-primary/30 bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary"
|
||||
className="mt-1 inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary dark:border-sky-400/60 dark:bg-sky-400/15 dark:text-sky-200"
|
||||
title="Action block executed by the command bus"
|
||||
>
|
||||
<Sparkles className="size-3" />
|
||||
|
||||
@@ -35,7 +35,11 @@ import {
|
||||
AppbarTitle,
|
||||
} from "~/components/layout/appbar"
|
||||
import { ThemeToggle } from "~/components/layout/theme-toggle"
|
||||
import { Avatar, AvatarFallback } from "~/components/ui/avatar"
|
||||
import { BackgroundPicker } from "~/components/layout/background-picker"
|
||||
import { FontSizePicker } from "~/components/layout/font-size-picker"
|
||||
import { SurfacePicker } from "~/components/layout/surface-picker"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
|
||||
import { profileInitials, useProfile } from "~/lib/profile"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -95,8 +99,13 @@ export function AppShell({
|
||||
}: AppShellProps) {
|
||||
const defaultBrand = useBrand()
|
||||
const defaultUser = useUser()
|
||||
const profile = useProfile()
|
||||
const brand = brandOverride ?? defaultBrand
|
||||
const user = userOverride ?? defaultUser
|
||||
const user = userOverride ?? {
|
||||
name: profile.name || defaultUser.name,
|
||||
email: profile.email || defaultUser.email,
|
||||
initials: profileInitials(profile.name || defaultUser.name),
|
||||
}
|
||||
const [expanded, setExpanded] = useState<boolean>(() => {
|
||||
if (typeof window === "undefined") return false
|
||||
return localStorage.getItem(SIDEBAR_KEY) === "1"
|
||||
@@ -267,6 +276,9 @@ export function AppShell({
|
||||
>
|
||||
<Play />
|
||||
</Button>
|
||||
<FontSizePicker />
|
||||
<SurfacePicker />
|
||||
<BackgroundPicker />
|
||||
<ThemeToggle />
|
||||
<Button
|
||||
data-action="appbar-notifications"
|
||||
@@ -277,17 +289,17 @@ export function AppShell({
|
||||
<Bell />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
data-action="appbar-avatar"
|
||||
aria-label="Account menu"
|
||||
className="rounded-full outline-none ring-offset-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<Avatar className="size-8 cursor-pointer transition-opacity hover:opacity-80">
|
||||
<AvatarFallback>{user.initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
</button>
|
||||
<DropdownMenuTrigger
|
||||
data-action="appbar-avatar"
|
||||
aria-label="Account menu"
|
||||
className="rounded-full outline-none ring-offset-2 ring-offset-background transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<Avatar className="size-8 cursor-pointer">
|
||||
{profile.avatarUrl ? (
|
||||
<AvatarImage src={profile.avatarUrl} alt={user.name} />
|
||||
) : null}
|
||||
<AvatarFallback>{user.initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" sideOffset={8} className="w-56">
|
||||
<DropdownMenuGroup>
|
||||
@@ -301,13 +313,13 @@ export function AppShell({
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
data-action="avatar-profile"
|
||||
onSelect={() => navigate("/settings")}
|
||||
onClick={() => navigate("/profile")}
|
||||
>
|
||||
<UserIcon /> Profile
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
data-action="avatar-settings"
|
||||
onSelect={() => navigate("/settings")}
|
||||
onClick={() => navigate("/settings")}
|
||||
>
|
||||
<Settings /> Settings
|
||||
</DropdownMenuItem>
|
||||
|
||||
112
app/components/layout/background-picker.tsx
Normal file
112
app/components/layout/background-picker.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { Check, Palette } from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverDescription,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverTrigger,
|
||||
} from "~/components/ui/popover"
|
||||
import { cn } from "~/lib/utils"
|
||||
|
||||
export const backgrounds = [
|
||||
{ id: "none", label: "None" },
|
||||
{ id: "pearl", label: "Pearl" },
|
||||
{ id: "linen", label: "Linen" },
|
||||
{ id: "mist", label: "Mist" },
|
||||
{ id: "dawn", label: "Dawn" },
|
||||
{ id: "seafoam", label: "Seafoam" },
|
||||
{ id: "aurora", label: "Aurora" },
|
||||
{ id: "sunset", label: "Sunset" },
|
||||
{ id: "meadow", label: "Meadow" },
|
||||
{ id: "midnight", label: "Midnight" },
|
||||
{ id: "blush", label: "Blush" },
|
||||
{ id: "noir", label: "Noir" },
|
||||
] as const
|
||||
|
||||
export type BackgroundId = (typeof backgrounds)[number]["id"]
|
||||
|
||||
const STORAGE_KEY = "crema-bg"
|
||||
const DEFAULT_BG: BackgroundId = "none"
|
||||
|
||||
function isBackgroundId(value: string | null): value is BackgroundId {
|
||||
return !!value && backgrounds.some((b) => b.id === value)
|
||||
}
|
||||
|
||||
function applyBg(id: BackgroundId) {
|
||||
if (id === "none") {
|
||||
delete document.body.dataset.bg
|
||||
} else {
|
||||
document.body.dataset.bg = id
|
||||
}
|
||||
}
|
||||
|
||||
export function BackgroundPicker() {
|
||||
const [current, setCurrent] = useState<BackgroundId>(DEFAULT_BG)
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
const next = isBackgroundId(stored) ? stored : DEFAULT_BG
|
||||
setCurrent(next)
|
||||
applyBg(next)
|
||||
}, [])
|
||||
|
||||
const select = (id: BackgroundId) => {
|
||||
setCurrent(id)
|
||||
applyBg(id)
|
||||
localStorage.setItem(STORAGE_KEY, id)
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<Button
|
||||
data-action="appbar-background"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Change background"
|
||||
>
|
||||
<Palette />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent align="end" className="w-64">
|
||||
<PopoverHeader>
|
||||
<PopoverTitle>Background</PopoverTitle>
|
||||
<PopoverDescription>Pick an atmosphere.</PopoverDescription>
|
||||
</PopoverHeader>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{backgrounds.map((bg) => {
|
||||
const active = current === bg.id
|
||||
return (
|
||||
<button
|
||||
key={bg.id}
|
||||
type="button"
|
||||
onClick={() => select(bg.id)}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"group relative flex aspect-square flex-col justify-end overflow-hidden rounded-lg ring-1 ring-border transition-all duration-fast ease-standard hover:ring-foreground/30 focus-visible:ring-2 focus-visible:ring-ring",
|
||||
bg.id === "none" ? "bg-background" : `bg-variant-${bg.id}`,
|
||||
active && "ring-2 ring-primary"
|
||||
)}
|
||||
>
|
||||
{active && (
|
||||
<span className="absolute top-1 right-1 flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-e1">
|
||||
<Check className="size-3" />
|
||||
</span>
|
||||
)}
|
||||
<span className="rounded-b-lg bg-background/70 px-1.5 py-1 text-center text-[10px] font-medium tracking-tight backdrop-blur-sm">
|
||||
{bg.label}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
104
app/components/layout/font-size-picker.tsx
Normal file
104
app/components/layout/font-size-picker.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { Check, Type } from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverDescription,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverTrigger,
|
||||
} from "~/components/ui/popover"
|
||||
import { cn } from "~/lib/utils"
|
||||
|
||||
export const fontSizes = [
|
||||
{ id: "sm", label: "Small", sample: "Aa" },
|
||||
{ id: "md", label: "Medium", sample: "Aa" },
|
||||
{ id: "lg", label: "Large", sample: "Aa" },
|
||||
{ id: "xl", label: "Extra large", sample: "Aa" },
|
||||
] as const
|
||||
|
||||
export type FontSizeId = (typeof fontSizes)[number]["id"]
|
||||
|
||||
const STORAGE_KEY = "crema-font-scale"
|
||||
const DEFAULT_SIZE: FontSizeId = "md"
|
||||
|
||||
function isFontSizeId(value: string | null): value is FontSizeId {
|
||||
return !!value && fontSizes.some((f) => f.id === value)
|
||||
}
|
||||
|
||||
const SAMPLE_PX: Record<FontSizeId, number> = {
|
||||
sm: 14,
|
||||
md: 16,
|
||||
lg: 18,
|
||||
xl: 20,
|
||||
}
|
||||
|
||||
export function FontSizePicker() {
|
||||
const [current, setCurrent] = useState<FontSizeId>(DEFAULT_SIZE)
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
const next = isFontSizeId(stored) ? stored : DEFAULT_SIZE
|
||||
setCurrent(next)
|
||||
document.documentElement.dataset.fontScale = next
|
||||
}, [])
|
||||
|
||||
const select = (id: FontSizeId) => {
|
||||
setCurrent(id)
|
||||
document.documentElement.dataset.fontScale = id
|
||||
localStorage.setItem(STORAGE_KEY, id)
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<Button
|
||||
data-action="appbar-font-size"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Change font size"
|
||||
>
|
||||
<Type />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent align="end" className="w-56">
|
||||
<PopoverHeader>
|
||||
<PopoverTitle>Font size</PopoverTitle>
|
||||
<PopoverDescription>Scales the entire UI.</PopoverDescription>
|
||||
</PopoverHeader>
|
||||
<div className="flex flex-col gap-1">
|
||||
{fontSizes.map((f) => {
|
||||
const active = current === f.id
|
||||
return (
|
||||
<button
|
||||
key={f.id}
|
||||
type="button"
|
||||
onClick={() => select(f.id)}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"flex items-center justify-between gap-2 rounded-md px-2.5 py-1.5 text-left transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none",
|
||||
active && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
>
|
||||
<span className="flex items-baseline gap-2.5">
|
||||
<span
|
||||
className="font-heading leading-none"
|
||||
style={{ fontSize: `${SAMPLE_PX[f.id]}px` }}
|
||||
>
|
||||
{f.sample}
|
||||
</span>
|
||||
<span className="text-sm">{f.label}</span>
|
||||
</span>
|
||||
{active && <Check className="size-4 text-primary" />}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
107
app/components/layout/surface-picker.tsx
Normal file
107
app/components/layout/surface-picker.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { Check, Layers } from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverDescription,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverTrigger,
|
||||
} from "~/components/ui/popover"
|
||||
import { cn } from "~/lib/utils"
|
||||
|
||||
export const surfaces = [
|
||||
{ id: "default", label: "Default" },
|
||||
{ id: "snow", label: "Snow" },
|
||||
{ id: "stone", label: "Stone" },
|
||||
{ id: "sage", label: "Sage" },
|
||||
{ id: "slate", label: "Slate" },
|
||||
] as const
|
||||
|
||||
export type SurfaceId = (typeof surfaces)[number]["id"]
|
||||
|
||||
const STORAGE_KEY = "crema-surface"
|
||||
const DEFAULT_SURFACE: SurfaceId = "default"
|
||||
|
||||
function isSurfaceId(value: string | null): value is SurfaceId {
|
||||
return !!value && surfaces.some((s) => s.id === value)
|
||||
}
|
||||
|
||||
function applySurface(id: SurfaceId) {
|
||||
if (id === "default") {
|
||||
delete document.body.dataset.surface
|
||||
} else {
|
||||
document.body.dataset.surface = id
|
||||
}
|
||||
}
|
||||
|
||||
export function SurfacePicker() {
|
||||
const [current, setCurrent] = useState<SurfaceId>(DEFAULT_SURFACE)
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
const next = isSurfaceId(stored) ? stored : DEFAULT_SURFACE
|
||||
setCurrent(next)
|
||||
applySurface(next)
|
||||
}, [])
|
||||
|
||||
const select = (id: SurfaceId) => {
|
||||
setCurrent(id)
|
||||
applySurface(id)
|
||||
localStorage.setItem(STORAGE_KEY, id)
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<Button
|
||||
data-action="appbar-surface"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Change surface tint"
|
||||
>
|
||||
<Layers />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent align="end" className="w-56">
|
||||
<PopoverHeader>
|
||||
<PopoverTitle>Surface</PopoverTitle>
|
||||
<PopoverDescription>Tint of cards and the sidebar.</PopoverDescription>
|
||||
</PopoverHeader>
|
||||
<div className="flex flex-col gap-1">
|
||||
{surfaces.map((s) => {
|
||||
const active = current === s.id
|
||||
return (
|
||||
<button
|
||||
key={s.id}
|
||||
type="button"
|
||||
onClick={() => select(s.id)}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none",
|
||||
active && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
>
|
||||
<span className="flex items-center gap-2.5">
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
"size-5 rounded-md ring-1 ring-border",
|
||||
`surface-swatch-${s.id}`
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm">{s.label}</span>
|
||||
</span>
|
||||
{active && <Check className="size-4 text-primary" />}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
153
app/lib/agents.ts
Normal file
153
app/lib/agents.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
// Agent personas — named, role-scoped sub-system prompts.
|
||||
// Each persona stacks on top of the main systemPrompt to specialize the
|
||||
// assistant for a task. Persisted in localStorage; reactive across tabs.
|
||||
|
||||
import { useEffect, useSyncExternalStore } from "react"
|
||||
|
||||
export type Agent = {
|
||||
id: string
|
||||
name: string
|
||||
role: string
|
||||
prompt: string
|
||||
}
|
||||
|
||||
export const DEFAULT_AGENTS: Agent[] = [
|
||||
{
|
||||
id: "generalist",
|
||||
name: "Atlas",
|
||||
role: "Generalist",
|
||||
prompt:
|
||||
"You handle anything: chat, planning, summaries, casual questions. Match the user's tone. Keep replies as long as the task deserves — terse for quick questions, detailed when explaining.",
|
||||
},
|
||||
{
|
||||
id: "coder",
|
||||
name: "Forge",
|
||||
role: "Software engineer",
|
||||
prompt:
|
||||
"You are a senior software engineer. Write idiomatic, well-typed code. Prefer concrete examples over abstract advice. When asked to fix a bug, identify root cause before patching. Use markdown code blocks with language tags. Mention edge cases briefly when relevant.",
|
||||
},
|
||||
{
|
||||
id: "writer",
|
||||
name: "Inkwell",
|
||||
role: "Writer",
|
||||
prompt:
|
||||
"You are a prose writer. Produce vivid, well-paced text — short stories, copy, emails, essays. Vary sentence length. Show, don't tell. When the user asks for a draft, deliver the draft, not a description of it.",
|
||||
},
|
||||
{
|
||||
id: "researcher",
|
||||
name: "Pilot",
|
||||
role: "Researcher",
|
||||
prompt:
|
||||
"You are a careful researcher. Structure answers as: claim → evidence → caveat. Distinguish what is well-established from what is uncertain. Refuse to fabricate citations — if you don't know, say so.",
|
||||
},
|
||||
{
|
||||
id: "ui-driver",
|
||||
name: "Cursor",
|
||||
role: "UI Operator",
|
||||
prompt:
|
||||
"You specialize in driving this app's UI on the user's behalf. Prefer doing over explaining. When the user asks for an action, emit an action block immediately. When they ask a question about the app, answer concisely and offer to do it.",
|
||||
},
|
||||
]
|
||||
|
||||
const STORAGE_KEY = "crema.agents"
|
||||
const ACTIVE_KEY = "crema.assistant.activeAgent"
|
||||
const CHANGE_EVENT = "crema:agents-change"
|
||||
|
||||
function isAgent(v: unknown): v is Agent {
|
||||
return (
|
||||
!!v &&
|
||||
typeof v === "object" &&
|
||||
typeof (v as Agent).id === "string" &&
|
||||
typeof (v as Agent).name === "string" &&
|
||||
typeof (v as Agent).role === "string" &&
|
||||
typeof (v as Agent).prompt === "string"
|
||||
)
|
||||
}
|
||||
|
||||
function readFromStorage(): Agent[] {
|
||||
if (typeof window === "undefined") return DEFAULT_AGENTS
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return DEFAULT_AGENTS
|
||||
const parsed = JSON.parse(raw)
|
||||
if (!Array.isArray(parsed)) return DEFAULT_AGENTS
|
||||
const cleaned = parsed.filter(isAgent)
|
||||
return cleaned.length > 0 ? cleaned : DEFAULT_AGENTS
|
||||
} catch {
|
||||
return DEFAULT_AGENTS
|
||||
}
|
||||
}
|
||||
|
||||
export function loadAgents(): Agent[] {
|
||||
return readFromStorage()
|
||||
}
|
||||
|
||||
export function saveAgents(next: Agent[]) {
|
||||
if (typeof window === "undefined") return
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
}
|
||||
|
||||
export function resetAgents() {
|
||||
saveAgents(DEFAULT_AGENTS)
|
||||
}
|
||||
|
||||
let cached: Agent[] | null = null
|
||||
|
||||
function subscribe(cb: () => void): () => void {
|
||||
const onChange = () => {
|
||||
cached = null
|
||||
cb()
|
||||
}
|
||||
window.addEventListener(CHANGE_EVENT, onChange)
|
||||
window.addEventListener("storage", (e) => {
|
||||
if (e.key === STORAGE_KEY || e.key === ACTIVE_KEY) onChange()
|
||||
})
|
||||
return () => {
|
||||
window.removeEventListener(CHANGE_EVENT, onChange)
|
||||
}
|
||||
}
|
||||
|
||||
function getSnapshot(): Agent[] {
|
||||
if (!cached) cached = readFromStorage()
|
||||
return cached
|
||||
}
|
||||
|
||||
function getServerSnapshot(): Agent[] {
|
||||
return DEFAULT_AGENTS
|
||||
}
|
||||
|
||||
export function useAgents(): Agent[] {
|
||||
const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
|
||||
useEffect(() => {
|
||||
cached = null
|
||||
}, [])
|
||||
return value
|
||||
}
|
||||
|
||||
export function loadActiveAgentId(): string {
|
||||
if (typeof window === "undefined") return DEFAULT_AGENTS[0].id
|
||||
try {
|
||||
return localStorage.getItem(ACTIVE_KEY) ?? DEFAULT_AGENTS[0].id
|
||||
} catch {
|
||||
return DEFAULT_AGENTS[0].id
|
||||
}
|
||||
}
|
||||
|
||||
export function saveActiveAgentId(id: string) {
|
||||
if (typeof window === "undefined") return
|
||||
localStorage.setItem(ACTIVE_KEY, id)
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
}
|
||||
|
||||
export function composeSystemPrompt(
|
||||
base: string,
|
||||
agent: Agent | undefined,
|
||||
): string {
|
||||
if (!agent) return base
|
||||
return `${base}\n\nActive persona: ${agent.name} — ${agent.role}\n${agent.prompt}`
|
||||
}
|
||||
|
||||
export function newAgentId(): string {
|
||||
return `agent-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
|
||||
}
|
||||
125
app/lib/library.ts
Normal file
125
app/lib/library.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
// Library — saved artifacts. Today: conversation snapshots.
|
||||
// Tomorrow: snippets, prompts, generated documents.
|
||||
|
||||
import { useEffect, useSyncExternalStore } from "react"
|
||||
|
||||
export type LibraryItem = {
|
||||
id: string
|
||||
kind: "conversation" | "snippet"
|
||||
title: string
|
||||
// Free-form body. For "conversation": markdown transcript. For "snippet": text.
|
||||
content: string
|
||||
tags: string[]
|
||||
// Optional metadata.
|
||||
agentName?: string
|
||||
agentRole?: string
|
||||
threadId?: string
|
||||
messageCount?: number
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
const STORAGE_KEY = "crema.library"
|
||||
const CHANGE_EVENT = "crema:library-change"
|
||||
const MAX_BYTES = 1_500_000
|
||||
|
||||
export function newLibraryId(): string {
|
||||
return `lib-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
|
||||
}
|
||||
|
||||
function isLibraryItem(v: unknown): v is LibraryItem {
|
||||
if (!v || typeof v !== "object") return false
|
||||
const x = v as LibraryItem
|
||||
return (
|
||||
typeof x.id === "string" &&
|
||||
(x.kind === "conversation" || x.kind === "snippet") &&
|
||||
typeof x.title === "string" &&
|
||||
typeof x.content === "string" &&
|
||||
Array.isArray(x.tags) &&
|
||||
typeof x.createdAt === "number"
|
||||
)
|
||||
}
|
||||
|
||||
function readFromStorage(): LibraryItem[] {
|
||||
if (typeof window === "undefined") return []
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return []
|
||||
const parsed = JSON.parse(raw)
|
||||
if (!Array.isArray(parsed)) return []
|
||||
return parsed.filter(isLibraryItem)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function writeToStorage(items: LibraryItem[]) {
|
||||
if (typeof window === "undefined") return
|
||||
let trimmed = items
|
||||
let serialized = JSON.stringify(trimmed)
|
||||
while (serialized.length > MAX_BYTES && trimmed.length > 1) {
|
||||
trimmed = trimmed.slice(0, -1)
|
||||
serialized = JSON.stringify(trimmed)
|
||||
}
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, serialized)
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
} catch {
|
||||
/* quota — bail */
|
||||
}
|
||||
}
|
||||
|
||||
export function loadLibrary(): LibraryItem[] {
|
||||
return readFromStorage()
|
||||
}
|
||||
|
||||
export function addLibraryItem(item: Omit<LibraryItem, "id" | "createdAt">): LibraryItem {
|
||||
const next: LibraryItem = {
|
||||
...item,
|
||||
id: newLibraryId(),
|
||||
createdAt: Date.now(),
|
||||
}
|
||||
const items = readFromStorage()
|
||||
writeToStorage([next, ...items])
|
||||
return next
|
||||
}
|
||||
|
||||
export function deleteLibraryItem(id: string) {
|
||||
const items = readFromStorage().filter((x) => x.id !== id)
|
||||
writeToStorage(items)
|
||||
}
|
||||
|
||||
export function updateLibraryItem(id: string, patch: Partial<LibraryItem>) {
|
||||
const items = readFromStorage().map((x) =>
|
||||
x.id === id ? { ...x, ...patch } : x,
|
||||
)
|
||||
writeToStorage(items)
|
||||
}
|
||||
|
||||
let cached: LibraryItem[] | null = null
|
||||
|
||||
function subscribe(cb: () => void): () => void {
|
||||
const onChange = () => {
|
||||
cached = null
|
||||
cb()
|
||||
}
|
||||
window.addEventListener(CHANGE_EVENT, onChange)
|
||||
window.addEventListener("storage", (e) => {
|
||||
if (e.key === STORAGE_KEY) onChange()
|
||||
})
|
||||
return () => window.removeEventListener(CHANGE_EVENT, onChange)
|
||||
}
|
||||
function getSnapshot(): LibraryItem[] {
|
||||
if (!cached) cached = readFromStorage()
|
||||
return cached
|
||||
}
|
||||
function getServerSnapshot(): LibraryItem[] {
|
||||
return []
|
||||
}
|
||||
|
||||
export function useLibrary(): LibraryItem[] {
|
||||
const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
|
||||
useEffect(() => {
|
||||
cached = null
|
||||
}, [])
|
||||
return value
|
||||
}
|
||||
@@ -7,12 +7,17 @@ export type LLMSettings = {
|
||||
baseURL: string
|
||||
contextTokens: number
|
||||
responseBudget: number
|
||||
systemPrompt: string
|
||||
}
|
||||
|
||||
export const DEFAULT_SYSTEM_PROMPT =
|
||||
"You are a helpful general-purpose assistant embedded in an app. Handle any request the user makes — writing, brainstorming, code, analysis, casual chat — at the length the task deserves. Use markdown when it helps. You can also drive the UI when the user toggles UI Control on."
|
||||
|
||||
export const DEFAULT_SETTINGS: LLMSettings = {
|
||||
baseURL: "http://localhost:1234/v1",
|
||||
contextTokens: 9000,
|
||||
responseBudget: 512,
|
||||
systemPrompt: DEFAULT_SYSTEM_PROMPT,
|
||||
}
|
||||
|
||||
const STORAGE_KEY = "crema.llm.settings"
|
||||
@@ -34,6 +39,10 @@ function readFromStorage(): LLMSettings {
|
||||
Number.isFinite(parsed.responseBudget) && (parsed.responseBudget as number) > 0
|
||||
? (parsed.responseBudget as number)
|
||||
: DEFAULT_SETTINGS.responseBudget,
|
||||
systemPrompt:
|
||||
typeof parsed.systemPrompt === "string" && parsed.systemPrompt.trim().length > 0
|
||||
? parsed.systemPrompt
|
||||
: DEFAULT_SETTINGS.systemPrompt,
|
||||
}
|
||||
} catch {
|
||||
return DEFAULT_SETTINGS
|
||||
|
||||
115
app/lib/profile.ts
Normal file
115
app/lib/profile.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
// User profile — name, email, title, bio, signature, default agent.
|
||||
// Persisted in localStorage; reactive across tabs.
|
||||
|
||||
import { useEffect, useSyncExternalStore } from "react"
|
||||
|
||||
export type Profile = {
|
||||
name: string
|
||||
email: string
|
||||
title: string
|
||||
bio: string
|
||||
signature: string
|
||||
avatarUrl: string
|
||||
defaultAgentId: string
|
||||
}
|
||||
|
||||
export const DEFAULT_PROFILE: Profile = {
|
||||
name: "Signed-in user",
|
||||
email: "user@example.com",
|
||||
title: "",
|
||||
bio: "",
|
||||
signature: "",
|
||||
avatarUrl: "",
|
||||
defaultAgentId: "",
|
||||
}
|
||||
|
||||
const STORAGE_KEY = "crema.profile"
|
||||
const CHANGE_EVENT = "crema:profile-change"
|
||||
|
||||
function readFromStorage(): Profile {
|
||||
if (typeof window === "undefined") return DEFAULT_PROFILE
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return DEFAULT_PROFILE
|
||||
const parsed = JSON.parse(raw) as Partial<Profile>
|
||||
return {
|
||||
name:
|
||||
typeof parsed.name === "string" && parsed.name.trim().length > 0
|
||||
? parsed.name
|
||||
: DEFAULT_PROFILE.name,
|
||||
email:
|
||||
typeof parsed.email === "string" ? parsed.email : DEFAULT_PROFILE.email,
|
||||
title:
|
||||
typeof parsed.title === "string" ? parsed.title : DEFAULT_PROFILE.title,
|
||||
bio: typeof parsed.bio === "string" ? parsed.bio : DEFAULT_PROFILE.bio,
|
||||
signature:
|
||||
typeof parsed.signature === "string"
|
||||
? parsed.signature
|
||||
: DEFAULT_PROFILE.signature,
|
||||
avatarUrl:
|
||||
typeof parsed.avatarUrl === "string"
|
||||
? parsed.avatarUrl
|
||||
: DEFAULT_PROFILE.avatarUrl,
|
||||
defaultAgentId:
|
||||
typeof parsed.defaultAgentId === "string"
|
||||
? parsed.defaultAgentId
|
||||
: DEFAULT_PROFILE.defaultAgentId,
|
||||
}
|
||||
} catch {
|
||||
return DEFAULT_PROFILE
|
||||
}
|
||||
}
|
||||
|
||||
export function loadProfile(): Profile {
|
||||
return readFromStorage()
|
||||
}
|
||||
|
||||
export function saveProfile(next: Profile) {
|
||||
if (typeof window === "undefined") return
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
}
|
||||
|
||||
export function resetProfile() {
|
||||
saveProfile(DEFAULT_PROFILE)
|
||||
}
|
||||
|
||||
export function profileInitials(name: string): string {
|
||||
const words = name.trim().split(/\s+/).filter(Boolean)
|
||||
if (words.length === 0) return "?"
|
||||
if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
|
||||
return (words[0][0] + words[words.length - 1][0]).toUpperCase()
|
||||
}
|
||||
|
||||
let cached: Profile | null = null
|
||||
|
||||
function subscribe(cb: () => void): () => void {
|
||||
const onChange = () => {
|
||||
cached = null
|
||||
cb()
|
||||
}
|
||||
window.addEventListener(CHANGE_EVENT, onChange)
|
||||
window.addEventListener("storage", (e) => {
|
||||
if (e.key === STORAGE_KEY) onChange()
|
||||
})
|
||||
return () => {
|
||||
window.removeEventListener(CHANGE_EVENT, onChange)
|
||||
}
|
||||
}
|
||||
|
||||
function getSnapshot(): Profile {
|
||||
if (!cached) cached = readFromStorage()
|
||||
return cached
|
||||
}
|
||||
|
||||
function getServerSnapshot(): Profile {
|
||||
return DEFAULT_PROFILE
|
||||
}
|
||||
|
||||
export function useProfile(): Profile {
|
||||
const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
|
||||
useEffect(() => {
|
||||
cached = null
|
||||
}, [])
|
||||
return value
|
||||
}
|
||||
217
app/lib/threads.ts
Normal file
217
app/lib/threads.ts
Normal file
@@ -0,0 +1,217 @@
|
||||
// Conversation threads — multiple named chats, each with its own history,
|
||||
// active agent, and pinned message indices. Persisted in localStorage.
|
||||
|
||||
import { useEffect, useSyncExternalStore } from "react"
|
||||
|
||||
export type ThreadMessage = { role: "user" | "assistant"; content: string }
|
||||
|
||||
export type Thread = {
|
||||
id: string
|
||||
title: string
|
||||
agentId: string
|
||||
messages: ThreadMessage[]
|
||||
pinned: number[] // indices into messages[]
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
const THREADS_KEY = "crema.assistant.threads"
|
||||
const ACTIVE_KEY = "crema.assistant.activeThreadId"
|
||||
const SNAPSHOT_KEY_PREFIX = "crema.assistant.thread.snapshot."
|
||||
const CHANGE_EVENT = "crema:threads-change"
|
||||
const MAX_BYTES = 800_000
|
||||
|
||||
export function newThreadId(): string {
|
||||
return `t-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
|
||||
}
|
||||
|
||||
function isThread(v: unknown): v is Thread {
|
||||
if (!v || typeof v !== "object") return false
|
||||
const t = v as Thread
|
||||
return (
|
||||
typeof t.id === "string" &&
|
||||
typeof t.title === "string" &&
|
||||
typeof t.agentId === "string" &&
|
||||
Array.isArray(t.messages) &&
|
||||
Array.isArray(t.pinned) &&
|
||||
typeof t.createdAt === "number" &&
|
||||
typeof t.updatedAt === "number"
|
||||
)
|
||||
}
|
||||
|
||||
function readFromStorage(): Thread[] {
|
||||
if (typeof window === "undefined") return []
|
||||
try {
|
||||
const raw = localStorage.getItem(THREADS_KEY)
|
||||
if (!raw) return []
|
||||
const parsed = JSON.parse(raw)
|
||||
if (!Array.isArray(parsed)) return []
|
||||
return parsed.filter(isThread)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function writeToStorage(threads: Thread[]) {
|
||||
if (typeof window === "undefined") return
|
||||
let serialized = JSON.stringify(threads)
|
||||
// Trim oldest threads if quota gets tight.
|
||||
let trimmed = threads
|
||||
while (serialized.length > MAX_BYTES && trimmed.length > 1) {
|
||||
trimmed = trimmed.slice(0, -1)
|
||||
serialized = JSON.stringify(trimmed)
|
||||
}
|
||||
try {
|
||||
localStorage.setItem(THREADS_KEY, serialized)
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
} catch {
|
||||
/* quota — bail */
|
||||
}
|
||||
}
|
||||
|
||||
export function loadThreads(): Thread[] {
|
||||
return readFromStorage()
|
||||
}
|
||||
|
||||
export function saveThreads(threads: Thread[]) {
|
||||
writeToStorage(threads)
|
||||
}
|
||||
|
||||
export function loadActiveThreadId(): string | null {
|
||||
if (typeof window === "undefined") return null
|
||||
return localStorage.getItem(ACTIVE_KEY)
|
||||
}
|
||||
|
||||
export function saveActiveThreadId(id: string | null) {
|
||||
if (typeof window === "undefined") return
|
||||
if (id) localStorage.setItem(ACTIVE_KEY, id)
|
||||
else localStorage.removeItem(ACTIVE_KEY)
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
}
|
||||
|
||||
let cached: Thread[] | null = null
|
||||
|
||||
function subscribe(cb: () => void): () => void {
|
||||
const onChange = () => {
|
||||
cached = null
|
||||
cb()
|
||||
}
|
||||
window.addEventListener(CHANGE_EVENT, onChange)
|
||||
window.addEventListener("storage", (e) => {
|
||||
if (e.key === THREADS_KEY || e.key === ACTIVE_KEY) onChange()
|
||||
})
|
||||
return () => {
|
||||
window.removeEventListener(CHANGE_EVENT, onChange)
|
||||
}
|
||||
}
|
||||
|
||||
function getSnapshot(): Thread[] {
|
||||
if (!cached) cached = readFromStorage()
|
||||
return cached
|
||||
}
|
||||
function getServerSnapshot(): Thread[] {
|
||||
return []
|
||||
}
|
||||
|
||||
export function useThreads(): Thread[] {
|
||||
const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
|
||||
useEffect(() => {
|
||||
cached = null
|
||||
}, [])
|
||||
return value
|
||||
}
|
||||
|
||||
export function ensureThread(
|
||||
threads: Thread[],
|
||||
fallbackAgentId: string,
|
||||
): { threads: Thread[]; activeId: string } {
|
||||
const stored = loadActiveThreadId()
|
||||
if (stored && threads.some((t) => t.id === stored))
|
||||
return { threads, activeId: stored }
|
||||
if (threads.length > 0) {
|
||||
saveActiveThreadId(threads[0].id)
|
||||
return { threads, activeId: threads[0].id }
|
||||
}
|
||||
const id = newThreadId()
|
||||
const now = Date.now()
|
||||
const fresh: Thread = {
|
||||
id,
|
||||
title: "New conversation",
|
||||
agentId: fallbackAgentId,
|
||||
messages: [],
|
||||
pinned: [],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}
|
||||
saveActiveThreadId(id)
|
||||
saveThreads([fresh, ...threads])
|
||||
return { threads: [fresh, ...threads], activeId: id }
|
||||
}
|
||||
|
||||
export function updateThread(id: string, patch: Partial<Thread>) {
|
||||
const threads = readFromStorage()
|
||||
const next = threads.map((t) =>
|
||||
t.id === id ? { ...t, ...patch, updatedAt: Date.now() } : t,
|
||||
)
|
||||
writeToStorage(next)
|
||||
}
|
||||
|
||||
export function createThread(agentId: string, title = "New conversation"): Thread {
|
||||
const threads = readFromStorage()
|
||||
const id = newThreadId()
|
||||
const now = Date.now()
|
||||
const fresh: Thread = {
|
||||
id,
|
||||
title,
|
||||
agentId,
|
||||
messages: [],
|
||||
pinned: [],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}
|
||||
writeToStorage([fresh, ...threads])
|
||||
saveActiveThreadId(id)
|
||||
return fresh
|
||||
}
|
||||
|
||||
export function deleteThread(id: string) {
|
||||
const threads = readFromStorage()
|
||||
const next = threads.filter((t) => t.id !== id)
|
||||
writeToStorage(next)
|
||||
if (loadActiveThreadId() === id) {
|
||||
saveActiveThreadId(next[0]?.id ?? null)
|
||||
}
|
||||
}
|
||||
|
||||
export function snapshotThread(id: string) {
|
||||
const threads = readFromStorage()
|
||||
const t = threads.find((x) => x.id === id)
|
||||
if (!t) return
|
||||
try {
|
||||
localStorage.setItem(SNAPSHOT_KEY_PREFIX + id, JSON.stringify(t))
|
||||
} catch {
|
||||
/* quota */
|
||||
}
|
||||
}
|
||||
|
||||
export function loadThreadSnapshot(id: string): Thread | null {
|
||||
if (typeof window === "undefined") return null
|
||||
try {
|
||||
const raw = localStorage.getItem(SNAPSHOT_KEY_PREFIX + id)
|
||||
if (!raw) return null
|
||||
const parsed = JSON.parse(raw)
|
||||
return isThread(parsed) ? parsed : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function clearThreadSnapshot(id: string) {
|
||||
if (typeof window === "undefined") return
|
||||
localStorage.removeItem(SNAPSHOT_KEY_PREFIX + id)
|
||||
}
|
||||
|
||||
export function deriveTitleFromFirstMessage(text: string): string {
|
||||
const trimmed = text.trim().split(/\s+/).slice(0, 8).join(" ")
|
||||
return trimmed.length > 60 ? trimmed.slice(0, 57) + "…" : trimmed || "New conversation"
|
||||
}
|
||||
@@ -16,7 +16,7 @@ import { CommandBusProvider } from "@crema/action-bus"
|
||||
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@@ -24,11 +24,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
||||
<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');}catch(e){}})();`,
|
||||
__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>
|
||||
<body suppressHydrationWarning>
|
||||
{children}
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
|
||||
@@ -7,5 +7,6 @@ export default [
|
||||
route("assistant", "routes/assistant.tsx"),
|
||||
route("library", "routes/library.tsx"),
|
||||
route("settings", "routes/settings.tsx"),
|
||||
route("profile", "routes/profile.tsx"),
|
||||
// CREMA:ROUTES
|
||||
] satisfies RouteConfig
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,8 @@
|
||||
import { BookOpen } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { BookOpen, Copy, Download, Trash2, MessagesSquare } from "lucide-react"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -8,36 +10,196 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
import {
|
||||
deleteLibraryItem,
|
||||
useLibrary,
|
||||
type LibraryItem,
|
||||
} from "~/lib/library"
|
||||
|
||||
export const meta = () => pageTitle("Library")
|
||||
|
||||
export default function LibraryRoute() {
|
||||
const items = useLibrary()
|
||||
const [query, setQuery] = useState("")
|
||||
const [openId, setOpenId] = useState<string | null>(null)
|
||||
|
||||
const filtered = items.filter((it) => {
|
||||
if (!query.trim()) return true
|
||||
const q = query.toLowerCase()
|
||||
return (
|
||||
it.title.toLowerCase().includes(q) ||
|
||||
it.content.toLowerCase().includes(q) ||
|
||||
it.tags.some((t) => t.toLowerCase().includes(q))
|
||||
)
|
||||
})
|
||||
|
||||
const open = items.find((x) => x.id === openId) ?? null
|
||||
|
||||
return (
|
||||
<AppShell title="Library">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Library</CardTitle>
|
||||
<CardDescription>
|
||||
Saved items, templates, and reusable artifacts.
|
||||
Saved items and templates. Save a chat from the Assistant via the
|
||||
⋯ menu → "Save to Library".
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
|
||||
<div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
|
||||
<BookOpen className="size-6" />
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<Input
|
||||
data-action="library-search"
|
||||
placeholder="Search saved items…"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
|
||||
{items.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<div className="grid gap-3 md:grid-cols-[18rem_1fr]">
|
||||
<ul className="flex max-h-[60vh] flex-col gap-1 overflow-y-auto rounded-lg border bg-card/40 p-2">
|
||||
{filtered.length === 0 && (
|
||||
<li className="px-2 py-3 text-sm text-muted-foreground">
|
||||
No matches.
|
||||
</li>
|
||||
)}
|
||||
{filtered.map((it) => (
|
||||
<li key={it.id}>
|
||||
<button
|
||||
type="button"
|
||||
data-action={`library-open-${it.id}`}
|
||||
onClick={() => setOpenId(it.id)}
|
||||
className={
|
||||
"flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left transition-colors " +
|
||||
(openId === it.id
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "hover:bg-accent hover:text-accent-foreground")
|
||||
}
|
||||
>
|
||||
<span className="mt-0.5 shrink-0">
|
||||
{it.kind === "conversation" ? (
|
||||
<MessagesSquare className="size-4 text-muted-foreground" />
|
||||
) : (
|
||||
<BookOpen className="size-4 text-muted-foreground" />
|
||||
)}
|
||||
</span>
|
||||
<span className="flex min-w-0 flex-col">
|
||||
<span className="line-clamp-1 text-sm font-medium">
|
||||
{it.title}
|
||||
</span>
|
||||
<span className="line-clamp-1 text-[11px] text-muted-foreground">
|
||||
{it.agentName ? `${it.agentName} · ` : ""}
|
||||
{it.messageCount
|
||||
? `${it.messageCount} msg · `
|
||||
: ""}
|
||||
{new Date(it.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="min-w-0">
|
||||
{open ? <Detail item={open} /> : <PickAnItem />}
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-md">
|
||||
<p className="font-medium">Library is empty</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
A home for AI-generated artifacts and saved snippets — pair
|
||||
with <code className="font-mono text-xs">@crema/artifact-ui</code>{" "}
|
||||
when you start producing them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
|
||||
<div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
|
||||
<BookOpen className="size-6" />
|
||||
</div>
|
||||
<div className="max-w-md">
|
||||
<p className="font-medium">Library is empty</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Save a conversation from the Assistant via the ⋯ menu →{" "}
|
||||
<span className="font-medium">Save to Library</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PickAnItem() {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center rounded-lg border border-dashed border-muted-foreground/20 p-12 text-center text-sm text-muted-foreground">
|
||||
Pick an item to view.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Detail({ item }: { item: LibraryItem }) {
|
||||
const copy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(item.content)
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
const download = () => {
|
||||
const blob = new Blob([item.content], {
|
||||
type: "text/markdown;charset=utf-8",
|
||||
})
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
const slug = item.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 60) || "item"
|
||||
a.download = `${slug}.md`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
const remove = () => {
|
||||
if (window.confirm(`Delete "${item.title}"?`)) deleteLibraryItem(item.id)
|
||||
}
|
||||
return (
|
||||
<div className="flex max-h-[60vh] flex-col rounded-lg border bg-card/40">
|
||||
<div className="flex items-start gap-2 border-b px-3 py-2">
|
||||
<div className="flex flex-1 flex-col">
|
||||
<span className="font-medium">{item.title}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{item.agentName ? `${item.agentName} · ` : ""}
|
||||
{item.messageCount ? `${item.messageCount} msg · ` : ""}
|
||||
{new Date(item.createdAt).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
data-action={`library-copy-${item.id}`}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={copy}
|
||||
>
|
||||
<Copy className="size-3.5" /> Copy
|
||||
</Button>
|
||||
<Button
|
||||
data-action={`library-download-${item.id}`}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={download}
|
||||
>
|
||||
<Download className="size-3.5" /> Download
|
||||
</Button>
|
||||
<Button
|
||||
data-action={`library-delete-${item.id}`}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={remove}
|
||||
>
|
||||
<Trash2 className="size-3.5 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
<pre className="flex-1 overflow-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed">
|
||||
{item.content}
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
288
app/routes/profile.tsx
Normal file
288
app/routes/profile.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { Check, Trash2 } from "lucide-react"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { Textarea } from "~/components/ui/textarea"
|
||||
import { useAgents } from "~/lib/agents"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
import {
|
||||
DEFAULT_PROFILE,
|
||||
profileInitials,
|
||||
resetProfile,
|
||||
saveProfile,
|
||||
useProfile,
|
||||
type Profile,
|
||||
} from "~/lib/profile"
|
||||
|
||||
export const meta = () => pageTitle("Profile")
|
||||
|
||||
export default function ProfileRoute() {
|
||||
const profile = useProfile()
|
||||
const agents = useAgents()
|
||||
const [draft, setDraft] = useState<Profile>(profile)
|
||||
const [savedAt, setSavedAt] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
setDraft(profile)
|
||||
}, [profile])
|
||||
|
||||
const dirty = JSON.stringify(draft) !== JSON.stringify(profile)
|
||||
const initials = profileInitials(draft.name || DEFAULT_PROFILE.name)
|
||||
|
||||
const onPickAvatar = (file: File | null) => {
|
||||
if (!file) {
|
||||
setDraft((d) => ({ ...d, avatarUrl: "" }))
|
||||
return
|
||||
}
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const result = reader.result
|
||||
if (typeof result === "string")
|
||||
setDraft((d) => ({ ...d, avatarUrl: result }))
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
saveProfile(draft)
|
||||
setSavedAt(Date.now())
|
||||
}
|
||||
|
||||
const defaultAgent =
|
||||
agents.find((a) => a.id === draft.defaultAgentId) ?? null
|
||||
|
||||
return (
|
||||
<AppShell title="Profile">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>You</CardTitle>
|
||||
<CardDescription>
|
||||
Personal info shown across the app — appbar avatar, signatures, and
|
||||
anywhere the assistant references you.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-6">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<Avatar className="size-20 ring-2 ring-primary/30">
|
||||
{draft.avatarUrl ? (
|
||||
<AvatarImage src={draft.avatarUrl} alt={draft.name} />
|
||||
) : null}
|
||||
<AvatarFallback className="bg-primary text-lg font-semibold text-primary-foreground">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="inline-flex w-fit cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground">
|
||||
<input
|
||||
data-action="profile-avatar-upload"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="sr-only"
|
||||
onChange={(e) => onPickAvatar(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
Upload avatar
|
||||
</label>
|
||||
{draft.avatarUrl && (
|
||||
<Button
|
||||
data-action="profile-avatar-remove"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onPickAvatar(null)}
|
||||
className="w-fit text-muted-foreground"
|
||||
>
|
||||
<Trash2 className="size-3.5" /> Remove
|
||||
</Button>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
PNG, JPG, or SVG. Stored locally as a data URL.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Field label="Name">
|
||||
<Input
|
||||
data-action="profile-name"
|
||||
value={draft.name}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, name: e.target.value }))
|
||||
}
|
||||
autoComplete="name"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Email">
|
||||
<Input
|
||||
data-action="profile-email"
|
||||
type="email"
|
||||
value={draft.email}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, email: e.target.value }))
|
||||
}
|
||||
autoComplete="email"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Title" hint="Your role at work.">
|
||||
<Input
|
||||
data-action="profile-title"
|
||||
value={draft.title}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, title: e.target.value }))
|
||||
}
|
||||
placeholder="e.g. Product designer"
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Default agent"
|
||||
hint="Used as the active persona on first load."
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
data-action="profile-default-agent"
|
||||
className="inline-flex h-9 items-center justify-between gap-2 rounded-md border bg-background px-3 text-sm hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<span className="truncate">
|
||||
{defaultAgent ? (
|
||||
<>
|
||||
<span className="font-medium">{defaultAgent.name}</span>
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
— {defaultAgent.role}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
"Use first available"
|
||||
)}
|
||||
</span>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-64">
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
setDraft((d) => ({ ...d, defaultAgentId: "" }))
|
||||
}
|
||||
data-state={!draft.defaultAgentId ? "checked" : undefined}
|
||||
>
|
||||
First available
|
||||
</DropdownMenuItem>
|
||||
{agents.map((a) => (
|
||||
<DropdownMenuItem
|
||||
key={a.id}
|
||||
onClick={() =>
|
||||
setDraft((d) => ({ ...d, defaultAgentId: a.id }))
|
||||
}
|
||||
data-state={
|
||||
draft.defaultAgentId === a.id ? "checked" : undefined
|
||||
}
|
||||
className="flex flex-col items-start"
|
||||
>
|
||||
<span className="font-medium">{a.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{a.role}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
label="Bio"
|
||||
hint="A short blurb the assistant can reference (e.g. 'I work mostly in TypeScript')."
|
||||
>
|
||||
<Textarea
|
||||
data-action="profile-bio"
|
||||
value={draft.bio}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, bio: e.target.value }))
|
||||
}
|
||||
rows={3}
|
||||
placeholder="Tell the assistant about you."
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Signature"
|
||||
hint="Appended automatically when you ask the assistant to draft an email or note."
|
||||
>
|
||||
<Textarea
|
||||
data-action="profile-signature"
|
||||
value={draft.signature}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, signature: e.target.value }))
|
||||
}
|
||||
rows={3}
|
||||
placeholder={`Cheers,\n${draft.name || "Your name"}`}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
data-action="profile-save"
|
||||
onClick={save}
|
||||
disabled={!dirty}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
data-action="profile-revert"
|
||||
variant="ghost"
|
||||
onClick={() => setDraft(profile)}
|
||||
disabled={!dirty}
|
||||
>
|
||||
Revert
|
||||
</Button>
|
||||
<Button
|
||||
data-action="profile-reset"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
resetProfile()
|
||||
setSavedAt(Date.now())
|
||||
}}
|
||||
>
|
||||
Reset to defaults
|
||||
</Button>
|
||||
{savedAt && !dirty && (
|
||||
<span className="inline-flex items-center gap-1 text-sm text-emerald-700 dark:text-emerald-400">
|
||||
<Check className="size-4" /> Saved.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
label: string
|
||||
hint?: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<label className="flex flex-col gap-1.5">
|
||||
<span className="text-sm font-medium">{label}</span>
|
||||
{children}
|
||||
{hint && <span className="text-xs text-muted-foreground">{hint}</span>}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,16 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { Check, X, Loader2 } from "lucide-react"
|
||||
import {
|
||||
Check,
|
||||
X,
|
||||
Loader2,
|
||||
Cpu,
|
||||
Palette,
|
||||
User as UserIcon,
|
||||
Info,
|
||||
Users,
|
||||
Plus,
|
||||
Trash2,
|
||||
} from "lucide-react"
|
||||
import { listModels } from "@crema/llm-ui"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
@@ -12,16 +23,54 @@ import {
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { Textarea } from "~/components/ui/textarea"
|
||||
import {
|
||||
DEFAULT_SETTINGS,
|
||||
DEFAULT_SYSTEM_PROMPT,
|
||||
saveLLMSettings,
|
||||
useLLMSettings,
|
||||
type LLMSettings,
|
||||
} from "~/lib/llm-settings"
|
||||
import {
|
||||
loadActiveAgentId,
|
||||
newAgentId,
|
||||
resetAgents,
|
||||
saveActiveAgentId,
|
||||
saveAgents,
|
||||
useAgents,
|
||||
type Agent,
|
||||
} from "~/lib/agents"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
|
||||
export const meta = () => pageTitle("Settings")
|
||||
|
||||
const SECTION_KEY = "crema.settings.section"
|
||||
|
||||
type SectionId = "llm" | "agents" | "appearance" | "account" | "about"
|
||||
|
||||
const sections: {
|
||||
id: SectionId
|
||||
label: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
description: string
|
||||
}[] = [
|
||||
{ id: "llm", label: "LLM", icon: Cpu, description: "Model endpoint & budgets" },
|
||||
{
|
||||
id: "agents",
|
||||
label: "Agents",
|
||||
icon: Users,
|
||||
description: "Personas, roles, sub-prompts",
|
||||
},
|
||||
{
|
||||
id: "appearance",
|
||||
label: "Appearance",
|
||||
icon: Palette,
|
||||
description: "Theme, font size, surface, background",
|
||||
},
|
||||
{ id: "account", label: "Account", icon: UserIcon, description: "Profile & preferences" },
|
||||
{ id: "about", label: "About", icon: Info, description: "Version & credits" },
|
||||
]
|
||||
|
||||
type TestState =
|
||||
| { kind: "idle" }
|
||||
| { kind: "running" }
|
||||
@@ -69,117 +118,259 @@ export default function SettingsRoute() {
|
||||
setDraft(DEFAULT_SETTINGS)
|
||||
}
|
||||
|
||||
const [section, setSection] = useState<SectionId>(() => {
|
||||
if (typeof window === "undefined") return "llm"
|
||||
const stored = localStorage.getItem(SECTION_KEY)
|
||||
return sections.some((s) => s.id === stored)
|
||||
? (stored as SectionId)
|
||||
: "llm"
|
||||
})
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined")
|
||||
localStorage.setItem(SECTION_KEY, section)
|
||||
}, [section])
|
||||
|
||||
return (
|
||||
<AppShell title="Settings">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>LLM</CardTitle>
|
||||
<CardDescription>
|
||||
Configure the local model endpoint and context budgets used by the
|
||||
Assistant.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
<Field
|
||||
label="Base URL"
|
||||
hint="OpenAI-compatible endpoint. LM Studio defaults to http://localhost:1234/v1."
|
||||
>
|
||||
<Input
|
||||
data-action="settings-base-url"
|
||||
value={draft.baseURL}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, baseURL: e.target.value }))
|
||||
}
|
||||
placeholder="http://localhost:1234/v1"
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Field>
|
||||
<div className="grid gap-6 md:grid-cols-[14rem_1fr]">
|
||||
<nav
|
||||
aria-label="Settings sections"
|
||||
className="flex flex-row gap-1 overflow-x-auto md:flex-col md:gap-0.5"
|
||||
>
|
||||
{sections.map((s) => {
|
||||
const Icon = s.icon
|
||||
const active = section === s.id
|
||||
return (
|
||||
<button
|
||||
key={s.id}
|
||||
type="button"
|
||||
data-action={`settings-section-${s.id}`}
|
||||
onClick={() => setSection(s.id)}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={[
|
||||
"group flex shrink-0 items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors duration-fast ease-standard",
|
||||
active
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
|
||||
].join(" ")}
|
||||
>
|
||||
<Icon className="size-4 shrink-0" />
|
||||
<span className="flex flex-col">
|
||||
<span className="font-medium leading-tight">{s.label}</span>
|
||||
<span
|
||||
className={[
|
||||
"hidden text-xs leading-tight md:inline",
|
||||
active ? "text-primary/80" : "text-muted-foreground/80",
|
||||
].join(" ")}
|
||||
>
|
||||
{s.description}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<Field
|
||||
label="Context window (tokens)"
|
||||
hint="Match this to the context length you've loaded in LM Studio."
|
||||
>
|
||||
<Input
|
||||
data-action="settings-context-tokens"
|
||||
type="number"
|
||||
min={1024}
|
||||
step={512}
|
||||
value={draft.contextTokens}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({
|
||||
...d,
|
||||
contextTokens: Number(e.target.value) || d.contextTokens,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<div className="min-w-0">
|
||||
{section === "llm" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>LLM</CardTitle>
|
||||
<CardDescription>
|
||||
Configure the local model endpoint and context budgets used
|
||||
by the Assistant.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
<Field
|
||||
label="Base URL"
|
||||
hint="OpenAI-compatible endpoint. LM Studio defaults to http://localhost:1234/v1."
|
||||
>
|
||||
<Input
|
||||
data-action="settings-base-url"
|
||||
value={draft.baseURL}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, baseURL: e.target.value }))
|
||||
}
|
||||
placeholder="http://localhost:1234/v1"
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Response cap (max tokens)"
|
||||
hint="Upper bound on each model reply. Smaller = faster, less rambling."
|
||||
>
|
||||
<Input
|
||||
data-action="settings-response-budget"
|
||||
type="number"
|
||||
min={64}
|
||||
step={64}
|
||||
value={draft.responseBudget}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({
|
||||
...d,
|
||||
responseBudget: Number(e.target.value) || d.responseBudget,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Context window (tokens)"
|
||||
hint="Match this to the context length you've loaded in LM Studio."
|
||||
>
|
||||
<Input
|
||||
data-action="settings-context-tokens"
|
||||
type="number"
|
||||
min={1024}
|
||||
step={512}
|
||||
value={draft.contextTokens}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({
|
||||
...d,
|
||||
contextTokens:
|
||||
Number(e.target.value) || d.contextTokens,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
data-action="settings-save"
|
||||
onClick={save}
|
||||
disabled={!dirty}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
data-action="settings-test"
|
||||
variant="outline"
|
||||
onClick={runTest}
|
||||
disabled={test.kind === "running"}
|
||||
>
|
||||
{test.kind === "running" ? (
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
) : test.kind === "ok" ? (
|
||||
<Check className="size-4 text-emerald-600" />
|
||||
) : test.kind === "fail" ? (
|
||||
<X className="size-4 text-destructive" />
|
||||
) : null}
|
||||
Test connection
|
||||
</Button>
|
||||
<Button
|
||||
data-action="settings-reset"
|
||||
variant="outline"
|
||||
onClick={reset}
|
||||
>
|
||||
Reset to defaults
|
||||
</Button>
|
||||
{savedAt && !dirty && (
|
||||
<span className="text-sm text-muted-foreground">Saved.</span>
|
||||
)}
|
||||
{test.kind === "ok" && (
|
||||
<span className="text-sm text-emerald-700 dark:text-emerald-400">
|
||||
{test.count} model{test.count === 1 ? "" : "s"} available.
|
||||
</span>
|
||||
)}
|
||||
{test.kind === "fail" && (
|
||||
<span className="text-sm text-destructive" title={test.reason}>
|
||||
Failed: {test.reason.slice(0, 60)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Field
|
||||
label="System prompt"
|
||||
hint="Sent at the start of every conversation. Shapes the assistant's persona and scope. UI Control adds an action-driving preface on top of this when enabled."
|
||||
>
|
||||
<Textarea
|
||||
data-action="settings-system-prompt"
|
||||
value={draft.systemPrompt}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({ ...d, systemPrompt: e.target.value }))
|
||||
}
|
||||
rows={5}
|
||||
spellCheck={false}
|
||||
className="min-h-24 font-mono text-xs"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-action="settings-system-prompt-reset"
|
||||
onClick={() =>
|
||||
setDraft((d) => ({
|
||||
...d,
|
||||
systemPrompt: DEFAULT_SYSTEM_PROMPT,
|
||||
}))
|
||||
}
|
||||
className="self-start text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Reset to default prompt
|
||||
</button>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Response cap (max tokens)"
|
||||
hint="Upper bound on each model reply. Smaller = faster, less rambling."
|
||||
>
|
||||
<Input
|
||||
data-action="settings-response-budget"
|
||||
type="number"
|
||||
min={64}
|
||||
step={64}
|
||||
value={draft.responseBudget}
|
||||
onChange={(e) =>
|
||||
setDraft((d) => ({
|
||||
...d,
|
||||
responseBudget:
|
||||
Number(e.target.value) || d.responseBudget,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
data-action="settings-save"
|
||||
onClick={save}
|
||||
disabled={!dirty}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
data-action="settings-test"
|
||||
variant="outline"
|
||||
onClick={runTest}
|
||||
disabled={test.kind === "running"}
|
||||
>
|
||||
{test.kind === "running" ? (
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
) : test.kind === "ok" ? (
|
||||
<Check className="size-4 text-emerald-600" />
|
||||
) : test.kind === "fail" ? (
|
||||
<X className="size-4 text-destructive" />
|
||||
) : null}
|
||||
Test connection
|
||||
</Button>
|
||||
<Button
|
||||
data-action="settings-reset"
|
||||
variant="outline"
|
||||
onClick={reset}
|
||||
>
|
||||
Reset to defaults
|
||||
</Button>
|
||||
{savedAt && !dirty && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Saved.
|
||||
</span>
|
||||
)}
|
||||
{test.kind === "ok" && (
|
||||
<span className="text-sm text-emerald-700 dark:text-emerald-400">
|
||||
{test.count} model{test.count === 1 ? "" : "s"} available.
|
||||
</span>
|
||||
)}
|
||||
{test.kind === "fail" && (
|
||||
<span
|
||||
className="text-sm text-destructive"
|
||||
title={test.reason}
|
||||
>
|
||||
Failed: {test.reason.slice(0, 60)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{section === "agents" && <AgentsPanel />}
|
||||
|
||||
{section === "appearance" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Appearance</CardTitle>
|
||||
<CardDescription>
|
||||
Theme, font size, surface tint, and background atmosphere are
|
||||
in the appbar — the toggles up top write to localStorage and
|
||||
persist across sessions.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Use the icons in the appbar (top right) to change theme, font
|
||||
size, surface tint, and background.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{section === "account" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Account</CardTitle>
|
||||
<CardDescription>
|
||||
Identity and profile preferences.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Wire <code className="font-mono">~/lib/identity.ts</code> to a
|
||||
real session to populate this panel.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{section === "about" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>About</CardTitle>
|
||||
<CardDescription>App version and credits.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1 text-sm text-muted-foreground">
|
||||
<p>Built on the Crema design system.</p>
|
||||
<p>
|
||||
Hybrid traditional + AI-first scaffold with a virtual cursor
|
||||
and command bus for assistant-driven UI control.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
@@ -201,3 +392,171 @@ function Field({
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function AgentsPanel() {
|
||||
const agents = useAgents()
|
||||
const [activeId, setActiveId] = useState<string>(() => loadActiveAgentId())
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
saveActiveAgentId(activeId)
|
||||
}, [activeId])
|
||||
|
||||
const editing = agents.find((a) => a.id === editingId) ?? null
|
||||
|
||||
const update = (next: Agent) => {
|
||||
saveAgents(agents.map((a) => (a.id === next.id ? next : a)))
|
||||
}
|
||||
const remove = (id: string) => {
|
||||
if (agents.length <= 1) return
|
||||
const next = agents.filter((a) => a.id !== id)
|
||||
saveAgents(next)
|
||||
if (activeId === id) setActiveId(next[0].id)
|
||||
if (editingId === id) setEditingId(null)
|
||||
}
|
||||
const create = () => {
|
||||
const id = newAgentId()
|
||||
const draft: Agent = {
|
||||
id,
|
||||
name: "New persona",
|
||||
role: "Specialist",
|
||||
prompt: "Describe what this persona is good at and how it should respond.",
|
||||
}
|
||||
saveAgents([...agents, draft])
|
||||
setEditingId(id)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Agents</CardTitle>
|
||||
<CardDescription>
|
||||
Personas with their own sub-system prompts. Switch the active one in
|
||||
the chat status bar — the assistant inherits its skills, tone, and
|
||||
scope. Lets you keep contexts focused: a coder agent doesn't carry
|
||||
writing-task context; a writer doesn't carry codebase context.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
data-action="settings-agent-new"
|
||||
onClick={create}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
<Plus className="size-4" /> New persona
|
||||
</Button>
|
||||
<Button
|
||||
data-action="settings-agent-reset"
|
||||
onClick={() => {
|
||||
resetAgents()
|
||||
setEditingId(null)
|
||||
}}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
>
|
||||
Reset to defaults
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ul className="flex flex-col gap-1.5">
|
||||
{agents.map((a) => {
|
||||
const isActive = activeId === a.id
|
||||
const isEditing = editingId === a.id
|
||||
return (
|
||||
<li
|
||||
key={a.id}
|
||||
className={[
|
||||
"rounded-lg border transition-colors",
|
||||
isEditing
|
||||
? "border-primary/40 bg-primary/5"
|
||||
: "border-border bg-card/40",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="flex items-center gap-2 px-3 py-2">
|
||||
<button
|
||||
type="button"
|
||||
data-action={`settings-agent-activate-${a.id}`}
|
||||
onClick={() => setActiveId(a.id)}
|
||||
className={[
|
||||
"size-2.5 shrink-0 rounded-full ring-2 transition-colors",
|
||||
isActive
|
||||
? "bg-primary ring-primary/30"
|
||||
: "bg-muted ring-transparent hover:ring-foreground/20",
|
||||
].join(" ")}
|
||||
aria-label={
|
||||
isActive ? `${a.name} (active)` : `Activate ${a.name}`
|
||||
}
|
||||
title={isActive ? "Active" : "Set active"}
|
||||
/>
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate text-sm font-medium">{a.name}</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{a.role}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
data-action={`settings-agent-edit-${a.id}`}
|
||||
onClick={() => setEditingId(isEditing ? null : a.id)}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
>
|
||||
{isEditing ? "Done" : "Edit"}
|
||||
</Button>
|
||||
<Button
|
||||
data-action={`settings-agent-delete-${a.id}`}
|
||||
onClick={() => remove(a.id)}
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
disabled={agents.length <= 1}
|
||||
aria-label="Delete persona"
|
||||
title="Delete persona"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{isEditing && editing && (
|
||||
<div className="flex flex-col gap-3 border-t bg-background/60 px-3 py-3">
|
||||
<Field label="Name">
|
||||
<Input
|
||||
data-action={`settings-agent-name-${a.id}`}
|
||||
value={editing.name}
|
||||
onChange={(e) =>
|
||||
update({ ...editing, name: e.target.value })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Role">
|
||||
<Input
|
||||
data-action={`settings-agent-role-${a.id}`}
|
||||
value={editing.role}
|
||||
onChange={(e) =>
|
||||
update({ ...editing, role: e.target.value })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Sub-system prompt"
|
||||
hint="Stacked on top of the main system prompt only when this persona is active."
|
||||
>
|
||||
<Textarea
|
||||
data-action={`settings-agent-prompt-${a.id}`}
|
||||
value={editing.prompt}
|
||||
onChange={(e) =>
|
||||
update({ ...editing, prompt: e.target.value })
|
||||
}
|
||||
rows={6}
|
||||
className="min-h-32 font-mono text-xs"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user