@gavin-hu/my-pi-agent 0.0.0-stage → 0.7.0

package/extensions/plan/web-client.ts

@@ -0,0 +1,433 @@
+/**
+ * The browser review client, served as `/client.js`.
+ *
+ * Kept as one self-contained script (like `file-browse/client.ts`) with no
+ * build step. It renders the plan from the JSON data island using DOM text
+ * nodes only — plan and comment text never becomes markup — renders each block
+ * with its comment threads indented directly beneath it, highlights code by
+ * copying only `tok-*` spans through `DOMParser`, builds the section outline,
+ * and saves the annotation list back to the server. An `EventSource` keeps a
+ * connection open so the server can tell when the tab is gone; the explicit
+ * buttons are the primary save/cancel path.
+ */
+
+import { THEME_TOGGLE_JS } from "../../lib/web/index.ts";
+
+export const REVIEW_CLIENT_JS = String.raw`(function () {
+  "use strict";
+
+  var dataNode = document.getElementById("review-data");
+  var fallback = { blocks: [], annotations: [], outline: [], code: {}, token: "" };
+  var data = fallback;
+  if (dataNode && dataNode.textContent) {
+    try { data = JSON.parse(dataNode.textContent); } catch (error) { data = fallback; }
+  }
+  var token = typeof data.token === "string" ? data.token : "";
+  var annotations = Array.isArray(data.annotations) ? data.annotations.slice() : [];
+  var saved = false;
+  var closed = false;
+  var sectionObserver = null;
+  var pendingQuote = null;
+
+  var planEl = document.getElementById("plan");
+  var statusEl = document.getElementById("status");
+  var saveButton = document.getElementById("save");
+  var cancelButton = document.getElementById("cancel");
+  var outlineList = document.getElementById("outline-list");
+
+  function el(tag, className) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    return node;
+  }
+
+  function setStatus(text, kind) {
+    if (!statusEl) return;
+    statusEl.textContent = text || "";
+    statusEl.title = text || "";
+    statusEl.className = kind ? "bf-status bf-status--" + kind : "bf-status";
+  }
+
+  function safeHref(url) {
+    var trimmed = String(url).trim();
+    if (/^(https?:|mailto:)/i.test(trimmed)) return trimmed;
+    if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed)) return null;
+    return trimmed;
+  }
+
+  var INLINE = /(\x60[^\x60]+\x60|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
+
+  function renderInline(container, text) {
+    String(text).split(INLINE).forEach(function (part) {
+      if (!part) return;
+      var match;
+      if ((match = /^\x60([^\x60]+)\x60$/.exec(part))) {
+        var code = el("code"); code.textContent = match[1]; container.appendChild(code); return;
+      }
+      if ((match = /^\*\*([^*]+)\*\*$/.exec(part))) {
+        var strong = el("strong"); strong.textContent = match[1]; container.appendChild(strong); return;
+      }
+      if ((match = /^\*([^*]+)\*$/.exec(part))) {
+        var em = el("em"); em.textContent = match[1]; container.appendChild(em); return;
+      }
+      if ((match = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(part))) {
+        var href = safeHref(match[2]);
+        if (!href) { container.appendChild(document.createTextNode(part)); return; }
+        var link = el("a"); link.textContent = match[1]; link.href = href; link.target = "_blank"; link.rel = "noreferrer noopener";
+        container.appendChild(link); return;
+      }
+      container.appendChild(document.createTextNode(part));
+    });
+  }
+
+  // Copy only text and tok-* spans out of server-highlighted HTML, so a code
+  // line can never introduce markup even though it arrives as a string.
+  function copyTokens(from, to) {
+    Array.prototype.forEach.call(from.childNodes, function (node) {
+      if (node.nodeType === 3) { to.appendChild(document.createTextNode(node.nodeValue)); return; }
+      if (node.nodeType === 1 && node.tagName === "SPAN" && /^tok-/.test(node.className || "")) {
+        var span = el("span", node.className);
+        copyTokens(node, span);
+        to.appendChild(span);
+        return;
+      }
+      to.appendChild(document.createTextNode(node.textContent || ""));
+    });
+  }
+
+  function codeBody(lines) {
+    var body = Array.isArray(lines) ? lines.slice() : [];
+    if (body.length && /^ {0,3}(\x60{3,}|~{3,})/.test(body[0])) body.shift();
+    if (body.length && /^ {0,3}(\x60{3,}|~{3,})/.test(body[body.length - 1])) body.pop();
+    return body;
+  }
+
+  function renderCode(wrap, block) {
+    var body = codeBody(block.lines);
+    var highlighted = data.code && data.code[String(block.start)];
+    var pre = el("pre", "bf-code");
+    var code = el("code");
+    if (Array.isArray(highlighted)) {
+      body.forEach(function (line, index) {
+        var span = el("span", "bf-code__line");
+        var html = highlighted[index];
+        if (html) {
+          try { copyTokens(new DOMParser().parseFromString(html, "text/html").body, span); }
+          catch (error) { span.textContent = line; }
+        } else {
+          span.textContent = line;
+        }
+        code.appendChild(span);
+        if (index < body.length - 1) code.appendChild(document.createTextNode("\n"));
+      });
+    } else {
+      code.textContent = body.join("\n");
+    }
+    pre.appendChild(code);
+    wrap.appendChild(pre);
+  }
+
+  function renderBlockContent(wrap, block) {
+    var lines = Array.isArray(block.lines) ? block.lines : [];
+    if (block.kind === "heading") {
+      var text = lines.join(" ").replace(/^\s*#{1,6}\s*/, "");
+      var level = Math.min(6, Math.max(1, (lines[0].match(/^ {0,3}(#{1,6})/) || ["", "#"])[1].length));
+      var heading = el("h" + level);
+      renderInline(heading, text);
+      wrap.appendChild(heading);
+      return;
+    }
+    if (block.kind === "code") { renderCode(wrap, block); return; }
+    if (block.kind === "quote") {
+      var quote = el("blockquote");
+      renderInline(quote, lines.map(function (line) { return line.replace(/^\s*>\s?/, ""); }).join("\n"));
+      wrap.appendChild(quote);
+      return;
+    }
+    if (block.kind === "list") {
+      lines.forEach(function (line) {
+        var match = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(line);
+        if (!match) {
+          var plain = el("p"); renderInline(plain, line); wrap.appendChild(plain); return;
+        }
+        var row = el("div", "bf-block__li");
+        row.style.paddingLeft = String(Math.floor(match[1].replace(/\t/g, "    ").length / 2) * 16) + "px";
+        var markerText = match[2];
+        var rest = match[3];
+        var box = /^\[([ xX])\]\s*(.*)$/.exec(rest);
+        var marker = el("span", "marker");
+        if (box) {
+          var done = box[1].toLowerCase() === "x";
+          markerText = done ? "\u2713" : "\u2610";
+          marker.className = done ? "bf-block__marker bf-block__marker--done" : "bf-block__marker";
+          rest = box[2];
+        }
+        marker.textContent = markerText;
+        var body = el("span"); renderInline(body, rest);
+        row.appendChild(marker); row.appendChild(body); wrap.appendChild(row);
+      });
+      return;
+    }
+    var paragraph = el("p");
+    renderInline(paragraph, lines.join(" "));
+    wrap.appendChild(paragraph);
+  }
+
+  function closeComposer() {
+    var open = planEl ? planEl.querySelector(".bf-composer") : null;
+    if (open && open.parentNode) open.parentNode.removeChild(open);
+    Array.prototype.forEach.call(planEl ? planEl.querySelectorAll(".bf-block--composing") : [], function (block) {
+      block.classList.remove("bf-block--composing");
+    });
+  }
+
+  function selectionIn(wrap) {
+    var selection = window.getSelection && window.getSelection();
+    if (!selection || selection.isCollapsed) return "";
+    var range = selection.rangeCount ? selection.getRangeAt(0) : null;
+    if (!range || !wrap.contains(range.commonAncestorContainer)) return "";
+    return selection.toString().replace(/\s+/g, " ").trim().slice(0, 500);
+  }
+
+  function commentsBoxAfter(wrap) {
+    var next = wrap.nextElementSibling;
+    if (next && next.classList && next.classList.contains("bf-comments")) return next;
+    var box = el("div", "bf-comments");
+    wrap.insertAdjacentElement("afterend", box);
+    return box;
+  }
+
+  function openComposer(wrap, block, quote) {
+    closeComposer();
+    wrap.classList.add("bf-block--composing");
+    var composer = el("div", "bf-composer");
+    if (quote) {
+      var chip = el("div", "bf-quote-chip");
+      chip.textContent = "\u201c" + quote + "\u201d";
+      composer.appendChild(chip);
+    }
+    var area = el("textarea", "bf-textarea");
+    area.placeholder = "Leave feedback on this part of the plan";
+    area.setAttribute("aria-label", "Comment");
+    composer.appendChild(area);
+    var row = el("div", "bf-composer__row");
+    var cancel = el("button"); cancel.type = "button"; cancel.className = "bf-btn"; cancel.textContent = "Cancel";
+    cancel.addEventListener("click", closeComposer);
+    var add = el("button"); add.type = "button"; add.className = "bf-btn bf-btn--primary"; add.textContent = "Add comment";
+    add.addEventListener("click", function () {
+      var comment = area.value.replace(/\s+/g, " ").trim();
+      if (!comment) { area.focus(); return; }
+      annotations.push(quote ? { anchor: block.start, quote: quote, comment: comment } : { anchor: block.start, comment: comment });
+      renderPlan();
+    });
+    row.appendChild(cancel); row.appendChild(add); composer.appendChild(row);
+    commentsBoxAfter(wrap).appendChild(composer);
+    area.focus();
+  }
+
+  function startEdit(card, index) {
+    var annotation = annotations[index];
+    card.textContent = "";
+    var area = el("textarea", "bf-textarea");
+    area.value = annotation.comment;
+    area.setAttribute("aria-label", "Edit comment");
+    card.appendChild(area);
+    var row = el("div", "bf-comment__row");
+    var cancel = el("button"); cancel.type = "button"; cancel.className = "bf-btn"; cancel.textContent = "Cancel";
+    cancel.addEventListener("click", renderPlan);
+    var apply = el("button"); apply.type = "button"; apply.className = "bf-btn bf-btn--primary"; apply.textContent = "Save";
+    apply.addEventListener("click", function () {
+      var comment = area.value.replace(/\s+/g, " ").trim();
+      if (!comment) { area.focus(); return; }
+      annotation.comment = comment;
+      renderPlan();
+    });
+    row.appendChild(cancel); row.appendChild(apply); card.appendChild(row);
+    area.focus();
+  }
+
+  function renderCommentCards(box, list) {
+    list.forEach(function (annotation) {
+      var index = annotations.indexOf(annotation);
+      var card = el("div", "bf-comment");
+      if (annotation.quote) {
+        var quote = el("div", "bf-comment__quote");
+        quote.textContent = "\u201c" + annotation.quote + "\u201d";
+        card.appendChild(quote);
+      }
+      var body = el("div", "bf-comment__body");
+      body.textContent = annotation.comment;
+      card.appendChild(body);
+      var row = el("div", "bf-comment__row");
+      var edit = el("button"); edit.type = "button"; edit.className = "bf-btn"; edit.textContent = "Edit";
+      edit.addEventListener("click", function () { startEdit(card, index); });
+      var remove = el("button"); remove.type = "button"; remove.className = "bf-btn"; remove.textContent = "Delete";
+      remove.addEventListener("click", function () { annotations.splice(index, 1); renderPlan(); });
+      row.appendChild(edit); row.appendChild(remove); card.appendChild(row);
+      box.appendChild(card);
+    });
+  }
+
+  function renderComments(container, anchor) {
+    var mine = annotations.filter(function (annotation) { return annotation.anchor === anchor; });
+    if (mine.length === 0) return;
+    var box = el("div", "bf-comments");
+    renderCommentCards(box, mine);
+    container.appendChild(box);
+  }
+
+  function observeSections() {
+    if (sectionObserver && sectionObserver.disconnect) sectionObserver.disconnect();
+    sectionObserver = null;
+    if (!outlineList || !window.IntersectionObserver) return;
+    var links = {};
+    Array.prototype.forEach.call(outlineList.querySelectorAll("a"), function (link) {
+      links[link.getAttribute("data-id")] = link;
+    });
+    var headings = Array.prototype.slice.call(planEl.querySelectorAll(".bf-block[id]"));
+    if (headings.length === 0) return;
+    sectionObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) return;
+        Array.prototype.forEach.call(outlineList.querySelectorAll("a"), function (link) {
+          link.removeAttribute("aria-current");
+        });
+        var link = links[entry.target.id];
+        if (link) link.setAttribute("aria-current", "true");
+      });
+    }, { rootMargin: "-76px 0px -68% 0px", threshold: 0 });
+    headings.forEach(function (heading) { sectionObserver.observe(heading); });
+  }
+
+  function renderOutline() {
+    if (!outlineList) return;
+    outlineList.replaceChildren();
+    var items = Array.isArray(data.outline) ? data.outline : [];
+    items.forEach(function (item) {
+      var li = el("li", "lvl-" + item.level);
+      var link = el("a");
+      link.href = "#" + item.id;
+      link.setAttribute("data-id", item.id);
+      link.textContent = item.text;
+      li.appendChild(link);
+      outlineList.appendChild(li);
+    });
+  }
+
+  function renderPlan() {
+    if (!planEl) return;
+    closeComposer();
+    planEl.replaceChildren();
+    var blocks = Array.isArray(data.blocks) ? data.blocks : [];
+    var anchored = {};
+    blocks.forEach(function (block) {
+      if (block.kind === "blank") return;
+      anchored[block.start] = true;
+      var wrap = el("div", "bf-block");
+      wrap.setAttribute("data-line", String(block.start));
+      wrap.setAttribute("data-kind", String(block.kind));
+      if (block.kind === "heading") wrap.id = "s-" + block.start;
+      renderBlockContent(wrap, block);
+      var add = el("button", "bf-btn bf-btn--ghost bf-block__add");
+      add.type = "button";
+      add.setAttribute("aria-label", "Comment on this block");
+      add.appendChild(document.createTextNode("+"));
+      var addLabel = el("span", "bf-block__add-label");
+      addLabel.textContent = "Comment";
+      add.appendChild(addLabel);
+      add.addEventListener("click", function () {
+        var quote = pendingQuote && pendingQuote.wrap === wrap ? pendingQuote.quote : selectionIn(wrap);
+        pendingQuote = null;
+        openComposer(wrap, block, quote);
+      });
+      wrap.appendChild(add);
+      planEl.appendChild(wrap);
+      renderComments(planEl, block.start);
+    });
+    var orphans = annotations.filter(function (annotation) { return !anchored[annotation.anchor]; });
+    if (orphans.length > 0) {
+      var box = el("div", "bf-comments bf-comments--orphans");
+      var note = el("p"); note.textContent = "Comments not attached to a current block";
+      box.appendChild(note);
+      renderCommentCards(box, orphans);
+      planEl.appendChild(box);
+    }
+    observeSections();
+  }
+
+  function renderHeader() {
+    var titleEl = document.getElementById("plan-title");
+    if (titleEl && data.title) {
+      titleEl.textContent = data.title;
+      titleEl.title = data.title;
+    }
+    if (data.title) document.title = "Plan review \u00b7 " + data.title;
+  }
+
+  function lockActions() {
+    if (saveButton) saveButton.disabled = true;
+    if (cancelButton) cancelButton.disabled = true;
+  }
+
+  function save() {
+    if (saved) return;
+    setStatus("Saving\u2026");
+    fetch("/api/feedback?token=" + encodeURIComponent(token), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ annotations: annotations })
+    }).then(function (response) {
+      if (!response.ok) throw new Error("server returned " + response.status);
+      saved = true;
+      setStatus("Saved \u2014 return to Pi to continue.", "saved");
+      lockActions();
+    }).catch(function (error) {
+      setStatus("Could not save: " + error.message, "error");
+    });
+  }
+
+  function cancel() {
+    if (saved || closed) return;
+    closed = true;
+    lockActions();
+    setStatus("Closing\u2026");
+    fetch("/api/cancel?token=" + encodeURIComponent(token), { method: "POST" }).catch(function () {}).then(function () {
+      setStatus("Closed without saving.");
+    });
+  }
+
+  if (saveButton) saveButton.addEventListener("click", save);
+  if (cancelButton) cancelButton.addEventListener("click", cancel);
+
+  // Remember a selection made inside a block so clicking + Comment can still
+  // quote it after the button press has collapsed the selection.
+  document.addEventListener("mouseup", function (event) {
+    if (!planEl || saved) return;
+    var wrap = event.target && event.target.closest ? event.target.closest(".bf-block") : null;
+    var quote = wrap && !wrap.querySelector(".bf-composer") ? selectionIn(wrap) : "";
+    pendingQuote = wrap && quote ? { wrap: wrap, quote: quote } : null;
+  });
+
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") closeComposer();
+  });
+
+  window.addEventListener("beforeunload", function () {
+    if (saved || closed) return;
+    var url = "/api/cancel?token=" + encodeURIComponent(token);
+    if (navigator.sendBeacon) navigator.sendBeacon(url);
+  });
+
+  try {
+    new EventSource("/events?token=" + encodeURIComponent(token));
+  } catch (error) {
+    // The server still sees the POST; the stream is only for close detection.
+  }
+
+  ${THEME_TOGGLE_JS}
+
+  renderHeader();
+  renderOutline();
+  renderPlan();
+})();
+`;

