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>

app/components/layout/app-shell.tsx

@@ -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>

app/components/layout/background-picker.tsx

@@ -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>
+  )
+}

app/components/layout/font-size-picker.tsx

@@ -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>
+  )
+}

app/components/layout/surface-picker.tsx

@@ -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>
+  )
+}