pindeck 3.1.0-beta.1 → 3.2.0

package/public/editor.js

@@ -47,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");
@@ -60,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);
@@ -125,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 () => {
@@ -141,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; },
@@ -211,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();
@@ -523,7 +581,7 @@ $("export-menu").addEventListener("click", async (e) => {
 });
 
 $("present").onclick = () => {
-  window.open(`${BASE}deck/${main?.bridge.presentHash(state.current) || ""}`, "_blank");
+  window.open(`${BASE}deck/${state.slides[state.current]?.hash || ""}`, "_blank");
 };
 
 /* ---- Pins --------------------------------------------------------------------------------------- */
@@ -545,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";
@@ -565,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");
@@ -605,6 +662,8 @@ function md(s) {
    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":
@@ -617,22 +676,23 @@ function entryHtml(e) {
     case "tool":
       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">` +
@@ -734,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;
@@ -747,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() {
@@ -771,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;
@@ -782,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;
@@ -794,7 +869,10 @@ 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;
@@ -811,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
@@ -829,7 +907,7 @@ function applyStatus(s) {
   imp.disabled = !!why(caps.pptxImport);
   imp.title = why(caps.pptxImport);
   if (why(caps[provider])) $("conn").title = caps[provider].reason;
-  // where the server runs, when it is not this Mac's usual setup: "Linux (beta)", with what is off
+  // where the server runs, when it is not this Mac's usual setup: "Linux", with what is off
   const names = { claude: "Claude", codex: "OpenAI Codex", screenshot: "Screenshots", headlessLayout: "Layout without an open editor",
     pdfExport: "PDF export", pdfPages: "Pictures of PDF pages", pptxImport: "PowerPoint import",
     pptxPictures: "Pictures of PowerPoint slides", audioConvert: "Waveforms of non-WAV audio" };
@@ -844,59 +922,89 @@ function applyStatus(s) {
   shownProblem = s.deckProblem;
   renderToolbar();
 }
-function connect() {
+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");
-  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) }); }
-  });
+  for (const [type, fn] of Object.entries(on)) es.addEventListener(type, (ev) => fn(JSON.parse(ev.data)));
+  es.onerror = onError;
+}
+function connect() {
+  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 --------------------------------------------------------------------------------------
@@ -1107,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 });

package/public/events-worker.js

@@ -0,0 +1,47 @@
+/* One event stream for all of this browser's PinDeck tabs on one port, behind the front.
+
+   Browsers open at most 6 connections to one host and port, and each editor tab held one open for its deck's
+   events, so a sixth tab never loaded and the others stalled. The tabs now share this worker's stream: each
+   tab (a port here) names its deck, and the front (front.mjs, /events) passes that deck's events on, marked
+   with the tab. Each tab still gets its deck's events as if it had its own stream, starting with "hello". */
+
+const tabs = new Map();   // tab id -> { port, deck }
+const stream = crypto.randomUUID?.() || String(Math.random()).slice(2) + String(Date.now());
+let source = null, seq = 0;
+
+const tell = (body) => fetch("/events/subscribe", { method: "POST", headers: { "content-type": "application/json" },
+  body: JSON.stringify({ stream, ...body }) }).catch(() => {});
+
+function open() {
+  source = new EventSource(`/events?stream=${encodeURIComponent(stream)}`);
+  // "ready" comes first on every (re)connect: the front has a new stream, with no decks yet
+  source.addEventListener("ready", () => { for (const [tab, t] of tabs) tell({ tab, deck: t.deck, on: true }); });
+  source.addEventListener("deck", (ev) => {
+    const m = JSON.parse(ev.data);
+    tabs.get(m.tab)?.port.postMessage({ type: m.type, data: m.data });
+  });
+  source.onerror = () => { for (const t of tabs.values()) t.port.postMessage({ type: "error" }); };
+}
+
+onconnect = (e) => {
+  const port = e.ports[0];
+  let tab = null;
+  const leave = () => {
+    if (!tab) return;
+    tabs.delete(tab);
+    tell({ tab, on: false });
+    tab = null;
+    if (!tabs.size) { source?.close(); source = null; }
+  };
+  port.onmessage = ({ data }) => {
+    if (data?.subscribe) {
+      leave();
+      tab = String(++seq);
+      tabs.set(tab, { port, deck: String(data.subscribe) });
+      if (!source) open();
+      else if (source.readyState === EventSource.OPEN) tell({ tab, deck: String(data.subscribe), on: true });
+    }
+    if (data?.close) leave();
+  };
+  port.start();
+};

package/public/index.html

@@ -102,7 +102,7 @@
           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> and <code>theme.css</code>, checks the layout, and the slide updates here.
+        <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.
           <code>brand.css</code> is locked.</p>
       </div>
     </div>