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