reasonix 0.11.3 → 0.12.6

package/dashboard/app.js

@@ -0,0 +1,3913 @@
+// Reasonix dashboard SPA — Preact 10 + HTM, no build step.
+//
+// CDN imports use esm.sh (provides ESM bundles of npm packages with
+// caching). We pin minor versions; bumping is a deliberate choice.
+
+import hljs from "https://esm.sh/highlight.js@11.10.0/lib/common";
+import htm from "https://esm.sh/htm@3.1.1";
+import { Marked, marked } from "https://esm.sh/marked@12.0.2";
+import { Component, h, render } from "https://esm.sh/preact@10.22.0";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "https://esm.sh/preact@10.22.0/hooks";
+
+const html = htm.bind(h);
+
+// ---------- Markdown rendering ----------
+//
+// Rules:
+//  - GFM (tables, strikethrough, autolinks).
+//  - Code blocks with a known language → highlight.js. Auto-detect
+//    when the fence has no language. The CSS in app.css picks colors
+//    from our palette so the result reads as Reasonix's TUI, not as
+//    GitHub's.
+//  - Code blocks that look like Reasonix's edit_file SEARCH/REPLACE
+//    or a unified diff → custom diff renderer with red/green lines
+//    matching the TUI's edit-block view.
+
+function escapeHtml(s) {
+  // Defensive: marked occasionally hands the renderer `text === undefined`
+  // for empty / malformed fences (and the token-vs-positional ambiguity
+  // around v12 makes it easier to crash than not). Coerce to string
+  // instead of letting `.replace` blow up.
+  if (s == null) return "";
+  return String(s)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+const SEARCH_REPLACE_RE = /<{7}\s*SEARCH\s*\n([\s\S]*?)\n={7}\s*\n([\s\S]*?)\n>{7}\s*REPLACE/;
+
+function renderSearchReplace(search, replace, file) {
+  const safeSearch = typeof search === "string" ? search : String(search ?? "");
+  const safeReplace = typeof replace === "string" ? replace : String(replace ?? "");
+  const oldLines = safeSearch
+    .split("\n")
+    .map((l) => `<span class="diff-line del">- ${escapeHtml(l)}</span>`)
+    .join("\n");
+  const newLines = safeReplace
+    .split("\n")
+    .map((l) => `<span class="diff-line ins">+ ${escapeHtml(l)}</span>`)
+    .join("\n");
+  const header = file ? `<span class="diff-line hunk">▸ edit ${escapeHtml(file)}</span>\n` : "";
+  return `<pre class="diff-block">${header}${oldLines}\n${newLines}</pre>`;
+}
+
+function renderUnifiedDiff(text) {
+  const safe = typeof text === "string" ? text : String(text ?? "");
+  const lines = safe
+    .split("\n")
+    .map((l) => {
+      if (l.startsWith("+++") || l.startsWith("---")) {
+        return `<span class="diff-line meta">${escapeHtml(l)}</span>`;
+      }
+      if (l.startsWith("+")) {
+        return `<span class="diff-line ins">${escapeHtml(l)}</span>`;
+      }
+      if (l.startsWith("-")) {
+        return `<span class="diff-line del">${escapeHtml(l)}</span>`;
+      }
+      if (l.startsWith("@@")) {
+        return `<span class="diff-line hunk">${escapeHtml(l)}</span>`;
+      }
+      return escapeHtml(l);
+    })
+    .join("\n");
+  return `<pre class="diff-block">${lines}</pre>`;
+}
+
+const renderer = new marked.Renderer();
+// Accept BOTH calling conventions so we don't crash if marked changes
+// shape between versions:
+//   - v12+ token object: renderer.code({ type, raw, lang, text, ... })
+//   - legacy positional:  renderer.code(text, lang, escaped)
+// Either path normalizes to `{ text, lang }`. Empty / nullable text is
+// coerced to "" (escapeHtml does the same) so an empty fence renders
+// as an empty code block rather than throwing.
+renderer.code = function reasonixCode(arg1, arg2 /* legacy lang */) {
+  let text;
+  let lang;
+  if (arg1 && typeof arg1 === "object" && !Array.isArray(arg1)) {
+    text = arg1.text;
+    lang = arg1.lang;
+  } else {
+    text = arg1;
+    lang = arg2;
+  }
+  if (text == null) text = "";
+  if (typeof text !== "string") text = String(text);
+  // Reasonix's edit_file marker block. Show as red/green diff with a
+  // small "▸ edit <file>" header lifted from the language tag (e.g.
+  // ```edit:src/foo.ts → file = src/foo.ts).
+  const sr = SEARCH_REPLACE_RE.exec(text);
+  if (sr) {
+    const file = typeof lang === "string" && lang.startsWith("edit:") ? lang.slice(5) : "";
+    return renderSearchReplace(sr[1], sr[2], file);
+  }
+  if (lang === "diff") {
+    return renderUnifiedDiff(text);
+  }
+  // Standard highlight.js path — explicit language wins, otherwise auto.
+  if (lang && typeof lang === "string" && hljs.getLanguage(lang)) {
+    try {
+      const h = hljs.highlight(text, { language: lang, ignoreIllegals: true }).value;
+      return `<pre><code class="hljs language-${lang}">${h}</code></pre>`;
+    } catch {
+      /* fall through to auto */
+    }
+  }
+  try {
+    const auto = hljs.highlightAuto(text);
+    return `<pre><code class="hljs">${auto.value}</code></pre>`;
+  } catch {
+    return `<pre><code>${escapeHtml(text)}</code></pre>`;
+  }
+};
+
+marked.use({ renderer, gfm: true, breaks: false, pedantic: false });
+
+// Separate Marked instance for the editor's markdown preview. The chat
+// renderer above does fancy SEARCH/REPLACE diff blocks and stamps every
+// code fence through hljs — useful inside an assistant message, but
+// disruptive when the user is just previewing a normal README and
+// expects standard `<pre><code>` blocks. Vanilla rendering also avoids
+// any chance our custom token-shape sniffing breaks on real markdown.
+const previewMarked = new Marked({ gfm: true, breaks: false, pedantic: false });
+previewMarked.use({
+  renderer: {
+    code(...args) {
+      const first = args[0];
+      const arg = first && typeof first === "object" ? first : { text: first, lang: args[1] };
+      const text = arg.text == null ? "" : String(arg.text);
+      const lang = typeof arg.lang === "string" ? arg.lang : "";
+      try {
+        const out =
+          lang && hljs.getLanguage(lang)
+            ? hljs.highlight(text, { language: lang, ignoreIllegals: true })
+            : hljs.highlightAuto(text);
+        const cls = lang ? `hljs language-${lang}` : "hljs";
+        return `<pre><code class="${cls}">${out.value}</code></pre>`;
+      } catch {
+        return `<pre><code>${escapeHtml(text)}</code></pre>`;
+      }
+    },
+  },
+});
+
+// ---------- bootstrapping ----------
+
+const TOKEN = document.querySelector('meta[name="reasonix-token"]')?.getAttribute("content") ?? "";
+const MODE =
+  document.querySelector('meta[name="reasonix-mode"]')?.getAttribute("content") ?? "standalone";
+
+// Helper: every fetch tacks the token onto the URL (reads) and the
+// header (mutations). Server logic in src/server/index.ts requires
+// the header form for any non-GET.
+async function api(path, opts = {}) {
+  const method = opts.method ?? "GET";
+  const url = `/api${path}${path.includes("?") ? "&" : "?"}token=${TOKEN}`;
+  const headers = { ...(opts.headers ?? {}) };
+  headers["X-Reasonix-Token"] = TOKEN;
+  if (opts.body !== undefined) headers["Content-Type"] = "application/json";
+  const res = await fetch(url, {
+    method,
+    headers,
+    body: opts.body !== undefined ? JSON.stringify(opts.body) : undefined,
+  });
+  const text = await res.text();
+  let parsed = null;
+  try {
+    parsed = text ? JSON.parse(text) : null;
+  } catch {
+    parsed = { error: text };
+  }
+  if (!res.ok) {
+    const err = new Error(parsed?.error ?? `${res.status} ${res.statusText}`);
+    err.status = res.status;
+    err.body = parsed;
+    throw err;
+  }
+  return parsed;
+}
+
+// usePoll: re-fetch a GET endpoint every `intervalMs`, returning
+// `{ data, error, loading, refresh }`. v0.13 swaps this for SSE.
+function usePoll(path, intervalMs = 2000) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      const next = await api(path);
+      setData(next);
+      setError(null);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [path]);
+
+  useEffect(() => {
+    let cancelled = false;
+    let timer = null;
+    const tick = async () => {
+      if (cancelled) return;
+      await refresh();
+      if (cancelled) return;
+      timer = setTimeout(tick, intervalMs);
+    };
+    tick();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [refresh, intervalMs]);
+
+  return { data, error, loading, refresh };
+}
+
+// ---------- formatting helpers ----------
+
+function fmtUsd(n) {
+  if (n === null || n === undefined) return "—";
+  if (n === 0) return "$0";
+  return `$${n.toFixed(n < 0.01 ? 6 : 4)}`;
+}
+
+function fmtPct(n) {
+  if (n === null || n === undefined) return "—";
+  return `${(n * 100).toFixed(1)}%`;
+}
+
+function fmtNum(n) {
+  if (n === null || n === undefined) return "—";
+  return n.toLocaleString();
+}
+
+function fmtBytes(n) {
+  if (n === null || n === undefined) return "—";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+function fmtRelativeTime(iso) {
+  if (!iso) return "—";
+  const ms = typeof iso === "number" ? iso : Date.parse(iso);
+  if (!Number.isFinite(ms)) return "—";
+  const dSec = (Date.now() - ms) / 1000;
+  if (dSec < 60) return "just now";
+  if (dSec < 3600) return `${Math.floor(dSec / 60)}m ago`;
+  if (dSec < 86400) return `${Math.floor(dSec / 3600)}h ago`;
+  if (dSec < 30 * 86400) return `${Math.floor(dSec / 86400)}d ago`;
+  return new Date(ms).toISOString().slice(0, 10);
+}
+
+// ---------- panels ----------
+
+function OverviewPanel() {
+  const { data, error, loading } = usePoll("/overview", 2000);
+  if (loading && !data) return html`<div class="boot">loading overview…</div>`;
+  if (error) return html`<div class="notice err">overview failed: ${error.message}</div>`;
+  const o = data;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Live Cockpit</h2>
+        <span class="panel-subtitle">${o.mode === "attached" ? "attached to running session" : "standalone (read-only disk view)"}</span>
+      </div>
+
+      ${o.mode === "standalone" ? html`<div class="notice">Standalone mode — start <code>/dashboard</code> from inside <code>reasonix code</code> for live session state, MCP, and tools.</div>` : null}
+
+      <div class="metric-grid">
+        ${MetricCard("Reasonix", o.version, o.latestVersion && o.latestVersion !== o.version ? `latest: ${o.latestVersion}` : "current")}
+        ${MetricCard("Session", o.session ?? "—", o.session === null ? "ephemeral or disconnected" : null)}
+        ${MetricCard("Model", o.model ?? "—", o.model ? "active" : null)}
+        ${MetricCard("Edit mode", o.editMode ?? "—", o.editMode === "yolo" ? "all prompts bypassed" : null, o.editMode === "yolo" ? "warn" : null)}
+        ${MetricCard("Plan mode", o.planMode === null ? "—" : o.planMode ? "ON" : "off", o.planMode ? "writes gated" : null)}
+        ${MetricCard("Pending edits", fmtNum(o.pendingEdits), o.pendingEdits ? "awaiting /apply" : null)}
+        ${MetricCard("MCP servers", fmtNum(o.mcpServerCount), null)}
+        ${MetricCard("Tools", fmtNum(o.toolCount), null)}
+      </div>
+
+      <div class="section-title">Working directory</div>
+      <div class="card">
+        <div class="card-value mono" style="font-size: 14px;">${o.cwd ?? "—"}</div>
+      </div>
+    </div>
+  `;
+}
+
+function MetricCard(title, value, hint, pillVariant) {
+  const muted = value === "—" || value === null || value === undefined;
+  return html`
+    <div class="card">
+      <div class="card-title">${title}</div>
+      <div class="card-value ${muted ? "muted" : ""}">${value}</div>
+      ${
+        hint
+          ? pillVariant
+            ? html`<div class="card-hint"><span class="pill pill-${pillVariant}">${hint}</span></div>`
+            : html`<div class="card-hint">${hint}</div>`
+          : null
+      }
+    </div>
+  `;
+}
+
+function UsagePanel() {
+  const { data, error, loading } = usePoll("/usage", 5000);
+  if (loading && !data) return html`<div class="boot">loading usage…</div>`;
+  if (error) return html`<div class="notice err">usage failed: ${error.message}</div>`;
+  const u = data;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Usage</h2>
+        <span class="panel-subtitle">${u.recordCount.toLocaleString()} records · ${u.logSize}</span>
+      </div>
+
+      ${
+        u.recordCount === 0
+          ? html`<div class="empty">No usage data yet — run a turn in <code>reasonix chat</code> / <code>code</code> / <code>run</code> and refresh.</div>`
+          : html`
+          <table>
+            <thead>
+              <tr>
+                <th></th>
+                <th class="numeric">turns</th>
+                <th class="numeric">cache hit</th>
+                <th class="numeric">cost (USD)</th>
+                <th class="numeric">cache saved</th>
+                <th class="numeric">vs Claude</th>
+                <th class="numeric">saved</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${u.buckets.map((b) => {
+                const hitRatio =
+                  b.cacheHitTokens + b.cacheMissTokens > 0
+                    ? b.cacheHitTokens / (b.cacheHitTokens + b.cacheMissTokens)
+                    : 0;
+                const claudeSavings = b.claudeEquivUsd > 0 ? 1 - b.costUsd / b.claudeEquivUsd : 0;
+                return html`
+                  <tr>
+                    <td>${b.label}</td>
+                    <td class="numeric">${fmtNum(b.turns)}</td>
+                    <td class="numeric">${b.turns > 0 ? fmtPct(hitRatio) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 ? fmtUsd(b.costUsd) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 && b.cacheSavingsUsd > 0 ? fmtUsd(b.cacheSavingsUsd) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 ? fmtUsd(b.claudeEquivUsd) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 && claudeSavings > 0 ? fmtPct(claudeSavings) : "—"}</td>
+                  </tr>
+                `;
+              })}
+            </tbody>
+          </table>
+        `
+      }
+
+      ${
+        u.byModel.length > 0
+          ? html`
+          <div class="section-title">Most used models</div>
+          <table>
+            <thead><tr><th>model</th><th class="numeric">turns</th></tr></thead>
+            <tbody>
+              ${u.byModel.slice(0, 5).map(
+                (m) => html`
+                <tr><td><code>${m.model}</code></td><td class="numeric">${fmtNum(m.turns)}</td></tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+          : null
+      }
+
+      ${
+        u.subagents
+          ? html`
+          <div class="section-title">Subagent activity</div>
+          <div class="card">
+            <div class="card-title">Total runs</div>
+            <div class="card-value">${fmtNum(u.subagents.total)}</div>
+            <div class="card-hint">${fmtUsd(u.subagents.costUsd)} · ${(u.subagents.totalDurationMs / 1000).toFixed(1)}s total</div>
+          </div>
+        `
+          : null
+      }
+    </div>
+  `;
+}
+
+function ToolsPanel() {
+  const { data, error, loading } = usePoll("/tools", 4000);
+  if (loading && !data) return html`<div class="boot">loading tools…</div>`;
+  if (error?.status === 503) {
+    return html`<div class="notice">${error.body?.error ?? "live tools view requires an attached session"}</div>`;
+  }
+  if (error) return html`<div class="notice err">tools failed: ${error.message}</div>`;
+  const t = data;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Tools</h2>
+        <span class="panel-subtitle">${t.total} registered ${t.planMode ? html`<span class="pill pill-warn">plan mode — writes gated</span>` : ""}</span>
+      </div>
+      ${
+        t.tools.length === 0
+          ? html`<div class="empty">No tools registered.</div>`
+          : html`
+          <table>
+            <thead>
+              <tr>
+                <th>name</th>
+                <th>flags</th>
+                <th>description</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${t.tools.map(
+                (tool) => html`
+                <tr>
+                  <td><code>${tool.name}</code></td>
+                  <td>
+                    ${tool.readOnly ? html`<span class="pill pill-ok">read-only</span>` : html`<span class="pill pill-accent">write</span>`}
+                    ${tool.flattened ? html` <span class="pill pill-dim">flat</span>` : ""}
+                  </td>
+                  <td>${tool.description ?? ""}</td>
+                </tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+      }
+    </div>
+  `;
+}
+
+function PermissionsPanel() {
+  const { data, error, loading, refresh } = usePoll("/permissions", 5000);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [feedback, setFeedback] = useState(null);
+
+  const add = useCallback(async () => {
+    const prefix = draft.trim();
+    if (!prefix) return;
+    setBusy(true);
+    setFeedback(null);
+    try {
+      const res = await api("/permissions", { method: "POST", body: { prefix } });
+      if (res.alreadyPresent) setFeedback({ kind: "info", text: `${prefix} already in list` });
+      else setFeedback({ kind: "ok", text: `added: ${prefix}` });
+      setDraft("");
+      await refresh();
+    } catch (err) {
+      setFeedback({ kind: "err", text: err.message });
+    } finally {
+      setBusy(false);
+    }
+  }, [draft, refresh]);
+
+  const remove = useCallback(
+    async (prefix) => {
+      if (!confirm(`Remove "${prefix}" from this project's allowlist?`)) return;
+      setBusy(true);
+      setFeedback(null);
+      try {
+        await api("/permissions", { method: "DELETE", body: { prefix } });
+        setFeedback({ kind: "ok", text: `removed: ${prefix}` });
+        await refresh();
+      } catch (err) {
+        setFeedback({ kind: "err", text: err.message });
+      } finally {
+        setBusy(false);
+      }
+    },
+    [refresh],
+  );
+
+  const clearAll = useCallback(async () => {
+    if (!confirm("Wipe every project allowlist entry? Builtin entries are unaffected.")) return;
+    setBusy(true);
+    setFeedback(null);
+    try {
+      const res = await api("/permissions/clear", { method: "POST", body: { confirm: true } });
+      setFeedback({
+        kind: "ok",
+        text: `cleared ${res.dropped} entr${res.dropped === 1 ? "y" : "ies"}`,
+      });
+      await refresh();
+    } catch (err) {
+      setFeedback({ kind: "err", text: err.message });
+    } finally {
+      setBusy(false);
+    }
+  }, [refresh]);
+
+  if (loading && !data) return html`<div class="boot">loading permissions…</div>`;
+  if (error) return html`<div class="notice err">permissions failed: ${error.message}</div>`;
+  const p = data;
+
+  const banner =
+    p.editMode === "yolo"
+      ? html`<div class="notice warn">YOLO mode — every shell command auto-runs, allowlist bypassed. <code>/mode review</code> in TUI re-enables.</div>`
+      : null;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Permissions</h2>
+        <span class="panel-subtitle">${p.currentCwd ? `project: ${p.currentCwd}` : "no active project"}</span>
+      </div>
+      ${banner}
+
+      ${
+        p.currentCwd
+          ? html`
+          <div class="row">
+            <input
+              type="text"
+              placeholder='add a prefix, e.g. "npm run build" or "deploy.sh"'
+              value=${draft}
+              onInput=${(e) => setDraft(e.target.value)}
+              onKeyDown=${(e) => {
+                if (e.key === "Enter") add();
+              }}
+              disabled=${busy}
+            />
+            <button class="primary" onClick=${add} disabled=${busy || !draft.trim()}>Add</button>
+            <button class="danger" onClick=${clearAll} disabled=${busy || p.project.length === 0}>Clear all</button>
+          </div>
+          ${feedback ? html`<div class="notice ${feedback.kind === "err" ? "err" : feedback.kind === "ok" ? "" : "warn"}">${feedback.text}</div>` : null}
+        `
+          : html`<div class="notice">Mutations require <code>/dashboard</code> from inside an active <code>reasonix code</code> session — standalone <code>reasonix dashboard</code> can't tell which project's allowlist to edit.</div>`
+      }
+
+      <div class="section-title">Project allowlist (${p.project.length})</div>
+      ${
+        p.project.length === 0
+          ? html`<div class="empty">Nothing stored yet for this project.</div>`
+          : html`
+          <table>
+            <thead><tr><th>#</th><th>prefix</th><th></th></tr></thead>
+            <tbody>
+              ${p.project.map(
+                (prefix, i) => html`
+                <tr>
+                  <td class="muted">${i + 1}</td>
+                  <td><code>${prefix}</code></td>
+                  <td class="numeric">${p.currentCwd ? html`<button class="danger" onClick=${() => remove(prefix)} disabled=${busy}>remove</button>` : null}</td>
+                </tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+      }
+
+      <div class="section-title">Builtin allowlist (${p.builtin.length}) — read-only, baked in</div>
+      <div class="card mono" style="font-size: 12px; line-height: 1.7;">
+        ${groupByVerb(p.builtin).map(
+          ([verb, list]) => html`
+          <div><span class="pill pill-dim">${verb}</span> ${list.join(" · ")}</div>
+        `,
+        )}
+      </div>
+    </div>
+  `;
+}
+
+function groupByVerb(list) {
+  const groups = new Map();
+  for (const entry of list) {
+    const head = entry.split(" ")[0];
+    if (!groups.has(head)) groups.set(head, []);
+    const tail = entry.slice(head.length).trim();
+    groups.get(head).push(tail || "(bare)");
+  }
+  return [...groups.entries()];
+}
+
+// ---------- Chat panel ----------
+
+const ROLE_GLYPH = {
+  user: "◇",
+  assistant: "◆",
+  tool: "▣",
+  info: "·",
+  warning: "▲",
+  error: "✦",
+};
+
+function renderMessageBody(text) {
+  if (!text) return null;
+  // marked.parse escapes raw HTML in source by default — so any `<script>`
+  // in model output gets rendered as literal text, not executed. We can
+  // safely hand the result straight to dangerouslySetInnerHTML.
+  const rendered = marked.parse(text);
+  return html`<div class="md" dangerouslySetInnerHTML=${{ __html: rendered }}></div>`;
+}
+
+// Map common file extensions to highlight.js languages.
+const LANG_BY_EXT = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  py: "python",
+  rs: "rust",
+  go: "go",
+  java: "java",
+  kt: "kotlin",
+  c: "c",
+  h: "c",
+  cpp: "cpp",
+  cc: "cpp",
+  hpp: "cpp",
+  cs: "csharp",
+  swift: "swift",
+  rb: "ruby",
+  php: "php",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  fish: "bash",
+  ps1: "powershell",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "ini",
+  xml: "xml",
+  html: "xml",
+  svg: "xml",
+  css: "css",
+  scss: "scss",
+  less: "less",
+  md: "markdown",
+  sql: "sql",
+  vue: "xml",
+  svelte: "xml",
+  tex: "latex",
+  proto: "protobuf",
+  dockerfile: "dockerfile",
+};
+
+function langFromPath(path) {
+  if (!path) return null;
+  const lower = path.toLowerCase();
+  if (lower.endsWith("dockerfile")) return "dockerfile";
+  const dot = lower.lastIndexOf(".");
+  if (dot < 0) return null;
+  const ext = lower.slice(dot + 1);
+  return LANG_BY_EXT[ext] ?? null;
+}
+
+function renderHighlightedBlock(text, lang) {
+  if (!text) return "";
+  const safeLang = lang && hljs.getLanguage(lang) ? lang : null;
+  try {
+    const out = safeLang
+      ? hljs.highlight(text, { language: safeLang, ignoreIllegals: true })
+      : hljs.highlightAuto(text);
+    return `<pre class="md"><code class="hljs ${safeLang ? `language-${safeLang}` : ""}">${out.value}</code></pre>`;
+  } catch {
+    return `<pre><code>${escapeHtml(text)}</code></pre>`;
+  }
+}
+
+function parseToolArgs(raw) {
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+function ToolCard({ msg }) {
+  const args = parseToolArgs(msg.toolArgs);
+  const name = msg.toolName ?? "tool";
+  // Reasonix's filesystem tools emit the path in args.path; MCP-bridged
+  // ones may differ but most expose a `path` field too. Normalize.
+  const path = args?.path ?? args?.file_path ?? args?.filename;
+
+  // edit_file (Reasonix) — search/replace pair → diff view.
+  if (
+    (name === "edit_file" || name.endsWith("_edit_file")) &&
+    args &&
+    typeof args.search === "string" &&
+    typeof args.replace === "string"
+  ) {
+    const diffHtml = renderSearchReplace(args.search, args.replace, path ?? "");
+    return html`
+      <div class="tool-card">
+        <div class="tool-card-head">
+          <span class="tool-card-icon">✎</span>
+          <span class="tool-card-name">edit_file</span>
+          ${path ? html`<code class="tool-card-path tool-card-path-link" onClick=${() => openFileInEditor(path)} title="open in editor">${path}</code>` : null}
+        </div>
+        <div dangerouslySetInnerHTML=${{ __html: diffHtml }}></div>
+        ${msg.text ? html`<div class="tool-card-result">${msg.text}</div>` : null}
+      </div>
+    `;
+  }
+
+  // write_file — show new content as a code block with path-derived lang.
+  if (
+    (name === "write_file" || name.endsWith("_write_file")) &&
+    args &&
+    typeof args.content === "string"
+  ) {
+    const lang = langFromPath(path);
+    return html`
+      <div class="tool-card">
+        <div class="tool-card-head">
+          <span class="tool-card-icon">+</span>
+          <span class="tool-card-name">write_file</span>
+          ${path ? html`<code class="tool-card-path tool-card-path-link" onClick=${() => openFileInEditor(path)} title="open in editor">${path}</code>` : null}
+          ${lang ? html`<span class="pill pill-dim">${lang}</span>` : null}
+        </div>
+        <div dangerouslySetInnerHTML=${{ __html: renderHighlightedBlock(args.content, lang) }}></div>
+        ${msg.text ? html`<div class="tool-card-result">${msg.text}</div>` : null}
+      </div>
+    `;
+  }
+
+  // read_file / list_files — content lands in msg.text.
+  if (name === "read_file" || name.endsWith("_read_file") || name === "filesystem_read_file") {
+    const lang = langFromPath(path);
+    return html`
+      <div class="tool-card">
+        <div class="tool-card-head">
+          <span class="tool-card-icon">▤</span>
+          <span class="tool-card-name">read_file</span>
+          ${path ? html`<code class="tool-card-path tool-card-path-link" onClick=${() => openFileInEditor(path)} title="open in editor">${path}</code>` : null}
+          ${lang ? html`<span class="pill pill-dim">${lang}</span>` : null}
+        </div>
+        <div dangerouslySetInnerHTML=${{ __html: renderHighlightedBlock(msg.text, lang) }}></div>
+      </div>
+    `;
+  }
+
+  // run_command / run_background — terminal-style.
+  if (name === "run_command" || name === "run_background") {
+    const cmd = args?.command;
+    return html`
+      <div class="tool-card">
+        <div class="tool-card-head">
+          <span class="tool-card-icon">⚡</span>
+          <span class="tool-card-name">${name === "run_background" ? "run_background" : "run_command"}</span>
+        </div>
+        ${
+          cmd
+            ? html`<pre class="tool-card-cmd"><span class="tool-card-prompt">$</span> <code>${cmd}</code></pre>`
+            : null
+        }
+        ${msg.text ? html`<pre class="tool-card-output">${msg.text}</pre>` : null}
+      </div>
+    `;
+  }
+
+  // list_files / file_exists / delete_file — show args + result inline.
+  if (
+    name === "list_files" ||
+    name === "file_exists" ||
+    name === "delete_file" ||
+    name === "create_directory" ||
+    name === "delete_directory" ||
+    name.endsWith("_list_files")
+  ) {
+    return html`
+      <div class="tool-card">
+        <div class="tool-card-head">
+          <span class="tool-card-icon">▣</span>
+          <span class="tool-card-name">${name}</span>
+          ${path ? html`<code class="tool-card-path tool-card-path-link" onClick=${() => openFileInEditor(path)} title="open in editor">${path}</code>` : null}
+        </div>
+        <pre class="tool-card-output">${msg.text}</pre>
+      </div>
+    `;
+  }
+
+  // Default — keep the legacy compact box but add an args preview when
+  // present so MCP-bridged tools still surface something readable.
+  return html`
+    <div class="tool-card">
+      <div class="tool-card-head">
+        <span class="tool-card-icon">▣</span>
+        <span class="tool-card-name">${name}</span>
+      </div>
+      ${
+        args
+          ? html`<details class="tool-card-args"><summary>arguments</summary><pre>${escapeHtml(JSON.stringify(args, null, 2))}</pre></details>`
+          : null
+      }
+      <pre class="tool-card-output">${msg.text}</pre>
+    </div>
+  `;
+}
+
+function ChatMessage({ msg, streaming }) {
+  const role = msg.role;
+  const glyph = ROLE_GLYPH[role] ?? "·";
+  if (role === "tool") {
+    return html`
+      <div class="chat-msg tool">
+        <div class="glyph">${glyph}</div>
+        <${ToolCard} msg=${msg} />
+      </div>
+    `;
+  }
+  return html`
+    <div class="chat-msg ${role}">
+      <div class="glyph">${glyph}</div>
+      <div class="body">
+        ${msg.reasoning ? html`<div class="reasoning">${msg.reasoning}</div>` : null}
+        ${renderMessageBody(msg.text)}
+        ${streaming ? html`<span class="chat-streaming-cursor"></span>` : null}
+      </div>
+    </div>
+  `;
+}
+
+// ---------- Modal components mirroring the TUI ----------
+//
+// Each component renders a card matching the TUI's ModalCard accent
+// palette: red for shell (run-now), magenta for choice (branching),
+// cyan for plan (decision), green for edits. onResolve pushes to the
+// server; the SSE channel will echo back a modal-down that clears the
+// local state — both surfaces stay in lockstep without polling.
+
+function ModalCard({ accent, icon, title, subtitle, children }) {
+  return html`
+    <div class="modal-card" style=${`border-left-color: ${accent};`}>
+      <div class="modal-card-head">
+        <span class="modal-card-icon" style=${`color: ${accent};`}>${icon}</span>
+        <div>
+          <div class="modal-card-title">${title}</div>
+          ${subtitle ? html`<div class="modal-card-subtitle">${subtitle}</div>` : null}
+        </div>
+      </div>
+      ${children}
+    </div>
+  `;
+}
+
+function ShellModal({ modal, onResolve }) {
+  const isBg = modal.shellKind === "run_background";
+  return html`
+    <${ModalCard}
+      accent="#f87171"
+      icon=${isBg ? "⏱" : "⚡"}
+      title=${isBg ? "background process" : "shell command"}
+      subtitle=${
+        isBg ? "long-running — keeps running after approval" : "model wants to run a shell command"
+      }
+    >
+      <div class="modal-cmd"><span class="modal-cmd-prompt">$</span> <code>${modal.command}</code></div>
+      <div class="modal-actions">
+        <button class="primary" onClick=${() => onResolve("shell", "run_once")}>Run once</button>
+        <button onClick=${() => onResolve("shell", "always_allow")}>Always allow "${modal.allowPrefix}"</button>
+        <button class="danger" onClick=${() => onResolve("shell", "deny")}>Deny</button>
+      </div>
+    <//>
+  `;
+}
+
+function ChoiceModal({ modal, onResolve }) {
+  const [custom, setCustom] = useState("");
+  const [showCustom, setShowCustom] = useState(false);
+  return html`
+    <${ModalCard} accent="#f0abfc" icon="🔀" title="model wants you to pick" subtitle=${modal.question}>
+      ${modal.options.map(
+        (opt) => html`
+        <button
+          key=${opt.id}
+          class="modal-choice-row"
+          onClick=${() => onResolve("choice", { kind: "pick", optionId: opt.id })}
+        >
+          <span class="modal-choice-id">${opt.id}</span>
+          <span class="modal-choice-title">${opt.title}</span>
+          ${opt.summary ? html`<span class="modal-choice-summary">${opt.summary}</span>` : null}
+        </button>
+      `,
+      )}
+      ${
+        modal.allowCustom
+          ? showCustom
+            ? html`
+            <div class="modal-custom">
+              <textarea
+                placeholder="Type a free-form answer…"
+                rows="2"
+                value=${custom}
+                onInput=${(e) => setCustom(e.target.value)}
+              ></textarea>
+              <div class="modal-actions">
+                <button class="primary" onClick=${() => onResolve("choice", { kind: "custom", text: custom })} disabled=${!custom.trim()}>Send</button>
+                <button onClick=${() => {
+                  setShowCustom(false);
+                  setCustom("");
+                }}>Back</button>
+              </div>
+            </div>
+          `
+            : html`
+            <button class="modal-choice-row" onClick=${() => setShowCustom(true)}>
+              <span class="modal-choice-id">·</span>
+              <span class="modal-choice-title">Type my own answer</span>
+              <span class="modal-choice-summary">None of the above fits — write a free-form reply.</span>
+            </button>
+          `
+          : null
+      }
+      <button class="modal-choice-row modal-choice-cancel" onClick=${() => onResolve("choice", { kind: "cancel" })}>
+        <span class="modal-choice-id">×</span>
+        <span class="modal-choice-title">Cancel</span>
+        <span class="modal-choice-summary">Drop the question. Model will ask what you actually want.</span>
+      </button>
+    <//>
+  `;
+}
+
+function PlanModal({ modal, onResolve }) {
+  const [feedback, setFeedback] = useState("");
+  const [stage, setStage] = useState(null); // null | "approve" | "refine"
+  const send = () => onResolve("plan", stage, feedback);
+  return html`
+    <${ModalCard} accent="#67e8f9" icon="◆" title="plan submitted" subtitle="model proposed a plan; review then pick">
+      <div class="md modal-plan-body" dangerouslySetInnerHTML=${{ __html: marked.parse(modal.body || "") }}></div>
+      ${
+        stage
+          ? html`
+          <textarea
+            placeholder=${
+              stage === "approve"
+                ? "Optional last instructions / answers to open questions (Enter to send blank)"
+                : "What needs to change? Be specific."
+            }
+            rows="3"
+            value=${feedback}
+            onInput=${(e) => setFeedback(e.target.value)}
+          ></textarea>
+          <div class="modal-actions">
+            <button class="primary" onClick=${send}>${stage === "approve" ? "Approve" : "Send refinement"}</button>
+            <button onClick=${() => {
+              setStage(null);
+              setFeedback("");
+            }}>Back</button>
+          </div>
+        `
+          : html`
+          <div class="modal-actions">
+            <button class="primary" onClick=${() => setStage("approve")}>Approve</button>
+            <button onClick=${() => setStage("refine")}>Refine</button>
+            <button class="danger" onClick=${() => onResolve("plan", "cancel")}>Cancel</button>
+          </div>
+        `
+      }
+    <//>
+  `;
+}
+
+// Line-level LCS diff. Returns an ordered list of rows; "context" rows
+// appear on both sides, "del" only on the left (red), "ins" only on the
+// right (green). Adjacent del/ins are paired into one row downstream so
+// the change reads "old → new" left-to-right like a git side-by-side.
+function lineDiff(aLines, bLines) {
+  const m = aLines.length;
+  const n = bLines.length;
+  const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (aLines[i - 1] === bLines[j - 1]) dp[i][j] = dp[i - 1][j - 1] + 1;
+      else dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+    }
+  }
+  const out = [];
+  let i = m;
+  let j = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && aLines[i - 1] === bLines[j - 1]) {
+      out.push({ kind: "context", text: aLines[i - 1] });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      out.push({ kind: "ins", text: bLines[j - 1] });
+      j--;
+    } else {
+      out.push({ kind: "del", text: aLines[i - 1] });
+      i--;
+    }
+  }
+  return out.reverse();
+}
+
+// Pair del/ins runs into side-by-side rows. A run of consecutive dels
+// followed by a run of inss collapses into rows of (del[k], ins[k]) so
+// the modified line lines up across the gutter; surplus on either side
+// produces rows with the opposite cell empty.
+function pairDiffRows(diff) {
+  const rows = [];
+  let k = 0;
+  while (k < diff.length) {
+    if (diff[k].kind === "context") {
+      rows.push({ left: diff[k].text, right: diff[k].text, kind: "context" });
+      k++;
+      continue;
+    }
+    const dels = [];
+    const inss = [];
+    while (k < diff.length && diff[k].kind === "del") {
+      dels.push(diff[k].text);
+      k++;
+    }
+    while (k < diff.length && diff[k].kind === "ins") {
+      inss.push(diff[k].text);
+      k++;
+    }
+    const pairs = Math.max(dels.length, inss.length);
+    for (let p = 0; p < pairs; p++) {
+      rows.push({
+        left: dels[p] ?? null,
+        right: inss[p] ?? null,
+        kind: dels[p] != null && inss[p] != null ? "change" : dels[p] != null ? "del" : "ins",
+      });
+    }
+  }
+  return rows;
+}
+
+// Highlight a single line via hljs in the file's language; falls back to
+// auto-detect, then escaped plain text. Always returns inline HTML safe
+// to drop into a span.
+function hlLine(text, lang) {
+  if (text == null) return "";
+  if (text === "") return "";
+  try {
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(text, { language: lang, ignoreIllegals: true }).value;
+    }
+    return hljs.highlightAuto(text).value;
+  } catch {
+    return escapeHtml(text);
+  }
+}
+
+function EditReviewModal({ modal, onResolve }) {
+  const search = modal.search ?? "";
+  const replace = modal.replace ?? "";
+  const lang = langFromPath(modal.path);
+  const aLines = search.split("\n");
+  const bLines = replace.split("\n");
+  const rows = pairDiffRows(lineDiff(aLines, bLines));
+
+  return html`
+    <${ModalCard}
+      accent="#86efac"
+      icon="◆"
+      title="edit pending review"
+      subtitle=${`${modal.path} · ${modal.remaining} of ${modal.total} blocks remaining`}
+    >
+      <div class="edit-diff-wrap">
+        <div class="edit-diff-head">
+          <div class="edit-diff-side edit-diff-side-old">
+            <span class="edit-diff-marker">−</span> before
+          </div>
+          <div class="edit-diff-side edit-diff-side-new">
+            <span class="edit-diff-marker">+</span> after
+          </div>
+        </div>
+        <div class="edit-diff-body">
+          ${rows.map(
+            (row, i) => html`
+            <div key=${i} class=${`edit-diff-row edit-diff-row-${row.kind}`}>
+              <div class="edit-diff-cell edit-diff-cell-old">
+                ${
+                  row.left != null
+                    ? html`<span
+                        class="edit-diff-line"
+                        dangerouslySetInnerHTML=${{ __html: hlLine(row.left, lang) || "&nbsp;" }}
+                      ></span>`
+                    : html`<span class="edit-diff-empty">&nbsp;</span>`
+                }
+              </div>
+              <div class="edit-diff-cell edit-diff-cell-new">
+                ${
+                  row.right != null
+                    ? html`<span
+                        class="edit-diff-line"
+                        dangerouslySetInnerHTML=${{ __html: hlLine(row.right, lang) || "&nbsp;" }}
+                      ></span>`
+                    : html`<span class="edit-diff-empty">&nbsp;</span>`
+                }
+              </div>
+            </div>
+          `,
+          )}
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button class="primary" onClick=${() => onResolve("edit-review", "apply")}>Apply (y)</button>
+        <button onClick=${() => onResolve("edit-review", "reject")}>Reject (n)</button>
+        <button onClick=${() => onResolve("edit-review", "apply-rest-of-turn")}>Apply rest (a)</button>
+        <button onClick=${() => onResolve("edit-review", "flip-to-auto")}>Flip to AUTO (A)</button>
+      </div>
+    <//>
+  `;
+}
+
+function ChatPanel() {
+  const [messages, setMessages] = useState([]);
+  const [streaming, setStreaming] = useState(null); // { id, text, reasoning }
+  const [busy, setBusy] = useState(false);
+  const [input, setInput] = useState("");
+  const [error, setError] = useState(null);
+  const [bootError, setBootError] = useState(null);
+  const [statusLine, setStatusLine] = useState(null);
+  // Mirror of the active TUI modal: { kind, ...payload } | null. Set
+  // by `modal-up` SSE events, cleared by `modal-down`. Web uses POST
+  // /api/modal/resolve to drive resolution; either surface clears the
+  // other's modal via the resulting modal-down event.
+  const [modal, setModal] = useState(null);
+  // Current edit gate (review / auto / yolo). null when not in code
+  // mode. Refreshed via /api/overview poll because the mode also
+  // flips from TUI Shift+Tab and we want the segmented control to
+  // stay in sync without a dedicated event.
+  const [editMode, setEditModeLocal] = useState(null);
+  // Persisted preset + reasoning_effort, surfaced here so the user
+  // can flip them mid-chat without leaving the tab. /api/overview
+  // includes both since 0.14.x; the same poll covers all three.
+  const [preset, setPresetLocal] = useState(null);
+  const [effort, setEffortLocal] = useState(null);
+  // Live session stats — cache hit, costs, tokens, balance — from the
+  // same /api/overview poll. Renders into a compact status bar below
+  // the input area.
+  const [stats, setStats] = useState(null);
+  const [overviewModel, setOverviewModel] = useState(null);
+  // Sticks to bottom only while the user is already near the bottom.
+  // Once they scroll up to read older content the streaming deltas no
+  // longer yank the view back. Re-armed when they scroll back to the
+  // bottom on their own. 80px threshold absorbs sub-pixel rounding.
+  const shouldAutoScroll = useRef(true);
+
+  // Initial snapshot — messages + busy + any modal already up.
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const data = await api("/messages");
+        if (cancelled) return;
+        setMessages(data.messages ?? []);
+        setBusy(Boolean(data.busy));
+      } catch (err) {
+        if (!cancelled) setBootError(err.message);
+      }
+      try {
+        const m = await api("/modal");
+        if (!cancelled && m.modal) setModal(m.modal);
+      } catch {
+        /* skip — modal endpoint optional in standalone */
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Live event stream.
+  useEffect(() => {
+    const es = new EventSource(`/api/events?token=${TOKEN}`);
+    es.onmessage = (ev) => {
+      let dash;
+      try {
+        dash = JSON.parse(ev.data);
+      } catch {
+        return;
+      }
+      if (dash.kind === "ping") return;
+      if (dash.kind === "busy-change") {
+        setBusy(dash.busy);
+        return;
+      }
+      if (dash.kind === "user") {
+        setMessages((prev) => [...prev, { id: dash.id, role: "user", text: dash.text }]);
+        return;
+      }
+      if (dash.kind === "assistant_delta") {
+        setStreaming((cur) => {
+          const text = (cur?.text ?? "") + (dash.contentDelta ?? "");
+          const reasoning = (cur?.reasoning ?? "") + (dash.reasoningDelta ?? "");
+          return { id: dash.id, text, reasoning };
+        });
+        return;
+      }
+      if (dash.kind === "assistant_final") {
+        setStreaming(null);
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: dash.id,
+            role: "assistant",
+            text: dash.text,
+            reasoning: dash.reasoning,
+          },
+        ]);
+        return;
+      }
+      if (dash.kind === "tool_start") {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: `start-${dash.id}`,
+            role: "info",
+            text: `▸ ${dash.toolName} starting…`,
+          },
+        ]);
+        return;
+      }
+      if (dash.kind === "tool") {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: dash.id,
+            role: "tool",
+            text: dash.content,
+            toolName: dash.toolName,
+            toolArgs: dash.args,
+          },
+        ]);
+        return;
+      }
+      if (dash.kind === "warning" || dash.kind === "error" || dash.kind === "info") {
+        setMessages((prev) => [...prev, { id: dash.id, role: dash.kind, text: dash.text }]);
+        return;
+      }
+      if (dash.kind === "status") {
+        setStatusLine(dash.text);
+        // Clear the status line shortly so old hints don't pile up.
+        setTimeout(() => setStatusLine((cur) => (cur === dash.text ? null : cur)), 5000);
+        return;
+      }
+      if (dash.kind === "modal-up") {
+        setModal(dash.modal);
+        return;
+      }
+      if (dash.kind === "modal-down") {
+        setModal((cur) => (cur && cur.kind === dash.modalKind ? null : cur));
+        return;
+      }
+    };
+    es.onerror = () => {
+      // Auto-reconnect by default; surface a brief banner on persistent
+      // failure but don't tear down — EventSource retries in the background.
+      setError("event stream interrupted — reconnecting…");
+      setTimeout(() => setError(null), 3000);
+    };
+    return () => es.close();
+  }, []);
+
+  const send = useCallback(async () => {
+    const text = input.trim();
+    if (!text || busy) return;
+    setError(null);
+    try {
+      const res = await api("/submit", { method: "POST", body: { prompt: text } });
+      if (!res.accepted) {
+        setError(res.reason ?? "rejected");
+        return;
+      }
+      setInput("");
+    } catch (err) {
+      setError(err.message);
+    }
+  }, [input, busy]);
+
+  const abort = useCallback(async () => {
+    try {
+      await api("/abort", { method: "POST" });
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+
+  // /new wipes context + scrollback (server-side); /clear keeps the
+  // log but blanks the visible scroll. Both route through /api/submit
+  // because handleSubmit on the TUI side already parses slashes — keeps
+  // one source of truth, no special endpoint needed. Local messages
+  // state is reset optimistically; an /api/messages refetch reconciles.
+  const newConversation = useCallback(async () => {
+    if (busy) {
+      if (!confirm("A turn is in flight. Abort and start a new conversation?")) return;
+    } else if (messages.length > 0 && !confirm("Clear current conversation and start fresh?")) {
+      return;
+    }
+    try {
+      await api("/submit", { method: "POST", body: { prompt: "/new" } });
+      setMessages([]);
+      setStreaming(null);
+      showToast("new conversation", "info");
+      // Refetch to reconcile in case the slash queued an info row.
+      setTimeout(async () => {
+        try {
+          const r = await api("/messages");
+          setMessages(r.messages ?? []);
+        } catch {
+          /* swallow */
+        }
+      }, 200);
+    } catch (err) {
+      setError(`/new failed: ${err.message}`);
+    }
+  }, [busy, messages.length]);
+
+  const clearScrollback = useCallback(async () => {
+    try {
+      await api("/submit", { method: "POST", body: { prompt: "/clear" } });
+      setMessages([]);
+      setStreaming(null);
+      showToast("scrollback cleared", "info");
+      setTimeout(async () => {
+        try {
+          const r = await api("/messages");
+          setMessages(r.messages ?? []);
+        } catch {
+          /* swallow */
+        }
+      }, 200);
+    } catch (err) {
+      setError(`/clear failed: ${err.message}`);
+    }
+  }, []);
+
+  const onKeyDown = useCallback(
+    (e) => {
+      // Enter sends, Shift+Enter inserts newline.
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        send();
+      }
+    },
+    [send],
+  );
+
+  if (bootError) {
+    return html`<div class="notice err">chat unavailable: ${bootError}</div>`;
+  }
+
+  // Track whether the user is parked at the bottom. Update on every
+  // scroll event so a single wheel-up flips the auto-scroll guard
+  // immediately. The threshold is generous enough that overshoot
+  // (smooth-scroll rebound, sub-pixel rounding) doesn't accidentally
+  // re-arm tracking when the user is barely above bottom.
+  useEffect(() => {
+    const el = document.querySelector(".chat-feed");
+    if (!el) return;
+    const onScroll = () => {
+      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+      shouldAutoScroll.current = distFromBottom < 80;
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // Auto-scroll only when the user hasn't scrolled away. Streaming
+  // deltas no longer yank the view back; manual wheel/drag wins.
+  useEffect(() => {
+    if (!shouldAutoScroll.current) return;
+    const el = document.querySelector(".chat-feed");
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages, streaming]);
+
+  const allMessages = streaming
+    ? [
+        ...messages,
+        {
+          id: streaming.id,
+          role: "assistant",
+          text: streaming.text,
+          reasoning: streaming.reasoning,
+        },
+      ]
+    : messages;
+
+  // Resolve the active modal via POST /api/modal/resolve. The server
+  // hands the choice straight to App.tsx's resolveXxx callback, which
+  // calls the same handler the TUI button would. The local `modal`
+  // state clears the moment the SSE channel echoes `modal-down`.
+  const resolveModal = useCallback(async (kind, choice, text) => {
+    try {
+      await api("/modal/resolve", {
+        method: "POST",
+        body: text !== undefined ? { kind, choice, text } : { kind, choice },
+      });
+    } catch (err) {
+      setError(`modal resolve failed: ${err.message}`);
+    }
+  }, []);
+
+  // Poll /api/overview for current edit mode. Polling (not SSE) is
+  // fine — the gate flips from /mode, Shift+Tab, AND the web button;
+  // a 4s poll is good enough to keep the segmented control visually
+  // honest without piping yet another event kind.
+  useEffect(() => {
+    let cancelled = false;
+    const tick = async () => {
+      try {
+        const o = await api("/overview");
+        if (cancelled) return;
+        setEditModeLocal(o.editMode ?? null);
+        setPresetLocal(o.preset ?? null);
+        setEffortLocal(o.reasoningEffort ?? null);
+        setStats(o.stats ?? null);
+        setOverviewModel(o.model ?? null);
+      } catch {
+        /* swallow */
+      }
+    };
+    tick();
+    const t = setInterval(tick, 2500);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, []);
+
+  const setEditMode = useCallback(async (next) => {
+    setEditModeLocal(next); // optimistic
+    try {
+      await api("/edit-mode", { method: "POST", body: { mode: next } });
+    } catch (err) {
+      setError(`mode switch failed: ${err.message}`);
+      try {
+        const o = await api("/overview");
+        setEditModeLocal(o.editMode ?? null);
+      } catch {
+        /* swallow */
+      }
+    }
+  }, []);
+
+  // Generic settings flipper for preset + effort. Both go through
+  // /api/settings (which writes to ~/.reasonix/config.json). preset
+  // applies next session, effort applies next turn — the buttons'
+  // tooltips remind the user.
+  const setSetting = useCallback(async (key, value) => {
+    if (key === "preset") setPresetLocal(value);
+    if (key === "reasoningEffort") setEffortLocal(value);
+    try {
+      await api("/settings", { method: "POST", body: { [key]: value } });
+    } catch (err) {
+      setError(`${key} switch failed: ${err.message}`);
+      try {
+        const o = await api("/overview");
+        setPresetLocal(o.preset ?? null);
+        setEffortLocal(o.reasoningEffort ?? null);
+      } catch {
+        /* swallow */
+      }
+    }
+  }, []);
+
+  return html`
+    <div class="chat-shell">
+      <div class="panel-header" style="margin-bottom: 12px;">
+        <h2 class="panel-title">Chat</h2>
+        <span class="panel-subtitle">
+          mirrors the live ${MODE === "attached" ? "TUI" : "session"} — type here or in the terminal, both surfaces stay in sync
+        </span>
+        <div class="header-pickers" style="margin-left: auto;">
+          ${
+            effort
+              ? html`
+              <div class="mode-picker" title="reasoning_effort — applies next turn">
+                ${["high", "max"].map(
+                  (e) => html`
+                  <button
+                    key=${e}
+                    class="mode-btn ${effort === e ? "active accent" : ""}"
+                    onClick=${() => setSetting("reasoningEffort", e)}
+                    title=${e === "max" ? "max (default — best quality)" : "high (cheaper / faster)"}
+                  >${e}</button>
+                `,
+                )}
+              </div>
+            `
+              : null
+          }
+          ${
+            preset
+              ? html`
+              <div class="mode-picker" title="preset — model commitment">
+                ${(() => {
+                  // Anything that isn't one of the three new presets
+                  // (including legacy fast/smart/max from old configs)
+                  // highlights as `auto` — the safe default. User can
+                  // re-pick explicitly if they want flash or pro.
+                  const KNOWN = ["auto", "flash", "pro"];
+                  const canonical = KNOWN.includes(preset) ? preset : "auto";
+                  return ["auto", "flash", "pro"].map(
+                    (p) => html`
+                      <button
+                        key=${p}
+                        class="mode-btn ${canonical === p ? "active accent" : ""}"
+                        onClick=${() => setSetting("preset", p)}
+                        title=${
+                          p === "auto"
+                            ? "auto — flash baseline; auto-escalates to pro on hard turns (NEEDS_PRO / failure threshold)"
+                            : p === "flash"
+                              ? "flash — always flash; no auto-escalate. /pro still works for one-shot manual"
+                              : "pro — always pro; ~3× flash cost (5/31 discount). Locks in on hard architecture work."
+                        }
+                      >${p}</button>
+                    `,
+                  );
+                })()}
+              </div>
+            `
+              : null
+          }
+          ${
+            editMode
+              ? html`
+              <div class="mode-picker" title="edit gate — Shift+Tab cycles in TUI">
+                ${["review", "auto", "yolo"].map(
+                  (m) => html`
+                  <button
+                    key=${m}
+                    class="mode-btn ${editMode === m ? "active" : ""} ${m === "yolo" ? "yolo" : ""}"
+                    onClick=${() => setEditMode(m)}
+                    title=${
+                      m === "review"
+                        ? "review — both edits and non-allowlisted shell ask first"
+                        : m === "auto"
+                          ? "auto — edits auto-apply, shell still asks"
+                          : "yolo — edits AND shell auto-run, allowlist bypassed"
+                    }
+                  >${m}</button>
+                `,
+                )}
+              </div>
+            `
+              : null
+          }
+        </div>
+      </div>
+
+      ${
+        busy
+          ? html`<div class="chat-status"><span class="spinner"></span> turn in flight · <button onClick=${abort}>Abort (Esc)</button>${statusLine ? html` · <span class="muted">${statusLine}</span>` : null}</div>`
+          : statusLine
+            ? html`<div class="chat-status"><span class="muted">${statusLine}</span></div>`
+            : null
+      }
+      ${error ? html`<div class="notice err">${error}</div>` : null}
+
+      ${
+        modal
+          ? modal.kind === "shell"
+            ? html`<${ShellModal} modal=${modal} onResolve=${resolveModal} />`
+            : modal.kind === "choice"
+              ? html`<${ChoiceModal} modal=${modal} onResolve=${resolveModal} />`
+              : modal.kind === "plan"
+                ? html`<${PlanModal} modal=${modal} onResolve=${resolveModal} />`
+                : modal.kind === "edit-review"
+                  ? html`<${EditReviewModal} modal=${modal} onResolve=${resolveModal} />`
+                  : null
+          : null
+      }
+
+      ${
+        allMessages.length === 0
+          ? html`<div class="chat-empty">No conversation yet. Send a prompt below to begin.</div>`
+          : html`
+          <div class="chat-feed">
+            ${allMessages.map(
+              (m) => html`
+              <${ChatMessage}
+                key=${m.id}
+                msg=${m}
+                streaming=${streaming && streaming.id === m.id}
+              />
+            `,
+            )}
+          </div>
+        `
+      }
+
+      <div class="chat-input-area">
+        <textarea
+          placeholder=${busy ? "wait for the current turn to finish…" : "Type a prompt — Enter sends, Shift+Enter for a newline"}
+          value=${input}
+          onInput=${(e) => setInput(e.target.value)}
+          onKeyDown=${onKeyDown}
+          disabled=${busy}
+          rows="2"
+        ></textarea>
+        <div style="display: flex; flex-direction: column; gap: 6px; align-self: stretch; justify-content: flex-end;">
+          <button
+            class="primary"
+            onClick=${send}
+            disabled=${busy || !input.trim()}
+          >Send</button>
+          <div style="display: flex; gap: 6px;">
+            <button onClick=${newConversation} title="/new — wipe conversation context (loop log + scrollback)">New</button>
+            <button onClick=${clearScrollback} title="/clear — wipe just visible scrollback (context kept)">Clear</button>
+          </div>
+        </div>
+      </div>
+
+      <${ChatStatusBar} stats=${stats} model=${overviewModel} />
+    </div>
+  `;
+}
+
+// ---------- Chat status bar ----------
+//
+// Mirrors the TUI's StatsPanel — turn / session cost, cache hit %,
+// ctx token gauge, balance. Sits beneath the input area as a compact
+// monospace strip. Renders as a placeholder ("· · ·") while stats
+// haven't arrived yet so the layout doesn't shift on first paint.
+
+function ChatStatusBar({ stats, model }) {
+  if (!stats) {
+    return html`
+      <div class="chat-statusbar">
+        <span class="muted">· · ·  waiting for live stats</span>
+      </div>
+    `;
+  }
+  const ctxPct =
+    stats.contextCapTokens > 0 ? (stats.lastPromptTokens / stats.contextCapTokens) * 100 : 0;
+  const balance = stats.balance && stats.balance.length > 0 ? stats.balance[0] : null;
+  return html`
+    <div class="chat-statusbar">
+      <span class="status-item">
+        <span class="status-label">model</span>
+        <code>${model ?? "—"}</code>
+      </span>
+      <span class="status-item">
+        <span class="status-label">ctx</span>
+        <span class="status-bar-mini">
+          <span class="status-bar-mini-fill" style=${`width: ${Math.min(100, ctxPct).toFixed(1)}%;`}></span>
+        </span>
+        <span class="muted">${stats.lastPromptTokens.toLocaleString()} / ${(stats.contextCapTokens / 1000).toFixed(0)}K</span>
+      </span>
+      <span class="status-item">
+        <span class="status-label">cache</span>
+        <span class=${stats.cacheHitRatio >= 0.9 ? "status-ok" : stats.cacheHitRatio >= 0.6 ? "status-warn" : "status-err"}>
+          ${(stats.cacheHitRatio * 100).toFixed(1)}%
+        </span>
+      </span>
+      <span class="status-item">
+        <span class="status-label">turn</span>
+        <code>${fmtUsd(stats.lastTurnCostUsd)}</code>
+      </span>
+      <span class="status-item">
+        <span class="status-label">session</span>
+        <code>${fmtUsd(stats.totalCostUsd)}</code>
+        <span class="muted" style="font-size: 10px;">
+          (${stats.turns} turn${stats.turns === 1 ? "" : "s"})
+        </span>
+      </span>
+      ${
+        balance
+          ? html`
+          <span class="status-item">
+            <span class="status-label">balance</span>
+            <code>${balance.total_balance} ${balance.currency}</code>
+          </span>
+        `
+          : null
+      }
+    </div>
+  `;
+}
+
+// ---------- System Health ----------
+
+function SystemPanel() {
+  const { data, error, loading } = usePoll("/health", 5000);
+  if (loading && !data) return html`<div class="boot">loading health…</div>`;
+  if (error) return html`<div class="notice err">health failed: ${error.message}</div>`;
+  const h = data;
+  const upToDate = h.latestVersion ? h.latestVersion === h.version : null;
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">System Health</h2>
+        <span class="panel-subtitle">disk · version · jobs</span>
+      </div>
+      <div class="metric-grid">
+        ${MetricCard(
+          "Reasonix",
+          h.version,
+          h.latestVersion === null
+            ? "version check pending"
+            : upToDate
+              ? "up to date"
+              : `latest: ${h.latestVersion}`,
+          upToDate === false ? "warn" : null,
+        )}
+        ${MetricCard("Sessions", `${fmtNum(h.sessions.count)} files`, fmtBytes(h.sessions.totalBytes))}
+        ${MetricCard("Memory", `${fmtNum(h.memory.fileCount)} files`, fmtBytes(h.memory.totalBytes))}
+        ${MetricCard(
+          "Semantic index",
+          h.semantic.exists ? `${fmtNum(h.semantic.fileCount)} files` : "not built",
+          h.semantic.exists ? fmtBytes(h.semantic.totalBytes) : "run `reasonix index` to build",
+        )}
+        ${MetricCard("Usage log", fmtBytes(h.usageLog.bytes), null)}
+        ${MetricCard("Background jobs", h.jobs === null ? "—" : fmtNum(h.jobs), h.jobs === null ? "no live session" : null)}
+      </div>
+      <div class="section-title">Paths</div>
+      <div class="card mono" style="font-size: 12px; line-height: 1.8;">
+        <div><span class="pill pill-dim">home</span> ${h.reasonixHome}</div>
+        <div><span class="pill pill-dim">sessions</span> ${h.sessions.path}</div>
+        <div><span class="pill pill-dim">memory</span> ${h.memory.path}</div>
+        <div><span class="pill pill-dim">semantic</span> ${h.semantic.path}</div>
+        <div><span class="pill pill-dim">usage</span> ${h.usageLog.path}</div>
+      </div>
+    </div>
+  `;
+}
+
+// ---------- Sessions browser ----------
+
+function SessionsPanel() {
+  const { data, error, loading } = usePoll("/sessions", 5000);
+  const [open, setOpen] = useState(null); // { name, messages } or null
+  const [openLoading, setOpenLoading] = useState(false);
+
+  const view = useCallback(async (name) => {
+    setOpen({ name, messages: null });
+    setOpenLoading(true);
+    try {
+      const detail = await api(`/sessions/${encodeURIComponent(name)}`);
+      setOpen({ name, messages: detail.messages });
+    } catch (err) {
+      setOpen({ name, messages: null, error: err.message });
+    } finally {
+      setOpenLoading(false);
+    }
+  }, []);
+
+  if (loading && !data) return html`<div class="boot">loading sessions…</div>`;
+  if (error) return html`<div class="notice err">sessions failed: ${error.message}</div>`;
+  const sessions = data.sessions ?? [];
+
+  if (open) {
+    return html`
+      <div>
+        <div class="panel-header">
+          <h2 class="panel-title">Session</h2>
+          <span class="panel-subtitle">${open.name}</span>
+          <button onClick=${() => setOpen(null)} style="margin-left: auto;">← back</button>
+        </div>
+        ${
+          openLoading
+            ? html`<div class="boot">loading transcript…</div>`
+            : open.error
+              ? html`<div class="notice err">${open.error}</div>`
+              : open.messages && open.messages.length > 0
+                ? html`
+                <div class="chat-feed" style="max-height: calc(100vh - 180px); overflow-y: auto;">
+                  ${open.messages.map(
+                    (m, i) => html`
+                    <${ChatMessage}
+                      key=${i}
+                      msg=${{
+                        id: `r-${i}`,
+                        role:
+                          m.role === "tool"
+                            ? "tool"
+                            : m.role === "assistant"
+                              ? "assistant"
+                              : m.role === "user"
+                                ? "user"
+                                : "info",
+                        text: m.content ?? "",
+                        toolName: m.toolName,
+                      }}
+                      streaming=${false}
+                    />
+                  `,
+                  )}
+                </div>
+              `
+                : html`<div class="empty">empty transcript.</div>`
+        }
+      </div>
+    `;
+  }
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Sessions</h2>
+        <span class="panel-subtitle">${sessions.length} saved · click to read</span>
+      </div>
+      ${
+        sessions.length === 0
+          ? html`<div class="empty">No saved sessions yet.</div>`
+          : html`
+          <table>
+            <thead>
+              <tr>
+                <th>name</th>
+                <th class="numeric">messages</th>
+                <th class="numeric">size</th>
+                <th class="numeric">last touched</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${sessions.map(
+                (s) => html`
+                <tr key=${s.name} onClick=${() => view(s.name)} style="cursor: pointer;">
+                  <td><code>${s.name}</code></td>
+                  <td class="numeric">${fmtNum(s.messageCount)}</td>
+                  <td class="numeric">${fmtBytes(s.size)}</td>
+                  <td class="numeric muted">${fmtRelativeTime(s.mtime)}</td>
+                </tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+      }
+    </div>
+  `;
+}
+
+// ---------- Plans archive ----------
+
+function PlansPanel() {
+  const { data, error, loading } = usePoll("/plans", 8000);
+  const [open, setOpen] = useState(null);
+  if (loading && !data) return html`<div class="boot">loading plans…</div>`;
+  if (error) return html`<div class="notice err">plans failed: ${error.message}</div>`;
+  const plans = data.plans ?? [];
+
+  if (open) {
+    const completedSet = new Set(open.completedStepIds);
+    return html`
+      <div>
+        <div class="panel-header">
+          <h2 class="panel-title">Plan</h2>
+          <span class="panel-subtitle">${open.session} · ${fmtRelativeTime(open.completedAt)}</span>
+          <button onClick=${() => setOpen(null)} style="margin-left: auto;">← back</button>
+        </div>
+        ${open.summary ? html`<div class="notice">${open.summary}</div>` : null}
+        <div class="card">
+          ${open.steps.map((step) => {
+            const done = completedSet.has(step.id);
+            return html`
+              <div style="padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px;">
+                <div style="width: 16px; color: ${done ? "var(--ok)" : "var(--fg-3)"}; font-family: var(--mono);">
+                  ${done ? "✓" : "·"}
+                </div>
+                <div style="flex: 1;">
+                  <div style="color: ${done ? "var(--fg-2)" : "var(--fg-0)"}; font-weight: 500;">
+                    ${step.title}
+                  </div>
+                  ${step.action ? html`<div style="color: var(--fg-2); font-size: 12px; margin-top: 2px;">${step.action}</div>` : null}
+                  ${step.risk ? html`<span class="pill pill-${step.risk === "high" ? "err" : step.risk === "medium" ? "warn" : "dim"}" style="margin-top: 4px;">${step.risk}</span>` : null}
+                </div>
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Plans</h2>
+        <span class="panel-subtitle">${plans.length} archived · click to view</span>
+      </div>
+      ${
+        plans.length === 0
+          ? html`<div class="empty">No archived plans yet — run a turn that calls <code>submit_plan</code> + <code>mark_step_complete</code>.</div>`
+          : html`
+          <table>
+            <thead>
+              <tr>
+                <th>session</th>
+                <th>title</th>
+                <th class="numeric">progress</th>
+                <th class="numeric">archived</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${plans.map(
+                (p, i) => html`
+                <tr key=${i} onClick=${() => setOpen(p)} style="cursor: pointer;">
+                  <td><code>${p.session}</code></td>
+                  <td>${p.summary ?? html`<span class="muted">(no title)</span>`}</td>
+                  <td class="numeric">${p.completedSteps}/${p.totalSteps} · ${fmtPct(p.completionRatio)}</td>
+                  <td class="numeric muted">${fmtRelativeTime(p.completedAt)}</td>
+                </tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+      }
+    </div>
+  `;
+}
+
+// ---------- Usage time-series chart (uPlot) ----------
+
+let uPlotPromise = null;
+function loadUPlot() {
+  if (!uPlotPromise) {
+    uPlotPromise = import("https://esm.sh/uplot@1.6.31").then((m) => m.default ?? m);
+  }
+  return uPlotPromise;
+}
+
+function UsageChart({ days }) {
+  const containerRef = useRef(null);
+  const plotRef = useRef(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadUPlot().then((uPlot) => {
+      if (cancelled || !containerRef.current) return;
+      // Destroy previous instance on data refresh.
+      if (plotRef.current) {
+        plotRef.current.destroy();
+        plotRef.current = null;
+      }
+      // Don't render an empty chart — let the parent show a fallback.
+      if (!days || days.length === 0) return;
+      const xs = days.map((d) => Math.floor(Date.parse(d.day) / 1000));
+      const cost = days.map((d) => d.costUsd);
+      const saved = days.map((d) => d.cacheSavingsUsd);
+      const turns = days.map((d) => d.turns);
+      const data = [xs, cost, saved, turns];
+      const opts = {
+        width: containerRef.current.clientWidth,
+        height: 280,
+        cursor: { drag: { x: true, y: false } },
+        scales: {
+          x: { time: true },
+          y: { auto: true },
+          turns: { auto: true },
+        },
+        axes: [
+          {
+            stroke: "#94a3b8",
+            grid: { stroke: "rgba(148, 163, 184, 0.08)" },
+          },
+          {
+            scale: "y",
+            label: "USD",
+            stroke: "#94a3b8",
+            grid: { stroke: "rgba(148, 163, 184, 0.08)" },
+            values: (_u, v) => v.map((n) => `$${n.toFixed(4)}`),
+          },
+          {
+            scale: "turns",
+            side: 1,
+            label: "turns",
+            stroke: "#94a3b8",
+            grid: { show: false },
+          },
+        ],
+        series: [
+          {},
+          {
+            label: "cost",
+            stroke: "#67e8f9",
+            width: 2,
+            fill: "rgba(103, 232, 249, 0.10)",
+          },
+          {
+            label: "cache saved",
+            stroke: "#5eead4",
+            width: 2,
+            dash: [4, 4],
+          },
+          {
+            label: "turns",
+            stroke: "#c4b5fd",
+            scale: "turns",
+            width: 1.5,
+            points: { show: true, size: 4 },
+          },
+        ],
+        legend: { live: true },
+      };
+      plotRef.current = new uPlot(opts, data, containerRef.current);
+    });
+
+    // Resize observer keeps the chart at full panel width.
+    const ro = new ResizeObserver(() => {
+      if (plotRef.current && containerRef.current) {
+        plotRef.current.setSize({
+          width: containerRef.current.clientWidth,
+          height: 280,
+        });
+      }
+    });
+    if (containerRef.current) ro.observe(containerRef.current);
+
+    return () => {
+      cancelled = true;
+      ro.disconnect();
+      if (plotRef.current) {
+        plotRef.current.destroy();
+        plotRef.current = null;
+      }
+    };
+  }, [days]);
+
+  return html`<div ref=${containerRef} style="width: 100%; min-height: 280px;"></div>`;
+}
+
+// ---------- existing UsagePanel rewrite — chart + table ----------
+
+function UsageWithChart() {
+  const { data: summary, error, loading } = usePoll("/usage", 5000);
+  const [series, setSeries] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const s = await api("/usage/series");
+        if (!cancelled) setSeries(s.days ?? []);
+      } catch {
+        /* keep null; chart hides */
+      }
+    })();
+    const t = setInterval(async () => {
+      try {
+        const s = await api("/usage/series");
+        if (!cancelled) setSeries(s.days ?? []);
+      } catch {
+        /* swallow */
+      }
+    }, 30_000);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, []);
+
+  if (loading && !summary) return html`<div class="boot">loading usage…</div>`;
+  if (error) return html`<div class="notice err">usage failed: ${error.message}</div>`;
+  const u = summary;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Usage</h2>
+        <span class="panel-subtitle">${u.recordCount.toLocaleString()} records · ${u.logSize}</span>
+      </div>
+
+      ${
+        series && series.length > 0
+          ? html`
+          <div class="card" style="padding: 18px;">
+            <div class="card-title" style="margin-bottom: 12px;">Daily usage (cost · cache saved · turns)</div>
+            <${UsageChart} days=${series} />
+          </div>
+        `
+          : null
+      }
+
+      ${
+        u.recordCount === 0
+          ? html`<div class="empty" style="margin-top: 16px;">No usage data yet — run a turn in <code>reasonix chat</code> / <code>code</code> / <code>run</code> and refresh.</div>`
+          : html`
+          <div class="section-title">Rolling windows</div>
+          <table>
+            <thead>
+              <tr>
+                <th></th>
+                <th class="numeric">turns</th>
+                <th class="numeric">cache hit</th>
+                <th class="numeric">cost (USD)</th>
+                <th class="numeric">cache saved</th>
+                <th class="numeric">vs Claude</th>
+                <th class="numeric">saved</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${u.buckets.map((b) => {
+                const hitRatio =
+                  b.cacheHitTokens + b.cacheMissTokens > 0
+                    ? b.cacheHitTokens / (b.cacheHitTokens + b.cacheMissTokens)
+                    : 0;
+                const claudeSavings = b.claudeEquivUsd > 0 ? 1 - b.costUsd / b.claudeEquivUsd : 0;
+                return html`
+                  <tr>
+                    <td>${b.label}</td>
+                    <td class="numeric">${fmtNum(b.turns)}</td>
+                    <td class="numeric">${b.turns > 0 ? fmtPct(hitRatio) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 ? fmtUsd(b.costUsd) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 && b.cacheSavingsUsd > 0 ? fmtUsd(b.cacheSavingsUsd) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 ? fmtUsd(b.claudeEquivUsd) : "—"}</td>
+                    <td class="numeric">${b.turns > 0 && claudeSavings > 0 ? fmtPct(claudeSavings) : "—"}</td>
+                  </tr>
+                `;
+              })}
+            </tbody>
+          </table>
+        `
+      }
+
+      ${
+        u.byModel.length > 0
+          ? html`
+          <div class="section-title">Most used models</div>
+          <table>
+            <thead><tr><th>model</th><th class="numeric">turns</th></tr></thead>
+            <tbody>
+              ${u.byModel.slice(0, 5).map(
+                (m) => html`
+                <tr><td><code>${m.model}</code></td><td class="numeric">${fmtNum(m.turns)}</td></tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+          : null
+      }
+    </div>
+  `;
+}
+
+// ---------- Settings ----------
+
+function SettingsPanel() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(null);
+  const [draft, setDraft] = useState({});
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api("/settings");
+      setData(r);
+      setDraft({});
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const save = useCallback(
+    async (fields) => {
+      setSaving(true);
+      setError(null);
+      try {
+        await api("/settings", { method: "POST", body: fields });
+        await load();
+        setSaved(`saved: ${Object.keys(fields).join(", ")}`);
+        setTimeout(() => setSaved(null), 3000);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setSaving(false);
+      }
+    },
+    [load],
+  );
+
+  if (!data && !error) return html`<div class="boot">loading settings…</div>`;
+  if (error && !data) return html`<div class="notice err">${error}</div>`;
+  const v = data;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Settings</h2>
+        <span class="panel-subtitle">~/.reasonix/config.json · most fields apply next session</span>
+      </div>
+      ${saved ? html`<div class="notice">${saved}</div>` : null}
+      ${error ? html`<div class="notice err">${error}</div>` : null}
+
+      <div class="section-title">DeepSeek API</div>
+      <div class="card">
+        <div class="row">
+          <span class="card-title" style="margin: 0;">API key</span>
+          <code style="margin-left: auto;">${v.apiKey ?? "(not set)"}</code>
+        </div>
+        <div class="row" style="margin-top: 8px;">
+          <input
+            type="password"
+            placeholder="paste a fresh sk-… token to replace"
+            value=${draft.apiKey ?? ""}
+            onInput=${(e) => setDraft({ ...draft, apiKey: e.target.value })}
+          />
+          <button
+            class="primary"
+            disabled=${saving || !(draft.apiKey ?? "").trim()}
+            onClick=${() => save({ apiKey: draft.apiKey })}
+          >Save key</button>
+        </div>
+        <div class="row" style="margin-top: 12px;">
+          <span class="card-title" style="margin: 0;">Base URL</span>
+          <input
+            type="text"
+            value=${draft.baseUrl ?? v.baseUrl ?? ""}
+            placeholder="https://api.deepseek.com (default)"
+            onInput=${(e) => setDraft({ ...draft, baseUrl: e.target.value })}
+          />
+          <button
+            disabled=${saving || (draft.baseUrl ?? v.baseUrl ?? "") === (v.baseUrl ?? "")}
+            onClick=${() => save({ baseUrl: draft.baseUrl })}
+          >Save</button>
+        </div>
+      </div>
+
+      <div class="section-title">Defaults</div>
+      <div class="card">
+        <div class="row">
+          <span class="card-title" style="margin: 0; flex: 0 0 110px;">Preset</span>
+          <select
+            value=${
+              // Unknown values (legacy fast/smart/max, or anything
+              // hand-edited into config.json) display as `auto`.
+              ["auto", "flash", "pro"].includes(v.preset) ? v.preset : "auto"
+            }
+            onChange=${(e) => save({ preset: e.target.value })}
+            disabled=${saving}
+          >
+            <option value="auto">auto — flash → pro on hard turns (default)</option>
+            <option value="flash">flash — always flash, no auto-escalate</option>
+            <option value="pro">pro — always pro</option>
+          </select>
+          <span class="muted" style="margin-left: auto; font-size: 12px;">applies next turn</span>
+        </div>
+        <div class="row" style="margin-top: 12px;">
+          <span class="card-title" style="margin: 0; flex: 0 0 110px;">Effort</span>
+          <select
+            value=${v.reasoningEffort}
+            onChange=${(e) => save({ reasoningEffort: e.target.value })}
+            disabled=${saving}
+          >
+            <option value="max">max (default — best)</option>
+            <option value="high">high (cheaper / faster)</option>
+          </select>
+          <span class="muted" style="margin-left: auto; font-size: 12px;">applies next turn</span>
+        </div>
+        <div class="row" style="margin-top: 12px;">
+          <span class="card-title" style="margin: 0; flex: 0 0 110px;">Web search</span>
+          <button
+            class=${v.search ? "primary" : ""}
+            onClick=${() => save({ search: !v.search })}
+            disabled=${saving}
+          >${v.search ? "ON" : "off"}</button>
+          <span class="muted" style="margin-left: auto; font-size: 12px;">web_fetch + web_search tools</span>
+        </div>
+      </div>
+
+      <div class="section-title">Runtime</div>
+      <div class="card">
+        <div class="row">
+          <span class="card-title" style="margin: 0; flex: 0 0 110px;">Active model</span>
+          <code>${v.model ?? "—"}</code>
+        </div>
+        <div class="row" style="margin-top: 8px;">
+          <span class="card-title" style="margin: 0; flex: 0 0 110px;">Edit mode</span>
+          <code>${v.editMode}</code>
+          <span class="muted" style="margin-left: auto; font-size: 12px;">switch from the Chat tab header</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ---------- Hooks ----------
+
+function HooksPanel() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [drafts, setDrafts] = useState({}); // { project: jsonText, global: jsonText }
+  const [busy, setBusy] = useState(false);
+  const [info, setInfo] = useState(null);
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api("/hooks");
+      setData(r);
+      setDrafts({
+        project: JSON.stringify(r.project.hooks ?? {}, null, 2),
+        global: JSON.stringify(r.global.hooks ?? {}, null, 2),
+      });
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const saveScope = useCallback(
+    async (scope) => {
+      setBusy(true);
+      setError(null);
+      let parsed;
+      try {
+        parsed = JSON.parse(drafts[scope]);
+      } catch (err) {
+        setError(`${scope} JSON: ${err.message}`);
+        setBusy(false);
+        return;
+      }
+      try {
+        await api("/hooks/save", { method: "POST", body: { scope, hooks: parsed } });
+        await api("/hooks/reload", { method: "POST", body: {} });
+        setInfo(`saved + reloaded ${scope}`);
+        setTimeout(() => setInfo(null), 3000);
+        await load();
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [drafts, load],
+  );
+
+  if (!data && !error) return html`<div class="boot">loading hooks…</div>`;
+  if (error && !data) return html`<div class="notice err">${error}</div>`;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Hooks</h2>
+        <span class="panel-subtitle">${data.resolved.length} resolved · events: ${data.events.join(", ")}</span>
+      </div>
+      ${info ? html`<div class="notice">${info}</div>` : null}
+      ${error ? html`<div class="notice err">${error}</div>` : null}
+      ${["project", "global"].map((scope) => {
+        const meta = data[scope];
+        return html`
+          <div class="section-title">${scope} — <code>${meta.path ?? "(no project)"}</code></div>
+          ${
+            scope === "project" && !meta.path
+              ? html`<div class="empty">No active project — open <code>/dashboard</code> from <code>reasonix code</code> to edit project hooks.</div>`
+              : html`
+              <textarea
+                style="width: 100%; height: 240px; font-family: var(--mono); font-size: 12.5px; background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px;"
+                value=${drafts[scope] ?? ""}
+                onInput=${(e) => setDrafts({ ...drafts, [scope]: e.target.value })}
+                disabled=${busy}
+              ></textarea>
+              <div class="row" style="margin-top: 8px;">
+                <button class="primary" disabled=${busy} onClick=${() => saveScope(scope)}>Save + Reload</button>
+                <button disabled=${busy} onClick=${load}>Discard changes</button>
+              </div>
+            `
+          }
+        `;
+      })}
+    </div>
+  `;
+}
+
+// ---------- Memory ----------
+
+function MemoryPanel() {
+  const [tree, setTree] = useState(null);
+  const [error, setError] = useState(null);
+  const [open, setOpen] = useState(null); // { scope, name } | null
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [info, setInfo] = useState(null);
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api("/memory");
+      setTree(r);
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const openFile = useCallback(async (scope, name) => {
+    setOpen({ scope, name });
+    setBusy(true);
+    try {
+      const path =
+        scope === "project" ? "/memory/project" : `/memory/${scope}/${encodeURIComponent(name)}`;
+      const r = await api(path);
+      setBody(r.body);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  const save = useCallback(async () => {
+    if (!open) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const path =
+        open.scope === "project"
+          ? "/memory/project"
+          : `/memory/${open.scope}/${encodeURIComponent(open.name)}`;
+      await api(path, { method: "POST", body: { body } });
+      setInfo(`saved ${open.scope}${open.name ? `/${open.name}` : ""}`);
+      setTimeout(() => setInfo(null), 3000);
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [open, body, load]);
+
+  if (!tree && !error) return html`<div class="boot">loading memory…</div>`;
+  if (error && !tree) return html`<div class="notice err">${error}</div>`;
+
+  if (open) {
+    return html`
+      <div>
+        <div class="panel-header">
+          <h2 class="panel-title">Memory · ${open.scope}${open.name ? `/${open.name}` : ""}</h2>
+          <button onClick=${() => setOpen(null)} style="margin-left: auto;">← back</button>
+        </div>
+        ${info ? html`<div class="notice">${info}</div>` : null}
+        ${error ? html`<div class="notice err">${error}</div>` : null}
+        <textarea
+          style="width: 100%; height: 480px; font-family: var(--mono); font-size: 13px; background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px;"
+          value=${body}
+          onInput=${(e) => setBody(e.target.value)}
+          disabled=${busy}
+        ></textarea>
+        <div class="row" style="margin-top: 8px;">
+          <button class="primary" disabled=${busy} onClick=${save}>Save</button>
+          <span class="muted" style="font-size: 12px;">${body.length.toLocaleString()} chars · re-applied on next /new or session restart</span>
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Memory</h2>
+        <span class="panel-subtitle">REASONIX.md (committable) + private notes (~/.reasonix/memory)</span>
+      </div>
+      <div class="section-title">Project — REASONIX.md</div>
+      ${
+        tree.project.path
+          ? html`
+          <div class="card row" style="cursor: pointer;" onClick=${() => openFile("project")}>
+            <span><code>${tree.project.path}</code></span>
+            <span class="pill ${tree.project.exists ? "pill-ok" : "pill-dim"}" style="margin-left: auto;">
+              ${tree.project.exists ? "exists" : "create"}
+            </span>
+          </div>
+        `
+          : html`<div class="empty">No active project.</div>`
+      }
+
+      <div class="section-title">Global — ~/.reasonix/memory/global</div>
+      ${
+        tree.global.files.length === 0
+          ? html`<div class="empty">No global memory files yet.</div>`
+          : html`
+          <table>
+            <thead><tr><th>name</th><th class="numeric">size</th><th class="numeric">touched</th></tr></thead>
+            <tbody>
+              ${tree.global.files.map(
+                (f) => html`
+                <tr key=${f.name} style="cursor: pointer;" onClick=${() => openFile("global", f.name)}>
+                  <td><code>${f.name}</code></td>
+                  <td class="numeric">${fmtBytes(f.size)}</td>
+                  <td class="numeric muted">${fmtRelativeTime(f.mtime)}</td>
+                </tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+      }
+
+      ${
+        tree.projectMem.path
+          ? html`
+          <div class="section-title">Project private — ~/.reasonix/memory/&lt;hash&gt;</div>
+          ${
+            tree.projectMem.files.length === 0
+              ? html`<div class="empty">No project-private memory yet.</div>`
+              : html`
+              <table>
+                <thead><tr><th>name</th><th class="numeric">size</th><th class="numeric">touched</th></tr></thead>
+                <tbody>
+                  ${tree.projectMem.files.map(
+                    (f) => html`
+                    <tr key=${f.name} style="cursor: pointer;" onClick=${() => openFile("project-mem", f.name)}>
+                      <td><code>${f.name}</code></td>
+                      <td class="numeric">${fmtBytes(f.size)}</td>
+                      <td class="numeric muted">${fmtRelativeTime(f.mtime)}</td>
+                    </tr>
+                  `,
+                  )}
+                </tbody>
+              </table>
+            `
+          }
+        `
+          : null
+      }
+    </div>
+  `;
+}
+
+// ---------- Skills ----------
+
+function SkillsPanel() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [open, setOpen] = useState(null);
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [info, setInfo] = useState(null);
+  const [newName, setNewName] = useState("");
+  const [newScope, setNewScope] = useState("global");
+
+  const load = useCallback(async () => {
+    try {
+      setData(await api("/skills"));
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const openSkill = useCallback(async (scope, name) => {
+    setOpen({ scope, name });
+    setBusy(true);
+    try {
+      const r = await api(`/skills/${scope}/${encodeURIComponent(name)}`);
+      setBody(r.body);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  const save = useCallback(async () => {
+    if (!open) return;
+    setBusy(true);
+    try {
+      await api(`/skills/${open.scope}/${encodeURIComponent(open.name)}`, {
+        method: "POST",
+        body: { body },
+      });
+      setInfo(`saved ${open.scope}/${open.name}`);
+      setTimeout(() => setInfo(null), 3000);
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [open, body, load]);
+
+  const remove = useCallback(async () => {
+    if (!open) return;
+    if (!confirm(`Delete skill ${open.scope}/${open.name}?`)) return;
+    setBusy(true);
+    try {
+      await api(`/skills/${open.scope}/${encodeURIComponent(open.name)}`, { method: "DELETE" });
+      setOpen(null);
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [open, load]);
+
+  const create = useCallback(async () => {
+    if (!newName.trim()) return;
+    setBusy(true);
+    const stub = `---\nname: ${newName.trim()}\ndescription: TODO — one-line description that helps the model match this skill\n---\n\n# ${newName.trim()}\n\n`;
+    try {
+      await api(`/skills/${newScope}/${encodeURIComponent(newName.trim())}`, {
+        method: "POST",
+        body: { body: stub },
+      });
+      setNewName("");
+      await load();
+      openSkill(newScope, newName.trim());
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [newName, newScope, load, openSkill]);
+
+  if (!data && !error) return html`<div class="boot">loading skills…</div>`;
+  if (error && !data) return html`<div class="notice err">${error}</div>`;
+
+  if (open) {
+    return html`
+      <div>
+        <div class="panel-header">
+          <h2 class="panel-title">Skill · ${open.scope}/${open.name}</h2>
+          <button onClick=${() => setOpen(null)} style="margin-left: auto;">← back</button>
+        </div>
+        ${info ? html`<div class="notice">${info}</div>` : null}
+        ${error ? html`<div class="notice err">${error}</div>` : null}
+        <textarea
+          style="width: 100%; height: 520px; font-family: var(--mono); font-size: 13px; background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px;"
+          value=${body}
+          onInput=${(e) => setBody(e.target.value)}
+          disabled=${busy}
+        ></textarea>
+        <div class="row" style="margin-top: 8px;">
+          <button class="primary" disabled=${busy} onClick=${save}>Save</button>
+          <button class="danger" disabled=${busy} onClick=${remove}>Delete</button>
+          <span class="muted" style="font-size: 12px; margin-left: auto;">re-loaded on next /new or session restart</span>
+        </div>
+      </div>
+    `;
+  }
+
+  const renderList = (label, items, scope) => html`
+    <div class="section-title">${label} (${items.length})</div>
+    ${
+      items.length === 0
+        ? html`<div class="empty">none</div>`
+        : html`
+        <table>
+          <thead><tr><th>name</th><th>description</th><th></th></tr></thead>
+          <tbody>
+            ${items.map(
+              (s) => html`
+              <tr key=${s.name} style="cursor: ${scope === "builtin" ? "default" : "pointer"};" onClick=${() => scope !== "builtin" && openSkill(scope, s.name)}>
+                <td><code>${s.name}</code></td>
+                <td>${s.description ?? html`<span class="muted">(no description)</span>`}</td>
+                <td>${scope === "builtin" ? html`<span class="pill pill-dim">builtin</span>` : null}</td>
+              </tr>
+            `,
+            )}
+          </tbody>
+        </table>
+      `
+    }
+  `;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Skills</h2>
+        <span class="panel-subtitle">click to edit · creates land in next /new</span>
+      </div>
+      ${error ? html`<div class="notice err">${error}</div>` : null}
+
+      <div class="section-title">Create new</div>
+      <div class="card row">
+        <select value=${newScope} onChange=${(e) => setNewScope(e.target.value)}>
+          <option value="global">global</option>
+          ${data.paths.project ? html`<option value="project">project</option>` : null}
+        </select>
+        <input
+          type="text"
+          placeholder="skill-name"
+          value=${newName}
+          onInput=${(e) => setNewName(e.target.value)}
+        />
+        <button class="primary" disabled=${busy || !newName.trim()} onClick=${create}>Create</button>
+      </div>
+
+      ${renderList("Project", data.project, "project")}
+      ${renderList("Global", data.global, "global")}
+      ${renderList("Builtin (read-only)", data.builtin, "builtin")}
+    </div>
+  `;
+}
+
+// ---------- MCP ----------
+
+function McpPanel() {
+  const [data, setData] = useState(null);
+  const [specs, setSpecs] = useState(null);
+  const [error, setError] = useState(null);
+  const [info, setInfo] = useState(null);
+  const [newSpec, setNewSpec] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [open, setOpen] = useState(null); // server detail
+
+  const load = useCallback(async () => {
+    try {
+      setData(await api("/mcp"));
+      setSpecs((await api("/mcp/specs")).specs);
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const addSpec = useCallback(async () => {
+    if (!newSpec.trim()) return;
+    setBusy(true);
+    try {
+      const r = await api("/mcp/specs", { method: "POST", body: { spec: newSpec.trim() } });
+      setInfo(
+        r.requiresRestart ? "saved — restart `reasonix code` to bridge this server" : "saved",
+      );
+      setTimeout(() => setInfo(null), 4000);
+      setNewSpec("");
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [newSpec, load]);
+
+  const removeSpec = useCallback(
+    async (spec) => {
+      if (!confirm(`Remove MCP spec from config?\n\n${spec}`)) return;
+      setBusy(true);
+      try {
+        await api("/mcp/specs", { method: "DELETE", body: { spec } });
+        setInfo("removed — restart to drop the live bridge");
+        setTimeout(() => setInfo(null), 4000);
+        await load();
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [load],
+  );
+
+  if (!data && !error) return html`<div class="boot">loading MCP…</div>`;
+  if (error && !data) return html`<div class="notice err">${error}</div>`;
+
+  if (open) {
+    return html`
+      <div>
+        <div class="panel-header">
+          <h2 class="panel-title">MCP · ${open.label}</h2>
+          <button onClick=${() => setOpen(null)} style="margin-left: auto;">← back</button>
+        </div>
+        <div class="card">
+          <div class="row"><span class="card-title" style="margin: 0; flex: 0 0 110px;">spec</span><code>${open.spec}</code></div>
+          <div class="row"><span class="card-title" style="margin: 0; flex: 0 0 110px;">server</span><span>${open.serverInfo?.name ?? "—"} ${open.serverInfo?.version ? `v${open.serverInfo.version}` : ""}</span></div>
+          <div class="row"><span class="card-title" style="margin: 0; flex: 0 0 110px;">protocol</span><code>${open.protocolVersion}</code></div>
+        </div>
+        ${open.instructions ? html`<div class="notice">${open.instructions}</div>` : null}
+        <div class="section-title">Tools (${open.tools.length})</div>
+        <table>
+          <thead><tr><th>name</th><th>description</th></tr></thead>
+          <tbody>
+            ${open.tools.map((t) => html`<tr><td><code>${t.name}</code></td><td>${t.description ?? ""}</td></tr>`)}
+          </tbody>
+        </table>
+        ${
+          open.resources.length > 0
+            ? html`
+          <div class="section-title">Resources (${open.resources.length})</div>
+          <table>
+            <thead><tr><th>name</th><th>uri</th></tr></thead>
+            <tbody>
+              ${open.resources.map((r) => html`<tr><td>${r.name}</td><td><code>${r.uri}</code></td></tr>`)}
+            </tbody>
+          </table>
+        `
+            : null
+        }
+        ${
+          open.prompts.length > 0
+            ? html`
+          <div class="section-title">Prompts (${open.prompts.length})</div>
+          <table>
+            <thead><tr><th>name</th><th>description</th></tr></thead>
+            <tbody>
+              ${open.prompts.map((p) => html`<tr><td><code>${p.name}</code></td><td>${p.description ?? ""}</td></tr>`)}
+            </tbody>
+          </table>
+        `
+            : null
+        }
+      </div>
+    `;
+  }
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">MCP</h2>
+        <span class="panel-subtitle">${data.servers.length} bridged · ${specs?.length ?? 0} in config</span>
+      </div>
+      ${info ? html`<div class="notice">${info}</div>` : null}
+      ${error ? html`<div class="notice err">${error}</div>` : null}
+
+      <div class="section-title">Add server</div>
+      <div class="card row">
+        <input
+          type="text"
+          placeholder='spec — e.g. "fs=npx -y @modelcontextprotocol/server-filesystem /tmp/safe"'
+          value=${newSpec}
+          onInput=${(e) => setNewSpec(e.target.value)}
+        />
+        <button class="primary" disabled=${busy || !newSpec.trim()} onClick=${addSpec}>Add</button>
+      </div>
+
+      <div class="section-title">Bridged (${data.servers.length})</div>
+      ${
+        data.servers.length === 0
+          ? html`<div class="empty">No MCP servers in this session.</div>`
+          : html`
+          <table>
+            <thead><tr><th>label</th><th>spec</th><th class="numeric">tools</th><th></th></tr></thead>
+            <tbody>
+              ${data.servers.map(
+                (s) => html`
+                <tr key=${s.label} style="cursor: pointer;" onClick=${() => setOpen(s)}>
+                  <td><code>${s.label}</code></td>
+                  <td><code style="font-size: 11px;">${s.spec}</code></td>
+                  <td class="numeric">${fmtNum(s.toolCount)}</td>
+                  <td></td>
+                </tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+      }
+
+      <div class="section-title">Persisted specs (config.json)</div>
+      ${
+        (specs ?? []).length === 0
+          ? html`<div class="empty">No MCP specs persisted in <code>~/.reasonix/config.json</code>.</div>`
+          : html`
+          <table>
+            <thead><tr><th>spec</th><th></th></tr></thead>
+            <tbody>
+              ${specs.map(
+                (spec) => html`
+                <tr key=${spec}>
+                  <td><code>${spec}</code></td>
+                  <td class="numeric">
+                    <button class="danger" disabled=${busy} onClick=${(e) => {
+                      e.stopPropagation();
+                      removeSpec(spec);
+                    }}>remove</button>
+                  </td>
+                </tr>
+              `,
+              )}
+            </tbody>
+          </table>
+        `
+      }
+    </div>
+  `;
+}
+
+// ---------- Editor (CodeMirror 6, multi-tab) ----------
+
+// Lazy-loaded CodeMirror modules — kept off the initial bundle so users
+// who never open Editor never pay the ~200KB cost. Cached after first
+// resolve so tab switches don't re-fetch.
+//
+// CodeMirror loads from a locally bundled file (`/assets/codemirror.js`,
+// produced by `scripts/bundle-codemirror.mjs`). One bundle = one copy
+// of every package = no Tag identity mismatch between oneDark and the
+// language parsers, no esm.sh round-trips on every cold load. The
+// previous esm.sh + ?deps= setup hit silent failure modes whenever the
+// CDN resolved a transitive @lezer/* to a different version than the
+// bundled cache thought it would.
+let cmModulesPromise = null;
+async function loadCodeMirror() {
+  if (cmModulesPromise) return cmModulesPromise;
+  cmModulesPromise = import(`/assets/codemirror.js?token=${TOKEN}`);
+  return cmModulesPromise;
+}
+
+// Map file path → CodeMirror language extension factory.
+function langExtensionFor(path, langs) {
+  const lang = langFromPath(path);
+  if (!lang) return null;
+  // CodeMirror's javascript pack handles ts/tsx/jsx via options.
+  if (lang === "typescript") return langs.typescript ? langs.typescript() : null;
+  if (lang === "javascript") return langs.javascript ? langs.javascript({ jsx: true }) : null;
+  const fn = langs[lang];
+  return fn ? fn() : null;
+}
+
+// Build a nested folder tree from a flat list of repo paths. Nodes use
+// Maps so insertion order is stable; sorting happens at render time.
+function buildFileTree(paths) {
+  const root = { name: "", path: "", children: new Map(), isFile: false };
+  for (const p of paths) {
+    const parts = p.split("/").filter(Boolean);
+    let node = root;
+    for (let i = 0; i < parts.length; i++) {
+      const isLast = i === parts.length - 1;
+      const name = parts[i];
+      const childPath = parts.slice(0, i + 1).join("/");
+      let child = node.children.get(name);
+      if (!child) {
+        child = { name, path: childPath, children: new Map(), isFile: isLast };
+        node.children.set(name, child);
+      } else if (isLast && child.children.size === 0) {
+        child.isFile = true;
+      }
+      node = child;
+    }
+  }
+  return root;
+}
+
+// Walk the tree honoring the expanded set; produce a flat row list the
+// renderer can map straight to JSX. Folders precede files; both sorted
+// case-insensitively.
+function flattenTree(node, expanded, depth, out) {
+  const children = [...node.children.values()].sort((a, b) => {
+    if (a.isFile !== b.isFile) return a.isFile ? 1 : -1;
+    return a.name.localeCompare(b.name, undefined, { sensitivity: "base" });
+  });
+  for (const child of children) {
+    out.push({ name: child.name, path: child.path, depth, isFile: child.isFile });
+    if (!child.isFile && expanded.has(child.path)) {
+      flattenTree(child, expanded, depth + 1, out);
+    }
+  }
+  return out;
+}
+
+function EditorPanel({ onClose } = {}) {
+  // tabs: { path, content, original, dirty, savedAt }
+  const [tabs, setTabs] = useState([]);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [files, setFiles] = useState([]);
+  const [filesError, setFilesError] = useState(null);
+  const [openInput, setOpenInput] = useState("");
+  const [filter, setFilter] = useState("");
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [cmReady, setCmReady] = useState(false);
+  const [sideCollapsed, setSideCollapsed] = useState(false);
+  const [expanded, setExpanded] = useState(() => new Set());
+  // View mode for markdown tabs: "edit" (source only), "split" (source +
+  // preview side-by-side), "preview" (rendered only). Non-md tabs always
+  // render in edit mode regardless of this state.
+  const [viewMode, setViewMode] = useState("edit");
+  const editorContainerRef = useRef(null);
+  const viewRef = useRef(null);
+  const cmRef = useRef(null);
+  const tabsRef = useRef(tabs);
+  const activeIdxRef = useRef(activeIdx);
+  useEffect(() => {
+    tabsRef.current = tabs;
+  }, [tabs]);
+  useEffect(() => {
+    activeIdxRef.current = activeIdx;
+  }, [activeIdx]);
+
+  // Load file list (gitignore-aware) for the picker.
+  const loadFiles = useCallback(async () => {
+    try {
+      const r = await api("/files");
+      setFiles(r.files ?? []);
+    } catch (err) {
+      setFilesError(err.message);
+    }
+  }, []);
+  useEffect(() => {
+    loadFiles();
+  }, [loadFiles]);
+
+  // Open a file → fetch + push tab + activate. If already open, just
+  // switch to the existing tab so we don't lose unsaved edits.
+  const openPath = useCallback(async (path) => {
+    if (!path) return;
+    const existing = tabsRef.current.findIndex((t) => t.path === path);
+    if (existing >= 0) {
+      setActiveIdx(existing);
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await api(`/file/${path.split("/").map(encodeURIComponent).join("/")}`);
+      setTabs((prev) => [
+        ...prev,
+        { path, content: r.content, original: r.content, dirty: false, savedAt: r.mtime },
+      ]);
+      setActiveIdx(tabsRef.current.length);
+    } catch (err) {
+      setError(`open ${path}: ${err.message}`);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  // Subscribe to "open-file" events fired from elsewhere (Chat panel
+  // tool cards, file-mention links).
+  useEffect(() => {
+    const onOpen = (ev) => openPath(ev.detail.path);
+    appBus.addEventListener("open-file", onOpen);
+    return () => appBus.removeEventListener("open-file", onOpen);
+  }, [openPath]);
+
+  // Mount CodeMirror lazily on first render.
+  useEffect(() => {
+    let cancelled = false;
+    loadCodeMirror().then((cm) => {
+      if (!cancelled) {
+        cmRef.current = cm;
+        setCmReady(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Re-mount the editor view when active tab changes. Each tab's
+  // content is held in React state — the view is just a presentation
+  // layer over the current tab's string.
+  useEffect(() => {
+    if (!cmReady || !editorContainerRef.current) return;
+    const cm = cmRef.current;
+    if (!cm) return;
+    const tab = tabs[activeIdx];
+    if (!tab) {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+      return;
+    }
+
+    if (viewRef.current) {
+      viewRef.current.destroy();
+      viewRef.current = null;
+    }
+
+    const langExt = langExtensionFor(tab.path, cm.langs);
+    const updateListener = cm.EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        const text = update.state.doc.toString();
+        // Mutate the tab's content + dirty flag without forcing a
+        // full re-render of the editor (which would lose the cursor).
+        // We DO setTabs so the tab bar's dirty dot updates.
+        const idx = activeIdxRef.current;
+        const live = tabsRef.current;
+        if (live[idx]) {
+          const next = [...live];
+          next[idx] = { ...next[idx], content: text, dirty: text !== next[idx].original };
+          tabsRef.current = next;
+          setTabs(next);
+        }
+      }
+    });
+
+    const extensions = [
+      cm.lineNumbers(),
+      cm.highlightActiveLineGutter ? cm.highlightActiveLineGutter() : [],
+      cm.foldGutter ? cm.foldGutter() : [],
+      cm.highlightActiveLine(),
+      cm.drawSelection(),
+      cm.history(),
+      cm.bracketMatching(),
+      cm.indentOnInput(),
+      cm.closeBrackets ? cm.closeBrackets() : [],
+      cm.autocompletion
+        ? cm.autocompletion({
+            activateOnTyping: true,
+            closeOnBlur: true,
+            maxRenderedOptions: 30,
+          })
+        : [],
+      cm.highlightSelectionMatches ? cm.highlightSelectionMatches() : [],
+      cm.keymap.of([
+        ...cm.defaultKeymap,
+        ...cm.historyKeymap,
+        ...(cm.closeBracketsKeymap ?? []),
+        ...(cm.searchKeymap ?? []),
+        ...(cm.completionKeymap ?? []),
+        ...(cm.foldKeymap ?? []),
+        cm.indentWithTab,
+      ]),
+      // oneDark is an array of [theme, syntaxHighlighting(oneDarkHighlightStyle)] —
+      // including it gives both the dark UI and the highlight tags. Keep
+      // defaultHighlightStyle as a fallback only for languages oneDark omits.
+      cm.oneDark,
+      cm.syntaxHighlighting(cm.defaultHighlightStyle, { fallback: true }),
+      cm.EditorView.lineWrapping,
+      updateListener,
+    ];
+    if (langExt) extensions.push(langExt);
+
+    const state = cm.EditorState.create({ doc: tab.content, extensions });
+    viewRef.current = new cm.EditorView({ state, parent: editorContainerRef.current });
+
+    return () => {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, [cmReady, activeIdx, tabs[activeIdx]?.path, viewMode]);
+
+  const closeTab = useCallback((idx) => {
+    const tab = tabsRef.current[idx];
+    if (tab?.dirty && !confirm(`${tab.path} has unsaved changes. Discard?`)) return;
+    setTabs((prev) => prev.filter((_, i) => i !== idx));
+    if (activeIdxRef.current >= idx) {
+      setActiveIdx(Math.max(0, activeIdxRef.current - 1));
+    }
+  }, []);
+
+  const saveTab = useCallback(async (idx) => {
+    const tab = tabsRef.current[idx];
+    if (!tab) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await api(`/file/${tab.path.split("/").map(encodeURIComponent).join("/")}`, {
+        method: "POST",
+        body: { content: tab.content },
+      });
+      setTabs((prev) => {
+        const next = [...prev];
+        if (next[idx]) {
+          next[idx] = { ...next[idx], original: tab.content, dirty: false, savedAt: r.mtime };
+        }
+        return next;
+      });
+      showToast(`saved ${tab.path}`, "info");
+    } catch (err) {
+      setError(`save ${tab.path}: ${err.message}`);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  // Cmd/Ctrl+S — save active tab.
+  useEffect(() => {
+    const onKey = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        if (tabsRef.current[activeIdxRef.current]) {
+          saveTab(activeIdxRef.current);
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [saveTab]);
+
+  const tab = tabs[activeIdx];
+
+  const tree = useMemo(() => buildFileTree(files), [files]);
+  const treeRows = useMemo(() => flattenTree(tree, expanded, 0, []), [tree, expanded]);
+
+  const toggleFolder = useCallback((path) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
+
+  const filtering = filter.trim().length > 0;
+  const filteredFiles = filtering
+    ? files.filter((f) => f.toLowerCase().includes(filter.toLowerCase())).slice(0, 80)
+    : null;
+
+  const openPaths = tabs.map((t) => t.path);
+
+  return html`
+    <div class="editor-shell">
+      ${
+        onClose
+          ? html`
+          <div class="editor-drawer-head">
+            <span class="editor-drawer-title">Editor</span>
+            <button class="editor-drawer-close" onClick=${onClose} title="close editor (Esc)">×</button>
+          </div>
+        `
+          : null
+      }
+      <div class="editor-tabs">
+        ${
+          tabs.length === 0
+            ? html`<div class="editor-no-tabs">No files open. Pick from the list, paste a path above, or click a path in chat.</div>`
+            : tabs.map(
+                (t, i) => html`
+            <div
+              key=${t.path}
+              class="editor-tab ${i === activeIdx ? "active" : ""}"
+              onClick=${() => setActiveIdx(i)}
+            >
+              <span class="editor-tab-name" title=${t.path}>${t.path.split("/").pop()}</span>
+              ${t.dirty ? html`<span class="editor-tab-dirty">●</span>` : null}
+              <span class="editor-tab-close" onClick=${(e) => {
+                e.stopPropagation();
+                closeTab(i);
+              }}>×</span>
+            </div>
+          `,
+              )
+        }
+      </div>
+      <div class="editor-body">
+      ${
+        sideCollapsed
+          ? html`
+          <div class="editor-side collapsed">
+            <button
+              class="editor-side-toggle"
+              onClick=${() => setSideCollapsed(false)}
+              title="show files"
+            >▶</button>
+          </div>
+        `
+          : html`
+          <div class="editor-side">
+            <div class="editor-side-head">
+              <span class="editor-side-label">FILES</span>
+              <button
+                class="editor-side-toggle"
+                onClick=${() => setSideCollapsed(true)}
+                title="hide files"
+              >◀</button>
+            </div>
+            <div class="row" style="margin-bottom: 8px;">
+              <input
+                type="text"
+                placeholder="open by path…"
+                value=${openInput}
+                onInput=${(e) => setOpenInput(e.target.value)}
+                onKeyDown=${(e) => {
+                  if (e.key === "Enter" && openInput.trim()) {
+                    openPath(openInput.trim());
+                    setOpenInput("");
+                  }
+                }}
+              />
+            </div>
+            <input
+              type="search"
+              placeholder=${`filter ${files.length} files…`}
+              value=${filter}
+              onInput=${(e) => setFilter(e.target.value)}
+              style="margin-bottom: 8px;"
+            />
+            ${
+              filesError
+                ? html`<div class="notice err">${filesError}</div>`
+                : filtering
+                  ? html`
+                  <div class="editor-files">
+                    ${filteredFiles.map(
+                      (f) => html`
+                      <div
+                        key=${f}
+                        class="editor-file ${openPaths.includes(f) ? "open" : ""}"
+                        onClick=${() => openPath(f)}
+                        title=${f}
+                      >${f}</div>
+                    `,
+                    )}
+                    ${files.length > 80 ? html`<div class="muted" style="padding: 8px; font-size: 11px;">narrow filter to see more</div>` : null}
+                  </div>
+                `
+                  : html`
+                  <div class="editor-files">
+                    ${treeRows.map((row) =>
+                      row.isFile
+                        ? html`
+                        <div
+                          key=${row.path}
+                          class="editor-tree-file ${openPaths.includes(row.path) ? "open" : ""}"
+                          style=${`padding-left: ${row.depth * 12 + 22}px`}
+                          onClick=${() => openPath(row.path)}
+                          title=${row.path}
+                        >${row.name}</div>
+                      `
+                        : html`
+                        <div
+                          key=${row.path}
+                          class="editor-tree-folder"
+                          style=${`padding-left: ${row.depth * 12 + 4}px`}
+                          onClick=${() => toggleFolder(row.path)}
+                        >
+                          <span class="editor-tree-caret">${expanded.has(row.path) ? "▼" : "▶"}</span>
+                          <span class="editor-tree-name">${row.name}</span>
+                        </div>
+                      `,
+                    )}
+                    ${files.length === 0 ? html`<div class="muted" style="padding: 8px; font-size: 11px;">no files</div>` : null}
+                  </div>
+                `
+            }
+          </div>
+        `
+      }
+
+      <div class="editor-main">
+        ${
+          tab
+            ? html`
+            <div class="editor-bar">
+              <code style="font-size: 12px;">${tab.path}</code>
+              <span class="muted" style="font-size: 12px;">${langFromPath(tab.path) ?? "plaintext"}</span>
+              ${
+                langFromPath(tab.path) === "markdown"
+                  ? html`
+                  <div class="view-mode-group" style="margin-left: auto;">
+                    <button
+                      class=${`view-mode ${viewMode === "edit" ? "active" : ""}`}
+                      onClick=${() => setViewMode("edit")}
+                      title="source only"
+                    >Edit</button>
+                    <button
+                      class=${`view-mode ${viewMode === "split" ? "active" : ""}`}
+                      onClick=${() => setViewMode("split")}
+                      title="source + preview side-by-side"
+                    >Split</button>
+                    <button
+                      class=${`view-mode ${viewMode === "preview" ? "active" : ""}`}
+                      onClick=${() => setViewMode("preview")}
+                      title="rendered only"
+                    >Preview</button>
+                  </div>
+                `
+                  : null
+              }
+              <button
+                class="primary"
+                style=${langFromPath(tab.path) === "markdown" ? "" : "margin-left: auto;"}
+                onClick=${() => saveTab(activeIdx)}
+                disabled=${busy || !tab.dirty}
+              >${tab.dirty ? "Save (⌘S)" : "Saved"}</button>
+            </div>
+            ${error ? html`<div class="notice err">${error}</div>` : null}
+            ${(() => {
+              const isMd = langFromPath(tab.path) === "markdown";
+              const mode = isMd ? viewMode : "edit";
+              if (mode === "preview") {
+                return html`
+                  <div
+                    class="editor-host editor-md-preview md"
+                    dangerouslySetInnerHTML=${{ __html: previewMarked.parse(tab.content ?? "") }}
+                  ></div>
+                `;
+              }
+              if (mode === "split") {
+                return html`
+                  <div class="editor-split">
+                    <div ref=${editorContainerRef} class="editor-host editor-split-pane"></div>
+                    <div
+                      class="editor-host editor-md-preview md editor-split-pane"
+                      dangerouslySetInnerHTML=${{
+                        __html: previewMarked.parse(tab.content ?? ""),
+                      }}
+                    ></div>
+                  </div>
+                `;
+              }
+              return html`<div ref=${editorContainerRef} class="editor-host"></div>`;
+            })()}
+          `
+            : html`
+            <div class="editor-empty">
+              ${
+                cmReady
+                  ? html`<div>Open a file to start editing.</div>`
+                  : html`<div>Loading editor (~200KB CodeMirror)…</div>`
+              }
+            </div>
+          `
+        }
+      </div>
+      </div>
+    </div>
+  `;
+}
+
+function ComingSoonPanel({ name, milestone }) {
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">${name}</h2>
+        <span class="panel-subtitle">coming in ${milestone}</span>
+      </div>
+      <div class="empty">This panel lands in ${milestone} (see CHANGELOG).</div>
+    </div>
+  `;
+}
+
+// ---------- shell ----------
+
+const TABS = [
+  {
+    id: "chat",
+    name: "Chat",
+    glyph: "◆",
+    panel: () => html`<${ChatPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "editor",
+    name: "Editor",
+    glyph: "✎",
+    panel: () => html`<${EditorPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "overview",
+    name: "Overview",
+    glyph: "◈",
+    panel: () => html`<${OverviewPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "usage",
+    name: "Usage",
+    glyph: "$",
+    panel: () => html`<${UsageWithChart} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "sessions",
+    name: "Sessions",
+    glyph: "›",
+    panel: () => html`<${SessionsPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "plans",
+    name: "Plans",
+    glyph: "P",
+    panel: () => html`<${PlansPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "tools",
+    name: "Tools",
+    glyph: "▣",
+    panel: () => html`<${ToolsPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "permissions",
+    name: "Permissions",
+    glyph: "▎",
+    panel: () => html`<${PermissionsPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "health",
+    name: "System",
+    glyph: "+",
+    panel: () => html`<${SystemPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "mcp",
+    name: "MCP",
+    glyph: "M",
+    panel: () => html`<${McpPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "skills",
+    name: "Skills",
+    glyph: "S",
+    panel: () => html`<${SkillsPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "memory",
+    name: "Memory",
+    glyph: "·",
+    panel: () => html`<${MemoryPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "hooks",
+    name: "Hooks",
+    glyph: "H",
+    panel: () => html`<${HooksPanel} />`,
+    ready: true,
+    badge: null,
+  },
+  {
+    id: "settings",
+    name: "Settings",
+    glyph: "⌘",
+    panel: () => html`<${SettingsPanel} />`,
+    ready: true,
+    badge: null,
+  },
+];
+
+// ---------- Toast system ----------
+//
+// One Set of currently-displayed toast objects, pushed via a custom
+// DOM event so any panel can fire a toast without prop-drilling. Auto-
+// dismiss after `ttl` ms (default 3000). The stack lives at the App
+// level so toasts persist across tab switches.
+
+const toastBus = new EventTarget();
+function showToast(text, kind = "info", ttl = 3000) {
+  toastBus.dispatchEvent(new CustomEvent("toast", { detail: { text, kind, ttl } }));
+}
+
+// ---------- App-wide event bus ----------
+//
+// Three events:
+//   - "open-file"     { path }              Editor panel opens the path in a tab
+//   - "navigate-tab"  { tabId }             App switches active sidebar tab
+//   - "error"         { error, source }     global ErrorOverlay shows it full-screen
+//
+// Used by Chat tool cards / file-mention links to deep-link into the
+// Editor without prop-drilling, and by global error handlers to surface
+// crashes in a full-screen modal with a "Report on GitHub" button.
+
+const appBus = new EventTarget();
+function openFileInEditor(path) {
+  if (!path) return;
+  // Just signal "open this file" — the App-level editor drawer subscribes
+  // and pops itself open. We don't navigate the sidebar; the drawer
+  // sits over the current panel so the user can keep their place in
+  // chat / overview / wherever they were.
+  appBus.dispatchEvent(new CustomEvent("open-file", { detail: { path } }));
+}
+
+// ---------- Global error capture ----------
+//
+// Three sources feed into one overlay:
+//   1. window.error              — sync exceptions, script load failures
+//   2. window.unhandledrejection — async promise rejections
+//   3. Preact ErrorBoundary       — render-time component exceptions
+//
+// All three normalize to `{ error, source, info? }` and dispatch via
+// appBus. ErrorOverlay queues the most recent and lets the user copy
+// the trace or open a pre-filled GitHub issue.
+
+function reportAppError(error, source, info) {
+  // Console-log so devtools still has the message even when the
+  // overlay is dismissed; keeps "what just broke" debuggable.
+  // eslint-disable-next-line no-console
+  console.error(`[reasonix dashboard] ${source}:`, error, info);
+  appBus.dispatchEvent(
+    new CustomEvent("error", { detail: { error, source, info, ts: Date.now() } }),
+  );
+}
+
+window.addEventListener("error", (ev) => {
+  // Resource-load errors (failing img/script) come through with no
+  // `error` object and are noisy; only surface real exceptions.
+  if (!ev.error) return;
+  reportAppError(ev.error, "window", ev.message);
+});
+
+window.addEventListener("unhandledrejection", (ev) => {
+  reportAppError(ev.reason, "promise");
+});
+
+function ToastStack() {
+  const [toasts, setToasts] = useState([]);
+  useEffect(() => {
+    const onToast = (ev) => {
+      const id = `${Date.now()}-${Math.random()}`;
+      const t = { id, ...ev.detail };
+      setToasts((prev) => [...prev, t]);
+      setTimeout(() => setToasts((prev) => prev.filter((x) => x.id !== id)), t.ttl);
+    };
+    toastBus.addEventListener("toast", onToast);
+    return () => toastBus.removeEventListener("toast", onToast);
+  }, []);
+  if (toasts.length === 0) return null;
+  return html`
+    <div class="toast-stack">
+      ${toasts.map((t) => html`<div key=${t.id} class="toast ${t.kind}">${t.text}</div>`)}
+    </div>
+  `;
+}
+
+// ---------- Error overlay ----------
+//
+// Renders a full-screen modal whenever a window error / promise
+// rejection / Preact render error fires through `appBus`. Includes a
+// "Copy details" button (clipboard) and "Report on GitHub" link with a
+// pre-filled body containing redacted environment info — the URL is
+// safe to surface (token is never embedded; just version + UA + the
+// trace itself).
+
+const REPO_URL = "https://github.com/esengine/reasonix";
+
+function buildIssueBody({ error, source, info }) {
+  const ua = typeof navigator === "object" ? navigator.userAgent : "(unknown)";
+  const errMsg = error?.message ?? String(error);
+  const stack = error?.stack ?? "(no stack)";
+  return [
+    "**What happened**",
+    "(describe what you were doing — typing, switching tabs, clicking a tool path, etc.)",
+    "",
+    "**Error**",
+    "```",
+    `${source}: ${errMsg}`,
+    info ? `info: ${info}` : null,
+    "",
+    stack,
+    "```",
+    "",
+    "**Environment**",
+    `- Reasonix: ${MODE}`,
+    `- Browser: ${ua}`,
+    `- URL: ${location.pathname} (token redacted)`,
+    "",
+    "_Reported from the local dashboard's error overlay._",
+  ]
+    .filter((l) => l !== null)
+    .join("\n");
+}
+
+function ErrorOverlay() {
+  const [err, setErr] = useState(null); // { error, source, info, ts }
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const onError = (ev) => {
+      // Show only the latest — if a second fires while overlay is up,
+      // it replaces. Cumulative replay would be nice but for now the
+      // user can copy / file the issue with the most recent.
+      setErr(ev.detail);
+      setCopied(false);
+    };
+    appBus.addEventListener("error", onError);
+    return () => appBus.removeEventListener("error", onError);
+  }, []);
+
+  // Esc dismisses (assuming non-fatal).
+  useEffect(() => {
+    if (!err) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setErr(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [err]);
+
+  if (!err) return null;
+  const error = err.error;
+  const errMsg = error?.message ?? String(error);
+  const stack = error?.stack ?? "(no stack)";
+
+  const issueUrl = `${REPO_URL}/issues/new?title=${encodeURIComponent(`[dashboard] ${errMsg.slice(0, 80)}`)}&body=${encodeURIComponent(buildIssueBody(err))}`;
+
+  const copyDetails = async () => {
+    const body = buildIssueBody(err);
+    try {
+      await navigator.clipboard.writeText(body);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* clipboard blocked — user can still hit "report on GitHub" */
+    }
+  };
+
+  return html`
+    <div class="error-overlay">
+      <div class="error-overlay-card">
+        <div class="error-overlay-head">
+          <span class="error-overlay-icon">✦</span>
+          <div>
+            <div class="error-overlay-title">Something broke in the dashboard</div>
+            <div class="error-overlay-subtitle">${err.source} error · ${errMsg}</div>
+          </div>
+        </div>
+
+        <pre class="error-overlay-trace">${stack}</pre>
+
+        ${
+          err.info
+            ? html`<div class="error-overlay-info"><strong>info:</strong> ${err.info}</div>`
+            : null
+        }
+
+        <div class="error-overlay-help">
+          The TUI is unaffected — only this browser tab tripped. You can
+          dismiss and keep working, or report it so we can fix the
+          underlying cause.
+        </div>
+
+        <div class="error-overlay-actions">
+          <button class="primary" onClick=${copyDetails}>
+            ${copied ? "Copied ✓" : "Copy details"}
+          </button>
+          <a class="button" href=${issueUrl} target="_blank" rel="noopener noreferrer">
+            Report on GitHub
+          </a>
+          <button onClick=${() => setErr(null)} style="margin-left: auto;">Dismiss (Esc)</button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// Preact ErrorBoundary — catches render-time exceptions in the App
+// subtree and dispatches them to the error overlay instead of leaving
+// the user with a blank white page. After capturing, render falls
+// back to a minimal "reload" prompt; the overlay handles the rest.
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { caught: false };
+  }
+  static getDerivedStateFromError() {
+    return { caught: true };
+  }
+  componentDidCatch(error, info) {
+    reportAppError(error, "render", info?.componentStack ?? "");
+    // Recover after a tick — overlay handles the user's next move.
+    setTimeout(() => this.setState({ caught: false }), 100);
+  }
+  render() {
+    if (this.state.caught) {
+      return html`<div class="boot">recovering…</div>`;
+    }
+    return this.props.children;
+  }
+}
+
+function App() {
+  const [activeId, setActiveId] = useState("chat");
+  const [sidebarOpen, setSidebarOpen] = useState(false); // mobile drawer
+  // Desktop "icon only" collapse — narrow sidebar that shows just the
+  // glyphs. Persisted so the choice survives reload.
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem("rx.sidebarCollapsed") === "1";
+    } catch {
+      return false;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem("rx.sidebarCollapsed", sidebarCollapsed ? "1" : "0");
+    } catch {
+      /* private mode / disabled storage — ignore */
+    }
+  }, [sidebarCollapsed]);
+  // Editor drawer — opens whenever any panel fires "open-file" via
+  // appBus. Lives at the App level so the editor's tab state persists
+  // across sidebar-tab switches; you can open a file from Chat, switch
+  // to Usage to glance at numbers, come back, and the editor's still
+  // there. × on the drawer or Esc closes it.
+  const [editorOpen, setEditorOpen] = useState(false);
+  const active = TABS.find((t) => t.id === activeId) ?? TABS[0];
+
+  // Esc anywhere closes the mobile drawer (modals already handle their
+  // own Esc). On desktop the drawer is always-open so this is a no-op.
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") setSidebarOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  // Cross-component navigation — sidebar-tab switching when something
+  // fires `navigate-tab` (kept in case other features want it; the
+  // editor drawer no longer uses it).
+  useEffect(() => {
+    const onNav = (ev) => {
+      const id = ev.detail?.tabId;
+      if (id) setActiveId(id);
+    };
+    appBus.addEventListener("navigate-tab", onNav);
+    return () => appBus.removeEventListener("navigate-tab", onNav);
+  }, []);
+
+  // Open the editor drawer whenever any panel signals a file-open.
+  // The drawer's <EditorPanel> is permanently mounted (with display:
+  // none when closed) so its tab state survives toggling — opening
+  // the same file twice from chat doesn't lose unsaved changes.
+  useEffect(() => {
+    const onOpenFile = () => setEditorOpen(true);
+    appBus.addEventListener("open-file", onOpenFile);
+    return () => appBus.removeEventListener("open-file", onOpenFile);
+  }, []);
+
+  // Esc also closes the editor (in addition to the mobile drawer).
+  useEffect(() => {
+    if (!editorOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setEditorOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [editorOpen]);
+
+  const pickTab = useCallback((id) => {
+    setActiveId(id);
+    setSidebarOpen(false); // collapse drawer after pick on mobile
+  }, []);
+
+  return html`
+    <div class=${`sidebar ${sidebarOpen ? "open" : ""} ${sidebarCollapsed ? "collapsed" : ""}`}>
+      <div class="sidebar-header">
+        <div class="sidebar-brand" title="Reasonix"><span class="glyph">◈</span><span class="sidebar-label"> REASONIX</span></div>
+        <div class="sidebar-version sidebar-label">dashboard</div>
+        <div class="sidebar-mode sidebar-label">${MODE}</div>
+      </div>
+      <div class="gradient-rule"></div>
+      <div class="sidebar-tabs">
+        ${TABS.map(
+          (tab) => html`
+          <div
+            class="tab ${tab.id === active.id ? "active" : ""} ${!tab.ready ? "tab-stub" : ""}"
+            onClick=${() => tab.ready && pickTab(tab.id)}
+            title=${tab.name}
+          >
+            <span class="glyph">${tab.glyph}</span>
+            <span class="sidebar-label">${tab.name}</span>
+            ${tab.badge ? html`<span class="badge sidebar-label">${tab.badge}</span>` : null}
+          </div>
+        `,
+        )}
+      </div>
+      <button
+        class="sidebar-collapse-toggle"
+        onClick=${() => setSidebarCollapsed((c) => !c)}
+        title=${sidebarCollapsed ? "expand sidebar" : "collapse to icons"}
+      >${sidebarCollapsed ? "▶" : "◀"}<span class="sidebar-label">  ${sidebarCollapsed ? "expand" : "collapse"}</span></button>
+      <div class="sidebar-footer sidebar-label">127.0.0.1 only · token-gated</div>
+    </div>
+    <div class="sidebar-backdrop" onClick=${() => setSidebarOpen(false)}></div>
+    <button class="menu-toggle" onClick=${() => setSidebarOpen((s) => !s)} aria-label="Toggle sidebar">≡</button>
+    <div class=${`main ${active.id === "editor" ? "main-editor" : ""}`}>
+      <${ErrorBoundary}>${active.panel()}<//>
+    </div>
+    <div class=${`editor-drawer-host ${editorOpen ? "open" : ""}`}>
+      <${ErrorBoundary}>
+        <${EditorPanel} onClose=${() => setEditorOpen(false)} />
+      <//>
+    </div>
+    <${ToastStack} />
+    <${ErrorOverlay} />
+  `;
+}
+
+render(html`<${App} />`, document.getElementById("root"));