claude-plan-review 0.3.2 → 0.5.0

package/src/ui/app.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const $ = (id) => document.getElementById(id);
+const enc = encodeURIComponent;
 const esc = (s) =>
   String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
 
@@ -9,7 +10,10 @@ async function api(path, opts) {
   if (!res.ok) {
     const body = await res.json().catch(() => ({}));
     const err = new Error(body.error || res.statusText);
+    err.status = res.status;
+    err.body = body;
     err.fixCommand = body.fixCommand ?? null;
+    err.pendingReviews = body.pendingReviews ?? null;
     throw err;
   }
   return res.status === 204 ? null : res.json();
@@ -21,15 +25,30 @@ const state = {
   baseVersion: null,
   reviewId: null,
   review: null,
+  projects: [],
   versions: [],
-  data: null, // { markdown, html, meta }
-  comments: [],
+  data: null, // { markdown, html, meta, kind?, manifest? }
+  // --- multi-document ---
+  manifest: null, // current version's manifest, or null for legacy/flat
+  kind: "single",
+  doc: "root", // active doc slug
+  docCache: new Map(), // slug → {slug,title,parent,markdown,html}
+  manifestCache: new Map(), // version n → manifest|null (for the diff doc union)
+  allComments: [], // every comment on the version (each carries `doc`) — drives badges
+  viewAsTree: false, // single-doc display-only outline mode
+  treeSection: -1, // selected outline section index (-1 = show all)
+  _sections: null, // cached outline sections for the current preview
+  // --- deletion ---
+  pendingDelete: null, // { type:"version"|"project"|"bulk", key, n?, ns?, fromManage? }
+  manageProjects: null,
+  // ---
+  comments: [], // comments scoped to the active doc
   tab: "preview",
   diffMode: "split",
-  sel: { anchor: null, start: null, end: null }, // source line-range selection
-  dragging: false,
-  storage: {}, // channel bindings for the current project, e.g. { gist: {...} }
-  channels: [], // channel readiness (loaded when the save modal opens)
+  pendingSel: null,
+  pendingDoc: null, // &doc= from the initial URL, consumed once
+  storage: {},
+  channels: [],
 };
 
 function toast(msg) {
@@ -46,6 +65,7 @@ async function init() {
   state.key = q.get("project");
   state.reviewId = q.get("review");
   const wantV = q.get("version");
+  state.pendingDoc = q.get("doc");
 
   wireUI();
   api("/api/version")
@@ -66,8 +86,11 @@ function showEmpty(msg) {
   document.querySelectorAll(".panel").forEach((p) => p.classList.remove("active"));
   $("panel-preview").classList.add("active");
   $("preview").innerHTML = `<div class="empty">${esc(msg)}</div>`;
+  $("docSidebar").hidden = true;
   $("reviewActions").hidden = true;
   $("saveActions").hidden = true;
+  $("deleteVerBtn").hidden = true;
+  $("treeToggle").hidden = true;
 }
 
 async function loadProjects() {
@@ -86,9 +109,10 @@ async function loadProjects() {
 async function selectProject(key, wantV) {
   state.key = key;
   $("projectSel").value = key;
-  const { versions } = await api(`/api/projects/${encodeURIComponent(key)}`);
+  state.manifestCache = new Map();
+  const { versions } = await api(`/api/projects/${enc(key)}`);
   state.versions = versions;
-  state.storage = await api(`/api/projects/${encodeURIComponent(key)}/storage`).catch(() => ({}));
+  state.storage = await api(`/api/projects/${enc(key)}/storage`).catch(() => ({}));
   if (!versions.length) {
     showEmpty("This project has no plan versions yet.");
     return;
@@ -99,6 +123,7 @@ async function selectProject(key, wantV) {
   const fmt = (v) => `v${v.n} · ${new Date(v.createdAt).toLocaleString()}${v.n === latest ? " (current)" : ""}`;
   $("versionSel").innerHTML = versions.map((v) => `<option value="${v.n}">${esc(fmt(v))}</option>`).join("");
   $("versionSel").value = String(state.version);
+  $("deleteVerBtn").hidden = false;
 
   // base = the version right before current, if any
   state.baseVersion = versions.length > 1 ? versions[versions.findIndex((v) => v.n === state.version) - 1]?.n ?? versions[0].n : null;
@@ -113,21 +138,87 @@ async function selectProject(key, wantV) {
 
 async function loadVersion(n) {
   state.version = n;
-  state.data = await api(`/api/projects/${encodeURIComponent(state.key)}/versions/${n}`);
-  state.comments = await api(`/api/projects/${encodeURIComponent(state.key)}/versions/${n}/comments`);
+  hideSelPop();
+  state.viewAsTree = false;
+  state.treeSection = -1;
+  state.docCache = new Map();
+  state.data = await api(`/api/projects/${enc(state.key)}/versions/${n}`);
+  // Legacy/flat servers return no manifest — treat the whole plan as one root doc.
+  state.manifest = state.data.manifest || null;
+  const docs = state.manifest?.docs || [];
+  const isTree = docs.length > 1;
+  state.kind = state.data.kind || (isTree ? "tree" : "single");
   $("diffCur").textContent = n;
-  renderPreview();
-  renderSource();
-  renderGeneral();
-  updateCommentCount();
+  updateTreeToggle();
+
+  if (isTree) {
+    // sidebar badge counts come from one unscoped fetch; threads filter it per doc.
+    state.allComments = await api(`/api/projects/${enc(state.key)}/versions/${n}/comments`);
+    let slug = state.manifest.root || docs[0].slug;
+    if (state.pendingDoc && docs.some((d) => d.slug === state.pendingDoc)) slug = state.pendingDoc;
+    state.pendingDoc = null;
+    await loadDoc(slug);
+  } else {
+    state.doc = "root";
+    state.comments = await api(`/api/projects/${enc(state.key)}/versions/${n}/comments`);
+    state.allComments = state.comments;
+    renderPreview();
+    renderGeneral();
+    updateCommentCount();
+    renderSidebar();
+  }
+
   refreshSaveUI();
   await refreshReview();
   if (state.tab === "diff") loadDiff();
 }
 
+// Load a document within a tree version (cached), scoping comments + preview to it.
+async function loadDoc(slug) {
+  state.doc = slug;
+  hideSelPop();
+  let doc = state.docCache.get(slug);
+  if (!doc) {
+    doc = await api(`/api/projects/${enc(state.key)}/versions/${state.version}/docs/${enc(slug)}`);
+    state.docCache.set(slug, doc);
+  }
+  state.data = { ...state.data, markdown: doc.markdown, html: doc.html };
+  state.comments = (state.allComments || []).filter((c) => (c.doc || "root") === slug);
+  updateDocParam();
+  renderPreview();
+  renderGeneral();
+  updateCommentCount();
+  renderSidebar();
+}
+
+// keep &doc in the URL in sync without a reload (no pushState today — greenfield)
+function updateDocParam() {
+  const q = new URLSearchParams(location.search);
+  if (state.key) q.set("project", state.key);
+  if (state.version) q.set("version", String(state.version));
+  if (state.doc && state.doc !== "root") q.set("doc", state.doc);
+  else q.delete("doc");
+  history.replaceState(null, "", location.pathname + "?" + q.toString());
+}
+
+// refetch comments after a create/delete, keeping the doc-scoped + badge views in sync
+async function refreshComments() {
+  state.allComments = await api(`/api/projects/${enc(state.key)}/versions/${state.version}/comments`);
+  const isTree = state.manifest && state.manifest.docs.length > 1;
+  state.comments = isTree
+    ? state.allComments.filter((c) => (c.doc || "root") === state.doc)
+    : state.allComments;
+  renderPreview();
+  renderGeneral();
+  updateCommentCount();
+  renderSidebar();
+}
+
 // ---------- rendering ----------
 function renderPreview() {
   $("preview").innerHTML = state.data.html || "<p class='empty'>(empty plan)</p>";
+  renderThreads();
+  if (state.viewAsTree) applyTreeView();
 }
 
 // threads are anchored under the END line of their range; covered = every line a comment spans
@@ -154,28 +245,45 @@ function locLabel(c) {
 
 function commentHTML(c) {
   const loc = locLabel(c);
+  const quote = c.quote ? `<div class="cquote">${esc(c.quote)}</div>` : "";
   return `<div class="comment" data-id="${c.id}">
     <div class="chead"><span><b>${esc(c.author)}</b>${loc ? ` · <span class="loc">${loc}</span>` : ""} · ${new Date(c.createdAt).toLocaleString()}</span>
       <button class="del" data-del="${c.id}">delete</button></div>
+    ${quote}
     <div class="cbody">${esc(c.body)}</div></div>`;
 }
 
-function renderSource() {
-  const lines = (state.data.markdown || "").split("\n");
+// map a source line to the rendered block that spans it
+function blockForLine(line) {
+  const blocks = $("preview").querySelectorAll(".md-block");
+  for (const b of blocks) {
+    if (Number(b.dataset.lineStart) <= line && line <= Number(b.dataset.lineEnd)) return b;
+  }
+  return blocks[blocks.length - 1] || null;
+}
+
+// render inline comment threads into the preview, anchored after their block
+function renderThreads() {
+  const preview = $("preview");
+  preview.querySelectorAll(".threads, .composer.inline").forEach((n) => n.remove());
   const { byAnchor, covered } = commentLayout();
-  const { start, end } = state.sel;
-  const inSel = (n) => start != null && n >= start && n <= end;
-  let html = "";
-  for (let i = 0; i < lines.length; i++) {
-    const num = i + 1;
-    const threads = byAnchor.get(num) || [];
-    const cls = [covered.has(num) ? "has-comments" : "", inSel(num) ? "sel" : ""].filter(Boolean).join(" ");
-    html += `<div class="srow ${cls}" data-line="${num}">
-      <div class="sgutter" data-add="${num}">${num}</div>
-      <div class="scode">${esc(lines[i]) || "&nbsp;"}</div></div>`;
-    if (threads.length) html += `<div class="threads">${threads.map(commentHTML).join("")}</div>`;
+
+  preview.querySelectorAll(".md-block").forEach((b) => {
+    const s = Number(b.dataset.lineStart);
+    const e = Number(b.dataset.lineEnd);
+    let has = false;
+    for (let k = s; k <= e && !has; k++) if (covered.has(k)) has = true;
+    b.classList.toggle("has-comments", has);
+  });
+
+  for (const [anchor, threads] of byAnchor) {
+    const block = blockForLine(anchor);
+    if (!block) continue;
+    const box = document.createElement("div");
+    box.className = "threads";
+    box.innerHTML = threads.map(commentHTML).join("");
+    block.after(box);
   }
-  $("source").innerHTML = html;
 }
 
 function renderGeneral() {
@@ -184,67 +292,230 @@ function renderGeneral() {
 }
 
 function updateCommentCount() {
-  const n = state.comments.length;
+  const n = (state.allComments || state.comments).length;
   $("cCount").textContent = n ? n : "";
 }
 
+// ---------- sidebar (doc tree / outline) ----------
+function docCounts() {
+  const m = new Map();
+  for (const c of state.allComments || []) {
+    const d = c.doc || "root";
+    m.set(d, (m.get(d) || 0) + 1);
+  }
+  return m;
+}
+
+function renderSidebar() {
+  const sb = $("docSidebar");
+  const isTree = state.manifest && state.manifest.docs.length > 1;
+  if (isTree) {
+    sb.hidden = false;
+    sb.innerHTML = renderDocTree();
+  } else if (state.viewAsTree) {
+    sb.hidden = false;
+    sb.innerHTML = renderHeadingTree();
+  } else {
+    sb.hidden = true;
+    sb.innerHTML = "";
+  }
+}
+
+function renderDocTree() {
+  const docs = state.manifest.docs.slice().sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const bySlug = new Map(docs.map((d) => [d.slug, d]));
+  const rootSlug = state.manifest.root || "root";
+  const counts = docCounts();
+  const pending = state.review && state.review.status === "pending";
+
+  const parentKey = (d) => {
+    const p = d.parent;
+    if (!p || p === "") return d.slug === rootSlug ? null : rootSlug;
+    return p;
+  };
+
+  const rows = [];
+  const seen = new Set();
+  const walk = (slug, depth) => {
+    if (seen.has(slug)) return;
+    const d = bySlug.get(slug);
+    if (!d) return;
+    seen.add(slug);
+    rows.push(docRow(d, depth, counts, pending));
+    docs.filter((x) => parentKey(x) === slug).forEach((ch) => walk(ch.slug, depth + 1));
+  };
+  walk(rootSlug, 0);
+  // orphans (parent points nowhere) — render at top level so nothing is lost
+  docs.forEach((d) => {
+    if (!seen.has(d.slug)) walk(d.slug, 0);
+  });
+
+  return `<div class="sb-head">Documents</div>${rows.join("")}`;
+}
+
+function docRow(d, depth, counts, pending) {
+  const n = counts.get(d.slug) || 0;
+  const active = d.slug === state.doc ? " active" : "";
+  const dot = n > 0 && pending ? `<span class="sb-dot" title="comments pending review"></span>` : "";
+  const badge = n ? `<span class="sb-badge">${n}</span>` : "";
+  return `<a class="sb-row${active}" data-doc="${esc(d.slug)}" href="#" style="padding-left:${8 + depth * 14}px">
+    <span class="sb-title">${esc(d.title)}</span>${dot}${badge}</a>`;
+}
+
+// ---------- view-as-tree (single-doc, display-only) ----------
+// Split the server-rendered preview into heading sections. Blocks are HIDDEN via
+// a class, never detached — blockForLine/commentLayout still walk them by line.
+function computeSections() {
+  const blocks = [...$("preview").querySelectorAll(".md-block")];
+  const sections = [];
+  let cur = null;
+  for (const b of blocks) {
+    const first = b.firstElementChild;
+    const isHeading = first && /^H[1-6]$/.test(first.tagName);
+    if (isHeading) {
+      cur = { id: sections.length, level: Number(first.tagName[1]), title: first.textContent.trim() || "(untitled)", blocks: [b] };
+      sections.push(cur);
+    } else {
+      if (!cur) {
+        cur = { id: sections.length, level: 0, title: "(top)", blocks: [] };
+        sections.push(cur);
+      }
+      cur.blocks.push(b);
+    }
+  }
+  return sections;
+}
+
+function applyTreeView() {
+  const sections = computeSections();
+  state._sections = sections;
+  if (state.treeSection >= sections.length) state.treeSection = -1;
+  const blocks = [...$("preview").querySelectorAll(".md-block")];
+
+  const show = new Set();
+  if (state.treeSection === -1) {
+    blocks.forEach((b) => show.add(b));
+  } else {
+    const sel = sections[state.treeSection];
+    sel.blocks.forEach((b) => show.add(b));
+    if (sel.level !== 0) {
+      for (let j = state.treeSection + 1; j < sections.length; j++) {
+        if (sections[j].level > sel.level) sections[j].blocks.forEach((b) => show.add(b));
+        else break;
+      }
+    }
+  }
+  blocks.forEach((b) => b.classList.toggle("tree-hidden", !show.has(b)));
+  // hide threads whose owning block is hidden
+  $("preview").querySelectorAll(".threads, .composer.inline").forEach((t) => {
+    const prev = t.previousElementSibling;
+    const hidden = prev && prev.classList.contains("md-block") && prev.classList.contains("tree-hidden");
+    t.classList.toggle("tree-hidden", !!hidden);
+  });
+}
+
+function renderHeadingTree() {
+  const sections = state._sections || computeSections();
+  state._sections = sections;
+  const rows = [`<div class="sb-head">Outline</div>`];
+  rows.push(
+    `<a class="sb-row${state.treeSection === -1 ? " active" : ""}" data-sec="-1" href="#"><span class="sb-title">Show all</span></a>`,
+  );
+  sections.forEach((s, i) => {
+    if (s.level === 0 && !s.blocks.length) return;
+    const depth = s.level === 0 ? 0 : s.level - 1;
+    rows.push(
+      `<a class="sb-row${state.treeSection === i ? " active" : ""}" data-sec="${i}" href="#" style="padding-left:${8 + depth * 14}px"><span class="sb-title">${esc(s.title)}</span></a>`,
+    );
+  });
+  return rows.join("");
+}
+
+function updateTreeToggle() {
+  const isTree = state.manifest && state.manifest.docs.length > 1;
+  const t = $("treeToggle");
+  t.hidden = isTree; // real doc trees get the sidebar automatically
+  if (isTree) state.viewAsTree = false;
+  t.classList.toggle("active", state.viewAsTree);
+  t.textContent = state.viewAsTree ? "Exit tree view" : "View as tree";
+}
+
 // ---------- comments ----------
-async function addComment(line, lineEnd, body) {
+async function addComment(line, lineEnd, body, quote) {
   if (!body.trim()) return;
-  await api(`/api/projects/${encodeURIComponent(state.key)}/versions/${state.version}/comments`, {
+  await api(`/api/projects/${enc(state.key)}/versions/${state.version}/comments`, {
     method: "POST",
     headers: { "content-type": "application/json" },
-    body: JSON.stringify({ line, lineEnd, body }),
+    body: JSON.stringify({ doc: state.doc, line, lineEnd, quote: quote ?? null, body }),
   });
-  state.comments = await api(`/api/projects/${encodeURIComponent(state.key)}/versions/${state.version}/comments`);
-  renderSource();
-  renderGeneral();
-  updateCommentCount();
+  await refreshComments();
 }
 
 async function delComment(id) {
-  await api(`/api/projects/${encodeURIComponent(state.key)}/versions/${state.version}/comments/${id}`, {
+  await api(`/api/projects/${enc(state.key)}/versions/${state.version}/comments/${id}`, {
     method: "DELETE",
   });
-  state.comments = state.comments.filter((c) => c.id !== id);
-  renderSource();
-  renderGeneral();
-  updateCommentCount();
+  await refreshComments();
 }
 
-// lightweight selection repaint — toggles a class on existing rows so we don't
-// rebuild the DOM mid-drag (which would break pointer tracking)
-function paintSelection() {
-  const { start, end } = state.sel;
-  document.querySelectorAll("#source .srow").forEach((row) => {
-    const n = Number(row.dataset.line);
-    row.classList.toggle("sel", start != null && n >= start && n <= end);
+// ---------- text selection → line-anchored comment ----------
+function currentSelection() {
+  const sel = window.getSelection();
+  if (!sel || sel.isCollapsed || sel.rangeCount === 0) return null;
+  const range = sel.getRangeAt(0);
+  const preview = $("preview");
+  if (!preview.contains(range.commonAncestorContainer)) return null;
+  const quote = sel.toString().replace(/\s+/g, " ").trim();
+  if (!quote) return null;
+
+  const blocks = [];
+  preview.querySelectorAll(".md-block").forEach((b) => {
+    if (b.classList.contains("tree-hidden")) return;
+    const ir = range.cloneRange();
+    const br = document.createRange();
+    br.selectNodeContents(b);
+    if (ir.compareBoundaryPoints(Range.START_TO_START, br) < 0) ir.setStart(br.startContainer, br.startOffset);
+    if (ir.compareBoundaryPoints(Range.END_TO_END, br) > 0) ir.setEnd(br.endContainer, br.endOffset);
+    if (!ir.collapsed && ir.toString().trim()) blocks.push(b);
   });
+  if (!blocks.length) return null;
+  const start = Math.min(...blocks.map((b) => Number(b.dataset.lineStart)));
+  const end = Math.max(...blocks.map((b) => Number(b.dataset.lineEnd)));
+  return { start, end, quote, rect: range.getBoundingClientRect() };
 }
 
-function clearSelection() {
-  state.sel = { anchor: null, start: null, end: null };
-  document.querySelector(".composer.inline")?.remove();
-  renderSource();
+function showSelPop(info) {
+  const pop = $("selPop");
+  pop.hidden = false;
+  pop.style.top = `${info.rect.bottom + 6}px`;
+  pop.style.left = `${info.rect.left}px`;
+  state.pendingSel = info;
+}
+
+function hideSelPop() {
+  $("selPop").hidden = true;
+  state.pendingSel = null;
 }
 
-function openComposer(start, end) {
+function openComposer(info) {
   document.querySelector(".composer.inline")?.remove();
-  const row = document.querySelector(`.srow[data-line="${end}"]`);
-  if (!row) return;
-  const label = start === end ? `line ${start}` : `lines ${start}–${end}`;
+  const block = blockForLine(info.end);
+  if (!block) return;
+  const label = info.start === info.end ? `line ${info.start}` : `lines ${info.start}–${info.end}`;
   const box = document.createElement("div");
   box.className = "composer inline";
-  box.innerHTML = `<textarea placeholder="Comment on ${label} — shift-click another line number to extend…"></textarea>
-    <button class="btn primary">Comment</button><button class="btn cancel">Cancel</button>`;
-  row.after(box);
+  box.innerHTML = `${info.quote ? `<div class="cquote">${esc(info.quote)}</div>` : ""}
+    <div class="composer-row">
+      <textarea placeholder="Comment on ${label}…"></textarea>
+      <button class="btn primary">Comment</button><button class="btn cancel">Cancel</button>
+    </div>`;
+  block.after(box);
   const ta = box.querySelector("textarea");
   ta.focus();
   box.querySelector(".primary").onclick = async () => {
-    await addComment(start, end, ta.value);
-    clearSelection();
+    await addComment(info.start, info.end, ta.value, info.quote);
   };
-  box.querySelector(".cancel").onclick = () => clearSelection();
+  box.querySelector(".cancel").onclick = () => box.remove();
 }
 
 // ---------- diff ----------
@@ -268,18 +539,60 @@ function diffLines(a, b) {
   return ops;
 }
 
+async function manifestFor(n) {
+  if (state.manifestCache.has(n)) return state.manifestCache.get(n);
+  const v = await api(`/api/projects/${enc(state.key)}/versions/${n}`).catch(() => null);
+  const mf = v?.manifest || null;
+  state.manifestCache.set(n, mf);
+  return mf;
+}
+
+function versionSummary(n) {
+  return state.versions.find((v) => v.n === n);
+}
+
+// Build the doc <select> for the diff (union of both sides' slugs). Hidden when
+// both versions are flat (no docCount>1) so flat-vs-flat looks exactly as today.
+async function updateDiffDocSel() {
+  const from = versionSummary(state.baseVersion);
+  const to = versionSummary(state.version);
+  const treeDiff = (from?.docCount > 1) || (to?.docCount > 1);
+  const wrap = $("diffDocWrap");
+  wrap.hidden = !treeDiff;
+  if (!treeDiff) return;
+
+  const [mf, mt] = await Promise.all([manifestFor(state.baseVersion), manifestFor(state.version)]);
+  const slugs = [];
+  const seen = new Set();
+  for (const mm of [mf, mt])
+    for (const d of mm?.docs || [])
+      if (!seen.has(d.slug)) {
+        seen.add(d.slug);
+        slugs.push({ slug: d.slug, title: d.title });
+      }
+  const prev = $("diffDocSel").value;
+  $("diffDocSel").innerHTML = slugs.map((s) => `<option value="${esc(s.slug)}">${esc(s.title)}</option>`).join("");
+  const wantRoot = state.manifest?.root || "root";
+  if (slugs.some((s) => s.slug === prev)) $("diffDocSel").value = prev;
+  else if (slugs.some((s) => s.slug === wantRoot)) $("diffDocSel").value = wantRoot;
+  else if (slugs.length) $("diffDocSel").value = slugs[0].slug;
+}
+
 async function loadDiff() {
   if (!state.baseVersion) {
     $("diff").innerHTML = "<div class='empty'>No earlier version to compare against.</div>";
     $("diffStat").textContent = "";
+    $("diffDocWrap").hidden = true;
     return;
   }
   state.baseVersion = Number($("baseSel").value);
-  const d = await api(
-    `/api/projects/${encodeURIComponent(state.key)}/diff?from=${state.baseVersion}&to=${state.version}`,
-  );
-  const a = d.from.markdown.split("\n");
-  const b = d.to.markdown.split("\n");
+  await updateDiffDocSel();
+  const scoped = !$("diffDocWrap").hidden;
+  const doc = scoped ? $("diffDocSel").value || "root" : null;
+  const qs = `from=${state.baseVersion}&to=${state.version}${doc ? `&doc=${enc(doc)}` : ""}`;
+  const d = await api(`/api/projects/${enc(state.key)}/diff?${qs}`);
+  const a = (d.from.markdown || "").split("\n");
+  const b = (d.to.markdown || "").split("\n");
   const ops = diffLines(a, b);
   const adds = ops.filter((o) => o.t === "add").length;
   const dels = ops.filter((o) => o.t === "del").length;
@@ -381,6 +694,13 @@ async function resolve(decision) {
 function projectName() {
   return state.projects?.find((p) => p.key === state.key)?.name || "plan";
 }
+function projNameByKey(key) {
+  return (
+    state.manageProjects?.find((p) => p.key === key)?.name ||
+    state.projects?.find((p) => p.key === key)?.name ||
+    key
+  );
+}
 
 function refreshSaveUI() {
   const box = $("saveActions");
@@ -463,7 +783,7 @@ async function doSave() {
   btn.textContent = "Saving…";
   try {
     const r = await api(
-      `/api/projects/${encodeURIComponent(state.key)}/versions/${state.version}/save`,
+      `/api/projects/${enc(state.key)}/versions/${state.version}/save`,
       {
         method: "POST",
         headers: { "content-type": "application/json" },
@@ -475,7 +795,6 @@ async function doSave() {
     refreshSaveUI();
     toast(`Saved v${state.version} to ${channel}.`);
   } catch (e) {
-    // surface the remediation command if the channel handed one back
     renderChannelStatus({ ready: false, reason: e.message, fixCommand: e.fixCommand });
   } finally {
     btn.textContent = prev;
@@ -483,6 +802,166 @@ async function doSave() {
   }
 }
 
+// ---------- deletion ----------
+// Deletes happen IMMEDIATELY on click — no confirmation modal. The modal appears
+// ONLY when a delete is blocked by a pending review (409 for single/project, or a
+// non-empty `blocked` array for bulk): it shows the blocked info + a Force option.
+function deleteTitleFor(pd) {
+  if (pd.type === "version") return `Couldn't delete v${pd.n}`;
+  if (pd.type === "project") return `Couldn't delete “${projNameByKey(pd.key)}”`;
+  return "Couldn't delete every selected version";
+}
+
+// Open the blocked/Force modal (the only remaining modal interaction).
+function openBlockedModal(pd) {
+  $("deleteTitle").textContent = deleteTitleFor(pd);
+  $("deleteDesc").textContent = "";
+  $("deleteForce").hidden = false;
+  $("deleteForce").disabled = false;
+  $("deleteModal").hidden = false;
+}
+
+function deleteVersionNow() {
+  if (!state.version) return;
+  state.pendingDelete = { type: "version", key: state.key, n: state.version };
+  performDelete(false);
+}
+
+function showDeleteBlocked(e) {
+  openBlockedModal(state.pendingDelete);
+  const revs = e.pendingReviews || [];
+  const info = $("deletePending");
+  info.hidden = false;
+  const many = revs.length !== 1;
+  info.textContent =
+    `Blocked: ${revs.length || "a"} pending review${many ? "s" : ""} still awaiting a decision. ` +
+    `Force will auto-reject ${many ? "them" : "it"} (Claude is told the plan was deleted and to re-present or ask how to proceed), then delete.`;
+}
+
+// bulk-delete is always 200 with partial-success {deleted,blocked,meta}; render
+// the blocked versions (+ their pending reviews) and offer a Force retry for
+// just those. Single-version / project DELETE stay 409-on-block (showDeleteBlocked).
+function showBulkBlocked(blocked, deleted) {
+  openBlockedModal(state.pendingDelete);
+  const info = $("deletePending");
+  info.hidden = false;
+  const ns = blocked.map((b) => b.n);
+  const totalPending = blocked.reduce((a, b) => a + (b.pendingReviews?.length || 0), 0);
+  const many = totalPending !== 1;
+  const delMsg = deleted.length ? `Deleted v${deleted.join(", v")}. ` : "";
+  info.textContent =
+    `${delMsg}Blocked: v${ns.join(", v")} — ${totalPending || "a"} pending review${many ? "s" : ""} ` +
+    `still awaiting a decision. Force will auto-reject ${many ? "them" : "it"} (Claude is told the plan ` +
+    `was deleted and to re-present or ask how to proceed) and delete the remaining ${ns.length} version${ns.length === 1 ? "" : "s"}.`;
+}
+
+async function finishDelete(pd, msg) {
+  const wasManage = pd.fromManage;
+  $("deleteModal").hidden = true;
+  state.pendingDelete = null;
+  toast(msg);
+  await reloadAfterDelete();
+  if (wasManage && !$("manageModal").hidden) await renderManage();
+}
+
+async function performDelete(force) {
+  const pd = state.pendingDelete;
+  if (!pd) return;
+  const bforce = $("deleteForce");
+  bforce.disabled = true;
+  const f = force ? "true" : "";
+  try {
+    if (pd.type === "bulk") {
+      const r = await api(`/api/projects/${enc(pd.key)}/bulk-delete`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ versions: pd.ns, force }),
+      });
+      const blocked = r?.blocked || [];
+      const deleted = r?.deleted || [];
+      if (blocked.length) {
+        // partial success: some deleted, some blocked by pending reviews
+        if (deleted.length) pd.didDelete = true; // reflect deletions even if user cancels
+        pd.ns = blocked.map((b) => b.n); // Force retry targets only the blocked ones
+        showBulkBlocked(blocked, deleted);
+        return;
+      }
+      await finishDelete(pd, `Deleted ${deleted.length || pd.ns.length} version${(deleted.length || pd.ns.length) === 1 ? "" : "s"}.`);
+      return;
+    }
+
+    if (pd.type === "version") {
+      await api(`/api/projects/${enc(pd.key)}/versions/${pd.n}?force=${f}`, { method: "DELETE" });
+      await finishDelete(pd, `Deleted v${pd.n}.`);
+    } else if (pd.type === "project") {
+      await api(`/api/projects/${enc(pd.key)}?force=${f}`, { method: "DELETE" });
+      await finishDelete(pd, "Project deleted.");
+    }
+  } catch (e) {
+    if (e.status === 409) showDeleteBlocked(e); // version / project block
+    else {
+      toast("Delete failed: " + e.message);
+      bforce.disabled = false;
+    }
+  }
+}
+
+// Delete flows must explicitly reload projects/versions — the pollLoop only
+// refreshes review status.
+async function reloadAfterDelete() {
+  await loadProjects();
+  if (!state.projects.length) {
+    showEmpty("No plans reviewed yet. Finish a plan in plan mode and it'll show up here.");
+    return;
+  }
+  const key = state.projects.some((p) => p.key === state.key) ? state.key : state.projects[0].key;
+  await selectProject(key);
+}
+
+// ---------- manage modal ----------
+async function openManageModal() {
+  $("manageModal").hidden = false;
+  await renderManage();
+}
+
+async function renderManage() {
+  const list = $("manageList");
+  list.innerHTML = "<div class='empty'>Loading…</div>";
+  const projects = await api("/api/projects").catch(() => []);
+  const detailed = await Promise.all(
+    projects.map(async (p) => {
+      const r = await api(`/api/projects/${enc(p.key)}`).catch(() => ({ versions: [] }));
+      return { ...p, versions: r.versions || [] };
+    }),
+  );
+  state.manageProjects = detailed;
+  list.innerHTML = detailed.length
+    ? detailed.map(manageProjectHTML).join("")
+    : "<div class='empty'>No projects.</div>";
+}
+
+function manageProjectHTML(p) {
+  const vers = (p.versions || [])
+    .map(
+      (v) => `<label class="mg-ver">
+        <input type="checkbox" data-key="${esc(p.key)}" data-n="${v.n}" />
+        <span class="mg-vn">v${v.n}</span>
+        <span class="mg-meta">${esc(new Date(v.createdAt).toLocaleString())}${v.docCount > 1 ? ` · ${v.docCount} docs` : ""}${v.kind === "tree" ? " · tree" : ""}</span>
+      </label>`,
+    )
+    .join("");
+  return `<div class="mg-project" data-key="${esc(p.key)}">
+    <div class="mg-phead">
+      <span class="mg-name">${esc(p.name)}${p.pending ? ` <span class="sb-dot" title="${p.pending} pending"></span>` : ""}</span>
+      <span class="mg-actions">
+        <button class="btn sm" data-mg="delsel" data-key="${esc(p.key)}">Delete selected</button>
+        <button class="btn reject sm" data-mg="delproj" data-key="${esc(p.key)}">Delete project</button>
+      </span>
+    </div>
+    <div class="mg-vers">${vers || "<span class='mg-meta'>no versions</span>"}</div>
+  </div>`;
+}
+
 // ---------- polling (reflect external resolution) ----------
 function pollLoop() {
   setInterval(async () => {
@@ -492,6 +971,7 @@ function pollLoop() {
         if (r.status !== state.review.status) {
           state.review = r;
           refreshReview();
+          renderSidebar(); // pending dot depends on review status
         }
       } catch {}
     }
@@ -520,11 +1000,9 @@ function wireUI() {
   };
 
   $("projectSel").onchange = (e) => selectProject(e.target.value);
-  $("versionSel").onchange = (e) => {
-    state.reviewId && (state.reviewId = state.reviewId); // keep
-    loadVersion(Number(e.target.value));
-  };
+  $("versionSel").onchange = (e) => loadVersion(Number(e.target.value));
   $("baseSel").onchange = () => loadDiff();
+  $("diffDocSel").onchange = () => loadDiff();
 
   document.querySelectorAll(".tab").forEach((t) => {
     t.onclick = () => {
@@ -533,6 +1011,7 @@ function wireUI() {
       t.classList.add("active");
       state.tab = t.dataset.tab;
       $("panel-" + state.tab).classList.add("active");
+      hideSelPop();
       if (state.tab === "diff") loadDiff();
     };
   });
@@ -546,45 +1025,61 @@ function wireUI() {
     };
   });
 
-  // source gutter clicks + comment deletes (delegated)
-  const source = $("source");
-  // press a line number and drag to select a range; shift-click also extends
-  source.addEventListener("mousedown", (e) => {
-    const g = e.target.closest("[data-add]");
-    if (!g) return;
-    e.preventDefault(); // suppress native text selection while dragging
-    const n = Number(g.dataset.add);
-    const sel = state.sel;
-    if (e.shiftKey && sel.anchor != null) {
-      sel.start = Math.min(sel.anchor, n);
-      sel.end = Math.max(sel.anchor, n);
-    } else {
-      sel.anchor = sel.start = sel.end = n;
+  // view-as-tree (single-doc, display-only)
+  $("treeToggle").onclick = () => {
+    state.viewAsTree = !state.viewAsTree;
+    state.treeSection = -1;
+    updateTreeToggle();
+    renderPreview();
+    renderSidebar();
+  };
+
+  // sidebar navigation — doc rows (tree) or outline sections (view-as-tree)
+  $("docSidebar").addEventListener("click", (e) => {
+    const row = e.target.closest("[data-doc]");
+    if (row) {
+      e.preventDefault();
+      if (row.dataset.doc !== state.doc) loadDoc(row.dataset.doc);
+      return;
+    }
+    const sec = e.target.closest("[data-sec]");
+    if (sec) {
+      e.preventDefault();
+      state.treeSection = Number(sec.dataset.sec);
+      applyTreeView();
+      renderSidebar();
     }
-    state.dragging = true;
-    source.classList.add("dragging");
-    document.querySelector(".composer.inline")?.remove();
-    paintSelection();
-  });
-  source.addEventListener("mousemove", (e) => {
-    if (!state.dragging) return;
-    const row = e.target.closest(".srow");
-    if (!row) return;
-    const n = Number(row.dataset.line);
-    state.sel.start = Math.min(state.sel.anchor, n);
-    state.sel.end = Math.max(state.sel.anchor, n);
-    paintSelection();
   });
-  document.addEventListener("mouseup", () => {
-    if (!state.dragging) return;
-    state.dragging = false;
-    source.classList.remove("dragging");
-    openComposer(state.sel.start, state.sel.end);
+
+  // comment on rendered text: after a selection in the preview, offer a "Comment" button
+  document.addEventListener("mouseup", (e) => {
+    if ($("selPop").contains(e.target)) return; // the button handles its own click
+    const info = currentSelection();
+    if (info) showSelPop(info);
+    else hideSelPop();
   });
-  source.onclick = (e) => {
-    const del = e.target.closest("[data-del]");
-    if (del) return delComment(del.dataset.del);
+  window.addEventListener("scroll", hideSelPop, true);
+  $("selComment").onclick = () => {
+    const info = state.pendingSel;
+    hideSelPop();
+    window.getSelection().removeAllRanges();
+    if (info) openComposer(info);
   };
+
+  // preview clicks: cross-doc links navigate in-app; delete buttons remove comments
+  $("preview").addEventListener("click", (e) => {
+    const link = e.target.closest("a[data-doc]");
+    if (link) {
+      e.preventDefault();
+      const slug = link.dataset.doc;
+      if (state.docCache.has(slug) || (state.manifest && state.manifest.docs.some((d) => d.slug === slug))) {
+        loadDoc(slug);
+      }
+      return;
+    }
+    const del = e.target.closest("[data-del]");
+    if (del) delComment(del.dataset.del);
+  });
   $("generalList").onclick = (e) => {
     const del = e.target.closest("[data-del]");
     if (del) delComment(del.dataset.del);
@@ -610,6 +1105,42 @@ function wireUI() {
     $("rejectModal").hidden = true;
     await resolve("reject");
   };
+
+  // deletion + manage — delete fires immediately; the modal is blocked-only
+  $("deleteVerBtn").onclick = () => deleteVersionNow();
+  $("deleteCancel").onclick = async () => {
+    const pd = state.pendingDelete;
+    $("deleteModal").hidden = true;
+    state.pendingDelete = null;
+    // a partial bulk delete already removed some versions — reflect that even on cancel
+    if (pd && pd.didDelete) {
+      await reloadAfterDelete();
+      if (!$("manageModal").hidden) await renderManage();
+    }
+  };
+  $("deleteForce").onclick = () => performDelete(true);
+
+  $("manageBtn").onclick = () => openManageModal();
+  $("manageClose").onclick = () => ($("manageModal").hidden = true);
+  $("manageList").addEventListener("click", (e) => {
+    const btn = e.target.closest("[data-mg]");
+    if (!btn) return;
+    const key = btn.dataset.key;
+    if (btn.dataset.mg === "delproj") {
+      state.pendingDelete = { type: "project", key, fromManage: true };
+      performDelete(false);
+    } else if (btn.dataset.mg === "delsel") {
+      const ns = [...$("manageList").querySelectorAll('input[type="checkbox"]:checked')]
+        .filter((x) => x.dataset.key === key)
+        .map((x) => Number(x.dataset.n));
+      if (!ns.length) {
+        toast("Select at least one version to delete.");
+        return;
+      }
+      state.pendingDelete = { type: "bulk", key, ns, fromManage: true };
+      performDelete(false);
+    }
+  });
 }
 
 init().catch((e) => {