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

package/extensions/plan/web-chrome.ts

@@ -8,10 +8,7 @@
  */
 
 export const WEB_CHROME_JS = String.raw`  function setStatus(text, kind) {
-    if (!statusEl) return;
-    statusEl.textContent = text || "";
-    statusEl.title = text || "";
-    statusEl.className = kind ? "bf-status bf-status--" + kind : "bf-status";
+    if (statusEl) paintStatus(statusEl, text, kind);
   }
 
   // The always-visible header chip: connection, comment count, and whether
@@ -56,7 +53,8 @@ export const WEB_CHROME_JS = String.raw`  function setStatus(text, kind) {
       titleEl.textContent = data.title;
       titleEl.title = data.title;
     }
-    if (data.title) document.title = "Plan review \u00b7 " + data.title;
+    // The document's own <title> already names the plan, rendered with the page: a second
+    // copy of the same sentence in script is a tab title that can disagree with the head.
   }
 
   function updateProgress() {

package/extensions/plan/web-client.ts

@@ -1,23 +1,36 @@
 /**
  * The browser review client, served as `/client.js`.
  *
- * Kept as one self-contained script (like `file-browse/client.ts`) with no
- * 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
- * `EventSource` keeps a connection open so the server can tell when the tab is
- * gone; the explicit buttons are the primary save/cancel path.
+ * Served as one script with no build step, assembled from typed source: the element builder,
+ * typing test, status paint, and JSON POST come from `lib/web/client-runtime.ts`, and every
+ * rule the page has lives in its own `web-*.ts` module, interpolated below — the outline,
+ * the blocks and their navigation, the composer, the draft guard, the frame, the settlement,
+ * the keymap, and the Markdown, chrome, comments, and collaboration halves.
+ *
+ * What is left here is the composition root, deliberately: the element handles, the state
+ * the rules are handed, one adapter per rule that names it without arguments, the listeners
+ * that attach them, the `EventSource` that keeps a tab's presence known, and the boot order.
+ * None of it decides anything a test could disagree with — a rule that does belongs in a
+ * module, where it can be typed and driven.
+ *
+ * It renders the plan from the JSON data island using DOM text nodes only — plan and comment
+ * text never becomes markup — with each block's comment threads indented beneath it, code
+ * highlighted by copying only `tok-*` spans through `DOMParser`, and the annotation list
+ * saved back to the server.
  */
 
-import { dialogScript, keysDialogScript, THEME_TOGGLE_JS } from "../../lib/web/index.ts";
+import { CLIENT_RUNTIME_JS, 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";
+import { WEB_BLOCKS_JS } from "./web-blocks.ts";
+import { WEB_COMPOSER_JS } from "./web-composer.ts";
+import { WEB_DRAFT_JS } from "./web-draft.ts";
+import { WEB_OUTLINE_JS } from "./web-outline.ts";
+import { WEB_KEYS_JS } from "./web-keys.ts";
+import { WEB_PLAN_JS } from "./web-plan.ts";
+import { WEB_SETTLE_JS } from "./web-settle.ts";
 
 export const REVIEW_CLIENT_JS = String.raw`(function () {
   "use strict";
@@ -55,6 +68,15 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   var pendingQuote = null;
   var activeIndex = -1;
   var outlineItems = {};
+  /** The island's blocks, or none: one place the client reads them for navigation. */
+  function blocks() {
+    return Array.isArray(data.blocks) ? data.blocks : [];
+  }
+
+  /** The island's outline, or none: the one place the client reads it for the outline. */
+  function outlineEntries() {
+    return Array.isArray(data.outline) ? data.outline : [];
+  }
   var stream = null;
 
   var planEl = document.getElementById("plan");
@@ -67,337 +89,155 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   var outlineList = document.getElementById("outline-list");
   var progressEl = document.getElementById("progress-fill");
 
-  function el(tag, className) {
-    var node = document.createElement(tag);
-    if (className) node.className = className;
-    return node;
-  }
+${CLIENT_RUNTIME_JS}
 
-${WEB_CHROME_JS}
+${WEB_OUTLINE_JS}
 
-${WEB_COMMENTS_JS}
+${WEB_BLOCKS_JS}
 
-${WEB_COLLAB_JS}
+${WEB_KEYS_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");
-    });
-    // 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();
-  }
+${WEB_SETTLE_JS}
 
-  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: "-88px 0px -68% 0px", threshold: 0 });
-    headings.forEach(function (heading) { sectionObserver.observe(heading); });
-  }
+${WEB_PLAN_JS}
 
-  function renderOutline() {
-    outlineItems = {};
-    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);
-      var label = el("span", "review-nav__link");
-      label.textContent = item.text;
-      link.appendChild(label);
-      if (item.changed) {
-        var dot = el("span", "review-changed");
-        dot.setAttribute("role", "img");
-        dot.setAttribute("aria-label", "Changed since your last review");
-        dot.title = "Changed since your last review";
-        link.appendChild(dot);
-      }
-      var count = el("span", "review-nav__count");
-      count.hidden = true;
-      link.appendChild(count);
-      li.appendChild(link);
-      outlineList.appendChild(li);
-      outlineItems[item.line] = count;
-    });
-  }
+${WEB_COMPOSER_JS}
 
-  // The section a source line belongs to: the last heading at or before it.
-  function sectionFor(line) {
-    var items = Array.isArray(data.outline) ? data.outline : [];
-    var found = null;
-    items.forEach(function (item) { if (item.line <= line) found = item; });
-    return found;
-  }
+${WEB_DRAFT_JS}
 
-  // Review facts: the plan's step progress, and the comments per section.
-  function renderFacts() {
-    // 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");
-    if (stepCount) stepCount.textContent = steps.done + "/" + steps.total;
-    var totalEl = document.getElementById("comment-total");
-    if (totalEl) totalEl.textContent = String(annotations.length);
-    Object.keys(outlineItems).forEach(function (line) { outlineItems[line].hidden = true; });
-    annotations.forEach(function (annotation) {
-      var section = sectionFor(annotation.anchor);
-      if (!section) return;
-      var count = outlineItems[section.line];
-      if (!count) return;
-      var value = count.hidden ? 0 : Number(count.textContent);
-      count.textContent = String(value + 1);
-      count.hidden = false;
-    });
-    updateState();
-  }
+${WEB_CHROME_JS}
 
-  function blockElements() {
-    return planEl ? Array.prototype.slice.call(planEl.querySelectorAll(".bf-block")) : [];
-  }
+${WEB_COMMENTS_JS}
 
-  function setActive(index) {
-    var blocks = blockElements();
-    if (blocks.length === 0) return;
-    activeIndex = Math.max(0, Math.min(blocks.length - 1, index));
-    blocks.forEach(function (block, at) { block.classList.toggle("bf-block--active", at === activeIndex); });
-    var current = blocks[activeIndex];
-    if (current && current.scrollIntoView) current.scrollIntoView({ block: "nearest" });
-  }
+${WEB_COLLAB_JS}
 
-  function moveActive(delta) {
-    var blocks = blockElements();
-    if (blocks.length === 0) return;
-    if (activeIndex < 0) { setActive(delta < 0 ? blocks.length - 1 : 0); return; }
-    setActive(activeIndex + delta);
-  }
+${WEB_MARKDOWN_JS}
 
-  /** 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;
+  // Review facts: the plan's step progress, and the comments per section.
+  function facts() {
+    // The server counts the same step list approval seeds, so this never disagrees with
+    // the todo list over a checkbox outside the Steps section.
+    renderFacts(data.steps || { done: 0, total: 0 }, annotations, outlineItems, outlineEntries());
+    updateState();
   }
 
-  /** 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);
+  /**
+   * What the composer lifecycle reads, built where its state is.
+   *
+   * The bundle holds the state and the element handles; web-composer.ts holds the rules,
+   * so each call hands it the things those rules ask for and nothing more.
+   */
+  function composer() {
+    return {
+      planEl: planEl,
+      statusEl: statusEl,
+      refusal: DRAFT_REFUSAL,
+      setStatus: setStatus,
+      saveDraft: saveDraft,
+      open: openComposer,
+    };
   }
 
-  function commentOnActive() {
-    if (blockElements().length === 0) return;
-    if (activeIndex < 0) setActive(0);
-    var wrap = blockElements()[Math.max(0, activeIndex)];
-    if (!wrap) return;
-    var target = blockAtLine(Number(wrap.getAttribute("data-line")));
-    if (target) openComposer(target.wrap, target.block, "");
+  /**
+   * Close the composer, for the surfaces that never see the bundle.
+   *
+   * The comment fragments call this while they build the form; they own the DOM, not the
+   * four pieces the rule reads, so they name the action and this supplies the state.
+   */
+  function closeOpenComposer() {
+    closeComposer(composer());
   }
-
-  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;
-    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 mine = annotations.filter(function (annotation) { return annotation.anchor === block.start; });
-      if (mine.length > 0) wrap.classList.add("bf-block--commented");
-      var rail = el("div", "bf-block__rail");
-      var add = el("button", "bf-block__add");
-      add.type = "button";
-      add.textContent = "+";
-      add.setAttribute("aria-label", "Comment on this block");
-      add.addEventListener("click", function () {
-        var quote = pendingQuote && pendingQuote.wrap === wrap ? pendingQuote.quote : selectionIn(wrap);
-        pendingQuote = null;
-        openComposer(wrap, block, quote);
-      });
-      rail.appendChild(add);
-      if (mine.length > 0) {
-        var badge = el("span", "bf-block__count");
-        badge.textContent = String(mine.length);
-        badge.title = mine.length === 1 ? "1 review comment" : mine.length + " review comments";
-        rail.appendChild(badge);
-      }
-      wrap.appendChild(rail);
-      wrap.addEventListener("focusin", function () { setActive(blockElements().indexOf(wrap)); });
-      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);
-    }
-    planEl.scrollTop = scrollTop;
-    // The DOM was rebuilt, so the active block's class is gone; restore it in
-    // 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();
+  /**
+   * What a repaint reads and changes, built where the state is.
+   *
+   * Reads are getters and mutations are callbacks, so the bundle keeps every variable it
+   * owns and web-plan.ts holds only the shape of one frame.
+   */
+  function planFrame() {
+    return {
+      planEl: planEl,
+      outlineList: outlineList,
+      focused: document.activeElement,
+      blocks: blocks,
+      annotations: function () { return annotations; },
+      activeIndex: function () { return activeIndex; },
+      setActiveIndex: function (index) { activeIndex = index; },
+      pendingQuote: function () { return pendingQuote; },
+      clearPendingQuote: function () { pendingQuote = null; },
+      composer: composer,
+      renderBlock: renderBlockContent,
+      renderComments: renderComments,
+      renderCommentCards: renderCommentCards,
+      selectionIn: selectionIn,
+      open: openComposer,
+      facts: facts,
+      updateState: updateState,
+    };
   }
 
+  function renderAll() {
+    sectionObserver = renderPlanFrame(planFrame(), closeOpenComposer, observeSections, sectionObserver);
+  }
 
   // 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: payload })
-    }).then(function (response) {
-      if (response.ok) {
-        dirty = false;
-        clearDraft();
-        setStatus(okText, "saved");
-        if (onOk) onOk();
-        updateState();
-        // 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) {
-        // 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 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.
-      return response.json().then(
-        function (payload) { throw new Error(payload && payload.error ? payload.error : "server returned " + response.status); },
-        function () { throw new Error("server returned " + response.status); }
-      );
-    }).catch(function (error) {
-      setStatus(failText + error.message, "error");
-    });
-  }
-
   // 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;
+  /** The ways off the page refuse while a comment is half-written; this says so once. */
+  function confirmNoDraft() {
+    return guardDraft(planEl, statusEl, DRAFT_REFUSAL, paintStatus);
   }
-  function guardDraft() {
-    var area = draftTextarea();
-    if (!area) return false;
-    setStatus(DRAFT_REFUSAL, "error");
-    area.focus();
-    return true;
+
+  /**
+   * What the settlement reads and changes, built where the state is.
+   *
+   * The flags live here, the buttons live here, the stream lives here; web-settle.ts owns
+   * the rules about them and reports each change through these callbacks.
+   */
+  function settlement() {
+    return {
+      token: function () { return token; },
+      role: function () { return role; },
+      mine: function () { return annotations.filter(isMine); },
+      annotations: function () { return annotations; },
+      settled: function () { return saved || approved || closed; },
+      setStatus: setStatus,
+      buttons: function () { return { approve: approveButton, save: saveButton, post: postButton }; },
+      clearDraft: clearDraft,
+      markClean: function () { dirty = false; },
+      adoptName: adoptName,
+      offerReload: offerReload,
+      markSettled: function (kind) {
+        if (kind === "saved") saved = true;
+        else if (kind === "approved") approved = true;
+        else closed = true;
+      },
+      settleStream: settleStream,
+      lockActions: lockActions,
+      updateState: updateState,
+      confirmNoDraft: confirmNoDraft,
+      post: postJson,
+      send: function (url) { return fetch(url, { method: "POST" }); },
+      planMoved: PLAN_MOVED,
+    };
   }
 
   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;
-      settleStream();
-      lockActions();
-    });
+    saveReview(settlement());
   }
 
-  // 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);
+    postReviewComments(settlement());
   }
 
   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;
-      settleStream();
-      lockActions();
-    });
+    approveReview(settlement());
   }
 
   function cancel() {
-    // 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();
-    setStatus("Closing\u2026");
-    updateState();
-    fetch("/api/cancel?token=" + encodeURIComponent(token), { method: "POST" }).catch(function () {}).then(function () {
-      setStatus("Closed \u2014 return to Pi.");
-      updateState();
-    });
+    cancelReview(settlement());
   }
 
   if (postButton) postButton.addEventListener("click", postComments);
@@ -413,7 +253,7 @@ ${WEB_MARKDOWN_JS}
 
   function askApprove() {
     if (saved || approved || closed) return;
-    if (guardDraft()) return;
+    if (confirmNoDraft()) return;
     if (!approveDialog || !window.bfApprove) { approve(); return; }
     window.bfApprove.open();
   }
@@ -450,38 +290,47 @@ ${WEB_MARKDOWN_JS}
   // 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) {
-    if (!planEl || saved || approved || closed) 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;
+    rememberSelection(event.target, {
+      planEl: planEl,
+      settled: function () { return saved || approved || closed; },
+      selectionIn: selectionIn,
+      setPending: function (quote) { pendingQuote = quote; },
+    });
   });
 
   // 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) {
-    var tag = target && target.tagName ? target.tagName : "";
-    return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || (target && target.isContentEditable);
+  /**
+   * What a key may do, built where the state and the handlers are.
+   *
+   * The listener below stays in the bundle with the rest of the wiring; the map of key to
+   * action is web-keys.ts, which is the part with a rule to it.
+   */
+  function keyActions() {
+    return {
+      composerOpen: function () { return !!(planEl && planEl.querySelector(".bf-composer")); },
+      closeComposer: closeOpenComposer,
+      cancel: cancel,
+      sheetOpen: function () { return window.bfKeys.isOpen(); },
+      toggleSheet: function () { window.bfKeys.toggle(); },
+      moveActive: function (delta) {
+        var next = moveActive(planEl, activeIndex, delta);
+        if (next !== null) activeIndex = next;
+      },
+      commentOnActive: function () { activeIndex = commentOnActive(composer(), activeIndex, blocks()); },
+      askApprove: askApprove,
+      save: save,
+      postComments: postComments,
+      hasSaveControl: function () { return !!saveButton; },
+      hasApproveControl: function () { return !!approveButton; },
+      typing: typing,
+    };
   }
 
   document.addEventListener("keydown", function (event) {
-    if (event.key === "Escape") {
-      // The sheet owns its own Esc; this peels the composer, then the review.
-      if (planEl && planEl.querySelector(".bf-composer")) { closeComposer(); return; }
-      cancel();
-      return;
-    }
-    if (typing(event.target)) return;
-    if (event.metaKey || event.ctrlKey || event.altKey) return;
-    if (event.key === "?") { event.preventDefault(); window.bfKeys.toggle(); return; }
-    // While the shortcut sheet is open it owns the keyboard.
-    if (window.bfKeys.isOpen()) return;
-    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(); askApprove(); return; }
-    if (event.key === "s") { event.preventDefault(); if (saveButton) save(); else postComments(); return; }
+    handleKey(event, keyActions());
   });
 
   // A closed tab is detected by the stream below: the server sees the last
@@ -517,9 +366,9 @@ ${WEB_MARKDOWN_JS}
   var restoredTyping = restoreDraft();
   renderHeader();
   renderName();
-  renderOutline();
-  renderPlan();
-  reopenComposer(restoredTyping);
+  outlineItems = renderOutline(outlineList, outlineEntries());
+  renderAll();
+  reopenComposer(composer(), restoredTyping, { saved: saved, approved: approved, closed: closed }, blocks());
   updateProgress();
 })();
 `;

package/extensions/plan/web-collab.ts

@@ -131,7 +131,7 @@ export const WEB_COLLAB_JS = String.raw`  /**
     reviewerName = value;
     try { window.localStorage.setItem("bf-review-name", reviewerName); } catch (error) {}
     renderName();
-    renderPlan();
+    renderAll();
   }
 
   function askName() {
@@ -147,7 +147,7 @@ export const WEB_COLLAB_JS = String.raw`  /**
     try { window.localStorage.setItem("bf-review-name", reviewerName); } catch (error) {}
     if (window.bfName) window.bfName.close();
     renderName();
-    renderPlan();
+    renderAll();
   }
 
   /**
@@ -197,7 +197,7 @@ export const WEB_COLLAB_JS = String.raw`  /**
         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();
+        renderAll();
         renderFacts();
         updateState();
         setStatus(kind === "plan" ? "The plan changed on disk; showing the new version." : "Updated with a new comment.");