package/extensions/plan/web-page.ts

@@ -0,0 +1,169 @@
+/**
+ * HTML shell for the browser plan review (pure string building).
+ *
+ * The page is intentionally inert: it carries no plan text in its markup and
+ * no inline script. Everything the review needs travels in one JSON data
+ * island (`<script type="application/json">`), and `/client.js` renders it
+ * with DOM text nodes, so plan- and comment-authored text is never parsed as
+ * HTML. `<` is escaped in the island so a plan containing `</script>` cannot
+ * close the tag.
+ *
+ * It shares the Bytefly shell, components, and syntax colours with
+ * `file-browse` through `lib/web`; the server sets the CSP header, and the
+ * page loads only same-origin scripts.
+ */
+
+import {
+	brandLockup,
+	docHead,
+	themeToggle,
+	WEB_BASE_CSS,
+	WEB_COMPONENTS_CSS,
+	WEB_LAYOUT_CSS,
+	WEB_THEME_CSS,
+} from "../../lib/web/index.ts";
+import type { PlanBlock } from "./blocks.ts";
+import type { PlanAnnotation } from "./feedback.ts";
+
+/** A heading the outline can jump to. */
+export interface ReviewOutlineItem {
+	/** DOM id the client gives the heading. */
+	id: string;
+	/** 0-based source line. */
+	line: number;
+	/** Heading level, 1-6. */
+	level: number;
+	/** Heading text. */
+	text: string;
+}
+
+/** Everything the browser needs to render one plan review. */
+export interface ReviewPageData {
+	/** Plan title, derived from the file name. */
+	title: string;
+	/** Source-line blocks of the feedback-stripped plan. */
+	blocks: PlanBlock[];
+	/** Feedback already stored in the file. */
+	annotations: PlanAnnotation[];
+	/** Section outline, in document order. */
+	outline: ReviewOutlineItem[];
+	/** Highlighted HTML per line, keyed by the code block's 0-based start line. */
+	code: Record<string, string[]>;
+	/** Per-session secret the client echoes on every request. */
+	token: string;
+}
+
+/** Page styles: the shared base + theme + shell + components, then the review. */
+export const REVIEW_CSS = `${WEB_BASE_CSS}
+${WEB_THEME_CSS}
+${WEB_LAYOUT_CSS}
+${WEB_COMPONENTS_CSS}
+.bf-review{display:flex;flex-direction:column;padding:var(--space-5) var(--space-6) 96px}
+.review-bar{align-items:center;gap:var(--space-2) var(--space-4)}
+.review-bar .bf-brand{flex:0 0 auto}
+.review-heading{display:flex;align-items:center;flex:1 1 160px;min-width:0;overflow:hidden;border-left:1px solid var(--border);padding-left:var(--space-4)}
+.review-title{display:block;flex:1 1 auto;min-width:0;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-tight);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.review-status{flex:0 0 auto;max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.review-status:empty{display:none}
+.review-controls{display:inline-flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
+.bf-app__body--single{grid-template-columns:minmax(0,1fr)}
+.bf-app__sidebar .bf-panel{flex:1 1 auto;min-height:0}
+.review-nav{min-width:0}
+.review-nav__title{margin:0;padding:var(--space-3) var(--space-4) var(--space-2);font:var(--fw-semibold) var(--fs-sm) var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
+.review-nav ul{list-style:none;margin:0;padding:0}
+.review-nav a{display:block;padding:4px 8px;border-radius:var(--radius-sm);color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-snug);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.review-nav a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
+.review-nav a[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:var(--fw-semibold)}
+.review-nav .lvl-2 a{padding-left:18px}
+.review-nav .lvl-3 a{padding-left:30px}
+.review-nav .lvl-4 a,.review-nav .lvl-5 a,.review-nav .lvl-6 a{padding-left:42px}
+.bf-review>.bf-block{position:relative;padding:2px 96px 2px 0;border-radius:var(--radius-md);overflow-wrap:break-word}
+.bf-block[id]{scroll-margin-top:76px}
+.bf-block:hover{background:var(--surface)}
+.bf-block h1,.bf-block h2,.bf-block h3,.bf-block h4,.bf-block h5,.bf-block h6{margin:20px 0 8px;line-height:var(--lh-tight)}
+.bf-block h1{font-size:24px;padding-bottom:6px;border-bottom:1px solid var(--border)}
+.bf-block h2{font-size:19px;padding-bottom:4px;border-bottom:1px solid var(--border)}
+.bf-block h3{font-size:16px}
+.bf-block p{margin:10px 0}
+.bf-block blockquote{margin:10px 0;padding:2px 14px;border-left:3px solid var(--border);color:var(--muted)}
+.bf-block__li{display:flex;gap:8px;margin:3px 0}
+.bf-block__marker{flex:0 0 auto;min-width:1.4em;color:var(--muted)}
+.bf-block__marker--done{color:var(--success)}
+.bf-block code{font-family:var(--font-mono);font-size:.9em;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.1em .35em}
+.bf-block pre.bf-code{margin:10px 0;padding:var(--space-3) 0;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);font:var(--fs-code)/1.55 var(--font-mono);tab-size:4;flex:none}
+.bf-block pre.bf-code code{background:none;border:0;padding:0;font-size:inherit}
+.bf-block pre.bf-code .bf-code__line{display:block;padding:0 14px;white-space:pre;min-height:1.55em}
+.bf-block__add{position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;gap:6px;opacity:0;font-size:var(--fs-xs);padding:2px 8px}
+.bf-block:hover .bf-block__add,.bf-block__add:focus-visible{opacity:1}
+.bf-block--composing .bf-block__add{opacity:0}
+.bf-comments{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px;padding-left:var(--space-5)}
+.bf-comments:empty{display:none}
+.bf-comments--orphans{margin-top:26px;padding:var(--space-3) 0 0;border-top:1px dashed var(--border)}
+.bf-comments--orphans p{margin:0 0 8px;color:var(--muted);font-size:var(--fs-sm)}
+@media (max-width:1180px){
+.bf-app__body{grid-template-columns:1fr;align-content:start}
+.bf-app__sidebar{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--border)}
+.review-nav{padding:4px 16px 12px}
+}
+@media (max-width:860px){
+.bf-review{padding:var(--space-4) 18px 80px}
+.bf-review>.bf-block{padding-right:36px}
+.bf-block__add-label{display:none}
+}
+@media (max-width:860px){
+.review-nav__title{display:none}
+}
+@media (max-width:820px){
+.review-bar{align-items:flex-start}
+.review-heading{flex:1 1 100%;order:3;border-left:0;padding-left:0;margin-top:var(--space-1)}
+.review-controls{order:2;margin-left:auto}
+.review-status{order:4;flex:1 1 100%;max-width:none;white-space:normal}
+}
+@media (prefers-reduced-motion:no-preference){.bf-block{transition:background .08s ease}}
+@media (hover:none){.bf-block__add{opacity:1}}
+`.trim();
+
+/**
+ * Render the review page for `data`. The markup is a fixed shell; the client
+ * fills every dynamic field, so this function is the only place that needs the
+ * JSON-island escaping.
+ */
+export function renderReviewPage(data: ReviewPageData): string {
+	const island = JSON.stringify(data).replace(/</g, "\\u003c");
+	const hasOutline = data.outline.length > 0;
+	const bodyClass = hasOutline ? "bf-app__body" : "bf-app__body bf-app__body--single";
+	const outlinePanel = hasOutline
+		? `<details class="bf-app__sidebar review-outline" open>
+<summary class="bf-panel__summary">Sections</summary>
+<nav class="bf-panel review-nav" aria-labelledby="outline-title"><p class="review-nav__title" id="outline-title">Sections</p><ul id="outline-list"></ul></nav>
+</details>
+`
+		: "";
+	return `<!doctype html>
+<html lang="en">
+<head>
+${docHead({ title: "Plan review", css: REVIEW_CSS })}
+</head>
+<body class="bf-app">
+<a class="skip" href="#plan">Skip to the plan</a>
+<header class="bf-app__header"><div class="bf-toolbar review-bar">
+${brandLockup("plan review")}
+<div class="review-heading">
+<span class="review-title" id="plan-title">Plan review</span>
+</div>
+<span class="bf-status review-status" id="status" role="status" aria-live="polite"></span>
+<div class="review-controls">
+${themeToggle()}
+<button type="button" class="bf-btn bf-btn--primary" id="save">Save feedback</button>
+<button type="button" class="bf-btn" id="cancel">Close</button>
+</div>
+</div></header>
+<div class="${bodyClass}">
+${outlinePanel}<main class="bf-app__main bf-review" id="plan" aria-label="Plan"></main>
+</div>
+<script type="application/json" id="review-data">${island}</script>
+<script src="/client.js" defer></script>
+</body>
+</html>
+`;
+}