pindeck 3.0.0-beta.3 → 3.2.0-beta.1

package/public/editor.js

@@ -1,6 +1,11 @@
 /* PinDeck UI: slide list, canvas with pins, chat with the selected assistant. */
 
 const $ = (id) => document.getElementById(id);
+/* The editor's own folder: / when it runs alone, /d/<deck>/ behind the front (pindeck), which serves several
+   decks on one port. Every URL of this deck's server starts here. */
+const BASE = new URL(".", location.href).pathname;
+const FRONT = BASE.startsWith("/d/");
+const SLIDE_KEY = FRONT ? `editor.slide:${BASE}` : "editor.slide";   // decks share the origin, not their slide
 const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
 /* Changes to the deck carry the revision of the files this tab shows (state.rev); the server refuses them
    (409, code "stale") if the files have changed since. A change that went through gives the new revision. */
@@ -9,7 +14,7 @@ const CHANGES = new Set(["edit", "text", "split", "remove", "notes", "slide-hidd
 const api = async (p, body) => {
   const change = body !== undefined && CHANGES.has(p.split("?")[0]);
   if (change && state.rev) body = { ...body, rev: state.rev };
-  const res = await fetch("/api/" + p, {
+  const res = await fetch(BASE + "api/" + p, {
     method: body === undefined ? "GET" : "POST",
     headers: { "content-type": "application/json" },
     body: body === undefined ? undefined : JSON.stringify(body),
@@ -18,7 +23,7 @@ const api = async (p, body) => {
   return res;
 };
 
-const savedSlide = (() => { try { return +localStorage.getItem("editor.slide") || 0; } catch { return 0; } })();
+const savedSlide = (() => { try { return +localStorage.getItem(SLIDE_KEY) || 0; } catch { return 0; } })();
 const state = {
   status: {}, slides: [], current: savedSlide, pins: [], mode: "select", sel: null, // mode: "select" (move, resize) or "pin"
   busy: false, status: {}, turns: new Map(), // turnId -> { undone }
@@ -31,8 +36,8 @@ let measure = null;     // { iframe, bridge }
 let measureReady = null, measureResolve = null;
 
 // showHiddenSlides: PinDeck shows hidden slides so they can be edited (reveal.js drops them otherwise)
-// /deck/ is the deck file the server was started with (index.html, or a named file such as talk.html)
-function deckSrc(mode, extra = "") { return `/deck/?editor=${mode}&showHiddenSlides=true${extra}`; }
+// deck/ is the deck file the server was started with (index.html, or a named file such as talk.html)
+function deckSrc(mode, extra = "") { return `${BASE}deck/?editor=${mode}&showHiddenSlides=true${extra}`; }
 
 function loadMain() {
   const f = document.createElement("iframe");
@@ -42,10 +47,22 @@ function loadMain() {
   $("stage").appendChild(f);
   if (pendingMain) pendingMain.remove();
   pendingMain = f;
+  // a deck page whose slides never start (a script that fails, broken HTML, the file gone): say so
+  setTimeout(() => { if (pendingMain === f) stageProblem("The deck page did not start within 15 seconds."); }, 15000);
 }
+/* Why the stage stays empty. Messages still go to the assistant, which can be asked to fix the deck. */
+function stageProblem(why) {
+  let el = $("stage-problem");
+  if (!why) return el?.remove();
+  if (!el) { el = document.createElement("div"); el.id = "stage-problem"; el.className = "stage-problem"; $("stage").appendChild(el); }
+  el.innerHTML = `<b>PinDeck cannot show this deck.</b><span>${esc(why)}</span>` +
+    `<span>Fix the file, or describe the problem in the chat and the assistant can fix it.</span>`;
+}
+let measureReject = null;
 function loadMeasure() {
   measure?.iframe.remove();
-  measureReady = new Promise((r) => (measureResolve = r));
+  measureReady = new Promise((resolve, reject) => { measureResolve = resolve; measureReject = reject; });
+  measureReady.catch(() => {});
   const f = document.createElement("iframe");
   f.className = "measure";
   f.setAttribute("aria-hidden", "true");
@@ -55,19 +72,52 @@ function loadMeasure() {
   $("stage").appendChild(f);
 }
 
-window.__editorHost = {
-  bridgeReady(role, bridge, win) {
+/* The slide frames run the deck sandboxed, in an origin of their own (see VIEW in server.mjs): the editor and
+   the bridge in each frame talk by messages. A frame's bridge is a proxy whose calls answer with promises;
+   the bridge calls the methods of editorHost below. Only the editor's own frames are listened to, and a deck's
+   own script, which shares its frame with the bridge, can do no more than the bridge: hand edits to its deck. */
+let callSeq = 0;
+const answers = new Map();   // id -> resolve
+function bridgeOf(win) {
+  // not a thenable: a promise resolved with the proxy must not call it
+  return new Proxy({}, { get: (_, method) => method === "then" ? undefined : (...args) => new Promise((resolve) => {
+    const id = ++callSeq;
+    answers.set(id, resolve);
+    win.postMessage({ pindeck: "bridge", id, method, args }, "*");
+  }) });
+}
+addEventListener("message", async (e) => {
+  const m = e.data;
+  if (!m || typeof m !== "object" || !e.source) return;
+  const from = [main?.iframe, pendingMain, measure?.iframe].find((f) => f?.contentWindow === e.source);
+  if (!from) return;
+  if (m.pindeck === "bridge-answer") { answers.get(m.id)?.(m.value); answers.delete(m.id); return; }
+  if (m.pindeck !== "host" || !Object.hasOwn(editorHost, m.method)) return;
+  // only a frame that is showing may edit; a frame still loading may only say that it is ready, or why not
+  if (m.method !== "bridgeReady" && m.method !== "deckFailed" && from !== main?.iframe) return;
+  let value = null;
+  try { value = await editorHost[m.method](...(Array.isArray(m.args) ? m.args : []), e.source); } catch (err) { console.error(err); }
+  e.source.postMessage({ pindeck: "host-answer", id: m.id, value: value ?? null }, "*");
+});
+
+const editorHost = {
+  deckFailed(role, why, win) {
+    if (role === "measure") { if (measure?.iframe.contentWindow === win) measureReject?.(new Error(why)); return; }
+    if (pendingMain?.contentWindow === win || main?.iframe.contentWindow === win) stageProblem(why);
+  },
+  bridgeReady(role, inf, win) {
     if (role === "measure") {
-      if (measure && measure.iframe.contentWindow === win) { measure.bridge = bridge; measureResolve(bridge); }
+      if (measure && measure.iframe.contentWindow === win) { measure.bridge = bridgeOf(win); measureResolve(measure.bridge); }
       return;
     }
     if (!pendingMain || pendingMain.contentWindow !== win) return;
     const old = main;
+    const bridge = bridgeOf(win);
     main = { iframe: pendingMain, bridge };
     pendingMain = null;
     main.iframe.classList.remove("loading");
     old?.iframe.remove();
-    const inf = bridge.info();
+    stageProblem(null);
     state.slides = inf.slides;
     state.current = Math.min(state.current, state.slides.length - 1);
     if (inf.current !== state.current) bridge.goto(state.current);
@@ -83,7 +133,7 @@ window.__editorHost = {
   },
   slideChanged(index) {
     state.current = index;
-    try { localStorage.setItem("editor.slide", String(index)); } catch {}
+    try { localStorage.setItem(SLIDE_KEY, String(index)); } catch {}
     renderSlides();
     renderToolbar();
     loadNotes();
@@ -120,13 +170,20 @@ window.__editorHost = {
       loadMain();   // re-render: math, footer numbers, and the file as saved
     }, "Could not save the text.");
   },
-  commitSplit(op, done) {
-    queueEdit(async () => {
-      const res = await api("split", op);
+  commitSplit(op) {   // answers with the new bullet's id as saved (null if it was not)
+    let eid = null;
+    return queueEdit(async () => {
+      const { whole, ...req } = op;
+      const res = await api("split", req);
       const d = await res.json().catch(() => ({}));
-      if (!res.ok) { toast(d.error || "Could not add the bullet."); loadMain(); return; }
-      done?.(d.eid);
-    }, "Could not add the bullet.");
+      if (!res.ok) {
+        if (d.code === "stale") keepRejectedText(whole ?? op.text, d);
+        else toast(d.error || "Could not add the bullet.");
+        loadMain();
+        return;
+      }
+      eid = d.eid;
+    }, "Could not add the bullet.").then(() => eid);
   },
   commitRemove(eid) {
     queueEdit(async () => {
@@ -136,7 +193,11 @@ window.__editorHost = {
     }, "Could not remove the bullet.");
   },
   refresh() { queueEdit(() => loadMain(), "Could not reload the slide."); },
-  editingChanged(on) { state.editing = on; },
+  editingChanged(on) {
+    state.editing = on;
+    // after the edit's own save, which the bridge asks for next
+    if (!on && heldFiles) setTimeout(() => queueEdit(() => { const d = heldFiles; heldFiles = null; if (d) applyFiles(d); }), 0);
+  },
   requestDelete(eid) { requestDelete(eid); },
   dropFiles(files, at) { attachFiles(files, at); },
   dragOver(on) { $("drop-hint").hidden = !on; },
@@ -206,9 +267,11 @@ function toast(msg, { html = false, ms = 3200 } = {}) {
   toastTimer = setTimeout(() => ($("toast").hidden = true), ms);
 }
 
+// a deck page that never starts, or stops answering, must not hold up a message: give up after a while
+const within = (ms, p, what) => Promise.race([p, new Promise((_, reject) => setTimeout(() => reject(new Error(`${what} timed out`)), ms))]);
 async function measureSlide(index) {
-  const b = await measureReady;
-  return b.measure(index);
+  const b = await within(8000, measureReady, "The measuring frame");
+  return within(8000, b.measure(index), "Measuring the slide");
 }
 // one measurement at a time: the measure frame has a single "current slide"
 let measureChain = Promise.resolve();
@@ -297,7 +360,7 @@ async function moveSlideTo(from, to) {   // to: insertion index in the current l
   if (!res.ok) return toast(d.error || "Could not move the slide.");
   if (d.unchanged) return;
   state.current = d.index;   // the reload opens the moved slide
-  try { localStorage.setItem("editor.slide", String(d.index)); } catch {}
+  try { localStorage.setItem(SLIDE_KEY, String(d.index)); } catch {}
   loadMain();
 }
 
@@ -366,7 +429,7 @@ notesBox.addEventListener("keydown", (e) => {
 // closing the tab while typing: send what is there (sendBeacon cannot set headers, hence the token in the URL)
 addEventListener("pagehide", () => {
   if (notesDirty() && !state.busy)
-    navigator.sendBeacon("/api/notes", new Blob([JSON.stringify({ eid: notes.eid, text: notesBox.value, html: notes.html })]));
+    navigator.sendBeacon(BASE + "api/notes", new Blob([JSON.stringify({ eid: notes.eid, text: notesBox.value, html: notes.html })]));
 });
 function setNotesOpen(open) {
   $("notes-panel").classList.toggle("collapsed", !open);
@@ -465,6 +528,31 @@ function wireMenu(btnId, menuId, beforeOpen) {
 const closeMenus = () => setMenu(null, null, false);
 document.addEventListener("click", (e) => { if (!e.target.closest(".menu")) closeMenus(); });
 document.addEventListener("keydown", (e) => { if (e.key === "Escape") closeMenus(); }, true);
+/* The deck menu, behind the front only: the decks in the deck's folder and the asset roots (and one folder
+   down). Each is a link, so a deck opens in place, or in a new tab with ⌘-click; the deck left behind keeps
+   its chat and undo, and the assistant goes on with a turn it has begun. */
+if (FRONT) {
+  $("deck-btn").disabled = false;
+  $("deck-btn").title = "Open another deck";
+  $("deck-btn").querySelector(".caret").hidden = false;
+  wireMenu("deck-btn", "deck-menu", async () => {
+    const menu = $("deck-menu");
+    menu.innerHTML = '<div class="menu-note">Looking for decks…</div>';
+    let decks = [];
+    try { decks = (await (await fetch("/api/decks")).json()).decks; }
+    catch { menu.innerHTML = '<div class="menu-note">The deck list is not available.</div>'; return; }
+    const roots = [...new Set(decks.map((d) => d.root))];
+    menu.innerHTML = roots.map((root) => (roots.length > 1 ? `<div class="group" title="${esc(root)}">${esc(root.split("/").pop())}</div>` : "") +
+      decks.filter((d) => d.root === root).map((d) => {
+        const here = BASE === `/d/${d.key}/`;
+        return d.problem
+          ? `<button class="opt" role="menuitem" disabled title="${esc(d.problem)}"><span class="tick"></span><span><b>${esc(d.rel)}</b><span class="why">${esc(d.problem.replace(/^\S+ /, "").split(". ")[0])}.</span></span></button>`
+          : `<a class="opt" role="menuitem" href="/d/${esc(d.key)}/" ${here ? 'aria-current="page"' : ""}><span class="tick">${here ? "✓" : ""}</span>` +
+            `<b>${esc(d.rel)}</b>${here ? "" : d.open ? '<span class="d">open</span>' : ""}</a>`;
+      }).join("")).join("") +
+      '<div class="menu-note">A deck opens here (⌘-click: in a new tab), with its own chat and undo. The assistant finishes its turn in the deck you leave.</div>';
+  });
+}
 const setExportMenu = (open) => setMenu($("export-btn"), $("export-menu"), open);
 wireMenu("export-btn", "export-menu");
 $("export-menu").addEventListener("click", async (e) => {
@@ -493,7 +581,7 @@ $("export-menu").addEventListener("click", async (e) => {
 });
 
 $("present").onclick = () => {
-  window.open(`/deck/${main?.bridge.presentHash(state.current) || ""}`, "_blank");
+  window.open(`${BASE}deck/${state.slides[state.current]?.hash || ""}`, "_blank");
 };
 
 /* ---- Pins --------------------------------------------------------------------------------------- */
@@ -515,7 +603,6 @@ function pinsChanged() {
   main?.bridge.renderPins(state.pins);
   renderPinTray();
   renderSlides();
-  api("pins", { pins: state.pins });
 }
 function shortEid(p) {
   if (p.tag?.startsWith("footer")) return "footer";
@@ -535,7 +622,7 @@ function renderPinTray() {
 }
 $("pin-tray").addEventListener("click", (e) => {
   const x = e.target.closest("[data-x]");
-  if (x) return window.__editorHost.removePin(+x.dataset.x);
+  if (x) return editorHost.removePin(+x.dataset.x);
   if (e.target.closest("[data-unsel]")) return main?.bridge.deselect();
   if (e.target.closest("[data-sel]")) return main?.bridge.highlight(state.sel.eid);
   const chip = e.target.closest(".chip");
@@ -571,34 +658,41 @@ function md(s) {
   }).join("");
   return out.replace(/<p>\u0000(\d+)\u0000<\/p>|\u0000(\d+)\u0000/g, (_, a, b) => `<pre>${blocks[a ?? b]}</pre>`);
 }
+/* A screenshot in the chat: a small picture that opens large. Only the newest ones are kept on disk;
+   an older one says so (see the error listener below). */
+const shotChip = (file, label = "") => `<button type="button" class="chip shot-chip" data-shot="${esc(file)}" title="Open the screenshot">` +
+  `<img src="${BASE}shots/${encodeURIComponent(file)}" alt="" loading="lazy">${label ? ` ${esc(label)}` : ""}</button>`;
+// only the most recent change still in effect can be undone: it alone gets an Undo button
+const lastLive = () => state.status?.undoId;
 function entryHtml(e) {
   switch (e.kind) {
     case "user":
       return `${esc(e.text)}${e.pins?.length || e.screenshot || e.selection || e.attachments?.length ? `<div class="chips">${e.selection ?
         `<span class="chip sel" title="${esc(e.selection.eid)}"><span class="n">▢</span> S${e.selection.slide} · ${esc(e.selection.label)}</span>` : ""}${(e.pins || []).map((p) =>
         `<span class="chip" title="${esc(p.eid)}"><span class="n">${p.n}</span> S${p.slide} · ${esc(p.label || p.eid)}</span>`).join("")}${
-        e.screenshot ? '<span class="chip">📷 screenshot</span>' : ""}${(e.attachments || []).map((a) =>
-        `<span class="chip att-chip" title="${esc(a.path)}">${a.kind === "image" ? `<img src="/deck/${esc(a.path)}" alt="">` : a.kind === "pdf" ? "📄" : "🔊"} ${esc(a.path.split("/").pop())}</span>`).join("")}</div>` : ""}`;
+        e.screenshot?.file ? shotChip(e.screenshot.file, `screenshot S${e.screenshot.slide}`) : e.screenshot ? '<span class="chip">📷 screenshot</span>' : ""}${(e.attachments || []).map((a) =>
+        `<span class="chip att-chip" title="${esc(a.path)}">${a.kind === "image" ? `<img src="${BASE}deck/${esc(a.path)}" alt="">` : a.kind === "pdf" ? "📄" : "🔊"} ${esc(a.path.split("/").pop())}</span>`).join("")}</div>` : ""}`;
     case "assistant": return md(e.text);
     case "tool":
-      return `<span><span class="tn">${esc(e.name)}</span> ${esc(e.detail || "")}${e.error ? `<span class="err">${esc(e.error)}</span>` : ""}</span>`;
+      return `<span><span class="tn">${esc(e.name)}</span> ${esc(e.detail || "")}${e.shot ? " " + shotChip(e.shot) : ""}${e.error ? `<span class="err">${esc(e.error)}</span>` : ""}</span>`;
     case "edit": {
-      const t = state.turns.get(e.turnId);
-      return `<span class="files ${t?.undone ? "undone" : ""}">✎ ${esc(e.label)}</span>
-        <button class="small" data-diff="${e.turnId}">Diff</button>
-        ${t && !t.undone ? `<button class="small" data-undo="${e.turnId}">Undo</button>` : t?.undone ? "<span>undone</span>" : ""}`;
+      const t = state.turns.get(e.turnId), undone = t ? t.undone : e.undone;
+      return `<span class="files ${undone ? "undone" : ""}">✎ ${esc(e.label)}</span>
+        ${t ? `<button class="small" data-diff="${e.turnId}">Diff</button>` : ""}
+        ${t && !t.undone && t.id === lastLive() ? `<button class="small" data-undo="${e.turnId}">Undo</button>` : undone ? "<span>undone</span>" : ""}`;
     }
     case "turn": {
-      const t = e.turnId ? state.turns.get(e.turnId) : null;
+      // a change from before PinDeck restarted: its undo history (and diff) ended with that run
+      const t = e.turnId ? state.turns.get(e.turnId) : null, undone = t ? t.undone : e.undone;
       const parts = [];
       if (e.error) parts.push(`<span class="warn">${esc(e.error)}</span>`);
       if (e.files?.length) {
-        parts.push(`<span class="files ${t?.undone ? "undone" : ""}">Changed ${e.files.map((f) =>
+        parts.push(`<span class="files ${undone ? "undone" : ""}" ${t ? "" : 'title="From before PinDeck restarted: no diff or undo any more"'}>Changed ${e.files.map((f) =>
           `${esc(f.file)} ` + (f.binary ? `<span class="add">(binary)</span>`
             : `<span class="add">+${f.added}</span> <span class="del">−${f.removed}</span>`)).join(", ")}</span>`);
-        parts.push(`<button class="small" data-diff="${e.turnId}">Diff</button>`);
-        if (t && !t.undone) parts.push(`<button class="small" data-undo="${e.turnId}">Undo</button>`);
-        if (t?.undone) parts.push("<span>undone</span>");
+        if (t) parts.push(`<button class="small" data-diff="${e.turnId}">Diff</button>`);
+        if (t && !t.undone && t.id === lastLive()) parts.push(`<button class="small" data-undo="${e.turnId}">Undo</button>`);
+        if (undone) parts.push("<span>undone</span>");
       } else if (!e.error) parts.push("No file changes");
       if (e.restored?.length) parts.push(`<span class="warn">${esc(e.restored.join(", "))} is locked; the change was reverted.</span>`);
       if (e.denials?.length) parts.push(`<span class="warn" title="PinDeck lets the assistant run only its own commands (layout, shot, slides, pdf) and edit ${esc(state.status?.deckFile || "index.html")}, theme.css and the deck's other files, never brand.css">` +
@@ -629,7 +723,23 @@ function clearChat() {
   $("chat-empty").hidden = false;
 }
 
+// a picture that is no longer kept: the chip says so and opens nothing (errors do not bubble: capture)
+chatEl.addEventListener("error", (e) => {
+  const chip = e.target.closest?.("[data-shot]");
+  if (!chip || e.target.tagName !== "IMG") return;
+  chip.removeAttribute("data-shot");
+  chip.classList.add("gone");
+  chip.title = "Only the newest screenshots are kept";
+  chip.textContent = "📷 no longer kept";
+}, true);
 chatEl.addEventListener("click", async (e) => {
+  const s = e.target.closest("[data-shot]");
+  if (s) {
+    $("shot-img").src = `${BASE}shots/${encodeURIComponent(s.dataset.shot)}`;
+    $("shot-title").textContent = s.dataset.shot;
+    $("shot-dialog").showModal();
+    return;
+  }
   const d = e.target.closest("[data-diff]");
   if (d) {
     const res = await api(`turn/${d.dataset.diff}/diff`);
@@ -651,6 +761,9 @@ chatEl.addEventListener("click", async (e) => {
   }
 });
 $("diff-close").onclick = () => $("diff-dialog").close();
+$("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(); });
 
 function setBusy(busy) {
   state.busy = busy;
@@ -681,7 +794,15 @@ async function send() {
         ({ path, kind, name, bytes, width, height, duration, sampleRate, channels, waveform, pages, pageSize, droppedAt })),
       current: s ? { index: state.current, eid: s.eid } : null,
     });
-    if (!res.ok) { alert((await res.json()).error || "Could not send."); return; }
+    if (!res.ok) {
+      const raw = await res.text().catch(() => "");
+      let d = null;
+      try { d = JSON.parse(raw); } catch {}
+      const why = d?.error || (/too large/i.test(raw) ? "The message is too large to send (the limit is 5 MB)." : `Could not send the message (${res.status}).`);
+      // a missing backend needs the user's attention; the rest is said in passing, the message stays in the box
+      if (d?.code?.endsWith("-unavailable")) alert(why); else toast(why, { ms: 8000 });
+      return;
+    }
     $("input").value = "";
     autosize();
     state.shot = null;
@@ -694,9 +815,9 @@ async function send() {
   }
 }
 $("send").onclick = send;
-$("stop").onclick = () => api("stop", {});
+$("stop").onclick = () => { $("working-text").textContent = "Stopping…"; api("stop", {}); };
 $("new-chat").onclick = async () => {
-  if (!confirm("Start a new conversation? The assistant forgets this chat; your slides stay as they are.")) return;
+  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", {});
 };
 function autosize() {
@@ -718,7 +839,10 @@ function handleKey(k, mod = {}) {
   else if (k === "v" || k === "V") setMode("select");
   else if (k === "h" || k === "H") toggleHidden();
   else if (k === "Escape") { if (state.mode === "pin") setMode("select"); else main?.bridge.deselect(); }
-  else if (k === "Enter") { if (!(state.sel && state.mode === "select" && main?.bridge.editSelection())) $("input").focus(); }
+  else if (k === "Enter") {
+    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.startsWith("Arrow") && state.sel && state.mode === "select") {
     const step = mod.shift ? 10 : 1;
@@ -729,6 +853,10 @@ function handleKey(k, mod = {}) {
 }
 document.addEventListener("keydown", (e) => {
   if (e.target.closest?.("input, textarea, dialog")) return;
+  // a menu and the button that opens it keep Enter, Space and the arrow keys (a menu opens, an item is chosen):
+  // no slide change, no jump to the chat. Other buttons do not: after a click on ‹ › the focus stays there
+  // while the slide is clicked (the slide frame keeps it), and Enter must still edit the selected text.
+  if (["Enter", " ", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key) && e.target.closest?.(".menu, [aria-haspopup]")) return;
   const meta = e.metaKey || e.ctrlKey;
   if (meta && (e.key === "z" || e.key === "Z")) { e.preventDefault(); return handleKey(e.key, { meta, shift: e.shiftKey }); }
   if (meta || e.altKey) return;
@@ -741,13 +869,16 @@ document.addEventListener("keydown", (e) => {
 /* ---- Server events ---------------------------------------------------------------------------------- */
 let shownProblem = null;   // the deck problem last shown, so a status update does not repeat it
 function applyStatus(s) {
+  if (!s.models) s.models = state.status?.models;   // sent only when they change
+  const undoMoved = s.undoId !== state.status?.undoId;
   state.status = s;
+  if (undoMoved) rerenderTurns();   // the Undo button moves to the change that is now the most recent
   // 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;
     $("deck-name").textContent = name;
-    $("deck-name").title = `${s.deck}/${s.deckFile || "index.html"}`;
+    $("deck-btn").title = `${s.deck}/${s.deckFile || "index.html"}${FRONT ? " (click for other decks)" : ""}`;
     if ($("deck-file")) $("deck-file").textContent = s.deckFile || "index.html";
     document.title = `${name} · PinDeck`;
   }
@@ -758,7 +889,7 @@ function applyStatus(s) {
   renderEffortMenu();
   $("new-chat").disabled = !!s.busy;
   $("stop").hidden = !s.busy || !!s.switching;
-  $("working-text").textContent = s.switching ? "Updating model…" : "The assistant is working…";
+  $("working-text").textContent = s.switching ? "Updating model…" : s.preparing ? "Taking the screenshot…" : "The assistant is working…";
   $("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
@@ -791,59 +922,89 @@ function applyStatus(s) {
   shownProblem = s.deckProblem;
   renderToolbar();
 }
+let heldFiles = null;   // file changes that came while a text edit was open
+function applyFiles({ files, manual, rev }) {
+  if (rev) state.rev = rev;
+  const cssOnly = files.every((f) => f.endsWith(".css"));
+  if (manual && main) {
+    loadMeasure();   // the visible slide already shows the hand edit
+  } else if (cssOnly && main) {
+    main.bridge.reloadCss(files);
+    measure?.bridge?.reloadCss(files);
+  } else {
+    loadMain();
+    loadMeasure();
+  }
+}
+/* The deck's events: behind the front through the worker all of this browser's tabs share (browsers open at
+   most 6 connections to one port; see public/events-worker.js), on its own server straight from it */
+function openEvents(on, onError) {
+  if (FRONT && typeof SharedWorker === "function") {
+    const deck = BASE.split("/")[2];
+    const w = new SharedWorker("/editor/events-worker.js", { name: "pindeck-events" });
+    w.port.onmessage = ({ data: m }) => (m.type === "error" ? onError() : on[m.type]?.(m.data));
+    w.port.start();
+    w.port.postMessage({ subscribe: deck });
+    addEventListener("pagehide", () => w.port.postMessage({ close: true }));
+    addEventListener("pageshow", (e) => { if (e.persisted) w.port.postMessage({ subscribe: deck }); });
+    return;
+  }
+  const es = new EventSource(BASE + "api/events");
+  for (const [type, fn] of Object.entries(on)) es.addEventListener(type, (ev) => fn(JSON.parse(ev.data)));
+  es.onerror = onError;
+}
 function connect() {
-  const es = new EventSource("/api/events");
-  es.addEventListener("hello", (ev) => {
-    const d = JSON.parse(ev.data);
-    // reconnected after missing file events (tunnel dropped, laptop asleep): show the files as they are now
-    if (state.rev && d.rev && d.rev !== state.rev && main) { loadMain(); loadMeasure(); }
-    if (d.rev) state.rev = d.rev;
-    clearChat();
-    state.turns = new Map(d.turns.map((t) => [t.id, t]));
-    d.chat.forEach(renderEntry);
-    applyStatus(d.status);
-    scrollChat();
-  });
-  es.addEventListener("chat", (ev) => {
-    const e = JSON.parse(ev.data);
-    if ((e.kind === "turn" || e.kind === "edit") && e.turnId) state.turns.set(e.turnId, { id: e.turnId, undone: false });
-    renderEntry(e);
-    scrollChat();
-  });
-  es.addEventListener("chat-update", (ev) => renderEntry(JSON.parse(ev.data)));
-  es.addEventListener("import", (ev) => showImportThumbs(JSON.parse(ev.data)));
-  es.addEventListener("status", (ev) => applyStatus(JSON.parse(ev.data)));
-  es.addEventListener("reset", () => { clearChat(); state.turns.clear(); });
-  es.addEventListener("undone", (ev) => {
-    const d = JSON.parse(ev.data);
-    const t = state.turns.get(d.turnId);
-    if (t) t.undone = d.undone !== false;
-    rerenderTurns();
-  });
-  es.addEventListener("files", (ev) => {
-    const { files, manual, rev } = JSON.parse(ev.data);
-    if (rev) state.rev = rev;
-    const cssOnly = files.every((f) => f.endsWith(".css"));
-    if (manual && main) {
-      loadMeasure();   // the visible slide already shows the hand edit
-    } else if (cssOnly && main) {
-      main.bridge.reloadCss(files);
-      measure?.bridge?.reloadCss(files);
-    } else {
-      loadMain();
-      loadMeasure();
-    }
-  });
-  es.addEventListener("measure", async (ev) => {
-    const { id, index } = JSON.parse(ev.data);
-    try { api("measure-result", { id, result: await queueMeasure(index) }); }
-    catch (err) { api("measure-result", { id, error: String(err) }); }
-  });
+  openEvents({
+    hello(d) {
+      // reconnected after missing file events (tunnel dropped, laptop asleep, deck server restarted): show the
+      // files as they are now
+      if (state.rev && d.rev && d.rev !== state.rev && main) { loadMain(); loadMeasure(); }
+      if (d.rev) state.rev = d.rev;
+      clearChat();
+      state.turns = new Map(d.turns.map((t) => [t.id, t]));
+      d.chat.forEach(renderEntry);
+      applyStatus(d.status);
+      scrollChat();
+    },
+    chat(e) {
+      const change = (e.kind === "turn" || e.kind === "edit") && e.turnId;
+      if (change) state.turns.set(e.turnId, { id: e.turnId, undone: false });
+      renderEntry(e);
+      scrollChat();
+    },
+    "chat-update": (e) => renderEntry(e),
+    import: (d) => showImportThumbs(d),
+    status: (s) => applyStatus(s),
+    reset() { clearChat(); state.turns.clear(); },
+    undone(d) {
+      const t = state.turns.get(d.turnId);
+      if (t) t.undone = d.undone !== false;
+      rerenderTurns();
+    },
+    files(d) {
+      // typing in the slide: the reload waits until the edit ends, and the edit is saved against the files
+      // it began with (changed meanwhile: refused, with the text to copy; see keepRejectedText)
+      if (state.editing) {
+        heldFiles = heldFiles ? { files: [...new Set([...heldFiles.files, ...d.files])], manual: heldFiles.manual && d.manual, rev: d.rev } : d;
+        return;
+      }
+      applyFiles(d);
+    },
+    async measure({ id, index }) {
+      try { api("measure-result", { id, result: await queueMeasure(index) }); }
+      catch (err) { api("measure-result", { id, error: String(err) }); }
+    },
+    // the deck server stopped: the front opens it again and its "hello" brings the state as it is then
+    gone(d) {
+      $("conn").classList.remove("on");
+      $("conn").title = d?.error || "The deck's server stopped; reconnecting…";
+      if (d?.error) toast(d.error, { ms: 20000 });
+    },
   // EventSource reconnects by itself; if the server restarted, the login cookie is stale: reload the page,
   // which asks for a new login link
-  es.onerror = async () => {
+  }, async () => {
     try { if ((await api("ping")).status === 403) location.reload(); } catch {}
-  };
+  });
 }
 
 /* ---- New slides --------------------------------------------------------------------------------------
@@ -868,7 +1029,7 @@ $("add-slide-menu").addEventListener("click", async (e) => {
   if (!res.ok) return toast(d.error || "Could not add the slide.");
   state.current = d.index;   // the reload opens the new slide ...
   state.pendingTitleEdit = item.dataset.slide !== "duplicate";   // ... with its title ready for typing
-  try { localStorage.setItem("editor.slide", String(d.index)); } catch {}
+  try { localStorage.setItem(SLIDE_KEY, String(d.index)); } catch {}
   loadMain();
 });
 
@@ -881,7 +1042,7 @@ $("import-file").addEventListener("change", async () => {
   $("import-file").value = "";
   if (!file) return;
   toast(`Reading ${file.name}…`);
-  const res = await fetch("/api/import", { method: "POST", body: file,
+  const res = await fetch(BASE + "api/import", { method: "POST", body: file,
     headers: { "x-filename": encodeURIComponent(file.name), "content-type": "application/octet-stream" } });
   const d = await res.json().catch(() => ({}));
   if (!res.ok) return toast(d.error || `Could not read ${file.name}.`);
@@ -925,7 +1086,7 @@ function showImportThumbs(ev) {
   for (const c of importChecks()) {
     const img = new Image();
     img.alt = "";
-    img.src = `/api/import-thumb?id=${importing.id}&n=${c.value}`;
+    img.src = `${BASE}api/import-thumb?id=${importing.id}&n=${c.value}`;
     c.closest(".thumb").append(img);
   }
 }
@@ -943,7 +1104,7 @@ $("import-dialog").addEventListener("close", async () => {
   toast(`Imported ${d.count} slide${d.count > 1 ? "s" : ""}.` + (d.missing ? ` ${d.missing} diagram${d.missing > 1 ? "s" : ""} could not be pictured (no PowerPoint or Keynote).` : "") +
     (d.refining ? ` The assistant is improving ${d.refining === 1 ? "the complex slide" : `${d.refining} complex slides`}.` : ""), { ms: 5000 });
   state.current = d.index;
-  try { localStorage.setItem("editor.slide", String(d.index)); } catch {}
+  try { localStorage.setItem(SLIDE_KEY, String(d.index)); } catch {}
   loadMain();
 });
 
@@ -1054,10 +1215,10 @@ async function requestDelete(eid) {
       (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">Still used elsewhere in the deck, so it is kept.</span></span></div>`
+           <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>`
       : `<label class="file"><input type="checkbox" data-file="${esc(f.rel)}" checked>
            <span>Also delete <code>${esc(f.rel)}</code> (${fmtBytes(f.bytes)})
-           <span class="why">Not used anywhere else in the deck.</span></span></label>`).join("");
+           <span class="why">Not used anywhere else in the deck, or by the other decks in its folder.</span></span></label>`).join("");
     const choice = await new Promise((resolve) => {
       const d = $("delete-dialog");
       d.addEventListener("close", () => resolve(d.returnValue), { once: true });
@@ -1090,7 +1251,7 @@ const kindOf = (f) => (f.type.startsWith("image/") || IMAGE_EXT.test(f.name) ? "
 const fmtBytes = (n) => (n >= 1048576 ? `${(n / 1048576).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} kB`);
 
 async function uploadBlob(blob, name) {
-  const res = await fetch("/api/upload", { method: "POST", body: blob,
+  const res = await fetch(BASE + "api/upload", { method: "POST", body: blob,
     headers: { "x-filename": encodeURIComponent(name), "content-type": blob.type || "application/octet-stream" } });
   const d = await res.json().catch(() => ({}));
   if (!res.ok) throw new Error(d.error || `Could not upload ${name}.`);
@@ -1178,7 +1339,7 @@ function renderAttachments() {
          a.pages ? `${a.pages} page${a.pages > 1 ? "s" : ""}` : "",
          fmtBytes(a.bytes), a.droppedAt ? `dropped on slide ${a.droppedAt.slide.index + 1}` : ""].filter(Boolean).join(" · ");
     return `<span class="att ${a.status}" title="${esc(a.path || a.name)}">
-      ${a.kind === "image" ? `<img class="thumb" src="${a.preview || "/deck/" + esc(a.path)}" alt="">` : `<span class="icon-box">${a.kind === "pdf" ? "📄" : "🔊"}</span>`}
+      ${a.kind === "image" ? `<img class="thumb" src="${a.preview || BASE + "deck/" + esc(a.path)}" alt="">` : `<span class="icon-box">${a.kind === "pdf" ? "📄" : "🔊"}</span>`}
       <span class="meta"><b>${esc(a.path ? a.path.split("/").pop() : a.name)}</b><span>${esc(info)}</span></span>
       ${a.status === "uploading" ? '<span class="spinner"></span>' : ""}
       <button class="x" data-unattach="${a.id}" aria-label="Remove ${esc(a.name)}">×</button></span>`;