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

package/extensions/plan/web-client.ts

@@ -15,6 +15,8 @@
 
 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 () {
@@ -30,7 +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;
@@ -49,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");
@@ -61,6 +75,10 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
 
 ${WEB_CHROME_JS}
 
+${WEB_COMMENTS_JS}
+
+${WEB_COLLAB_JS}
+
 ${WEB_MARKDOWN_JS}
   function closeComposer() {
     var open = planEl ? planEl.querySelector(".bf-composer") : null;
@@ -71,164 +89,9 @@ ${WEB_MARKDOWN_JS}
     // 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("");
-  }
-
-  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();
-  }
-
-  // Deleting a comment is one click, so it is undoable rather than confirmed: the
-  // removed note is held for a few seconds and offered back in the header.
-  var undo = null;
-
-  function clearUndo() {
-    if (undo && undo.timer) window.clearTimeout(undo.timer);
-    if (undo && undo.button && undo.button.parentNode) undo.button.parentNode.removeChild(undo.button);
-    undo = null;
-  }
-
-  function offerUndo(index, annotation) {
-    var controls = document.querySelector(".review-controls");
-    clearUndo();
-    if (!controls) return;
-    var button = el("button", "bf-btn");
-    button.type = "button";
-    button.id = "undo-delete";
-    button.textContent = "Undo delete";
-    button.addEventListener("click", function () {
-      annotations.splice(Math.min(index, annotations.length), 0, annotation);
-      dirty = true;
-      clearUndo();
-      renderPlan();
-      setStatus("Comment restored.", "saved");
-    });
-    controls.appendChild(button);
-    undo = { button: button, timer: window.setTimeout(clearUndo, 6000) };
-  }
-
-  function removeComment(index) {
-    var annotation = annotations[index];
-    if (!annotation) return;
-    annotations.splice(index, 1);
-    dirty = true;
-    renderPlan();
-    offerUndo(index, annotation);
-    setStatus("Comment deleted.");
-  }
-
-  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 () { removeComment(index); });
-      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);
+    // 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() {
@@ -338,19 +201,36 @@ ${WEB_MARKDOWN_JS}
     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;
@@ -402,35 +282,52 @@ ${WEB_MARKDOWN_JS}
     // 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();
   }
 
 
-  // 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.
@@ -462,17 +359,35 @@ ${WEB_MARKDOWN_JS}
     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();
@@ -485,6 +400,7 @@ ${WEB_MARKDOWN_JS}
     });
   }
 
+  if (postButton) postButton.addEventListener("click", postComments);
   if (saveButton) saveButton.addEventListener("click", save);
   if (cancelButton) cancelButton.addEventListener("click", cancel);
 
