v1.9: settings pane + per-project defaults + bulk archive + themes lift

Adds a singleton, ephemeral 'settings' pane kind to the workspace.
Opened via a new bottom-pinned button in ProjectSidebar (emits an
open_settings_pane event when a session is mounted; navigates to
/settings otherwise). Pane has three sections — Session, Project,
Theme — and a maximize toggle that hides sibling pane columns via
display:none on desktop only. Settings panes don't count toward
MAX_PANES and are filtered out of the localStorage persistence layer
so reload always restores a clean workspace.

Schema (additive):
- projects.default_system_prompt TEXT NOT NULL DEFAULT ''
- projects.default_web_search_enabled BOOLEAN NOT NULL DEFAULT false
- sessions.web_search_enabled BOOLEAN  (nullable; null = inherit)

Inference resolves user_prompt = session.system_prompt.trim() ||
project.default_system_prompt.trim() — empty/whitespace at either
layer means "no override". Keeps the columns NOT NULL and matches
the existing inherit semantics.

Server routes:
- GET /api/projects/:id (new; settings pane refetches on
  project_updated)
- PATCH /api/projects/:id accepts default_system_prompt,
  default_web_search_enabled
- PATCH /api/sessions/:id accepts web_search_enabled (tri-state)
- POST /api/projects/:id/sessions/archive-all + GET
  /api/projects/:id/sessions/open-count
- POST /api/sessions/:id/chats/archive-all + GET
  /api/sessions/:id/chats/open-count
- PATCH /api/sessions/:id now broadcasts session_updated on every
  successful PATCH (was rename-only). Lets SettingsPane open in
  another tab pick up edits without a refetch.

Bulk-archive publishes one session_archived / chat_archived frame
per affected id so useSidebar's existing reducer cases handle them
incrementally — no new frame type, no payload widening.

ModelPicker refactored: shared ModelList inside a responsive shell.
Desktop = labeled trigger + DropdownMenu, mobile = icon-only Cpu
button + BottomSheet. Header in Session.tsx drops the pill wrap on
mobile since the new trigger is the visual.

ChatInput gains an icon-only '+' DropdownMenu next to AgentPicker
when sessionId + webSearchEnabled props are provided. One item for
now — Web search — with a checkmark reflecting the stored value
(true), not the effective one. Click PATCHes the override; to
restore inherit-from-project the user opens SettingsPane.

ThemePicker lifted out of pages/Settings.tsx into a reusable
component. The standalone /settings route is now a thin wrapper
that mounts <ThemePicker /> with a Back button on top
(navigate(-1) with fallback to '/'); the SettingsPane Theme tab
renders the same picker bare.

Project section delete-flow removed (button + confirm dialog +
handler). Replaced with "Archive all sessions" using the same
two-step count → confirm → fire pattern as "Archive all chats" in
the Session section. api.projects.remove() stays in the client
because useProjects.ts still uses it.

Hand-rolled Switch primitive in SettingsPane (no shadcn switch in
the project; spec said no new deps). Section nav is plain buttons
(no shadcn Tabs).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/ThemePicker.tsx

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { Check } from 'lucide-react';
+import { toast } from 'sonner';
+import { Card } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { THEMES, setTheme, useTheme, type ThemeId, type ThemeMode } from '@/lib/theme';
+import { cn } from '@/lib/utils';
+
+// v1.9: lifted out of pages/Settings.tsx so the SettingsPane Theme tab and
+// the standalone /settings route render the same picker. Theme is global —
+// not per-project, not per-session — so no contextual props are needed.
+
+const MODES: { value: ThemeMode; label: string; hint: string }[] = [
+  { value: 'dark', label: 'Dark', hint: 'Use the dark variant.' },
+  { value: 'light', label: 'Light', hint: 'Use the light variant.' },
+  { value: 'system', label: 'System', hint: 'Follow OS preference.' },
+];
+
+export function ThemePicker() {
+  const { id: currentId, mode: currentMode } = useTheme();
+  // Track the most recent in-flight pick so the picker can show a subtle
+  // "applying…" state on the targeted card while the PATCH is in flight.
+  const [pending, setPending] = useState<
+    { kind: 'theme'; id: ThemeId } | { kind: 'mode'; mode: ThemeMode } | null
+  >(null);
+
+  async function pickTheme(id: ThemeId) {
+    if (id === currentId || pending) return;
+    setPending({ kind: 'theme', id });
+    try {
+      await setTheme(id, currentMode);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'failed to apply theme');
+    } finally {
+      setPending(null);
+    }
+  }
+
+  async function pickMode(mode: ThemeMode) {
+    if (mode === currentMode || pending) return;
+    setPending({ kind: 'mode', mode });
+    try {
+      await setTheme(currentId, mode);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'failed to apply mode');
+    } finally {
+      setPending(null);
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      <section className="space-y-3">
+        <h2 className="text-sm font-medium">Mode</h2>
+        <RadioGroup
+          value={currentMode}
+          onValueChange={(v) => void pickMode(v as ThemeMode)}
+          className="flex flex-wrap gap-4"
+        >
+          {MODES.map((m) => (
+            <div key={m.value} className="flex items-center gap-2">
+              <RadioGroupItem id={`mode-${m.value}`} value={m.value} />
+              <Label htmlFor={`mode-${m.value}`} className="cursor-pointer">
+                <span className="font-medium">{m.label}</span>
+                <span className="ml-2 text-xs text-muted-foreground">{m.hint}</span>
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      </section>
+
+      <section className="space-y-3">
+        <h2 className="text-sm font-medium">Theme</h2>
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+          {THEMES.map((t) => {
+            const isActive = t.id === currentId;
+            const isPending = pending?.kind === 'theme' && pending.id === t.id;
+            const isLightOnly = !t.supportsDark;
+            return (
+              <Card
+                key={t.id}
+                onClick={() => void pickTheme(t.id)}
+                className={cn(
+                  'p-3 cursor-pointer transition-colors',
+                  'hover:bg-accent/10',
+                  isActive && 'ring-2 ring-ring',
+                  isPending && 'opacity-60',
+                )}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className="min-w-0">
+                    <div className="font-mono text-sm truncate">{t.name}</div>
+                    <div className="text-xs text-muted-foreground">{t.family}</div>
+                  </div>
+                  {isActive && (
+                    <span className="inline-flex items-center gap-1 text-xs text-primary shrink-0">
+                      <Check className="size-3" /> Selected
+                    </span>
+                  )}
+                </div>
+                <div className="flex mt-2 rounded overflow-hidden border border-border/40">
+                  {t.anchors.map((hex, i) => (
+                    <div
+                      key={i}
+                      className="flex-1 h-6"
+                      style={{ backgroundColor: hex }}
+                      aria-hidden="true"
+                    />
+                  ))}
+                </div>
+                {isLightOnly && (
+                  <div className="mt-2 text-xs text-muted-foreground italic">Light only</div>
+                )}
+              </Card>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+}