@gavin-hu/my-pi-agent 0.16.0 → 0.18.0

package/extensions/plan/web-client.ts

@@ -2,8 +2,10 @@
  * 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
+ * build step. Its document half — the inline and block Markdown rendering — is
+ * `web-markdown.ts`, a fragment of the same IIFE interpolated below. 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 review facts, and saves the annotation list back to the server. An
@@ -11,7 +13,11 @@
  * gone; the explicit buttons are the primary save/cancel path.
  */
 
-import { keysDialogScript, THEME_TOGGLE_JS } from "../../lib/web/index.ts";
+import { dialogScript, keysDialogScript, THEME_TOGGLE_JS } from "../../lib/web/index.ts";
+import { WEB_CHROME_JS } from "./web-chrome.ts";
+import { WEB_COMMENTS_JS } from "./web-comments.ts";
+import { WEB_COLLAB_JS } from "./web-collab.ts";
+import { WEB_MARKDOWN_JS } from "./web-markdown.ts";
 
 export const REVIEW_CLIENT_JS = String.raw`(function () {
   "use strict";
@@ -26,6 +32,18 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   }
   var token = typeof data.token === "string" ? data.token : "";
   var limits = data.limits || fallback.limits;
+  // Who the server says is looking: the owner approves, a reviewer comments.
+  var role = data.role === "reviewer" ? "reviewer" : "owner";
+  var reviewerName = typeof data.author === "string" ? data.author : "";
+  if (!reviewerName) {
+    try { reviewerName = window.localStorage.getItem("bf-review-name") || ""; } catch (error) { reviewerName = ""; }
+  }
+  // Set once the server has bound a name to this link, which makes it final.
+  var reviewerBound = typeof data.author === "string" && !!data.author;
+  var DRAFT_REFUSAL = "Add or discard the comment you are writing.";
+  // What a body-less conflict says. A 409 the server explained is reported in its
+  // own words: a plan that moved and a link bound to another name both land here.
+  var PLAN_MOVED = "The plan changed on disk \u2014 reload to review again.";
   var annotations = Array.isArray(data.annotations) ? data.annotations.slice() : [];
   var saved = false;
   var approved = false;
@@ -44,6 +62,7 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   var stateEl = document.getElementById("review-state");
   var approveButton = document.getElementById("approve");
   var saveButton = document.getElementById("save");
+  var postButton = document.getElementById("post");
   var cancelButton = document.getElementById("cancel");
   var outlineList = document.getElementById("outline-list");
   var progressEl = document.getElementById("progress-fill");
@@ -54,386 +73,25 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     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";
-  }
+${WEB_CHROME_JS}
 
-  // The always-visible header chip: connection, comment count, and whether
-  // there are edits the file does not have yet.
-  function updateState() {
-    if (!stateEl) return;
-    var label;
-    var tone = "";
-    if (approved) {
-      label = "Approved";
-      tone = "success";
-    } else if (saved) {
-      label = "Saved";
-      tone = "success";
-    } else if (closed) {
-      // Settled by the user, not by a dropped stream: never flash Offline.
-      label = "Closed";
-    } else if (connected === true) {
-      label = "Connected";
-      tone = "success";
-    } else if (everConnected) {
-      // Only after the stream has opened once: an error before that is a
-      // transient initial connect, so keep showing Connecting rather than Offline.
-      label = "Offline";
-      tone = "danger";
-    } else {
-      label = "Connecting\u2026";
-    }
-    var count = annotations.length;
-    label += " \u00b7 " + count + (count === 1 ? " comment" : " comments");
-    if (dirty && !saved && !approved && !closed) {
-      label += " \u00b7 unsaved";
-      if (!tone) tone = "warn";
-    }
-    stateEl.textContent = label;
-    stateEl.className = "bf-chip bf-chip--accent review-state" + (tone ? " bf-chip--" + tone : "");
-  }
+${WEB_COMMENTS_JS}
 
-  // A link is rendered only for an http(s) or mailto target. Resolving against
-  // the review origin is what catches a target that only looks relative: the
-  // URL parser strips a tab or newline, so "/\t/evil.com" is cross-origin once
-  // it is parsed, and a disguised target must stay text.
-  function safeHref(url, base) {
-    var trimmed = String(url).trim();
-    if (!trimmed || /^\/\//.test(trimmed)) return null;
-    var resolved;
-    try { resolved = new URL(trimmed, base); } catch (error) { return null; }
-    if (resolved.protocol === "mailto:") return trimmed;
-    if (resolved.protocol !== "http:" && resolved.protocol !== "https:") return null;
-    if (resolved.username || resolved.password) return null;
-    if (resolved.origin === new URL(base).origin) return resolved.href;
-    return /^https?:\/\//i.test(trimmed) ? resolved.href : null;
-  }
-
-  // Inline token order matters: code, emphasis, and links are matched before a
-  // bare URL, so a URL inside a link target or a code span is never re-split.
-  var INLINE = /(\x60[^\x60]+\x60|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\)|(?:https?:\/\/|www\.)[^\s<]+)/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], location.href);
-        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;
-      }
-      // GFM extended autolink: a bare http(s) or www. URL in running text.
-      if ((match = /^(?:https?:\/\/|www\.)[^\s<]+$/.exec(part))) {
-        var url = match[0].replace(/[.,;:!?*_~]+$/, "");
-        while (url.charAt(url.length - 1) === ")" && (url.match(/\(/g) || []).length < (url.match(/\)/g) || []).length) {
-          url = url.slice(0, -1).replace(/[.,;:!?*_~]+$/, "");
-        }
-        var dot = url.indexOf(".");
-        var target = /^www\./i.test(url) ? "http://" + url : url;
-        var safe = dot > 0 && /\.[^./]/.test(url.slice(dot)) ? safeHref(target, location.href) : null;
-        if (safe) {
-          var auto = el("a");
-          auto.textContent = url;
-          auto.href = safe;
-          auto.target = "_blank";
-          auto.rel = "noreferrer noopener";
-          container.appendChild(auto);
-          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);
-  }
-
-  // A GFM table: split each pipe row into cells and honour the alignment row.
-  function splitRow(line) {
-    var text = String(line).trim();
-    if (text.charAt(0) === "|") text = text.slice(1);
-    if (text.charAt(text.length - 1) === "|") text = text.slice(0, -1);
-    return text.split("|").map(function (cell) { return cell.trim(); });
-  }
-
-  function columnAlign(delim) {
-    return splitRow(delim).map(function (cell) {
-      var left = cell.charAt(0) === ":";
-      var right = cell.charAt(cell.length - 1) === ":";
-      return left && right ? "center" : right ? "right" : left ? "left" : "";
-    });
-  }
-
-  function renderTable(wrap, block) {
-    var rows = block.lines.map(splitRow);
-    var align = columnAlign(block.lines[1] || "");
-    var table = el("table", "review-table");
-    var thead = el("thead");
-    var headRow = el("tr");
-    rows[0].forEach(function (cell, index) {
-      var th = el("th");
-      if (align[index]) th.style.textAlign = align[index];
-      renderInline(th, cell);
-      headRow.appendChild(th);
-    });
-    thead.appendChild(headRow);
-    table.appendChild(thead);
-    var tbody = el("tbody");
-    rows.slice(2).forEach(function (cells) {
-      var tr = el("tr");
-      rows[0].forEach(function (unused, index) {
-        var td = el("td");
-        if (align[index]) td.style.textAlign = align[index];
-        renderInline(td, cells[index] || "");
-        tr.appendChild(td);
-      });
-      tbody.appendChild(tr);
-    });
-    table.appendChild(tbody);
-    var scroll = el("div", "review-table-wrap");
-    scroll.appendChild(table);
-    wrap.appendChild(scroll);
-  }
-
-  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 === "table") { renderTable(wrap, block); return; }
-    if (block.kind === "hr") { wrap.appendChild(el("hr")); 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") {
-      var items = [];
-      lines.forEach(function (line) {
-        var match = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(line);
-        if (!match) {
-          // A following unmarked line is a CommonMark lazy continuation of the
-          // item above; join it so the paragraph hangs under the item's text.
-          var last = items[items.length - 1];
-          if (last) { if (line.trim()) last.rest += " " + line.trim(); return; }
-          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");
-        row.appendChild(marker); row.appendChild(body); wrap.appendChild(row);
-        items.push({ body: body, rest: rest });
-      });
-      // Render each body once, after its continuation lines are collected.
-      items.forEach(function (item) { renderInline(item.body, item.rest); });
-      return;
-    }
-    var paragraph = el("p");
-    renderInline(paragraph, lines.join(" "));
-    wrap.appendChild(paragraph);
-  }
+${WEB_COLLAB_JS}
 
+${WEB_MARKDOWN_JS}
   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, limits.quote);
-  }
-
-  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;
-  }
-
-  // Enter submits a comment; Shift+Enter is left for the browser.
-  function submitOnEnter(area, submit) {
-    area.addEventListener("keydown", function (event) {
-      // An IME uses Enter to commit a composition; submitting then would send a
-      // half-typed comment.
-      if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
-      event.preventDefault();
-      submit();
-    });
-  }
-
-  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 (Enter to add)";
-    area.setAttribute("aria-label", "Comment");
-    area.maxLength = limits.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";
-    var submit = function () {
-      var comment = area.value.replace(/\s+/g, " ").trim();
-      if (!comment) { area.focus(); return; }
-      if (annotations.length >= limits.comments) { setStatus("Comment limit reached (" + limits.comments + ").", "error"); return; }
-      annotations.push(quote ? { anchor: block.start, quote: quote, comment: comment } : { anchor: block.start, comment: comment });
-      dirty = true;
-      renderPlan();
-    };
-    add.addEventListener("click", submit);
-    submitOnEnter(area, submit);
-    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");
-    area.maxLength = limits.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;
-      dirty = true;
-      renderPlan();
-    });
-    submitOnEnter(area, function () { apply.click(); });
-    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");
-      var head = el("div", "bf-comment__head");
-      var label = el("span", "bf-comment__label"); label.textContent = "Review";
-      head.appendChild(label);
-      head.appendChild(el("span", "bf-comment__spacer"));
-      var actions = el("div", "bf-comment__actions");
-      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); dirty = true; renderPlan(); });
-      actions.appendChild(edit); actions.appendChild(remove); head.appendChild(actions);
-      card.appendChild(head);
-      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);
-      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);
+    // The only status a composer leaves behind is the refusal to leave it; once
+    // the draft is gone that sentence is stale.
+    if (statusEl && statusEl.textContent === DRAFT_REFUSAL) setStatus("");
+    // Closing is how a half-typed comment is discarded, so the stored draft follows
+    // it. A close with nothing open must not rewrite — and so drop — a restored one.
+    if (open) saveDraft();
   }
 
   function observeSections() {
@@ -501,6 +159,9 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     // The server counts the same step list approval seeds, so this never
     // disagrees with the todo list over a checkbox outside the Steps section.
     var steps = data.steps || { done: 0, total: 0 };
+    // A plan with no Steps section has no progress to show; 0/0 is noise.
+    var stepFact = document.getElementById("step-fact");
+    if (stepFact) stepFact.hidden = !steps.total;
     var stepFill = document.getElementById("step-fill");
     if (stepFill) stepFill.style.width = (steps.total > 0 ? Math.round((steps.done / steps.total) * 100) : 0) + "%";
     var stepCount = document.getElementById("step-count");
@@ -540,19 +201,36 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     setActive(activeIndex + delta);
   }
 
+  /** The rendered block and its island block for a source line, when both exist. */
+  function blockAtLine(line) {
+    var wrap = planEl ? planEl.querySelector('.bf-block[data-line="' + line + '"]') : null;
+    var block = (data.blocks || []).filter(function (item) { return item.start === line; })[0];
+    return wrap && block ? { wrap: wrap, block: block } : null;
+  }
+
+  /** Reopen the composer a reload interrupted, once its block has rendered. */
+  function reopenComposer(typing) {
+    if (!typing || saved || approved || closed) return;
+    var target = blockAtLine(typing.anchor);
+    if (target) openComposer(target.wrap, target.block, typing.quote || "", typing.text);
+  }
+
   function commentOnActive() {
-    var blocks = blockElements();
-    if (blocks.length === 0) return;
+    if (blockElements().length === 0) return;
     if (activeIndex < 0) setActive(0);
     var wrap = blockElements()[Math.max(0, activeIndex)];
     if (!wrap) return;
-    var line = Number(wrap.getAttribute("data-line"));
-    var block = (data.blocks || []).filter(function (item) { return item.start === line; })[0];
-    if (block) openComposer(wrap, block, "");
+    var target = blockAtLine(Number(wrap.getAttribute("data-line")));
+    if (target) openComposer(target.wrap, target.block, "");
   }
 
   function renderPlan() {
     if (!planEl) return;
+    // The DOM below is thrown away and rebuilt. Focus is only put back when it was
+    // inside this document to begin with: a repaint the stream caused must never
+    // pull the keyboard away from the page the reviewer is working in.
+    var focused = document.activeElement;
+    var keepFocus = !!(focused && focused !== planEl && planEl.contains(focused));
     closeComposer();
     pendingQuote = null;
     var scrollTop = planEl.scrollTop;
@@ -604,83 +282,52 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     // place rather than scrolling, so j/k resume where the reviewer was.
     var active = activeIndex >= 0 ? blockElements()[activeIndex] : null;
     if (active) active.classList.add("bf-block--active");
+    // The focused element went with the old DOM, so put the tab stop back on the
+    // block's comment control: that is where adding, editing, or deleting left it.
+    if (keepFocus && active) {
+      var stop = active.querySelector(".bf-block__add");
+      if (stop) stop.focus();
+    }
     renderFacts();
     observeSections();
     updateState();
   }
 
-  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 updateProgress() {
-    if (!progressEl) return;
-    var doc = document.scrollingElement || document.documentElement;
-    var top = doc ? doc.scrollTop : 0;
-    var height = doc ? doc.scrollHeight : 0;
-    var view = doc ? doc.clientHeight : 0;
-    if (planEl && planEl.scrollHeight > planEl.clientHeight + 4) {
-      top = planEl.scrollTop; height = planEl.scrollHeight; view = planEl.clientHeight;
-    }
-    var max = height - view;
-    var percent = max > 0 ? Math.min(100, Math.max(0, (top / max) * 100)) : 0;
-    progressEl.style.width = percent + "%";
-  }
-
-  function lockActions() {
-    if (approveButton) approveButton.disabled = true;
-    if (saveButton) saveButton.disabled = true;
-    if (cancelButton) cancelButton.disabled = true;
-  }
-
-  // A conflict means the file moved under the page; only a reload can re-anchor.
-  function offerReload() {
-    if (document.getElementById("reload")) return;
-    var controls = document.querySelector(".review-controls");
-    if (!controls) return;
-    var reload = el("button");
-    reload.type = "button";
-    reload.id = "reload";
-    reload.className = "bf-btn bf-btn--primary";
-    reload.textContent = "Reload";
-    reload.addEventListener("click", function () { window.location.reload(); });
-    controls.appendChild(reload);
-  }
 
-  // The stream exists only to notice a closed tab. Once the review is settled it
-  // has no job, and leaving it open retries a dead port until the tab closes.
-  function settleStream() {
-    if (stream && stream.close) { stream.close(); stream = null; }
-  }
-
-  // Save and approve share the same POST shape; only the route, the settled
-  // flag, and the wording differ. Both persist the current annotations.
-  function submit(url, okText, failText, mark) {
+  // Save, approve, and post share the same POST shape; what differs is whether
+  // the review settles. Only the owner's save and approve resolve the session,
+  // so only their callback marks the page terminal. A reviewer posts only their
+  // own comments, so a page showing everyone's cannot re-post another writer's.
+  function submit(url, okText, failText, onOk) {
+    var payload = role === "reviewer" ? annotations.filter(isMine) : annotations;
     fetch(url + "?token=" + encodeURIComponent(token), {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ annotations: annotations })
+      body: JSON.stringify({ annotations: payload })
     }).then(function (response) {
       if (response.ok) {
-        mark();
         dirty = false;
-        settleStream();
+        clearDraft();
         setStatus(okText, "saved");
-        lockActions();
+        if (onOk) onOk();
         updateState();
-        return;
+        // The server binds a reviewer's name to her link on the first post; adopt it
+        // so a second tab of the same link posts under the same name.
+        return response.json().then(function (payload) {
+          if (role === "reviewer" && payload && typeof payload.author === "string" && payload.author) adoptName(payload.author);
+        }, function () {});
       }
       if (response.status === 409) {
-        setStatus("The plan changed on disk \u2014 reload to review again.", "error");
+        // A conflict is either a plan that moved under the page or a link already
+        // bound to another name; a reload fixes both, and the server names which.
         if (approveButton) approveButton.disabled = true;
         if (saveButton) saveButton.disabled = true;
+        if (postButton) postButton.disabled = true;
         offerReload();
-        return;
+        return response.json().then(
+          function (payload) { setStatus(payload && payload.error ? payload.error : PLAN_MOVED, "error"); },
+          function () { setStatus(PLAN_MOVED, "error"); }
+        );
       }
       // Surface the server's own reason (a malformed comment, a stale body)
       // rather than a bare status code.
@@ -693,20 +340,55 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     });
   }
 
+  // A composer holds text the page has not committed, so the ways off the page
+  // refuse while it does: leaving would drop what the reviewer typed.
+  function draftTextarea() {
+    var open = planEl ? planEl.querySelector(".bf-composer") : null;
+    var area = open ? open.querySelector("textarea") : null;
+    return area && area.value.trim() ? area : null;
+  }
+  function guardDraft() {
+    var area = draftTextarea();
+    if (!area) return false;
+    setStatus(DRAFT_REFUSAL, "error");
+    area.focus();
+    return true;
+  }
+
   function save() {
     if (saved || approved || closed) return;
+    if (guardDraft()) return;
     setStatus("Saving\u2026");
-    submit("/api/feedback", "Saved \u2014 return to Pi to continue.", "Could not save: ", function () { saved = true; });
+    submit("/api/feedback", "Saved \u2014 return to Pi to continue.", "Could not save: ", function () {
+      saved = true;
+      settleStream();
+      lockActions();
+    });
+  }
+
+  // A reviewer's write never settles the page: the server keeps the review open,
+  // so the page keeps following it and she can keep editing her own comments.
+  function postComments() {
+    if (closed) return;
+    if (guardDraft()) return;
+    setStatus("Posting\u2026");
+    submit("/api/comment", "Comments posted \u2014 the owner sees them now.", "Could not post: ", null);
   }
 
   function approve() {
     if (saved || approved || closed) return;
     setStatus("Approving\u2026");
-    submit("/api/approve", "Approved \u2014 return to Pi to continue.", "Could not approve: ", function () { approved = true; });
+    submit("/api/approve", "Approved \u2014 return to Pi to continue.", "Could not approve: ", function () {
+      approved = true;
+      settleStream();
+      lockActions();
+    });
   }
 
   function cancel() {
-    if (saved || approved || closed) return;
+    // Closing the review is the owner's decision; a reviewer closes their tab.
+    if (role !== "owner" || saved || approved || closed) return;
+    if (guardDraft()) return;
     closed = true;
     settleStream();
     lockActions();
@@ -718,10 +400,53 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     });
   }
 
-  if (approveButton) approveButton.addEventListener("click", approve);
+  if (postButton) postButton.addEventListener("click", postComments);
   if (saveButton) saveButton.addEventListener("click", save);
   if (cancelButton) cancelButton.addEventListener("click", cancel);
 
+  // Approving runs the plan and cannot be undone from the page, so the header
+  // button and the a key open the confirmation instead of posting. The dialog
+  // script is the same one the shortcut sheet uses: Tab trapped, Esc, focus back
+  // on whatever opened it.
+  ${dialogScript({ dialogId: "approve-dialog", closeId: "approve-cancel", globalName: "bfApprove" })}
+  var approveDialog = document.getElementById("approve-dialog");
+
+  function askApprove() {
+    if (saved || approved || closed) return;
+    if (guardDraft()) return;
+    if (!approveDialog || !window.bfApprove) { approve(); return; }
+    window.bfApprove.open();
+  }
+  function confirmApprove() {
+    if (window.bfApprove) window.bfApprove.close();
+    approve();
+  }
+  if (approveButton) approveButton.addEventListener("click", askApprove);
+  var approveConfirm = document.getElementById("approve-confirm");
+  if (approveConfirm) approveConfirm.addEventListener("click", confirmApprove);
+
+  // The share and name dialogs. The fragment above holds their behaviour; this
+  // is the wiring, which needs the page's own element handles.
+  var shareButton = document.getElementById("share");
+  var shareDialogNode = document.getElementById("share-dialog");
+  var shareLinksEl = document.getElementById("share-links");
+  var shareQrEl = document.getElementById("share-qr");
+  var shareStop = document.getElementById("share-stop");
+  var shareNew = document.getElementById("share-new");
+  var shareNote = document.getElementById("share-note");
+  var nameButton = document.getElementById("reviewer-name");
+  var nameInput = document.getElementById("name-input");
+
+  if (shareButton) shareButton.addEventListener("click", shareNow);
+  if (shareStop) shareStop.addEventListener("click", stopSharing);
+  if (shareNew) shareNew.addEventListener("click", newLink);
+  ${dialogScript({ dialogId: "share-dialog", closeId: "share-close", globalName: "bfShare" })}
+
+  if (nameButton) nameButton.addEventListener("click", askName);
+  var nameSave = document.getElementById("name-save");
+  if (nameSave) nameSave.addEventListener("click", saveName);
+  ${dialogScript({ dialogId: "name-dialog", closeId: "name-cancel", globalName: "bfName" })}
+
   // Remember a selection made inside a block so clicking the rail button can
   // still quote it after the button press has collapsed the selection.
   document.addEventListener("mouseup", function (event) {
@@ -731,7 +456,8 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     pendingQuote = wrap && quote ? { wrap: wrap, quote: quote } : null;
   });
 
-  // The sheet's own wiring (trigger, close button, backdrop) is shared with browse.
+  // The sheet's own wiring — trigger, close button, backdrop, Tab trap, and Esc —
+  // is shared with browse; the page keeps only its own keymap.
   ${keysDialogScript("shortcuts")}
 
   function typing(target) {
@@ -741,9 +467,8 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
 
   document.addEventListener("keydown", function (event) {
     if (event.key === "Escape") {
-      // Esc peels one layer at a time: the composer, then the sheet, then the review.
+      // The sheet owns its own Esc; this peels the composer, then the review.
       if (planEl && planEl.querySelector(".bf-composer")) { closeComposer(); return; }
-      if (window.bfKeys.isOpen()) { window.bfKeys.close(); return; }
       cancel();
       return;
     }
@@ -755,8 +480,8 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     if (event.key === "j") { event.preventDefault(); moveActive(1); return; }
     if (event.key === "k") { event.preventDefault(); moveActive(-1); return; }
     if (event.key === "c") { event.preventDefault(); commentOnActive(); return; }
-    if (event.key === "a" && approveButton) { event.preventDefault(); approve(); return; }
-    if (event.key === "s") { event.preventDefault(); save(); return; }
+    if (event.key === "a" && approveButton) { event.preventDefault(); askApprove(); return; }
+    if (event.key === "s") { event.preventDefault(); if (saveButton) save(); else postComments(); return; }
   });
 
   // A closed tab is detected by the stream below: the server sees the last
@@ -772,6 +497,7 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   try {
     stream = new EventSource("/events?token=" + encodeURIComponent(token));
     stream.addEventListener("open", function () { connected = true; everConnected = true; updateState(); });
+    stream.addEventListener("message", function (event) { refreshFromServer(event); });
     stream.addEventListener("error", function () {
       // The server ends the stream once the review is settled; keep showing the
       // terminal state rather than Offline.
@@ -786,9 +512,14 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
 
   ${THEME_TOGGLE_JS}
 
+  // A reload during a review keeps this tab's unsaved work: the comments it added
+  // and the composer it was typing into, which needs the blocks rendered first.
+  var restoredTyping = restoreDraft();
   renderHeader();
+  renderName();
   renderOutline();
   renderPlan();
+  reopenComposer(restoredTyping);
   updateProgress();
 })();
 `;