pindeck 3.4.0 → 4.0.0-beta.1

package/public/editor.js

@@ -122,9 +122,9 @@ const editorHost = {
     state.current = Math.min(state.current, state.slides.length - 1);
     if (inf.current !== state.current) bridge.goto(state.current);
     bridge.setMode(state.mode);
-    bridge.setEditable(!state.busy);
+    applyEditable(bridge);
     refreshPinsFromSlides();
-    bridge.renderPins(state.pins);
+    bridge.renderPins(allPins());
     if (state.sel) bridge.selectEid(state.sel.eid);
     if (state.pendingTitleEdit) { state.pendingTitleEdit = false; setTimeout(() => bridge.editTitle(), 50); }
     renderSlides();
@@ -144,6 +144,7 @@ const editorHost = {
     state.pins.push({ ...pin, n });
     pinsChanged();
   },
+  openComment(id) { openComment(id); },
   removePin(n) {
     state.pins = state.pins.filter((p) => p.n !== n);
     pinsChanged();
@@ -396,7 +397,7 @@ function notesHtml() {
 function showNotes(eid, d) {
   const rich = !d ? "" : d.html ? richNotes(d.text || "") : (d.text || "").split("\n").map(esc).join("<br>");
   notes = { eid, text: "", html: rich == null };
-  notesBox.contentEditable = !d ? "false" : notes.html ? "plaintext-only" : "true";
+  notesBox.contentEditable = !d || state.status?.source ? "false" : notes.html ? "plaintext-only" : "true";
   if (notes.html) notesBox.textContent = d.text; else notesBox.innerHTML = rich;
   notes.text = notesValue();
 }
@@ -481,31 +482,37 @@ function setNotesHeight(h, save = true) {
   $("notes-split").setAttribute("aria-valuenow", String(h));
   if (save) try { localStorage.setItem("editor.notesHeight", String(h)); } catch {}
 }
-$("notes-split").addEventListener("pointerdown", (e) => {
-  if (e.button !== 0) return;
-  e.preventDefault();
-  const split = $("notes-split"), y0 = e.clientY, h0 = notesBox.offsetHeight;
-  split.setPointerCapture(e.pointerId);
-  document.body.classList.add("resizing-notes");
-  const move = (ev) => setNotesHeight(h0 - (ev.clientY - y0));
-  const up = () => {
-    document.body.classList.remove("resizing-notes");
-    split.removeEventListener("pointermove", move);
-    split.removeEventListener("pointerup", up);
-    split.removeEventListener("pointercancel", up);
-  };
-  split.addEventListener("pointermove", move);
-  split.addEventListener("pointerup", up);
-  split.addEventListener("pointercancel", up);
-});
-$("notes-split").addEventListener("dblclick", () => setNotesHeight(NOTES_H));
-$("notes-split").addEventListener("keydown", (e) => {
-  const step = e.shiftKey ? 64 : 16;
-  if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-  e.preventDefault();
-  e.stopPropagation();   // not a slide change
-  setNotesHeight(notesBox.offsetHeight + (e.key === "ArrowUp" ? step : -step));
-});
+// drag a splitter (or ↑ ↓ on it) to resize the box below it; double-click for the default size
+function splitter(split, getH, setH, defH) {
+  split.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const y0 = e.clientY, h0 = getH();
+    split.setPointerCapture(e.pointerId);
+    document.body.classList.add("resizing-notes");
+    split.classList.add("dragging");
+    const move = (ev) => setH(h0 - (ev.clientY - y0));
+    const up = () => {
+      document.body.classList.remove("resizing-notes");
+      split.classList.remove("dragging");
+      split.removeEventListener("pointermove", move);
+      split.removeEventListener("pointerup", up);
+      split.removeEventListener("pointercancel", up);
+    };
+    split.addEventListener("pointermove", move);
+    split.addEventListener("pointerup", up);
+    split.addEventListener("pointercancel", up);
+  });
+  split.addEventListener("dblclick", () => setH(defH));
+  split.addEventListener("keydown", (e) => {
+    const step = e.shiftKey ? 64 : 16;
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+    e.preventDefault();
+    e.stopPropagation();   // not a slide change
+    setH(getH() + (e.key === "ArrowUp" ? step : -step));
+  });
+}
+splitter($("notes-split"), () => notesBox.offsetHeight, setNotesHeight, NOTES_H);
 setNotesHeight((() => { try { return +localStorage.getItem("editor.notesHeight") || NOTES_H; } catch { return NOTES_H; } })(), false);
 setNotesOpen((() => { try { return localStorage.getItem("editor.notes") !== "closed"; } catch { return true; } })());
 
@@ -640,7 +647,7 @@ function refreshPinsFromSlides() {
   });
 }
 function pinsChanged() {
-  main?.bridge.renderPins(state.pins);
+  main?.bridge.renderPins(allPins());
   renderPinTray();
   renderSlides();
 }
