nlm-memory 0.4.0

package/src/ui/pages/Thread.tsx

@@ -0,0 +1,262 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import { useDataset, relativeAge } from "../lib/dataset.js";
+import type { DatasetSession } from "../lib/dataset.js";
+import { SessionDrawer } from "../components/SessionDrawer.js";
+import { PromoteOpenButton } from "../components/PromoteOpenButton.js";
+import { SessionListSkeleton, Skeleton } from "../components/Skeleton.js";
+import { readViewSettings, type ThreadSort } from "../lib/view-settings.js";
+
+export function ThreadPage() {
+  const { data, loading, error, refetch } = useDataset();
+  const [params, setParams] = useSearchParams();
+  const entity = params.get("entity") ?? "";
+  const drawerSid = params.get("session");
+
+  const [sort, setSort] = useState<ThreadSort>(() => readViewSettings().threadSort);
+
+  const thread = useMemo(() => {
+    if (!data || !entity) return [];
+    const sessions = data.sessions.filter((s) => s.entities.includes(entity));
+    sessions.sort((a, b) => {
+      const av = a.started_at ?? "";
+      const bv = b.started_at ?? "";
+      return sort === "recent" ? bv.localeCompare(av) : av.localeCompare(bv);
+    });
+    return sessions;
+  }, [data, entity, sort]);
+
+  const entityColor = entity && data ? (data.entity_colors[entity] ?? "#666") : "#666";
+
+  useEffect(() => {
+    if (entity && data) document.title = `${entity} — Thread`;
+  }, [entity, data]);
+
+  const openSession = (id: string) => {
+    const next = new URLSearchParams(params);
+    next.set("session", id);
+    setParams(next);
+  };
+
+  const closeSession = () => {
+    const next = new URLSearchParams(params);
+    next.delete("session");
+    setParams(next);
+  };
+
+  if (loading && !data) return (
+    <div className="page-pad">
+      <Skeleton h={22} w={220} />
+      <div style={{ marginTop: 16 }}><SessionListSkeleton rows={8} /></div>
+    </div>
+  );
+  if (error && !data) return <div className="page-pad"><div className="muted error">{error}</div></div>;
+  if (!data) return null;
+
+  if (!entity) {
+    return (
+      <div className="page-pad">
+        <h2 className="page-title">Thread</h2>
+        <p className="muted">Pick an entity to view its reasoning history.</p>
+        <ul className="entity-grid">
+          {data.entities.slice(0, 48).map((e) => (
+            <li key={e.canonical}>
+              <Link to={`/thread?entity=${encodeURIComponent(e.canonical)}`} className="card card-lift entity-card">
+                <span className="dot" style={{ background: data.entity_colors[e.canonical] ?? "#666" }} />
+                <span className="entity-name">{e.canonical}</span>
+                <span className="muted small">{e.session_count}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  const decisions = thread.flatMap((s) => s.decisions.map((d) => ({ d, sid: s.id, when: s.started_at })));
+  const open = thread.flatMap((s) =>
+    s.open_questions.map((q) => ({ id: q.id, q: q.text, sid: s.id, when: s.started_at })),
+  );
+
+  return (
+    <div className="page-pad">
+      <div className="thread-header">
+        <span className="dot lg" style={{ background: entityColor }} />
+        <h2 className="page-title">{entity}</h2>
+        <span className="muted">{thread.length} session{thread.length === 1 ? "" : "s"}</span>
+        <span className="header-spacer" />
+        <select className="form-input" value={sort} onChange={(e) => setSort(e.target.value as "recent" | "oldest")}>
+          <option value="recent">Most recent first</option>
+          <option value="oldest">Oldest first</option>
+        </select>
+      </div>
+
+      <div className="thread-grid">
+        <section className="card">
+          <header className="card-head"><h3>Decisions</h3><span className="muted small">{decisions.length}</span></header>
+          <ul className="marker-list">
+            {decisions.slice(0, 30).map((d, i) => (
+              <li key={i} className="marker-row">
+                <span className="live-tag" data-kind="decision">decision</span>
+                <span className="marker-text">{d.d}</span>
+                <button type="button" className="link-button" onClick={() => openSession(d.sid)}>{relativeAge(d.when)}</button>
+              </li>
+            ))}
+            {decisions.length === 0 && <li className="muted small">No decisions captured.</li>}
+          </ul>
+        </section>
+
+        <section className="card">
+          <header className="card-head"><h3>Open questions</h3><span className="muted small">{open.length}</span></header>
+          <ul className="marker-list">
+            {open.slice(0, 30).map((o, i) => (
+              <li key={`${o.id}-${i}`} className="marker-row marker-row-promotable">
+                <span className="live-tag" data-kind="open">open</span>
+                <span className="marker-text">{o.q}</span>
+                <div className="marker-actions">
+                  <PromoteOpenButton openId={o.id} defaultText={o.q} onPromoted={refetch} />
+                  <button type="button" className="link-button" onClick={() => openSession(o.sid)}>{relativeAge(o.when)}</button>
+                </div>
+              </li>
+            ))}
+            {open.length === 0 && <li className="muted small">No open questions.</li>}
+          </ul>
+        </section>
+      </div>
+
+      <ThreadSessionList thread={thread} onOpenSession={openSession} />
+
+      {drawerSid && (
+        <SessionDrawer sessionId={drawerSid} onClose={closeSession} entityColor={entityColor} />
+      )}
+    </div>
+  );
+}
+
+type StatusFilter = "all" | "active" | "idle" | "closed" | "superseded";
+type MarkerFilter = "all" | "decisions" | "open";
+const PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
+
+function ThreadSessionList({
+  thread,
+  onOpenSession,
+}: {
+  thread: DatasetSession[];
+  onOpenSession: (id: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState<StatusFilter>("all");
+  const [markers, setMarkers] = useState<MarkerFilter>("all");
+  const [pageSize, setPageSize] = useState<number>(25);
+  const [page, setPage] = useState(0);
+
+  const filtered = useMemo(() => {
+    const q = query.toLowerCase().trim();
+    return thread.filter((s) => {
+      if (status !== "all" && s.status !== status) return false;
+      if (markers === "decisions" && s.decisions.length === 0) return false;
+      if (markers === "open" && s.open_questions.length === 0) return false;
+      if (!q) return true;
+      return (
+        s.label.toLowerCase().includes(q) ||
+        s.summary.toLowerCase().includes(q) ||
+        s.decisions.some((d) => d.toLowerCase().includes(q)) ||
+        s.open.some((o) => o.toLowerCase().includes(q))
+      );
+    });
+  }, [thread, query, status, markers]);
+
+  // Reset page when filter inputs change
+  useEffect(() => { setPage(0); }, [query, status, markers, pageSize]);
+
+  const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const currentPage = Math.min(page, pageCount - 1);
+  const start = currentPage * pageSize;
+  const slice = filtered.slice(start, start + pageSize);
+
+  return (
+    <>
+      <div className="thread-sessions-head">
+        <h3 className="section-title thread-sessions-title">Sessions</h3>
+        <input
+          className="search-input"
+          placeholder="search label, summary, decisions, open…"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+
+      <div className="thread-filters">
+        <div className="filter-group" role="group" aria-label="Status filter">
+          {(["all", "active", "idle", "closed", "superseded"] as const).map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={`chip${status === s ? " active" : ""}`}
+              data-status={s === "all" ? undefined : s}
+              onClick={() => setStatus(s)}
+            >{s}</button>
+          ))}
+        </div>
+        <div className="filter-group" role="group" aria-label="Marker filter">
+          {(["all", "decisions", "open"] as const).map((m) => (
+            <button
+              key={m}
+              type="button"
+              className={`chip${markers === m ? " active" : ""}`}
+              data-marker={m === "all" ? undefined : m}
+              onClick={() => setMarkers(m)}
+            >{m === "all" ? "all markers" : m}</button>
+          ))}
+        </div>
+        <span className="header-spacer" />
+        <span className="muted small">{filtered.length} match{filtered.length === 1 ? "" : "es"}</span>
+      </div>
+
+      <ul className="session-list">
+        {slice.map((s) => (
+          <li key={s.id} className="session-row session-row-detail clickable" onClick={() => onOpenSession(s.id)}>
+            <span className={`chip-inline status-${s.status}`}>{s.status}</span>
+            <div className="session-row-main">
+              <span className="session-label">{s.label}</span>
+              <span className="session-meta">{s.summary}</span>
+            </div>
+            <span className="muted small mono">{relativeAge(s.started_at)}</span>
+          </li>
+        ))}
+        {slice.length === 0 && (
+          <li className="muted small empty-row">
+            {thread.length === 0 ? "No sessions yet." : "No sessions match the current filters."}
+          </li>
+        )}
+      </ul>
+
+      {filtered.length > 0 && (
+        <div className="pagination">
+          <div className="page-size">
+            <label className="form-label">Per page</label>
+            <select
+              className="form-input form-input-inline"
+              value={pageSize}
+              onChange={(e) => setPageSize(Number.parseInt(e.target.value, 10))}
+            >
+              {PAGE_SIZE_OPTIONS.map((n) => <option key={n} value={n}>{n}</option>)}
+            </select>
+          </div>
+          <span className="header-spacer" />
+          <span className="muted small">
+            {start + 1}–{Math.min(start + pageSize, filtered.length)} of {filtered.length}
+          </span>
+          <div className="page-nav">
+            <button type="button" className="chip" disabled={currentPage === 0} onClick={() => setPage(0)}>« first</button>
+            <button type="button" className="chip" disabled={currentPage === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>‹ prev</button>
+            <span className="page-indicator mono">{currentPage + 1} / {pageCount}</span>
+            <button type="button" className="chip" disabled={currentPage >= pageCount - 1} onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}>next ›</button>
+            <button type="button" className="chip" disabled={currentPage >= pageCount - 1} onClick={() => setPage(pageCount - 1)}>last »</button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+

package/src/ui/pages/settings/Classifier.tsx

@@ -0,0 +1,227 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { SettingsSubnav } from "./SettingsSubnav.js";
+import {
+  fetchProviders,
+  fetchProviderModels,
+  testProvider,
+  PROVIDER_KIND_LABEL,
+  type ProviderRow,
+  type TestResult,
+} from "../../lib/registries.js";
+
+interface ClassifierInfo {
+  provider: string;
+  model: string;
+  embedder: { provider: string; model: string; dims: number };
+}
+
+export function SettingsClassifierPage() {
+  const [info, setInfo] = useState<ClassifierInfo | null>(null);
+  const [providers, setProviders] = useState<ProviderRow[]>([]);
+  const [models, setModels] = useState<string[]>([]);
+  const [modelsErr, setModelsErr] = useState<string | null>(null);
+  const [draftProviderId, setDraftProviderId] = useState<number | null>(null);
+  const [draftModel, setDraftModel] = useState<string>("");
+  const [test, setTest] = useState<TestResult | null>(null);
+  const [testedKey, setTestedKey] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [saveMsg, setSaveMsg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const [infoRes, list] = await Promise.all([
+        fetch("/api/classifier/info").then((r) => r.json() as Promise<ClassifierInfo>),
+        fetchProviders(),
+      ]);
+      setInfo(infoRes);
+      setProviders(list);
+      const active = list.find((p) => p.kind === infoRes.provider && p.enabled);
+      const fallback = list.find((p) => p.enabled) ?? list[0] ?? null;
+      const selected = active ?? fallback;
+      setDraftProviderId(selected ? selected.id : null);
+      setDraftModel(infoRes.model);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }, []);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const draftProvider = useMemo(
+    () => providers.find((p) => p.id === draftProviderId) ?? null,
+    [providers, draftProviderId],
+  );
+
+  useEffect(() => {
+    if (!draftProvider) {
+      setModels([]);
+      return;
+    }
+    let cancelled = false;
+    setModelsErr(null);
+    setModels([]);
+    void fetchProviderModels(draftProvider.id)
+      .then((m) => {
+        if (cancelled) return;
+        setModels(m);
+        if (!draftModel || !m.includes(draftModel)) {
+          setDraftModel(draftProvider.defaultModel ?? m[0] ?? "");
+        }
+      })
+      .catch((e: unknown) => {
+        if (!cancelled) setModelsErr(e instanceof Error ? e.message : String(e));
+      });
+    return () => { cancelled = true; };
+    // intentionally not gating on draftModel — we only refetch when provider changes
+  }, [draftProvider?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const selectionKey = draftProvider ? `${draftProvider.id}|${draftModel}` : "";
+  const testPassed = test?.ok === true && testedKey === selectionKey;
+
+  const dirty = info && draftProvider
+    ? draftProvider.kind !== info.provider || draftModel !== info.model
+    : false;
+
+  const canSave = dirty && draftModel.length > 0 && !busy && testPassed;
+
+  const runTest = async () => {
+    if (!draftProvider) return;
+    setBusy(true);
+    setTest(null);
+    setTestedKey(null);
+    try {
+      const r = await testProvider(draftProvider.id);
+      setTest(r);
+      if (r.ok) setTestedKey(selectionKey);
+    } catch (e) {
+      setTest({ ok: false, latencyMs: 0, error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const save = async () => {
+    if (!draftProvider) return;
+    setBusy(true);
+    setSaveMsg(null);
+    try {
+      const r = await fetch("/api/classifier", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider: draftProvider.kind, model: draftModel }),
+      });
+      const data = (await r.json()) as { provider?: string; model?: string; error?: string };
+      if (!r.ok || data.error) {
+        setSaveMsg(`Error: ${data.error ?? r.statusText}`);
+      } else {
+        setSaveMsg(`Active: ${data.provider} · ${data.model}`);
+        await load();
+      }
+    } catch (e) {
+      setSaveMsg(`Error: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="page-pad">
+      <SettingsSubnav />
+      <h2 className="page-title">Classifier</h2>
+      {!info && !error && <div className="muted">Loading…</div>}
+      {error && <div className="muted error">{error}</div>}
+      {info && (
+        <>
+          <dl className="kv-list">
+            <dt className="kv-label">Active provider</dt>
+            <dd className="kv-value mono">{info.provider}</dd>
+            <dt className="kv-label">Active model</dt>
+            <dd className="kv-value mono">{info.model}</dd>
+          </dl>
+
+          <h3 className="section-title">Switch model</h3>
+          {providers.length === 0 ? (
+            <p className="muted small">
+              No providers configured. Add one on the <a href="/settings/providers">Providers</a> page first.
+            </p>
+          ) : (
+            <>
+              <div className="form-row">
+                <label className="form-label">Provider</label>
+                <select
+                  className="form-input form-input-inline"
+                  value={draftProviderId ?? ""}
+                  onChange={(e) => {
+                    setDraftProviderId(Number.parseInt(e.target.value, 10));
+                    setTest(null);
+                    setTestedKey(null);
+                  }}
+                  disabled={busy}
+                >
+                  {providers.map((p) => (
+                    <option key={p.id} value={p.id} disabled={!p.enabled}>
+                      {p.name} ({PROVIDER_KIND_LABEL[p.kind]}){p.enabled ? "" : " — disabled"}
+                      {p.kind !== "ollama" && !p.hasApiKey ? " — no key" : ""}
+                    </option>
+                  ))}
+                </select>
+                <label className="form-label">Model</label>
+                <select
+                  className="form-input form-input-inline"
+                  value={draftModel}
+                  onChange={(e) => {
+                    setDraftModel(e.target.value);
+                    setTestedKey(null);
+                  }}
+                  disabled={busy || models.length === 0}
+                >
+                  {models.map((m) => <option key={m} value={m}>{m}</option>)}
+                  {!models.includes(draftModel) && draftModel && (
+                    <option value={draftModel}>{draftModel}</option>
+                  )}
+                </select>
+                <button
+                  type="button"
+                  className="btn"
+                  onClick={() => void runTest()}
+                  disabled={busy || !draftProvider}
+                >{busy && !test ? "Testing…" : "Test connection"}</button>
+                <button
+                  type="button"
+                  className="btn btn-accent"
+                  onClick={() => void save()}
+                  disabled={!canSave}
+                  title={!testPassed ? "Run a successful test before saving" : undefined}
+                >{busy && test?.ok ? "Saving…" : "Save"}</button>
+              </div>
+
+              {modelsErr && <p className="muted error small">Model list failed: {modelsErr}</p>}
+              {test && (
+                <p className={`small ${test.ok ? "muted" : "muted error"}`}>
+                  {test.ok
+                    ? `Connection OK · ${test.modelCount ?? "?"} models · ${test.latencyMs}ms`
+                    : `Connection failed: ${test.error ?? "unknown"} (${test.latencyMs}ms)`}
+                </p>
+              )}
+              {saveMsg && <p className="muted small">{saveMsg}</p>}
+              <p className="muted small">Save is gated on a passing connection test for the selected provider + model.</p>
+            </>
+          )}
+
+          <h3 className="section-title">Embedder</h3>
+          <dl className="kv-list">
+            <dt className="kv-label">Provider</dt>
+            <dd className="kv-value mono">{info.embedder.provider}</dd>
+            <dt className="kv-label">Model</dt>
+            <dd className="kv-value mono">{info.embedder.model}</dd>
+            <dt className="kv-label">Dimensions</dt>
+            <dd className="kv-value mono">{info.embedder.dims}</dd>
+          </dl>
+          <p className="muted small">Embedder is fixed at build time. Recall vectors must match the index dims, so it isn't hot-swappable. DeepSeek has no embeddings endpoint; Ollama serves both classification (optional) and embedding (always).</p>
+        </>
+      )}
+    </div>
+  );
+}

package/src/ui/pages/settings/Data.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { SettingsSubnav } from "./SettingsSubnav.js";
+
+interface TableStat {
+  name: string;
+  rows: number;
+}
+
+interface MigrationRow {
+  version: number;
+  name: string;
+  applied_at: string;
+}
+
+interface RuntimeStat {
+  runtime: string;
+  n: number;
+}
+
+interface DataStats {
+  dbPath: string;
+  dbBytes: number;
+  dbPresent: boolean;
+  schemaVersion: number | null;
+  migrations: MigrationRow[];
+  tables: TableStat[];
+  runtimes: RuntimeStat[];
+}
+
+interface RestoreResult {
+  staged?: boolean;
+  restartRequired?: boolean;
+  sessions?: number;
+  schemaVersion?: number;
+  error?: string;
+}
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  const units = ["KB", "MB", "GB"];
+  let v = n / 1024;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
+  return `${v.toFixed(v >= 100 ? 0 : 1)} ${units[i]}`;
+}
+
+export function SettingsDataPage() {
+  const [stats, setStats] = useState<DataStats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [restore, setRestore] = useState<RestoreResult | null>(null);
+  const [restoring, setRestoring] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const r = await fetch("/api/data/stats");
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      setStats((await r.json()) as DataStats);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }, []);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const submitRestore = async () => {
+    const file = fileRef.current?.files?.[0];
+    if (!file) return;
+    if (!confirm(
+      `Restore from "${file.name}"? Your current database is archived (not deleted), ` +
+      `and the new one takes effect after the daemon restarts.`,
+    )) return;
+    setRestoring(true);
+    setRestore(null);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      const r = await fetch("/api/data/restore", { method: "POST", body: fd });
+      const data = (await r.json()) as RestoreResult;
+      setRestore(data);
+      if (data.staged && fileRef.current) fileRef.current.value = "";
+    } catch (e) {
+      setRestore({ error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setRestoring(false);
+    }
+  };
+
+  return (
+    <div className="page-pad">
+      <SettingsSubnav />
+      <h2 className="page-title">Data</h2>
+      {!stats && !error && <div className="muted">Loading…</div>}
+      {error && <div className="muted error">{error}</div>}
+
+      {stats && (
+        <>
+          <h3 className="section-title">Storage</h3>
+          <dl className="kv-list">
+            <dt className="kv-label">Canonical SQLite</dt>
+            <dd className="kv-value mono">{stats.dbPath}</dd>
+            <dt className="kv-label">On disk</dt>
+            <dd className="kv-value mono">
+              {formatBytes(stats.dbBytes)}
+              {!stats.dbPresent && <span className="muted small"> · file missing</span>}
+            </dd>
+            <dt className="kv-label">Schema version</dt>
+            <dd className="kv-value mono">
+              {stats.schemaVersion ?? "—"}
+              {stats.migrations.length > 0 && (
+                <span className="muted small"> · {stats.migrations.length} migrations applied</span>
+              )}
+            </dd>
+          </dl>
+
+          <h3 className="section-title">Tables</h3>
+          <table className="data-table">
+            <thead><tr><th>Table</th><th>Rows</th></tr></thead>
+            <tbody>
+              {stats.tables.map((t) => (
+                <tr key={t.name}>
+                  <td className="mono small">{t.name}</td>
+                  <td className="mono">{t.rows.toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          {stats.runtimes.length > 0 && (
+            <>
+              <h3 className="section-title">Sessions by runtime</h3>
+              <table className="data-table">
+                <thead><tr><th>Runtime</th><th>Sessions</th></tr></thead>
+                <tbody>
+                  {stats.runtimes.map((r) => (
+                    <tr key={r.runtime}>
+                      <td className="mono small">{r.runtime}</td>
+                      <td className="mono">{r.n.toLocaleString()}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </>
+          )}
+
+          <h3 className="section-title">Backup</h3>
+          <p className="muted small">
+            Downloads a clean, defragmented snapshot of the canonical store. Safe to run while the daemon is ingesting.
+          </p>
+          <div className="form-row">
+            <a className="btn btn-accent" href="/api/data/backup" download>
+              Download backup
+            </a>
+          </div>
+
+          <h3 className="section-title">Restore</h3>
+          <p className="muted small">
+            Replace the canonical store with an <code>.sqlite</code> backup. The current database is archived
+            alongside it (<code>.pre-restore-&lt;timestamp&gt;</code>), never deleted. Takes effect on the next daemon restart.
+          </p>
+          <div className="form-row">
+            <input
+              ref={fileRef}
+              type="file"
+              accept=".sqlite,application/x-sqlite3"
+              className="file-input"
+              disabled={restoring}
+            />
+            <button
+              type="button"
+              className="btn"
+              onClick={() => void submitRestore()}
+              disabled={restoring}
+            >{restoring ? "Validating…" : "Restore from backup"}</button>
+          </div>
+          {restore?.staged && (
+            <div className="card" style={{ borderColor: "var(--accent)", padding: "0.75rem 1rem", marginTop: "0.75rem" }}>
+              <p className="small" style={{ margin: 0 }}>
+                Backup validated and staged ({restore.sessions?.toLocaleString()} sessions, schema v{restore.schemaVersion}).
+                <strong> Restart the daemon</strong> to apply it. Your current database will be archived automatically.
+              </p>
+            </div>
+          )}
+          {restore?.error && <p className="muted error small">{restore.error}</p>}
+        </>
+      )}
+    </div>
+  );
+}