@@ -509,6 +425,28 @@ ${WEB_MARKDOWN_JS}
   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) {
@@ -543,7 +481,7 @@ ${WEB_MARKDOWN_JS}
     if (event.key === "k") { event.preventDefault(); moveActive(-1); return; }
     if (event.key === "c") { event.preventDefault(); commentOnActive(); return; }
     if (event.key === "a" && approveButton) { event.preventDefault(); askApprove(); return; }
-    if (event.key === "s") { event.preventDefault(); save(); 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
@@ -559,6 +497,7 @@ ${WEB_MARKDOWN_JS}
   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.
@@ -573,9 +512,14 @@ ${WEB_MARKDOWN_JS}
 
   ${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();
 })();
 `;

package/extensions/plan/web-collab.ts

@@ -0,0 +1,207 @@
+/**
+ * The shared review's client half: who is looking, and what everyone else does.
+ *
+ * A fragment of the same IIFE `web-client.ts` ships (`WEB_COLLAB_JS` is
+ * interpolated into `REVIEW_CLIENT_JS`), kept apart so the reviewer identity, the
+ * share dialog, and the stream-driven refetch are read together and away from
+ * the document rendering. It owns no state of its own: it reads the page's
+ * `data`, `annotations`, `role`, and `reviewerName` and calls the page's own
+ * `renderPlan` / `renderFacts` / `updateState` / `setStatus`.
+ */
+
+export const WEB_COLLAB_JS = String.raw`  /**
+   * Sharing: the owner mints one link per person, re-reads the set, and revokes a
+   * single link without touching the others. The QR is the server's inline SVG,
+   * parsed and imported rather than pasted, so the page keeps its one rule: no
+   * text ever becomes HTML.
+   */
+  function setQr(svg) {
+    if (!shareQrEl) return;
+    while (shareQrEl.firstChild) shareQrEl.removeChild(shareQrEl.firstChild);
+    if (!svg) return;
+    var parsed = new DOMParser().parseFromString(svg, "image/svg+xml");
+    var root = parsed && parsed.documentElement;
+    if (root && root.nodeName === "svg") shareQrEl.appendChild(document.importNode(root, true));
+  }
+
+  /** One row per link: its URL, who holds it, and the two things to do with it. */
+  function renderShareLinks(state) {
+    if (!shareLinksEl) return;
+    while (shareLinksEl.firstChild) shareLinksEl.removeChild(shareLinksEl.firstChild);
+    var links = state && state.links ? state.links : [];
+    links.forEach(function (link) {
+      var row = el("li", "review-share__row");
+      var url = el("span", "review-share__url");
+      url.textContent = link.url;
+      url.title = link.url;
+      var who = el("span", link.name ? "review-share__who review-share__who--bound" : "review-share__who");
+      who.textContent = link.name ? "@" + link.name : "unnamed";
+      var actions = el("span", "review-share__actions");
+      actions.appendChild(rowButton("Copy", function () { copyLink(link.url); }));
+      actions.appendChild(rowButton("Revoke", function () { revokeLink(link.id); }));
+      row.appendChild(url);
+      row.appendChild(who);
+      row.appendChild(actions);
+      shareLinksEl.appendChild(row);
+    });
+  }
+
+  function rowButton(label, onClick) {
+    var button = el("button", "bf-btn");
+    button.type = "button";
+    button.textContent = label;
+    button.addEventListener("click", onClick);
+    return button;
+  }
+
+  function copyLink(url) {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) return;
+    navigator.clipboard.writeText(url).then(function () { setStatus("Link copied."); }, function () {});
+  }
+
+  function showShare(state, svg) {
+    if (!shareDialogNode) return;
+    renderShareLinks(state);
+    setQr(svg);
+    if (shareStop) shareStop.disabled = !(state && state.sharing);
+    if (shareNote) {
+      shareNote.textContent = state && state.reason
+        ? state.reason
+        : "One link per person: each link posts under the name it binds. Only you can approve.";
+    }
+    if (window.bfShare) window.bfShare.open();
+  }
+
+  /** POST one share action, then render whatever set the server answered with. */
+  function shareAction(route, body, failText) {
+    fetch(route + "?token=" + encodeURIComponent(token), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body || {})
+    }).then(function (response) {
+      return response.json().then(function (payload) {
+        if (!response.ok) throw new Error(payload && payload.error ? payload.error : "server returned " + response.status);
+        if (payload && payload.share) showShare(payload.share, payload.svg);
+        return payload;
+      });
+    }).catch(function (error) { setStatus(failText + error.message, "error"); });
+  }
+
+  function shareNow() {
+    shareAction("/api/share", null, "Could not share: ");
+  }
+
+  function newLink() {
+    shareAction("/api/share/link", null, "Could not mint a link: ");
+  }
+
+  function revokeLink(id) {
+    shareAction("/api/share/revoke", { id: id }, "Could not revoke that link: ");
+  }
+
+  function stopSharing() {
+    fetch("/api/share/stop?token=" + encodeURIComponent(token), { method: "POST" })
+      .then(function (response) { return response.json(); })
+      .then(function (payload) {
+        if (payload && payload.share) showShare(payload.share, null);
+        setStatus("Reviewers can no longer open this review.");
+      })
+      .catch(function () { setStatus("Could not stop sharing.", "error"); });
+  }
+
+  /**
+   * A reviewer names herself once. The server binds that name to her link on the
+   * first post, and a bound link cannot rename itself, so the page shows the name
+   * it posts under and stops offering the dialog.
+   */
+  function renderName() {
+    if (!nameButton) return;
+    if (role !== "reviewer") { nameButton.hidden = true; return; }
+    nameButton.hidden = false;
+    nameButton.textContent = reviewerName ? "Reviewing as " + reviewerName : "Set your name";
+    nameButton.disabled = reviewerBound;
+  }
+
+  /** Take the name the server bound to this link, and stop offering the dialog. */
+  function adoptName(name) {
+    var value = String(name || "").trim().slice(0, 40);
+    if (!value) return;
+    reviewerBound = true;
+    if (value === reviewerName) { renderName(); return; }
+    reviewerName = value;
+    try { window.localStorage.setItem("bf-review-name", reviewerName); } catch (error) {}
+    renderName();
+    renderPlan();
+  }
+
+  function askName() {
+    if (reviewerBound) { setStatus("This link already posts as @" + reviewerName + "."); return; }
+    if (nameInput) nameInput.value = reviewerName;
+    if (window.bfName) window.bfName.open();
+    if (nameInput) nameInput.focus();
+  }
+
+  function saveName() {
+    if (reviewerBound) return;
+    reviewerName = nameInput ? nameInput.value.trim().slice(0, 40) : "";
+    try { window.localStorage.setItem("bf-review-name", reviewerName); } catch (error) {}
+    if (window.bfName) window.bfName.close();
+    renderName();
+    renderPlan();
+  }
+
+  /**
+   * Another open page changed the review: a comment landed, the plan was saved,
+   * or sharing changed. The island is the one contract, so the page re-reads it
+   * and re-renders rather than growing a second update path. A draft in progress
+   * is never thrown away; the status line says what arrived instead.
+   */
+  function refreshFromServer(event) {
+    var kind = event && event.data ? String(event.data).trim() : "";
+    // A terminal frame is the server saying why this page will not update again;
+    // a reviewer has no decision to make, so being told beats reading "Offline".
+    if (kind === "closed") {
+      if (saved || approved || closed) return;
+      closed = true;
+      clearDraft();
+      settleStream();
+      lockActions();
+      setStatus("The review is closed.", "info");
+      updateState();
+      return;
+    }
+    if (kind === "revoked") {
+      if (closed) return;
+      closed = true;
+      clearDraft();
+      settleStream();
+      lockActions();
+      setStatus("The owner stopped sharing this review \u2014 your comments stay in the plan.", "info");
+      updateState();
+      return;
+    }
+    if (saved || approved || closed) return;
+    if (draftTextarea()) {
+      setStatus("A change arrived; finish or discard your draft to see it.");
+      return;
+    }
+    fetch(window.location.pathname + window.location.search)
+      .then(function (response) { return response.text(); })
+      .then(function (html) {
+        var parsed = new DOMParser().parseFromString(html, "text/html");
+        var node = parsed.getElementById("review-data");
+        if (!node || !node.textContent) return;
+        var next = JSON.parse(node.textContent);
+        data = next;
+        annotations = Array.isArray(next.annotations) ? next.annotations.slice() : [];
+        if (typeof next.author === "string" && next.author) adoptName(next.author);
+        // This tab's own unsaved comments belong on top of what just arrived.
+        restoreDraft();
+        renderPlan();
+        renderFacts();
+        updateState();
+        setStatus(kind === "plan" ? "The plan changed on disk; showing the new version." : "Updated with a new comment.");
+      })
+      .catch(function () {});
+  }
+`;