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

package/extensions/plan/web-comments.ts

@@ -0,0 +1,269 @@
+/**
+ * The review page's comment threads: selection quotes, the composer, the cards.
+ *
+ * A fragment of the same IIFE `web-client.ts` ships (`WEB_COMMENTS_JS` is
+ * interpolated into `REVIEW_CLIENT_JS`), kept apart so what a comment *is* — its
+ * anchor, its author, and who may edit it — is read in one place. It mutates the
+ * page's `annotations` array and asks the page to repaint; it owns no state.
+ */
+
+export const WEB_COMMENTS_JS = String.raw`  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();
+    });
+  }
+
+  // One seam for "this writer changed a comment": the unsaved marker now, and the
+  // draft this tab keeps across a reload beside it.
+  function markDirty() {
+    dirty = true;
+    saveDraft();
+  }
+
+  // The draft is this tab's own: the comments this writer added and has not saved,
+  // and the text in a composer that has not become a comment yet, keyed by the plan
+  // revision the server rendered. It never travels to the server, and nothing
+  // another writer added is kept here.
+  var DRAFT_KEY = "bf-review-draft";
+  var DRAFT_LIMIT = 131072;
+
+  /**
+   * The open composer's block line, text, and the selection it quotes, or null when
+   * nothing is being typed. The quote is half of what the comment will say, so a
+   * draft that keeps the text and drops the quote would restore a different note.
+   */
+  function typingOf() {
+    var area = draftTextarea();
+    var wrap = area && area.closest ? area.closest(".bf-block") : null;
+    var anchor = wrap ? Number(wrap.getAttribute("data-line")) : -1;
+    if (!area || !(anchor >= 0) || area.value === "") return null;
+    var composer = area.closest ? area.closest(".bf-composer") : null;
+    return { anchor: anchor, text: area.value, quote: (composer && composer.getAttribute("data-quote")) || "" };
+  }
+
+  function saveDraft() {
+    if (saved || approved || closed) return;
+    var mine = annotations.filter(isMine);
+    var typing = typingOf();
+    if (mine.length === 0 && !typing) { clearDraft(); return; }
+    try {
+      var record = { rev: String(data.rev || ""), mine: mine };
+      if (typing) record.typing = typing;
+      var text = JSON.stringify(record);
+      if (text.length > DRAFT_LIMIT) return;
+      window.sessionStorage.setItem(DRAFT_KEY, text);
+    } catch (error) {}
+  }
+
+  function clearDraft() {
+    try { window.sessionStorage.removeItem(DRAFT_KEY); } catch (error) {}
+  }
+
+  /**
+   * Put this tab's unsaved work back: after a reload of the same plan, and after
+   * another writer's comment arrived and the island was re-read. A draft for a
+   * different plan revision is stale, so it is dropped rather than re-anchored.
+   * Returns the composer text to reopen, which needs the blocks to have rendered.
+   */
+  function restoreDraft() {
+    var raw = null;
+    try { raw = window.sessionStorage.getItem(DRAFT_KEY); } catch (error) { raw = null; }
+    if (!raw) return null;
+    var draft = null;
+    try { draft = JSON.parse(raw); } catch (error) { draft = null; }
+    var mine = draft && Array.isArray(draft.mine) ? draft.mine : [];
+    var stored = draft && draft.typing && typeof draft.typing.text === "string" ? draft.typing : null;
+    // Rebuilt field by field: storage is hand-editable, and a chip rendered from a
+    // non-string quote would read as [object Object].
+    var typing =
+      stored && typeof stored.anchor === "number"
+        ? { anchor: stored.anchor, text: stored.text, quote: typeof stored.quote === "string" ? stored.quote : "" }
+        : null;
+    if (!draft || draft.rev !== String(data.rev || "") || (mine.length === 0 && !typing)) {
+      clearDraft();
+      return null;
+    }
+    if (mine.length > 0) {
+      annotations = annotations.filter(function (annotation) { return !isMine(annotation); }).concat(mine);
+      dirty = true;
+    }
+    return typing;
+  }
+
+  function openComposer(wrap, block, quote, initial) {
+    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);
+      // The chip is the quote's only record; the draft reads it back from here.
+      composer.setAttribute("data-quote", quote);
+    }
+    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;
+    if (initial) area.value = initial;
+    // Every keystroke is this tab's draft, so a reload while typing costs nothing.
+    area.addEventListener("input", function () { saveDraft(); });
+    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 () {
+      if (closed) { setStatus("The review is closed; this comment was not added.", "error"); return; }
+      if (role === "reviewer" && !reviewerName) { askName(); return; }
+      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; }
+        var entry = quote ? { anchor: block.start, quote: quote, comment: comment } : { anchor: block.start, comment: comment };
+      if (role === "reviewer") entry.author = reviewerName;
+      annotations.push(entry);
+      // Close first: the text is now a comment, so the draft keeps one or the other.
+      closeComposer();
+      markDirty();
+      setStatus("Comment added.");
+      renderPlan();
+    };
+    add.addEventListener("click", submit);
+    submitOnEnter(area, submit);
+    row.appendChild(cancel); row.appendChild(add); composer.appendChild(row);
+    commentsBoxAfter(wrap).appendChild(composer);
+    area.focus();
+    // A restored draft resumes where it left off, with the caret at its end.
+    if (initial) area.setSelectionRange(area.value.length, area.value.length);
+  }
+
+  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;
+      markDirty();
+      setStatus("Comment updated.");
+      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);
+      markDirty();
+      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);
+    markDirty();
+    renderPlan();
+    offerUndo(index, annotation);
+    setStatus("Comment deleted.");
+  }
+
+  // A comment belongs to whoever wrote it: an untagged one is the owner's, a
+  // tagged one is that reviewer's. Everyone else's is read-only on this page.
+  function isMine(annotation) {
+    if (role === "owner") return !annotation.author;
+    return !!reviewerName && annotation.author === reviewerName;
+  }
+
+  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", annotation.author ? "bf-comment__label bf-comment__label--author" : "bf-comment__label");
+      label.textContent = annotation.author ? "@" + annotation.author : "Review";
+      head.appendChild(label);
+      head.appendChild(el("span", "bf-comment__spacer"));
+      if (isMine(annotation)) {
+        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);
+  }
+`;

package/extensions/plan/web-page.ts

@@ -27,6 +27,8 @@ import {
 } from "../../lib/web/index.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 +69,24 @@ 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;
+	/** 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 +94,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 +110,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 +177,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,12 +200,21 @@ ${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}}
 /* On paper the document is the whole page: no comment rail to hover, no composer,
@@ -195,21 +233,26 @@ ${WEB_COMPONENTS_CSS}
  * 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;
@@ -231,6 +274,33 @@ function approveDialog(): string {
 </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
@@ -246,18 +316,28 @@ 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)}
+${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>
@@ -274,16 +354,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>