pindeck 2.8.2 → 2.10.0

package/public/editor.js

@@ -1,13 +1,22 @@
 /* PinDeck UI: slide list, canvas with pins, chat with Claude Code. */
 
-const TOKEN = document.querySelector('meta[name="editor-token"]').content;
 const $ = (id) => document.getElementById(id);
 const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
-const api = (p, body) => fetch("/api/" + p, {
-  method: body === undefined ? "GET" : "POST",
-  headers: { "x-editor-token": TOKEN, "content-type": "application/json" },
-  body: body === undefined ? undefined : JSON.stringify(body),
-});
+/* 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. */
+const CHANGES = new Set(["edit", "text", "split", "remove", "notes", "slide-hidden", "move-slide", "add-slide",
+  "delete", "import-apply", "undo", "redo"]);
+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, {
+    method: body === undefined ? "GET" : "POST",
+    headers: { "content-type": "application/json" },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  if (change && res.ok && res.headers.get("x-deck-rev")) state.rev = res.headers.get("x-deck-rev");
+  return res;
+};
 
 const savedSlide = (() => { try { return +localStorage.getItem("editor.slide") || 0; } catch { return 0; } })();
 const state = {
@@ -22,7 +31,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)
-function deckSrc(mode, extra = "") { return `/deck/index.html?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 `/deck/?editor=${mode}&showHiddenSlides=true${extra}`; }
 
 function loadMain() {
   const f = document.createElement("iframe");
@@ -102,7 +112,11 @@ window.__editorHost = {
   commitText(edit) {
     queueEdit(async () => {
       const res = await api("text", edit);
-      if (!res.ok) toast((await res.json().catch(() => ({}))).error || "Could not save the text.");
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        if (d.code === "stale") keepRejectedText(edit.text, d);
+        else toast(d.error || "Could not save the text.");
+      }
       loadMain();   // re-render: math, footer numbers, and the file as saved
     }, "Could not save the text.");
   },
@@ -171,6 +185,19 @@ async function undoRedo(which) {
   const res = await api(which, {});
   if (!res.ok) toast((await res.json().catch(() => ({}))).error || `Nothing to ${which}.`);
 }
+/* A text edit refused because the file changed meanwhile: the slide reloads with the file as it is now,
+   and the user's text stays available to copy and type in again. Nothing is merged automatically. */
+let rejectedText = "";
+function keepRejectedText(text, d) {
+  if (d.rev) state.rev = d.rev;
+  rejectedText = String(text ?? "");
+  toast(`${esc(d.error)}<a href="#" data-copy-rejected>Copy your text</a>`, { html: true, ms: 20000 });
+}
+document.addEventListener("click", (e) => {
+  if (!e.target.closest?.("[data-copy-rejected]")) return;
+  e.preventDefault();
+  navigator.clipboard?.writeText(rejectedText).then(() => toast("Your text is on the clipboard."), () => toast(rejectedText, { ms: 20000 }));
+});
 let toastTimer = null;
 function toast(msg, { html = false, ms = 3200 } = {}) {
   $("toast")[html ? "innerHTML" : "textContent"] = msg;
@@ -202,7 +229,8 @@ function renderSlides() {
         ${s.kind !== "content" ? `<span class="kind">${esc(s.kind.replace(/-slide$/, ""))}</span>` : ""}
         ${s.hidden ? '<span class="kind hid">hidden</span>' : ""}</span>
       ${counts[i] ? `<span class="badge" title="${counts[i]} pin(s)">${counts[i]}</span>` : "<span></span>"}
-      <button class="eye" data-eye="${i}" title="${s.hidden ? "Show this slide again" : "Hide this slide (skipped when presenting)"}"
+      <button class="eye" data-eye="${i}" title="${s.hidden ? "Show this slide again" : state.status?.slideSelector ?
+        "Hide this slide (left out of PDFs)" : "Hide this slide (skipped when presenting)"}"
         aria-label="${s.hidden ? "Show" : "Hide"} slide ${i + 1}">${s.hidden ? EYE_ICON : EYE_OFF_ICON}</button>
     </li>`).join("");
   $("slide-list").querySelector("li.active")?.scrollIntoView({ block: "nearest" });
@@ -338,7 +366,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?t=${TOKEN}`, new Blob([JSON.stringify({ eid: notes.eid, text: notesBox.value, html: notes.html })]));
+    navigator.sendBeacon("/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,8 +493,7 @@ $("export-menu").addEventListener("click", async (e) => {
 });
 
 $("present").onclick = () => {
-  const ix = main?.bridge.indices(state.current) || { h: 0, v: 0 };
-  window.open(`/deck/index.html#/${ix.h}${ix.v ? "/" + ix.v : ""}`, "_blank");
+  window.open(`/deck/${main?.bridge.presentHash(state.current) || ""}`, "_blank");
 };
 
 /* ---- Pins --------------------------------------------------------------------------------------- */
@@ -567,13 +594,14 @@ function entryHtml(e) {
       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) =>
-          `${esc(f.file)} <span class="add">+${f.added}</span> <span class="del">−${f.removed}</span>`).join(", ")}</span>`);
+          `${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>");
       } 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 Claude run only its own commands (layout, shot, slides, pdf) and edit index.html and theme.css">` +
+      if (e.denials?.length) parts.push(`<span class="warn" title="PinDeck lets Claude run only its own commands (layout, shot, slides, pdf) and edit ${esc(state.status?.deckFile || "index.html")} and theme.css">` +
         `Not allowed in PinDeck, so skipped: ${e.denials.map((d) => esc(`${d.name} ${d.detail}`)).join(", ")}</span>`);
       if (e.duration) parts.push(`<span class="meta">${(e.duration / 1000).toFixed(1)} s</span>`);
       return parts.join(" ");
