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

package/README.md

@@ -1,6 +1,6 @@
 # PinDeck
 
-> **macOS, and Linux as a beta · Version 3 beta preview** (`3.0.0-beta.3`). On Linux, PinDeck runs as a
+> **macOS, and Linux as a beta · Version 3 beta preview** (`3.1.0-beta.1`). On Linux, PinDeck runs as a
 > headless server that you use from your Mac's browser through an SSH tunnel (see
 > [Running on a Linux server](#running-on-a-linux-server-beta)). Windows is not supported. The beta is on
 > npm’s `beta` channel and the [`v3-beta`](https://github.com/ehabets/PinDeck/tree/v3-beta) branch; stable
@@ -42,7 +42,7 @@ Install the beta from npm:
 ```bash
 npx pindeck@beta /path/to/deck
 # Or select this exact beta:
-npx pindeck@3.0.0-beta.3 /path/to/deck
+npx pindeck@3.1.0-beta.1 /path/to/deck
 ```
 
 Or run it from the `v3-beta` branch, which includes the example deck:
@@ -50,14 +50,14 @@ Or run it from the `v3-beta` branch, which includes the example deck:
 ```bash
 git clone --branch v3-beta --single-branch https://github.com/ehabets/PinDeck.git PinDeck-v3
 cd PinDeck-v3
-node server.mjs ocean-example
+node front.mjs ocean-example
 ```
 
 Use `npx pindeck@latest /path/to/deck` for the stable release; the beta channel does not replace it.
 Releases, with notes for each beta, are on [GitHub](https://github.com/ehabets/PinDeck/releases).
 
 Then open the login link PinDeck prints (`PinDeck: http://127.0.0.1:5180/login?code=...`). It works
-once and logs this browser in; for a new one, run `pindeck login` (or `node server.mjs login`).
+once and logs this browser in; for a new one, run `pindeck login` (or `node front.mjs login`).
 
 The deck is a file (`pindeck path/to/talk.html`) or a folder, which opens its `index.html`; without
 one, the current folder. Several decks can share a folder, each with its own chat and undo history;
@@ -68,6 +68,17 @@ model in `~/.pindeck-v3/config.json`), `--asset-root <folder>` (see [Files outsi
 `--help`. Runtime files (chat history, screenshots, backups) are kept in `~/.pindeck-v3/` (change with
 `PINDECK_HOME`), not in the deck. `ocean-example/` is a complete example deck to start from.
 
+### Several decks
+
+Click the deck's name above the slide for the other decks: the `.html` files in the deck's folder and in
+the asset roots, and in their folders one level down (`lecture/index.html`). A deck opens in the same
+tab, or with ⌘-click in a new one, on the same port and login, so one SSH tunnel serves them all. Each keeps
+its own chat and undo history while it is open, and the assistant finishes a turn in a deck you leave. A
+file PinDeck cannot open is greyed out with the reason; listing a deck changes nothing, and only opening it
+adds its element ids. Started with a folder that has no `index.html`, PinDeck shows the list of its decks.
+A deck with no editor open for 30 minutes is closed (its undo history goes, as on a restart) and opens
+again when you choose it.
+
 ## Compatibility and requirements
 
 * **Runtime:** Node.js 20 or later, plus a modern browser. The release workflow uses Node.js 24.
@@ -242,7 +253,7 @@ The v3 preview defaults to **`~/.pindeck-v3`**, keeping v2 settings and conversa
 not copy the v2 directory automatically. To run both versions at once, use another port, for example:
 
 ```bash
-node server.mjs /path/to/a/deck-copy --port 5183 --provider codex
+node front.mjs /path/to/a/deck-copy --port 5183 --provider codex
 ```
 
 ## Backend permissions and attachments
@@ -284,7 +295,7 @@ the `claude` or `codex` CLI installed and logged in under your account there, if
 editing by hand still works. Then, in one SSH session on the server:
 
 ```bash
-node server.mjs path/to/deck --port 5180
+node front.mjs path/to/deck --port 5180
 ```
 
 and on your Mac, in another terminal (`myserver` is your usual SSH host):
@@ -297,7 +308,7 @@ Open the login link PinDeck printed on the server in the Mac's browser. The loca
 the server's: with `-L 127.0.0.1:8080:127.0.0.1:5180`, change 5180 in the link to 8080. PinDeck accepts any
 port, as long as the address is `127.0.0.1` or `localhost`. If the tunnel drops, a message you have already sent keeps running on the
 server. Restart the tunnel and the editor reconnects and shows the files as they are then; it never sends a
-message twice. If PinDeck restarts, the editor asks you to log in again: run `node server.mjs login
+message twice. If PinDeck restarts, the editor asks you to log in again: run `node front.mjs login
 path/to/deck` on the server for a new link.
 
 Other users of a shared server cannot open the editor or read the deck through PinDeck: the token that
@@ -411,6 +422,10 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
 
 ## How it works
 
+* **One port, a server per deck.** `pindeck` starts the front (`front.mjs`): it holds the port, the login
+  and the deck list, and serves each open deck at `/d/<deck>/`. Every deck runs its own deck server
+  (`server.mjs`) on a private port of 127.0.0.1 with a token of its own; the front passes each request on
+  with that token. A deck's server, its assistant and its undo history are those of that deck alone.
 * **Element ids.** On start, the server gives every slide and every visible element a readable
   `data-eid` attribute (`summary`, `summary/callout`, `summary/li-2`). Only the attribute is
   inserted; the rest of the file stays as it was. A backup of the file before the first change is
@@ -462,7 +477,9 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
 
 | File | Purpose |
 |---|---|
-| `server.mjs` | Local server (127.0.0.1 only, random token per run, one-time login links): UI, deck files, events, backend session, undo, CLI endpoints, `login`. |
+| `front.mjs` | What `pindeck` starts (127.0.0.1 only, random token per run, one-time login links): the login, the deck list and one deck server per open deck at `/d/<deck>/`; `login`. |
+| `server.mjs` | The server for one deck: UI, deck files, events, backend session, undo, CLI endpoints. Behind the front, or on its own (`node server.mjs <deck>`). |
+| `lib/login.mjs`, `lib/deck-target.mjs`, `lib/deck-list.mjs` | Login links and cookies, which deck a path names (and its state folder), and the decks the menu lists. |
 | `cli.mjs` | `layout`, `shot`, `slides`, `pdf handout` / `pdf presentation` and `pdf-figure` commands for the backends (and for you), and `git-setup`. |
 | `public/` | The editor page, and `bridge.js`, which is injected into the deck in edit mode (never saved to it). |
 | `lib/pptx.mjs`, `lib/zip.mjs`, `lib/xml.mjs` | Reading `.pptx` files (no dependencies): slides, text, shapes and their positions, notes. |
@@ -491,13 +508,25 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
 * Parts of an inline SVG move with the whole SVG; inline text (bold, spans) moves with its block.
 * No indenting or outdenting of bullets with `Tab` yet, and `Backspace` at the start of a bullet does not merge it with the one above; ask the assistant for those.
 * Moves are offsets (`translate`), so the space an element came from stays reserved. Ask the assistant to turn hand edits into proper CSS when a layout should really change.
-* The undo history lives on the server and starts fresh when PinDeck restarts.
+* The undo history lives on the server and starts fresh when PinDeck restarts, or when a deck closes after
+  30 minutes without an open editor.
 * One writer at a time: PinDeck is not made for editing the same deck from two editors or tools at once.
 * Linux (beta): pictures of PDF pages and PowerPoint slides, and waveforms of non-WAV audio, need
   Poppler, LibreOffice and ffmpeg on the server (see [Running on a Linux server](#running-on-a-linux-server-beta)).
 
 ## Versions
 
+* **3.1.0-beta.1**: several decks on one port, and screenshots you can open from the chat.
+  - A deck menu: click the deck's name above the slide to open another deck from its folder or the
+    asset roots (and one folder down). Each open deck keeps its own chat, assistant session and Undo;
+    listing decks changes no file. `pindeck` now starts a small front that holds the port and the
+    login and runs one deck server per open deck. A deck with no editor open for 30 minutes closes
+    (its Undo history goes, as on a restart) and reopens when chosen again.
+  - A folder without `index.html` opens a page listing its decks instead of failing.
+  - `pindeck login talk.html` prints a link that opens that deck.
+  - Screenshots the assistant took show as a small picture on the chat line; click it to see it large.
+    A screenshot PinDeck no longer keeps says so.
+
 * **3.0.0-beta.3**: everything from 2.10.0, for both assistants.
   - Decks made without reveal.js: a deck that names its slides with `<meta name="pindeck:slides">`
     and their size with `<meta name="pindeck:size">` is edited like a reveal.js deck (contributed by

package/front.mjs

@@ -0,0 +1,318 @@
+#!/usr/bin/env node
+/* PinDeck: the front, which is what `pindeck` starts.
+
+   pindeck [deck-dir | deck.html] [--port 5180] [--provider claude|codex] [--model <name>] [--asset-root <dir>]
+   pindeck login [deck-dir | deck.html]
+
+   One port and one login for several decks. Each deck that is open runs its own deck server (server.mjs, on
+   a private port of 127.0.0.1 with a token of its own) and is reached here as /d/<deck key>/: the front logs
+   the browser in, then passes each request on with that deck's token. A deck starts when it is first asked
+   for (from the editor's deck menu, or a bookmark), so its chat, Claude session and undo stay while it is
+   open, and Claude can go on working in one deck while you edit another. A deck with no editor open for
+   PINDECK_IDLE_MS (30 minutes) is closed; it opens again when asked for.
+
+   The menu lists the decks in the start folder and the asset roots, and in their folders one level down
+   (lib/deck-list.mjs). Only those can be opened: there is no free path entry. */
+
+import http from "node:http";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import crypto from "node:crypto";
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { isSupportedPlatform, detectCapabilities, publicCapabilities, parsePort } from "./lib/capabilities.mjs";
+import { deckTarget, homeDir } from "./lib/deck-target.mjs";
+import { goodHost, LOGIN_PAGE, createLogin } from "./lib/login.mjs";
+import { listDecks } from "./lib/deck-list.mjs";
+import { USAGE } from "./lib/usage.mjs";
+
+const EDITOR_DIR = path.dirname(fileURLToPath(import.meta.url));
+const SERVER = path.join(EDITOR_DIR, "server.mjs");
+const HOME_DIR = homeDir();
+const IDLE_MS = Number(process.env.PINDECK_IDLE_MS) || 30 * 60000;
+
+const argv = process.argv.slice(2);
+if (argv.includes("--help") || argv.includes("-h")) { console.log(USAGE); process.exit(0); }
+const opt = (name, dflt) => { const i = argv.indexOf(name); return i >= 0 ? argv.splice(i, 2)[1] : dflt; };
+const portArg = opt("--port", process.env.PORT || 5180);
+const PASS = [];   // what every deck server gets: the backend and the asset roots
+for (const name of ["--provider", "--model"]) { const v = opt(name); if (v !== undefined) PASS.push(name, v); }
+const assetArgs = [];
+for (let a; (a = opt("--asset-root")) !== undefined;) { assetArgs.push(a); PASS.push("--asset-root", a); }
+let PORT = parsePort(portArg);   // the port actually bound once listening (--port 0 picks a free one)
+if (PORT === null) { console.error(`Invalid port "${portArg}": use a number from 1 to 65535.\n\n${USAGE}`); process.exit(2); }
+if (!isSupportedPlatform(process.platform)) {
+  const { showPlatformNotice } = await import("./lib/platform-notice.mjs");
+  await showPlatformNotice(PORT);
+  process.exit(0);
+}
+
+/* pindeck login: a new one-time login link from the running front, asked with the token in its server file
+   (readable only by this user). With a deck, the link opens that deck. A deck server started on its own
+   (node server.mjs) for that deck answers instead, as before the front. */
+const SERVER_FILE = path.join(HOME_DIR, "server.json");
+if (argv[0] === "login") {
+  const deck = argv[1] ? deckTarget(argv[1]) : null;
+  let info = null;
+  for (const f of [...(deck ? [path.join(HOME_DIR, "decks", deck.key, "server.json")] : []), SERVER_FILE]) {
+    try { info = JSON.parse(fs.readFileSync(f, "utf8")); break; } catch {}
+  }
+  if (!info) { console.error("No PinDeck is running."); process.exit(1); }
+  const next = deck && info.front ? `/d/${deck.key}/` : "/";
+  try {
+    const res = await fetch(`${info.url}/api/login-link?` + new URLSearchParams({ next }), { headers: { "x-editor-token": info.token } });
+    if (!res.ok) throw new Error(res.status);
+    console.log(`PinDeck (${deck ? path.join(deck.dir, deck.file) : info.deckDir}): ${(await res.json()).url}`);
+    process.exit(0);
+  } catch {
+    console.error(`The PinDeck at ${info.url} does not answer. Is it still running?`);
+    process.exit(1);
+  }
+}
+
+/* The start deck, and the folders whose decks the menu offers. A folder without index.html opens the list
+   of its decks; if it has none, its deck server says why, as for any deck that cannot be opened. */
+const START = deckTarget(argv[0] || process.cwd());
+const expandHome = (p) => (p === "~" || p.startsWith("~/") ? path.join(os.homedir(), p.slice(1)) : p);
+let fileConfig = {};
+try { fileConfig = JSON.parse(fs.readFileSync(path.join(HOME_DIR, "config.json"), "utf8")); } catch {}
+const ROOTS = [START.dir, ...assetArgs, ...(Array.isArray(fileConfig.assetRoots) ? fileConfig.assetRoots : [])]
+  .map((r) => path.resolve(expandHome(String(r))))
+  .filter((r, i, all) => all.indexOf(r) === i && (() => { try { return fs.statSync(r).isDirectory(); } catch { return false; } })());
+const decksNow = () => listDecks(ROOTS);
+const chooser = !START.named && !fs.existsSync(path.join(START.dir, START.file)) && decksNow().some((d) => !d.problem);
+
+const TOKEN = crypto.randomBytes(16).toString("hex");
+let ORIGIN = `http://127.0.0.1:${PORT}`;   // set again from the bound port once listening
+const { loginCode, loginUrl, authed, login } = createLogin({ token: TOKEN, port: () => PORT, origin: () => ORIGIN });
+const CAPS = detectCapabilities();
+
+/* ---- Deck servers -------------------------------------------------------------------------------- */
+const decks = new Map();   // key -> { key, dir, file, label, proc, url, token, ready, exited, sse, last }
+const labelOf = (d) => (d.file === "index.html" ? path.basename(d.dir) : d.file);
+let quitting = false;
+
+/* Its output goes to this terminal, each line marked with the deck. hold(): keep the lines back for now */
+function forward(stream, label, to, keep, hold = () => false) {
+  let rest = "";
+  const put = (l) => { keep?.(l + "\n"); if (!hold()) to.write(`[${label}] ${l}\n`); };
+  stream.on("data", (chunk) => {
+    const lines = (rest + chunk).split("\n");
+    rest = lines.pop();
+    lines.forEach(put);
+  });
+  stream.on("end", () => { if (rest) put(rest); });
+}
+
+/* The deck's server, started once: the promise resolves when it listens, or rejects with what it printed.
+   The start deck's complaints are printed by the front as they are, like those of PinDeck before the front. */
+function openDeck(entry, start = false) {
+  const known = decks.get(entry.key);
+  if (known) return known.ready;
+  const d = { key: entry.key, dir: entry.dir, file: entry.file, label: labelOf(entry), sse: 0, last: Date.now() };
+  decks.set(d.key, d);
+  // its own process group: Ctrl+C reaches the front only, which then ends every deck once
+  d.proc = spawn(process.execPath, [SERVER, entry.file === "index.html" ? entry.dir : path.join(entry.dir, entry.file),
+    "--port", "0", ...PASS], { env: { ...process.env, PINDECK_FRONT: "1" }, stdio: ["ignore", "pipe", "pipe", "ipc"], detached: true });
+  let said = "";
+  forward(d.proc.stdout, d.label, process.stdout);
+  forward(d.proc.stderr, d.label, process.stderr, (l) => { said += l; }, () => start && !d.url);
+  d.exited = new Promise((r) => d.proc.once("exit", r));
+  d.ready = new Promise((resolve, reject) => {
+    d.proc.on("message", (m) => {
+      if (!m?.ready) return;
+      Object.assign(d, { url: m.ready.url, token: m.ready.token });
+      if (!start) console.log(`[${d.label}] opened: ${path.join(d.dir, d.file)}`);
+      resolve(d);
+    });
+    d.proc.once("exit", (code, signal) => {
+      if (decks.get(d.key) === d) decks.delete(d.key);
+      if (d.url && !quitting) console.log(`[${d.label}] closed`);
+      reject(Object.assign(new Error(said.trim() || `The deck server stopped (${code ?? signal}).`), { exitCode: code || 1 }));
+    });
+  });
+  d.ready.catch(() => {});
+  return d.ready;
+}
+
+function stopDeck(d) {
+  try { d.proc.kill("SIGTERM"); } catch {}
+}
+
+/* A deck with no editor open (no event stream) and nothing to do for IDLE_MS is closed */
+setInterval(async () => {
+  for (const d of decks.values()) {
+    if (!d.url || d.sse > 0 || Date.now() - d.last < IDLE_MS) continue;
+    try {
+      const res = await fetch(`${d.url}/api/status`, { headers: { "x-editor-token": d.token } });
+      const st = await res.json();
+      if (st.busy || d.sse > 0 || Date.now() - d.last < IDLE_MS) continue;
+    } catch { continue; }
+    console.log(`[${d.label}] no editor open for ${Math.round(IDLE_MS / 60000)} min: closing it (it opens again when asked for)`);
+    stopDeck(d);
+  }
+}, Math.min(60000, IDLE_MS / 2)).unref();
+
+/* The request, without the front's cookie and with the deck's token, to the deck's server; the answer
+   streamed back (event streams, media ranges and large uploads included) */
+function proxy(req, res, d, rest) {
+  d.last = Date.now();
+  const headers = { ...req.headers, host: new URL(d.url).host, "x-editor-token": d.token };
+  delete headers.cookie;
+  delete headers.origin;   // checked here against the front's address; the deck server checks its own
+  const up = http.request(d.url + rest, { method: req.method, headers }, (r) => {
+    res.writeHead(r.statusCode, r.headers);
+    r.pipe(res);
+  });
+  up.on("error", () => { if (!res.headersSent) page(res, 502, "This deck stopped answering", "Reload the page to open it again."); else res.destroy(); });
+  if (rest.split("?")[0] === "/api/events") {
+    d.sse++;
+    res.on("close", () => { d.sse--; d.last = Date.now(); });
+  }
+  res.on("close", () => { if (!res.writableFinished) up.destroy(); });
+  req.pipe(up);
+}
+
+/* ---- HTTP ------------------------------------------------------------------------------------- */
+const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+const text = (res, code, s) => { res.writeHead(code, { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" }); res.end(s); };
+const json = (res, code, o) => { res.writeHead(code, { "content-type": "application/json", "cache-control": "no-store" }); res.end(JSON.stringify(o)); };
+function page(res, code, title, body) {
+  res.writeHead(code, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+  res.end(`<!doctype html><meta charset="utf-8"><title>${esc(title)} · PinDeck</title>
+<link rel="icon" href="/editor/favicon.svg" type="image/svg+xml"><link rel="stylesheet" href="/editor/front.css">
+<main class="front"><h1>${esc(title)}</h1>${body}</main>`);
+}
+/* The decks for the menu (and the start page without a start deck), with which are open and working */
+const deckList = () => decksNow().map((e) => ({ key: e.key, rel: e.rel, root: e.root, problem: e.problem,
+  open: !!decks.get(e.key)?.url }));
+function chooserPage(res) {
+  const list = deckList(), groups = new Map(ROOTS.map((r) => [r, list.filter((d) => d.root === r)]).filter(([, l]) => l.length));
+  const body = [...groups].map(([root, list]) => `<h2>${esc(root)}</h2><ul>${list.map((d) => d.problem
+    ? `<li class="off" title="${esc(d.problem)}">${esc(d.rel)}<small>${esc(d.problem)}</small></li>`
+    : `<li><a href="/d/${esc(d.key)}/">${esc(d.rel)}</a>${d.open ? " <small>open</small>" : ""}</li>`).join("")}</ul>`).join("");
+  page(res, 200, "Decks", body || "<p>No decks here.</p>");
+}
+const MIME = { html: "text/html; charset=utf-8", css: "text/css; charset=utf-8", js: "text/javascript; charset=utf-8",
+  svg: "image/svg+xml", png: "image/png" };
+function serveEditorFile(res, rel) {
+  const base = path.join(EDITOR_DIR, "public");
+  const f = path.resolve(base, "." + path.posix.normalize("/" + decodeURIComponent(rel)));
+  if (!f.startsWith(base + path.sep)) return text(res, 403, "Forbidden");
+  fs.readFile(f, (err, data) => {
+    if (err) return text(res, 404, "Not found");
+    res.writeHead(200, { "content-type": MIME[path.extname(f).slice(1)] || "application/octet-stream", "cache-control": "no-store" });
+    res.end(data);
+  });
+}
+
+const server = http.createServer(async (req, res) => {
+  const host = String(req.headers.host || "").toLowerCase();
+  if (!goodHost(host)) return text(res, 403, "Bad host");
+  const url = new URL(req.url, ORIGIN);
+  const p = url.pathname;
+  try {
+    if (req.method === "GET" && p === "/login") return login(res, url);
+    // the editor's own scripts and styles hold nothing secret; the deck page loads bridge.js from here
+    if (req.method === "GET" && p.startsWith("/editor/")) return serveEditorFile(res, p.slice(8));
+    if (!authed(req)) {
+      if (req.method === "GET" && /^\/(d\/[^/]+\/(index\.html)?)?$/.test(p)) {
+        res.writeHead(403, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+        return res.end(LOGIN_PAGE);
+      }
+      return text(res, 403, "Not logged in");
+    }
+    const origin = req.headers.origin;
+    if (req.method === "POST" && origin && origin.toLowerCase() !== `http://${host}`) return text(res, 403, "Bad origin");
+
+    if (p === "/") {
+      if (chooser) return chooserPage(res);
+      res.writeHead(302, { location: `/d/${START.key}/`, "cache-control": "no-store" });
+      return res.end();
+    }
+    if (p === "/api/ping") return json(res, 200, { ok: true, front: true });
+    if (p === "/api/login-link") return json(res, 200, { url: loginUrl(loginCode(3600000), url.searchParams.get("next") || "/") });
+    if (p === "/api/decks") return json(res, 200, { decks: deckList() });
+
+    const m = /^\/d\/([\w.-]+)(\/.*)?$/.exec(p);
+    if (!m) return text(res, 404, "Not found");
+    if (!m[2]) {
+      res.writeHead(301, { location: `/d/${m[1]}/${url.search}` });
+      return res.end();
+    }
+    let d = decks.get(m[1]);
+    if (!d) {
+      // only a deck from the list, and only one PinDeck can open
+      const entry = START.key === m[1] && !chooser ? { key: START.key, dir: START.dir, file: START.file }
+        : decksNow().find((e) => e.key === m[1]);
+      if (!entry) return page(res, 404, "No such deck", `<p>It is not in the deck folder or an asset root (any more).</p><p><a href="/">All decks</a></p>`);
+      if (entry.problem) return page(res, 409, "PinDeck cannot open this deck", `<p>${esc(entry.problem)}</p><p><a href="/">All decks</a></p>`);
+      d = entry;
+    }
+    try { d = await openDeck(d); }
+    catch (e) { return page(res, 502, "PinDeck could not open this deck", `<pre>${esc(e.message)}</pre><p><a href="/">All decks</a></p>`); }
+    return proxy(req, res, d, m[2] + url.search);
+  } catch (e) {
+    if (!res.headersSent) text(res, 500, String(e.message || e));
+  }
+});
+
+/* ---- Start ----------------------------------------------------------------------------------------
+   The port is bound first, then the start deck opens (its server checks it before writing anything). If it
+   cannot, the front says why and stops: as before the front, nothing is written. */
+function writeServerInfo() {
+  fs.mkdirSync(HOME_DIR, { recursive: true, mode: 0o700 });
+  fs.writeFileSync(SERVER_FILE, JSON.stringify({ url: ORIGIN, token: TOKEN, deckDir: START.dir, pid: process.pid, front: true }, null, 2), { mode: 0o600 });
+  fs.chmodSync(SERVER_FILE, 0o600);
+}
+function removeServerInfo() {
+  try { if (JSON.parse(fs.readFileSync(SERVER_FILE, "utf8")).token === TOKEN) fs.rmSync(SERVER_FILE, { force: true }); } catch {}
+}
+let listening = false;
+server.on("error", (e) => {
+  if (listening) return console.error(e);
+  console.error(e.code === "EADDRINUSE"
+    ? `Port ${PORT} is in use (another PinDeck, or an SSH tunnel?). Choose another with --port, the same on both ends of a tunnel.`
+    : `Cannot listen on 127.0.0.1:${PORT}: ${e.message}`);
+  process.exit(1);
+});
+server.listen(PORT, "127.0.0.1", async () => {
+  listening = true;
+  PORT = server.address().port;
+  ORIGIN = `http://127.0.0.1:${PORT}`;
+  if (!chooser) {
+    try { await openDeck({ key: START.key, dir: START.dir, file: START.file }, true); }
+    catch (e) {
+      console.error(e.message.replace(/\n+$/, ""));
+      process.exit(e.exitCode);   // 2 for a bad argument, as the deck server says
+    }
+  }
+  writeServerInfo();
+  console.log(`PinDeck: ${loginUrl(loginCode(3600000))}`);
+  console.log("  (a one-time login link, valid for an hour; for a new one: pindeck login)");
+  console.log(chooser ? `Decks: ${START.dir}` : `Deck: ${START.dir}`);
+  console.log(`Server: ${CAPS.label}`);
+  for (const [name, c] of Object.entries(publicCapabilities(CAPS)))
+    if (c && c.available === false) console.log(`  ${name}: off (${c.reason})`);
+});
+
+/* Ctrl+C or SIGTERM: every deck ends as it does on its own (its assistant gets end of input; at most 6 s),
+   then the front. A second Ctrl+C ends them at once. */
+async function quit() {
+  if (quitting) {
+    for (const d of decks.values()) try { process.kill(-d.proc.pid, "SIGKILL"); } catch {}
+    process.exit(1);
+  }
+  quitting = true;
+  server.close();
+  server.closeAllConnections?.();
+  removeServerInfo();
+  const all = [...decks.values()];
+  all.forEach(stopDeck);
+  await Promise.race([Promise.all(all.map((d) => d.exited)), new Promise((r) => setTimeout(r, 7000))]);
+  for (const d of all) if (d.proc.exitCode === null && d.proc.signalCode === null) try { process.kill(-d.proc.pid, "SIGKILL"); } catch {}
+  process.exit(0);
+}
+process.on("SIGINT", quit);
+process.on("SIGTERM", quit);

package/lib/deck-list.mjs

@@ -0,0 +1,49 @@
+/* The decks the front offers in the editor's deck menu: .html files in the start folder and the asset roots,
+   and in their folders one level down. Reading only: a deck gets its element ids (and PinDeck writes its
+   state) only once it is opened. A file PinDeck cannot open is listed with the reason, as at start-up. */
+
+import fs from "node:fs";
+import path from "node:path";
+import { deckTarget } from "./deck-target.mjs";
+import { unsupportedMessage } from "./frameworks.mjs";
+
+const SKIP = new Set(["node_modules", "export"]);   // dependencies, and PinDeck's own PDF exports
+const MAX_FILES = 300;
+const MAX_BYTES = 5 * 1024 * 1024;
+
+const htmlFiles = (dir) => {
+  try {
+    return fs.readdirSync(dir, { withFileTypes: true })
+      .filter((e) => e.isFile() && /\.html?$/i.test(e.name) && !e.name.startsWith(".")).map((e) => e.name).sort();
+  } catch { return []; }
+};
+const subfolders = (dir) => {
+  try {
+    return fs.readdirSync(dir, { withFileTypes: true })
+      .filter((e) => e.isDirectory() && !e.name.startsWith(".") && !SKIP.has(e.name)).map((e) => e.name).sort();
+  } catch { return []; }
+};
+
+/* [{ key, dir, file, rel, root, problem }]: rel is the path shown in the menu, relative to its root;
+   problem is null for a deck PinDeck can open. A file under several roots is listed once, under the first. */
+export function listDecks(roots) {
+  const out = [], seen = new Set();
+  for (const root of roots) {
+    for (const dir of [root, ...subfolders(root).map((d) => path.join(root, d))]) {
+      for (const file of htmlFiles(dir)) {
+        const abs = path.join(dir, file);
+        if (seen.has(abs) || out.length >= MAX_FILES) continue;
+        seen.add(abs);
+        let problem = null;
+        try {
+          const size = fs.statSync(abs).size;
+          problem = size > MAX_BYTES ? `${file} is larger than 5 MB, too large for a deck.`
+            : unsupportedMessage(fs.readFileSync(abs, "utf8"), file)?.replace(/ Nothing was changed\.$/, "") || null;
+        } catch (e) { problem = `${file} cannot be read (${e.code || e.message}).`; }
+        const t = deckTarget(file === "index.html" ? dir : abs);
+        out.push({ key: t.key, dir, file, rel: path.relative(root, abs).split(path.sep).join("/"), root, problem });
+      }
+    }
+  }
+  return out;
+}

package/lib/deck-target.mjs

@@ -0,0 +1,25 @@
+/* Which deck a path names, and where PinDeck keeps that deck's state: shared by the front (pindeck), which
+   lists decks and addresses them as /d/<key>/, and the deck server, which keeps its chat and undo there. */
+
+import os from "node:os";
+import path from "node:path";
+import fs from "node:fs";
+import crypto from "node:crypto";
+
+export const homeDir = (env = process.env) => env.PINDECK_HOME || path.join(os.homedir(), ".pindeck-v3");
+
+/* A file (talk.html), or a folder, which means its index.html. A path ending in .html or .htm that is
+   not a folder is a file, so a missing file gets a clear message. */
+export function deckTarget(target) {
+  const abs = path.resolve(target);
+  const isFolder = (() => { try { return fs.statSync(abs).isDirectory(); } catch { return false; } })();
+  const dir = isFolder || !/\.html?$/i.test(abs) ? abs : path.dirname(abs);
+  const file = dir === abs ? "index.html" : path.basename(abs);
+  const named = file !== "index.html";   // a deck file with its own name; several can share a folder
+  const name = named ? file.replace(/\.html?$/i, "") : path.basename(dir);   // for exports and titles
+  /* State per deck file. A folder's index.html keeps the key it always had, so existing chats and undo
+     histories stay; a named file gets its own, so two decks in one folder never share chat or undo. */
+  const key = (named ? `${path.basename(dir)}-${name}` : path.basename(dir)).replace(/[^\w.-]+/g, "_") + "-" +
+    crypto.createHash("sha1").update(named ? path.join(dir, file) : dir).digest("hex").slice(0, 8);
+  return { dir, file, named, name, key };
+}

package/lib/login.mjs

@@ -0,0 +1,61 @@
+/* Who may read the editor, the deck and the API: shared by the front (pindeck) and each deck server.
+
+   The token never appears in a page or on a command line, where other users of a shared server could read
+   it (ps, curl). A browser logs in once with a one-time code (printed at start, or by `pindeck login`) and
+   then holds the token in an HttpOnly cookie; the CLI, Claude and the front send it in a header. Browsers
+   share cookies across all ports of a host, so the cookie name carries the server's port. */
+
+import crypto from "node:crypto";
+
+/* Pages opened as 127.0.0.1 or localhost only, on any port: an SSH tunnel may use another local port.
+   Another site's name pointed at 127.0.0.1 (DNS rebinding) must not read the editor page, its token or the deck. */
+export const goodHost = (h) => /^(127\.0\.0\.1|localhost)(:\d{1,5})?$/.test(h);
+
+export const LOGIN_PAGE = `<!doctype html><meta charset="utf-8"><title>PinDeck</title>
+<body style="font:16px system-ui,sans-serif;max-width:36em;margin:4em auto;padding:0 1em">
+<h1>Log in to PinDeck</h1><p>Open the login link that PinDeck printed when it started. Links work once;
+for a new one, run <code>pindeck login</code> in the deck folder (or <code>node front.mjs login</code> in a
+PinDeck checkout).</p>`;
+
+export function cookie(req, name) {
+  for (const part of String(req.headers.cookie || "").split(";")) {
+    const i = part.indexOf("=");
+    if (i > 0 && part.slice(0, i).trim() === name) return part.slice(i + 1).trim();
+  }
+  return null;
+}
+
+/* port() and origin() are read on use: --port 0 learns the port only once listening */
+export function createLogin({ token, port, origin }) {
+  const loginCodes = new Map();   // code -> expiry (ms)
+  function loginCode(ttl) {
+    const now = Date.now();
+    for (const [c, exp] of loginCodes) if (exp < now) loginCodes.delete(c);
+    const code = crypto.randomBytes(16).toString("hex");
+    loginCodes.set(code, now + ttl);
+    return code;
+  }
+  const loginUrl = (code, next = "/") => `${origin()}/login?` + new URLSearchParams({ code, ...(next !== "/" ? { next } : {}) });
+  const cookieName = () => `pindeck-${port()}`;
+  const sameSecret = (a) => typeof a === "string" && a.length === token.length &&
+    crypto.timingSafeEqual(Buffer.from(a), Buffer.from(token));
+  const authed = (req) => sameSecret(req.headers["x-editor-token"]) || sameSecret(cookie(req, cookieName()));
+  /* A one-time code: set the cookie, then go on with a same-origin navigation (a redirect from a cross-site
+     start, such as a file:// page or a link in a terminal, would not carry a SameSite=Strict cookie). */
+  function login(res, url) {
+    const code = url.searchParams.get("code") || "";
+    const exp = loginCodes.get(code);
+    loginCodes.delete(code);
+    if (!exp || exp < Date.now()) {
+      res.writeHead(403, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+      return res.end(LOGIN_PAGE.replace("<p>", "<p>This login link has expired or was used already. "));
+    }
+    let next = url.searchParams.get("next") || "/";
+    if (!next.startsWith("/") || next.startsWith("//") || next.includes("\\")) next = "/";
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store",
+      "set-cookie": `${cookieName()}=${token}; HttpOnly; SameSite=Strict; Path=/` });
+    const to = JSON.stringify(next).replace(/</g, "\\u003c");
+    res.end(`<!doctype html><meta charset="utf-8"><title>PinDeck</title><script>location.replace(${to})</script>`);
+  }
+  return { loginCode, loginUrl, cookieName, authed, login };
+}

package/lib/usage.mjs

@@ -0,0 +1,15 @@
+/* pindeck --help, and the hint after a bad argument: the front (front.mjs) and a deck server (server.mjs)
+   take the same arguments. */
+export const USAGE = `Usage: pindeck [deck-folder | deck-file.html] [--port 5180] [--provider claude|codex] [--model <name>] [--asset-root <folder>]...
+       pindeck login [deck-folder | deck-file.html]
+
+Opens a reveal.js deck in PinDeck: a deck file such as talk.html, or a folder (default: the current
+folder), which then opens its index.html; a folder without one opens a list of its decks. A deck made
+otherwise names its slides in its <head> with <meta name="pindeck:slides" content="<CSS selector>"> and
+<meta name="pindeck:size" content="1440x1080">.
+In the editor, the deck's name opens the other decks in the deck's folder and the asset roots (and one
+folder down), each with its own chat and undo, on the same port and login.
+login prints a new one-time login link for the running PinDeck (with a deck: one that opens that deck).
+--asset-root lets the deck use files outside its folder: a folder that contains the deck (paths such as
+../shared/style.css then work), or one that symlinks in the deck may point to. Repeatable; also
+"assetRoots" in ~/.pindeck-v3/config.json.`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pindeck",
-  "version": "3.0.0-beta.3",
+  "version": "3.1.0-beta.1",
   "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 or OpenAI Codex edits the slides.",
   "keywords": [
     "slides",
@@ -23,9 +23,10 @@
   "bugs": "https://github.com/ehabets/PinDeck/issues",
   "type": "module",
   "bin": {
-    "pindeck": "server.mjs"
+    "pindeck": "front.mjs"
   },
   "files": [
+    "front.mjs",
     "server.mjs",
     "cli.mjs",
     "lib/",
@@ -34,7 +35,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "start": "node server.mjs",
+    "start": "node front.mjs",
     "test": "node --test"
   },
   "os": [

package/public/editor.css

@@ -59,12 +59,28 @@ code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background:
   min-height: 44px; padding: 5px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
 .toolbar .group { display: flex; align-items: center; gap: 6px; min-width: 0; flex: none; }
 .toolbar .group:first-child { flex: 1 1 auto; }
-.toolbar .group:first-child > :not(.deck-name) { flex: none; }
+.toolbar .group:first-child > :not(.deck-wrap) { flex: none; }
 @container (max-width: 640px) {
-  .toolbar kbd, .toolbar .deck-name { display: none; }
+  .toolbar kbd, .toolbar .deck-wrap { display: none; }
 }
 .pos { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 52px; text-align: center; }
-.deck-name { min-width: 0; margin-left: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* the deck's name; behind the front (several decks on one port) it opens the deck menu */
+.deck-wrap { min-width: 0; margin-left: 2px; }
+.deck-btn { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 2px 6px;
+  border: 0; background: none; color: inherit; font: inherit; }
+.deck-btn:hover { background: none; }
+.deck-btn:disabled { opacity: 1; cursor: default; }
+.deck-btn:not(:disabled):hover, .deck-btn[aria-expanded="true"] { background: var(--bg); }
+.deck-btn .caret { color: var(--muted); font-size: 11px; }
+.deck-name, #deck-name { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.menu.deck-menu { width: min(360px, 90vw); max-height: min(520px, 70vh); overflow-y: auto; }
+.deck-menu a.opt { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 7px; color: inherit; text-decoration: none; }
+.deck-menu a.opt:hover, .deck-menu a.opt:focus-visible { background: var(--bg); }
+.deck-menu .opt b { font-weight: 500; overflow-wrap: anywhere; }
+.deck-menu .opt .d { margin-left: auto; color: var(--muted); font-size: 12px; flex: none; }
+.deck-menu button.opt { align-items: flex-start; }
+.deck-menu button.opt span.why { display: block; font-size: 12px; }
+.deck-menu .menu-note { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
 .server-note { flex: none; margin-left: 8px; padding: 1px 6px; border-radius: 4px; font-size: 12px; color: #6b4a12; background: #fbf0dc; cursor: help; }
 .toggle { display: inline-flex; align-items: center; gap: 6px; }
 .toggle .dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff;
@@ -202,6 +218,10 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
   border-radius: 12px; padding: 1px 4px 1px 2px; font-size: 12px; margin: 0 4px 4px 0; cursor: pointer; }
 .chip .n { width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700;
   font-size: 11px; line-height: 18px; text-align: center; }
+.shot-chip { font: inherit; color: inherit; }
+.shot-chip img { height: 18px; aspect-ratio: 16 / 9; border-radius: 3px; object-fit: cover; background: var(--line); }
+.shot-chip.gone { color: var(--muted); cursor: default; padding: 1px 6px; }
+.msg.tool .shot-chip { margin: 0; vertical-align: middle; }
 .chip .x { border: 0; background: none; padding: 0 2px; color: var(--muted); font-size: 14px; line-height: 1; }
 .chip .x:hover { color: var(--danger); }
 .chip .lock { color: var(--muted); }
@@ -270,6 +290,7 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
 .diff-dialog::backdrop { background: rgba(20,22,25,.35); }
 .dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
   border-bottom: 1px solid var(--line); font-weight: 600; }
+.shot-dialog img { display: block; max-width: 100%; max-height: calc(86vh - 50px); margin: 0 auto; }
 .diff { margin: 0; padding: 10px 0; overflow: auto; max-height: calc(86vh - 50px); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .diff span { display: block; padding: 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
 .diff .a { background: #e9f6ee; }

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");
@@ -83,7 +88,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();
@@ -297,7 +302,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 +371,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 +470,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 +523,7 @@ $("export-menu").addEventListener("click", async (e) => {
 });
 
 $("present").onclick = () => {
-  window.open(`/deck/${main?.bridge.presentHash(state.current) || ""}`, "_blank");
+  window.open(`${BASE}deck/${main?.bridge.presentHash(state.current) || ""}`, "_blank");
 };
 
 /* ---- Pins --------------------------------------------------------------------------------------- */
@@ -571,17 +601,21 @@ 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>`;
 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>
@@ -629,7 +663,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 +701,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;
@@ -747,7 +800,7 @@ function applyStatus(s) {
     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`;
   }
@@ -792,7 +845,7 @@ function applyStatus(s) {
   renderToolbar();
 }
 function connect() {
-  const es = new EventSource("/api/events");
+  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
@@ -868,7 +921,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 +934,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 +978,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 +996,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();
 });
 
@@ -1090,7 +1143,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 +1231,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>`;

package/public/front.css

@@ -0,0 +1,14 @@
+/* The front's own pages: the list of decks (a folder without index.html) and why a deck cannot be opened */
+body { margin: 0; background: #f6f6f4; color: #1d1f22; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.front { max-width: 44em; margin: 3em auto; padding: 0 16px; }
+.front h1 { font-size: 22px; margin: 0 0 .8em; }
+.front h2 { font-size: 12px; font-weight: 600; color: #6b6f76; margin: 1.6em 0 .4em; overflow-wrap: anywhere; }
+.front ul { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e3df; border-radius: 10px; background: #fff; }
+.front li { padding: 9px 14px; border-top: 1px solid #ececea; }
+.front li:first-child { border-top: 0; }
+.front li a { color: #1d1f22; font-weight: 500; text-decoration: none; }
+.front li a:hover { color: #e8710a; }
+.front li small { color: #6b6f76; margin-left: 6px; }
+.front li.off { color: #8a8e94; }
+.front li.off small { display: block; margin: 2px 0 0; font-size: 12px; }
+.front pre { white-space: pre-wrap; background: #fff; border: 1px solid #e3e3df; border-radius: 8px; padding: 10px 12px; font-size: 13px; }

package/public/index.html

@@ -35,7 +35,10 @@
         <button id="prev" class="icon" title="Previous slide (←)" aria-label="Previous slide">‹</button>
         <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 class="menu-wrap deck-wrap">
+          <button id="deck-btn" class="deck-btn" aria-haspopup="menu" aria-expanded="false" disabled><span id="deck-name"></span><span class="caret" hidden>▾</span></button>
+          <div id="deck-menu" class="menu left deck-menu" role="menu" hidden></div>
+        </span>
         <span id="server-note" class="server-note" hidden></span>
       </div>
       <div class="group">
@@ -172,6 +175,11 @@
   </form>
 </dialog>
 
+<dialog id="shot-dialog" class="diff-dialog shot-dialog">
+  <div class="dialog-head"><span id="shot-title">Screenshot</span><button class="small" id="shot-close">Close</button></div>
+  <img id="shot-img" alt="Screenshot">
+</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

@@ -39,19 +39,14 @@ import { isSupportedPlatform, detectCapabilities, publicCapabilities, capability
 import { unsupportedMessage } from "./lib/frameworks.mjs";
 import { readInstructions } from "./lib/instructions.mjs";
 import { writeAtomic, sameContent, revision, scanFiles, scanChanges } from "./lib/deck-files.mjs";
+import { deckTarget, homeDir } from "./lib/deck-target.mjs";
+import { goodHost, LOGIN_PAGE, createLogin } from "./lib/login.mjs";
+import { USAGE } from "./lib/usage.mjs";
 
 /* ---- Config ------------------------------------------------------------------ */
-const USAGE = `Usage: pindeck [deck-folder | deck-file.html] [--port 5180] [--provider claude|codex] [--model <name>] [--asset-root <folder>]...
-       pindeck login [deck-folder | deck-file.html]
-
-Opens a reveal.js deck in PinDeck: a deck file such as talk.html, or a folder (default: the current
-folder), which then opens its index.html. A deck made otherwise names its slides in its <head> with
-<meta name="pindeck:slides" content="<CSS selector>"> and <meta name="pindeck:size" content="1440x1080">.
-login prints a new one-time login link for the PinDeck running for that deck
-(without a deck: for the PinDeck started last).
---asset-root lets the deck use files outside its folder: a folder that contains the deck (paths such as
-../shared/style.css then work), or one that symlinks in the deck may point to. Repeatable; also
-"assetRoots" in ~/.pindeck-v3/config.json.`;
+/* Started by the front (pindeck, front.mjs) for one of the decks it serves: the front logs browsers in,
+   prints the links and owns ~/.pindeck-v3/server.json; this server tells it its address over IPC. */
+const FRONT = !!process.env.PINDECK_FRONT && !!process.send;
 const EDITOR_DIR = path.dirname(fileURLToPath(import.meta.url));
 const argv = process.argv.slice(2);
 if (argv.includes("--help") || argv.includes("-h")) { console.log(USAGE); process.exit(0); }
@@ -70,23 +65,14 @@ const LOGIN = argv[0] === "login";
 if (LOGIN) argv.shift();
 const PROVIDER = opt("--provider", "");
 const MODEL = opt("--model", "");
-/* The deck: a file (talk.html), or a folder, which means its index.html. A path ending in .html or .htm
-   that is not a folder is a file, so a missing file gets a clear message. */
-const TARGET = path.resolve(argv[0] || process.cwd());
-const isFolder = (() => { try { return fs.statSync(TARGET).isDirectory(); } catch { return false; } })();
-const DECK_DIR = isFolder || !/\.html?$/i.test(TARGET) ? TARGET : path.dirname(TARGET);
-const DECK_FILE = DECK_DIR === TARGET ? "index.html" : path.basename(TARGET);
-const NAMED = DECK_FILE !== "index.html";             // a deck file with its own name; several can share a folder
-const DECK_NAME = NAMED ? DECK_FILE.replace(/\.html?$/i, "") : path.basename(DECK_DIR);   // for exports and titles
+/* The deck: a file (talk.html), or a folder, which means its index.html (see lib/deck-target.mjs) */
+const { dir: DECK_DIR, file: DECK_FILE, named: NAMED, name: DECK_NAME, key: deckKey } = deckTarget(argv[0] || process.cwd());
 const EDITABLE = [DECK_FILE, "theme.css"];         // both backends may edit these
 const LOCKED = ["brand.css"];                      // never, enforced twice
-const HOME_DIR = process.env.PINDECK_HOME || path.join(os.homedir(), ".pindeck-v3");
-/* State per deck file. A folder's index.html keeps the key it always had, so existing chats and undo
-   histories stay; a named file gets its own, so two decks in one folder never share chat or undo. */
-const deckKey = (NAMED ? `${path.basename(DECK_DIR)}-${DECK_NAME}` : path.basename(DECK_DIR)).replace(/[^\w.-]+/g, "_") + "-" +
-  crypto.createHash("sha1").update(NAMED ? path.join(DECK_DIR, DECK_FILE) : DECK_DIR).digest("hex").slice(0, 8);
+const HOME_DIR = homeDir();
 const STATE_DIR = path.join(HOME_DIR, "decks", deckKey);
 const SHOT_DIR = path.join(STATE_DIR, "shots");
+const SHOT_NAME = /^[\w-][\w.-]*\.png$/;   // a file name in SHOT_DIR, as the editor may ask for it
 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) */
@@ -136,7 +122,9 @@ if (frameworkProblem) {
 }
 /* Runtime files hold the token, the chat and attachments: private to the user. Written only after the
    port is bound (see Start), so a failed start leaves no state behind. */
-const SERVER_FILES = [path.join(STATE_DIR, "server.json"), path.join(HOME_DIR, "server.json")];   // the second: the CLI's fallback
+// the second: the CLI's fallback. Behind the front none: its own server.json leads pindeck login to the front
+// (a deck server's port is no use to a browser behind a tunnel), and the assistant's CLI gets this server's address.
+const SERVER_FILES = FRONT ? [] : [path.join(STATE_DIR, "server.json"), path.join(HOME_DIR, "server.json")];
 function writeServerInfo() {
   for (const d of [HOME_DIR, STATE_DIR, SHOT_DIR]) fs.mkdirSync(d, { recursive: true, mode: 0o700 });
   const info = JSON.stringify({ url: ORIGIN, token: TOKEN, deckDir: DECK_DIR, pid: process.pid }, null, 2);
@@ -400,7 +388,7 @@ function exportPdf(kind, includeHidden = false) {
     try { await printPdf(CHROME, chromeStart(printProfile, `${ORIGIN}${DECK_BASE}__pindeck-print-${id}.html`), out, printProfile); }
     finally { snapshots.delete(id); }
     return { kind: split ? "presentation" : "handout", path: out, rel: path.relative(DECK_DIR, out),
-      url: `/deck/export/${encodeURIComponent(name)}`, bytes: fs.statSync(out).size };
+      url: `deck/export/${encodeURIComponent(name)}`, bytes: fs.statSync(out).size };
   };
   const job = exportQueue.then(run, run);
   exportQueue = job.catch(() => {});
@@ -666,11 +654,13 @@ function toolSummary(name, input = {}) {
     const r = path.relative(DECK_DIR, p);
     return !r || r.startsWith("..") ? path.basename(p) : r;
   };
+  // a picture in the screenshots folder: the chat shows it
+  const shotOf = (p) => (p && realOr(path.dirname(path.resolve(p))) === realOr(SHOT_DIR) && SHOT_NAME.test(path.basename(p)) ? { shot: path.basename(p) } : {});
   switch (name) {
-    case "pindeck_read": return { name: "Read", detail: base(input.path) };
+    case "pindeck_read": return { name: "Read", detail: base(input.path), ...shotOf(input.path) };
     case "pindeck_edit": case "pindeck_write": return { name: "Edit", detail: base(input.path) };
     case "pindeck_command": return { name: input.command || "Command", detail: (input.args || []).join(" ") };
-    case "Read": return { name: "Read", detail: base(input.file_path) };
+    case "Read": return { name: "Read", detail: base(input.file_path), ...shotOf(input.file_path) };
     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`
@@ -1161,57 +1151,9 @@ async function refineImport(imp, pdf, plans, eids, first) {
 
 /* ---- HTTP ------------------------------------------------------------------------------------- */
 const BRIDGE_TAG = `<script src="/editor/bridge.js"></script>\n</body>`;
-/* Pages opened as 127.0.0.1 or localhost only, on any port: an SSH tunnel may use another local port.
-   Another site's name pointed at 127.0.0.1 (DNS rebinding) must not read the editor page, its token or the deck. */
-const goodHost = (h) => /^(127\.0\.0\.1|localhost)(:\d{1,5})?$/.test(h);
-
-/* Who may read the editor, the deck and the API. The token never appears in a page or on a command line,
-   where other users of a shared server could read it (ps, curl). A browser logs in once with a one-time
-   code (printed at start, or by `pindeck login`) and then holds the token in an HttpOnly cookie; the CLI
-   and Claude send it in a header. Browsers share cookies across all ports of a host, so the cookie name
-   carries this server's port. */
-const loginCodes = new Map();   // code -> expiry (ms)
-function loginCode(ttl) {
-  const now = Date.now();
-  for (const [c, exp] of loginCodes) if (exp < now) loginCodes.delete(c);
-  const code = crypto.randomBytes(16).toString("hex");
-  loginCodes.set(code, now + ttl);
-  return code;
-}
-const loginUrl = (code, next = "/") => `${ORIGIN}/login?` + new URLSearchParams({ code, ...(next !== "/" ? { next } : {}) });
-const cookieName = () => `pindeck-${PORT}`;
-const sameSecret = (a) => typeof a === "string" && a.length === TOKEN.length &&
-  crypto.timingSafeEqual(Buffer.from(a), Buffer.from(TOKEN));
-function cookie(req, name) {
-  for (const part of String(req.headers.cookie || "").split(";")) {
-    const i = part.indexOf("=");
-    if (i > 0 && part.slice(0, i).trim() === name) return part.slice(i + 1).trim();
-  }
-  return null;
-}
-const authed = (req) => sameSecret(req.headers["x-editor-token"]) || sameSecret(cookie(req, cookieName()));
-const LOGIN_PAGE = `<!doctype html><meta charset="utf-8"><title>PinDeck</title>
-<body style="font:16px system-ui,sans-serif;max-width:36em;margin:4em auto;padding:0 1em">
-<h1>Log in to PinDeck</h1><p>Open the login link that PinDeck printed when it started. Links work once;
-for a new one, run <code>pindeck login</code> in the deck folder (or <code>node server.mjs login</code> in a
-PinDeck checkout).</p>`;
-/* A one-time code: set the cookie, then go on with a same-origin navigation (a redirect from a cross-site
-   start, such as a file:// page or a link in a terminal, would not carry a SameSite=Strict cookie). */
-function login(res, url) {
-  const code = url.searchParams.get("code") || "";
-  const exp = loginCodes.get(code);
-  loginCodes.delete(code);
-  if (!exp || exp < Date.now()) {
-    res.writeHead(403, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
-    return res.end(LOGIN_PAGE.replace("<p>", "<p>This login link has expired or was used already. "));
-  }
-  let next = url.searchParams.get("next") || "/";
-  if (!next.startsWith("/") || next.startsWith("//") || next.includes("\\")) next = "/";
-  res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store",
-    "set-cookie": `${cookieName()}=${TOKEN}; HttpOnly; SameSite=Strict; Path=/` });
-  const to = JSON.stringify(next).replace(/</g, "\\u003c");
-  res.end(`<!doctype html><meta charset="utf-8"><title>PinDeck</title><script>location.replace(${to})</script>`);
-}
+/* Who may read the editor, the deck and the API: see lib/login.mjs. Behind the front, browsers log in
+   there, and the front sends this server's token in a header. */
+const { loginCode, loginUrl, authed, login } = createLogin({ token: TOKEN, port: () => PORT, origin: () => ORIGIN });
 /* Headless Chrome gets a start page in its own profile folder (0700) instead of a URL with a secret on
    its command line: the page sends it to a one-time login code, which leads on to the target. */
 function chromeStart(profile, target) {
@@ -1285,9 +1227,10 @@ const server = http.createServer(async (req, res) => {
       return res.end(html);
     }
     // /deck/: the deck folder; /deck/ alone is the deck page. With an asset root the page lives under
-    // /files/, so that ../ paths reach the root: /deck/ alone redirects there.
+    // /files/, so that ../ paths reach the root: /deck/ alone redirects there (a relative redirect, which
+    // stays under the front's /d/<deck>/).
     if (req.method === "GET" && p === "/deck/" && SERVE_ROOT) {
-      res.writeHead(302, { location: DECK_PAGE + url.search, "cache-control": "no-store" });
+      res.writeHead(302, { location: ".." + DECK_PAGE + url.search, "cache-control": "no-store" });
       return res.end();
     }
     const deckPath = req.method === "GET" && (p.startsWith("/deck/") ? servable(DECK_DIR, p.slice(6) || DECK_FILE)
@@ -1309,6 +1252,17 @@ const server = http.createServer(async (req, res) => {
       });
     }
 
+    // /shots/: a screenshot for the chat, a PNG directly in the screenshots folder (no subfolder, no symlink out)
+    if (req.method === "GET" && p.startsWith("/shots/")) {
+      if (!ok) return text(res, 403, "Not logged in");
+      const name = decodeURIComponent(p.slice(7));
+      if (!SHOT_NAME.test(name)) return text(res, 403, "Forbidden");
+      const f = path.join(SHOT_DIR, name);
+      let real;
+      try { real = fs.realpathSync(f); } catch { return text(res, 404, "Not found"); }
+      return path.dirname(real) === realOr(SHOT_DIR) ? serveFile(res, f, null, req) : text(res, 403, "Forbidden");
+    }
+
     // API: token required (header or login cookie); POSTs must come from the editor page itself
     if (!p.startsWith("/api/")) return text(res, 404, "Not found");
     if (!ok) return text(res, 403, "Bad token");
@@ -1365,7 +1319,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,
+        const entry = addEntry({ kind: "user", text: b.text,
+          screenshot: screenshot && { file: path.basename(screenshot.path), slide: screenshot.slide },
           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 })) });
@@ -1398,7 +1353,7 @@ const server = http.createServer(async (req, res) => {
       const rel = attachPath(original);
       writeDeckFile(rel, buf);
       state.uploads.add(rel);
-      return json(res, 200, { path: rel, kind, bytes: buf.length, url: `/deck/${rel}` });
+      return json(res, 200, { path: rel, kind, bytes: buf.length, url: `deck/${rel}` });
     }
     if (p === "/api/upload-remove" && req.method === "POST") {
       const b = await body(req);
@@ -1727,12 +1682,18 @@ server.listen(PORT, "127.0.0.1", () => {
     process.exit(1);
   }
   ready = true;
-  console.log(`PinDeck: ${loginUrl(loginCode(3600000))}`);
-  console.log("  (a one-time login link, valid for an hour; for a new one: pindeck login)");
-  console.log(`Deck: ${DECK_DIR}`);
-  console.log(`Server: ${CAPS.label}`);
-  for (const [name, c] of Object.entries(publicCapabilities(CAPS)))
-    if (c && c.available === false) console.log(`  ${name}: off (${c.reason})`);
+  if (FRONT) {
+    // the front prints the login link and the capabilities; it ends this server when it goes, even killed
+    process.send({ ready: { url: ORIGIN, token: TOKEN } });
+    process.on("disconnect", () => { if (!quitting) quit(); });   // a second quit() would exit at once
+  } else {
+    console.log(`PinDeck: ${loginUrl(loginCode(3600000))}`);
+    console.log("  (a one-time login link, valid for an hour; for a new one: pindeck login)");
+    console.log(`Deck: ${DECK_DIR}`);
+    console.log(`Server: ${CAPS.label}`);
+    for (const [name, c] of Object.entries(publicCapabilities(CAPS)))
+      if (c && c.available === false) console.log(`  ${name}: off (${c.reason})`);
+  }
   discoverModels().then(() => {
     if (!settings.model) {
       const models = catalog[settings.provider].models;