sonorance 0.1.0-beta.4.1

package/src/ui/app.js

@@ -0,0 +1,3553 @@
+import { createEditor, mdBlocks } from './editor.mjs';
+(function(){
+"use strict";
+/* ==========================================================================
+   Deliberate workbench — a zero-build, dependency-free web app over the vault.
+   Talks to the local daemon (/api/*). Renderer + block editor are hand-rolled
+   so it works fully offline and stays token-driven and testable.
+   ========================================================================== */
+
+// ---- tiny helpers ---------------------------------------------------------
+const $ = (s, r=document) => r.querySelector(s);
+const esc = (s) => String(s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+const iconEl = (paths) => `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+const ICON = {
+  queue: '<path d="M4 6h16M4 12h16M4 18h10"/><circle cx="19" cy="18" r="2"/>',
+  inbox: '<path d="M4 13v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/><path d="M4 13l2.4-6.7A2 2 0 0 1 8.3 5h7.4a2 2 0 0 1 1.9 1.3L20 13"/><path d="M4 13h4l1.2 2.2a1 1 0 0 0 .9.5h3.8a1 1 0 0 0 .9-.5L16 13h4"/>',
+  brief: '<rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 8h6M9 12h6M9 16h4"/>',
+  readout: '<path d="M4 19V5M4 19h16"/><path d="M7 15l4-4 3 2 5-6"/><circle cx="7" cy="15" r=".8" fill="currentColor" stroke="none"/><circle cx="11" cy="11" r=".8" fill="currentColor" stroke="none"/><circle cx="14" cy="13" r=".8" fill="currentColor" stroke="none"/><circle cx="19" cy="7" r=".8" fill="currentColor" stroke="none"/>',
+  matchup: '<rect x="3" y="4" width="7" height="16" rx="1.5"/><rect x="14" y="4" width="7" height="16" rx="1.5"/><path d="M12 3v18"/>',
+  menu: '<path d="M4 7h16M4 12h16M4 17h16"/>',
+  chevron: '<path d="M9 6l6 6-6 6"/>',
+  chevrud: '<path d="M8 9l4 4 4-4"/><path d="M8 15l4-4 4 4" opacity=".45"/>',
+  caret: '<path d="M9 6l6 6-6 6"/>',
+  folder: '<path d="M3 7a2 2 0 0 1 2-2h3.6a2 2 0 0 1 1.4.6L11.4 7H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+  newfolder: '<path d="M3 7a2 2 0 0 1 2-2h3.6a2 2 0 0 1 1.4.6L11.4 7H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M12 11v5M9.5 13.5h5"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  doc: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>',
+  collapseAll: '<path d="M7 20l5-5 5 5"/><path d="M7 4l5 5 5-5"/>',
+  expandAll: '<path d="M7 15l5 5 5-5"/><path d="M7 9l5-5 5 5"/>',
+  x: '<path d="M6 6l12 12M18 6L6 18"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>',
+  vault: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/>',
+  check: '<path d="M20 6L9 17l-5-5"/>',
+  external: '<path d="M14 4h6v6"/><path d="M20 4l-8.5 8.5"/><path d="M18 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4.5"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/>',
+  moon: '<path d="M20 14.5A8 8 0 1 1 9.5 4 6.2 6.2 0 0 0 20 14.5z"/>',
+  auto: '<circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 0 0 16z" fill="currentColor" stroke="none"/>',
+  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.03 1.56V21h-4v-.08A1.7 1.7 0 0 0 9 19.37a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.63 15 1.7 1.7 0 0 0 3.08 14H3v-4h.08A1.7 1.7 0 0 0 4.63 9a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.63 1.7 1.7 0 0 0 10 3.08V3h4v.08A1.7 1.7 0 0 0 15 4.63a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.37 9 1.7 1.7 0 0 0 20.92 10H21v4h-.08A1.7 1.7 0 0 0 19.4 15z"/>',
+  comment: '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>',
+  feedback: '<path d="M3 11v2a2 2 0 0 0 2 2h2l3 5h3l-2.5-5H12l8 3V6l-8 3H5a2 2 0 0 0-2 2z"/><path d="M7 9v6M20 10l2-1M20 14l2 1"/>',
+  thumbUp: '<path d="M7 10v11H3V10zM7 19h9.2a2 2 0 0 0 2-1.6l1.4-7A2 2 0 0 0 17.6 8H14l.5-3.1A2.4 2.4 0 0 0 12.1 2L7 10z"/>',
+  thumbDown: '<path d="M7 14V3H3v11zM7 5h9.2a2 2 0 0 1 2 1.6l1.4 7a2 2 0 0 1-2 2.4H14l.5 3.1a2.4 2.4 0 0 1-2.4 2.9L7 14z"/>',
+  rocket: '<path d="M14 4c2.8-2.8 5.5-2 6-1.5s1.3 3.2-1.5 6L13 14l-3-3z"/><path d="M14 4l6 6M10 11l-4 .5-3 3 5 1.5 1.5 5 3-3 .5-4"/><path d="M5 19l-2 2M7 17l-4 4"/>',
+  mic: '<path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v1a7 7 0 0 1-14 0v-1"/><path d="M12 18v4M8 22h8"/>',
+  send: '<path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/>',
+  more: '<circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/>',
+  trash: '<path d="M4 7h16"/><path d="M10 11v6M14 11v6"/><path d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/><path d="M9 7V4h6v3"/>',
+  proto: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M6.5 6.5h.01M9 6.5h.01"/>',
+  copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/>',
+  pencil: '<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/>',
+  gitbranch: '<circle cx="6" cy="6" r="2.4"/><circle cx="6" cy="18" r="2.4"/><circle cx="18" cy="8" r="2.4"/><path d="M6 8.4v7.2"/><path d="M18 10.4a6 6 0 0 1-6 6H8"/>',
+  gitfile: '<path d="M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z"/><path d="M13.5 3v5h5"/><circle cx="9.4" cy="13.6" r="1.15"/><circle cx="9.4" cy="18" r="1.15"/><circle cx="14" cy="14.9" r="1.15"/><path d="M9.4 14.75v2.1"/><path d="M14 16.05a1.9 1.9 0 0 1-1.9 1.9H9.4"/>',
+  newfile: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4"/><path d="M14 3v5h5"/><path d="M17 14v6M14 17h6"/>',
+  revert: '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 5 5v1"/>',
+  bold: '<path d="M7 5h6a3.4 3.4 0 0 1 0 6.8H7z"/><path d="M7 11.8h7a3.6 3.6 0 0 1 0 7.2H7z"/>',
+  italic: '<path d="M19 4h-7M14 20H5M15 4l-6 16"/>',
+  link: '<path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/>',
+  heading: '<path d="M6 4v16M18 4v16M6 12h12"/>',
+};
+
+// ---- markdown rendering (a focused, safe subset) --------------------------
+// Emphasis grammar for the read-only render path (`inline`, used by briefs, the inbox, and
+// previews — the editable surface is Tiptap). Factories return a fresh /g regex per call (no
+// shared lastIndex).
+const MD_RE = {
+  bold:   () => /\*\*([^*\n]+)\*\*/g,
+  emStar: () => /(^|[^*\w])\*([^*\n]+)\*(?!\w)/g,
+  emUnd:  () => /(^|[^\w])_([^_\n]+)_(?![\w])/g,
+};
+function sanitizeHref(h){ return /^(https?:|mailto:|\/|\.\/|#)/i.test(h) ? h : '#'; }
+// The project-relative path of the doc currently rendered (a generic file, a case record, or a
+// brief) — the base a Markdown image's relative `src` resolves against.
+function currentDocRel(){ return (S.file && S.file.path) || S.recFile || ''; }
+// Resolve a Markdown image `src` to a URL the browser can load. External/inline sources pass
+// through untouched; a relative (or root-relative) path is resolved against the doc's folder
+// (a leading `/` means the vault root) and served by the daemon's /api/asset endpoint, which is
+// vault-confined and extension-gated. Keeps images working offline with no external fetches.
+function resolveAssetSrc(src){
+  const raw = String(src || '').trim();
+  if (!raw) return '';
+  if (/^(https?:|data:|blob:)/i.test(raw)) return raw;
+  const dir = currentDocRel().split('/').slice(0, -1);
+  const parts = raw.startsWith('/') ? raw.replace(/^\/+/, '').split('/') : dir.concat(raw.split('/'));
+  const out = [];
+  for (const seg of parts){ if (seg === '..') out.pop(); else if (seg && seg !== '.') out.push(seg); }
+  return out.length ? '/api/asset?path=' + encodeURIComponent(out.join('/')) + (PP() ? '&project=' + encodeURIComponent(S.projectSlug || S.project.id) : '') : '';
+}
+function inline(src){
+  let s = esc(src);
+  const codes = [];
+  s = s.replace(/`([^`]+)`/g, (_m, c) => { codes.push(c); return '\u0000' + (codes.length-1) + '\u0000'; });
+  // Images (`![alt](src)`) MUST run before links — an image literally contains a `[alt](src)`
+  // link, so the link rule would otherwise eat it and leave a stray `!`. Relative srcs resolve
+  // against the doc's folder via the daemon (/api/asset); external/data URLs pass through.
+  s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+&quot;[^&]*&quot;)?\)/g,
+    (_m, alt, src2) => { const u = resolveAssetSrc(src2); return u ? `<img class="md-img" src="${esc(u)}" alt="${alt}" loading="lazy">` : alt; });
+  s = s.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+&quot;[^&]*&quot;)?\)/g,
+    (_m, t, h) => `<a href="${sanitizeHref(h)}" target="_blank" rel="noopener noreferrer">${t}</a>`);
+  s = s.replace(MD_RE.bold(), '<strong>$1</strong>');
+  s = s.replace(MD_RE.emStar(), '$1<em>$2</em>');
+  s = s.replace(MD_RE.emUnd(), '$1<em>$2</em>');
+  s = s.replace(/\u0000(\d+)\u0000/g, (_m, i) => `<code>${codes[+i]}</code>`);
+  return s;
+}
+function splitRow(r){ return r.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map(x => x.trim()); }
+function renderTable(rows){
+  const head = splitRow(rows[0]);
+  let h = '<table class="md-tbl"><thead><tr>' + head.map(c => `<th>${inline(c)}</th>`).join('') + '</tr></thead><tbody>';
+  for (const r of rows.slice(2)){ const cells = splitRow(r); h += '<tr>' + head.map((_c, j) => `<td>${inline(cells[j] ?? '')}</td>`).join('') + '</tr>'; }
+  // Wrap so the table (and only the table) scrolls horizontally when its columns exceed
+  // the content width — the prose around it never scrolls.
+  return '<div class="md-tblwrap">' + h + '</tbody></table></div>';
+}
+function renderList(buf){
+  const items = [];
+  for (const line of buf){
+    const m = line.match(/^(\s*)([-*+]|\d+\.)\s+(.*)$/);
+    if (m) items.push({ indent: m[1].length, ordered: /\d+\./.test(m[2]), text: m[3] });
+    else if (items.length) items[items.length-1].text += ' ' + line.trim();
+  }
+  if (!items.length) return '';
+  const base = Math.min(...items.map(i => i.indent));
+  const ordered = items[0].ordered;
+  let h = `<${ordered?'ol':'ul'} class="md-list">`, i = 0;
+  while (i < items.length){
+    const it = items[i];
+    if (it.indent <= base){
+      let j = i+1; const kids = [];
+      while (j < items.length && items[j].indent > base){ kids.push(items[j]); j++; }
+      h += taskLi(it.text);
+      if (kids.length){ const ord2 = kids[0].ordered; h += `<${ord2?'ol':'ul'} class="md-list">` + kids.map(k => taskLi(k.text) + '</li>').join('') + `</${ord2?'ol':'ul'}>`; }
+      h += '</li>'; i = j;
+    } else i++;
+  }
+  return h + `</${ordered?'ol':'ul'}>`;
+}
+// A list item's opening `<li>` (caller closes it). A GitHub-style task item (`[ ]`/`[x]`
+// after the bullet) becomes an interactive checkbox that toggles the source line in place;
+// the checkbox is a contenteditable island so a click never drops the caret into it. The
+// literal `[ ]`/`[x]` stays in the Markdown source — only the RENDERED view shows a box.
+const TASK_RE = /^\[([ xX])\]\s+(.*)$/s;
+function taskLi(text){
+  const m = String(text).match(TASK_RE);
+  if (!m) return `<li>${inline(text)}`;
+  const done = m[1].toLowerCase() === 'x';
+  return `<li class="md-task"><input type="checkbox" class="md-taskbox" contenteditable="false"${done?' checked':''} aria-label="Toggle task"><span class="md-tasktxt">${inline(m[2])}</span>`;
+}
+function renderMarkdown(md){
+  const lines = String(md||'').replace(/<!--[\s\S]*?-->/g, '').replace(/\r\n?/g, '\n').split('\n');
+  const blank = l => /^\s*$/.test(l);
+  const special = l => /^\s*(#{1,6}\s|>|```|[-*+]\s|\d+\.\s)/.test(l) || /^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(l);
+  let html = '', i = 0;
+  while (i < lines.length){
+    const l = lines[i];
+    if (blank(l)){ i++; continue; }
+    if (/^\s*```/.test(l)){ i++; const buf = []; while (i < lines.length && !/^\s*```/.test(lines[i])){ buf.push(lines[i]); i++; } i++; html += `<pre class="md-pre"><code>${esc(buf.join('\n'))}</code></pre>`; continue; }
+    const h = l.match(/^\s*(#{1,6})\s+(.*)$/);   // tolerate leading indentation (matches `special`)
+    if (h){ const n = h[1].length; html += `<h${n} class="md-h md-h${n}">${inline(h[2].trim())}</h${n}>`; i++; continue; }
+    if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(l)){ html += '<hr class="md-hr">'; i++; continue; }
+    if (/^\s*>\s?/.test(l)){ const buf = []; while (i < lines.length && /^\s*>\s?/.test(lines[i])){ buf.push(lines[i].replace(/^\s*>\s?/, '')); i++; } html += `<blockquote class="md-bq">${renderMarkdown(buf.join('\n'))}</blockquote>`; continue; }
+    if (l.includes('|') && i+1 < lines.length && lines[i+1].includes('-') && /^\s*\|?[\s:|-]+\|?\s*$/.test(lines[i+1])){
+      const rows = []; while (i < lines.length && lines[i].includes('|') && !blank(lines[i])){ rows.push(lines[i]); i++; } html += renderTable(rows); continue;
+    }
+    if (/^\s*([-*+]|\d+\.)\s+/.test(l)){ const buf = []; while (i < lines.length && (/^\s*([-*+]|\d+\.)\s+/.test(lines[i]) || /^\s{2,}\S/.test(lines[i]))){ buf.push(lines[i]); i++; } html += renderList(buf); continue; }
+    const buf = []; while (i < lines.length && !blank(lines[i]) && !special(lines[i])){ buf.push(lines[i]); i++; }
+    // Forward-progress guard: a `special` line that no block branch above consumed would leave
+    // buf empty and `i` unmoved → an infinite loop that grows `html` until the string exceeds
+    // V8's max length (RangeError: Invalid string length), freezing the tab for ~20s. Never let
+    // `i` stall — fall back to emitting the current line as prose so the walk always advances.
+    if (!buf.length){ buf.push(l); i++; }
+    html += `<p class="md-p">${inline(buf.join('\n')).replace(/\n/g, '<br>')}</p>`;
+  }
+  return html;
+}
+
+// ---- raw ↔ blocks (round-trip safe: reconstruct === original when unedited) --
+function segment(raw){
+  const lines = String(raw).split('\n');
+  const items = []; let cur = null, inFence = false;
+  const push = (kind, line, fresh) => { if (fresh || !cur || cur.kind !== kind){ cur = { kind, lines: [] }; items.push(cur); } cur.lines.push(line); };
+  let start = 0;
+  // Leading YAML frontmatter is ONE atomic block. Its blank lines and YAML `#` comments must
+  // NOT be split into gap/heading segments — that shatters it so the reader can no longer hide
+  // it, dumping raw metadata into the reading view when frontmatter carries indented `# …`
+  // YAML comments that look like headings.
+  if (/^---\s*$/.test(lines[0] || '')){
+    let end = -1;
+    for (let k = 1; k < lines.length; k++){ if (/^---\s*$/.test(lines[k])){ end = k; break; } }
+    if (end > 0){ items.push({ kind: 'block', lines: lines.slice(0, end + 1) }); start = end + 1; }
+  }
+  for (let li = start; li < lines.length; li++){
+    const line = lines[li];
+    const fence = /^\s*```/.test(line);
+    if (inFence){ push('block', line); if (fence) inFence = false; continue; }
+    if (fence){ push('block', line); inFence = true; continue; }
+    if (/^\s*$/.test(line)){ push('gap', line); continue; }
+    // An ATX heading is its own single-line block. Body text glued directly beneath a
+    // heading (no blank line between) must become its OWN paragraph block — otherwise the
+    // whole run inherits the heading's block type and renders at heading size in the editor.
+    if (/^\s*#{1,6}\s/.test(line)){ push('block', line, true); cur = null; continue; }
+    push('block', line);
+  }
+  return items;
+}
+const reconstruct = (items) => items.flatMap(it => it.lines).join('\n');
+
+function verdict(score){
+  if (score == null) return { cls:'neutral', label:'—', word:'Not yet scored' };
+  const n = Number(score).toFixed(1);
+  return score >= 7 ? { cls:'advance', label:n, word:'Advance' } : score >= 5 ? { cls:'shelve', label:n, word:'Shelve' } : { cls:'reject', label:n, word:'Reject' };
+}
+// The go/no-go call, promoted to a first-class band at the top of the record. Built from
+// the case's score score (not the prose), so the decision is the first thing the reader
+// sees — with a jump into the reasoning. Sits in .canvas above the editable #doc.
+// The record's score reasoning, if present. Detected from the source markdown so
+// the top-strip score pill can decide (before render) whether to be a jump button.
+function reasoningInSource(){
+  return !!(S.rec && S.rec.exists && /^#{2,4}\s+.*(why this score|score|verdict)\b/im.test(S.rec.text));
+}
+function findReasoningTarget(){
+  const doc = $('#doc'); if (!doc) return null;
+  const heads = [...doc.querySelectorAll('h2,h3,h4')];
+  return heads.find(h => /why this score/i.test(h.textContent))
+    || heads.find(h => /^\s*score\s*$/i.test(h.textContent))
+    || heads.find(h => /score|score|verdict/i.test(h.textContent))
+    || null;
+}
+function jumpToReasoning(){
+  const target = findReasoningTarget();
+  if (target) target.scrollIntoView({ behavior: prefersReduced() ? 'auto' : 'smooth', block:'start' });
+}
+const relTime = (ts) => {
+  if (!ts) return '';
+  const s = Math.floor((Date.now() - ts) / 1000);
+  if (s < 60) return 'just now';
+  const m = Math.floor(s/60); if (m < 60) return m + 'm ago';
+  const h = Math.floor(m/60); if (h < 24) return h + 'h ago';
+  const d = Math.floor(h/24); return d < 7 ? d + 'd ago' : new Date(ts).toLocaleDateString();
+};
+
+// ---- API ------------------------------------------------------------------
+async function api(method, path, body){
+  const o = { method, headers: { 'content-type':'application/json' } };
+  if (body) o.body = JSON.stringify(body);
+  // Scope every API call to the current project (the URL's /p/<slug>) so the server resolves
+  // the right vault per-request — the app can serve several projects at once, one per browser tab.
+  let url = path;
+  const slug = S.projectSlug || (S.project && S.project.id);
+  if (slug && path.startsWith('/api/')) url += (path.includes('?') ? '&' : '?') + 'project=' + encodeURIComponent(slug);
+  let r;
+  try { r = await fetch(url, o); } catch { return { error:'offline', netError:true }; }
+  // A stale/old `serve` process returns a non-JSON 404 ("not found") for routes it lacks —
+  // never throw on that (the old bug swallowed it silently); surface a structured error so
+  // callers can tell the user the workbench is out of date, and threads never look saved.
+  const status = typeof r.status === 'number' ? r.status : 200;
+  const ct = (r.headers && r.headers.get) ? (r.headers.get('content-type') || '') : 'application/json';
+  if (!ct.includes('json')) return { error: status === 404 ? 'endpoint-missing' : ('http-' + status), httpStatus: status };
+  let j; try { j = await r.json(); } catch { return { error:'bad-response', httpStatus: status }; }
+  if (j && typeof j === 'object' && !('error' in j) && r.ok === false) j.error = 'http-' + status;
+  return j;
+}
+
+// ---- app state ------------------------------------------------------------
+// Branch A: the app's identity + canonical command hints are app-owned and STABLE — always
+// Sonorance, on every vault. A plugin (e.g. Deliberate) surfaces per-project via kinds/inbox, it
+// never renames the app or its commands. These constants are the single UI source for that.
+const BRAND = 'Sonorance';
+const SERVE_CMD = 'sonorance serve';
+const ADDRESS_CMD = '/sonorance address';
+const S = { project:null, projectSlug:null, projects:[], cases:[], briefs:[], readouts:[], matchups:[], inventory:null, kinds:[], tree:[], treeBase:'', explorer:{ mode:'collapsed', ex:new Set() }, isGit:false, query:'', tabs:[], activeTab:-1, feedbackDraft:null,
+            caseId:null, rec:null, proto:null, items:[], mode:'read', brief:null, readout:null, matchup:null, file:null,
+            comments:[], es:null, cNavIdx:-1, recFile:null,
+            dirty:false, saving:false, saveTimer:null, cfgPending:{}, cfgTimer:null,
+            diffMode:false, diffBase:null, git:{ branch:'', changed:[] } };
+
+// ---- git: the Explorer's diff mode (uncommitted-changes filter) ------------
+// When diffMode is on, the Explorer lists ONLY files with uncommitted changes and each
+// opens in its Diff view by default. `diffFilterSet()` is the set of changed paths to
+// filter by (null when diff mode is off or the vault isn't a git repo).
+function diffFilterSet(){ return (S.diffMode && S.isGit) ? new Set((S.git.changed || []).filter(c => /\.md$/i.test(c.path)).map(c => c.path)) : null; }
+// ---- comment markers + filter (a SECOND, amber channel alongside git) ------
+// S.commentCounts maps a project-relative file path → its open-comment count. It's a distinct
+// channel from git: git tints the NAME + shows an A/M/D letter badge; comments show an amber
+// dot/count in their OWN slot (and an amber dot beside a folder name) so the two never collide.
+async function loadCommentCounts(){
+  try {
+    const r = await api('GET', '/api/comments-summary');
+    if (r && !r.error && r.counts) {
+      S.commentCounts = r.counts;
+      TEL.gauge('project_open_comments', totalCommentCount());
+    }
+  }
+  catch { /* best-effort; markers just stay as they were */ }
+}
+function fileCommentCount(path){ return (S.commentCounts && S.commentCounts[path]) || 0; }
+// Open-comment total for a FOLDER — any commented file at any depth under it.
+function dirCommentCount(dirPath){
+  if (!dirPath || !S.commentCounts) return 0;
+  const prefix = dirPath + '/'; let n = 0;
+  for (const [p, c] of Object.entries(S.commentCounts)){ if (p.startsWith(prefix)) n += c; }
+  return n;
+}
+const totalCommentCount = () => Object.values(S.commentCounts || {}).reduce((a, n) => a + n, 0);
+// The set of files (+ their ancestor folders, via prefix) with open comments — powers the
+// Explorer's comments-only filter, mirroring the git diff-mode filter.
+function commentFilterSet(){ return S.commentFilter ? new Set(Object.keys(S.commentCounts || {}).filter(p => S.commentCounts[p] > 0)) : null; }
+// An amber comment marker for a file row: a small dot with the count. Its own slot, so it sits
+// beside (never on top of) the git badge.
+function commentBadge(path){
+  const n = fileCommentCount(path); if (!n) return '';
+  const tip = `${n} open comment${n > 1 ? 's' : ''}`;
+  return `<span class="cmtb" title="${tip}" aria-label="${tip}">${iconEl(ICON.comment)}${n > 1 ? n : ''}</span>`;
+}
+// A folder that contains commented files (at any depth) gets a small amber dot beside its name —
+// distinct from git's folder name-tint, so both channels read at once.
+function dirCommentBadge(dirPath){
+  const n = dirCommentCount(dirPath); if (!n) return '';
+  const tip = `${n} open comment${n > 1 ? 's' : ''} in this folder`;
+  return `<span class="cmtb dot" title="${tip}" aria-label="${tip}"></span>`;
+}
+function gitStatusOf(path){ const c = (S.git.changed || []).find(x => x.path === path); return c ? c.status : ''; }
+// The number of changed *documents* (markdown records) — what the Explorer can show; the
+// raw git set also includes machine-state files (.config) the workbench never lists.
+function changedDocCount(){ return (S.git.changed || []).filter(c => /\.md$/i.test(c.path)).length; }
+// A compact, legible change badge for a file row (letter + tint — never color alone):
+// A(dded/new), M(odified), D(eleted). Matches the diff-add / warn / diff-del vocabulary.
+function gitBadge(path){
+  const st = gitStatusOf(path); if (!st) return '';
+  const isAdd = st.includes('A') || st.includes('?');
+  const isDel = st.includes('D');
+  const cls = isAdd ? 'add' : isDel ? 'del' : 'mod';
+  const letter = isAdd ? 'A' : isDel ? 'D' : 'M';
+  const tip = isAdd ? 'Added — a new file not yet committed'
+    : isDel ? 'Deleted — removed since the last commit'
+    : 'Modified — uncommitted changes since the last commit';
+  return `<span class="gitb ${cls}" role="img" title="${tip}" aria-label="${tip}">${letter}</span>`;
+}
+// The git-status class for a FILE row colours its name alongside the letter
+// badge (so files read by both colour AND letter). '' when the file has no uncommitted change.
+function fileGitClass(path){
+  const st = gitStatusOf(path); if (!st) return '';
+  if (st.includes('D')) return 'gs-del';
+  if (st.includes('A') || st.includes('?')) return 'gs-add';
+  return 'gs-mod';
+}
+// The aggregate change status of a FOLDER: a folder containing any changed
+// markdown document — at any depth — is tinted by that change rather than carrying a badge, which
+// is calmer/less distracting in a dense tree. Pure additions read `add`, pure deletions `del`, and
+// anything modified or mixed reads `mod`. The authoritative per-file status still shows as a letter
+// badge on the files themselves, so the folder colour is a hint, never the sole signal. Returns
+// `{ cls, tip }` or null when the folder holds no changed documents.
+function dirGitStatus(dirPath){
+  if (!S.isGit || !dirPath) return null;
+  const prefix = dirPath + '/';
+  const kids = (S.git.changed || []).filter(c => /\.md$/i.test(c.path) && c.path.startsWith(prefix));
+  if (!kids.length) return null;
+  let added = false, deleted = false, modified = false;
+  for (const c of kids){
+    if (c.status.includes('D')) deleted = true;
+    else if (c.status.includes('A') || c.status.includes('?')) added = true;
+    else modified = true;
+  }
+  const n = kids.length;
+  const [cls, what] = (modified || (added && deleted)) ? ['mod', 'with uncommitted changes']
+    : added ? ['add', 'added and not yet committed']
+    : ['del', 'deleted'];
+  return { cls, tip: `${n} document${n > 1 ? 's' : ''} ${what} in this folder` };
+}
+
+// ---- a lightweight popover menu (tab actions, project switcher) ------------
+function closeMenu(){ const m = $('#menu'); if (m) m.remove(); document.removeEventListener('mousedown', menuAway, true); }
+function menuAway(e){ if (!e.target.closest('#menu')) closeMenu(); }
+function openMenu(x, y, items, opts){
+  closeMenu();
+  const m = document.createElement('div'); m.className = 'menu'; m.id = 'menu';
+  // A row is a bare <button> unless it carries a `trail` (a secondary action, e.g. Remove a
+  // vault): then it's wrapped so the trailing button sits alongside the main one and reveals
+  // only on hover / keyboard focus — present when wanted, invisible at rest.
+  const rowMarkup = (it, i) => {
+    const main = `<button data-mi="${i}" ${it.on ? 'class="on"' : ''}>${it.icon ? iconEl(ICON[it.icon]) : ''}<span>${esc(it.label)}</span></button>`;
+    if (!it.trail) return main;
+    const t = it.trail;
+    return `<div class="menu-row">${main}<button class="menu-trail${t.danger ? ' danger' : ''}" data-mt="${i}" title="${esc(t.label)}" aria-label="${esc(t.label)}">${iconEl(ICON[t.icon])}</button></div>`;
+  };
+  m.innerHTML = items.map((it, i) => it.sep ? '<div class="sep"></div>' : rowMarkup(it, i)).join('');
+  // A menu anchored to a wide trigger (e.g. the project switcher) reads as broken when it's
+  // narrower than the control it dropped from — pin its min-width to the trigger's width so it
+  // lines up edge-to-edge, just like a native <select>.
+  if (opts && opts.minWidth) m.style.minWidth = Math.round(opts.minWidth) + 'px';
+  document.body.appendChild(m);
+  const w = m.offsetWidth || 190, h = m.offsetHeight || 40, vw = window.innerWidth, vh = window.innerHeight;
+  m.style.left = Math.min(x, vw - w - 8) + 'px';
+  m.style.top = Math.min(y, vh - h - 8) + 'px';
+  m.querySelectorAll('[data-mt]').forEach(b => b.addEventListener('click', (e) => { e.stopPropagation(); const it = items[+b.dataset.mt]; closeMenu(); it.trail.act && it.trail.act(); }));
+  m.querySelectorAll('[data-mi]').forEach(b => b.addEventListener('click', () => { const it = items[+b.dataset.mi]; closeMenu(); it.act && it.act(); }));
+  setTimeout(() => document.addEventListener('mousedown', menuAway, true), 0);
+}
+
+// ---- theme ----------------------------------------------------------------
+function mqDark(){ try { return window.matchMedia('(prefers-color-scheme: dark)').matches; } catch { return false; } }
+function themePref(){ try { return localStorage.getItem('dlb-theme') || ''; } catch { return ''; } }
+function applyTheme(t){
+  const root = document.documentElement;
+  if (t) root.setAttribute('data-theme', t); else root.removeAttribute('data-theme');
+  try { localStorage.setItem('dlb-theme', t); } catch {}
+  const dark = t === 'dark' || (!t && mqDark());
+  const meta = $('meta[name=theme-color]'); if (meta) meta.setAttribute('content', dark ? '#0a0e14' : '#e6ecf1');
+  syncThemeControls();
+}
+
+// ---- sidebar --------------------------------------------------------------
+function renderSidebar(){
+  const sb = $('#sidebar'); if (!sb) return;
+  sb.innerHTML = `
+    <div class="sb-head">
+      <button class="projsel" data-projsel aria-haspopup="menu" title="${S.project ? 'Switch project · ' + esc(S.project.name) : 'Switch project'}">
+        <span class="pname">${S.project ? esc(S.project.name) : 'No project'}</span>
+        ${S.isGit && S.git.branch ? `<span class="pbranch" title="Current branch">${iconEl(ICON.gitbranch)}<span class="pbn">${esc(S.git.branch)}</span></span>` : ''}
+        ${iconEl(ICON.chevrud).replace('class="ico"','class="ico cv"')}
+      </button>
+    </div>
+    <div class="search">
+      ${iconEl(ICON.search)}
+      <input type="search" id="casesearch" placeholder="Search…" autocomplete="off" spellcheck="false" value="${esc(S.query)}" aria-label="Search records">
+      <button class="clr ${S.query?'show':''}" id="searchclr" aria-label="Clear search">${iconEl(ICON.x)}</button>
+    </div>
+    <div class="expbar">
+      <span class="exptitle">${S.diffMode ? 'Changes' : 'Explorer'}</span>
+      <button class="expact" data-newmenu title="New file or folder" aria-label="New file or folder">${iconEl(ICON.plus)}</button>
+      ${S.isGit ? `<button class="expact difftoggle ${S.diffMode?'on':''}" data-diffmode aria-pressed="${S.diffMode}" title="${S.diffMode ? 'Show all files' : 'Show only files with uncommitted changes'}" aria-label="${S.diffMode ? 'Show all files' : 'Show only changed files'}">${iconEl(ICON.gitbranch)}${S.diffMode && changedDocCount() ? `<span class="cbadge">${changedDocCount()}</span>` : ''}</button>` : ''}
+      <button class="expact cmttoggle ${S.commentFilter?'on':''}" data-cfilter aria-pressed="${!!S.commentFilter}" title="${S.commentFilter ? 'Show all files' : 'Show only files with open comments'}" aria-label="${S.commentFilter ? 'Show all files' : 'Show only files with comments'}">${iconEl(ICON.comment)}${!S.commentFilter && totalCommentCount() ? `<span class="cbadge amber">${totalCommentCount()}</span>` : ''}</button>
+      <button class="collapseall" data-collapseall title="${allTopCollapsed()?'Expand all folders':'Collapse all folders'}" aria-label="${allTopCollapsed()?'Expand all folders':'Collapse all folders'}">${iconEl(allTopCollapsed()?ICON.expandAll:ICON.collapseAll)}</button>
+    </div>
+    <div class="caselist explorerlist" id="explorerlist"></div>`;
+  fillExplorer();
+  sb.querySelector('[data-projsel]').addEventListener('click', projMenu);
+  const si = sb.querySelector('#casesearch');
+  si.addEventListener('input', () => { const wasEmpty = !S.query; S.query = si.value; if (wasEmpty && S.query){ TEL.count('searches', 1); TEL.event('ui.action', { area:'explorer', action:'search-open' }); } sb.querySelector('#searchclr').classList.toggle('show', !!S.query); fillExplorer(); });
+  sb.querySelector('#searchclr').addEventListener('click', () => { S.query = ''; sb.querySelector('#searchclr').classList.remove('show'); const el = sb.querySelector('#casesearch'); el.value = ''; el.focus(); fillExplorer(); });
+  sb.querySelector('[data-collapseall]')?.addEventListener('click', () => { TEL.event('ui.action', { area: 'explorer', action: allTopCollapsed() ? 'expand-all' : 'collapse-all' }); toggleCollapseAll(); });
+  sb.querySelector('[data-newmenu]')?.addEventListener('click', (e) => { const r = e.currentTarget.getBoundingClientRect(); openNewMenu(S.treeBase || '', r.left, r.bottom + 4); });
+  sb.querySelector('[data-diffmode]')?.addEventListener('click', () => { TEL.event('ui.action', { area: 'explorer', action: 'diff' }); setDiffMode(!S.diffMode); });
+  sb.querySelector('[data-cfilter]')?.addEventListener('click', () => { TEL.event('ui.action', { area: 'explorer', action: 'comments' }); setCommentFilter(!S.commentFilter); });
+  updateTopGlobal();
+}
+function explorerInventory(nodes = S.tree){
+  let files = 0, folders = 0;
+  for (const node of nodes || []){
+    if (node.type === 'dir'){ folders++; const child = explorerInventory(node.children || []); files += child.files; folders += child.folders; }
+    else if (node.type === 'file') files++;
+  }
+  return { files, folders };
+}
+function captureProjectInventory(){
+  const tree = explorerInventory();
+  TEL.gauge('open_tabs', S.tabs.length);
+  TEL.gauge('explorer_files', tree.files);
+  TEL.gauge('explorer_folders', tree.folders);
+  TEL.gauge('project_cases', S.inventory?.cases ?? S.cases.length);
+  TEL.gauge('project_briefs', S.inventory?.briefs ?? S.briefs.length);
+  TEL.gauge('project_readouts', S.inventory?.readouts ?? S.readouts.length);
+  TEL.gauge('project_matchups', S.inventory?.matchups ?? S.matchups.length);
+  TEL.gauge('project_open_comments', totalCommentCount());
+}
+// The persistent top-bar utility cluster (global chrome, right of the per-record actions).
+function updateTopGlobal(){
+  const ib = $('#inboxbtn'); if (ib) ib.classList.toggle('active', route().name === 'inbox');
+  const fb = $('#feedbackbtn'); if (fb) fb.classList.toggle('active', route().name === 'feedback');
+  const sb = $('#settingsbtn'); if (sb) sb.classList.toggle('active', route().name === 'settings');
+}
+function syncThemeControls(){
+  const pref = themePref();
+  document.querySelectorAll('[data-theme-value]').forEach((btn) => {
+    const selected = btn.dataset.themeValue === pref;
+    btn.classList.toggle('selected', selected);
+    btn.setAttribute('aria-checked', String(selected));
+  });
+}
+// Git diff mode: fetch the branch + the set of files with uncommitted changes, then filter
+// the Explorer to only those (each opens in its Diff view). Kept fresh on toggle-on, after a
+// discard, and when the agent edits a record (SSE). No-op when the vault isn't a git repo.
+async function loadGit(){
+  if (!S.isGit){ S.git = { branch:'', changed:[] }; syncDocDiff(); return; }
+  let g; try { g = await api('GET', '/api/git'); } catch { return; }
+  if (!g || g.error) return;
+  S.git = { branch: g.branch || '', changed: Array.isArray(g.changed) ? g.changed : [] };
+  syncDocDiff();                                          // the file's change-state may have flipped (e.g. reverted)
+}
+async function setDiffMode(on){
+  const v = !!on && S.isGit;
+  if (v === S.diffMode) return;
+  S.diffMode = v;
+  if (v){ S.query = ''; S.commentFilter = false; await loadGit(); }   // fresh status; the two filters are mutually exclusive
+  renderSidebar();
+}
+// The comments-only Explorer filter (mirrors the git diff-mode filter): show only files with
+// open comments (and their ancestor folders). Refreshes counts on enable.
+async function setCommentFilter(on){
+  const v = !!on;
+  if (v === !!S.commentFilter) return;
+  S.commentFilter = v;
+  if (v){ S.query = ''; S.diffMode = false; await loadCommentCounts(); }
+  renderSidebar();
+}
+// ---- Explorer auto-refresh (filesystem ⇄ tree) ----------------------------
+// Re-pull the file tree (and git change set) and re-render the Explorer when the on-disk
+// folder changes — a file added outside the app appears, a deleted one drops out. Driven by
+// the server's `fs` SSE push (instant) with a slow interval as a fallback where recursive
+// watch isn't available. Cheap and idempotent: it only re-renders when the tree or change
+// set actually moved, and avoids a full sidebar rebuild while the search box has focus (which
+// would drop the caret) — refilling just the list instead.
+let treeRefreshTimer = null, treePollTimer = null, treeRefreshing = false;
+async function refreshTree(){
+  if (!S.project || treeRefreshing) return;            // reentrancy guard: never stack concurrent refreshes
+  treeRefreshing = true;
+  try {
+    let tr; try { tr = await api('GET', '/api/tree'); } catch { return; }
+    if (!tr || tr.error) return;
+    const nextTree = tr.tree || [];
+    const prevInventory = JSON.stringify(S.inventory);
+    if (tr.inventory) S.inventory = tr.inventory;
+    const prevChanged = JSON.stringify(S.git.changed || []);
+    // Keep the git change set fresh whenever the repo is git-tracked — the Explorer shows a
+    // per-file A/M/D badge in ALL views (not only diff mode), so every refresh needs current status.
+    if (S.isGit) await loadGit();
+    const treeMoved = JSON.stringify(nextTree) !== JSON.stringify(S.tree);
+    const inventoryMoved = JSON.stringify(S.inventory) !== prevInventory;
+    const gitMoved = JSON.stringify(S.git.changed || []) !== prevChanged;
+    if (typeof tr.base === 'string') S.treeBase = tr.base;
+    if (!treeMoved && !gitMoved && !inventoryMoved) return;
+    S.tree = nextTree;
+    captureProjectInventory();
+    const searching = document.activeElement && document.activeElement.id === 'casesearch';
+    // Preserve the Explorer's scroll across the refresh — renderSidebar() rebuilds the whole
+    // sidebar (a fresh #explorerlist at scrollTop 0), so a refresh (e.g. after a drag-move or an
+    // external file change) would otherwise jump the tree back to the top.
+    const prevScroll = $('#explorerlist')?.scrollTop || 0;
+    if (searching) fillExplorer(); else renderSidebar();
+    const nl = $('#explorerlist'); if (nl) nl.scrollTop = prevScroll;
+  } finally { treeRefreshing = false; }
+}
+function scheduleTreeRefresh(){ if (treeRefreshTimer) return; treeRefreshTimer = setTimeout(() => { treeRefreshTimer = null; refreshTree(); }, 150); }
+// On a real on-disk change (fs events fire only for content — .git/.sonorance are filtered), refresh
+// git status for the OPEN record so its Document⇄Diff toggle reflects reality — e.g. it DISABLES when
+// the file is reverted (manually, by another tool, or `git checkout`). Coalesced; a no-op if nothing
+// is open or the repo isn't git. (Kept off the idle poll so large repos aren't `git status`-ed every 4s.)
+let gitSyncTimer = null;
+function scheduleGitSync(){
+  if (gitSyncTimer || !S.isGit || !(S.file || S.caseId || S.brief || S.readout || S.matchup)) return;
+  gitSyncTimer = setTimeout(() => { gitSyncTimer = null; loadGit().then(() => { if (S.diffMode) renderSidebar(); }); }, 250);
+  gitSyncTimer.unref?.();
+}
+function startTreePolling(){
+  if (treePollTimer) return;
+  treePollTimer = setInterval(() => { if (document.visibilityState !== 'hidden'){ refreshTree(); reloadOpenDoc(); } }, 4000);
+  treePollTimer.unref?.();
+}
+// ---- project config: buffered periodic flush -------------------------------
+// UI state that changes rapidly (Explorer collapse/expand, and any future per-project config)
+// is written to disk on a timer, not on every interaction: `queueConfig` records the latest
+// value in memory; `flushConfig` POSTs the accumulated patch every ~1.5s when dirty (and on
+// unload / project switch). This keeps `.sonorance/config.json` writes coarse instead of one
+// per keystroke-equivalent. Reusable for any project-scoped config, not just the Explorer.
+function queueConfig(key, value){ S.cfgPending[key] = value; }
+async function flushConfig(){
+  if (!Object.keys(S.cfgPending).length) return;
+  const patch = S.cfgPending; S.cfgPending = {};
+  try { await api('POST', '/api/config', { patch }); }
+  catch { for (const k in patch) if (!(k in S.cfgPending)) S.cfgPending[k] = patch[k]; }   // re-queue on failure
+}
+function startConfigFlush(){
+  if (S.cfgTimer) return;
+  S.cfgTimer = setInterval(() => { flushConfig(); }, 1500);
+  S.cfgTimer.unref?.();
+}
+// Persist the current Explorer collapse/expand state (baseline mode + exception paths).
+function queueExplorer(){ queueConfig('explorer', { mode: S.explorer.mode, ex: [...S.explorer.ex] }); }
+// The Explorer's collapse/expand state is stored compactly as a baseline `mode`
+// ('collapsed' | 'expanded') plus a set of EXCEPTION paths that differ from it — so a mostly-
+// collapsed tree persists only the few expanded folders (and vice-versa). A fresh project
+// defaults to fully collapsed. `folderOpen` is the single source of truth for a folder's state.
+function folderOpen(path){ return S.explorer.mode === 'expanded' ? !S.explorer.ex.has(path) : S.explorer.ex.has(path); }
+// True when the tree is fully collapsed (baseline collapsed, no expanded exceptions) — drives
+// the collapse-all ⇄ expand-all toggle button.
+function allTopCollapsed(){ return S.explorer.mode === 'collapsed' && S.explorer.ex.size === 0; }
+function collapseAllFolders(){ S.explorer = { mode:'collapsed', ex:new Set() }; queueExplorer(); renderSidebar(); }
+function expandAllFolders(){ S.explorer = { mode:'expanded', ex:new Set() }; queueExplorer(); renderSidebar(); }
+function toggleCollapseAll(){ if (allTopCollapsed()) expandAllFolders(); else collapseAllFolders(); }
+let explorerIntroShown = false;
+function flourish(list, has){ if (has){ list.classList.toggle('intro', !explorerIntroShown); explorerIntroShown = true; } else list.classList.remove('intro'); }
+// Fill the Explorer (kept focus-stable so typing in search never loses the caret — we only
+// replace the list body, never the search input). The Explorer is a file tree only.
+function fillExplorer(){ const list = $('#explorerlist'); if (!list) return; renderTree(list); }
+
+// ---- Explorer: full Markdown file tree -----------------------------------------------
+// The tree the Explorer renders. In diff mode it is S.tree AUGMENTED with DELETED files
+// (git status 'D'): those no longer exist on disk, so the server's file-system walk misses
+// them, but their removal is part of the change set and must still be reviewable. Each is
+// grafted in as a leaf (creating any missing parent folders) that opens straight into its
+// Diff (the removal). Outside diff mode the raw tree is used unchanged.
+function treeForRender(){
+  if (!(S.diffMode && S.isGit)) return S.tree;
+  const present = new Set();
+  (function walk(ns){ for (const n of ns || []){ if (n.type === 'dir') walk(n.children); else present.add(n.path); } })(S.tree);
+  const deleted = (S.git.changed || [])
+    .filter(c => /\.md$/i.test(c.path) && c.status.includes('D') && !present.has(c.path))
+    .map(c => c.path);
+  if (!deleted.length) return S.tree;
+  const clone = cloneTreeNodes(S.tree);
+  for (const path of deleted) graftDeletedLeaf(clone, path);
+  sortTreeNodes(clone);
+  return clone;
+}
+function cloneTreeNodes(nodes){ return (nodes || []).map(n => n.type === 'dir' ? { ...n, children: cloneTreeNodes(n.children) } : { ...n }); }
+// Insert a deleted-file leaf at `path`, creating intermediate folder nodes as needed. The
+// leaf is marked `deleted` so a click opens its removal Diff (the file can't be read).
+function graftDeletedLeaf(nodes, path){
+  const parts = path.split('/');
+  const name = parts.pop();
+  let level = nodes, prefix = '';
+  for (const seg of parts){
+    prefix = prefix ? `${prefix}/${seg}` : seg;
+    let dir = level.find(n => n.type === 'dir' && n.name === seg);
+    if (!dir){ dir = { name: seg, path: prefix, type: 'dir', children: [] }; level.push(dir); }
+    if (!dir.children) dir.children = [];
+    level = dir.children;
+  }
+  if (!level.some(n => n.type === 'file' && n.path === path))
+    level.push({ name, path, type: 'file', kind: 'file', id: null, deleted: true });
+}
+function sortTreeNodes(nodes){
+  nodes.sort((a, b) => (a.type === b.type ? a.name.localeCompare(b.name) : a.type === 'dir' ? -1 : 1));
+  for (const n of nodes) if (n.type === 'dir') sortTreeNodes(n.children || []);
+}
+// Renders S.tree with disclosure carets, per-depth indentation, single-child folder-path
+// compaction, collapse/expand, and search that keeps a matching file's folders.
+function renderTree(list){
+  const q = S.query.trim().toLowerCase();
+  const changed = diffFilterSet();
+  const commented = commentFilterSet();
+  const baseTree = treeForRender();
+  const prevScroll = list.scrollTop;                     // preserve scroll across the innerHTML swap (a refresh — e.g. after a move — must not jump to the top)
+  // Files must pass the diff filter, the comments filter (when on) AND the search query.
+  const pred = (n) => (!changed || changed.has(n.path)) && (!commented || commented.has(n.path)) && (!q || matchFileNode(n, q));
+  const roots = (q || changed || commented) ? pruneTree(baseTree, pred) : baseTree;
+  if (!roots.length){
+    list.classList.remove('intro');
+    const msg = commented ? 'No files with open comments.' : changed ? 'No files with uncommitted changes.' : (q ? 'No files match.' : 'No markdown files yet.');
+    list.innerHTML = `<div style="padding:8px 12px;color:var(--ink-faint);font-size:13px">${msg}</div>`;
+    return;
+  }
+  const html = [];
+  renderTreeNodes(roots, 0, !!(q || changed || commented), html);
+  list.innerHTML = '<div class="tree" role="tree">' + html.join('') + '</div>';
+  list.scrollTop = prevScroll;                           // restore the scroll position (clamped by the browser if the tree got shorter)
+  flourish(list, true);
+  // Folder disclosure: toggle collapse; the whole row toggles too.
+  list.querySelectorAll('[data-dir]').forEach(el => el.addEventListener('click', (e) => { e.preventDefault(); toggleFolder(el.dataset.dir); }));
+  wireExplorerLeaves(list);
+  wireDragDrop(list);
+  applyTrimTitles(list);
+}
+// ---- drag-and-drop move ---------------------------------------------------
+// Drag a file or folder onto another folder (or the empty area = vault root) to move it there,
+// subtree and all. The drop target is highlighted while dragging; an invalid drop (into itself,
+// or back where it already is) simply doesn't highlight or accept.
+let dragSrc = null;                                        // { path, isDir } for the row being dragged
+// The destination FOLDER for a drop landing on `el`: a folder row → that folder; a file row →
+// its parent folder; anything else (empty list space) → the vault root ('').
+function dropDirFor(el){
+  if (!el || !el.closest) return '';
+  const dir = el.closest('.trow.dir'); if (dir) return dir.dataset.dir;
+  const leaf = el.closest('.trow[data-open="file"]'); if (leaf){ const k = leaf.dataset.path || leaf.dataset.key || ''; const i = k.lastIndexOf('/'); return i >= 0 ? k.slice(0, i) : ''; }
+  return '';
+}
+function validDrop(src, destDir){
+  if (!src || destDir == null) return false;
+  const srcParent = src.path.includes('/') ? src.path.slice(0, src.path.lastIndexOf('/')) : '';
+  if (destDir === srcParent) return false;                 // already lives here → nothing to do
+  if (src.isDir && (destDir === src.path || destDir.startsWith(src.path + '/'))) return false;  // into itself / own subtree
+  return true;
+}
+function clearDropHi(){
+  const list = $('#explorerlist'); if (!list) return;
+  list.classList.remove('droproot');
+  list.querySelectorAll('.trow.droptarget').forEach(r => r.classList.remove('droptarget'));
+}
+function highlightDrop(destDir){
+  const list = $('#explorerlist'); if (!list) return;
+  list.classList.toggle('droproot', destDir === '');
+  list.querySelectorAll('.trow.dir').forEach(r => r.classList.toggle('droptarget', destDir !== '' && r.dataset.dir === destDir));
+}
+function wireDragDrop(list){
+  list.querySelectorAll('.trow[draggable="true"]').forEach(row => {
+    const isDir = row.classList.contains('dir');
+    const path = isDir ? row.dataset.dir : row.dataset.path;
+    if (path == null) return;
+    row.addEventListener('dragstart', (e) => {
+      dragSrc = { path, isDir };
+      try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', path); } catch {}
+      row.classList.add('dragging');
+    });
+    row.addEventListener('dragend', () => { dragSrc = null; clearDropHi(); list.querySelectorAll('.dragging').forEach(r => r.classList.remove('dragging')); });
+  });
+  list.addEventListener('dragover', (e) => {
+    if (!dragSrc) return;
+    const destDir = dropDirFor(e.target);
+    if (!validDrop(dragSrc, destDir)){ clearDropHi(); return; }
+    e.preventDefault(); try { e.dataTransfer.dropEffect = 'move'; } catch {}
+    highlightDrop(destDir);
+  });
+  list.addEventListener('dragleave', (e) => { if (e.target === list) clearDropHi(); });
+  list.addEventListener('drop', (e) => {
+    if (!dragSrc) return;
+    const destDir = dropDirFor(e.target);
+    const src = dragSrc; dragSrc = null; clearDropHi();
+    if (!validDrop(src, destDir)) return;
+    e.preventDefault();
+    moveEntry(src.path, destDir);
+  });
+}
+// POST a move, then re-point any open tabs under the moved path and refresh the tree.
+async function moveEntry(srcPath, destDir){
+  const r = await api('POST', '/api/move', { src: srcPath, dest: destDir });
+  if (!r || r.error){
+    showToast(r && r.error === 'into-self' ? "Can't move a folder into itself."
+      : r && r.error === 'exists' ? 'Something with that name already exists there.'
+      : r && r.error === 'endpoint-missing' ? `Editor is out of date — restart ${SERVE_CMD}.`
+      : 'Could not move.');
+    return;
+  }
+  TEL.event('ui.action', { area:'explorer', action:'move' });
+  repointFileTabs(r.from || srcPath, r.path);
+  if (destDir) ensureFolderOpen(destDir);
+  await refreshTree();
+}
+// Rename a file or folder in place (same parent, new basename) — the Explorer's "Rename…". The
+// dialog is seeded with the current name and pre-selects the editable stem (name without the
+// extension for a file), so a quick retype keeps `.md`. Reuses the move plumbing to keep any open
+// tab pointed at the renamed file (or files under a renamed folder) and its URL correct.
+async function renameEntry(path, isDir){
+  if (!path) return;
+  const cur = baseName(path);
+  const dot = cur.lastIndexOf('.');
+  const selectEnd = (!isDir && dot > 0) ? dot : cur.length;                 // select the stem (files) / whole name (folders)
+  const name = await promptDialog({
+    title: isDir ? 'Rename folder' : 'Rename file',
+    label: isDir ? 'Folder name' : 'File name',
+    value: cur, selectEnd, confirmLabel: 'Rename',
+  });
+  if (name == null || name === cur) return;
+  const r = await api('POST', '/api/rename', { path, name });
+  if (!r || r.error){
+    showToast(r && r.error === 'exists' ? 'Something with that name already exists here.'
+      : r && r.error === 'bad name' ? 'That name isn’t allowed.'
+      : r && r.error === 'endpoint-missing' ? `Editor is out of date — restart ${SERVE_CMD}.`
+      : 'Could not rename.');
+    return;
+  }
+  TEL.event('ui.action', { area:'explorer', action:'rename' });
+  repointFileTabs(r.from || path, r.path);
+  if (isDir) ensureFolderOpen(r.path);                    // keep the renamed folder revealed
+  await refreshTree();
+}
+// After a move, update open FILE tabs (and the live document) whose path was the moved item or
+// lived under it, so the file stays open at its new location and the URL matches.
+function repointFileTabs(fromPath, toPath){
+  const remap = (id) => id === fromPath ? toPath : (id.startsWith(fromPath + '/') ? toPath + id.slice(fromPath.length) : null);
+  let changed = false;
+  for (const t of S.tabs){ if (t.kind !== 'file') continue; const n = remap(t.id); if (n != null){ t.id = n; changed = true; } }
+  if (S.file && S.file.path){ const n = remap(S.file.path); if (n != null){ S.file.path = n; S.recFile = n; } }
+  if (!changed) return;
+  persistTabs(); renderTabs();
+  const at = S.tabs[S.activeTab];
+  if (at && at.kind === 'file'){ try { history.replaceState({}, '', PP() + tabRoute(at)); } catch {} }
+}
+function renderTreeNodes(nodes, depth, searching, out){
+  for (const n of nodes){
+    if (n.type === 'dir'){
+      // Fold a chain of single-child folders into "a/b/c".
+      let names = [n.name], cur = n;
+      while (cur.children && cur.children.length === 1 && cur.children[0].type === 'dir'){ cur = cur.children[0]; names.push(cur.name); }
+      const open = searching || folderOpen(cur.path);
+      const gs = dirGitStatus(cur.path);                  // colour the folder name by aggregate change, not a badge
+      out.push(`<div class="trow dir ${open?'open':''}${gs ? ' gs-' + gs.cls : ''}" role="treeitem" aria-expanded="${open}" draggable="true" data-dir="${esc(cur.path)}" data-full="${esc(cur.path)}"${gs ? ` data-gs-tip="${esc(gs.tip)}"` : ''} style="--depth:${depth}">
+        <span class="tw">${iconEl(ICON.caret)}</span><span class="lbl">${esc(names.join('/'))}</span>${rowActs({ newfile: cur.path, del: cur.path, dir: true })}<span class="gitslot">${dirCommentBadge(cur.path)}</span></div>`);
+      if (open) renderTreeNodes(cur.children || [], depth + 1, searching, out);
+    } else {
+      const label = fileNodeLabel(n);
+      const active = fileNodeActive(n);
+      // Tooltip: a plain file shows its path (folder context); a case/brief shows its
+      // full title/period (the record path — analysis.md — is not meaningful to a reader).
+      const tip = n.kind === 'file' ? n.path : label;
+      out.push(explorerLeaf(n.kind, n.kind === 'file' ? n.path : n.id, label, active, depth, 0, '', n.path, tip, gitBadge(n.path)));
+    }
+  }
+}
+// One clickable leaf (a document) in the file tree. `openKey` routes the click: a case/brief
+// id, or a file path. `depth` sets indentation; `tip` is the full name/path surfaced as a
+// hover tooltip when the label is truncated (see applyTrimTitles). `badge` is trusted inline
+// HTML (a git-change badge), rendered right-aligned; `meta` is escaped text.
+function explorerLeaf(kind, openKey, label, active, depth, i, meta, path, tip, badge){
+  const href = PP() + (kind === 'file' ? '/file/' + encFilePath(path || openKey) : '/' + kind + '/' + openKey);
+  // No icons (space is at a premium). A leaf leads by one caret-width (--lead) so its name
+  // lines up under sibling folder names.
+  const vars = `--depth:${depth};--lead:var(--ind-caret);`;
+  const gs = fileGitClass(path || openKey);   // colour the name by git status for EVERY record (file/case/brief), not just plain files
+  const tail = (meta ? `<span class="meta">${esc(meta)}</span>` : '') + rowActs({ del: path || openKey, ntKind: kind, ntKey: openKey }) + commentBadge(path || openKey) + `<span class="gitslot">${badge || ''}</span>`;
+  const drag = kind === 'file' ? ' draggable="true"' : '';   // plain files are movable (records keep their id-keyed tab)
+  return `<a class="trow ${kind} ${gs} ${active?'active':''}" role="treeitem" style="${vars}--i:${Math.min(i||0,14)}"${drag} data-path="${esc(path || openKey)}"
+     href="${href}" data-open="${kind}" data-key="${esc(String(openKey))}" data-full="${esc(tip || label)}"><span class="lbl">${esc(label)}</span>${tail}</a>`;
+}
+// The hover-revealed row actions: "open in new tab" (documents),
+// "new file here" (folders) and "delete". Buttons — not links — so a click acts, never
+// navigates; each stops the row's own open/toggle handler. Kept out of the tab order (the
+// context menu + header cover keyboard). "Open in new tab" is the discoverable, browser-safe
+// alternative to a modifier-click (which anchors reserve for the browser's own new tab/window).
+function rowActs({ newfile, del, dir, ntKind, ntKey } = {}){
+  const nt = ntKind != null ? `<button type="button" class="rowact" tabindex="-1" data-newtab-kind="${esc(ntKind)}" data-newtab-key="${esc(String(ntKey))}" title="Open in new tab" aria-label="Open in new tab">${iconEl(ICON.external)}</button>` : '';
+  const nf = newfile != null ? `<button type="button" class="rowact" tabindex="-1" data-newin="${esc(newfile)}" title="New file or folder here" aria-label="New file or folder here">${iconEl(ICON.plus)}</button>` : '';
+  const rm = del != null ? `<button type="button" class="rowact" tabindex="-1" data-del="${esc(del)}" data-isdir="${dir ? '1' : ''}" title="${dir ? 'Delete folder' : 'Delete file'}" aria-label="${dir ? 'Delete folder' : 'Delete file'}">${iconEl(ICON.trash)}</button>` : '';
+  return (nt || nf || rm) ? `<span class="rowacts">${nt}${nf}${rm}</span>` : '';
+}
+function wireExplorerLeaves(list){
+  list.querySelectorAll('[data-open]').forEach(a => {
+    // One predictable click: open in place (replace the active tab). "Open in new tab" is an
+    // explicit act — the row's hover button, or the right-click menu — never a modifier/middle
+    // click (in a real browser those are reserved by the anchor: new browser tab/window/download).
+    a.addEventListener('click', (e) => { e.preventDefault(); closeNav(); openExplorerItem(a.dataset.open, a.dataset.key, { newTab: false }); });
+    a.addEventListener('contextmenu', (e) => { e.preventDefault(); e.stopPropagation(); rowContextMenu(e, { kind: a.dataset.open, key: a.dataset.key, file: a.dataset.key, path: a.dataset.path }); });
+  });
+  // Row action buttons (hover-revealed) + folder context menus. Buttons stop propagation so
+  // they never trigger the row's open/toggle; the right-click menu is the power-user path.
+  wireRowActs(list);
+}
+// Wire the delete / new-file-here buttons and folder right-click menus for a rendered tree.
+function wireRowActs(list){
+  list.querySelectorAll('[data-newtab-kind]').forEach(b => {
+    b.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); closeNav(); openExplorerItem(b.dataset.newtabKind, b.dataset.newtabKey, { newTab: true }); });
+  });
+  list.querySelectorAll('[data-del]').forEach(b => {
+    if (b.tagName !== 'BUTTON') return;
+    b.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); confirmDeleteEntry(b.dataset.del, b.dataset.isdir === '1'); });
+  });
+  list.querySelectorAll('[data-newin]').forEach(b => {
+    b.addEventListener('click', (e) => {
+      e.preventDefault(); e.stopPropagation();
+      const r = b.getBoundingClientRect();
+      openNewMenu(b.dataset.newin, r.left, r.bottom + 4);
+    });
+  });
+  list.querySelectorAll('.trow.dir[data-dir]').forEach(el => {
+    el.addEventListener('contextmenu', (e) => { e.preventDefault(); e.stopPropagation(); rowContextMenu(e, { dir: el.dataset.dir }); });
+  });
+}
+// The Explorer right-click menu — reliable in the browser (the same contextmenu event the tab
+// strip uses). A folder offers New file/folder + Copy path + Delete; a document offers Open in a
+// new tab + Copy path + Delete. "Copy relative path" yields the project-root-relative path;
+// "Copy full path" prepends the vault's absolute directory.
+function rowContextMenu(e, { kind, key, file, dir, path } = {}){
+  const rel = dir || path || file || key;
+  const copyItems = [
+    { label: 'Copy relative path', icon: 'copy', act: () => copyExplorerPath(rel, false) },
+    { label: 'Copy full path', icon: 'copy', act: () => copyExplorerPath(rel, true) },
+  ];
+  const items = dir
+    ? [{ label: 'New file here', icon: 'newfile', act: () => promptNewFile(dir) },
+       { label: 'New folder here', icon: 'newfolder', act: () => promptNewFolder(dir) },
+       { sep: true }, { label: 'Rename', icon: 'pencil', act: () => renameEntry(dir, true) }, ...copyItems, { sep: true },
+       { label: 'Delete folder', icon: 'trash', act: () => confirmDeleteEntry(dir, true) }]
+    : [{ label: 'Open in new tab', icon: 'external', act: () => openExplorerItem(kind, key, { newTab: true }) },
+       { sep: true }, { label: 'Rename', icon: 'pencil', act: () => renameEntry(path || file || key, false) }, ...copyItems, { sep: true },
+       { label: 'Delete file', icon: 'trash', act: () => confirmDeleteEntry(path || file || key, false) }];
+  openMenu(e.clientX, e.clientY, items);
+}
+// Copy a tree entry's path. `full` prepends the vault's absolute directory (the full system path);
+// otherwise it's the project-root-relative path. Uses the async clipboard with a legacy fallback.
+async function copyExplorerPath(rel, full){
+  const relPath = String(rel || '');
+  const base = S.project && S.project.dir ? String(S.project.dir).replace(/[\\/]+$/, '') : '';
+  const out = full && base ? base + '/' + relPath : relPath;
+  let ok = false; try { await navigator.clipboard.writeText(out); ok = true; } catch { ok = copyFallback(out); }
+  showToast(ok ? (full ? 'Full path copied.' : 'Relative path copied.') : 'Could not copy the path.');
+}
+function openExplorerItem(kind, key, opts){
+  if (kind === 'case') return openCaseTab(key, opts);
+  if (kind === 'brief') return openBriefTab(key, opts);
+  if (kind === 'readout') return openReadoutTab(key, opts);
+  if (kind === 'matchup') return openMatchupTab(key, opts);
+  return openFileTab(key, opts);
+}
+// Flip one folder's open state and record it as an exception to (or back in line with) the
+// baseline mode, then persist (buffered) and re-render.
+function toggleFolder(path){
+  const wantOpen = !folderOpen(path);
+  const baselineOpen = S.explorer.mode === 'expanded';
+  if (wantOpen === baselineOpen) S.explorer.ex.delete(path); else S.explorer.ex.add(path);
+  queueExplorer(); fillExplorer();
+}
+// Force a folder OPEN (idempotent) — used after creating/moving so the affected folder is revealed.
+function ensureFolderOpen(path){
+  if (!path || folderOpen(path)) return;
+  if (S.explorer.mode === 'expanded') S.explorer.ex.delete(path); else S.explorer.ex.add(path);
+  queueExplorer();
+}
+// Native hover tooltip with the full name/path — but ONLY when the label is actually
+// truncated (its rendered text is wider than the row can show). Recomputed after every
+// Explorer render and whenever the sidebar width changes, so resizing wider drops the
+// now-redundant tooltips and resizing narrower adds them back.
+function applyTrimTitles(list){
+  const root = list || $('#explorerlist'); if (!root) return;
+  root.querySelectorAll('.trow').forEach(row => {
+    const lbl = row.querySelector('.lbl'); if (!lbl) return;
+    const truncated = lbl.scrollWidth - lbl.clientWidth > 1;
+    // A truncated name shows its full path on hover; otherwise a git-tinted folder shows what
+    // changed (so the colour is backed by a description), and everything else has no tooltip.
+    if (truncated) row.title = row.dataset.full || lbl.textContent;
+    else if (row.dataset.gsTip) row.title = row.dataset.gsTip;
+    else row.removeAttribute('title');
+  });
+}
+// The display label for a file node is its filename — the sidebar is a generic file tree
+// with no case/brief-specific chrome (a file is distinguished by its folder). Search still
+// matches the H1 title via matchFileNode.
+function fileNodeLabel(n){ return n.name; }
+function fileNodeActive(n){
+  const r = route();
+  if (n.kind === 'case') return r.name === 'case' && r.id === n.id;
+  if (n.kind === 'brief') return r.name === 'brief' && r.id === n.id;
+  if (n.kind === 'readout') return r.name === 'readout' && r.id === n.id;
+  if (n.kind === 'matchup') return r.name === 'matchup' && r.id === n.id;
+  return r.name === 'file' && r.id === n.path;
+}
+// Prune the tree to files that satisfy `pred`, keeping their ancestor folders (used for
+// both search and the git diff filter). A file matches search by path (filename + folder
+// names) or H1 — so searching a folder name surfaces the files under it.
+function pruneTree(nodes, pred){
+  const out = [];
+  for (const n of nodes){
+    if (n.type === 'dir'){
+      const kids = pruneTree(n.children || [], pred);
+      if (kids.length) out.push({ ...n, children: kids });
+    } else if (pred(n)){
+      out.push(n);
+    }
+  }
+  return out;
+}
+function matchFileNode(n, q){
+  return `${n.path || ''} ${n.h1 || ''} ${fileNodeLabel(n)}`.toLowerCase().includes(q);
+}
+// ---- briefs (project-scoped landscape reports) ----------------------------
+// A compact label for a brief: the window it covers (e.g. "Apr 4 – Jul 4, 2026").
+function briefLabel(b){
+  if (b && b.period_start && b.period_end){
+    const fmt = (ts, y) => new Date(ts).toLocaleDateString('en-US', y ? { month:'short', day:'numeric', year:'numeric', timeZone:'UTC' } : { month:'short', day:'numeric', timeZone:'UTC' });
+    return `${fmt(b.period_start, false)} – ${fmt(b.period_end, true)}`;
+  }
+  return 'Brief';
+}
+function readoutLabel(r){ return r ? briefLabel(r).replace(/^Brief$/, 'Readout') : 'Readout'; }
+// ---- matchups (project-scoped single-competitor head-to-heads) ------------
+// A compact label for a matchup: the competitor it sizes us up against (e.g. "Acme Corp").
+function matchupLabel(m){ return (m && m.competitor) ? m.competitor : 'Matchup'; }
+// ---- project switcher (item 8) --------------------------------------------
+function projMenu(e){
+  const btn = e.currentTarget.getBoundingClientRect();
+  const cur = S.project && S.project.id;
+  const list = S.projects.slice();
+  if (S.project && !list.some(p => p.id === cur)) list.unshift(S.project);   // always show the current one
+  // A vault whose folder is gone can't be switched to — its row IS the Remove action (it's never
+  // hidden). A live vault switches on click; every live vault EXCEPT the current one also carries a
+  // hover/focus-revealed trailing Remove (you switch away before forgetting the one you're viewing).
+  const items = list.map(p => {
+    if (p.exists === false) return { label: `${p.name} — missing`, icon: 'trash', act: () => removeVault(p) };
+    const isCur = p.id === cur;
+    const item = { label: p.name, icon: isCur ? 'check' : null, on: isCur, act: () => switchProject(p.id) };
+    if (!isCur) item.trail = { icon: 'trash', danger: true, label: `Remove ${p.name} from the vault list`, act: () => removeVault(p) };
+    return item;
+  });
+  if (items.length) items.push({ sep: true });
+  items.push({ label: 'Open folder…', icon: 'folder', act: () => openFolderPrompt() });
+  openMenu(btn.left, btn.bottom + 4, items, { minWidth: btn.width });
+}
+// Open a folder as a vault. A browser can't pick a
+// server-side folder, so the daemon serves a directory browser (folderDialog) the user drills
+// through; the picked absolute path is registered + switched to.
+async function openFolderPrompt(){
+  const start = S.project && S.project.dir ? S.project.dir.replace(/[/\\][^/\\]*[/\\]?$/, '') : null;   // start near the current vault
+  const dir = await folderDialog(start);
+  if (dir == null) return;
+  const path = String(dir).trim(); if (!path) return;
+  flushSave();
+  await flushConfig();
+  await TEL.flush();
+  const r = await api('POST', '/api/open', { dir: path });
+  if (!r || r.error){
+    showToast(r && r.error === 'not found' ? 'That folder no longer exists.'
+      : r && r.error === 'unsupported' ? `This build can’t open other folders — restart ${SERVE_CMD}.`
+      : 'Could not open that folder.');
+    return;
+  }
+  S.tabs = []; S.activeTab = -1; S.query = '';
+  await boot();                                          // the daemon already switched to the opened vault
+}
+// Forget a vault from the switcher list (never deletes anything on disk — the folder, its files,
+// and its `.sonorance/` identity/state all stay, so re-adding it later restores the same vault).
+async function removeVault(p){
+  const ok = await confirmDialog({
+    title: 'Remove vault?',
+    body: `Remove <b>${esc(p.name)}</b> from the vault list? This only forgets it here — it never deletes the folder or anything inside it, and you can add it back anytime.`,
+    confirmLabel: 'Remove',
+  });
+  if (!ok) return;
+  await api('POST', '/api/remove', { id: p.id });
+  await boot();
+}
+async function switchProject(id){
+  if (S.project && id === S.project.id) return;
+  flushSave();                                          // persist any pending edit before leaving the project
+  await flushConfig();                                  // persist buffered config (Explorer state) for THIS project first
+  await TEL.flush();                                     // old-project events must arrive before the server changes telemetry context
+  try { await api('POST', '/api/switch', { id }); } catch {}   // mark the target last-active on the server
+  S.tabs = []; S.activeTab = -1; S.query = '';
+  history.pushState({}, '', '/p/' + encodeURIComponent(id) + '/');   // the URL carries the project; boot reads it
+  await boot();                                         // reloads /api/state for the new project (its own tabs/state)
+}
+// ---- tabs (item 7) ---------------------------------------------------------
+const tabRoute = (t) => t.kind === 'inbox' ? '/inbox' : t.kind === 'settings' ? '/settings' : t.kind === 'feedback' ? '/feedback' : t.kind === 'file' ? '/file/' + encFilePath(t.id) : (t.kind === 'brief' ? '/brief/' : t.kind === 'readout' ? '/readout/' : t.kind === 'matchup' ? '/matchup/' : '/case/') + t.id;
+const baseName = (p) => String(p || '').split('/').pop() || 'File';
+function tabTitle(t){
+  if (t.kind === 'inbox') return 'Inbox';
+  if (t.kind === 'settings') return 'Settings';
+  if (t.kind === 'feedback') return 'Feedback';
+  if (t.kind === 'file') return baseName(t.id);
+  if (t.kind === 'brief'){ const b = S.briefs.find(x => x.id === t.id); return b ? briefLabel(b) : 'Brief'; }
+  if (t.kind === 'readout'){ const r = S.readouts.find(x => x.id === t.id); return r ? readoutLabel(r) : 'Readout'; }
+  if (t.kind === 'matchup'){ const m = S.matchups.find(x => x.id === t.id); return m ? matchupLabel(m) : 'Matchup'; }
+  const s = S.cases.find(x => x.id === t.id); return s ? (s.title || 'Untitled') : 'Case';
+}
+function activeSpec(){ const t = S.tabs[S.activeTab]; return t ? { kind: t.kind, id: t.id || null } : null; }
+function persistTabs(){ TEL.gauge('open_tabs', S.tabs.length); api('POST', '/api/tabs', { tabs: S.tabs.map(t => ({ kind: t.kind, id: t.id || null })), active: activeSpec() }).catch(() => {}); }
+function renderTabs(){
+  const bar = $('#tabs'); if (!bar) return;
+  // Only fixed utility tabs carry icons. Content tabs
+  // (file / case / brief) are named by their title, so an icon is just clutter in a dense strip.
+  const tabIco = (t) => t.kind === 'inbox' ? iconEl(ICON.inbox) : t.kind === 'settings' ? iconEl(ICON.settings) : t.kind === 'feedback' ? iconEl(ICON.feedback) : '';
+  bar.innerHTML = S.tabs.map((t, i) =>
+    `<div class="tab ${i===S.activeTab?'active':''} ${t.kind==='brief'?'brief':''} ${t.kind==='readout'?'readout':''} ${t.kind==='matchup'?'matchup':''} ${t.kind==='file'?'file':''}" data-tab="${i}" id="tab-${i}"
+       role="tab" aria-selected="${i===S.activeTab}" aria-controls="main" tabindex="${i===S.activeTab?0:-1}"
+       title="${esc(tabTitle(t))}">
+      <span class="tab-ico">${tabIco(t)}</span>
+      <span class="tab-label">${esc(tabTitle(t))}</span>
+      <button class="tab-close" data-close="${i}" aria-label="Close ${esc(tabTitle(t))}" title="Close" tabindex="-1">${iconEl(ICON.x)}</button>
+    </div>`).join('');
+  bar.querySelectorAll('.tab').forEach(el => {
+    const idx = +el.dataset.tab;
+    el.addEventListener('mousedown', (e) => { if (e.target.closest('.tab-close')) return; if (e.button === 1){ e.preventDefault(); closeTab(idx); return; } if (e.button === 0) activateTab(idx); });
+    el.addEventListener('contextmenu', (e) => { e.preventDefault(); tabMenu(e, idx); });
+    el.addEventListener('keydown', (e) => onTabKeydown(e, idx));
+    el.querySelector('.tab-close').addEventListener('click', (e) => { e.stopPropagation(); closeTab(idx); });
+  });
+  updateTabMark();
+  updateTabScroll();
+  scrollActiveTabIntoView();
+}
+// ---- tab-strip overflow scrolling (chevrons, not a system scrollbar) -------
+// When more tabs are open than fit, each tab keeps its min width and the strip scrolls. The two
+// chevrons appear only then; each dims at the scroll end it points past. The active tab is kept
+// in view so keyboard/Explorer navigation never lands on an off-screen tab.
+function updateTabScroll(){
+  const wrap = $('#tabs'), L = $('#tabscrollL'), R = $('#tabscrollR');
+  if (!wrap || !L || !R) return;
+  const over = wrap.scrollWidth - wrap.clientWidth > 1;
+  L.classList.toggle('show', over); R.classList.toggle('show', over);
+  if (over){
+    L.disabled = wrap.scrollLeft <= 1;
+    R.disabled = wrap.scrollLeft + wrap.clientWidth >= wrap.scrollWidth - 1;
+  }
+}
+function scrollActiveTabIntoView(){
+  const wrap = $('#tabs'); if (!wrap) return;
+  if (wrap.scrollWidth - wrap.clientWidth <= 1) return;   // nothing to scroll (also: no layout in headless)
+  const el = document.getElementById('tab-' + S.activeTab);
+  if (el && typeof el.scrollIntoView === 'function') el.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+}
+function nudgeTabs(dir){
+  const wrap = $('#tabs'); if (!wrap) return;
+  wrap.scrollBy({ left: dir * Math.max(120, wrap.clientWidth * 0.8), behavior: 'smooth' });
+}
+// The semi-translucent brand wordmark, centred in the tab bar. It names the injected product
+// (Sonorance standalone, Deliberate when hosted) and is HIDDEN on the empty "home" surface —
+// there the branded hero canvas carries the name instead, so brand presence is never doubled.
+function updateTabMark(){
+  const m = $('#tabmark'); if (!m) return;
+  m.textContent = BRAND;
+  // Hidden whenever a branded hero is on screen (the empty Inbox home) — mutual exclusion, so
+  // the product name is never shown twice at once.
+  m.classList.toggle('hide', !!document.querySelector('#main .hero'));
+  measureTabMark();
+}
+// Keep the centred wordmark clear of its neighbours: hide it whenever a tab / the + button
+// (on the left) or the page controls (on the right) come within a margin of it — so it recedes
+// cleanly as tabs fill rather than crowding or overlapping. Re-measured on tab changes and on
+// resize. Where there is no layout (headless tests), it stays shown.
+function measureTabMark(){
+  const m = $('#tabmark'); if (!m || m.classList.contains('hide')) return;
+  const bar = $('#tabbar'); if (!bar) return;
+  m.classList.remove('crowded');                          // reveal to measure its true geometry
+  const barR = bar.getBoundingClientRect();
+  if (!barR.width) return;                                // no layout (headless) → leave it shown
+  const markR = m.getBoundingClientRect();
+  const add = $('#tabadd');
+  const acts = $('#topactions'), glob = $('#topglobal');
+  const leftEdge = add ? add.getBoundingClientRect().right : barR.left;
+  const rc = (acts && acts.getBoundingClientRect().width) ? acts : glob;
+  const rightEdge = rc ? rc.getBoundingClientRect().left : barR.right;
+  const PAD = 24;
+  const crowded = (markR.left - leftEdge < PAD) || (rightEdge - markR.right < PAD);
+  m.classList.toggle('crowded', crowded);
+}
+// Keyboard operation of the tab strip (WAI-ARIA tabs pattern): arrows/Home/End move
+// focus and activate, Enter/Space activate, Delete/Backspace closes the focused tab.
+function onTabKeydown(e, idx){
+  const n = S.tabs.length; if (!n) return;
+  const go = (j) => { const k = ((j % n) + n) % n; activateTab(k); focusTab(k); };
+  switch (e.key){
+    case 'ArrowRight': case 'ArrowDown': e.preventDefault(); go(idx + 1); break;
+    case 'ArrowLeft': case 'ArrowUp': e.preventDefault(); go(idx - 1); break;
+    case 'Home': e.preventDefault(); go(0); break;
+    case 'End': e.preventDefault(); go(n - 1); break;
+    case 'Enter': case ' ': e.preventDefault(); activateTab(idx); break;
+    case 'Delete': case 'Backspace': {
+      e.preventDefault();
+      closeTab(idx);
+      if (S.tabs.length) focusTab(Math.min(idx, S.tabs.length - 1));
+      else $('#tabadd')?.focus();
+      break;
+    }
+  }
+}
+// Focus a tab by index after any (async) re-render settles.
+function focusTab(idx){ setTimeout(() => { const el = $('#tab-' + idx); if (el) el.focus(); }, 0); }
+function tabMenu(e, idx){
+  openMenu(e.clientX, e.clientY, [
+    { label: 'Close', icon: 'x', act: () => closeTab(idx) },
+    { label: 'Close others', act: () => closeOthers(idx) },
+    { label: 'Close all', act: () => closeAll() },
+  ]);
+}
+// Open a document. Default: replace the ACTIVE tab in place — one predictable
+// click, no tab explosion from browsing. `newTab:true` opens (and focuses) a NEW tab. A doc that
+// is already open is simply focused (no duplicate). The Inbox home is never clobbered — opening a
+// doc while it's active makes a new tab. (A future `pinned` tab is likewise never replaced.)
+function openDoc(kind, id, { newTab = false } = {}){
+  const same = S.tabs.findIndex(t => t.kind === kind && t.id === id);
+  if (same >= 0) return activateTab(same);                 // already open → just focus it
+  // Content-free open signal: a semantic record is an event {kind}; a raw file is an aggregate.
+  if (kind === 'file') TEL.count('files_opened', 1);
+  else if (kind === 'case' || kind === 'brief' || kind === 'readout' || kind === 'matchup') TEL.event('record.opened', { kind });
+  const active = S.tabs[S.activeTab];
+  const replace = !newTab && active && !['inbox', 'settings', 'feedback'].includes(active.kind) && !active.pinned;
+  const spec = { kind, id };
+  if (replace) S.tabs[S.activeTab] = spec;
+  else { S.tabs.push(spec); S.activeTab = S.tabs.length - 1; }
+  persistTabs(); navigate(docRoute(kind, id));
+}
+function docRoute(kind, id){ return kind === 'inbox' ? '/inbox' : kind === 'settings' ? '/settings' : kind === 'feedback' ? '/feedback' : kind === 'file' ? '/file/' + encFilePath(id) : '/' + kind + '/' + id; }
+function openCaseTab(id, opts){ return openDoc('case', id, opts || {}); }
+function openInboxTab(){ if (S.tabs.findIndex(t => t.kind === 'inbox') < 0){ S.tabs.push({ kind:'inbox' }); persistTabs(); } navigate('/inbox'); }
+function openSettingsTab(){ if (S.tabs.findIndex(t => t.kind === 'settings') < 0){ S.tabs.push({ kind:'settings' }); persistTabs(); } navigate('/settings'); }
+function openFeedbackTab(){ if (S.tabs.findIndex(t => t.kind === 'feedback') < 0){ S.tabs.push({ kind:'feedback' }); persistTabs(); } TEL.event('ui.action', { area:'toolbar', action:'feedback-open' }); navigate('/feedback'); }
+function openBriefTab(id, opts){ return openDoc('brief', id, opts || {}); }
+function openReadoutTab(id, opts){ return openDoc('readout', id, opts || {}); }
+function openMatchupTab(id, opts){ return openDoc('matchup', id, opts || {}); }
+// A plain markdown file (context/*.md and any other .md not backed by a case/brief),
+// opened from the Explorer's file-tree view. `path` is the project-relative path.
+function openFileTab(path, opts){ return openDoc('file', path, opts || {}); }
+function activateTab(idx){ const t = S.tabs[idx]; if (!t) return; S.activeTab = idx; navigate(tabRoute(t)); }
+function closeTab(idx){
+  const wasActive = idx === S.activeTab;
+  S.tabs.splice(idx, 1);
+  if (idx < S.activeTab) S.activeTab--;
+  if (S.activeTab >= S.tabs.length) S.activeTab = S.tabs.length - 1;
+  persistTabs();
+  if (!S.tabs.length){ S.activeTab = -1; return navigate('/'); }
+  if (wasActive) navigate(tabRoute(S.tabs[S.activeTab])); else renderTabs();
+}
+function closeOthers(idx){ const keep = S.tabs[idx]; S.tabs = [keep]; S.activeTab = 0; persistTabs(); navigate(tabRoute(keep)); }
+function closeAll(){ S.tabs = []; S.activeTab = -1; persistTabs(); navigate('/'); }
+// Keep the tab bar in sync with the current route: focus the matching tab, else open one.
+// (Explicit opens go through openDoc; this covers intent-less route changes — deep links,
+// browser back/forward — where a new tab is the safe, non-destructive default.)
+function syncTabsToRoute(){
+  const r = route();
+  const spec = r.name === 'inbox' ? { kind:'inbox' } : r.name === 'settings' ? { kind:'settings' } : r.name === 'feedback' ? { kind:'feedback' } : r.name === 'case' ? { kind:'case', id:r.id } : r.name === 'brief' ? { kind:'brief', id:r.id } : r.name === 'readout' ? { kind:'readout', id:r.id } : r.name === 'matchup' ? { kind:'matchup', id:r.id } : r.name === 'file' ? { kind:'file', id:r.id } : null;
+  if (!spec){ if (S.activeTab !== -1){ S.activeTab = -1; persistTabs(); } renderTabs(); return; }
+  const prevActive = S.activeTab;
+  let idx = S.tabs.findIndex(t => t.kind === spec.kind && (['inbox', 'settings', 'feedback'].includes(spec.kind) || t.id === spec.id));
+  if (idx < 0){
+    S.tabs.push(spec); idx = S.tabs.length - 1;
+    S.activeTab = idx; persistTabs();
+  } else {
+    S.activeTab = idx;
+    if (idx !== prevActive) persistTabs();               // remember which tab is focused, per project
+  }
+  renderTabs();
+}
+
+// ---- routing --------------------------------------------------------------
+// The project slug prefix for in-app URLs (`/p/<slug>`). Every route lives under it so
+// multiple projects can be open in separate browser tabs at once. Empty until a project loads.
+function PP(){ const s = S.projectSlug || (S.project && S.project.id); return s ? '/p/' + encodeURIComponent(s) : ''; }
+// File paths keep their slashes in the URL (`/file/a/b/c.md`) — far prettier than one
+// percent-encoded blob (`/file/a%2Fb%2Fc.md`) — but each SEGMENT is still encoded so a space,
+// `#`, `?` or `%` in a name never breaks the path. `decFilePath` is the exact inverse.
+const encFilePath = (path) => String(path || '').split('/').map(encodeURIComponent).join('/');
+const decFilePath = (seg) => String(seg || '').split('/').map(s => { try { return decodeURIComponent(s); } catch { return s; } }).join('/');
+function route(){
+  let p = location.pathname;
+  let project = null;
+  const m = p.match(/^\/p\/([^/]+)(\/.*)?$/);          // /p/<slug>/<inner> → strip the project prefix
+  if (m){ project = decodeURIComponent(m[1]); p = m[2] || '/'; }
+  let r;
+  if (p.startsWith('/case/')) r = { name:'case', id: decodeURIComponent(p.slice(6)) };
+  else if (p.startsWith('/brief/')) r = { name:'brief', id: decodeURIComponent(p.slice(7)) };
+  else if (p.startsWith('/readout/')) r = { name:'readout', id: decodeURIComponent(p.slice(9)) };
+  else if (p.startsWith('/matchup/')) r = { name:'matchup', id: decodeURIComponent(p.slice(9)) };
+  else if (p.startsWith('/file/')) r = { name:'file', id: decFilePath(p.slice(6)) };
+  else if (p === '/inbox') r = { name:'inbox' };
+  else if (p === '/settings') r = { name:'settings' };
+  else if (p === '/feedback') r = { name:'feedback' };
+  else r = { name:'home' };
+  r.project = project;
+  return r;
+}
+// Route builders return the INNER path (`/inbox`, `/case/x`); navigate() prepends the current
+// project prefix so callers never have to thread it through.
+function navigate(path){ const full = path.startsWith('/p/') ? path : (PP() + path); if (location.pathname !== full) history.pushState({}, '', full); render(); }
+// Back/forward: within a project, re-render; across projects (the URL slug changed), re-boot
+// so the other project's tabs/tree/state load. Guards against a no-op when nothing changed.
+window.addEventListener('popstate', () => {
+  const rp = route().project;
+  if (rp && S.project && rp !== S.project.id){ S.projectSlug = rp; S.tabs = []; S.activeTab = -1; S.query = ''; boot(); }
+  else render();
+});
+
+let lastTelemetryPage = null;
+async function render(){
+  const r = route();
+  if (r.name === 'home'){
+    // No standalone empty page: home always resolves to the Inbox (opening its tab if needed).
+    return openInboxTab();
+  }
+  const telemetryPage = ['inbox', 'settings', 'feedback'].includes(r.name) ? r.name : null;
+  if (telemetryPage !== lastTelemetryPage){
+    lastTelemetryPage = telemetryPage;
+    if (telemetryPage) TEL.event('ui.page.viewed', { page:telemetryPage });
+  }
+  renderSidebar();
+  syncTabsToRoute();
+  if (r.name === 'inbox') return renderInbox();
+  if (r.name === 'settings') return renderSettings();
+  if (r.name === 'feedback') return renderFeedback();
+  if (r.name === 'brief') return openBrief(r.id);
+  if (r.name === 'readout') return openReadout(r.id);
+  if (r.name === 'matchup') return openMatchup(r.id);
+  if (r.name === 'file') return openFile(r.id);
+  if (r.name === 'case') return openCase(r.id);
+}
+
+// ---- inbox: a recent-activity overview ------------------------------------
+// With no manual case states, the inbox is a calm recency view: the most recently
+// updated cases and the latest briefs — the two things a returning user wants to resume.
+const caseTs = (s) => s.last_stage_at || s.updated_at || s.created_at || 0;
+// A short, human status for a case row — derived from its funnel position (no manual states).
+// Note: 'done' means the analysis reached launch — NOT that a prototype exists. The prototype is
+// a recomputable companion detected by file presence (S.proto.exists), never a case state.
+function caseStateLabel(s){
+  switch (s.state) {
+    case 'done': return 'Analysis complete';
+    case 'error': return 'A stage needs a re-run';
+    case 'new': return 'Draft — not yet analysed';
+    default: return 'Being generated…';   // score / shape / launch — mid-funnel
+  }
+}
+// The inbox is the ONE Deliberate-aware surface, and it is driven by the declarative kind
+// registry (S.kinds from /api/state): each kind with an `inbox` block contributes a section,
+// pulling recent items from its `source` collection and rendering them with a small generic
+// widget vocabulary (badge: 'score'|'brief', subtitle: a field | 'const:<text>'). Adding a
+// document type = adding a registry entry; no bespoke inbox code.
+function inboxTs(x){ return x.last_stage_at || x.updated_at || x.created_at || 0; }
+function inboxLabel(source, x){ return source === 'briefs' ? briefLabel(x) : source === 'readouts' ? readoutLabel(x) : source === 'matchups' ? matchupLabel(x) : (x.title || 'Untitled'); }
+function inboxSubtitle(spec, x){
+  if (!spec) return '';
+  if (spec.startsWith('const:')) return esc(spec.slice(6));
+  if (spec === 'state') return esc(caseStateLabel(x));
+  return esc(String(x[spec] ?? ''));
+}
+function inboxBadge(kind, x){
+  if (kind === 'score'){
+    const v = x.score != null ? verdict(x.score) : null;
+    return v
+      ? `<span class="pill ${v.cls}" title="${v.word} · ${v.label}" aria-label="Verdict ${v.word}, score ${v.label}">${v.label}</span>`
+      : `<span class="pill neutral" title="Not scored yet" aria-label="Not scored yet">—</span>`;
+  }
+  if (kind === 'brief') return `<span class="pill brief" title="Landscape brief" aria-label="Landscape brief">${iconEl(ICON.brief)}</span>`;
+  if (kind === 'readout') return `<span class="pill readout" title="Product readout" aria-label="Product readout">${iconEl(ICON.readout)}</span>`;
+  if (kind === 'matchup') return `<span class="pill matchup" title="Competitor matchup" aria-label="Competitor matchup">${iconEl(ICON.matchup)}</span>`;
+  return '';
+}
+function renderSettings(){
+  setTopActions('');
+  const pref = themePref();
+  const themes = [
+    { value:'', label:'System', icon:'auto', note:'Follow this device' },
+    { value:'light', label:'Light', icon:'sun', note:'Always light' },
+    { value:'dark', label:'Dark', icon:'moon', note:'Always dark' },
+  ];
+  renderMain(`<div class="settings-wrap"><section class="settings-page" id="settings-page">
+    <header class="settings-head"><h1>Settings</h1><p>Preferences apply across all projects on this device.</p></header>
+    <section class="settings-section" aria-labelledby="appearance-title">
+      <div class="settings-copy"><h2 id="appearance-title">Appearance</h2><p>Choose how Sonorance looks.</p></div>
+      <div class="theme-options" role="radiogroup" aria-label="Theme">
+        ${themes.map((t) => `<button type="button" class="theme-option ${pref === t.value ? 'selected' : ''}" role="radio" aria-checked="${pref === t.value}" tabindex="${pref === t.value ? 0 : -1}" data-theme-value="${t.value}">
+          <span class="theme-icon">${iconEl(ICON[t.icon])}</span><span><strong>${t.label}</strong><small>${t.note}</small></span>
+        </button>`).join('')}
+      </div>
+    </section>
+    <section class="settings-section" aria-labelledby="privacy-title">
+      <div class="settings-copy"><h2 id="privacy-title">Privacy</h2><p>Privacy is foundational to Sonorance. We collect only a small amount of anonymous, content-free data—feature usage, performance, and redacted error signals—so we can understand what helps, fix issues, and keep improving the product.</p></div>
+      <label class="settings-toggle">
+        <span><strong>Share anonymous usage data</strong><small>Sonorance never logs your work—not even project, file, or folder names. Document contents, paths, prompts, and completions always stay private.</small></span>
+        <input id="telemetry-setting" type="checkbox" ${S.telemetry && S.telemetry.enabled === false ? '' : 'checked'}>
+        <i aria-hidden="true"></i>
+      </label>
+    </section>
+  </section></div>`);
+  const themeButtons = [...document.querySelectorAll('[data-theme-value]')];
+  themeButtons.forEach((btn, index) => btn.addEventListener('click', () => {
+    const value = btn.dataset.themeValue;
+    applyTheme(value);
+    themeButtons.forEach((option) => { option.tabIndex = option === btn ? 0 : -1; });
+    TEL.event('ui.action', { area:'settings', action:'theme-change', value:value || 'system' });
+  }));
+  themeButtons.forEach((btn, index) => btn.addEventListener('keydown', (event) => {
+    let next = null;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (index + 1) % themeButtons.length;
+    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (index - 1 + themeButtons.length) % themeButtons.length;
+    else if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = themeButtons.length - 1;
+    if (next == null) return;
+    event.preventDefault();
+    themeButtons[next].click();
+    themeButtons[next].focus();
+  }));
+  const telemetry = $('#telemetry-setting');
+  telemetry.addEventListener('change', async () => {
+    const requested = telemetry.checked;
+    telemetry.disabled = true;
+    const enabled = await setTelemetryConsent(requested);
+    telemetry.checked = enabled;
+    telemetry.disabled = false;
+    if (enabled !== requested) toast('Could not update telemetry preference.');
+  });
+}
+function renderInbox(){
+  setTopActions('');
+  const hasKinds = (S.kinds || []).some(k => k.inbox);
+  const sections = (S.kinds || []).filter(k => k.inbox).map(k => ({
+    spec: k.inbox,
+    items: [...(S[k.inbox.source] || [])].sort((a, b) => inboxTs(b) - inboxTs(a)).slice(0, k.inbox.limit || 5),
+  }));
+  const total = sections.reduce((n, s) => n + s.items.length, 0);
+  if (!total){
+    // First run should offer an explicit next step, not just a hint. The in-app action everywhere
+    // is "New Markdown file"; on a Deliberate host the Case is created in the coding agent, so its
+    // command is offered as a one-click COPY beside the button (the real path), never the only one.
+    const newFileBtn = `<button type="button" class="tbtn" data-hero-newfile>${iconEl(ICON.newfile)}New Markdown file</button>`;
+    const caseCopy = hasKinds
+      ? `<button type="button" class="tbtn ghost" data-hero-copy='/deliberate case "<idea>"' title="Copy the command to start a Case in your coding agent">${iconEl(ICON.copy)}Copy <code>/deliberate case</code></button>`
+      : '';
+    const out = renderMain(brandedEmpty(
+      hasKinds ? 'Start a Case, or draft a note.' : 'A calm home for your Markdown.',
+      hasKinds
+        ? 'A Case runs the frame → score → shape pipeline in your coding agent. Or draft any Markdown here.'
+        : 'Create a note below, or open an existing file from the Explorer.',
+      `${newFileBtn}${caseCopy}`));
+    const nf = $('#main [data-hero-newfile]'); if (nf) nf.addEventListener('click', () => promptNewFile(S.treeBase || ''));
+    const cc = $('#main [data-hero-copy]');
+    if (cc) cc.addEventListener('click', async () => {
+      try { await navigator.clipboard.writeText(cc.dataset.heroCopy); showToast('Command copied to clipboard.'); }
+      catch { showToast('Copy failed — the command is: ' + cc.dataset.heroCopy); }
+    });
+    return out;
+  }
+
+  const row = (spec, x) => {
+    const openKind = spec.source === 'briefs' ? 'brief' : spec.source === 'readouts' ? 'readout' : spec.source === 'matchups' ? 'matchup' : 'case';
+    return `<button class="qrow" data-open-kind="${openKind}" data-open-id="${x.id}">
+      ${inboxBadge(spec.badge, x)}
+      <span class="qmain"><span class="qt">${esc(inboxLabel(spec.source, x))}</span><span class="qr">${inboxSubtitle(spec.subtitle, x)}</span></span>
+      <span class="qtime">${esc(relTime(inboxTs(x)))}</span>
+      ${iconEl(ICON.chevron).replace('class="ico"','class="ico go"')}
+    </button>`;
+  };
+  const section = (s) => s.items.length ? `<h2 class="qsec">${esc(s.spec.section)}</h2>${s.items.map(x => row(s.spec, x)).join('')}` : '';
+  renderMain(
+    `<div class="qwrap"><div class="queue">
+       <h1>Inbox</h1><p class="sub">Your most recently updated cases and briefs.</p>
+       ${sections.map(section).join('')}
+     </div></div>`);
+  $('#main').querySelectorAll('[data-open-kind]').forEach(b => b.addEventListener('click', () => {
+    if (b.dataset.openKind === 'brief') openBriefTab(b.dataset.openId); else if (b.dataset.openKind === 'readout') openReadoutTab(b.dataset.openId); else if (b.dataset.openKind === 'matchup') openMatchupTab(b.dataset.openId); else openCaseTab(b.dataset.openId);
+  }));
+}
+
+// ---- case detail ----------------------------------------------------------
+// The case currently open (from the state list), or null.
+function currentCase(){ return S.cases.find(s => s.id === S.caseId) || null; }
+// A case is "being generated" while its analysis is mid-funnel — frame is done but the
+// agent is still appending stages (state is a pre-gate stage: score / shape / launch). Its
+// record is then read-only in the workbench so a hand-edit can't collide with the write in
+// flight. A brand-new draft ('new') and a complete case ('done') edit freely.
+const GENERATING_STATES = new Set(['score', 'shape', 'launch']);
+function caseGenerating(){ const c = currentCase(); return !!(c && GENERATING_STATES.has(c.state)); }
+// Any record surface that must not be edited in place: a brief, a plain file, or a
+// still-generating case. Gates the live-editor caret/source reveal + autosave.
+function docReadOnly(){ return !!(S.brief || S.readout || S.matchup || caseGenerating()); }
+async function openCase(id){
+  flushSave();                                          // persist the outgoing case's pending edit before we switch
+  S.caseId = id; S.dirty = false; S.saving = false; S.proto = null; S.comments = []; S.cNavIdx = -1; S.recFile = null; S.brief = null; S.readout = null; S.matchup = null; S.file = null;
+  renderSidebar();
+  let rec;
+  try { rec = await api('GET', '/api/record?id=' + encodeURIComponent(id)); } catch { rec = { error:'offline' }; }
+  if (!rec || rec.error){ setTopActions(''); return renderMain(emptyState('Case not found', 'This case has no record here.')); }
+  S.rec = rec; S.isGit = !!rec.isGit; S.proto = rec.proto || null; S.recFile = rec.file || null;
+  // Always segment the real file text so the record's frontmatter (id/state/gate/…) and
+  // title round-trip byte-for-byte — even a not-yet-analysed case IS an analysis.md now, so
+  // caseing an empty block would clobber that metadata on the first autosave.
+  S.items = rec.text ? segment(rec.text) : [{ kind:'block', lines:[''] }];
+  // One combined view: the record reads as rendered Markdown and reveals a block's
+  // raw source in place when the caret enters it. Diff is the
+  // only other surface (git only).
+  S.mode = defaultRecordMode();
+  paintCase();
+  loadComments(rec.file);
+}
+// Load a file's persisted in-record comments (annotations the reader left, anchored to
+// spans of the file). Works for any file — a case record or a brief. Only OPEN ones show.
+async function loadComments(file){
+  if (!file) return;
+  const t = await api('GET', '/api/comments?file=' + encodeURIComponent(file));
+  if (S.recFile !== file) return;                   // the user moved on while we fetched
+  if (t && t.error === 'endpoint-missing'){ maybeStale(); return; }   // stale server — warn
+  if (!t || t.error) return;
+  S.comments = t.comments || [];
+  renderComments();
+}
+
+// ---- brief detail (read-only landscape report) ----------------------------
+// A brief is a project-scoped landscape report, not a case record: it reads like one
+// (rendered Markdown + a table-of-contents rail) but has no verdict, prototype, diff,
+// or editing — it's regenerated in the coding agent, and the file is the user's to edit.
+const stripFrontmatter = (text) => { const m = String(text || '').match(/^---\n[\s\S]*?\n---\n?/); return m ? text.slice(m[0].length) : text; };
+async function openBrief(id){
+  flushSave();                                          // persist any outgoing case edit before switching
+  S.caseId = null; S.brief = null; S.readout = null; S.matchup = null; S.file = null; S.mode = 'doc'; S.comments = []; S.cNavIdx = -1; S.recFile = null;
+  renderSidebar();
+  let rec;
+  try { rec = await api('GET', '/api/brief?id=' + encodeURIComponent(id)); } catch { rec = { error:'offline' }; }
+  const r = route(); if (r.name === 'brief' && r.id !== id) return;   // the user moved on while we fetched
+  if (!rec || rec.error){ setTopActions(''); return renderMain(emptyState('Brief not found', 'This brief has no record here.')); }
+  S.brief = { id, ...rec }; S.recFile = rec.file || null; S.isGit = !!rec.isGit; S.mode = defaultRecordMode();
+  paintBrief();
+  loadComments(rec.file);
+}
+// ---- generic markdown file (editable live-preview) ------------------------
+// Any `.md` opened from the Explorer's file tree. It edits like a case record — the same
+// live-preview surface + autosave — but keyed by PATH (saved via POST /api/file), with its
+// YAML frontmatter preserved as a hidden block. Standalone, EVERY document is one of these.
+async function openFile(path){
+  flushSave();
+  S.caseId = null; S.brief = null; S.readout = null; S.matchup = null; S.file = null; S.mode = 'doc'; S.comments = []; S.cNavIdx = -1; S.recFile = null;
+  S.dirty = false; S.saving = false;
+  renderSidebar();
+  let rec;
+  try { rec = await api('GET', '/api/file?path=' + encodeURIComponent(path)); } catch { rec = { error:'offline' }; }
+  const r = route(); if (r.name === 'file' && r.id !== path) return;   // moved on while fetching
+  if (!rec || rec.error){
+    // A deleted file (present in the git change set as removed) no longer exists on disk, so it
+    // can't be read/edited — but its removal is still reviewable. Open it straight into a
+    // read-only Diff instead of a dead "not found" (reached from the Explorer's diff mode).
+    if (isDeletedChange(path)){
+      S.file = { path, text: '', deleted: true }; S.recFile = path; S.isGit = true; S.mode = 'diff';
+      S.items = [{ kind:'block', lines:[''] }];
+      paintFile();
+      return;
+    }
+    setTopActions(''); return renderMain(emptyState('File not found', 'This file isn’t in the folder.'));
+  }
+  S.file = { path, ...rec }; S.recFile = rec.path || null; S.isGit = !!rec.isGit; S.mode = defaultRecordMode();
+  S.items = rec.text ? segment(rec.text) : [{ kind:'block', lines:[''] }];
+  paintFile();
+  loadComments(rec.path);
+}
+function fileControls(){ return `${commentNav()}`; }
+function paintFile(){
+  if (S.file && S.file.deleted) S.mode = 'diff';         // a removed file is diff-only (nothing to edit)
+  renderMain(recordBodyMarkup());
+  setTopActions(fileControls());
+  wireCaseControls();
+  renderLive(); buildToc(); renderComments();
+  if (S.mode === 'diff') loadDiffBase().then(refreshDiffDecorations);
+  updateSaveDot();
+}
+function briefControls(){
+  // A brief needs no tab-bar badge: it's read-only and its first paragraph already names the
+  // period it covers, so a "Brief · <dates>" pill would just be redundant chrome. The comment
+  // navigator lives in the canvas command bar (#docdiff), so there are no tab-bar controls.
+  return '';
+}
+function paintBrief(){
+  renderMain(recordBodyMarkup());
+  setTopActions(briefControls());
+  wireCaseControls();                                   // wires the comments prev/next navigator (no-ops for absent controls)
+  const c = $('#canvas'); if (!c) return;
+  const art = document.createElement('article'); art.className = 'doc'; art.id = 'doc';
+  const text = S.brief && S.brief.exists ? stripFrontmatter(S.brief.text) : '';
+  const empty = !text.trim();
+  art.innerHTML = empty ? `<div class="banner">${iconEl(ICON.brief)}<div>This brief is empty. Regenerate it in your coding agent with <code>/deliberate brief</code>.</div></div>`
+    : renderMarkdown(text);
+  // A brief is read-only here (regenerated by the agent, not edited in place), so its task
+  // checkboxes are shown for reference but disabled — there is no source model to toggle.
+  art.querySelectorAll('.md-taskbox').forEach(b => { b.disabled = true; b.style.cursor = 'default'; });
+  c.innerHTML = ''; c.appendChild(art);
+  reindexHeadings(art);
+  buildToc();
+  if (!empty){ wireCommentAffordances(art); renderComments(); }   // briefs are annotatable too
+  if (S.mode === 'diff') loadDiffBase().then(refreshDiffDecorations);
+}
+// ---- Product Readout detail (read-only metrics + customer evidence) -------
+async function openReadout(id){
+  flushSave();
+  S.caseId = null; S.brief = null; S.readout = null; S.matchup = null; S.file = null; S.mode = 'doc'; S.comments = []; S.cNavIdx = -1; S.recFile = null;
+  renderSidebar();
+  let rec;
+  try { rec = await api('GET', '/api/readout?id=' + encodeURIComponent(id)); } catch { rec = { error:'offline' }; }
+  const r = route(); if (r.name === 'readout' && r.id !== id) return;
+  if (!rec || rec.error){ setTopActions(''); return renderMain(emptyState('Readout not found', 'This Product Readout has no record here.')); }
+  S.readout = { id, ...rec }; S.recFile = rec.file || null; S.isGit = !!rec.isGit; S.mode = defaultRecordMode();
+  paintReadout();
+  loadComments(rec.file);
+}
+function readoutControls(){ return ''; }
+function paintReadout(){
+  renderMain(recordBodyMarkup());
+  setTopActions(readoutControls());
+  wireCaseControls();
+  const c = $('#canvas'); if (!c) return;
+  const art = document.createElement('article'); art.className = 'doc'; art.id = 'doc';
+  const text = S.readout && S.readout.exists ? stripFrontmatter(S.readout.text) : '';
+  const empty = !text.trim();
+  art.innerHTML = empty ? `<div class="banner">${iconEl(ICON.readout)}<div>This readout is empty. Regenerate it in your coding agent with <code>/deliberate readout</code>.</div></div>`
+    : renderMarkdown(text);
+  art.querySelectorAll('.md-taskbox').forEach(b => { b.disabled = true; b.style.cursor = 'default'; });
+  c.innerHTML = ''; c.appendChild(art);
+  reindexHeadings(art);
+  buildToc();
+  if (!empty){ wireCommentAffordances(art); renderComments(); }
+  if (S.mode === 'diff') loadDiffBase().then(refreshDiffDecorations);
+}
+// ---- matchup detail (read-only single-competitor head-to-head) ------------
+// A matchup reads exactly like a brief — a project-scoped, read-only rendered report with a
+// table-of-contents rail and no editing (it's regenerated in the coding agent, refresh-in-place
+// per competitor). It shares the brief's reading surface + comment machinery; only its fetch
+// key (competitor-keyed id), empty-state copy and icon differ.
+async function openMatchup(id){
+  flushSave();                                          // persist any outgoing case edit before switching
+  S.caseId = null; S.brief = null; S.readout = null; S.matchup = null; S.file = null; S.mode = 'doc'; S.comments = []; S.cNavIdx = -1; S.recFile = null;
+  renderSidebar();
+  let rec;
+  try { rec = await api('GET', '/api/matchup?id=' + encodeURIComponent(id)); } catch { rec = { error:'offline' }; }
+  const r = route(); if (r.name === 'matchup' && r.id !== id) return;   // the user moved on while we fetched
+  if (!rec || rec.error){ setTopActions(''); return renderMain(emptyState('Matchup not found', 'This matchup has no record here.')); }
+  S.matchup = { id, ...rec }; S.recFile = rec.file || null; S.isGit = !!rec.isGit; S.mode = defaultRecordMode();
+  paintMatchup();
+  loadComments(rec.file);
+}
+function matchupControls(){
+  // Like a brief, a matchup is read-only and its first paragraph already names the competitor
+  // and the "As of" date it captures, so no tab-bar badge is needed. The comment navigator lives
+  // in the canvas command bar (#docdiff).
+  return '';
+}
+function paintMatchup(){
+  renderMain(recordBodyMarkup());
+  setTopActions(matchupControls());
+  wireCaseControls();                                   // wires the comments prev/next navigator (no-ops for absent controls)
+  const c = $('#canvas'); if (!c) return;
+  const art = document.createElement('article'); art.className = 'doc'; art.id = 'doc';
+  const text = S.matchup && S.matchup.exists ? stripFrontmatter(S.matchup.text) : '';
+  const empty = !text.trim();
+  const competitor = (S.matchup && S.matchup.competitor) || '<competitor>';
+  art.innerHTML = empty ? `<div class="banner">${iconEl(ICON.matchup)}<div>This matchup is empty. Regenerate it in your coding agent with <code>/deliberate matchup ${esc(competitor)}</code>.</div></div>`
+    : renderMarkdown(text);
+  // A matchup is read-only here (regenerated by the agent, not edited in place), so its task
+  // checkboxes are shown for reference but disabled — there is no source model to toggle.
+  art.querySelectorAll('.md-taskbox').forEach(b => { b.disabled = true; b.style.cursor = 'default'; });
+  c.innerHTML = ''; c.appendChild(art);
+  reindexHeadings(art);
+  buildToc();
+  if (!empty){ wireCommentAffordances(art); renderComments(); }   // matchups are annotatable too
+  if (S.mode === 'diff') loadDiffBase().then(refreshDiffDecorations);
+}
+// corner, in #docdiff), not the tab bar — see caseCanvasControls / renderCanvasDiff. The tab
+// bar keeps only the generic editor affordances: the comments navigator + save state.
+function caseControls(){
+  const cnav = commentNav();
+  if (caseGenerating())
+    return `${cnav}<span class="rochip" title="Being generated by your agent — editing is disabled to avoid conflicts">${iconEl(ICON.queue)}Read-only</span>`;
+  return `${cnav}<span class="savedot" id="savedot"><i></i><span id="savelbl"></span></span>`;
+}
+// The verdict pill (jump-to-reasoning when the score section exists). Shared by the canvas
+// corner controls.
+function verdictPill(v){
+  if (!v) return '';
+  const jump = v.cls !== 'neutral' && reasoningInSource();
+  return jump
+    ? `<button type="button" class="pill jump ${v.cls}" data-scorejump title="${v.word} · ${v.label} — jump to score reasoning" aria-label="Verdict ${v.word}, score ${v.label} — jump to score reasoning">${v.label}</button>`
+    : `<span class="pill ${v.cls}" title="${v.word} · score ${v.label}" aria-label="Verdict ${v.word}, score ${v.label}">${v.label}</span>`;
+}
+// The case-specific controls that float in the canvas corner (#docdiff): the verdict pill and the
+// View-/Build-prototype button. The prototype is a file, not a state: whenever the case's prototype
+// HTML exists (S.proto.exists) we show **View prototype** — regardless of verdict (a rejected case
+// can still have a prototype worth opening); otherwise, once the analysis is complete ('done'), we
+// offer **Build prototype**. Neither reads a 'prototype' case state (there is none — it's decoupled).
+function caseCanvasControls(){
+  const kase = S.cases.find(s => s.id === S.caseId);
+  const v = kase && kase.score != null ? verdict(kase.score) : null;
+  const pill = verdictPill(v);
+  if (caseGenerating()) return pill;                     // prototyping doesn't apply mid-generation
+  const proto = S.proto && S.proto.exists
+    ? `<a class="tbtn" data-proto ${S.proto.external ? `href="${esc(S.proto.url)}" target="_blank" rel="noopener"` : 'role="button" tabindex="0"'}>${iconEl(ICON.external)}View prototype</a>` : '';
+  const build = !proto && kase && kase.state === 'done'
+    ? `<button type="button" class="tbtn ghost" data-buildproto title="Build an interactive prototype for this case">${iconEl(ICON.proto)}Build prototype</button>` : '';
+  return `${pill}${proto}${build}`;
+}
+// The comments navigator (prev / count / next) — shared by case and brief controls.
+// The comments count + prev/next now live in the rail header (renderCommentPanel), not the tab
+// bar — one home, and it frees tab-bar space. Kept as a no-op so the controls builders still call it.
+function commentNav(){ return ''; }
+function setTopActions(html){ const t = $('#topactions'); if (t) t.innerHTML = html || ''; }
+// The record canvas layout — a centred reading canvas + a sticky rail (table of contents). ONE
+// layout for BOTH the live document AND the rendered diff, so toggling Document ⇄ Diff only swaps
+// what fills #canvas (never the surrounding frame): the canvas stays the same width and position,
+// the corner controls stay put, and the rail persists — a seamless switch, not a separate screen.
+function recordBodyMarkup(){
+  return `<div class="casebody"><div class="canvaswrap"><div class="canvas" id="canvas"></div><div class="cgutter" id="cgutter" aria-hidden="true"></div></div>
+      <aside class="rail" id="rail"><nav class="toc" id="toc" aria-label="On this page"></nav></aside>
+      <button class="secfab" id="secfab" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="secsheet"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h10"/></svg>Sections</button>
+      <div class="secsheet" id="secsheet" role="menu" aria-label="Jump to section"></div></div>`;
+}
+function paintCase(){
+  renderMain(recordBodyMarkup());
+  setTopActions(caseControls());
+  wireCaseControls();
+  renderLive(); buildToc(); renderComments();
+  if (S.mode === 'diff') loadDiffBase().then(refreshDiffDecorations);
+  updateSaveDot();
+}
+function wireCaseControls(){
+  renderCanvasDiff();                                     // verdict pill + prototype + Document⇄Diff toggle live in the canvas corner
+}
+// Discard ALL uncommitted changes in the open record's file — destructive, so it goes
+// through a confirmation dialog. On confirm: revert on the server, refresh git status, and
+// reload the record (and any open case editor) so the workbench reflects the restored file.
+async function confirmDiscard(){
+  const file = recFile(); if (!file) return;
+  const ok = await confirmDialog({
+    title: 'Discard changes?',
+    body: `This permanently discards all uncommitted changes in <b>${esc(baseName(file))}</b> and restores it to the last commit. This can’t be undone.`,
+    confirmLabel: 'Discard changes', danger: true,
+  });
+  if (!ok) return;
+  const r = await api('POST', '/api/discard', { path: file });
+  if (!r || r.error){ showToast(r && r.error === 'endpoint-missing' ? `Editor is out of date — restart ${SERVE_CMD}.` : 'Could not discard changes.'); return; }
+  await loadGit();
+  showToast('Changes discarded — file restored to the last commit.');
+  // If the discarded file dropped out of the change set while we're in diff mode, fall back
+  // to the document view; otherwise re-render the diff. Reload the record so edits reflect.
+  if (S.caseId) { await reloadRecord(); if (!recFileChanged() && S.mode === 'diff') setMode('doc'); else repaintRecord(); }
+  else { if (!recFileChanged() && S.mode === 'diff') S.mode = 'doc'; if (S.brief) await openBrief(S.brief.id); else if (S.readout) await openReadout(S.readout.id); else if (S.matchup) await openMatchup(S.matchup.id); else if (S.file) await openFile(S.file.path); }
+  renderSidebar();
+}
+// Toggle Document ⇄ Diff on the OPEN record WITHOUT re-rendering the document: the two modes share
+// the exact same DOM, so switching only adds/removes the change decorations (a background wash + the
+// inserted removed-block islands) over the already-rendered blocks. This means the unchanged content
+// never re-renders or re-animates — only the newly-revealed removed sections animate in, and the
+// green/red washes fade via the block's own background transition. A full paint is reserved for
+// opening a record / external edits (repaintRecord).
+function setMode(m){
+  const mode = m === 'diff' ? 'diff' : 'doc';
+  if (mode === S.mode) return;
+  flushSave(); hideAsk();
+  S.mode = mode;
+  TEL.event('ui.action', { area:'editor', action:'mode-change', value:mode });
+  renderCanvasDiff();                                    // reflect the toggle's pressed state + show/hide Discard
+  const settle = (animate) => { applyDiffDecorations(animate); buildToc(); reserveRailForControls(); if (S.file || S.caseId || S.brief || S.readout || S.matchup) renderComments(); };
+  if (mode === 'diff') loadDiffBase().then(() => settle(true));   // decorations animate IN on entry
+  else settle(false);                                             // leaving diff just clears the decorations
+}
+
+
+// The prototype link in analysis.md is a repo-relative path (./prototype/[<surface>/]index.html);
+// rewrite it to the daemon endpoint so it doesn't resolve against /case/<id>/. A surface slug (a
+// case can hold one prototype per primary surface) is carried through as the `surface` param.
+function protoUrl(surface){ const proj = (S.projectSlug || (S.project && S.project.id)); const q = proj ? '&project=' + encodeURIComponent(proj) : ''; const s = surface ? '&surface=' + encodeURIComponent(surface) : ''; return (!surface && S.proto && S.proto.external && S.proto.url) ? S.proto.url : ('/api/proto?id=' + encodeURIComponent(S.caseId) + q + s); }
+function openProto(surface){ TEL.event('ui.action', { area:'editor', action:'proto-open' }); try { window.open(protoUrl(surface), '_blank', 'noopener'); } catch {} }
+// No prototype yet: prototyping is an explicit, asked-for step the coding agent does —
+// so instead of a build button that can't work here, surface the exact `/deliberate`
+// command (with the case id filled in), one click to copy. Anchored under the button.
+function showBuildProto(anchor){
+  const kase = currentCase();
+  const ref = kase && kase.id != null ? String(kase.id) : '';
+  const cmd = `/deliberate case ${ref} prototype`.replace(/\s+/g, ' ').trim();
+  openCmdPopover(anchor, {
+    title: 'Build the prototype',
+    desc: 'Prototyping is an explicit step your coding agent runs. Paste this into your agent:',
+    command: cmd,
+  });
+}
+// A small popover that presents a runnable command with a one-click Copy — reuses the
+// `#menu` id so the existing closeMenu / click-away logic dismisses it.
+function openCmdPopover(anchor, { title, desc, command }){
+  closeMenu();
+  const m = document.createElement('div'); m.className = 'cmdpop'; m.id = 'menu'; m.setAttribute('role', 'dialog'); m.setAttribute('aria-label', title);
+  m.innerHTML = `<div class="cmdpop-t">${esc(title)}</div><p class="cmdpop-d">${esc(desc)}</p>
+    <div class="cmdpop-row"><code class="cmdpop-c">${esc(command)}</code>
+      <button class="cmdpop-copy" type="button" aria-label="Copy command">${iconEl(ICON.copy)}<span>Copy</span></button></div>`;
+  document.body.appendChild(m);
+  const r = anchor.getBoundingClientRect();
+  const w = m.offsetWidth || 340, vw = window.innerWidth;
+  m.style.left = Math.max(8, Math.min(r.right - w, vw - w - 8)) + 'px';
+  m.style.top = (r.bottom + 8) + 'px';
+  const copyBtn = m.querySelector('.cmdpop-copy');
+  copyBtn.addEventListener('click', async () => {
+    let ok = false;
+    try { await navigator.clipboard.writeText(command); ok = true; } catch { ok = copyFallback(command); }
+    showToast(ok ? 'Copied — paste it into your coding agent.' : 'Select the command and copy it manually.');
+    closeMenu();
+  });
+  copyBtn.focus();
+  setTimeout(() => document.addEventListener('mousedown', menuAway, true), 0);
+}
+// Clipboard fallback for insecure contexts / older browsers (execCommand copy on a temp textarea).
+function copyFallback(text){
+  try { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); const ok = document.execCommand('copy'); ta.remove(); return ok; }
+  catch { return false; }
+}
+function rewriteProtoLinks(el){
+  el.querySelectorAll('a[href]').forEach(a => {
+    const href = a.getAttribute('href') || '';
+    const m = href.match(/(?:^|\/)prototype\/(?:([^/]+)\/)?index\.html\/?$/) || (/(?:^|\/)prototype\/?$/.test(href) ? [] : null);
+    if (m){
+      const surface = (m && m[1]) || null;                 // a named primary surface, or the default (flat) prototype
+      const external = !surface && S.proto && S.proto.external;
+      a.setAttribute('href', protoUrl(surface)); a.setAttribute('target', '_blank'); a.setAttribute('rel', 'noopener');
+      if (!external){ a.dataset.protoLocal = '1'; a.addEventListener('click', (e) => { e.preventDefault(); openProto(surface); }); }
+    }
+  });
+}
+// Open a rendered Markdown link from the editor: an in-page `#anchor` scrolls to its heading,
+// everything else opens in a new tab.
+function openDocLink(a){
+  const href = a.getAttribute('href') || '';
+  if (!href || href === '#') return;
+  if (href.charAt(0) === '#'){ const t = document.getElementById(href.slice(1)); if (t) t.scrollIntoView({ behavior: prefersReduced() ? 'auto' : 'smooth', block: 'start' }); return; }
+  try { window.open(a.href, '_blank', 'noopener,noreferrer'); } catch { /* popup blocked */ }
+}
+// A block that renders to nothing but isn't blank — a standalone HTML-comment section marker
+// (machine state, like frontmatter). Kept in the document model, hidden from the reading view;
+// used by the comment line-mapping and the diff so those markers are never shown as content.
+const isMetaOnly = (src) => src.trim() !== '' && renderMarkdown(src).trim() === '';
+
+// ---- The editor (Tiptap / ProseMirror over Markdown) ----------------------
+// The record's Markdown is mounted into a Tiptap editor (see editor.mjs). Save,
+// ToC, comments and diff all route through the same seams the rest of the app
+// uses (currentSource / buildToc / renderComments / applyDiffDecorations), so
+// this section only owns the mount + the debounced structure refresh.
+//
+// Sonorance's value was never in re-implementing a Markdown editor — that's a
+// commodity. So the editing surface is a proven library (ProseMirror via
+// Tiptap) and the effort goes into what's actually differentiated: comments,
+// diff, the ToC, slash commands, and the agent workflow on top.
+let wysiwygCtl = null;
+// True while the user's caret is live in the editor — used to keep the file poll from
+// re-rendering (and so blowing away the caret / edit session) out from under an active edit.
+function wysiwygFocused(){ return !!(wysiwygCtl && wysiwygCtl.hasFocus()); }
+
+// Mount (or re-mount) the editor over the open record's Markdown. Read-only for briefs and for
+// a case the agent is mid-generating; editable otherwise. Contextual banners live OUTSIDE the
+// editor article (Tiptap owns its element's DOM) so they never collide with the ProseMirror view.
+function renderLive(){
+  const c = $('#canvas'); if (!c) return;
+  const ro = docReadOnly();
+  hideAsk(); hideTableTools();                            // clear any floating affordance from the previous surface
+  if (wysiwygCtl){ try { wysiwygCtl.destroy(); } catch {} wysiwygCtl = null; }
+  c.innerHTML = '';
+  if (caseGenerating()){
+    // The agent is writing this record (mid-funnel). Editing is locked so a hand-edit can't
+    // collide with the in-flight save; comments still work (they don't touch the file).
+    const b = document.createElement('div'); b.className = 'banner gen'; b.setAttribute('contenteditable', 'false');
+    b.innerHTML = `${iconEl(ICON.queue)}<div><strong>Being generated by your agent.</strong> Editing is disabled here while the analysis is written, to avoid conflicts — it unlocks when the case is complete. You can still add comments.</div>`;
+    c.appendChild(b);
+  } else if (S.rec && !S.rec.exists){
+    const b = document.createElement('div'); b.className = 'banner'; b.setAttribute('contenteditable', 'false');
+    b.innerHTML = `${iconEl(ICON.queue)}<div>No analysis has run yet — start typing to draft this record, or run the funnel in your coding agent (<code>/deliberate case</code>).${
+      S.rec.idea ? `<div style="margin-top:8px;color:var(--ink-faint)">Case: ${esc(S.rec.idea)}</div>` : ''}</div>`;
+    c.appendChild(b);
+  }
+  const art = document.createElement('article'); art.className = 'doc' + (ro ? ' ro' : ''); art.id = 'doc';
+  c.appendChild(art);
+  wysiwygCtl = createEditor({
+    element: art,
+    editable: !ro,
+    placeholder: 'Start writing…',
+    onChange: onWysiwygChange,
+    onCommentClick: (id) => focusComment(id),
+    onAtComment: openAtComment,
+    onLinkClick: (a, e) => { if (e) e.preventDefault(); openDocLink(a); },
+  });
+  wysiwygCtl.setMarkdown(reconstruct(S.items));
+  reindexHeadings(art);
+  buildToc();
+  renderComments();
+  wireCommentAffordances(art);
+  if (S.mode === 'diff') applyDiffDecorations();          // re-layer change highlights after a (re)mount
+}
+
+function onWysiwygChange(){
+  if (docReadOnly()) return;
+  S.dirty = true; updateSaveDot(); scheduleSave(); syncDocDiff();
+  scheduleDocStructure();                                 // ToC/heading-ids/diff are debounced off the keystroke (INP)
+}
+// The per-keystroke handler must stay O(1) beyond Tiptap's own work, so the O(document)
+// structure work — re-slugging headings, rebuilding the ToC, and re-serializing the doc to
+// re-derive the diff — is coalesced here and only runs once typing settles. INP is a hard
+// priority: this keeps a burst of keystrokes from rebuilding the ToC + diffing the whole doc on
+// every key. A short debounce (not rAF) so sustained typing doesn't diff every frame either.
+let docStructTimer = null;
+function scheduleDocStructure(){ clearTimeout(docStructTimer); docStructTimer = setTimeout(refreshDocStructure, 150); }
+function refreshDocStructure(){
+  clearTimeout(docStructTimer); docStructTimer = null;
+  if (!wysiwygCtl) return;
+  const art = $('#doc'); if (art) reindexHeadings(art);
+  buildToc();
+  if (S.mode === 'diff') applyDiffDecorations();
+}
+// Stable heading ids for the ToC / scroll-spy / thread anchoring — matched on the rendered
+// headings whether the surface is an editable case or a read-only brief.
+function reindexHeadings(art){
+  let n = 0;
+  art.querySelectorAll(':is(h1,h2,h3,h4,h5,h6)').forEach(h => { h.id = 'sec-' + n++; });
+}
+// The comment affordances (selection "Comment" bubble + the ＋ gutter add-handle) — wired on
+// every rendered surface (editable case or read-only brief/file) so any file is annotatable.
+function wireCommentAffordances(art){
+  const onUp = () => setTimeout(() => { maybeShowAsk(art); maybeShowTableTools(); }, 0);   // the Comment affordance works whether reading or editing
+  art.addEventListener('mouseup', onUp);
+  art.addEventListener('keyup', onUp);
+  art.addEventListener('mousemove', onDocHoverComment);        // the ＋ add-comment handle tracks the hovered block
+  const wrap = art.closest('.canvaswrap'); if (wrap && !wrap._cleave){ wrap._cleave = true; wrap.addEventListener('mouseleave', hideAddHandle); }
+}
+// Dismiss the selection affordances (Comment button / formatting bubble) when the
+// selection clears. Registered once, in boot().
+function onDocSelectionChange(){
+  if (askPop) return;                                   // composing — keep it up
+  maybeShowTableTools();                                // the caret may have moved in/out of a table
+  if (!askBtn && !bubbleBar) return;
+  const sel = window.getSelection && window.getSelection();
+  const q = sel && !sel.isCollapsed ? sel.toString().trim() : '';
+  if (!q) hideSelectionAffordance();                    // deselected → dismiss the bubble/button
+}
+// The current document's Markdown — the live editor's serialization (the on-disk truth).
+function currentSource(){
+  return wysiwygCtl ? wysiwygCtl.getMarkdown() : reconstruct(S.items);
+}
+function flushSave(){ if (S.saveTimer){ clearTimeout(S.saveTimer); S.saveTimer = null; } if (S.dirty) saveNow(); }
+function prefersReduced(){ try { return window.matchMedia('(prefers-reduced-motion:reduce)').matches; } catch { return false; } }
+
+// ---- table of contents + scroll-spy ---------------------------------------
+// Built from the rendered document's H2/H3 headings. The rail is sticky (always
+// visible while scrolling) and the entry for the section currently on screen is
+// highlighted. Falls back to one level (H2) if two won't fit the viewport.
+
+// The document's heading elements, in order, excluding those inside a REMOVED-block decoration
+// (`.diffdel`) since they aren't part of the resulting document. Re-queried LIVE on every call:
+// Tiptap owns the `#doc` subtree and both strips the `id` attributes we set on its headings AND
+// replaces the heading nodes themselves on re-render, so neither a `getElementById` nor a captured
+// element reference survives. Jump/scroll-spy therefore address headings by their ordinal position
+// (`data-hidx`) and resolve them against this live list at click/scroll time.
+function liveHeadings(){
+  const doc = $('#doc'); if (!doc) return [];
+  return [...doc.querySelectorAll('h2,h3')].filter(h => !h.closest('.diffdel'));
+}
+function buildToc(){
+  const toc = $('#toc'); if (!toc) return;
+  const abs = liveHeadings();
+  buildMobileSections(abs);
+  if (abs.length < 2){ toc.innerHTML = ''; return; }
+  let idxs = abs.map((_, i) => i);
+  const avail = (window.innerHeight || 800) - 130;
+  if (abs.length * 27 + 26 > avail){ const h2 = idxs.filter(i => abs[i].tagName === 'H2'); if (h2.length >= 2) idxs = h2; }
+  const withC = sectionsWithComments();
+  toc.innerHTML = `<div class="toc-h">On this page</div>` + idxs.map((ai, i) => { const h = abs[ai];
+    return `<a href="#${h.id}" data-idx="${i}" data-hidx="${ai}" class="lvl${h.tagName === 'H3' ? 3 : 2}">${esc(h.textContent)}${withC.has(h) ? '<span class="tdot" aria-label="has comments"></span>' : ''}</a>`; }).join('');
+  toc.querySelectorAll('a').forEach(a => a.addEventListener('click', (e) => {
+    e.preventDefault();
+    TEL.event('ui.action', { area: 'toc', action: 'toc-nav' });
+    const el = liveHeadings()[+a.dataset.hidx];
+    if (el) el.scrollIntoView({ behavior: prefersReduced() ? 'auto' : 'smooth', block: 'start' });
+  }));
+  wireScrollspy(idxs);
+  reserveRailForControls();
+}
+// Keep the floating corner controls (#docdiff: verdict pill + prototype + Document⇄Diff toggle)
+// from overlapping the table-of-contents rail. Rather than move the controls out of the corner,
+// reserve exactly enough space at the rail's top for the cluster to sit above the ToC — measured
+// from the live geometry, so it adapts to the cluster's width and to a wide prototype label that
+// wraps. No-op in diff view / on narrow layouts where the rail isn't shown.
+function reserveRailForControls(){
+  const rail = $('#rail'), dd = $('#docdiff');
+  if (!rail) return;
+  if (!dd || dd.hidden){ rail.style.paddingTop = ''; return; }
+  const r = rail.getBoundingClientRect(), d = dd.getBoundingClientRect();
+  const overlap = d.bottom - r.top;
+  // Pad the rail's top so its content (the ToC, or the comment hint + cards) starts BELOW the
+  // floating command bar rather than under it. Both the hint and the cards scroll normally, so this
+  // only needs to hold at the top of the scroll — no sticky offset to maintain.
+  rail.style.paddingTop = overlap > 0 ? `${Math.ceil(overlap) + 12}px` : '';
+}
+// The mobile spine: mirror the full outline into the floating Sections sheet so the
+// record stays navigable once the desktop rail collapses (≤1080px).
+function buildMobileSections(heads){
+  const fab = $('#secfab'), sheet = $('#secsheet');
+  document.body.classList.remove('sec-open');
+  document.body.classList.toggle('has-sections', heads.length >= 2);
+  if (fab) fab.setAttribute('aria-expanded', 'false');
+  if (!sheet){ return; }
+  if (heads.length < 2){ sheet.innerHTML = ''; return; }
+  sheet.innerHTML = heads.map((h, i) =>
+    `<a href="#${h.id}" data-idx="${i}" data-hidx="${i}" class="lvl${h.tagName === 'H3' ? 3 : 2}" role="menuitem">${esc(h.textContent)}</a>`).join('');
+  const close = () => { document.body.classList.remove('sec-open'); if (fab) fab.setAttribute('aria-expanded', 'false'); };
+  if (fab) fab.onclick = (e) => { e.stopPropagation(); const open = document.body.classList.toggle('sec-open'); fab.setAttribute('aria-expanded', open ? 'true' : 'false'); };
+  sheet.querySelectorAll('a').forEach(a => a.addEventListener('click', (e) => {
+    e.preventDefault();
+    const el = liveHeadings()[+a.dataset.hidx];
+    if (el) el.scrollIntoView({ behavior: prefersReduced() ? 'auto' : 'smooth', block: 'start' });
+    close();
+  }));
+  if (!S._secOutsideWired){
+    S._secOutsideWired = true;
+    document.addEventListener('click', (e) => {
+      if (!document.body.classList.contains('sec-open')) return;
+      if (e.target.closest('#secsheet') || e.target.closest('#secfab')) return;
+      close();
+    });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
+  }
+}
+let spyHandler = null;
+function wireScrollspy(idxs){
+  const main = $('#main'), toc = $('#toc'); if (!main || !toc) return;
+  if (spyHandler){ main.removeEventListener('scroll', spyHandler); spyHandler = null; }
+  const setActive = (j) => toc.querySelectorAll('a').forEach(a => a.classList.toggle('active', +a.dataset.idx === j));
+  let ticking = false;
+  const update = () => {
+    ticking = false;
+    const live = liveHeadings();
+    const top = main.getBoundingClientRect().top;
+    let active = 0;
+    // Address headings by ordinal position against the live list (Tiptap replaces the nodes and
+    // strips their ids). The last heading whose top has passed the reading line is the current one.
+    for (let j = 0; j < idxs.length; j++){ const el = live[idxs[j]]; if (!el) continue;
+      if (el.getBoundingClientRect().top - top <= 60) active = j; else break; }
+    setActive(active);
+  };
+  spyHandler = () => { if (!ticking){ ticking = true; (window.requestAnimationFrame || setTimeout)(update); } };
+  main.addEventListener('scroll', spyHandler, { passive: true });
+  update();
+}
+
+// ---- in-record comments (annotations) -------------------------------------
+// The reader leaves comments anchored to spans of ANY file (a case record OR a brief);
+// the agent works through them with `/deliberate address` and resolves each. Only OPEN
+// comments are shown — resolved ones disappear. Presentation lives in an OVERLAY over the
+// reading canvas (never inside the contenteditable #doc): an inline highlight per anchored
+// span, a left-gutter pin per commented block, and a click-to-open card.
+const openCmts = () => (S.comments || []).filter(c => c.status === 'open');
+// The block-level container of a node inside the document — a top-level Markdown block. On the
+// Tiptap surface the blocks are the direct children of `.ProseMirror`; on the read-only brief
+// surface (plain rendered HTML) they're the direct children of `#doc`. One helper so the comment
+// layer works identically on both surfaces.
+function blockOf(el){
+  const doc = $('#doc'); if (!doc || !el) return null;
+  const container = doc.querySelector('.ProseMirror') || doc;
+  let n = el.nodeType === 3 ? el.parentElement : el;
+  if (!n || !container.contains(n)) return null;
+  while (n && n.parentElement && n.parentElement !== container) n = n.parentElement;
+  return (n && n.parentElement === container) ? n : null;
+}
+// The rendered anchor of a comment: its highlighted span if found, else the heading
+// block that names its section (a fallback when the quote was edited away or spans blocks).
+function commentAnchor(c){
+  const doc = $('#doc'); if (!doc) return null;
+  const mark = doc.querySelector(`.cmark[data-comment="${c.id}"]`);
+  if (mark) return { el: mark, blk: blockOf(mark) };
+  const blk = commentBlockEl(c) || doc.querySelector(`.cmark-blk[data-comment="${c.id}"]`);   // the line-anchored / block-highlighted block
+  if (blk) return { el: blk, blk };
+  const head = c.anchor && c.anchor.heading && c.anchor.heading.trim();
+  if (head){
+    const h = [...doc.querySelectorAll('h1,h2,h3,h4,h5,h6')].find(x => x.textContent.trim() === head);
+    if (h) return { el: h, blk: blockOf(h) };
+  }
+  return null;
+}
+// The id of the nearest heading at or before an element — for ToC comment dots.
+function precedingHeading(el){
+  const doc = $('#doc'); if (!doc || !el) return null;
+  let head = null;
+  for (const h of doc.querySelectorAll('h1,h2,h3,h4,h5,h6')){
+    if (h === el || (h.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING)) head = h; else break;
+  }
+  return head;
+}
+// The set of ToC heading ELEMENTS that contain at least one open comment. Element-keyed (not
+// id-keyed) because Tiptap strips the heading ids after render; see buildToc.
+function sectionsWithComments(){
+  const set = new Set();
+  for (const c of openCmts()){ const a = commentAnchor(c); if (!a) continue; const h = precedingHeading(a.el); if (h) set.add(h); }
+  return set;
+}
+// The source line where S.items[i] begins, and the block index that owns a given source line —
+// the basis for LINE-anchored comments (a stable-ish reference that survives duplicate/removed
+// quote text far better than a bare content search; see commentAnchor).
+function blockStartLine(i){ let n = 0; for (let k = 0; k < i && k < S.items.length; k++) n += (S.items[k].lines || []).length; return n; }
+function blockIndexForLine(line){ let n = 0; for (let i = 0; i < S.items.length; i++){ const len = (S.items[i].lines || []).length; if (line >= n && line < n + len) return i; n += len; } return -1; }
+// The rendered .blk that a comment is anchored to, resolved robustly: prefer the block its saved
+// source LINE lands in (unambiguous even if the quote appears elsewhere or was edited away), then
+// its quote within that block. Legacy/brief comments (no line) fall back to a global quote search.
+function commentBlockEl(c){
+  const doc = $('#doc'); if (!doc) return null;
+  const line = c.anchor && typeof c.anchor.line === 'number' ? c.anchor.line : -1;
+  if (line >= 0){
+    if (S.caseId || S.file){ const bi = blockIndexForLine(line); if (bi >= 0){ const blk = doc.querySelector(`.blk[data-i="${bi}"]`); if (blk) return blk; } }
+    else if (S.brief || S.readout || S.matchup){ const idx = briefBlockAtLine(line); if (idx >= 0){ const blk = briefBlockKids()[idx]; if (blk) return blk; } }
+  }
+  return null;
+}
+// Comments are shown as ALWAYS-VISIBLE amber cards — in the right rail (mode 'rail', the default,
+// which replaces the ToC while there are open comments) or, when the rail can't fit (narrow window
+// / split-screen), inline in the document flow (mode 'inline'). There is no manual switch: the mode
+// follows the available width. The anchored span keeps a soft amber highlight in both modes.
+function commentModeOn(){ return railAvailable() ? 'rail' : 'inline'; }
+function railAvailable(){ try { return window.innerWidth > 1080; } catch { return true; } }
+function renderComments(){
+  const doc = $('#doc'); if (!doc) return;
+  doc.querySelectorAll('.cnote-island').forEach(el => el.remove());   // clear stale inline islands (incl. the hint island) before re-marking
+  if (wysiwygCtl) wysiwygCtl.setComments(openCmts());                 // highlights via ProseMirror decorations (never mutate the PM DOM)
+  const open = openCmts();
+  ensureAddHandle($('#cgutter'));
+  renderCommentPanel(open);
+  if (commentModeOn() === 'inline' && open.length){ renderCommentHintIsland(); renderCommentIslands(open); }
+  updateTocDots();
+  refreshCommentNav();
+  // Inline comment islands touch the DOM; if we're in diff mode, re-assert the green/red diff
+  // decorations so comment rendering never wipes the diff wash (they're separate colour channels).
+  if (S.mode === 'diff') applyDiffDecorations();
+}
+// Inline mode (narrow, rail hidden): the global hint rides at the very top of the document as a
+// non-editable island, so the "run /sonorance address" guidance is still shown once somewhere.
+function renderCommentHintIsland(){
+  const doc = $('#doc'); if (!doc) return;
+  const el = document.createElement('div'); el.className = 'cnote-island cnote-hint-island'; el.contentEditable = 'false';
+  el.innerHTML = commentHintHTML();
+  doc.insertBefore(el, doc.firstChild);
+  wireCommentHint(el);
+}
+// One always-visible comment card, shared by the rail column and the inline islands. No quoted
+// text (it's redundant beside the highlighted anchor and eats space); the reader can Edit or
+// Delete their own comment — the AGENT resolves them, the reader deletes them.
+function commentCardHTML(c){
+  return `<article class="cnote" data-comment="${esc(c.id)}" tabindex="0" role="button" aria-label="Comment — ${esc(String(c.body || '').slice(0, 60))}">
+      <div class="cnote-b">${esc(c.body)}</div>
+      <footer class="cnote-f"><span class="cnote-who">You</span><span class="cnote-t">${esc(relTime(c.ts))}</span><span class="cnote-sp"></span>
+        <button type="button" class="cnote-act" data-edit="${esc(c.id)}" title="Edit comment" aria-label="Edit comment">${iconEl(ICON.pencil)}</button>
+        <button type="button" class="cnote-act cnote-del" data-del="${esc(c.id)}" title="Delete comment" aria-label="Delete comment">${iconEl(ICON.trash)}</button></footer>
+    </article>`;
+}
+// Open comments in document order (top-to-bottom), so both the rail list and the nav step
+// through them the way the reader reads.
+function orderComments(list){
+  return list.map(c => ({ c, a: commentAnchor(c) })).sort((p, q) => {
+    if (!p.a) return 1; if (!q.a) return -1;
+    return (p.a.el.compareDocumentPosition(q.a.el) & Node.DOCUMENT_POSITION_FOLLOWING) ? -1 : 1;
+  }).map(x => x.c);
+}
+// The rail comment layout: a NON-sticky hint box ("run /sonorance address") that sits below the
+// floating command bar and above the anchor-aligned comment cards, scrolling with them. The comment
+// count + prev/next navigator does NOT live here — it's a control in the command bar (#docdiff, see
+// commentNavCmd). In 'inline' mode (narrow, rail hidden) the hint rides at the top of the document.
+function renderCommentPanel(open){
+  const rail = $('#rail'); if (!rail) return;
+  const toc = rail.querySelector('#toc');
+  let head = rail.querySelector('.crail-head');
+  let panel = rail.querySelector('#comments');
+  const n = open.length;
+  if (!n){                                                  // no comments → plain ToC, no header/column
+    if (head) head.remove();
+    if (panel) panel.remove();
+    rail.classList.remove('cm-aligned');
+    if (toc) toc.style.display = '';
+    return;
+  }
+  if (commentModeOn() === 'rail'){
+    if (!head){ head = document.createElement('div'); head.className = 'crail-head'; rail.insertBefore(head, rail.firstChild); }
+    head.innerHTML = commentHintHTML();
+    wireCommentHint(head);
+    if (toc) toc.style.display = 'none';
+    if (!panel){ panel = document.createElement('div'); panel.id = 'comments'; panel.className = 'comments'; rail.appendChild(panel); }
+    panel.classList.add('aligned'); rail.classList.add('cm-aligned');
+    panel.innerHTML = orderComments(open).map(c => commentCardHTML(c)).join('');
+    wireCommentCards(panel);
+    positionRailComments();                                // Google-Docs alignment: each card sits beside its anchor line
+    requestAnimationFrame(positionRailComments);           // re-run once layout has settled (fonts/highlights)
+  } else {
+    if (head) head.remove();
+    rail.classList.remove('cm-aligned');
+    if (panel) panel.remove();
+    if (toc) toc.style.display = '';
+  }
+}
+// The single global "run /sonorance address" hint (shown once, not per comment), with a one-click
+// copy of the command. Shared by the rail (below the command bar) and the inline hint island.
+function commentHintHTML(){
+  return `<div class="crail-hint"><span class="crail-hint-t">Run <code>${esc(ADDRESS_CMD)}</code> in your agent to resolve comments.</span>
+      <button type="button" class="crail-copy" data-copyaddr title="Copy “${esc(ADDRESS_CMD)}”" aria-label="Copy the command">${iconEl(ICON.copy)}</button></div>`;
+}
+function wireCommentHint(root){
+  root.querySelector('[data-copyaddr]')?.addEventListener('click', async () => {
+    let ok = false; try { await navigator.clipboard.writeText(ADDRESS_CMD); ok = true; } catch { ok = copyFallback(ADDRESS_CMD); }
+    showToast(ok ? 'Command copied.' : 'Could not copy.');
+  });
+}
+// The comment navigator for the canvas command bar (#docdiff): just the comment glyph + open count
+// and prev/next arrows — no "comments" word (the icon carries the meaning, and space is tight next
+// to the Diff toggle). Built by renderCanvasDiff so it sits beside the other canvas controls.
+function commentNavCmd(){
+  const n = openCmts().length;
+  if (!n) return '';
+  const lbl = `${n} open comment${n > 1 ? 's' : ''}`;
+  return `<span class="cnavcmd" role="group" aria-label="${lbl}">
+      <button type="button" class="cnavcmd-step" data-cnav="prev" title="Previous comment" aria-label="Previous comment">‹</button>
+      <span class="cnavcmd-count" title="${lbl}">${iconEl(ICON.comment)}${n}</span>
+      <button type="button" class="cnavcmd-step" data-cnav="next" title="Next comment" aria-label="Next comment">›</button>
+    </span>`;
+}
+// Position each rail comment card vertically next to the line it's anchored to (Google-Docs
+// margin notes), pushing a card down when it would overlap the one above. Positions are computed
+// in the (non-sticky, full-height) comments column's own coordinate space, so they scroll with the
+// document — no per-scroll recompute needed. Re-run on resize (wired once in boot).
+function positionRailComments(){
+  const panel = $('#comments'); if (!panel || !panel.classList.contains('aligned')) return;
+  const rail = $('#rail'); const head = rail && rail.querySelector('.crail-head');
+  const prect = panel.getBoundingClientRect();
+  const gap = 10;
+  // Floor at the header's BOTTOM in the column's own coordinate space (the header doesn't start at
+  // the column's top — rail padding + header margins offset it), so no card ever slides under it.
+  let prevBottom = head ? (head.getBoundingClientRect().bottom - prect.top + 8) : 0;
+  for (const card of panel.querySelectorAll('.cnote')){
+    const c = (S.comments || []).find(x => x.id === card.dataset.comment);
+    const a = c && commentAnchor(c);
+    let top = a && a.el ? (a.el.getBoundingClientRect().top - prect.top) : prevBottom;
+    top = Math.max(top, prevBottom);
+    card.style.top = top + 'px';
+    prevBottom = top + card.getBoundingClientRect().height + gap;
+  }
+}
+// Inline mode: an amber card island right after each block that carries comments — a
+// contenteditable=false island (like the diff's removed-line blocks, third colour), so it never
+// enters the editing model. Re-inserted on every render (renderLive wipes them first).
+function renderCommentIslands(open){
+  const doc = $('#doc'); if (!doc) return;
+  const groups = new Map();
+  for (const c of open){ const a = commentAnchor(c); if (!a || !a.blk) continue; if (!groups.has(a.blk)) groups.set(a.blk, []); groups.get(a.blk).push(c); }
+  for (const [blk, list] of groups){
+    const island = document.createElement('div'); island.className = 'cnote-island'; island.contentEditable = 'false';
+    island.innerHTML = list.map(c => commentCardHTML(c)).join('');
+    blk.insertAdjacentElement('afterend', island);
+    wireCommentCards(island);
+  }
+}
+// Edit / Delete on a card; click/keyboard elsewhere on the card focuses its anchor.
+function wireCommentCards(root){
+  root.querySelectorAll('[data-del]').forEach(b => b.addEventListener('click', (e) => { e.stopPropagation(); deleteCommentUI(b.dataset.del); }));
+  root.querySelectorAll('[data-edit]').forEach(b => b.addEventListener('click', (e) => { e.stopPropagation(); startEditComment(b.dataset.edit); }));
+  root.querySelectorAll('.cnote').forEach(card => {
+    card.addEventListener('click', (e) => { if (!e.target.closest('.cnote-act') && !card.classList.contains('editing')) focusComment(card.dataset.comment); });
+    card.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && !card.classList.contains('editing') && e.target === card){ e.preventDefault(); focusComment(card.dataset.comment); } });
+  });
+}
+// Inline-edit a comment's body: swap the card body for a textarea + Save/Cancel; on Save,
+// persist (POST /api/comment-edit) and update in place. The reader edits; the agent resolves.
+function startEditComment(id){
+  const c = (S.comments || []).find(x => x.id === id); if (!c) return;
+  const card = [...document.querySelectorAll('.cnote')].find(x => x.dataset.comment === id); if (!card || card.classList.contains('editing')) return;
+  card.classList.add('editing');
+  const bodyEl = card.querySelector('.cnote-b');
+  const prev = c.body;
+  bodyEl.innerHTML = `<textarea class="cnote-edit" rows="2">${esc(prev)}</textarea>
+    <div class="cnote-editrow"><button type="button" class="cbtn ghost" data-cedit="cancel">Cancel</button><button type="button" class="cbtn primary" data-cedit="save">Save</button></div>`;
+  const ta = bodyEl.querySelector('textarea'); ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length);
+  positionRailComments();                                   // the card just grew — reflow the rail so later cards don't overlap
+  ta.addEventListener('input', positionRailComments);       // keep them clear as the textarea auto-grows while typing
+  const finish = () => renderComments();
+  ta.addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Escape'){ e.preventDefault(); finish(); } if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)){ e.preventDefault(); save(); } });
+  bodyEl.querySelector('[data-cedit="cancel"]').addEventListener('click', (e) => { e.stopPropagation(); finish(); });
+  bodyEl.querySelector('[data-cedit="save"]').addEventListener('click', (e) => { e.stopPropagation(); save(); });
+  async function save(){
+    const val = ta.value.trim(); if (!val || val === prev){ finish(); return; }
+    c.body = val;                                          // optimistic; re-render shows it immediately
+    finish();
+    const file = S.recFile;
+    const r = await api('POST', '/api/comment-edit', { commentId: id, body: val });
+    if (S.recFile !== file) return;
+    if (!r || r.error){ c.body = prev; renderComments(); showToast(r && r.error === 'endpoint-missing' ? `Editor is out of date — restart ${SERVE_CMD}.` : 'Could not save the edit.'); }
+  }
+}
+// Bring a comment into focus: scroll to + flash its anchored span, and mark its card active.
+// Replaces the old click-to-open popover — the card is already visible, so this just links the two.
+function focusComment(id){
+  const c = (S.comments || []).find(x => x.id === id); if (!c) return;
+  document.querySelectorAll('.cmark.on, .cmark-blk.on').forEach(x => x.classList.remove('on'));   // clear the previous active anchor (inline OR block)
+  const a = commentAnchor(c);
+  if (a && a.el){
+    try { a.el.scrollIntoView({ behavior: prefersReduced() ? 'auto' : 'smooth', block: 'center' }); } catch {}
+    a.el.classList && a.el.classList.add('on', 'hot'); setTimeout(() => a.el.classList && a.el.classList.remove('hot'), 1400);
+  }
+  document.querySelectorAll('.cnote.active').forEach(x => x.classList.remove('active'));
+  const card = [...document.querySelectorAll('.cnote')].find(x => x.dataset.comment === id);
+  if (card){ card.classList.add('active'); try { card.scrollIntoView({ block: 'nearest' }); } catch {} }
+}
+const openCommentPop = focusComment;                        // legacy callers (nav, marks) now link to the visible card
+// The comment count in the top controls changes as comments are created/resolved — keep
+// the navigator (and its prev/next) in sync without disturbing the rest of the controls.
+// View-aware: a brief uses briefControls(), a case uses caseControls().
+function refreshCommentNav(){
+  setTopActions(S.brief ? briefControls() : S.readout ? readoutControls() : S.matchup ? matchupControls() : caseControls());
+  wireCaseControls();
+  if (!S.brief && !S.readout && !S.matchup) updateSaveDot();
+}
+function updateTocDots(){
+  const toc = $('#toc'); if (!toc) return;
+  const withC = sectionsWithComments();
+  const live = liveHeadings();
+  toc.querySelectorAll('a').forEach(a => {
+    const has = withC.has(live[+a.dataset.hidx]); let dot = a.querySelector('.tdot');
+    if (has && !dot){ dot = document.createElement('span'); dot.className = 'tdot'; dot.setAttribute('aria-label', 'has comments'); a.appendChild(dot); }
+    else if (!has && dot) dot.remove();
+  });
+}
+// The always-available "＋" add-comment handle (Notion-style) that tracks the hovered
+// block — the primary discoverability affordance so annotating isn't hidden behind a
+// text selection. Created once; positioned by onDocHoverComment.
+let addHandle = null;
+function ensureAddHandle(gutter){
+  if (addHandle && addHandle.isConnected) return;
+  addHandle = document.createElement('button'); addHandle.className = 'cadd'; addHandle.type = 'button';
+  addHandle.title = 'Comment on this block'; addHandle.setAttribute('aria-label', 'Comment on this block');
+  addHandle.innerHTML = iconEl(ICON.comment);
+  addHandle.addEventListener('mousedown', (e) => e.preventDefault());
+  addHandle.addEventListener('click', (e) => { e.stopPropagation(); if (addHandle._blk) commentOnBlock(addHandle._blk); });
+  gutter.appendChild(addHandle);
+}
+function onDocHoverComment(e){
+  if (!addHandle) return;
+  const sel = window.getSelection && window.getSelection();
+  if (sel && !sel.isCollapsed){ addHandle.classList.remove('show'); return; }   // a selection owns the affordance — never show both
+  const blk = blockOf(e.target); const wrap = $('#cgutter') && $('#cgutter').parentElement;
+  if (!blk || !wrap || blk.classList.contains('cnote-island')){ addHandle.classList.remove('show'); return; }
+  const r = blk.getBoundingClientRect(), wrapRect = wrap.getBoundingClientRect();
+  addHandle._blk = blk;
+  // Sit the handle in the left gutter, vertically centred on the block. Its RIGHT edge is kept a
+  // clear gap before the text's left edge so it never renders over the words; the canvas carries a
+  // wider left padding (a comment gutter) so there's always room for this. Floored at the container
+  // edge, and — if the doc is ever too tight — nudged as far left as needed to avoid overlap.
+  const size = 26, gap = 12, edge = 2;
+  const textLeft = r.left - wrapRect.left;
+  let left = Math.max(edge, textLeft - gap - size);
+  if (left + size > textLeft - 4) left = Math.max(0, textLeft - 4 - size);   // hard no-overlap guard
+  addHandle.style.top = Math.max(0, r.top - wrapRect.top + (r.height - size) / 2) + 'px';
+  addHandle.style.left = left + 'px';
+  addHandle.classList.add('show');
+}
+function hideAddHandle(){ if (addHandle) addHandle.classList.remove('show'); }
+// Comment on a whole block (from the ＋ handle): anchor on the block's text + section.
+function commentOnBlock(blk){
+  if (!blk) return;
+  const quote = (blk.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 300);
+  if (!quote) return;
+  let rect; try { rect = blk.getBoundingClientRect(); } catch { rect = { left: 40, top: 80, bottom: 96 }; }
+  pendingAnchor = { quote, heading: headingFor(blk), rect, blk, endBlk: blk, whole: true };
+  openCommentComposer();
+}
+// Delete the reader's own comment outright (DELETE /api/comment) — it is removed from the
+// record, not resolved. The agent's resolution is a separate, agent-only action.
+async function deleteCommentUI(id){
+  const file = S.recFile;
+  const r = await api('DELETE', '/api/comment', { commentId: id });
+  if (S.recFile !== file) return;
+  if (r && r.ok){ dropComment(id); }
+  else if (r && r.error === 'endpoint-missing') maybeStale();
+  else showToast(commentErrorText(r));
+}
+// Remove a comment from the view (deleted by the reader, or resolved by the agent): drop
+// its state, unwrap its highlight, and re-render the layer / nav. Records the id so a LATE
+// SSE `comment` echo (which can arrive after a fast create→delete) can't resurrect it.
+const droppedComments = new Set();
+function dropComment(id){
+  droppedComments.add(id);
+  S.comments = (S.comments || []).filter(c => c.id !== id);
+  const doc = $('#doc'); const mark = doc && doc.querySelector(`.cmark[data-comment="${id}"]`);
+  if (mark){ const parent = mark.parentNode; while (mark.firstChild) parent.insertBefore(mark.firstChild, mark); parent.removeChild(mark); parent.normalize && parent.normalize(); }
+  const blkMark = doc && doc.querySelector(`.cmark-blk[data-comment="${id}"]`);   // whole-block anchor: clear its highlight too
+  if (blkMark){ blkMark.classList.remove('cmark-blk', 'on', 'hot'); delete blkMark.dataset.comment; }
+  renderComments();
+}
+// The comments navigator (prev / next in the top controls): step through open comments in
+// document order, scrolling to each and opening its card.
+function stepComment(dir){
+  const doc = $('#doc'); if (!doc) return;
+  const ordered = openCmts().map(c => ({ c, a: commentAnchor(c) })).filter(x => x.a)
+    .sort((p, q) => (p.a.el.compareDocumentPosition(q.a.el) & Node.DOCUMENT_POSITION_FOLLOWING) ? -1 : 1);
+  if (!ordered.length) return;
+  S.cNavIdx = ((S.cNavIdx + dir) % ordered.length + ordered.length) % ordered.length;
+  const target = ordered[S.cNavIdx];
+  target.a.el.scrollIntoView && target.a.el.scrollIntoView({ behavior: prefersReduced() ? 'auto' : 'smooth', block: 'center' });
+  openCommentPop(target.c.id);
+}
+
+// ---- the selection Comment affordance + composer --------------------------
+let askBtn = null, askPop = null, pendingAnchor = null, speech = null;
+function hideAsk(){ hideSelectionAffordance(); closeAskPop(); }
+function closeAskPop(){ if (speech){ try { speech.stop(); } catch {} speech = null; } if (askPop){ askPop.remove(); askPop = null; } }
+// The nearest preceding heading of a node — the section a comment is anchored in.
+function headingFor(node){
+  let el = node.nodeType === 3 ? node.parentElement : node;
+  const doc = $('#doc'); if (!doc || !el) return '';
+  const heads = [...doc.querySelectorAll('h1,h2,h3,h4,h5,h6')];
+  let best = '';
+  for (const h of heads){ if (h.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) best = h.textContent.trim(); else break; }
+  return best;
+}
+function maybeShowAsk(doc){
+  if (askPop) return;                                   // already composing
+  const sel = window.getSelection && window.getSelection();
+  if (!sel || sel.isCollapsed || !sel.rangeCount){ hideSelectionAffordance(); return; }
+  const range = sel.getRangeAt(0);
+  const root = $('#doc') || doc;                         // a selection may span sections → anchor on the whole document
+  if (!root || !root.contains(range.commonAncestorContainer)){ hideSelectionAffordance(); return; }
+  const quote = sel.toString().replace(/\s+/g, ' ').trim();
+  if (quote.length < 2){ hideSelectionAffordance(); return; }
+  let rect; try { rect = range.getBoundingClientRect(); } catch { rect = { left: 40, top: 80, bottom: 96 }; }
+  pendingAnchor = { quote, heading: headingFor(range.startContainer), rect, blk: blockOf(range.startContainer), endBlk: blockOf(range.endContainer) };
+  hideAddHandle();                                       // a selection owns the affordance — never show the gutter ＋ handle at the same time
+  // In edit mode the selection raises the formatting bubble (which carries its own
+  // Comment button) — so the standalone Comment button never doubles up. Read-only
+  // surfaces (briefs, a generating case) can't be formatted, so they keep the plain
+  // Comment button.
+  if (wysiwygCtl && wysiwygCtl.isEditable()) showBubble(rect);
+  else showAskButton(rect);
+}
+// Tear down whichever selection affordance is up (the read-only Comment button OR the
+// edit-mode bubble). Called when the selection clears or a composer opens.
+function hideSelectionAffordance(){
+  if (askBtn){ askBtn.remove(); askBtn = null; }
+  hideBubble();
+}
+function showAskButton(rect){
+  hideBubble();
+  if (!askBtn){
+    askBtn = document.createElement('button'); askBtn.className = 'askbtn';
+    askBtn.innerHTML = iconEl(ICON.comment);
+    askBtn.title = 'Comment'; askBtn.setAttribute('aria-label', 'Comment on selection');
+    askBtn.addEventListener('mousedown', (e) => e.preventDefault());
+    askBtn.addEventListener('click', openCommentComposer);
+    document.body.appendChild(askBtn);
+  }
+  const vw = window.innerWidth || 1200;
+  askBtn.style.left = Math.max(8, Math.min(rect.left, vw - 40)) + 'px';
+  askBtn.style.top = Math.max(8, (rect.top || 0) - 36) + 'px';
+}
+// The selection formatting bubble (edit mode only): bold / italic / link / H2, then a
+// Comment button — the same composer the read-only Comment button opens. Buttons drive
+// the editor through the controller (never Tiptap directly). `mousedown` is prevented so
+// clicking a button doesn't collapse the selection it acts on.
+let bubbleBar = null;
+function showBubble(rect){
+  if (askBtn){ askBtn.remove(); askBtn = null; }
+  const ctl = wysiwygCtl; if (!ctl) return;
+  if (!bubbleBar){
+    bubbleBar = document.createElement('div'); bubbleBar.className = 'bubblebar'; bubbleBar.setAttribute('role', 'toolbar'); bubbleBar.setAttribute('aria-label', 'Format selection');
+    const btn = (bb, icon, label) => `<button type="button" data-bb="${bb}" class="bbtn" title="${label}" aria-label="${label}">${iconEl(icon)}</button>`;
+    bubbleBar.innerHTML =
+      btn('bold', ICON.bold, 'Bold') + btn('italic', ICON.italic, 'Italic') +
+      btn('link', ICON.link, 'Link') + btn('h2', ICON.heading, 'Heading') +
+      `<span class="bbsep"></span>` + btn('comment', ICON.comment, 'Comment');
+    bubbleBar.addEventListener('mousedown', (e) => e.preventDefault());
+    bubbleBar.addEventListener('click', onBubbleClick);
+    document.body.appendChild(bubbleBar);
+  }
+  paintBubbleState();
+  const vw = window.innerWidth || 1200;
+  const w = bubbleBar.offsetWidth || 200;
+  bubbleBar.style.left = Math.max(8, Math.min((rect.left || 40), vw - w - 8)) + 'px';
+  bubbleBar.style.top = Math.max(8, (rect.top || 0) - 42) + 'px';
+  bubbleBar.classList.add('show');
+}
+function paintBubbleState(){
+  if (!bubbleBar || !wysiwygCtl) return;
+  const on = (bb, active) => { const b = bubbleBar.querySelector(`[data-bb="${bb}"]`); if (b) b.classList.toggle('on', !!active); };
+  on('bold', wysiwygCtl.isActive('bold'));
+  on('italic', wysiwygCtl.isActive('italic'));
+  on('link', wysiwygCtl.isActive('link'));
+  on('h2', wysiwygCtl.isActive('heading', { level: 2 }));
+}
+function onBubbleClick(e){
+  const b = e.target.closest && e.target.closest('[data-bb]'); if (!b || !wysiwygCtl) return;
+  const kind = b.dataset.bb;
+  if (kind === 'comment'){ openCommentComposer(); return; }
+  if (kind === 'bold') wysiwygCtl.toggleBold();
+  else if (kind === 'italic') wysiwygCtl.toggleItalic();
+  else if (kind === 'h2') wysiwygCtl.toggleHeading(2);
+  else if (kind === 'link'){
+    const cur = wysiwygCtl.isActive('link');
+    const href = cur ? '' : (window.prompt && window.prompt('Link URL'));
+    if (href === null || href === undefined) return;    // cancelled
+    wysiwygCtl.setLink(href);
+  }
+  paintBubbleState();
+}
+function hideBubble(){ if (bubbleBar){ bubbleBar.remove(); bubbleBar = null; } }
+// Open the comment composer on the block the caret sits in — the "@agent" mention's
+// landing (see at-mention.mjs). Reuses commentOnBlock so the anchor matches the ＋ handle.
+function openAtComment(){
+  const sel = window.getSelection && window.getSelection();
+  const node = sel && sel.rangeCount ? (sel.anchorNode || sel.getRangeAt(0).startContainer) : null;
+  const blk = node ? blockOf(node) : null;
+  if (blk) commentOnBlock(blk);
+}
+// The in-table toolbar (edit mode only): add/remove rows & columns, or drop the table.
+// Shown whenever the caret is inside a table; hidden otherwise. Table structure editing
+// is a library capability — this only surfaces it.
+let tableTools = null;
+function maybeShowTableTools(){
+  const ctl = wysiwygCtl;
+  if (!ctl || !ctl.isEditable() || !ctl.isActive('table')){ hideTableTools(); return; }
+  const sel = window.getSelection && window.getSelection();
+  const node = sel && sel.rangeCount ? (sel.anchorNode || sel.getRangeAt(0).startContainer) : null;
+  const el = node ? (node.nodeType === 3 ? node.parentElement : node) : null;
+  const table = el && el.closest ? el.closest('#doc .ProseMirror table') : null;
+  if (!table){ hideTableTools(); return; }
+  showTableTools(table);
+}
+function showTableTools(table){
+  if (!tableTools){
+    tableTools = document.createElement('div'); tableTools.className = 'tabletools'; tableTools.setAttribute('role', 'toolbar'); tableTools.setAttribute('aria-label', 'Edit table');
+    const b = (tt, label) => `<button type="button" data-tt="${tt}" class="ttbtn" title="${label}" aria-label="${label}">${label}</button>`;
+    tableTools.innerHTML =
+      b('row+', '＋ Row') + b('col+', '＋ Col') + b('row-', '－ Row') + b('col-', '－ Col') +
+      `<span class="ttsep"></span>` +
+      `<button type="button" data-tt="del" class="ttbtn danger" title="Delete table" aria-label="Delete table">${iconEl(ICON.trash)}</button>`;
+    tableTools.addEventListener('mousedown', (e) => e.preventDefault());
+    tableTools.addEventListener('click', onTableToolsClick);
+    document.body.appendChild(tableTools);
+  }
+  let r; try { r = table.getBoundingClientRect(); } catch { r = { left: 40, top: 80 }; }
+  const vw = window.innerWidth || 1200, w = tableTools.offsetWidth || 220;
+  tableTools.style.left = Math.max(8, Math.min((r.left || 40), vw - w - 8)) + 'px';
+  tableTools.style.top = Math.max(8, (r.top || 0) - 40) + 'px';
+  tableTools.classList.add('show');
+}
+function onTableToolsClick(e){
+  const b = e.target.closest && e.target.closest('[data-tt]'); if (!b || !wysiwygCtl) return;
+  const tt = b.dataset.tt;
+  if (tt === 'row+') wysiwygCtl.addRow();
+  else if (tt === 'col+') wysiwygCtl.addColumn();
+  else if (tt === 'row-') wysiwygCtl.deleteRow();
+  else if (tt === 'col-') wysiwygCtl.deleteColumn();
+  else if (tt === 'del'){ wysiwygCtl.deleteTable(); hideTableTools(); return; }
+  requestAnimationFrame(maybeShowTableTools);           // reposition after the structure changed
+}
+function hideTableTools(){ if (tableTools){ tableTools.remove(); tableTools = null; } }
+function openCommentComposer(){
+  if (!pendingAnchor) return;
+  hideSelectionAffordance();
+  askPop = document.createElement('div'); askPop.className = 'askpop';
+  const mic = supportsSpeech() ? `<button class="mic" id="askmic" title="Dictate" aria-label="Dictate">${iconEl(ICON.mic)}</button>` : '';
+  askPop.innerHTML = `
+    <div class="askhd">${iconEl(ICON.comment)}<span>Leave a comment for the agent to address</span></div>
+    <div class="aq">${esc(pendingAnchor.quote)}</div>
+    <textarea id="askta" rows="3" placeholder="A question or a change to make…"></textarea>
+    <div class="arow">${mic}<span class="sp"></span>
+      <button class="ghost" id="askcancel">Cancel</button>
+      <button class="send" id="asksend">${iconEl(ICON.send)}Comment</button>
+    </div>`;
+  document.body.appendChild(askPop);
+  const vw = window.innerWidth || 1200, vh = window.innerHeight || 800;
+  const w = askPop.offsetWidth || 340, h = askPop.offsetHeight || 160;
+  const r = pendingAnchor.rect;
+  askPop.style.left = Math.max(8, Math.min((r.left || 40), vw - w - 8)) + 'px';
+  askPop.style.top = Math.min((r.bottom || 96) + 8, vh - h - 8) + 'px';
+  $('#askcancel').addEventListener('click', hideAsk);
+  $('#asksend').addEventListener('click', submitComment);
+  const ta = $('#askta');
+  ta.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape'){ e.preventDefault(); hideAsk(); }
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)){ e.preventDefault(); submitComment(); }
+  });
+  const mb = $('#askmic'); if (mb) mb.addEventListener('click', toggleMic);
+  ta.focus();
+}
+async function submitComment(){
+  const ta = $('#askta'); const body = (ta && ta.value || '').trim();
+  if (!body || !pendingAnchor) return;
+  const { line, endLine } = anchorSourceRange(pendingAnchor);   // the source LINE RANGE the anchor spans (robust anchor)
+  const anchor = { quote: pendingAnchor.quote.slice(0, 300), heading: pendingAnchor.heading, line, endLine };
+  hideAsk();
+  try { const sel = window.getSelection && window.getSelection(); sel && sel.removeAllRanges(); } catch {}
+  await createComment(anchor.quote, anchor.heading, body, line, endLine);
+}
+// The source LINE RANGE [line, endLine] (0-based) a pending comment anchors to — the primary,
+// content-independent anchor (robust to duplicate headings / edited-away quotes). Derived from the
+// rendered block(s) the selection (or ＋-handle block) covers. { -1, -1 } when it can't be resolved
+// (e.g. a surface with no source-line model).
+function anchorSourceRange(pa){
+  const start = pa && pa.blk ? sourceLineRange(pa.blk) : null;
+  const end = pa && pa.endBlk ? sourceLineRange(pa.endBlk) : null;
+  if (!start && !end) return { line: -1, endLine: -1 };
+  const s = start || end, e = end || start;
+  return { line: s.line, endLine: Math.max(s.endLine, e.endLine) };
+}
+// The 0-based source-line range a rendered block spans. Cases/files use the live S.items model
+// (file-absolute lines); briefs map the rendered block's position to the source it was rendered
+// from. null when the surface has no source-line model.
+function sourceLineRange(blk){
+  if (!blk) return null;
+  if (blk.dataset && blk.dataset.i != null && S.items && S.items.length){
+    const i = +blk.dataset.i; const len = ((S.items[i] && S.items[i].lines) || ['']).length;
+    const line = blockStartLine(i); return { line, endLine: line + Math.max(0, len - 1) };
+  }
+  if (S.brief || S.readout || S.matchup){ const map = briefBlockLineMap(); const idx = briefBlockIndex(blk); return (map && idx >= 0 && idx < map.length) ? map[idx] : null; }
+  return null;
+}
+// The rendered block-children of a brief (in document order), excluding the diff/hint/comment
+// islands — a 1:1 match with briefBlockLineMap()'s source blocks.
+function briefBlockKids(){
+  const doc = $('#doc'); if (!doc) return [];
+  return [...doc.children].filter(el => el.nodeType === 1 && !el.classList.contains('diffdel') && !el.classList.contains('banner') && !el.classList.contains('cnote-island'));
+}
+function briefBlockIndex(blk){ return briefBlockKids().indexOf(blk); }
+// Per-rendered-block source line ranges for a brief, from the same segmentation the diff uses, so
+// index N of the map lines up with the Nth rendered block. Lines are relative to the rendered
+// (frontmatter-stripped) brief body.
+function briefBlockLineMap(){
+  const doc = S.brief || S.readout || S.matchup;
+  if (!doc) return null;
+  const items = segment(stripFrontmatter(doc.text || ''));
+  const map = []; let acc = 0;
+  for (const it of items){
+    const src = (it.lines || []).join('\n');
+    if (it.kind === 'block' && !isMetaOnly(src)) map.push({ line: acc, endLine: acc + Math.max(0, (it.lines || []).length - 1) });
+    acc += (it.lines || []).length;
+  }
+  return map;
+}
+function briefBlockAtLine(line){
+  const map = briefBlockLineMap(); if (!map) return -1;
+  for (let i = 0; i < map.length; i++){ if (line >= map[i].line && line <= map[i].endLine) return i; }
+  return -1;
+}
+// Create an in-record comment on the current file: POST to the bridge, then reflect it
+// inline. On a stale server (404) surface the version-skew banner rather than a vanish.
+async function createComment(quote, heading, body, line, endLine){
+  const file = S.recFile; if (!file) return;
+  const r = await api('POST', '/api/comment', { file, quote, heading, body, line, endLine });
+  if (S.recFile !== file) return;
+  if (r && r.ok && r.commentId){
+    // The SSE `comment` broadcast can arrive before this POST resolves, so dedup: only
+    // add if that push hasn't already landed it (otherwise the same comment counts twice).
+    if (!(S.comments || []).some(x => x.id === r.commentId))
+      S.comments = [...(S.comments || []), { id: r.commentId, file: r.file, anchor: { quote, heading, line, endLine }, body, status: 'open', ts: Date.now() }];
+    renderComments();
+    requestAnimationFrame(() => { positionRailComments(); focusComment(r.commentId); });   // co-locate the new card once its highlight is laid out
+  } else {
+    if (r && r.error === 'endpoint-missing') maybeStale();
+    else showToast(commentErrorText(r));
+  }
+}
+function commentErrorText(r){
+  if (!r || r.netError) return 'Couldn’t reach the workbench — is it still running?';
+  if (r.error === 'invalid file' || r.error === 'no file') return 'Couldn’t save — this file can’t be annotated.';
+  if (r.error === 'no project') return 'Couldn’t save — no project is open.';
+  if (r.error) return 'Couldn’t save — ' + r.error + '.';
+  return 'Couldn’t save the comment.';
+}
+// Voice input via the browser Web Speech API (progressive enhancement — the mic only
+// appears when supported). Click to dictate into the composer; click again to stop.
+function supportsSpeech(){ return !!(window.SpeechRecognition || window.webkitSpeechRecognition); }
+function toggleMic(){
+  const SR = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SR) return;
+  const btn = $('#askmic'), ta = $('#askta');
+  if (speech){ try { speech.stop(); } catch {} speech = null; btn && btn.classList.remove('rec'); return; }
+  speech = new SR(); speech.lang = 'en-US'; speech.interimResults = false;
+  speech.onresult = (e) => { const tx = [...e.results].map(x => x[0].transcript).join(' ').trim(); if (ta && tx) ta.value = (ta.value ? ta.value + ' ' : '') + tx; };
+  speech.onend = () => { btn && btn.classList.remove('rec'); speech = null; };
+  speech.onerror = () => { btn && btn.classList.remove('rec'); speech = null; };
+  try { speech.start(); btn && btn.classList.add('rec'); } catch { speech = null; }
+}
+
+// ---- stale-server (version skew) banner -----------------------------------
+// Shown when the workbench is served by an out-of-date `serve` process (new UI, old
+// routes). Idempotent + dismissible; tells the user the one thing that fixes it.
+let staleShown = false;
+function maybeStale(){ if (staleShown) return; staleShown = true; showStaleBar(); }
+function showStaleBar(){
+  if ($('#stalebar')) return;
+  const bar = document.createElement('div');
+  bar.id = 'stalebar'; bar.className = 'stalebar';
+  bar.innerHTML = `<span>This editor is out of date — restart <code>${esc(SERVE_CMD)}</code> to reconnect the comment bridge.</span><button class="x" aria-label="Dismiss">${iconEl(ICON.x)}</button>`;
+  document.body.appendChild(bar);
+  bar.querySelector('.x').addEventListener('click', () => bar.remove());
+}
+// A brief transient message (comment save error, agent addressing) — auto-dismisses.
+let toastTimer = null;
+function showToast(text, opts){
+  let t = $('#dlbtoast');
+  if (!t){ t = document.createElement('div'); t.id = 'dlbtoast'; t.className = 'caddr'; document.body.appendChild(t); }
+  t.innerHTML = (opts && opts.spin ? `<span class="spin"></span>` : '') + `<span>${esc(text)}</span>`;
+  clearTimeout(toastTimer); toastTimer = setTimeout(() => { t.remove(); }, (opts && opts.ms) || 3600);
+}
+// A reusable, accessible confirmation dialog for destructive actions: a native <dialog>
+// (focus-trapped + Escape-to-cancel + backdrop-click cancels), returning a Promise<boolean>.
+function confirmDialog({ title, body, confirmLabel = 'Confirm', cancelLabel = 'Cancel', danger = false }){
+  return new Promise((resolve) => {
+    const dlg = document.createElement('dialog');
+    dlg.className = 'confirm';
+    dlg.innerHTML = `<form method="dialog" class="confirm-in">
+        <h2>${esc(title)}</h2>
+        <div class="confirm-b">${body}</div>
+        <div class="confirm-actions">
+          <button type="button" class="cbtn ghost" data-x="0">${esc(cancelLabel)}</button>
+          <button type="submit" class="cbtn ${danger ? 'danger' : 'primary'}" data-x="1">${esc(confirmLabel)}</button>
+        </div>
+      </form>`;
+    document.body.appendChild(dlg);
+    let done = false;
+    const finish = (v) => { if (done) return; done = true; try { dlg.close(); } catch {} dlg.remove(); resolve(v); };
+    dlg.querySelector('[data-x="0"]').addEventListener('click', () => finish(false));
+    dlg.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); finish(true); });
+    dlg.addEventListener('cancel', (e) => { e.preventDefault(); finish(false); });        // Escape
+    dlg.addEventListener('click', (e) => { if (e.target === dlg) finish(false); });         // backdrop
+    try { dlg.showModal(); } catch { dlg.setAttribute('open', ''); }                        // jsdom / no <dialog>
+    (dlg.querySelector('[data-x="1"]') || dlg).focus();
+  });
+}
+// A reusable single-line text-input dialog (native <dialog>, focus-trapped, Escape/backdrop
+// cancels) → Promise<string|null>. Used to name a new file. An optional `prefix` shows the
+// fixed folder the name is created under (read-only context, not part of the returned value).
+function promptDialog({ title, label, placeholder = '', value = '', prefix = '', confirmLabel = 'Create', selectEnd = null }){
+  return new Promise((resolve) => {
+    const dlg = document.createElement('dialog');
+    dlg.className = 'confirm prompt';
+    dlg.innerHTML = `<form method="dialog" class="confirm-in">
+        <h2>${esc(title)}</h2>
+        ${prefix ? `<div class="prompt-path"><span class="prompt-path-cap">In</span><span class="prompt-path-val">${esc(prefix.replace(/\/$/, ''))}/</span></div>` : ''}
+        <label class="prompt-l">${esc(label)}
+          <span class="prompt-row"><input class="prompt-i" type="text" value="${esc(value)}" placeholder="${esc(placeholder)}" autocomplete="off" spellcheck="false"></span>
+        </label>
+        <div class="confirm-actions">
+          <button type="button" class="cbtn ghost" data-x="0">Cancel</button>
+          <button type="submit" class="cbtn primary" data-x="1">${esc(confirmLabel)}</button>
+        </div>
+      </form>`;
+    document.body.appendChild(dlg);
+    const input = dlg.querySelector('.prompt-i');
+    let done = false;
+    const finish = (v) => { if (done) return; done = true; try { dlg.close(); } catch {} dlg.remove(); resolve(v); };
+    dlg.querySelector('[data-x="0"]').addEventListener('click', () => finish(null));
+    dlg.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); const val = input.value.trim(); finish(val || null); });
+    dlg.addEventListener('cancel', (e) => { e.preventDefault(); finish(null); });        // Escape
+    dlg.addEventListener('click', (e) => { if (e.target === dlg) finish(null); });         // backdrop
+    try { dlg.showModal(); } catch { dlg.setAttribute('open', ''); }                        // jsdom / no <dialog>
+    // Focus the field; when renaming, pre-select the editable part (the name without its
+    // extension) so a retype keeps `.md` — otherwise leave the caret at the end.
+    setTimeout(() => { try { input.focus(); if (selectEnd != null) input.setSelectionRange(0, selectEnd); } catch {} }, 0);
+  });
+}
+// A server-side folder browser → Promise<string|null> (the chosen absolute path). A browser
+// can't return a real filesystem path from a native picker, and the daemon needs one — so the
+// daemon lists directories (/api/browse) and the user drills in:
+// click a folder to enter it, the breadcrumb / Backspace to go up, then "Open this folder".
+function folderDialog(startPath){
+  return new Promise((resolve) => {
+    const opener = document.activeElement;                 // restore focus on close (WCAG)
+    const dlg = document.createElement('dialog');
+    dlg.className = 'confirm folderpick';
+    dlg.innerHTML = `<div class="confirm-in fp">
+      <div class="fp-head">
+        <h2>Open folder</h2>
+        <nav class="fp-crumbs" aria-label="Folder path"></nav>
+      </div>
+      <div class="fp-body"><ul class="fp-list" aria-label="Sub-folders"></ul></div>
+      <div class="fp-foot">
+        <div class="confirm-actions">
+          <button type="button" class="cbtn ghost" data-x="0">Cancel</button>
+          <button type="button" class="cbtn primary" data-x="1">Open this folder</button>
+        </div>
+      </div>
+    </div>`;
+    document.body.appendChild(dlg);
+    const crumbs = dlg.querySelector('.fp-crumbs');
+    const list = dlg.querySelector('.fp-list');
+    const body = dlg.querySelector('.fp-body');
+    const openBtn = dlg.querySelector('[data-x="1"]');
+    let cur = null, home = null, parentPath = null, sel = -1, rows = [], done = false;
+    const finish = (v) => { if (done) return; done = true; try { dlg.close(); } catch {} dlg.remove(); try { opener && opener.focus(); } catch {} resolve(v); };
+    const sep = () => `<span class="fp-sep">${iconEl(ICON.chevron)}</span>`;
+
+    function renderCrumbs(path){
+      const segs = path.split('/').filter(Boolean);
+      let acc = '';
+      const parts = [`<button type="button" class="fp-crumb" data-path="${esc(home || '')}">Home</button>`];
+      segs.forEach((s, i) => { acc += '/' + s; parts.push(sep(), `<button type="button" class="fp-crumb" data-path="${esc(acc)}"${i === segs.length - 1 ? ' aria-current="true"' : ''}>${esc(s)}</button>`); });
+      crumbs.innerHTML = parts.join('');
+      crumbs.querySelectorAll('.fp-crumb').forEach(b => b.addEventListener('click', () => { const p = b.dataset.path || null; if (p !== cur) load(p); }));
+    }
+    function renderRows(entries){
+      rows = entries; sel = -1;
+      if (!entries.length){ list.innerHTML = `<li class="fp-empty">No sub-folders here. Open this folder, or go up.</li>`; return; }
+      list.innerHTML = entries.map((e, i) =>
+        `<li><button type="button" class="fp-row" data-i="${i}" title="${esc(e.name)}">
+          <span class="fp-fico">${iconEl(ICON.folder)}</span><span class="fp-name">${esc(e.name)}</span><span class="fp-go">${iconEl(ICON.chevron)}</span>
+        </button></li>`).join('');
+      list.querySelectorAll('.fp-row').forEach(r => r.addEventListener('click', () => load(entries[+r.dataset.i].path)));
+    }
+    async function load(path){
+      dlg.classList.add('fp-loading');
+      let r; try { r = await api('GET', '/api/browse' + (path ? '?path=' + encodeURIComponent(path) : '')); } catch { r = { error: 'offline' }; }
+      dlg.classList.remove('fp-loading');
+      if (!r || r.error){
+        if (cur == null){ crumbs.innerHTML = ''; list.innerHTML = `<li class="fp-empty">Couldn’t read that folder.</li>`; }
+        else showToast('Couldn’t open that folder.');
+        return;
+      }
+      cur = r.path; home = r.home || home; parentPath = r.parent || null;
+      renderCrumbs(cur); renderRows(r.entries); body.scrollTop = 0;
+    }
+    dlg.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape'){ e.preventDefault(); return finish(null); }
+      if (e.key === 'Backspace'){ e.preventDefault(); if (parentPath) load(parentPath); return; }
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp'){
+        e.preventDefault(); if (!rows.length) return;
+        sel = e.key === 'ArrowDown' ? Math.min(rows.length - 1, sel + 1) : Math.max(0, sel < 0 ? 0 : sel - 1);
+        const els = list.querySelectorAll('.fp-row'); els.forEach(x => x.classList.remove('sel'));
+        const el = els[sel]; if (el){ el.classList.add('sel'); el.scrollIntoView({ block: 'nearest' }); el.focus(); }
+        return;
+      }
+      if (e.key === 'Enter' && sel >= 0 && rows[sel]){ e.preventDefault(); load(rows[sel].path); }
+    });
+    dlg.querySelector('[data-x="0"]').addEventListener('click', () => finish(null));
+    openBtn.addEventListener('click', () => finish(cur));
+    dlg.addEventListener('cancel', (e) => { e.preventDefault(); finish(null); });   // Escape (native)
+    dlg.addEventListener('click', (e) => { if (e.target === dlg) finish(null); });    // backdrop
+    try { dlg.showModal(); } catch { dlg.setAttribute('open', ''); }
+    load(startPath || null);
+    setTimeout(() => { try { openBtn.focus(); } catch {} }, 0);
+  });
+}
+// ---- Explorer file management (create / delete) ---------------------------
+// Create a new markdown file, optionally under `dir` (a project-relative folder, or the
+// content root from the header "New file"). `.md` is appended when omitted. On success the
+// The New file / New folder chooser — shared by the Explorer header + button and each folder
+// row's + action, so both offer the same two options anchored under the clicked button.
+function openNewMenu(dir, x, y){
+  openMenu(x, y, [
+    { label: 'New file…', icon: 'newfile', act: () => promptNewFile(dir) },
+    { label: 'New folder…', icon: 'newfolder', act: () => promptNewFolder(dir) },
+  ]);
+}
+// tree refreshes and the new file opens (pinned) for editing.
+async function promptNewFile(dir){
+  const prefix = dir ? dir.replace(/\/?$/, '/') : '';
+  const name = await promptDialog({ title: 'New file', label: 'File name', placeholder: 'notes.md', prefix });
+  if (name == null) return;
+  let rel = (prefix + name).replace(/\/{2,}/g, '/').replace(/^\//, '').trim();
+  if (!rel) return;
+  if (!/\.md$/i.test(rel)) rel += '.md';
+  const r = await api('POST', '/api/create', { path: rel, text: '' });
+  if (!r || r.error){
+    showToast(r && r.error === 'exists' ? 'A file with that name already exists.'
+      : r && r.error === 'endpoint-missing' ? `Editor is out of date — restart ${SERVE_CMD}.`
+      : 'Could not create the file.');
+    return;
+  }
+  TEL.event('ui.action', { area:'explorer', action:'create-file' });
+  await refreshTree();
+  openFileTab(r.path, { newTab: true });
+}
+// Create a new folder, optionally under `dir`. A folder is shown in the Explorer only once it
+// holds a Markdown file (the tree shows exactly the folders on a path to a `.md`), so creating a
+// folder flows straight into naming its first file — otherwise the new folder would be invisible.
+// Cancelling the file step leaves an empty folder on disk that simply doesn't appear until it has
+// content.
+async function promptNewFolder(dir){
+  const prefix = dir ? dir.replace(/\/?$/, '/') : '';
+  const name = await promptDialog({ title: 'New folder', label: 'Folder name', placeholder: 'ideas', prefix });
+  if (name == null) return;
+  const rel = (prefix + name).replace(/\/{2,}/g, '/').replace(/^\//, '').replace(/\/$/, '').trim();
+  if (!rel) return;
+  const r = await api('POST', '/api/mkdir', { path: rel });
+  if (!r || r.error){
+    showToast(r && r.error === 'exists' ? 'A folder with that name already exists.'
+      : r && r.error === 'endpoint-missing' ? `Editor is out of date — restart ${SERVE_CMD}.`
+      : 'Could not create the folder.');
+    return;
+  }
+  TEL.event('ui.action', { area:'explorer', action:'create-folder' });
+  if (dir) ensureFolderOpen(dir);                         // reveal the parent
+  ensureFolderOpen(r.path);                               // and pre-open the new folder
+  await promptNewFile(r.path);                            // name its first file so the folder appears
+}
+// Delete a file or a folder (recursive) from the Explorer — destructive, so it confirms
+// first. On success: close any tabs pointing inside it, refresh the tree, and toast.
+async function confirmDeleteEntry(path, isDir){
+  if (!path) return;
+  const ok = await confirmDialog({
+    title: isDir ? 'Delete folder?' : 'Delete file?',
+    body: isDir
+      ? `This permanently deletes the folder <b>${esc(baseName(path))}</b> and everything inside it. This can’t be undone.`
+      : `This permanently deletes <b>${esc(baseName(path))}</b>. This can’t be undone.`,
+    confirmLabel: 'Delete', danger: true,
+  });
+  if (!ok) return;
+  const r = await api('DELETE', '/api/file', { path });
+  if (!r || r.error){
+    showToast(r && r.error === 'endpoint-missing' ? `Editor is out of date — restart ${SERVE_CMD}.` : 'Could not delete.');
+    return;
+  }
+  TEL.event('ui.action', { area:'explorer', action:isDir ? 'delete-folder' : 'delete-file' });
+  dropFileTabs(id => id === path || id.startsWith(path + '/'));
+  await refreshTree();
+  showToast(isDir ? 'Folder deleted.' : 'File deleted.');
+}
+// Close every open FILE tab whose path matches `pred` (a deleted file / folder), fixing the
+// active-tab index and navigating away if the active tab was the one closed.
+function dropFileTabs(pred){
+  for (let i = S.tabs.length - 1; i >= 0; i--){
+    const t = S.tabs[i];
+    if (t.kind === 'file' && pred(t.id)) closeTab(i);
+  }
+}
+
+// ---- the comment bridge over SSE (server → browser push) ------------------
+// Debounced refresh of the Explorer's comment markers/filter after any comment change (on any
+// file). The open document's own comments are handled separately (S.comments + renderComments).
+let cmtCountTimer = null;
+function scheduleCommentCountsRefresh(){
+  if (cmtCountTimer) return;
+  cmtCountTimer = setTimeout(async () => { cmtCountTimer = null; await loadCommentCounts(); fillExplorer(); if (S.commentFilter) renderSidebar(); }, 300);
+}
+function initEvents(){
+  if (!window.EventSource) return;
+  try { if (S.es) S.es.close(); } catch {}
+  try { S.es = new EventSource('/api/events'); } catch { S.es = null; return; }
+  S.es.onmessage = (e) => { let m; try { m = JSON.parse(e.data); } catch { return; } handleBridgeEvent(m); };
+  S.es.onerror = () => { /* the browser auto-reconnects */ };
+}
+function handleBridgeEvent(m){
+  if (!m || !m.type) return;
+  if (m.type === 'fs'){ scheduleTreeRefresh(); scheduleGitSync(); scheduleDocReload(); return; }   // disk changed → refresh Explorer, the open file's diff-state, and its content
+  if (m.type === 'addressing'){ showToast('Agent is working through your comments…', { spin: true, ms: 8000 }); return; }
+  if (m.type === 'comment' || m.type === 'resolve' || m.type === 'delete') scheduleCommentCountsRefresh();   // keep Explorer markers/filter fresh for ANY file
+  if (m.file && m.file !== S.recFile) return;           // an event for a file we're not viewing
+  if (m.type === 'resolve'){
+    dropComment(m.commentId);
+    if (m.revised) reloadRecord();
+  } else if (m.type === 'delete'){
+    dropComment(m.commentId);
+  } else if (m.type === 'comment'){
+    if (droppedComments.has(m.comment.id)) return;      // a late echo of a just-deleted comment
+    const at = (S.comments || []).findIndex(x => x.id === m.comment.id);
+    if (at >= 0){ S.comments[at] = m.comment; renderComments(); }   // an EDIT echo → update in place
+    else { S.comments = [...(S.comments || []), m.comment]; renderComments(); }   // a new comment
+  }
+}
+// The agent may edit analysis.md while addressing a comment; re-pull the record so the
+// live document and diff reflect it (reviewable before the user commits).
+async function reloadRecord(){
+  if (wysiwygFocused()) return;                                    // never yank a live edit out from under the caret
+  const id = S.caseId; let rec;
+  try { rec = await api('GET', '/api/record?id=' + encodeURIComponent(id)); } catch { return; }
+  if (S.caseId !== id || !rec || rec.error) return;
+  if (rec.text === reconstruct(S.items)) { S.rec = rec; return; }   // no external change (e.g. our own save) → don't flicker
+  S.rec = rec; if (rec.text) S.items = segment(rec.text);
+  renderLive(); buildToc(); renderComments();
+  if (S.mode === 'diff') loadDiffBase().then(refreshDiffDecorations);
+  // The agent just wrote the file → the git change set moved; refresh it so the Explorer's
+  // diff mode + badges stay accurate.
+  if (S.isGit){ await loadGit(); if (S.diffMode) renderSidebar(); }
+}
+// Keep the OPEN document in sync with the file on disk when it changes OUTSIDE the app (an
+// editor, git checkout, the agent). Debounced, driven by the `fs` bridge event + the poll.
+// Never clobbers unsaved local edits (skips while dirty/saving), and skips identical content so
+// the app's own autosave doesn't cause a reload/flicker.
+let docReloadTimer = null;
+function scheduleDocReload(){ if (docReloadTimer) return; docReloadTimer = setTimeout(() => { docReloadTimer = null; reloadOpenDoc(); }, 200); }
+async function reloadOpenDoc(){
+  if (S.dirty || S.saving || wysiwygFocused()) return;   // don't overwrite unsaved / in-flight / actively-edited docs
+  if (S.caseId) return reloadRecord();
+  if (S.brief){ const id = S.brief.id; let rec; try { rec = await api('GET', '/api/brief?id=' + encodeURIComponent(id)); } catch { return; } if (S.brief?.id === id && rec && !rec.error && rec.text !== (S.brief.text || '')){ S.brief = { id, ...rec }; paintBrief(); } return; }
+  if (S.readout){ const id = S.readout.id; let rec; try { rec = await api('GET', '/api/readout?id=' + encodeURIComponent(id)); } catch { return; } if (S.readout?.id === id && rec && !rec.error && rec.text !== (S.readout.text || '')){ S.readout = { id, ...rec }; paintReadout(); } return; }
+  if (S.matchup){ const id = S.matchup.id; let rec; try { rec = await api('GET', '/api/matchup?id=' + encodeURIComponent(id)); } catch { return; } if (S.matchup?.id === id && rec && !rec.error && rec.text !== (S.matchup.text || '')){ S.matchup = { id, ...rec }; paintMatchup(); } return; }
+  if (S.file && !S.file.deleted){
+    const path = S.file.path; let rec;
+    try { rec = await api('GET', '/api/file?path=' + encodeURIComponent(path)); } catch { return; }
+    if (!rec || rec.error || !S.file || S.file.path !== path) return;
+    S.isGit = !!rec.isGit;
+    if (rec.text === reconstruct(S.items)) return;      // unchanged (e.g. our own save)
+    S.file = { path, ...rec }; S.recFile = rec.path || path;
+    S.items = rec.text ? segment(rec.text) : [{ kind: 'block', lines: [''] }];
+    renderLive(); buildToc(); renderComments();
+    if (S.mode === 'diff') loadDiffBase().then(refreshDiffDecorations);
+  }
+}
+// The project-relative file of the record currently open (case / brief / plain file).
+function recFile(){ return S.caseId ? (S.rec && S.rec.file) : S.recFile; }
+// True when that file has uncommitted changes (drives the Discard button).
+function recFileChanged(){ const f = recFile(); return !!(f && (S.git.changed || []).some(c => c.path === f)); }
+// ---- Diff mode = the LIVE EDITOR with change decorations ------------------
+// Diff mode is NOT a separate view: it is the exact same live-preview document (same layout,
+// typography, editing, checkboxes, comments, table-of-contents). The ONLY difference is a
+// decoration pass layered on top: blocks ADDED since the last commit get a green wash, MODIFIED
+// blocks a green wash above their removed (red) form, and removed blocks are shown inline as
+// read-only red decorations. `S.diffBase` caches the committed (HEAD) text for the open record;
+// the working side is always the live S.items, so highlights update as you type.
+async function loadDiffBase(){
+  S.diffBase = null;
+  const q = S.caseId ? ('id=' + encodeURIComponent(S.caseId)) : ('path=' + encodeURIComponent(recFile() || ''));
+  let d; try { d = await api('GET', '/api/diff?' + q); } catch { d = null; }
+  if (d && d.isGit && typeof d.base === 'string') S.diffBase = d.base.replace(/\r\n?/g, '\n');
+}
+// Apply (or refresh) the change decorations over the live document: serialize the Tiptap doc to
+// per-block Markdown, LCS-diff it against the committed base (normalized the SAME way via
+// mdBlocks), then hand the result to the editor's diff plugin — added/modified blocks get a
+// class, removed blocks render as read-only red islands before the block that follows them.
+// Block-level. `animate` is accepted for call-site compatibility (the plugin owns its reveal).
+function applyDiffDecorations(animate){
+  const ctl = wysiwygCtl; if (!ctl) return;
+  if (S.mode !== 'diff' || S.diffBase == null){ ctl.setDiff(null); return; }
+  const oldBlocks = mdBlocks(S.diffBase);
+  const newBlocks = ctl.blockSources();
+  const ops = lcsDiff(oldBlocks, newBlocks);
+  const nodeClasses = new Array(newBlocks.length).fill('');
+  const deletions = []; let ni = 0, pendingDel = [];
+  const flush = () => {
+    if (!pendingDel.length) return;
+    const html = pendingDel.map(src => `<div class="diffdel" role="note" aria-label="Removed since the last commit">${renderMarkdown(src) || '<p class="dempty">(removed blank line)</p>'}</div>`).join('');
+    deletions.push({ at: ni < newBlocks.length ? ni : -1, html, key: String(deletions.length) });
+    pendingDel = [];
+  };
+  for (const o of ops){
+    if (o.op === 'del'){ pendingDel.push(o.a); continue; }
+    const hadDel = pendingDel.length > 0;
+    flush();
+    if (o.op === 'add') nodeClasses[ni] = hadDel ? 'diff-mod' : 'diff-add';
+    ni++;
+  }
+  flush();
+  ctl.setDiff({ nodeClasses, deletions, count: newBlocks.length });
+}
+// Re-apply the change decorations (and rebuild the ToC so removed-heading decorations are
+// excluded). Used after entering diff mode and after edits.
+function refreshDiffDecorations(){ if (S.mode === 'diff'){ applyDiffDecorations(true); buildToc(); reserveRailForControls(); } }
+// Longest-common-subsequence diff of two arrays → an ordered list of {op:'eq'|'del'|'add'}.
+// Used for both the block-level rendered diff and the line-level change counts. Guarded against a
+// pathological product so a huge file never blocks the UI (it degrades to a whole-document swap).
+function lcsDiff(a, b){
+  const n = a.length, m = b.length;
+  if (n * m > 4000000){ return [...a.map(x => ({ op:'del', a:x })), ...b.map(x => ({ op:'add', b:x }))]; }
+  const dp = Array.from({ length: n + 1 }, () => new Int32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--)
+    dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+  const out = []; let i = 0, j = 0;
+  while (i < n && j < m){
+    if (a[i] === b[j]){ out.push({ op:'eq', a:a[i], b:b[j] }); i++; j++; }
+    else if (dp[i + 1][j] >= dp[i][j + 1]){ out.push({ op:'del', a:a[i] }); i++; }
+    else { out.push({ op:'add', b:b[j] }); j++; }
+  }
+  while (i < n){ out.push({ op:'del', a:a[i] }); i++; }
+  while (j < m){ out.push({ op:'add', b:b[j] }); j++; }
+  return out;
+}
+
+// The Document/Diff toggle (git repos only) + a Discard button in Diff view when
+// the file actually has uncommitted changes. Shared by the case, brief and file surfaces.
+function viewSeg(){
+  if (!S.isGit) return '';
+  const deleted = !!(S.file && S.file.deleted);
+  const discard = ((S.mode === 'diff' || deleted) && recFileChanged())
+    ? `<button type="button" class="tbtn danger" data-discard title="${deleted ? 'Restore this file from the last commit' : 'Discard all uncommitted changes in this file'}">${iconEl(ICON.revert)}${deleted ? 'Restore file' : 'Discard changes'}</button>` : '';
+  // A deleted file has no Document surface — only its removal Diff (+ a Restore).
+  if (deleted) return `${discard}<span class="rochip" title="This file was deleted — reviewing its removal">${iconEl(ICON.trash)}Deleted</span>`;
+  // A single compact toggle (not a two-button bar): the source-control-over-a-file glyph flips
+  // this file between its rendered document and its diff-against-committed. It's DISABLED when the
+  // file has no uncommitted changes (nothing to diff — no empty "no changes" dead-end); enabled
+  // with a gold dot when it does; pressed (ember) while the diff is showing.
+  const inDiff = S.mode === 'diff';
+  const changed = recFileChanged() || !!S.dirty;      // git-tracked change OR unsaved local edits (instant)
+  const label = !changed ? 'No uncommitted changes in this file'
+    : inDiff ? 'Show the document' : 'Show changes in this file';
+  const dot = (changed && !inDiff) ? '<span class="cdot" aria-hidden="true"></span>' : '';
+  return `${discard}<button type="button" class="viewtoggle ${inDiff ? 'on' : ''}" data-view="${inDiff ? 'doc' : 'diff'}"
+      aria-pressed="${inDiff}" ${changed ? '' : 'disabled'} title="${label}" aria-label="${label}">${iconEl(ICON.gitbranch)}${dot}</button>`;
+}
+// True when `path` is in the git change set as a removal (status includes 'D').
+function isDeletedChange(path){ return (S.git.changed || []).some(c => c.path === path && c.status.includes('D')); }
+// Re-paint whichever record surface is open (used by setMode + after a discard).
+function repaintRecord(){ if (S.caseId) paintCase(); else if (S.brief) paintBrief(); else if (S.readout) paintReadout(); else if (S.matchup) paintMatchup(); else if (S.file) paintFile(); }
+// The default view mode when opening a record: Diff when the Explorer is in diff mode
+// (reviewing changes), else the Document.
+function defaultRecordMode(){ return (S.diffMode && S.isGit) ? 'diff' : 'doc'; }
+
+// ---- autosave -------------------------------------------------------------
+function scheduleSave(){ clearTimeout(S.saveTimer); S.saveTimer = setTimeout(saveNow, 600); }
+async function saveNow(){
+  if (!S.dirty || docReadOnly()) return;
+  const text = currentSource();
+  if (S.caseId){
+    const caseId = S.caseId;                            // capture: the case may switch during the async POST
+    S.saving = true; updateSaveDot();
+    try { await api('POST', '/api/record', { id: caseId, text }); if (S.caseId === caseId){ S.dirty = false; S.items = segment(text); if (S.rec) S.rec.exists = true; } TEL.count('autosaves', 1); }
+    catch {}
+    if (S.caseId === caseId){ S.saving = false; updateSaveDot(); await refreshDocDiffAfterSave(); }
+    return;
+  }
+  if (S.file){
+    const path = S.file.path;                           // capture: the file may switch during the async POST
+    S.saving = true; updateSaveDot();
+    try { await api('POST', '/api/file', { path, text }); if (S.file && S.file.path === path){ S.dirty = false; S.file.text = text; S.items = segment(text); } TEL.count('autosaves', 1); }
+    catch {}
+    if (S.file && S.file.path === path){ S.saving = false; updateSaveDot(); await refreshDocDiffAfterSave(); }
+  }
+}
+// After an autosave, the file's diff-state may have changed in EITHER direction — a clean file now
+// differs, or an edited file was reverted back to its committed content. Refresh git status so the
+// canvas Document⇄Diff toggle reflects reality (loadGit re-syncs it). Cheap; the watcher filters
+// .git so this never triggers a refresh loop.
+async function refreshDocDiffAfterSave(){
+  if (S.isGit){ try { await loadGit(); } catch { /* poll covers it */ } }
+  syncDocDiff();
+}
+// Best-effort synchronous flush for tab-close / navigation-away, when a debounced save
+// would otherwise be dropped. sendBeacon survives unload; a sync XHR is the fallback.
+function flushOnUnload(){
+  TEL.beacon();                                          // drain any buffered content-free telemetry
+  // Buffered project config (Explorer state, …): beacon the pending patch so it survives unload.
+  if (Object.keys(S.cfgPending).length){
+    try {
+      const patch = S.cfgPending; S.cfgPending = {};
+      const body = JSON.stringify({ patch });
+      if (navigator.sendBeacon){ navigator.sendBeacon('/api/config', new Blob([body], { type: 'application/json' })); }
+      else { const x = new XMLHttpRequest(); x.open('POST', '/api/config', false); x.setRequestHeader('content-type', 'application/json'); x.send(body); }
+    } catch {}
+  }
+  if (S.saveTimer){ clearTimeout(S.saveTimer); S.saveTimer = null; }
+  if (!S.dirty || docReadOnly()) return;
+  const target = S.caseId ? { url: '/api/record', body: { id: S.caseId, text: currentSource() } }
+    : S.file ? { url: '/api/file', body: { path: S.file.path, text: currentSource() } } : null;
+  if (!target) return;
+  try {
+    const body = JSON.stringify(target.body);
+    if (navigator.sendBeacon){ navigator.sendBeacon(target.url, new Blob([body], { type: 'application/json' })); }
+    else { const x = new XMLHttpRequest(); x.open('POST', target.url, false); x.setRequestHeader('content-type', 'application/json'); x.send(body); }
+    S.dirty = false;
+  } catch {}
+}
+function updateSaveDot(){
+  const d = $('#savedot'), l = $('#savelbl'); if (!d) return;
+  d.classList.toggle('dirty', S.dirty && !S.saving);
+  d.classList.toggle('saving', S.saving);
+  if (l) l.textContent = S.saving ? 'Saving…' : S.dirty ? 'Unsaved' : '';
+}
+
+// ---- shell helpers --------------------------------------------------------
+function renderMain(html){ const m = $('#main'); if (m) m.innerHTML = html; const dd = $('#docdiff'); if (dd){ dd.hidden = true; dd.innerHTML = ''; } updateTabMark(); }
+// The Document⇄Diff toggle (+ its Discard action) rendered into the reading-canvas corner
+// (#docdiff), not the tab bar. Shown only for a git-backed open record; hidden on the inbox and
+// empty states (renderMain resets it). Called by wireCaseControls, so it re-renders on every
+// paint and on setMode — staying present across the document AND diff views.
+function renderCanvasDiff(){
+  const host = $('#docdiff'); if (!host) return;
+  const caseCtl = S.caseId ? caseCanvasControls() : '';               // verdict pill + prototype (in the canvas corner)
+  const seg = (S.isGit && (S.file || S.brief || S.readout || S.matchup || S.caseId)) ? viewSeg() : '';
+  const cnav = commentNavCmd();                                       // comment count + prev/next, beside the Diff toggle
+  const markup = caseCtl + cnav + seg;
+  host.innerHTML = markup; host.hidden = !markup;
+  if (!markup) return;
+  host.querySelectorAll('[data-view]').forEach(b => b.addEventListener('click', () => setMode(b.dataset.view)));
+  host.querySelectorAll('[data-cnav]').forEach(b => b.addEventListener('click', () => stepComment(b.dataset.cnav === 'prev' ? -1 : 1)));
+  const dc = host.querySelector('[data-discard]'); if (dc) dc.addEventListener('click', () => confirmDiscard());
+  const sj = host.querySelector('[data-scorejump]'); if (sj) sj.addEventListener('click', jumpToReasoning);
+  const pb = host.querySelector('[data-proto]');
+  if (pb && !(S.proto && S.proto.external)){ pb.addEventListener('click', () => openProto()); pb.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' '){ e.preventDefault(); openProto(); } }); }
+  const bp = host.querySelector('[data-buildproto]'); if (bp) bp.addEventListener('click', () => showBuildProto(bp));
+  reserveRailForControls();
+}
+// Reactively reflect the current file's change-state in the canvas Document⇄Diff toggle WITHOUT a
+// full re-render (cheap enough to run per keystroke) — so it ENABLES the instant the file is edited
+// (S.dirty) or git reports it changed, instead of only after a refresh. Never disabled mid-diff.
+function syncDocDiff(){
+  const changed = recFileChanged() || !!S.dirty;
+  // Changes vanished (reverted, discarded, or committed) while the diff was showing → the diff is
+  // now empty, so fall back to the document view. setMode repaints (which re-renders this control).
+  if (!changed && S.mode === 'diff' && (S.file || S.caseId || S.brief || S.readout || S.matchup)){ setMode('doc'); return; }
+  const host = $('#docdiff'); if (!host || host.hidden) return;
+  const btn = host.querySelector('.viewtoggle'); if (!btn) return;
+  const inDiff = S.mode === 'diff';
+  btn.disabled = !changed && !inDiff;
+  const label = !changed ? 'No uncommitted changes in this file' : inDiff ? 'Show the document' : 'Show changes in this file';
+  btn.title = label; btn.setAttribute('aria-label', label);
+  let dot = btn.querySelector('.cdot');
+  if (changed && !inDiff){ if (!dot){ dot = document.createElement('span'); dot.className = 'cdot'; dot.setAttribute('aria-hidden', 'true'); btn.appendChild(dot); } }
+  else if (dot){ dot.remove(); }
+}
+function emptyState(h, p){ return `<div class="canvaswrap"><div class="empty"><h2>${esc(h)}</h2><p>${p}</p></div></div>`; }
+// The branded empty surface — the ember mark + injected product name as a calm welcome,
+// shown on the empty Inbox (the app's home). `sub` is a short line; `hint` is trusted inline
+// HTML (it may carry a <code> command). Its counterpart, the tab-bar wordmark, is hidden while
+// a `.hero` is on screen so brand presence is never doubled (see updateTabMark).
+function brandedEmpty(sub, hint, actions){
+  const name = esc(BRAND);
+  return `<div class="canvaswrap"><div class="hero">
+    <span class="hero-mark" aria-hidden="true"><i></i></span>
+    <h1 class="hero-name">${name}</h1>
+    ${sub ? `<p class="hero-sub">${esc(sub)}</p>` : ''}
+    ${actions ? `<div class="hero-actions">${actions}</div>` : ''}
+    ${hint ? `<p class="hero-hint">${hint}</p>` : ''}
+  </div></div>`;
+}
+function openNav(){ document.body.classList.add('nav-open'); }
+function closeNav(){ document.body.classList.remove('nav-open'); }
+
+// ---- client telemetry (content-free; batched OFF the interaction hot path) ----------------
+// The browser can't reach the OTLP endpoint (no direct network, no secrets), so it accumulates
+// content-free events + aggregate rollups and POSTs them to /api/telemetry, where the server
+// re-emits them through the shared client (re-validating the schema allow-list). Enqueue is O(1);
+// the network flush is debounced + coalesced, and a pagehide beacon drains the tail — so telemetry
+// never sits on the render/interaction path (INP is a hard priority). No-op when consent is off.
+const TEL = (() => {
+  let enabled = false, queue = [], timer = null;
+  const inFlight = new Set();
+  const counters = Object.create(null), gauges = Object.create(null), histos = Object.create(null);
+  const clear = () => { queue = []; for (const k of Object.keys(counters)) delete counters[k]; for (const k of Object.keys(gauges)) delete gauges[k]; for (const k of Object.keys(histos)) delete histos[k]; };
+  const pending = () => queue.length || Object.keys(counters).length || Object.keys(gauges).length || Object.keys(histos).length;
+  const schedule = () => { if (!enabled || timer) return; timer = setTimeout(() => { timer = null; flush(); }, 10000); if (timer && timer.unref) timer.unref(); };
+  const drain = () => { const body = { events: queue, counters: { ...counters }, gauges: { ...gauges }, histograms: { ...histos } }; clear(); return body; };
+  async function flush(){
+    if (enabled && pending()) {
+      const body = drain();
+      try {
+        let request;
+        request = api('POST', '/api/telemetry', body).catch(() => {}).finally(() => inFlight.delete(request));
+        inFlight.add(request);
+      } catch { /* best-effort */ }
+    }
+    if (inFlight.size) await Promise.all([...inFlight]);
+  }
+  function beacon(){
+    if (!enabled || !pending()) return;
+    const body = drain();
+    try {
+      if (navigator.sendBeacon) navigator.sendBeacon('/api/telemetry', new Blob([JSON.stringify(body)], { type: 'application/json' }));
+      else api('POST', '/api/telemetry', body);
+    } catch { /* best-effort */ }
+  }
+  // Best-effort interaction-latency (INP-ish) sampling — aggregated into a histogram, never one
+  // event per interaction. Guarded: absent in jsdom/older browsers, so it simply doesn't run.
+  const startINP = () => {
+    if (typeof PerformanceObserver !== 'function') return;
+    try {
+      const po = new PerformanceObserver((list) => { for (const e of list.getEntries()) { if (e.duration) observe('inp_ms', Math.round(e.duration)); } });
+      po.observe({ type: 'event', buffered: true, durationThreshold: 40 });
+    } catch { /* unsupported entry type → skip */ }
+  };
+  function event(name, props){ if (!enabled) return; queue.push({ name, props: props || {} }); if (queue.length >= 40) flush(); else schedule(); }
+  function count(metric, n){ if (!enabled) return; counters[metric] = (counters[metric] || 0) + (Number(n) || 0); schedule(); }
+  function gauge(metric, v){ if (!enabled) return; const x = Number(v); if (!Number.isFinite(x) || x < 0) return; gauges[metric] = x; schedule(); }
+  function observe(metric, v){ if (!enabled) return; const x = Number(v); if (!Number.isFinite(x)) return; (histos[metric] || (histos[metric] = [])).push(x); schedule(); }
+  return {
+    setEnabled(v){ const was = enabled; enabled = !!v; if (!enabled) clear(); else if (!was) startINP(); },
+    isEnabled(){ return enabled; },
+    event, count, gauge, observe, flush, beacon,
+    _buffers(){ return { queue, counters, gauges, histos, inFlight }; },
+  };
+})();
+
+// ---- feedback + telemetry consent (the two user-facing surfaces) --------------------------
+// Feedback is a first-class tab so users can switch away and return without losing their draft.
+// User-authored words stay verbatim; the category-specific prompt only nudges useful framing.
+function renderFeedback(){
+  setTopActions('');
+  const d = S.feedbackDraft || { category:'other', message:'', sentiment:null, contact:'' };
+  const prompts = {
+    other: 'Tell us what is working, what is not, or anything else you want us to know.',
+    idea: 'What are you trying to achieve, and what gets in the way today? Describe the problem—not the solution you think should be built.',
+    bug: 'What happened? Describe what you expected, what happened instead, and the precise steps to reproduce it.',
+  };
+  const types = [
+    { value:'other', label:'General', note:'Thoughts, questions, or praise' },
+    { value:'idea', label:'Feature request', note:'A problem you cannot solve today' },
+    { value:'bug', label:'Bug report', note:'Something is not working' },
+  ];
+  const sentiments = [
+    { value:'up', label:'Positive', icon:'thumbUp' },
+    { value:'down', label:'Could be better', icon:'thumbDown' },
+    { value:'excited', label:'Excited', icon:'rocket' },
+  ];
+  renderMain(`<div class="feedback-wrap"><form class="feedback-page" id="feedback-page" novalidate>
+    <header class="feedback-head">
+      <h1>Send feedback</h1><p>Tell us what would make Sonorance more useful.</p>
+    </header>
+    <div class="feedback-form">
+      <fieldset class="feedback-type"><legend>What kind of feedback?</legend>
+        <div class="feedback-type-options" role="radiogroup" aria-label="Feedback type">
+          ${types.map((type) => `<button type="button" class="feedback-type-option ${d.category === type.value ? 'selected' : ''}" role="radio" aria-checked="${d.category === type.value}" tabindex="${d.category === type.value ? 0 : -1}" data-feedback-category="${type.value}">
+            <strong>${type.label}</strong><small>${type.note}</small>
+          </button>`).join('')}
+        </div>
+      </fieldset>
+      <label class="feedback-field" id="fbmsgl"><span>${d.category === 'bug' ? 'What went wrong?' : 'Your feedback'}</span>
+        <textarea id="fbmsg" rows="6" placeholder="${esc(prompts[d.category] || prompts.other)}">${esc(d.message)}</textarea>
+      </label>
+      <label class="feedback-field compact"><span>Email <em>Optional, for a reply</em></span>
+        <input type="email" id="fbcontact" value="${esc(d.contact)}" placeholder="you@example.com" autocomplete="email">
+      </label>
+      <fieldset class="feedback-sentiment"><legend>Sentiment <span>Optional</span></legend>
+        <div class="feedback-sentiment-options" role="group" aria-label="Sentiment">
+          ${sentiments.map((item) => `<button type="button" class="feedback-sentiment-option ${d.sentiment === item.value ? 'selected' : ''}" data-sentiment="${item.value}" aria-label="${item.label}" aria-pressed="${d.sentiment === item.value}" title="${item.label}">${iconEl(ICON[item.icon])}<span>${item.label}</span></button>`).join('')}
+        </div>
+      </fieldset>
+      <div class="feedback-trust">${iconEl(ICON.check)}<span>Only this form is submitted. Sonorance never reads your documents to create feedback.</span></div>
+      <p class="fb-note" id="fbhint" role="status"></p>
+      <div class="fb-actions"><button class="fb-send tbtn" id="fbsend" type="submit">${iconEl(ICON.send)}Send feedback</button></div>
+    </div>
+  </form></div>`);
+  const wrap = $('#feedback-page');
+  const categoryButtons = [...wrap.querySelectorAll('[data-feedback-category]')];
+  const captureDraft = () => {
+    S.feedbackDraft = {
+      category:wrap.dataset.category,
+      message:wrap.querySelector('#fbmsg').value,
+      sentiment:wrap.dataset.sentiment || null,
+      contact:wrap.querySelector('#fbcontact').value,
+    };
+  };
+  const selectCategory = (button) => {
+    const category = button.dataset.feedbackCategory;
+    wrap.dataset.category = category;
+    categoryButtons.forEach((option) => {
+      const selected = option === button;
+      option.classList.toggle('selected', selected);
+      option.setAttribute('aria-checked', String(selected));
+      option.tabIndex = selected ? 0 : -1;
+    });
+    wrap.querySelector('#fbmsgl span').textContent = category === 'bug' ? 'What went wrong?' : 'Your feedback';
+    wrap.querySelector('#fbmsg').placeholder = prompts[category] || prompts.other;
+    captureDraft();
+  };
+  wrap.dataset.category = d.category;
+  wrap.dataset.sentiment = d.sentiment || '';
+  categoryButtons.forEach((button, index) => {
+    button.addEventListener('click', () => selectCategory(button));
+    button.addEventListener('keydown', (event) => {
+      let next = null;
+      if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (index + 1) % categoryButtons.length;
+      else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (index - 1 + categoryButtons.length) % categoryButtons.length;
+      else if (event.key === 'Home') next = 0;
+      else if (event.key === 'End') next = categoryButtons.length - 1;
+      if (next == null) return;
+      event.preventDefault();
+      selectCategory(categoryButtons[next]);
+      categoryButtons[next].focus();
+    });
+  });
+  wrap.querySelectorAll('textarea,input[type="email"]').forEach((el) => el.addEventListener('input', captureDraft));
+  wrap.querySelectorAll('[data-sentiment]').forEach((button) => button.addEventListener('click', () => {
+    const sentiment = wrap.dataset.sentiment === button.dataset.sentiment ? '' : button.dataset.sentiment;
+    wrap.dataset.sentiment = sentiment;
+    wrap.querySelectorAll('[data-sentiment]').forEach((option) => {
+      const selected = option.dataset.sentiment === sentiment;
+      option.classList.toggle('selected', selected);
+      option.setAttribute('aria-pressed', String(selected));
+    });
+    captureDraft();
+  }));
+  wrap.addEventListener('submit', (event) => { event.preventDefault(); captureDraft(); submitFeedbackUI(wrap, wrap.dataset.sentiment || null); });
+}
+function openFeedback(){ openFeedbackTab(); }
+function closeFeedback(){
+  const idx = S.tabs.findIndex(t => t.kind === 'feedback');
+  if (idx >= 0) closeTab(idx);
+}
+async function submitFeedbackUI(wrap, sentiment){
+  const cat = wrap.dataset.category;
+  const message = wrap.querySelector('#fbmsg').value.trim();
+  const hint = wrap.querySelector('#fbhint');
+  if (!message){ hint.textContent = 'Please add a few words before sending.'; hint.classList.add('warn'); return; }
+  const payload = { category: cat, message, rating: sentiment, contact: wrap.querySelector('#fbcontact').value.trim() || null };
+  const send = wrap.querySelector('#fbsend'); send.disabled = true; send.textContent = 'Sending…';
+  const r = await api('POST', '/api/feedback', payload);
+  if (r && r.ok){ S.feedbackDraft = null; renderFeedback(); toast('Thanks — your feedback was sent.'); }
+  else { send.disabled = false; send.innerHTML = `${iconEl(ICON.send)}Send feedback`; hint.textContent = 'Could not send right now — it was saved locally and you can try again.'; hint.classList.add('warn'); }
+}
+// A quiet, self-dismissing confirmation (bottom-center). No dependency on any framework.
+function toast(msg){
+  let t = $('#dlbtoast'); if (t) t.remove();
+  t = document.createElement('div'); t.id = 'dlbtoast'; t.className = 'dlb-toast'; t.textContent = msg;
+  document.body.appendChild(t);
+  requestAnimationFrame(() => t.classList.add('show'));
+  setTimeout(() => { t.classList.remove('show'); setTimeout(() => t.remove(), 300); }, 2600);
+}
+// Flip the opt-out choice: persist server-side (shared with the CLI) + update the live client.
+async function setTelemetryConsent(enabled){
+  const previous = !(S.telemetry && S.telemetry.enabled === false);
+  const r = await api('POST', '/api/consent', { enabled: !!enabled });
+  if (!r || !r.ok) return previous;
+  const on = r.enabled !== false;
+  S.telemetry = { enabled: on };
+  TEL.setEnabled(on);
+  return on;
+}
+
+// ---- boot -----------------------------------------------------------------
+async function boot(){
+  lastTelemetryPage = null;
+  applyTheme(themePref());
+  applySavedSidebarWidth();
+  initSidebarResize();
+  $('#scrim') && $('#scrim').addEventListener('click', closeNav);
+  const add = $('#tabadd'); if (add && !add.__wired){ add.__wired = true; add.addEventListener('click', openInboxTab); }
+  const tsl = $('#tabscrollL'); if (tsl && !tsl.__wired){ tsl.__wired = true; tsl.addEventListener('click', () => nudgeTabs(-1)); }
+  const tsr = $('#tabscrollR'); if (tsr && !tsr.__wired){ tsr.__wired = true; tsr.addEventListener('click', () => nudgeTabs(1)); }
+  const ts = $('#tabs'); if (ts && !ts.__wired){ ts.__wired = true; ts.addEventListener('scroll', updateTabScroll, { passive: true }); }
+  const nb = $('#navbtn'); if (nb && !nb.__wired){ nb.__wired = true; nb.addEventListener('click', openNav); }
+  const ib = $('#inboxbtn'); if (ib && !ib.__wired){ ib.__wired = true; ib.addEventListener('click', () => { closeNav(); openInboxTab(); }); }
+  const sb = $('#settingsbtn'); if (sb && !sb.__wired){ sb.__wired = true; sb.addEventListener('click', openSettingsTab); }
+  const fbb = $('#feedbackbtn'); if (fbb && !fbb.__wired){ fbb.__wired = true; fbb.addEventListener('click', openFeedbackTab); }
+  if (!document.__selWired){ document.__selWired = true; document.addEventListener('selectionchange', onDocSelectionChange); }
+  if (!window.__saveGuardWired){
+    window.__saveGuardWired = true;
+    window.addEventListener('pagehide', flushOnUnload);
+    window.addEventListener('beforeunload', flushOnUnload);
+    document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') flushOnUnload(); });
+  }
+  initAtmosphere();
+  {
+    S.projectSlug = route().project || null;             // from /p/<slug>/… — scopes the first /api/state below
+    const st = await api('GET', '/api/state');
+    // Version-skew guard: a stale `serve` process serves the fresh UI but old routes. It
+    // returns /api/state without the `bridge` capability (or 404s it entirely) — warn the
+    // user to restart, instead of silently 404-ing every ask (the "disappears" bug).
+    if (st && (st.error === 'endpoint-missing' || (!st.error && !st.netError && st.bridge !== true))) maybeStale();
+    if (st && !st.error){
+      Object.assign(S, { project: st.project, projects: st.projects || [], cases: st.cases || [], briefs: st.briefs || [], readouts: st.readouts || [], matchups: st.matchups || [], kinds: st.kinds || [], isGit: !!st.isGit });
+      S.telemetry = st.telemetry || { enabled: true };     // content-free product telemetry (opt-out); UI mirrors the server's resolved state
+      TEL.setEnabled(S.telemetry.enabled !== false);
+      S.projectSlug = st.project ? st.project.id : null;   // canonical slug from the server (may differ from the URL)
+      try { document.title = BRAND; } catch {}
+      // Restore persisted tabs, dropping any that point at cases/briefs no longer present.
+      S.tabs = (st.tabs || []).filter(t => t && (t.kind === 'inbox' || t.kind === 'settings' || t.kind === 'feedback' || t.kind === 'file'
+          || (t.kind === 'brief' ? S.briefs.some(b => b.id === t.id) : t.kind === 'readout' ? S.readouts.some(r => r.id === t.id) : t.kind === 'matchup' ? S.matchups.some(m => m.id === t.id) : S.cases.some(s => s.id === t.id))))
+        .map(t => ({ kind: t.kind, id: t.id || undefined }));
+      S.activeTab = -1;
+      S._bootActive = st.activeTab || null;               // this project's last-focused tab {kind,id}
+      // Restore the Explorer collapse/expand state (baseline mode + exceptions). A project with
+      // no saved state defaults to fully collapsed.
+      S.explorer = (st.explorer && st.explorer.mode)
+        ? { mode: st.explorer.mode === 'expanded' ? 'expanded' : 'collapsed', ex: new Set(Array.isArray(st.explorer.ex) ? st.explorer.ex : []) }
+        : { mode: 'collapsed', ex: new Set() };
+      try {
+        const tr = await api('GET', '/api/tree');
+        S.tree = (tr && !tr.error && tr.tree) || [];
+        S.treeBase = (tr && typeof tr.base === 'string') ? tr.base : '';
+        S.inventory = (tr && tr.inventory) || { cases: S.cases.length, briefs: S.briefs.length, readouts: S.readouts.length, matchups: S.matchups.length };
+      } catch {
+        S.tree = []; S.treeBase = '';
+        S.inventory = { cases: S.cases.length, briefs: S.briefs.length, readouts: S.readouts.length, matchups: S.matchups.length };
+      }
+      await loadGit();                                     // current branch + changed set (for the diff-mode toggle)
+      await loadCommentCounts();                           // per-file open-comment counts (Explorer markers + filter)
+    } else { S.cases = []; S.briefs = []; S.readouts = []; S.matchups = []; S.inventory = null; S.kinds = []; S.tree = []; S.projects = []; S.tabs = []; S._bootActive = null; S.explorer = { mode:'collapsed', ex:new Set() }; }
+  }
+  initEvents();
+  startTreePolling();
+  startConfigFlush();
+  renderSidebar();
+  renderTabs();
+  restoreBootRoute();
+  await render();
+  captureProjectInventory();
+}
+// On (re)boot — including a project switch — the URL may point at the previous project's
+// case. Respect only a deep link valid in THIS project; otherwise re-focus the project's
+// own last-active tab (or its first tab, or home). This keeps tabs strictly per-project.
+function specRoute(spec){ return spec.kind === 'inbox' ? '/inbox' : spec.kind === 'settings' ? '/settings' : spec.kind === 'feedback' ? '/feedback' : spec.kind === 'file' ? '/file/' + encFilePath(spec.id) : (spec.kind === 'brief' ? '/brief/' : spec.kind === 'readout' ? '/readout/' : spec.kind === 'matchup' ? '/matchup/' : '/case/') + spec.id; }
+function tabSpecValid(spec){
+  if (!spec) return false;
+  if (spec.kind === 'inbox') return S.tabs.some(t => t.kind === 'inbox');
+  if (spec.kind === 'settings') return S.tabs.some(t => t.kind === 'settings');
+  if (spec.kind === 'feedback') return S.tabs.some(t => t.kind === 'feedback');
+  if (spec.kind === 'file') return S.tabs.some(t => t.kind === 'file' && t.id === spec.id);
+  if (spec.kind === 'brief') return S.briefs.some(b => b.id === spec.id) && S.tabs.some(t => t.kind === 'brief' && t.id === spec.id);
+  if (spec.kind === 'readout') return S.readouts.some(r => r.id === spec.id) && S.tabs.some(t => t.kind === 'readout' && t.id === spec.id);
+  if (spec.kind === 'matchup') return S.matchups.some(m => m.id === spec.id) && S.tabs.some(t => t.kind === 'matchup' && t.id === spec.id);
+  return S.cases.some(s => s.id === spec.id) && S.tabs.some(t => t.kind === 'case' && t.id === spec.id);
+}
+function restoreBootRoute(){
+  const PFX = S.project ? '/p/' + encodeURIComponent(S.project.id) : '';
+  const r = route();
+  const innerValid =
+    (r.name === 'case'  && S.cases.some(s => s.id === r.id)) ||
+    (r.name === 'brief' && S.briefs.some(b => b.id === r.id)) ||
+    (r.name === 'readout' && S.readouts.some(x => x.id === r.id)) ||
+    (r.name === 'matchup' && S.matchups.some(m => m.id === r.id)) ||
+    (r.name === 'file'  && S.tabs.some(t => t.kind === 'file' && t.id === r.id)) ||
+    (r.name === 'inbox' && S.tabs.some(t => t.kind === 'inbox')) ||
+    r.name === 'settings' ||
+    r.name === 'feedback';
+  let inner = null;
+  if (innerValid) inner = specRoute({ kind: r.name, id: r.id });          // a valid deep link into THIS project
+  else if (tabSpecValid(S._bootActive)) inner = specRoute(S._bootActive); // else the project's last-focused tab
+  else if (S.tabs.length) inner = specRoute({ kind: S.tabs[0].kind, id: S.tabs[0].id });
+  const dest = PFX + (inner || '/');                                       // always carries the /p/<slug> prefix
+  if (location.pathname !== dest) history.replaceState({}, '', dest);
+}
+// Subtle parallax: the main scroll gently drifts the atmospheric backdrop (--py),
+// rAF-throttled and disabled under reduced-motion. Also drops blur while resizing.
+function initAtmosphere(){
+  let reduce = false;
+  try { reduce = window.matchMedia('(prefers-reduced-motion:reduce)').matches; } catch {}
+  const root = document.documentElement;
+  if (!reduce){
+    let ticking = false, idle = null;
+    const main = $('#main');
+    const onScroll = () => {
+      // Pause the glass backdrop-blur while the parallax is moving the atmosphere (it makes
+      // re-blur cheap → smooth scroll); restore it shortly after scrolling stops.
+      if (!root.classList.contains('scrolling')) root.classList.add('scrolling');
+      clearTimeout(idle); idle = setTimeout(() => root.classList.remove('scrolling'), 140);
+      if (ticking) return; ticking = true;
+      requestAnimationFrame(() => {
+        const y = main ? main.scrollTop : 0;
+        root.style.setProperty('--py', String(Math.min(y * 0.46, 720)));
+        ticking = false;
+      });
+    };
+    main && main.addEventListener('scroll', onScroll, { passive:true });
+  }
+  let rt;
+  window.addEventListener('resize', () => {
+    root.classList.add('resizing');
+    measureTabMark(); updateTabScroll();
+    clearTimeout(rt); rt = setTimeout(() => { root.classList.remove('resizing'); applyTrimTitles(); measureTabMark(); updateTabScroll(); reserveRailForControls(); if (S.file || S.caseId || S.brief || S.readout || S.matchup) renderComments(); }, 180);
+  }, { passive:true });
+}
+// ---- resizable sidebar -----------------------------------------------------
+// The left rail is drag-resizable via the #sbresize divider on its boundary. Width lives
+// in the `--sb` custom property (the grid's first column) and is clamped to [--sb-min,
+// --sb-max] and persisted. Keyboard: ←/→ nudge, Home/End jump to the bounds, double-click
+// resets to the default.
+const SB_DEFAULT = 288;
+function clampSb(w){
+  const cs = getComputedStyle(document.documentElement);
+  const min = parseInt(cs.getPropertyValue('--sb-min')) || 220;
+  const max = parseInt(cs.getPropertyValue('--sb-max')) || 560;
+  return Math.max(min, Math.min(max, Math.round(w)));
+}
+function curSb(){ return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sb')) || SB_DEFAULT; }
+function setSidebarWidth(w, persist){
+  const px = clampSb(w);
+  document.documentElement.style.setProperty('--sb', px + 'px');
+  if (persist){ try { localStorage.setItem('dlb-sb', String(px)); } catch {} }
+  applyTrimTitles();
+  measureTabMark();
+  return px;
+}
+function applySavedSidebarWidth(){
+  let w; try { w = parseInt(localStorage.getItem('dlb-sb') || '', 10); } catch {}
+  if (w) document.documentElement.style.setProperty('--sb', clampSb(w) + 'px');
+}
+function initSidebarResize(){
+  const h = $('#sbresize'); if (!h || h.__wired) return; h.__wired = true;
+  let startX = 0, startW = 0, dragging = false;
+  const move = (e) => { if (dragging) setSidebarWidth(startW + (e.clientX - startX), false); };
+  const up = () => { if (!dragging) return; dragging = false; document.body.classList.remove('resizing-sb'); window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); try { localStorage.setItem('dlb-sb', String(curSb())); } catch {} };
+  h.addEventListener('pointerdown', (e) => { if (e.button !== 0) return; e.preventDefault(); dragging = true; startX = e.clientX; startW = curSb(); document.body.classList.add('resizing-sb'); window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); });
+  h.addEventListener('dblclick', () => setSidebarWidth(SB_DEFAULT, true));
+  h.addEventListener('keydown', (e) => {
+    const k = e.key;
+    if (k === 'ArrowLeft'){ e.preventDefault(); setSidebarWidth(curSb() - 16, true); }
+    else if (k === 'ArrowRight'){ e.preventDefault(); setSidebarWidth(curSb() + 16, true); }
+    else if (k === 'Home'){ e.preventDefault(); setSidebarWidth(0, true); }        // clamps to --sb-min
+    else if (k === 'End'){ e.preventDefault(); setSidebarWidth(9999, true); }       // clamps to --sb-max
+  });
+}
+try {
+  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').addEventListener &&
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { if (!themePref()) applyTheme(''); });
+} catch {}
+
+// expose pure fns + actions for tests
+window.DLB = { renderMarkdown, inline, segment, reconstruct, verdict, boot, render, navigate, resolveAssetSrc, openDocLink,
+               openCase, openBrief, openReadout, openMatchup, renderInbox, renderSettings, renderFeedback, applyTheme, openCaseTab, openBriefTab, openReadoutTab, openMatchupTab, openInboxTab, openSettingsTab, openFeedbackTab, closeTab, closeOthers, closeAll,
+               switchProject, projMenu, openFolderPrompt, folderDialog, removeVault, briefLabel, readoutLabel, matchupLabel, fillExplorer, renderTree, pruneTree, matchFileNode, toggleFolder, folderOpen, collapseAllFolders, expandAllFolders, toggleCollapseAll, allTopCollapsed, queueConfig, flushConfig, queueExplorer, openFile, openFileTab, renderLive, renderComments, submitComment, createComment, maybeStale, handleBridgeEvent, loadComments,
+               openCommentPop, focusComment, deleteCommentUI, dropComment, stepComment, startEditComment, commentOnBlock,
+               currentSource, reloadOpenDoc, scheduleDocReload,
+               flushSave, flushOnUnload, saveNow,
+               applyTrimTitles, setSidebarWidth, initSidebarResize, curSb,
+               setDiffMode, refreshTree, promptNewFile, promptNewFolder, confirmDeleteEntry, moveEntry, renameEntry, validDrop, dropDirFor, route, encFilePath, decFilePath, updateTabMark, measureTabMark, updateTabScroll, nudgeTabs, syncDocDiff,
+               reserveRailForControls, dirGitStatus, loadDiffBase, applyDiffDecorations, refreshDiffDecorations, buildToc,
+               maybeShowAsk: () => maybeShowAsk($('#doc')),
+               maybeShowTableTools, openAtComment,
+               openFeedback, closeFeedback, submitFeedbackUI, setTelemetryConsent, tel: () => TEL,
+               wysiwyg: () => wysiwygCtl,
+               setMode, state: () => S };
+
+if (!window.__DLB_NO_AUTOBOOT){
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
+  else boot();
+}
+})();