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/routes/library.tsx

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