@@ -682,6 +689,146 @@ $("pin-tray").addEventListener("mouseover", (e) => {
 });
 $("clear-pins").onclick = () => { state.pins = []; pinsChanged(); };
 
+/* ---- Review comments (lib/review.mjs): notes on the slides, kept for later ---------------------------
+   Shown in the panel under the chat header and as blue markers on the slides (grey: the element or slide
+   they were made on is no longer there as it was). They never go into the deck. */
+const MATCHED = new Set(["ok", "moved"]);
+const FLAG = {
+  changed: "Unmatched: the element's text has changed since (already addressed?)",
+  missing: "Unmatched: the element is no longer on this slide",
+  "no-slide": "Unmatched: the slide is no longer in the deck",
+};
+state.comments = [];
+let showResolved = false;
+let editing = null; // { id, text, reply }: the comment being edited or replied to, kept across re-renders (comments refresh while you type)
+const WHO = { you: "You", assistant: "Assistant", "command line": "Command line" };
+try { showResolved = localStorage.getItem("editor.comments.resolved") === "1"; } catch {}
+$("comments-resolved").checked = showResolved;
+const commentWhere = (c) => `S${c.loc.index != null ? c.loc.index + 1 : "?"} · ${c.target.eid ? c.target.tag.split(".")[0] : "slide"}`;
+function commentPins() {
+  return state.comments.filter((c) => c.status !== "resolved" && c.loc.slideEid).map((c) => ({
+    comment: c.id, n: "C" + c.n, stale: !MATCHED.has(c.loc.status),
+    slide: { eid: c.loc.slideEid, index: c.loc.index }, eid: c.loc.eid || c.loc.slideEid,
+    point: c.point || { x: 30, y: 30 }, at: c.at || { fx: 0, fy: 0 },
+    title: `C${c.n}: ${c.text.slice(0, 160)}${FLAG[c.loc.status] ? "\n" + FLAG[c.loc.status] : ""}`,
+  }));
+}
+const allPins = () => [...state.pins, ...commentPins()];
+function applyComments(v) {
+  state.comments = v.comments || [];
+  const open = state.comments.filter((c) => c.status !== "resolved").length;
+  $("comments-count").textContent = open || "";
+  $("comments-btn").title = v.problem || "Review comments: notes on the slides, kept for later";
+  $("comments-file").textContent = v.file ? `Saved in ${v.file}; the open ones, for an agent outside PinDeck, in ${v.packet}.` : v.problem || "";
+  renderComments();
+  main?.bridge.renderPins(allPins());
+}
+function renderComments() {
+  const list = state.comments.filter((c) => showResolved || c.status !== "resolved");
+  $("comments-empty").hidden = list.length > 0;
+  if (state.comments.length) $("comments-empty").textContent = "No open comments. Tick “Show resolved” to see the others.";
+  $("comments-send").disabled = !state.comments.some((c) => c.status !== "resolved");
+  $("comment-list").innerHTML = list.map((c) => `
+    <li class="cmt ${MATCHED.has(c.loc.status) ? "" : "stale"} ${c.status === "resolved" ? "resolved" : ""}" data-id="${esc(c.id)}">
+      <div class="top"><span class="n">C${c.n}</span> ${esc(commentWhere(c))}${c.slide.title ? ` “${esc(c.slide.title.slice(0, 40))}”` : ""}
+        <span class="spacer"></span>
+        <button class="small" data-act="reply" aria-label="Reply to comment C${c.n}">Reply</button>
+        <button class="small" data-act="edit" aria-label="Edit comment C${c.n}">Edit</button>
+        <button class="small" data-act="${c.status === "resolved" ? "open" : "resolved"}">${c.status === "resolved" ? "Reopen" : "Resolve"}</button>
+        <button class="small" data-act="delete" aria-label="Delete comment C${c.n}">×</button></div>
+      ${editing?.id === c.id && !editing.reply ? editBox(c, "Save", `Text of comment C${c.n}`) : `<p class="text">${esc(c.text)}</p>`}
+      ${(c.replies || []).map((r) => `<p class="reply ${r.by === "you" ? "mine" : ""}"><b>${esc(WHO[r.by] || r.by || "Agent")}:</b> ${esc(r.text)}</p>`).join("")}
+      ${editing?.id === c.id && editing.reply ? editBox(c, "Reply", `Reply to comment C${c.n}`) : ""}
+      ${c.status === "resolved" && c.resolvedBy && c.resolvedBy !== "you" ? `<p class="done">✓ Resolved by the ${esc(c.resolvedBy)}${c.resolution ? `: ${esc(c.resolution)}` : ""}</p>` : ""}
+      ${FLAG[c.loc.status] && c.status !== "resolved" ? `<p class="flag">${esc(FLAG[c.loc.status])}</p>` : ""}
+    </li>`).join("");
+  const box = editing && $("comment-list").querySelector("textarea.edit");
+  if (box) { box.focus(); box.setSelectionRange(box.value.length, box.value.length); }
+  else editing = null; // the comment is gone, or hidden as resolved
+}
+async function saveEdit() {
+  const { id, reply } = editing, text = editing.text.trim();
+  if (!text) return toast(reply ? "Write the reply first." : "A comment cannot be empty: delete it with × instead.");
+  editing = null;
+  if (!(await commentApi("comment-update", reply ? { id, reply: text } : { id, text }))) { editing = { id, text, reply }; renderComments(); }
+}
+const editBox = (c, save, label) => `<textarea class="edit" rows="3" aria-label="${label}">${esc(editing.text)}</textarea>
+      <div class="edit-actions"><button class="small" data-act="save">${save}</button> <button class="small" data-act="cancel">Cancel</button>
+        <span class="muted">⌘↩ ${save === "Save" ? "saves" : "sends"}, Esc cancels</span></div>`;
+function toggleComments(show = $("comments-panel").hidden) {
+  $("comments-panel").hidden = !show;
+  $("comments-btn").setAttribute("aria-expanded", String(show));
+}
+function openComment(id) {
+  const c = state.comments.find((x) => x.id === id);
+  if (!c) return;
+  if (c.status === "resolved" && !showResolved) { showResolved = true; $("comments-resolved").checked = true; renderComments(); }
+  toggleComments(true);
+  const li = $("comment-list").querySelector(`[data-id="${CSS.escape(id)}"]`);
+  li?.scrollIntoView({ block: "nearest" });
+  li?.classList.add("flash");
+  setTimeout(() => li?.classList.remove("flash"), 1200);
+}
+async function commentApi(p, b) {
+  const res = await api(p, b);
+  const d = await res.json().catch(() => ({}));
+  if (!res.ok) { toast(d.error || `Could not save the comment (${res.status}).`); return null; }
+  applyComments(d);
+  return d;
+}
+async function addComment() {
+  const text = $("input").value.trim();
+  if (!text) return toast("Write the comment in the box first, then press Comment.");
+  if (state.pins.length > 1) return toast("A comment goes on one pin (or none, for the whole slide): remove the others first.");
+  const s = state.slides[state.current];
+  const d = await commentApi("comment", { text, pin: state.pins[0] || null, slide: s ? { index: state.current, eid: s.eid } : null });
+  if (!d) return;
+  $("input").value = "";
+  autosize();
+  state.pins = [];
+  pinsChanged();
+  openComment(d.id);   // the panel opens on the new comment, so it is seen where it was kept
+}
+$("comment").onclick = addComment;
+$("comments-btn").onclick = () => toggleComments();
+$("comments-resolved").onchange = (e) => {
+  showResolved = e.target.checked;
+  try { localStorage.setItem("editor.comments.resolved", showResolved ? "1" : "0"); } catch {}
+  renderComments();
+};
+$("comment-list").addEventListener("click", (e) => {
+  const li = e.target.closest(".cmt");
+  const c = li && state.comments.find((x) => x.id === li.dataset.id);
+  if (!c || e.target.closest("textarea")) return;
+  const act = e.target.closest("[data-act]")?.dataset.act;
+  if (act === "edit") { editing = { id: c.id, text: c.text }; return renderComments(); }
+  if (act === "reply") { editing = { id: c.id, text: "", reply: true }; return renderComments(); }
+  if (act === "cancel") { editing = null; return renderComments(); }
+  if (act === "save") return saveEdit();
+  if (act === "delete") { if (confirm(`Delete comment C${c.n}?`)) commentApi("comment-delete", { id: c.id }); return; }
+  if (act) return commentApi("comment-update", { id: c.id, status: act });
+  if (c.loc.index == null) return;
+  if (c.loc.index !== state.current) goto(c.loc.index);
+  if (c.loc.eid) setTimeout(() => main?.bridge.highlight(c.loc.eid), 80);
+});
+$("comment-list").addEventListener("input", (e) => { if (editing && e.target.matches("textarea.edit")) editing.text = e.target.value; });
+$("comment-list").addEventListener("keydown", (e) => {
+  if (!editing || !e.target.matches("textarea.edit")) return;
+  if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); editing = null; renderComments(); }
+  else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); saveEdit(); }
+});
+$("comments-send").onclick = async () => {
+  const res = await api("comments-request");
+  const d = await res.json().catch(() => ({}));
+  if (!res.ok) return toast(d.error || "Could not read the comments.");
+  if (!d.text) return toast("There are no open comments.");
+  const now = $("input").value.trim();
+  $("input").value = now ? `${now}\n\n${d.text}` : d.text;
+  autosize();
+  $("input").focus();
+  toast("The open comments are in the message box: read them over, then Send. Resolve each one once it is done.", { ms: 6000 });
+};
+
 /* ---- Chat ----------------------------------------------------------------------------------------- */
 const chatEl = $("chat");
 const entryEls = new Map();
