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>