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/MessageRow.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import Link from "next/link";
+
+import { CopyIconButton } from "./CopyIconButton";
+import { Markdown } from "./Markdown";
+import { ThinkingRow } from "./ThinkingRow";
+import { Button } from "@/components/ui";
+import { ModelErrorActions } from "@/components/ModelErrorActions";
+import { PencilIcon, RefreshIcon } from "@/components/icons";
+import { useI18n } from "@/lib/i18n";
+import type { ChatMessage } from "@/lib/chat";
+
+/**
+ * One turn: user bubbles on the right, assistant answers as full-width text
+ * (no bubble) with the Thinking row, sources, actions and error recovery.
+ */
+export function MessageRow({
+  message,
+  streaming,
+  isLastAssistant,
+  isLastUser,
+  busy,
+  onRegenerate,
+  onEdit,
+  onRetry,
+}: {
+  message: ChatMessage;
+  streaming?: boolean;
+  isLastAssistant?: boolean;
+  isLastUser?: boolean;
+  busy?: boolean;
+  onRegenerate?: () => void;
+  onEdit?: () => void;
+  onRetry?: () => void;
+}) {
+  const { t } = useI18n();
+
+  if (message.role === "user") {
+    return (
+      <div className="flex flex-col items-end gap-1">
+        <div className="max-w-[88%] rounded-3xl rounded-br-lg border border-[var(--glass-border)] bg-[var(--surface-strong)] px-3.5 py-2.5">
+          <p className="whitespace-pre-wrap break-words text-[15px] leading-relaxed text-[var(--text)]">{message.content}</p>
+          {message.attachments && message.attachments.length > 0 ? (
+            <p className="mt-1.5 text-[11.5px] text-[var(--text-subtle)]">
+              {message.attachments.map((attachment) => attachment.name).join(" · ")}
+            </p>
+          ) : null}
+        </div>
+        {isLastUser && !busy && onEdit ? (
+          <button
+            type="button"
+            onClick={onEdit}
+            className="flex items-center gap-1 rounded-lg px-1.5 py-1 text-[11.5px] text-[var(--text-subtle)] transition hover:text-[var(--text)]"
+          >
+            <PencilIcon className="size-3.5" />
+            {t("chat.edit")}
+          </button>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {message.thinking ? <ThinkingRow thinking={message.thinking} streaming={streaming && !message.content} /> : null}
+      {message.content ? (
+        <Markdown text={message.content} />
+      ) : streaming ? (
+        <span className="flex items-center gap-1 py-1" role="status" aria-label={t("chat.thinking")}>
+          {[0, 1, 2].map((dot) => (
+            <span
+              key={dot}
+              className="size-1.5 animate-bounce rounded-full bg-[var(--text-subtle)] motion-reduce:animate-none motion-reduce:opacity-60"
+              style={{ animationDelay: `${dot * 120}ms` }}
+            />
+          ))}
+        </span>
+      ) : null}
+
+      {message.error ? (
+        <div
+          role="alert"
+          className="rounded-2xl border border-rose-300/60 bg-rose-50/70 p-3 dark:border-rose-400/30 dark:bg-rose-500/10"
+        >
+          <p className="text-[13px] leading-relaxed text-rose-800 dark:text-rose-200">{message.error.message}</p>
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            {onRetry ? (
+              <Button size="sm" variant="secondary" onClick={onRetry}>
+                <RefreshIcon className="size-4" /> {t("chat.retry")}
+              </Button>
+            ) : null}
+            <ModelErrorActions kind={message.error.kind} />
+          </div>
+        </div>
+      ) : null}
+
+      {!streaming && message.content && !message.error ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <CopyIconButton text={message.content} />
+          {isLastAssistant && !busy && onRegenerate ? (
+            <button
+              type="button"
+              onClick={onRegenerate}
+              className="flex items-center gap-1.5 rounded-xl border border-[var(--glass-border)] bg-[var(--surface-strong)] px-2.5 py-2 text-[12px] font-medium text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
+            >
+              <RefreshIcon className="size-3.5" />
+              {t("chat.regenerate")}
+            </button>
+          ) : null}
+          {message.model ? <span className="text-[11px] text-[var(--text-subtle)]">{message.model}</span> : null}
+        </div>
+      ) : null}
+
+      {message.sources && message.sources.length > 0 && !streaming ? (
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="text-[11px] uppercase tracking-wide text-[var(--text-subtle)]">{t("chat.sources")}</span>
+          {message.sources.slice(0, 5).map((source, index) => (
+            <Link
+              key={`${source.deckId}-${source.section}-${index}`}
+              href={`/deck/${source.deckId}`}
+              className="max-w-[220px] truncate rounded-lg border border-[var(--hairline-soft)] bg-[var(--surface-sunken)] px-2 py-1 text-[11.5px] text-[var(--text-muted)] transition hover:text-[var(--text)]"
+              title={`${source.deckTitle} — ${source.section}`}
+            >
+              {source.deckTitle} · {source.section}
+            </Link>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}