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

package/extensions/plan/web-markdown.ts

@@ -0,0 +1,222 @@
+/**
+ * The Markdown half of the review client script.
+ *
+ * It is a fragment of the same IIFE `web-client.ts` ships (`WEB_MARKDOWN_JS` is
+ * interpolated into `REVIEW_CLIENT_JS`), kept in its own module so the client's
+ * event wiring and its document rendering are read one at a time. Every value it
+ * writes is a DOM text node: plan and comment text never becomes markup, and the
+ * only HTML it copies is the server's own `tok-*` spans.
+ */
+
+export const WEB_MARKDOWN_JS = String.raw`  // 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);
+  }
+`;

package/extensions/plan/web-page.ts

@@ -25,8 +25,11 @@ import {
 	WEB_LAYOUT_CSS,
 	WEB_THEME_CSS,
 } from "../../lib/web/index.ts";
+import { escapeHtml } from "../../lib/escape.ts";
 import type { PlanBlock } from "./blocks.ts";
 import type { PlanAnnotation } from "./feedback.ts";
+import type { ReviewRole } from "./types.ts";
+import type { ShareState } from "./web-share.ts";
 
 /** A heading the outline can jump to. */
 export interface ReviewOutlineItem {
@@ -67,8 +70,29 @@ export interface ReviewPageData {
 	limits: { comments: number; comment: number; quote: number };
 	/** Whether the review may approve the plan (only the `exit_plan_mode` flow). */
 	canApprove: boolean;
+	/** Who is looking: `owner` may approve, `reviewer` may only comment. */
+	role: ReviewRole;
+	/**
+	 * The name a reviewer's link posts under, once it has been bound. Absent for the
+	 * owner and for a reviewer that has not written yet, which is what tells the page
+	 * whether its name control is still a choice.
+	 */
+	author?: string;
+	/**
+	 * One line the owner needs before acting, such as why approval happens in the
+	 * terminal; absent when the page needs no caveat.
+	 */
+	note?: string;
+	/** A running share, so a reload re-renders the link the owner already minted. */
+	share?: ShareState;
 	/** Per-session secret the client echoes on every request. */
 	token: string;
+	/**
+	 * A short digest of the plan text the page rendered. It keys the unsaved draft a
+	 * tab keeps for itself, so a reload restores the comments this writer has not
+	 * saved yet, and a plan that changed underneath drops them instead.
+	 */
+	rev: string;
 }
 
 /** Page styles: the shared base + theme + shell + components, then the review. */
@@ -76,6 +100,15 @@ export const REVIEW_CSS = `${WEB_BASE_CSS}
 ${WEB_THEME_CSS}
 ${WEB_LAYOUT_CSS}
 ${WEB_COMPONENTS_CSS}
+.review-share__list{list-style:none;margin:0 0 var(--space-3);padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
+.review-share__row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md)}
+.review-share__url{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--fs-sm) var(--font-mono);color:var(--text)}
+.review-share__who{flex:0 0 auto;font:var(--fs-xs) var(--font-mono);color:var(--muted)}
+.review-share__who--bound{color:var(--accent)}
+.review-share__actions{display:flex;flex:0 0 auto;gap:4px}
+.review-share__actions .bf-btn{padding:1px 8px;font-size:var(--fs-xs)}
+.review-share__qr{display:flex;justify-content:center;margin:0 0 var(--space-3)}
+.review-share__qr svg{width:168px;height:168px;background:#fff;border-radius:var(--radius-md);padding:var(--space-1)}
 .bf-review{--review-measure:1012px;--review-rail:26px;--review-gutter:34px;flex:1 1 auto;padding:var(--space-5) var(--space-6) 120px}
 /* The document is one content column at GitHub's Markdown body width, with the
    comment rail inside it, so a plan reads the way the same file does on GitHub. */
@@ -83,9 +116,9 @@ ${WEB_COMPONENTS_CSS}
    hairline reading-progress bar pinned to the header's bottom edge. */
 .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-state{flex:0 0 auto;white-space:nowrap}
+.review-heading{display:flex;align-items:center;flex:1 1 240px;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:8ch;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-state{flex:0 0 auto;max-width:100%;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}
@@ -150,6 +183,8 @@ ${WEB_COMPONENTS_CSS}
 .bf-comment{padding:var(--space-3) var(--space-4)}
 .bf-comment__head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:6px}
 .bf-comment__label{font:var(--fw-semibold) var(--fs-xs) var(--font-mono);color:var(--warn);text-transform:uppercase;letter-spacing:.06em}
+/* A reviewer's name is a name, not a label: keep its own capitalisation. */
+.bf-comment__label--author{text-transform:none;letter-spacing:0}
 .bf-comment__spacer{flex:1 1 auto}
 .bf-comment__actions{display:flex;gap:4px}
 .bf-comment__actions .bf-btn{padding:1px 8px;font-size:var(--fs-xs)}
@@ -171,41 +206,107 @@ ${WEB_COMPONENTS_CSS}
 .bf-review{padding:var(--space-4) 18px 80px}
 .review-nav__title{display:none}
 }
-@media (max-width:820px){
+/* The controls are the widest thing in the bar — seven of them once a review can
+   be shared — so the title moves to its own row while they still need a row of
+   their own, rather than being squeezed to nothing beside it. */
+@media (max-width:1120px){
 .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}
 }
+/* Below a phone's width the controls wrap instead of running off the page. */
+@media (max-width:640px){
+.review-controls{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
+.review-heading{gap:var(--space-2)}
+.review-title{min-width:0}
+}
 @media (prefers-reduced-motion:no-preference){.bf-block{transition:background var(--motion-fast) var(--motion-ease)}}
 @media (hover:none){.bf-block__add{opacity:1}}
-`.trim();
+/* On paper the document is the whole page: no comment rail to hover, no composer,
+   no reading progress, and the comments stay with the blocks they belong to. */
+@media print{
+.bf-review{padding:0}
+.bf-review>.bf-block{max-width:none;padding:0 0 6px}
+.bf-block__rail,.bf-composer,.bf-block__add,.review-progress{display:none}
+.bf-block:hover,.bf-block--active{background:none;box-shadow:none}
+.bf-comments{padding-left:0}
+.bf-comment{break-inside:avoid}
+}`.trim();
 
 /**
  * The sidebar's one-line keyboard reminder. It names the keys a reviewer reaches
  * for first and defers to the shortcut sheet (`?`) for the rest, so the line does
  * not have to grow every time a binding is added.
  */
-function reviewHints(canApprove: boolean): string {
+function reviewHints(role: ReviewRole, canApprove: boolean): string {
 	const approve = canApprove ? `, <kbd class="bf-kbd">a</kbd> to approve` : "";
-	return `<p class="review-hints">Press <kbd class="bf-kbd">j</kbd>/<kbd class="bf-kbd">k</kbd> to move, <kbd class="bf-kbd">c</kbd> to comment${approve}, <kbd class="bf-kbd">s</kbd> to save, <kbd class="bf-kbd">?</kbd> for all shortcuts.</p>`;
+	const save = role === "owner" ? "save" : "post";
+	return `<p class="review-hints">Press <kbd class="bf-kbd">j</kbd>/<kbd class="bf-kbd">k</kbd> to move, <kbd class="bf-kbd">c</kbd> to comment${approve}, <kbd class="bf-kbd">s</kbd> to ${save}, <kbd class="bf-kbd">?</kbd> for all shortcuts.</p>`;
 }
 
 /** The shortcut sheet's rows: the review's own keys, led by approve when offered. */
-function reviewKeys(canApprove: boolean): KeyHint[] {
+function reviewKeys(role: ReviewRole, canApprove: boolean): KeyHint[] {
 	const rows: KeyHint[] = [];
 	if (canApprove) rows.push({ keys: "a", label: "Approve and run the plan" });
 	rows.push(
 		{ keys: ["j", "k"], label: "Next and previous block" },
 		{ keys: "c", label: "Comment on the current block" },
 		{ keys: "Enter", label: "Add the comment you are writing" },
-		{ keys: "s", label: "Save feedback and return to Pi" },
-		{ keys: "Esc", label: "Close the composer, the sheet, or the review" },
+		role === "owner"
+			? { keys: "s", label: "Save feedback and return to Pi" }
+			: { keys: "s", label: "Post your comments to the plan" },
+		role === "owner"
+			? { keys: "Esc", label: "Close the composer, the sheet, or the review" }
+			: { keys: "Esc", label: "Close the composer or this sheet" },
 		{ keys: "?", label: "Toggle this sheet" },
 	);
 	return rows;
 }
 
+/**
+ * The approval confirmation. Approving leaves plan mode and runs the plan, which
+ * cannot be undone from the page, so it is one deliberate dialog rather than the
+ * header button's single click. The shared `bf-dialog` styles and the shared
+ * dialog runtime supply the backdrop, the Tab trap, and `Esc`.
+ */
+function approveDialog(): string {
+	return `<div class="bf-dialog" id="approve-dialog" hidden>
+<div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="approve-title">
+<div class="bf-dialog__head"><h2 id="approve-title">Approve and run the plan?</h2></div>
+<div class="bf-dialog__body"><p>Pi leaves plan mode and starts the work. The comments you added are saved with the plan.</p><p class="bf-dialog__hint">Choose <strong>Approve &amp; run</strong> to go ahead, or <strong>Cancel</strong> to keep reviewing.</p></div>
+<div class="bf-dialog__actions"><button type="button" class="bf-btn" id="approve-cancel">Cancel</button><button type="button" class="bf-btn bf-btn--primary" id="approve-confirm">Approve &amp; run</button></div>
+</div>
+</div>`;
+}
+
+/**
+ * The owner's Share dialog: one row per reviewer link, the QR of the link just
+ * minted, and the two actions that change the set. The list is empty on purpose —
+ * the client fills it after the server mints a token, so a link never travels in
+ * the page source.
+ */
+function shareDialog(): string {
+	return `<div class="bf-dialog" id="share-dialog" hidden>
+<div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="share-title">
+<div class="bf-dialog__head"><h2 id="share-title">Share this review</h2><span class="bf-spacer"></span><button type="button" class="bf-btn" id="share-close">Close</button></div>
+<div class="bf-dialog__body"><ul class="review-share__list" id="share-links"></ul><div class="review-share__qr" id="share-qr"></div><p class="bf-dialog__hint" id="share-note"></p></div>
+<div class="bf-dialog__actions"><button type="button" class="bf-btn" id="share-stop">Stop sharing</button><button type="button" class="bf-btn bf-btn--primary" id="share-new">New link</button></div>
+</div>
+</div>`;
+}
+
+/** The reviewer's name dialog: one line, which the link keeps after the first post. */
+function nameDialog(): string {
+	return `<div class="bf-dialog" id="name-dialog" hidden>
+<div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="name-title">
+<div class="bf-dialog__head"><h2 id="name-title">Your name</h2></div>
+<div class="bf-dialog__body"><p>Your comments are signed with this name, and this link keeps it after your first post.</p><p class="bf-field"><input class="bf-input" id="name-input" maxlength="40" placeholder="alice" aria-labelledby="name-title"></p></div>
+<div class="bf-dialog__actions"><button type="button" class="bf-btn" id="name-cancel">Cancel</button><button type="button" class="bf-btn bf-btn--primary" id="name-save">Save name</button></div>
+</div>
+</div>`;
+}
+
 /**
  * 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
@@ -221,18 +322,29 @@ export function renderReviewPage(data: ReviewPageData): string {
 <div class="bf-panel review-panel">
 ${reviewFacts()}
 <nav class="review-nav" aria-labelledby="outline-title"><p class="review-nav__title" id="outline-title">Sections</p><ul id="outline-list"></ul></nav>
-${reviewHints(data.canApprove)}
+${data.note ? `<p class="review-hint">${escapeHtml(data.note)}</p>` : ""}
+${reviewHints(data.role, data.canApprove)}
 </div>
 </details>
 `
 		: "";
-	// Approve is the decisive action, so it takes the primary button and Save is
-	// demoted; a comment-only review has no approve button and keeps Save primary.
+	// Approve is the decisive action, so it takes the primary button and the
+	// owner's Save is demoted; a comment-only review has no approve button and
+	// keeps Save primary. A reviewer's one write action is Post, and nothing on
+	// their page closes the review or mints another link.
+	const isOwner = data.role === "owner";
 	const approveButton = data.canApprove
 		? `
 <button type="button" class="bf-btn bf-btn--primary" id="approve">Approve &amp; run</button>`
 		: "";
-	const saveButton = `<button type="button" class="${data.canApprove ? "bf-btn" : "bf-btn bf-btn--primary"}" id="save">Save feedback</button>`;
+	const saveControl = isOwner
+		? `<button type="button" class="${data.canApprove ? "bf-btn" : "bf-btn bf-btn--primary"}" id="save">Save feedback</button>`
+		: `<button type="button" class="bf-btn bf-btn--primary" id="post">Post comments</button>`;
+	const closeControl = isOwner ? `<button type="button" class="bf-btn" id="cancel">Back to Pi</button>` : "";
+	// Sharing belongs to the owner; a reviewer gets the name they comment under.
+	const shareControl = isOwner
+		? `<button type="button" class="bf-btn" id="share">Share</button>`
+		: `<button type="button" class="bf-btn" id="reviewer-name" hidden></button>`;
 	return `<!doctype html>
 <html lang="en">
 <head>
@@ -249,15 +361,15 @@ ${brandLockup("plan review")}
 <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--icon" id="shortcuts" aria-label="Keyboard shortcuts" title="Keyboard shortcuts">?</button>${approveButton}
-${saveButton}
-<button type="button" class="bf-btn" id="cancel">Back to Pi</button>
+<button type="button" class="bf-btn bf-btn--icon" id="shortcuts" aria-label="Keyboard shortcuts" title="Keyboard shortcuts">?</button>${shareControl}${approveButton}${saveControl}${closeControl}
 </div>
 </div><div class="review-progress" aria-hidden="true"><span class="review-progress__fill" id="progress-fill"></span></div></header>
 <div class="${bodyClass}">
 ${outlinePanel}<main class="bf-app__main bf-review" id="plan" aria-label="Plan"></main>
 </div>
-${keysSheet(reviewKeys(data.canApprove))}
+${keysSheet(reviewKeys(data.role, data.canApprove))}
+${data.canApprove ? approveDialog() : ""}
+${data.role === "owner" ? shareDialog() : nameDialog()}
 <script type="application/json" id="review-data">${island}</script>
 <script src="/client.js" defer></script>
 </body>
@@ -271,7 +383,7 @@ ${keysSheet(reviewKeys(data.canApprove))}
  */
 function reviewFacts(): string {
 	return `<div class="review-facts" id="review-facts">
-<div class="review-fact"><span>Steps</span><span class="bf-progress"><span class="bf-progress__track"><span class="bf-progress__fill" id="step-fill"></span></span><span class="review-fact__value" id="step-count">0/0</span></span></div>
+<div class="review-fact" id="step-fact"><span>Steps</span><span class="bf-progress"><span class="bf-progress__track"><span class="bf-progress__fill" id="step-fill"></span></span><span class="review-fact__value" id="step-count">0/0</span></span></div>
 <div class="review-fact"><span>Comments</span><span class="review-fact__value" id="comment-total">0</span></div>
 </div>`;
 }