pindeck 2.8.2 → 2.9.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 = {
@@ -102,7 +111,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 +184,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;
@@ -338,7 +364,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);
@@ -725,15 +751,37 @@ function applyStatus(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;
   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 +805,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 +823,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 +866,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 +909,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 +1026,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>