pindeck 3.4.0 → 4.1.0-beta.1

package/public/editor.css

@@ -33,6 +33,8 @@ code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background:
 .brand-pin { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange);
   box-shadow: inset 0 0 0 4px var(--orange), inset 0 0 0 7px #fff; }
 
+.version { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
 .app { display: grid; grid-template-columns: 220px minmax(0, 1fr) 400px; height: 100vh; }
 .pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px;
   padding: 0 14px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
@@ -173,7 +175,7 @@ code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background:
 /* the splitter: the panel's top edge, dragged up or down like the notes divider in PowerPoint or Keynote */
 .notes-split { position: absolute; left: 0; right: 0; top: -4px; height: 8px; z-index: 2; cursor: row-resize; touch-action: none; }
 .notes-split::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: transparent; transition: background .12s; }
-.notes-split:hover::after, .notes-split:focus-visible::after, body.resizing-notes .notes-split::after { background: var(--orange); }
+.notes-split:hover::after, .notes-split:focus-visible::after, .notes-split.dragging::after { background: var(--orange); }
 .notes-split:focus-visible { outline: none; }
 .notes-panel.collapsed .notes-split { display: none; }
 body.resizing-notes { cursor: row-resize; user-select: none; }
@@ -244,16 +246,47 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
 .spinner { width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--orange); border-radius: 50%;
   animation: spin .8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.composer { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
+.composer { position: relative; border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
 .pin-tray:empty { display: none; }
 .pin-tray { max-height: 96px; overflow-y: auto; }
 #input { width: 100%; resize: none; font: inherit; border: 1px solid var(--line); border-radius: var(--radius);
-  padding: 8px 10px; min-height: 64px; max-height: 220px; outline: none; }
+  padding: 8px 10px; outline: none; }
 #input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(237,140,1,.15); }
 .composer-row { display: flex; align-items: center; gap: 8px; }
 .composer-row .spacer { flex: 1; }
 .check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
 