@@ -805,11 +952,17 @@ $("shot-close").onclick = () => $("shot-dialog").close();
 // Esc closes it (the browser does that for a modal dialog), and so does a click beside the picture
 $("shot-dialog").addEventListener("click", (e) => { if (e.target === $("shot-dialog")) $("shot-dialog").close(); });
 
+/* A Quarto deck is rendered from its source: no hand edits, ever (the next render would undo them) */
+const quartoWhy = () => state.status?.source ? `This deck is rendered by Quarto from ${state.status.source}: ask the assistant for changes, or edit ${state.status.source}.` : null;
+function applyEditable(bridge = main?.bridge) {
+  bridge?.setEditable(!state.busy && !quartoWhy(), quartoWhy());
+  document.body.classList.toggle("quarto", !!quartoWhy());
+}
 function setBusy(busy) {
   state.busy = busy;
   $("notes").readOnly = busy;   // hand edits wait until the assistant has finished
-  $("working").hidden = !busy;
-  main?.bridge.setEditable(!busy);
+  $("working").hidden = !busy && !state.status?.rendering;
+  applyEditable();
   $("send").hidden = busy;
   $("stop").hidden = !busy;
 }
@@ -860,11 +1013,23 @@ $("new-chat").onclick = async () => {
   if (!confirm("Start a new conversation? The assistant forgets this chat; your slides, and Undo and Redo, stay as they are.")) return;
   await api("new-chat", {});
 };
