pindeck 2.10.0 → 2.11.0

package/README.md

@@ -253,7 +253,7 @@ show and commit as usual. Clones without the filter configured simply see the fi
 | Undo, redo | `⌘Z` / `⇧⌘Z` or the toolbar arrows. One history for your hand edits and Claude's changes. |
 | Pin elements | Press `P` (or the Pin button), click elements; each click gets a number. Click a marker to remove it, `Esc` to stop. |
 | Ask Claude | Write in the sidebar and refer to pins by number: "1: align with 2, make 3 smaller". The selected element is sent too, so "make this smaller" works. `Enter` sends, `Shift+Enter` adds a new line. |
-| Visual questions | **+** in the chat, then **Screenshot**: the current slide with its pin markers is attached when you send. |
+| Visual questions | **+** in the chat, then **Screenshot**: the current slide with its pin markers is attached when you send. The chat shows it, and the screenshots Claude reads, as a small picture; click it to see it larger. |
 | Review | Each answer ends with the changed files, a **Diff** button and an **Undo** button (most recent change). |
 | Stop | **Stop** interrupts Claude; the conversation continues. **New chat** starts over. |
 | New slide | **＋ New slide** above the slide list: a **content slide** (title and bullets), a **section divider**, or a **duplicate** of the current slide. It is added after the current slide, modelled on the deck's own slides, and its title opens for typing. |
@@ -396,6 +396,10 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
 
 ## Versions
 
