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

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 () {});
+  }
+`;

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);
+  }
+`;