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