+/* ---- A Quarto deck: rendered from its source, so no hand edits ---- */
+body.quarto #add-slide-btn, body.quarto .slide-list .eye, body.quarto .hand-only { display: none; }
+body:not(.quarto) .quarto-only { display: none; }
+body.quarto #notes:empty::before { content: "Speaker notes come from ::: {.notes} in the Quarto source."; }
+
+/* ---- Review comments ---- */
+.count:empty { display: none; }
+.count { background: #1a73e8; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 11px; font-weight: 600; }
+.comments-panel { border-bottom: 1px solid var(--line); max-height: 45%; overflow-y: auto; padding: 8px 12px 10px; background: var(--bg); }
+.comments-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+.comments-head .spacer { flex: 1; }
+.comments-empty, .comments-file { font-size: 12.5px; margin: 4px 0; color: var(--muted); }
+.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.cmt { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; cursor: pointer; font-size: 13px; }
+.cmt:hover, .cmt.flash { border-color: #1a73e8; }
+.cmt .top { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
+.cmt .n { background: #1a73e8; color: #fff; border-radius: 4px; padding: 0 5px; font-weight: 700; font-size: 11px; }
+.cmt.stale .n { background: #8a8f98; }
+.cmt .top .spacer { flex: 1; }
+.cmt .text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.cmt .edit { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; font: inherit; resize: vertical; }
+.cmt .reply { margin: 4px 0 0 10px; padding-left: 6px; border-left: 2px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
+.cmt .reply.mine { border-left-color: #1a73e8; }
+.cmt.resolved .reply { text-decoration: none; }
+.cmt .edit-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
+.cmt .flag { margin: 4px 0 0; color: var(--danger); font-size: 12px; }
+.cmt.resolved { opacity: .6; }
+.cmt.resolved .text { text-decoration: line-through; }
+.cmt .done { margin: 4px 0 0; color: var(--ok); font-size: 12px; }
+.cmt.resolved .done { opacity: 1; }
+
 /* ---- Delete confirmation ---- */
 .delete-dialog { width: min(460px, 92vw); padding: 0; border: 1px solid var(--line); border-radius: 12px;
   box-shadow: 0 20px 60px rgba(0,0,0,.25); }

package/public/editor.js

@@ -122,10 +122,10 @@ 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);
-    if (state.sel) bridge.selectEid(state.sel.eid);
+    bridge.renderPins(allPins());
+    if (state.sel) bridge.selectEid([state.sel.eid, ...(state.sel.also || []).map((a) => a.eid)]);
     if (state.pendingTitleEdit) { state.pendingTitleEdit = false; setTimeout(() => bridge.editTitle(), 50); }
     renderSlides();
     renderToolbar();
@@ -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();
@@ -214,7 +215,7 @@ function queueEdit(fn, failMsg = "Could not save the change.") {
 }
 function postEdit(op, label) {
   return queueEdit(async () => {
-    const res = await api("edit", { ops: [op], label });
+    const res = await api("edit", { ops: [].concat(op), label });
     if (!res.ok) {
       toast((await res.json().catch(() => ({}))).error || "Could not save the change.");
       loadMain();   // show the file as it is
@@ -230,8 +231,9 @@ function flushNudge() {
 }
 function commitEdit(op, label) {
   if (label?.nudge) {   // arrow keys: one change per burst of key presses
-    if (nudgeAcc && nudgeAcc.op.eid !== op.eid) flushNudge();
-    nudgeAcc ??= { name: label.name, dx: 0, dy: 0 };
+    const key = [].concat(op).map((o) => o.eid).join(" ");   // a group nudge is one op per element
+    if (nudgeAcc && nudgeAcc.key !== key) flushNudge();
+    nudgeAcc ??= { key, name: label.name, dx: 0, dy: 0 };
     nudgeAcc.dx += label.dx; nudgeAcc.dy += label.dy; nudgeAcc.op = op;
     clearTimeout(nudgeTimer);
     nudgeTimer = setTimeout(flushNudge, 600);
@@ -396,7 +398,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 +483,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 +648,7 @@ function refreshPinsFromSlides() {
   });
 }
 function pinsChanged() {
-  main?.bridge.renderPins(state.pins);
+  main?.bridge.renderPins(allPins());
   renderPinTray();
   renderSlides();
 }
@@ -651,8 +659,8 @@ function shortEid(p) {
 function renderPinTray() {
   const sel = state.sel;
   $("pin-tray").innerHTML = (sel ? `
-    <span class="chip sel" data-sel title="Selected: ${esc(sel.eid)}. The assistant sees it as “this”.">
-      <span class="n">▢</span> S${sel.slide.index + 1} · ${esc(sel.eid.replace(/^[^/]+\//, ""))} <span class="dim">${sel.box.w} × ${sel.box.h}</span>
+    <span class="chip sel" data-sel title="Selected: ${esc([sel, ...(sel.also || [])].map((s) => s.eid).join(", "))}. The assistant sees ${sel.also?.length ? "them as “these”" : "it as “this”"}.">
+      <span class="n">▢</span> S${sel.slide.index + 1} · ${esc(sel.eid.replace(/^[^/]+\//, ""))}${sel.also?.length ? ` +${sel.also.length}` : ""} <span class="dim">${sel.box.w} × ${sel.box.h}</span>
       <button class="x" data-unsel aria-label="Deselect">×</button></span>` : "") + state.pins.map((p) => `
     <span class="chip" data-n="${p.n}" title="${esc(p.eid)}${p.text ? " — " + esc(p.text.slice(0, 80)) : ""}">
       <span class="n">${p.n}</span> S${p.slide.index + 1} · ${esc(shortEid(p))}${p.word ? ` “${esc(p.word)}”` : ""}
@@ -682,6 +690,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 +953,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 +1014,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(); }
@@ -883,7 +1049,7 @@ function handleKey(k, mod = {}) {
     if (!(state.sel && state.mode === "select" && main)) $("input").focus();
     else main.bridge.editSelection().then((editing) => { if (!editing) $("input").focus(); });
   }
-  else if ((k === "Delete" || k === "Backspace") && state.sel && state.mode === "select") requestDelete(state.sel.eid);
+  else if ((k === "Delete" || k === "Backspace") && state.sel && state.mode === "select") requestDelete([state.sel.eid, ...(state.sel.also || []).map((a) => a.eid)]);
   else if (k.startsWith("Arrow") && state.sel && state.mode === "select") {
     const step = mod.shift ? 10 : 1;
     main?.bridge.nudge(k === "ArrowLeft" ? -step : k === "ArrowRight" ? step : 0, k === "ArrowUp" ? -step : k === "ArrowDown" ? step : 0);
@@ -916,7 +1082,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 +1095,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 +1174,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 });
@@ -1238,21 +1409,24 @@ $("provider-switch").addEventListener("close", async () => {
    with it (ticked by default). Undo brings back the element and the files. */
 let deleting = false;
 async function requestDelete(eid) {
-  if (deleting || !eid) return;
+  const eids = [].concat(eid || []);
+  if (deleting || !eids.length) return;
+  if (quartoWhy()) return toast(quartoWhy());
   if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   deleting = true;
   try {
     flushNudge();
     await editChain;
-    const res = await api(`delete-info?${new URLSearchParams({ eid })}`);
+    const res = await api(`delete-info?${new URLSearchParams(eids.map((e) => ["eid", e]))}`);
     const info = await res.json().catch(() => ({}));
     if (!res.ok) return toast(info.error || "Cannot delete this element.");
-    const name = info.eid.replace(/^[^/]+\//, "/");
+    const many = info.targets.length > 1;
+    const name = info.targets.map((t) => t.eid.replace(/^[^/]+\//, "/")).join(", ");
     const slide = state.slides.findIndex((s) => info.eid === s.eid || info.eid.startsWith(s.eid + "/"));
-    const isFig = info.tag.startsWith("figure") && info.eid !== eid;
-    $("delete-title").textContent = isFig ? "Delete this figure?" : `Delete ${name}?`;
-    $("delete-what").textContent = `${isFig ? `The picture and its caption (${name})` : info.tag}` +
-      (slide >= 0 ? ` on slide ${slide + 1}` : "") + " will be removed from the slide.";
+    const isFig = !many && info.tag.startsWith("figure") && info.eid !== eids[0];
+    $("delete-title").textContent = many ? `Delete ${info.targets.length} elements?` : isFig ? "Delete this figure?" : `Delete ${name}?`;
+    $("delete-what").textContent = `${many ? `${name}` : isFig ? `The picture and its caption (${name})` : info.tag}` +
+      (slide >= 0 ? ` on slide ${slide + 1}` : "") + ` will be removed from the slide.`;
     $("delete-files").innerHTML = info.files.map((f, i) => f.usedElsewhere
       ? `<div class="file kept"><span>📄</span><span><code>${esc(f.rel)}</code>
            <span class="why">${f.usedBy?.length ? `Also used by ${esc(f.usedBy.join(", "))}` : "Still used elsewhere in the deck"}, so it is kept.</span></span></div>`
@@ -1267,7 +1441,7 @@ async function requestDelete(eid) {
     });
     if (choice !== "delete") return;
     const files = [...$("delete-files").querySelectorAll("input[data-file]:checked")].map((c) => c.dataset.file);
-    const r2 = await api("delete", { eid, files });
+    const r2 = await api("delete", { eids, files });
     const d2 = await r2.json().catch(() => ({}));
     if (!r2.ok) return toast(d2.error || "Could not delete the element.");
     main?.bridge.deselect();

package/public/index.html

@@ -14,7 +14,7 @@
 
   <!-- Left: slides -->
   <nav class="slides-pane" aria-label="Slides">
-    <div class="pane-head"><span class="brand"><span class="brand-pin" aria-hidden="true"></span>PinDeck</span></div>
+    <div class="pane-head"><span class="brand"><span class="brand-pin" aria-hidden="true"></span>PinDeck</span><span class="version muted">v{{VERSION}}</span></div>
     <div class="slides-actions menu-wrap">
       <button id="add-slide-btn" class="add-slide" aria-haspopup="menu" aria-expanded="false" title="Add a slide after the current one">＋ New slide</button>
       <div id="add-slide-menu" class="menu left" role="menu" hidden>
@@ -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>