Chat mode, phase 1: grounded streaming chat over your notes

Entry points (no sixth tab): Ask in the Library header (desktop button,
phone icon), Ask about this deck in the deck menu, Ask a question on
study/homework results (compact result travels as context), and a Chat
row in the desktop sidebar. Phones get a full-screen route with back +
New chat; the tab bar steps aside.

- Client-side retrieval: chunk scoped decks (~800 tokens), BM25 against
  the question + recent turns, top chunks under ~7k tokens, each
  labelled with deck + section. Notes come from the deck's stored
  sourceText (already kept for Regenerate); decks without it fall back
  to generated content and the UI says so.
- Stateless server: /api/chat validates against the CHAT_MODELS
  allowlist, trims the history to ~6k tokens, caps context at ~9k and
  streams token/thinking/done/error NDJSON. /api/chat/extract reduces
  attachments to text through the existing vision step.
- UI: user bubbles + full-width assistant text, streaming with stop,
  auto-scroll that pauses with a jump-to-bottom button, safe markdown
  (React nodes, no HTML injection; KaTeX dynamically imported only when
  a message has math), Thinking row for reasoning, copy/regenerate/
  edit-and-resend, model + context pickers (last model remembered),
  composer with visualViewport keyboard handling, safe-area, 16px
  textarea, Enter-to-send on desktop.
- Usage-limit failures keep the draft and show the shared message with
  Settings/Ollama actions; stopping maps the reader abort to a clean
  stopped state; offline disables sending with a reason.
- Settings: Keep notes text for chat toggle; deck menu: Delete notes
  text. RATE_LIMIT_CHAT + CHAT_MODELS in .env.example and README.
- Tests: chat suite (63 checks, stub Ollama) wired into run-all.
  Full set: 12/12 suites, 487 checks. SW -> freezmo-v32.

Also: tests/model-compare.mjs (diagnostic) benchmarks two models on the
same notes (latency, repair rounds, activity types) so the gpt-oss vs
gemma default can be decided on numbers; defaults unchanged.

components/chat/ModelPicker.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { CheckCircleIcon } from "@/components/icons";
+import { useI18n } from "@/lib/i18n";
+import { useIsPhone } from "@/lib/use-phone";
+import type { ChatModelChoice } from "@/lib/chat";
+import { cn } from "@/lib/utils";
+
+/**
+ * Model chip picker: a bottom sheet on phones, a small dropdown on desktop.
+ * The list is the server's CHAT_MODELS allowlist (from the health check) with
+ * text/vision badges and availability; picking one remembers it.
+ */
+export function ModelPicker({
+  open,
+  onClose,
+  models,
+  value,
+  onChange,
+}: {
+  open: boolean;
+  onClose: () => void;
+  models: ChatModelChoice[];
+  value: string;
+  onChange: (model: string) => void;
+}) {
+  const { t } = useI18n();
+  const isPhone = useIsPhone();
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const badge = (model: ChatModelChoice) =>
+    model.badge === "vision" ? t("chat.modelVision") : model.badge === "both" ? t("chat.modelBoth") : t("chat.modelText");
+
+  const rows = (
+    <ul className="max-h-[60dvh] space-y-1 overflow-y-auto overscroll-contain">
+      {models.map((model) => {
+        const selected = model.name === value;
+        const unavailable = model.available === false;
+        return (
+          <li key={model.name}>
+            <button
+              type="button"
+              disabled={unavailable}
+              aria-pressed={selected}
+              onClick={() => {
+                onChange(model.name);
+                onClose();
+              }}
+              className={cn(
+                "flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition",
+                selected
+                  ? "border-[var(--nav-active-border)] bg-[var(--nav-active-bg)]"
+                  : "border-[var(--hairline-soft)] bg-[var(--surface-bg)] hover:bg-[var(--hover)]",
+                unavailable && "opacity-55",
+              )}
+            >
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-[13.5px] font-semibold text-[var(--text)]">{model.name}</span>
+                <span className="mt-0.5 flex items-center gap-2 text-[11.5px] text-[var(--text-subtle)]">
+                  <span className="rounded-md border border-[var(--hairline-soft)] px-1.5 py-0.5">{badge(model)}</span>
+                  {model.available === true ? (
+                    <span className="text-emerald-600 dark:text-emerald-300">{t("chat.modelAvailable")}</span>
+                  ) : model.available === false ? (
+                    <span className="text-amber-600 dark:text-amber-300">{t("chat.modelUnavailable")}</span>
+                  ) : null}
+                </span>
+              </span>
+              {selected ? <CheckCircleIcon className="size-5 shrink-0 text-accent-500" /> : null}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  if (isPhone) {
+    return (
+      <div className="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label={t("chat.modelTitle")}>
+        <button type="button" className="absolute inset-0 bg-black/45" aria-label={t("common.close")} onClick={onClose} />
+        <div className="glass-panel absolute inset-x-0 bottom-0 max-h-[80dvh] rounded-b-none px-4 pb-safe pt-2">
+          <div className="sheet-grabber mx-auto" aria-hidden />
+          <h2 className="px-1 pb-3 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.modelTitle")}</h2>
+          {rows}
+          <p className="px-1 py-3 text-[11.5px] text-[var(--text-subtle)]">{t("chat.modelNote")}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="glass-panel absolute bottom-full right-0 z-40 mb-2 w-80 p-3"
+      role="dialog"
+      aria-label={t("chat.modelTitle")}
+    >
+      <h2 className="px-1 pb-2 text-[13px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
+        {t("chat.modelTitle")}
+      </h2>
+      {rows}
+      <p className="px-1 pt-2 text-[11.5px] text-[var(--text-subtle)]">{t("chat.modelNote")}</p>
+    </div>
+  );
+}