@@ -711,29 +739,57 @@ 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) {
   state.status = s;
-  // the deck's name in the header ("ocean-example"), its full path on hover
+  // 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;
-    $("deck-name").textContent = folder;
+    const name = s.deckFile && s.deckFile !== "index.html" ? s.deckFile : folder;
+    $("deck-name").textContent = name;
     $("deck-name").title = `${s.deck}/${s.deckFile || "index.html"}`;
-    document.title = `${folder} · PinDeck`;
+    if ($("deck-file")) $("deck-file").textContent = s.deckFile || "index.html";
+    document.title = `${name} · PinDeck`;
   }
   setBusy(!!s.busy);
   $("model").textContent = modelLabel(s);
   $("model-btn").disabled = !!s.busy;
   $("conn").classList.toggle("on", !!s.running);
   $("conn").title = s.running ? "Claude Code is running" : "Claude Code starts with the next message";
+  const caps = s.capabilities || {};
+  const why = (c) => (c && c.available === false ? c.reason : "");
   $("add-shot").disabled = !s.chrome;
-  $("add-shot").title = s.chrome ? "" : "Screenshots need Chrome or Chromium";
+  $("add-shot").title = s.chrome ? "" : why(caps.screenshot) || "Screenshots need Chrome or Chromium";
+  for (const item of $("export-menu").querySelectorAll("[data-export]")) {
+    item.disabled = !!why(caps.pdfExport);
+    item.title = why(caps.pdfExport);
+  }
+  const imp = $("add-slide-menu").querySelector('[data-slide="import"]');
+  imp.disabled = !!why(caps.pptxImport);
+  imp.title = why(caps.pptxImport);
+  if (why(caps.claude)) $("conn").title = caps.claude.reason;
+  // where the server runs, when it is not this Mac's usual setup: "Linux (beta)", with what is off
+  const names = { claude: "Claude", 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" };
+  const off = Object.entries(caps).filter(([, c]) => c && c.available === false).map(([k]) => "• " + (names[k] || k));
+  const reasons = [...new Set(Object.values(caps).filter((c) => c && c.available === false).map((c) => c.reason))];
+  $("server-note").hidden = !caps.platform || caps.platform === "darwin";
+  $("server-note").textContent = caps.label ? `Server: ${caps.label}` : "";
+  $("server-note").title = off.length ? `Not available on this server:\n${off.join("\n")}\n\nWhy:\n${reasons.join("\n")}` : "";
   $("add-slide-btn").disabled = !!s.busy;
+  // the deck's slide tags stopped working while PinDeck runs (at start, such a deck is refused)
+  if (s.deckProblem && s.deckProblem !== shownProblem) toast(s.deckProblem, { ms: 20000 });
+  shownProblem = s.deckProblem;
   renderToolbar();
 }
 function connect() {
-  const es = new EventSource(`/api/events?t=${TOKEN}`);
+  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);
@@ -757,7 +813,8 @@ function connect() {
     rerenderTurns();
   });
   es.addEventListener("files", (ev) => {
-    const { files, manual } = JSON.parse(ev.data);
+    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
@@ -774,7 +831,8 @@ function connect() {
     try { api("measure-result", { id, result: await queueMeasure(index) }); }
     catch (err) { api("measure-result", { id, error: String(err) }); }
   });
-  // EventSource reconnects by itself; if the server restarted, our token is stale: reload the page
+  // 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 () => {
     try { if ((await api("ping")).status === 403) location.reload(); } catch {}
   };
@@ -816,7 +874,7 @@ $("import-file").addEventListener("change", async () => {
   if (!file) return;
   toast(`Reading ${file.name}…`);
   const res = await fetch("/api/import", { method: "POST", body: file,
-    headers: { "x-editor-token": TOKEN, "x-filename": encodeURIComponent(file.name), "content-type": "application/octet-stream" } });
+    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}.`);
   importing = d;
@@ -859,7 +917,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}&t=${TOKEN}`;
+    img.src = `/api/import-thumb?id=${importing.id}&n=${c.value}`;
     c.closest(".thumb").append(img);
   }
 }
@@ -976,7 +1034,7 @@ const fmtBytes = (n) => (n >= 1048576 ? `${(n / 1048576).toFixed(1)} MB` : `${Ma
 
 async function uploadBlob(blob, name) {
   const res = await fetch("/api/upload", { method: "POST", body: blob,
-    headers: { "x-editor-token": TOKEN, "x-filename": encodeURIComponent(name), "content-type": blob.type || "application/octet-stream" } });
+    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}.`);
   return d;

package/public/index.html

@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="editor-token" content="%%TOKEN%%">
   <title>PinDeck</title>
   <link rel="icon" href="/editor/favicon.svg" type="image/svg+xml">
   <link rel="icon" href="/editor/favicon.png" type="image/png" sizes="64x64">
@@ -37,6 +36,7 @@
         <span id="slide-pos" class="pos">– / –</span>
         <button id="next" class="icon" title="Next slide (→)" aria-label="Next slide">›</button>
         <span id="deck-name" class="deck-name"></span>
+        <span id="server-note" class="server-note" hidden></span>
       </div>
       <div class="group">
         <button id="undo" class="icon" aria-label="Undo" title="Undo (⌘Z)" disabled>↶</button>
@@ -95,7 +95,7 @@
           double-click to change the text. A selected element is what Claude 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; Claude can put it on a slide
           or, for a paper or report, take the details from it.</p>
-        <p>Claude edits <code>index.html</code> and <code>theme.css</code>, checks the layout, and the slide updates here.
+        <p>Claude edits <code id="deck-file">index.html</code> and <code>theme.css</code>, checks the layout, and the slide updates here.
           <code>brand.css</code> is locked.</p>
       </div>
     </div>