+* **2.11**: screenshots in the chat. A screenshot sent with a message, and one Claude reads, shows as
+  a small picture that opens larger with a click (Esc or a click closes it). PinDeck keeps the 40
+  newest screenshots of a deck; an older one says "no longer kept". Chats from before 2.11 keep their
+  plain label.
 * **2.10**: decks with their own file names and shared files, decks made without reveal.js, and Claude
   working on the whole deck.
   - A deck file by name: `pindeck path/to/talk.html` (a folder still opens its `index.html`). Several

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pindeck",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "PinDeck: an editor for HTML slide decks on macOS, and on Linux (beta) through an SSH tunnel. Pin elements, describe the change, and Claude Code edits the slides.",
   "keywords": [
     "slides",

package/public/editor.css

@@ -207,6 +207,10 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
 .chip .lock { color: var(--muted); }
 .chip.sel .n { background: #1a73e8; border-radius: 4px; font-size: 10px; }
 .chip .dim { color: var(--muted); font-variant-numeric: tabular-nums; }
+.shot-chip { font: inherit; font-size: 12px; color: inherit; }
+.shot-chip img { height: 28px; width: auto; max-width: 64px; border-radius: 3px; border: 1px solid var(--line); background: #fff; }
+.msg.tool .shot-chip { margin: 0 0 0 4px; vertical-align: middle; padding: 1px; border-radius: 4px; }
+.chip.gone { cursor: default; color: var(--muted); }
 .msg.edit { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .msg.edit .files { color: var(--ink); }
 .msg.edit .undone { text-decoration: line-through; }
@@ -264,6 +268,12 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
 .import-dialog .import-notes .check { color: var(--ink); }
 .import-list .tag.complex { border-color: var(--orange); color: var(--orange); }
 
+/* ---- Screenshot ---- */
+.shot-dialog { padding: 0; border: 0; background: none; max-width: 94vw; max-height: 92vh; cursor: zoom-out; }
+.shot-dialog::backdrop { background: rgba(20,22,25,.6); }
+.shot-dialog img { display: block; max-width: 94vw; max-height: 92vh; object-fit: contain; background: #fff;
+  border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
+
 /* ---- Diff ---- */
 .diff-dialog { width: min(1000px, 92vw); max-height: 86vh; padding: 0; border: 1px solid var(--line); border-radius: 10px;
   box-shadow: 0 20px 60px rgba(0,0,0,.25); }

package/public/editor.js

@@ -571,17 +571,25 @@ 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 larger. Chats from before 2.11 recorded no file
+   name (true); the server keeps only the newest 40, so an older one fails to load and says so. */
+function shotChip(name, label = " screenshot") {
+  if (typeof name !== "string") return `<span class="chip">📷${label}</span>`;
+  const src = `/shots/${encodeURIComponent(name)}`;
+  return `<button type="button" class="chip shot-chip" data-shot="${esc(src)}" title="Open the screenshot">` +
+    `<img src="${esc(src)}" alt="">${label}</button>`;
+}
 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) =>
+        e.screenshot ? shotChip(e.screenshot) : ""}${(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>` : ""}`;
     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>
@@ -641,6 +649,12 @@ chatEl.addEventListener("click", async (e) => {
     $("diff-dialog").showModal();
     return;
   }
+  const shot = e.target.closest("[data-shot]");
+  if (shot) {
+    $("shot-img").src = shot.dataset.shot;
+    $("shot-dialog").showModal();
+    return;
+  }
   const u = e.target.closest("[data-undo]");
   if (u) {
     u.disabled = true;
@@ -651,6 +665,14 @@ chatEl.addEventListener("click", async (e) => {
   }
 });
 $("diff-close").onclick = () => $("diff-dialog").close();
+// a picture that is gone: error events do not bubble, so they are caught on the way down
+chatEl.addEventListener("error", (e) => {
+  const chip = e.target.closest?.(".shot-chip");
+  if (!chip) return;
+  chip.outerHTML = '<span class="chip gone" title="Only the 40 newest screenshots are kept">📷 no longer kept</span>';
+}, true);
+// Esc closes it (as any dialog); so does a click anywhere on it
+$("shot-dialog").onclick = () => $("shot-dialog").close();
 
 function setBusy(busy) {
   state.busy = busy;

package/public/index.html

@@ -155,6 +155,10 @@
   </form>
 </dialog>
 
+<dialog id="shot-dialog" class="shot-dialog" aria-label="Screenshot">
+  <img id="shot-img" alt="Screenshot of the slide">
+</dialog>
+
 <dialog id="diff-dialog" class="diff-dialog">
   <div class="dialog-head"><span id="diff-title">Changes</span><button class="small" id="diff-close">Close</button></div>
   <pre id="diff-body" class="diff"></pre>

package/server.mjs

@@ -83,6 +83,7 @@ const deckKey = (NAMED ? `${path.basename(DECK_DIR)}-${DECK_NAME}` : path.basena
   crypto.createHash("sha1").update(NAMED ? path.join(DECK_DIR, DECK_FILE) : DECK_DIR).digest("hex").slice(0, 8);
 const STATE_DIR = path.join(HOME_DIR, "decks", deckKey);
 const SHOT_DIR = path.join(STATE_DIR, "shots");
+const SHOT_NAME = /^[\w-]+\.png$/;                    // what takeShot writes, and all /shots/ serves
 const PDF_DIR = path.join(STATE_DIR, "attachments");   // attached PDFs: reading material, not part of the deck
 /* pindeck login: a new one-time login link from the running server, asked with the token in its server
    file (readable only by this user) */
@@ -571,7 +572,12 @@ function toolSummary(name, input = {}) {
     return !r || r.startsWith("..") ? path.basename(p) : r;
   };
   switch (name) {
-    case "Read": return { name: "Read", detail: base(input.file_path) };
+    case "Read": {
+      // a screenshot PinDeck took: the chat shows it, by its name in the shots folder
+      const f = input.file_path && path.resolve(DECK_DIR, input.file_path);
+      const shot = f && path.dirname(f) === SHOT_DIR && SHOT_NAME.test(path.basename(f)) ? path.basename(f) : undefined;
+      return { name: "Read", detail: base(input.file_path), shot };
+    }
     case "Edit": case "MultiEdit": case "Write": return { name: "Edit", detail: base(input.file_path) };
     case "Bash": {
       // a PinDeck command only when the whole command is one: a script that ends in `cli.mjs layout`
@@ -1171,7 +1177,13 @@ const server = http.createServer(async (req, res) => {
       const f = safeJoin(path.join(EDITOR_DIR, "public"), p.slice(8));
       return f ? serveFile(res, f, null, req) : text(res, 403, "Forbidden");
     }
-    if ((p.startsWith("/deck/") || p.startsWith("/files/")) && !ok) return text(res, 403, "Not logged in");
+    if ((p.startsWith("/deck/") || p.startsWith("/files/") || p.startsWith("/shots/")) && !ok) return text(res, 403, "Not logged in");
+    // /shots/: the screenshots of this deck, for the chat; only PNG files directly in its shots folder
+    if (p.startsWith("/shots/")) {
+      const name = decodeURIComponent(p.slice(7));
+      if (req.method !== "GET" || !SHOT_NAME.test(name)) return text(res, 404, "Not found");
+      return serveFile(res, path.join(SHOT_DIR, name), null, req);
+    }
     let snap;
     if (req.method === "GET" && (snap = p.match(/^\/(?:deck|files)\/(?:.*\/)?__pindeck-print-([\w-]+)\.html$/))) {
       const html = snapshots.get(snap[1]);
@@ -1254,7 +1266,8 @@ const server = http.createServer(async (req, res) => {
       // only files PinDeck itself stored can be attached
       b.attachments = (b.attachments || []).filter((a) => a && state.uploads.has(a.path) && fs.existsSync(uploadFile(a.path)));
       b.attachments.forEach((a) => { state.uploads.delete(a.path); if (a.waveform) state.uploads.delete(a.waveform); });
-      const entry = addEntry({ kind: "user", text: b.text, screenshot: !!screenshot,
+      // the file's name, so the chat can show it (true in chats from before 2.11)
+      const entry = addEntry({ kind: "user", text: b.text, screenshot: screenshot ? path.basename(screenshot.path) : false,
         attachments: b.attachments.map((a) => ({ path: a.path, kind: a.kind, name: a.name })),
         selection: b.selection ? { eid: b.selection.eid, label: b.selection.eid.replace(/^[^/]+\//, ""), slide: b.selection.slide.index + 1 } : null,
         pins: (b.pins || []).map((p) => ({ n: p.n, eid: p.eid, label: label(p), slide: p.slide.index + 1 })) });