+// the message box grows with its text from inputMin (set by dragging its top edge) up to 220 px or inputMin
+const INPUT_H = 96, INPUT_MIN = 48;
+let inputMin = (() => { try { return +localStorage.getItem("editor.inputHeight") || INPUT_H; } catch { return INPUT_H; } })();
 function autosize() {
   const t = $("input");
   t.style.height = "auto";
-  t.style.height = Math.min(220, Math.max(64, t.scrollHeight + 2)) + "px";
+  t.style.height = Math.min(Math.max(220, inputMin), Math.max(inputMin, t.scrollHeight + 2)) + "px";
+}
+function setInputHeight(h) {
+  const max = Math.max(INPUT_MIN, document.querySelector(".chat-pane").clientHeight * 0.6);
+  inputMin = Math.round(Math.min(max, Math.max(INPUT_MIN, h)));
+  $("input-split").setAttribute("aria-valuenow", String(inputMin));
+  try { localStorage.setItem("editor.inputHeight", String(inputMin)); } catch {}
+  autosize();
 }
+splitter($("input-split"), () => $("input").offsetHeight, setInputHeight, INPUT_H);
+autosize();
 $("input").addEventListener("input", autosize);
 $("input").addEventListener("keydown", (e) => {
   if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); send(); }
@@ -916,7 +1081,7 @@ function applyStatus(s) {
   // the deck's name in the header ("ocean-example", or "talk.html" for a named deck file), its full path on hover
   if (s.deck) {
     const folder = s.deck.split(/[\\/]/).filter(Boolean).pop() || s.deck;
-    const name = s.deckFile && s.deckFile !== "index.html" ? s.deckFile : folder;
+    const name = s.source || (s.deckFile && s.deckFile !== "index.html" ? s.deckFile : folder);
     $("deck-name").textContent = name;
     $("deck-btn").title = `${s.deck}/${s.deckFile || "index.html"}${FRONT ? " (click for other decks)" : ""}`;
     if ($("deck-file")) $("deck-file").textContent = s.deckFile || "index.html";
@@ -929,7 +1094,10 @@ function applyStatus(s) {
   renderEffortMenu();
   $("new-chat").disabled = !!s.busy;
   $("stop").hidden = !s.busy || !!s.switching;
-  $("working-text").textContent = s.switching ? "Updating model…" : s.preparing ? "Taking the screenshot…" : "The assistant is working…";
+  $("working-text").textContent = s.switching ? "Updating model…" : s.preparing ? "Taking the screenshot…" : s.busy ? "The assistant is working…"
+    : s.rendering ? `Rendering ${s.source} with Quarto…` : "";
+  $("working").hidden = !s.busy && !s.rendering;
+  if (s.source) $("deck-source").textContent = s.source;
   $("conn").classList.toggle("on", !!s.running);
   $("conn").title = s.running ? "The selected backend is running" : "The selected backend starts with the next message";
   // only the selected backend's availability matters: Codex missing is no news to someone using Claude
@@ -1005,7 +1173,9 @@ function connect() {
       d.chat.forEach(renderEntry);
       applyStatus(d.status);
       scrollChat();
+      api("comments").then((r) => r.json()).then(applyComments).catch(() => {});
     },
+    comments: (v) => applyComments(v),
     chat(e) {
       const change = (e.kind === "turn" || e.kind === "edit") && e.turnId;
       if (change) state.turns.set(e.turnId, { id: e.turnId, undone: false });
@@ -1239,6 +1409,7 @@ $("provider-switch").addEventListener("close", async () => {
 let deleting = false;
 async function requestDelete(eid) {
   if (deleting || !eid) return;
+  if (quartoWhy()) return toast(quartoWhy());
   if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   deleting = true;
   try {

package/public/index.html

@@ -91,25 +91,43 @@
       </span>
       <span class="head-actions">
         <span id="conn" class="conn" title="Backend session"></span>
+        <button id="comments-btn" class="small" aria-expanded="false" aria-controls="comments-panel"
+          title="Review comments: notes on the slides, kept for later">Comments <span id="comments-count" class="count"></span></button>
         <button id="new-chat" class="small" title="Start a new conversation">New chat</button>
       </span>
     </div>
+    <section id="comments-panel" class="comments-panel" aria-label="Review comments" hidden>
+      <div class="comments-head">
+        <strong>Comments</strong>
+        <label class="check"><input type="checkbox" id="comments-resolved"> Show resolved</label>
+        <span class="spacer"></span>
+        <button id="comments-send" class="small" title="Put the open comments into the message box as one request">Process Comments</button>
+      </div>
+      <p id="comments-empty" class="muted comments-empty">No comments yet. Write a note in the box below, pin an element (or not, for the
+        whole slide) and press <strong>Comment</strong> instead of Send: it is kept here, and on the slide, for later.</p>
+      <ol id="comment-list" class="comment-list"></ol>
+      <p id="comments-file" class="muted comments-file"></p>
+    </section>
     <div id="chat" class="chat" aria-live="polite">
       <div class="empty" id="chat-empty">
         <p><strong>Pin, then ask.</strong></p>
         <p>Press <kbd>P</kbd> and click elements on the slide. Each click gets a number. Then write what to change, e.g.
           <em>“1: align with 2, make 3 smaller”</em>.</p>
-        <p>Or edit yourself: click to select, drag to move, pull a handle to resize, arrow keys to nudge,
+        <p class="hand-only">Or edit yourself: click to select, drag to move, pull a handle to resize, arrow keys to nudge,
           double-click to change the text. A selected element is what the assistant takes “this” to mean.</p>
         <p>Add figures, audio, a PDF or a screenshot with <strong>+</strong>, or drag and drop or paste a file; the assistant can put it on a slide
           or, for a paper or report, take the details from it.</p>
-        <p>The assistant edits <code id="deck-file">index.html</code>, <code>theme.css</code> and the deck's other files, checks the layout, and the slide updates here.
+        <p class="hand-only">The assistant edits <code id="deck-file">index.html</code>, <code>theme.css</code> and the deck's other files, checks the layout, and the slide updates here.
           <code>brand.css</code> is locked.</p>
+        <p class="quarto-only">This deck is made with Quarto: the assistant edits <code id="deck-source"></code> and its stylesheets, and PinDeck renders
+          the deck after every change. Edit the source yourself in any editor; the slide updates here too.</p>
       </div>
     </div>
     <div id="drop-hint" class="drop-hint" hidden><div>Drop figures, audio or PDFs to attach them</div></div>
     <div id="working" class="working" hidden><span class="spinner"></span> <span id="working-text">The assistant is working…</span></div>
     <div class="composer">
+      <div id="input-split" class="notes-split" role="separator" aria-orientation="horizontal" aria-controls="input" tabindex="0"
+        title="Drag to resize the message box (double-click: default size)" aria-label="Resize the message box"></div>
       <div id="pin-tray" class="pin-tray"></div>
       <div id="attach-tray" class="attach-tray"></div>
       <textarea id="input" rows="3" placeholder="Ask for a change… refer to pins by number (1, 2, …)"></textarea>
@@ -125,6 +143,7 @@
         <input type="file" id="file-input" multiple accept="image/*,audio/*,.svg,.pdf,application/pdf" hidden>
         <span class="spacer"></span>
         <button id="clear-pins" class="small" hidden>Clear pins</button>
+        <button id="comment" title="Keep the text as a review comment on the pin (or on the slide), instead of sending it">Comment</button>
         <button id="send" class="primary">Send</button>
         <button id="stop" class="danger" hidden>Stop</button>
       </div>