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/lib/profile.ts

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