pindeck 3.3.0 → 3.4.0

package/README.md

@@ -1,6 +1,6 @@
 # PinDeck
 
-> **macOS and Linux · Version 3** (`3.3.0`). On Linux, PinDeck runs as a headless server that you use
+> **macOS and Linux · Version 3** (`3.4.0`). 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)).
 > Windows is not supported. Coming from PinDeck 2: version 3 keeps its settings and chats in
 > `~/.pindeck-v3`, apart from 2.x (see [Models, providers and configuration](#models-providers-and-configuration)).
@@ -328,7 +328,7 @@ ssh -N -T -o ExitOnForwardFailure=yes -o ServerAliveInterval=30 -o ServerAliveCo
 
 Open the login link PinDeck printed on the server in the Mac's browser. The local port may differ from
 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
+port, as long as the address is `127.0.0.1`: `localhost` is where decks are presented, and nobody logs in there. 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 front.mjs login
 path/to/deck` on the server for a new link.
@@ -391,7 +391,7 @@ show and commit as usual. Clones without the filter configured simply see the fi
 | Stop | **Stop** interrupts the assistant; the conversation continues. **New chat** starts a new conversation; your slides, Undo and Redo stay as they are. |
 | 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; a new content slide or divider opens its title for typing. |
 | Import from PowerPoint | **＋ New slide** → **Import from PowerPoint…**, then choose a `.pptx` file and tick the slides you want (hidden PowerPoint slides start unticked). They are added after the current slide in this deck's own layouts, and the assistant can improve the complex ones; see [PowerPoint import](#powerpoint-import). `⌘Z` removes them again, with their figures. |
-| Speaker notes | The **Notes** field under the slide shows the current slide's notes (the speaker view, `S`, shows them when presenting). Type to change them; they are saved when you click elsewhere or press `⌘Enter`, and `Esc` puts back what was there. A slide without notes gets them; emptying the field removes them. Notes with formatting other than line breaks are edited as HTML. Drag the line above the notes to give them more or less room (double-click it for the default size); collapse them with their header. |
+| Speaker notes | The **Notes** field under the slide shows the current slide's notes (the speaker view, `S`, shows them when presenting). Type to change them; they are saved when you click elsewhere or press `⌘Enter`, and `Esc` puts back what was there. A slide without notes gets them; emptying the field removes them. Notes show their formatting: `⌘B`, `⌘I` and `⌘U` format the selection, `Enter` starts a new line, and pasted text comes in plain. Notes with markup the field cannot show safely (other tags, styles, scripts) are edited as HTML. Drag the line above the notes to give them more or less room (double-click it for the default size); collapse them with their header. |
 | Move a slide | Drag it up or down in the slide list; an orange line shows where it will go. It moves with its notes and the comment above it, and `⌘Z` puts it back. Slides inside vertical stacks cannot be moved yet. |
 | Hide a slide | The eye on a slide in the list, or `H`. A hidden slide stays in the deck and in PinDeck (greyed out, with a banner) but is skipped when presenting and in PDFs; **Export ▾** can include hidden slides. Show it the same way. |
 | Model and effort | Choose a discovered Claude or OpenAI model in the chat header, then use the separate reasoning-effort selector. Provider changes offer an optional handover; same-provider changes continue the conversation. The choice is saved in `~/.pindeck-v3/config.json`. |
@@ -457,10 +457,13 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
   only six connections to one port; if a deck server stops, the front opens the deck again and the tab
   catches up. Each PinDeck process notes its address in `~/.pindeck-v3/servers/` for `pindeck login` and
   `cli.mjs`, and a deck server holds its deck's `open.json`, so a deck opens in one PinDeck only.
-* **Deck pages are sandboxed.** The deck page (in the editor's frames, and in Present) runs with a sandbox
-  policy in an origin of its own, at a per-run address that serves the deck's files and nothing else. A
-  script in a deck, a template, or written by the assistant cannot reach the login cookie, the API, the
-  chat or other decks. The editor and its bridge in the slide frame talk by `postMessage`. Headless Chrome
+* **Deck pages are sandboxed.** The deck page in the editor's frames runs with a sandbox policy in an
+  origin of its own, at a per-run address that serves the deck's files and nothing else. A script in a
+  deck, a template, or written by the assistant cannot reach the login cookie, the API, the chat or other
+  decks. The editor and its bridge in the slide frame talk by `postMessage`. Present opens the same
+  address on `localhost` without the sandbox, so reveal.js's speaker view (`S`) works: browsers treat
+  `localhost` and `127.0.0.1` as different sites, PinDeck takes no login and no cookie there, and the tab is
+  opened without a handle on the editor. Headless Chrome
   (screenshots, layout, PDFs) does not log in at all; the page it asks for is served without the sandbox,
   which its screenshot and print modes cannot handle, only with a key made for that one run.
 * **Element ids.** On start, the server gives every slide and every visible element a readable
@@ -551,13 +554,22 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
 * 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.
-* A deck's own scripts run sandboxed in the editor and in Present: they cannot use `localStorage`, cookies
-  or the editor page. A deck that needs them for its slides to work should catch the error.
+* A deck's own scripts run sandboxed in the editor: they cannot use `localStorage`, cookies or the editor
+  page. A deck that needs them for its slides to work should catch the error. In Present they can, on
+  `localhost`, where every deck of one PinDeck shares the same `localStorage`.
 * Linux: 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)).
 
 ## Versions
 
+* **3.4.0**: formatted speaker notes, and the speaker view works.
+  - The Notes field shows the notes' formatting: `⌘B`, `⌘I` and `⌘U` format the selection, `Enter` starts
+    a new line, and pasted text comes in plain. Notes with markup the field cannot show safely are still
+    edited as HTML, and nothing in them is lost on save.
+  - Present opens the deck on localhost, so reveal.js's speaker view (`S`) shows the notes and the next slide.
+  - Claude runs PinDeck's commands by this server's path when the deck's `CLAUDE.md` names another
+    (such as `node ../pindeck/cli.mjs`), and a chat that used an old path is told the right one.
+
 * **3.3.0**: fixes from a code audit.
   - After a PowerPoint import, refining the slides no longer deletes pictures that the deck still uses
     (when the turn was stopped, failed or only changed `theme.css`); Undo brings removed pictures back.

package/front.mjs

@@ -150,7 +150,8 @@ setInterval(async () => {
    streamed back (event streams, media ranges and large uploads included) */
 function proxy(req, res, d, rest, anonymous = false) {
   d.last = Date.now();
-  const headers = { ...req.headers, host: new URL(d.url).host, ...(anonymous ? {} : { "x-editor-token": d.token }) };
+  // the deck's pages keep the browser's host: on localhost (Present) the deck server leaves out the sandbox
+  const headers = { ...req.headers, host: anonymous ? req.headers.host : new URL(d.url).host, ...(anonymous ? {} : { "x-editor-token": d.token }) };
   if (anonymous) delete headers["x-editor-token"];
   delete headers.cookie;
   delete headers.origin;   // checked here against the front's address; the deck server checks its own
@@ -287,7 +288,7 @@ const server = http.createServer(async (req, res) => {
   try {
     const url = new URL(req.url, ORIGIN);
     const p = url.pathname;
-    if (req.method === "GET" && p === "/login") return login(res, url);
+    if (req.method === "GET" && p === "/login") return login(res, url, host);
     // 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));
     /* A deck's pages and files under /d/<deck>/v/<token>/: asked for by the deck itself, which runs sandboxed

package/lib/capabilities.mjs

@@ -119,3 +119,16 @@ export function cliCommand(rel) {
   if (!/["$`\\!]/.test(rel)) return `node "${rel}"`;
   return `node '${rel.replaceAll("'", `'\\''`)}'`;
 }
+
+/* A deck's CLAUDE.md names the CLI by where PinDeck sat when it was written (`node ../cli.mjs`,
+   `node ../pindeck/cli.mjs`). Claude may run only this server's command, so every one outside the deck (../) becomes it. */
+export function useCliCommand(text, cmd) {
+  return text.replace(/node (?:\.\.\/)+(?:[\w.@-]+\/)*cli\.mjs\b/g, () => cmd);
+}
+
+/* Why a refused command was refused, when it is PinDeck's CLI under another path (one Claude saw earlier
+   in a resumed conversation, from where PinDeck sat then): the same command as it must be run. Else null. */
+export function cliRefusal(command, cmd) {
+  const fixed = useCliCommand(String(command ?? ""), cmd);
+  return fixed !== String(command ?? "") ? `Refused: PinDeck's command is \`${cmd}\` now. Run \`${fixed}\` instead.` : null;
+}

package/lib/claude.mjs

@@ -33,7 +33,7 @@ export class ClaudeSession {
       onMessage: ev => {
         if (this.transport !== transport) return;
         if (ev.type === 'control_request') { transport.write({ type: 'control_response', response: { subtype: 'success', request_id: ev.request_id,
-          response: { behavior: 'deny', message: 'This tool is outside PinDeck permissions.' } } }); return; }
+          response: { behavior: 'deny', message: this.denyMessage?.(ev.request) || 'This tool is outside PinDeck permissions.' } } }); return; }
         if (ev.session_id) this.sessionId = ev.session_id;
         this.onEvent?.(ev);
       },

package/lib/eids.mjs

@@ -122,7 +122,7 @@ export function parse(html) {
 const classesOf = (node) => (node.attrs.class?.value || "").split(/\s+/).filter(Boolean);
 
 const ENTITIES = { nbsp: " ", amp: "&", lt: "<", gt: ">", quot: '"', apos: "'" };
-function decode(s) {   // one pass, so "&amp;lt;" stays "&lt;"
+export function decode(s) {   // one pass, so "&amp;lt;" stays "&lt;"
   return s.replace(/&(?:(nbsp|amp|lt|gt|quot|apos)|#(\d+)|#x([0-9a-f]+));/gi, (m, name, d, x) =>
     name ? ENTITIES[name.toLowerCase()] : String.fromCodePoint(d ? +d : parseInt(x, 16)));
 }

package/lib/login.mjs

@@ -11,6 +11,10 @@ import { execFile } from "node:child_process";
 /* 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);
+/* localhost is where decks are presented, without the sandbox (reveal.js's speaker view needs a real origin):
+   no login there, and no cookie counts, so a deck's script on it gets nothing it could not already read.
+   Browsers treat localhost and 127.0.0.1 as different sites, so the login cookie of 127.0.0.1 never goes there. */
+export const presentHost = (h) => /^localhost(:\d{1,5})?$/.test(String(h || "").toLowerCase());
 
 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">
@@ -40,10 +44,15 @@ export function createLogin({ token, port, origin }) {
   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()));
+  const authed = (req) => sameSecret(req.headers["x-editor-token"]) ||
+    (!presentHost(req.headers.host) && 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) {
+  function login(res, url, host) {
+    if (presentHost(host)) {   // logins happen on 127.0.0.1 only: the same link there, its code still unused
+      res.writeHead(302, { location: `http://127.0.0.1${host.slice(9)}${url.pathname}${url.search}`, "cache-control": "no-store" });
+      return res.end();
+    }
     const code = url.searchParams.get("code") || "";
     const exp = loginCodes.get(code);
     loginCodes.delete(code);

package/lib/system-prompt.md

@@ -64,8 +64,8 @@ user asks for: facts, numbers and wording for slides, or a figure.
 - Never put the PDF itself on a slide or link it from the deck.
 
 ## Commands
-The only shell commands you can run here are the PinDeck commands below ({{CLI}} ...), each on
-its own: no scripts, heredocs, temporary files, loops, variables or `&&` chains, and no python, sips,
+The only shell commands you can run here are the PinDeck commands below ({{CLI}} ...), with exactly
+this path to cli.mjs even if another one appears earlier in the conversation, each on its own: no scripts, heredocs, temporary files, loops, variables or `&&` chains, and no python, sips,
 convert or ls. Such commands are refused (or need an approval nobody can give) and are not run. A
 refused command did nothing: do not retry it as it is, do it another way.
 - To change files, use Edit, even for large changes: several Edit calls in a row are fine.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pindeck",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "PinDeck: an editor for HTML slide decks on macOS, and on Linux through an SSH tunnel. Pin elements, describe the change, and Claude Code or OpenAI Codex edits the slides.",
   "keywords": [
     "slides",

package/public/editor.css

@@ -183,12 +183,15 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
 .notes-head:hover { background: var(--bg); border: 0; }
 .notes-head .caret { display: inline-block; transition: transform .15s; }
 .notes-panel.collapsed .caret { transform: rotate(-90deg); }
-.notes-panel.collapsed textarea { display: none; }
+.notes-panel.collapsed .notes-box { display: none; }
 .notes-status { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; }
-.notes-panel textarea { height: 96px; resize: none; border: 0; border-top: 1px solid var(--line);
+.notes-box { height: 96px; overflow-y: auto; box-sizing: border-box; border: 0; border-top: 1px solid var(--line);
   padding: 8px 14px; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--ink); background: var(--panel); outline: none; }
-.notes-panel textarea:focus { background: #fffcf6; }
-.notes-panel textarea[readonly] { color: var(--muted); }
+.notes-box:focus { background: #fffcf6; }
+.notes-box:empty::before { content: attr(data-placeholder); color: var(--muted); }
+.notes-box[contenteditable="false"] { color: var(--muted); }
+.notes-box[contenteditable="plaintext-only"] { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
+.notes-box p, .notes-box ul, .notes-box ol { margin: 0 0 .5em; }
 
 /* ---- Chat ---- */
 .chat-pane { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--panel); }

package/public/editor.js

@@ -365,16 +365,44 @@ async function moveSlideTo(from, to) {   // to: insertion index in the current l
 }
 
 /* ---- Speaker notes: the field under the slide -------------------------------------------------------
-   Shows the current slide's <aside class="notes"> and saves it as a hand edit when the field loses focus
-   or on ⌘Enter; Esc puts back what the file says. Notes with markup other than line breaks are edited
-   as their HTML ("HTML" in the header). Typing is never overwritten by a reload. */
+   Shows the current slide's <aside class="notes"> as formatted text (⌘B ⌘I ⌘U; Enter is a line break) and
+   saves its HTML as a hand edit when the field loses focus or on ⌘Enter; Esc puts back what the file says.
+   Notes with markup the field cannot show safely (other tags or attributes) are edited as their HTML
+   ("HTML" in the header). Typing is never overwritten by a reload. */
+const NOTE_TAGS = new Set(["P", "BR", "B", "STRONG", "I", "EM", "U", "S", "SUB", "SUP", "CODE", "SPAN", "SMALL", "MARK",
+  "UL", "OL", "LI", "A", "BLOCKQUOTE", "DIV"]);
+const safeNoteAttr = (el, a) => a.name === "class" || (a.name === "href" && el.tagName === "A" && /^(https?:|mailto:|#)/i.test(a.value.trim()));
+/* The notes' HTML when the field can show it unchanged (only harmless tags and attributes), else null. Parsed inert. */
+function richNotes(html) {
+  const body = new DOMParser().parseFromString("<body>" + html, "text/html").body;   // <body>: a leading <style> or <script> stays in it, to be seen
+  for (const el of body.querySelectorAll("*"))
+    if (!NOTE_TAGS.has(el.tagName) || [...el.attributes].some((a) => !safeNoteAttr(el, a))) return null;
+  return body.innerHTML;
+}
 const notesBox = $("notes");
-let notes = { eid: null, text: "", html: false };   // the notes as the file has them
+let notes = { eid: null, text: "", html: false };   // the field's content as loaded; html: edited as raw HTML
 let notesSeq = 0;
-const notesDirty = () => !!notes.eid && notesBox.value.trim() !== notes.text.trim();
+const notesValue = () => notes.html ? notesBox.textContent : notesBox.innerHTML;
+const notesDirty = () => !!notes.eid && notesValue().trim() !== notes.text.trim();
+/* What is saved: the raw HTML as typed, or the field's HTML without the browser's own styling of edits */
+function notesHtml() {
+  if (notes.html) return notesBox.textContent;
+  if (!notesBox.textContent.trim()) return "";
+  const c = notesBox.cloneNode(true);
+  c.querySelectorAll("[style]").forEach((el) => el.removeAttribute("style"));
+  return c.innerHTML.replace(/(\s*<br>)+\s*$/, "");
+}
+/* Shows the notes `d` ({ text, html } from the server, or null: none) of slide `eid` */
+function showNotes(eid, d) {
+  const rich = !d ? "" : d.html ? richNotes(d.text || "") : (d.text || "").split("\n").map(esc).join("<br>");
+  notes = { eid, text: "", html: rich == null };
+  notesBox.contentEditable = !d ? "false" : notes.html ? "plaintext-only" : "true";
+  if (notes.html) notesBox.textContent = d.text; else notesBox.innerHTML = rich;
+  notes.text = notesValue();
+}
 function notesStatus(msg) {
   $("notes-status").textContent = msg ?? (notes.html ? "HTML" : "");
-  $("notes-status").title = msg ? "" : notes.html ? "These notes contain formatting, so you edit them as HTML" : "";
+  $("notes-status").title = msg ? "" : notes.html ? "These notes contain markup the field cannot show, so you edit them as HTML" : "";
 }
 async function loadNotes() {
   const eid = state.slides[state.current]?.eid;
@@ -386,19 +414,15 @@ async function loadNotes() {
   const d = res?.ok ? await res.json().catch(() => null) : null;
   if (seq !== notesSeq || document.activeElement === notesBox || notesDirty()) return;
   if (!d) {   // detach from the previous slide, so its notes are not shown, or saved over, as this one's
-    notes = { eid: null, text: "", html: false };
-    notesBox.value = "";
-    notesBox.disabled = true;
+    showNotes(null, null);
     return notesStatus("Could not load");
   }
-  notes = { eid, text: d.text || "", html: !!d.html };
-  notesBox.value = notes.text;
-  notesBox.disabled = false;
+  showNotes(eid, d);
   notesStatus();
 }
 function saveNotes() {
   if (!notesDirty()) return Promise.resolve(true);
-  const edit = { eid: notes.eid, text: notesBox.value, html: notes.html };
+  const edit = { eid: notes.eid, text: notesHtml(), html: true }, shown = notesValue();
   flushNudge();
   const run = async () => {
     notesStatus("Saving…");
@@ -412,7 +436,7 @@ function saveNotes() {
       toast(d?.error || "Could not save the notes.");
       return false;
     }
-    if (notes.eid === edit.eid) notes.text = edit.text;
+    if (notes.eid === edit.eid) notes.text = shown;
     notesStatus("Saved");
     setTimeout(() => { if ($("notes-status").textContent === "Saved") notesStatus(); }, 1500);
     return true;
@@ -424,12 +448,23 @@ notesBox.addEventListener("blur", async () => {
 });
 notesBox.addEventListener("keydown", (e) => {
   if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); notesBox.blur(); }
-  else if (e.key === "Escape") { e.preventDefault(); notesBox.value = notes.text; notesBox.blur(); }
+  else if (e.key === "Escape") {
+    e.preventDefault();
+    if (notes.html) notesBox.textContent = notes.text; else notesBox.innerHTML = notes.text;
+    notesBox.blur();
+  }
+  // a <br>, as the notes have them, not a new <div>
+  else if (e.key === "Enter" && !notes.html) { e.preventDefault(); document.execCommand("insertLineBreak"); }
+});
+notesBox.addEventListener("paste", (e) => {   // pasted text comes in plain: no styles or markup from elsewhere
+  e.preventDefault();
+  document.execCommand("insertText", false, e.clipboardData.getData("text/plain"));
 });
+notesBox.addEventListener("input", () => { if (notesBox.innerHTML === "<br>") notesBox.innerHTML = ""; });   // placeholder again
 // 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(BASE + "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: notesHtml(), html: true })]));
 });
 function setNotesOpen(open) {
   $("notes-panel").classList.toggle("collapsed", !open);
@@ -580,8 +615,13 @@ $("export-menu").addEventListener("click", async (e) => {
   }
 });
 
+/* Present on localhost, at the deck's view path: no login there, so no sandbox, and reveal.js's speaker view (S)
+   works. noopener: the deck's scripts get no handle on this editor. */
 $("present").onclick = () => {
-  window.open(`${BASE}deck/${state.slides[state.current]?.hash || ""}`, "_blank");
+  const view = state.status?.view || "";
+  const u = new URL(`${BASE}${view}deck/${state.slides[state.current]?.hash || ""}`, location.href);
+  if (view) u.hostname = "localhost";
+  window.open(u, "_blank", "noopener");
 };
 
 /* ---- Pins --------------------------------------------------------------------------------------- */
@@ -852,7 +892,7 @@ function handleKey(k, mod = {}) {
   else if (k === "ArrowRight" || k === "ArrowDown" || k === "PageDown" || k === " ") goto(state.current + 1);
 }
 document.addEventListener("keydown", (e) => {
-  if (e.target.closest?.("input, textarea, dialog")) return;
+  if (e.target.closest?.("input, textarea, dialog, [contenteditable]")) return;
   // a menu and the button that opens it keep Enter, Space and the arrow keys (a menu opens, an item is chosen):
   // no slide change, no jump to the chat. Other buttons do not: after a click on ‹ › the focus stays there
   // while the slide is clicked (the slide frame keeps it), and Enter must still edit the selected text.

package/public/index.html

@@ -71,8 +71,9 @@
         title="Drag to resize the notes (double-click: default size)" aria-label="Resize the speaker notes"></div>
       <button id="notes-toggle" class="notes-head" aria-expanded="true" aria-controls="notes" title="Show or hide the speaker notes">
         <span class="caret" aria-hidden="true">▾</span> Notes <span id="notes-status" class="notes-status"></span></button>
-      <textarea id="notes" spellcheck="true" aria-label="Speaker notes of this slide"
-        placeholder="Speaker notes for this slide, shown in the speaker view (S) when presenting. Saved when you click elsewhere or press ⌘Enter; Esc undoes your typing."></textarea>
+      <div id="notes" class="notes-box" contenteditable="false" role="textbox" aria-multiline="true" spellcheck="true"
+        aria-label="Speaker notes of this slide"
+        data-placeholder="Speaker notes for this slide, shown in the speaker view (S) when presenting. ⌘B bold, ⌘I italic, ⌘U underline. Saved when you click elsewhere or press ⌘Enter; Esc undoes your typing."></div>
     </section>
   </main>
 

package/server.mjs

@@ -23,7 +23,7 @@ import path from "node:path";
 import crypto from "node:crypto";
 import { spawn, execFile } from "node:child_process";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { assignEids, parse, findSlides, slideSelector, deckSize, setStyles, getInner, setInner, insertAfter, removeElement, deleteTarget, fileRefs, insertSlide, moveSlide, getNotes, setNotes, setAttr, elementEnd } from "./lib/eids.mjs";
+import { assignEids, parse, findSlides, slideSelector, deckSize, setStyles, getInner, setInner, insertAfter, removeElement, deleteTarget, fileRefs, insertSlide, moveSlide, getNotes, setNotes, setAttr, elementEnd, decode } from "./lib/eids.mjs";
 import { unifiedDiff } from "./lib/diff.mjs";
 import { ClaudeSession } from "./lib/claude.mjs";
 import { CodexSession } from "./lib/codex.mjs";
@@ -34,7 +34,7 @@ import { printLayout, printPdf, chromeReason, ROOT_ARGS, PDF_HEAD_TAG, PDF_PAGE_
 import { readPptx } from "./lib/pptx.mjs";
 import { exportPdf as pptxToPdf, renderJobs, renderAvailable, pdfInfo } from "./lib/pptx-render.mjs";
 import { buildImport, planSlides } from "./lib/pptx-import.mjs";
-import { isSupportedPlatform, detectCapabilities, publicCapabilities, capabilityPrompt, parsePort, cliCommand, findExecutable } from "./lib/capabilities.mjs";
+import { isSupportedPlatform, detectCapabilities, publicCapabilities, capabilityPrompt, parsePort, cliCommand, useCliCommand, cliRefusal, findExecutable } from "./lib/capabilities.mjs";
 import { unsupportedMessage } from "./lib/frameworks.mjs";
 import { readInstructions } from "./lib/instructions.mjs";
 import { writeAtomic, sameContent, revision, scanFiles, scanChanges } from "./lib/deck-files.mjs";
@@ -42,7 +42,7 @@ import { deckTarget, homeDir, homeWarning } from "./lib/deck-target.mjs";
 import { listDecks, linkProblem } from "./lib/deck-list.mjs";
 import { assetRoots } from "./lib/asset-roots.mjs";
 import { registerServer, printLogin, alive } from "./lib/servers.mjs";
-import { goodHost, LOGIN_PAGE, createLogin, openOnEnter } from "./lib/login.mjs";
+import { goodHost, presentHost, LOGIN_PAGE, createLogin, openOnEnter } from "./lib/login.mjs";
 import { USAGE } from "./lib/usage.mjs";
 
 /* ---- Config ------------------------------------------------------------------ */
@@ -543,7 +543,7 @@ let session = null, starting = null;
 const status = () => ({ busy: state.busy, switching: state.switching, preparing: !!state.preparing, model: state.model, sessionId: state.sessionId, settings: { ...settings },
   running: !!session?.running, provider: settings.provider, models: catalog, deck: DECK_DIR, deckFile: DECK_FILE,
   chrome: CAPS.screenshot.available, slideSelector: deckNow.selector, deckProblem: deckNow.problem,
-  capabilities: publicCapabilities(CAPS), rev: deckRev(),
+  capabilities: publicCapabilities(CAPS), rev: deckRev(), view: VIEW.slice(1) + "/",
   undo: changeLabel(liveTurns().at(-1)), undoId: liveTurns().at(-1)?.id ?? null, redo: changeLabel(state.redo.at(-1)) });
 /* Pushed to the editors on every change. The model lists (both providers' catalogs) go along only when they
    changed since the last push: the editor keeps the last ones it got. */
@@ -625,12 +625,12 @@ function othersWorkedSince(start) {
    MCP servers have no place in a slide editor). That also skips CLAUDE.md files, so the deck's own go
    into the system prompt instead, read afresh at each session start: CLAUDE.md and AGENTS.md (the name
    other coding agents read), with their @path imports (lib/instructions.mjs). Parent folders' files are
-   not loaded; a deck imports shared rules explicitly. Decks copied from the example call the CLI as
-   `node ../cli.mjs`, which is right only next to PinDeck: that becomes this server's command. */
+   not loaded; a deck imports shared rules explicitly. The CLI path written there becomes this server's
+   command (useCliCommand). */
 function deckInstructions() {
   return ["CLAUDE.md", "AGENTS.md"].map((name) => {
     const s = readInstructions(path.join(DECK_DIR, name));
-    return s ? `\n\n## The deck's ${name}\n${s.replace(/node \.\.\/cli\.mjs\b/g, () => CLI_CMD)}\n` : "";
+    return s ? `\n\n## The deck's ${name}\n${useCliCommand(s, CLI_CMD)}\n` : "";
   }).join("");
 }
 // a function: ORIGIN is known only once the port is bound
@@ -668,9 +668,11 @@ function makeSession(choice) {
      explicit), PinDeck's own commands, never the locked paths. Deny rules win over allow rules. */
   const agent = choice.provider === "codex" ? new CodexSession({ ...options, settings: choice,
     instructions: codexInstructions(), tools: agentTools }) : new ClaudeSession({ ...options,
+    // a tool the rules do not allow comes to PinDeck (--permission-prompt-tool stdio), always refused: with the right command if it was the CLI
+    denyMessage: (r) => r?.tool_name === "Bash" ? cliRefusal(r.input?.command, CLI_CMD) : null,
     args: () => ["--append-system-prompt", systemPrompt + slidesInstructions() + deckInstructions(),
       "--setting-sources", "", "--strict-mcp-config", "--safe-mode", "--disable-slash-commands",   // no settings files, no MCP servers or connectors
-      "--permission-mode", "default", "--tools", "Read,Glob,Grep,Edit,Write,Bash",
+      "--permission-mode", "default", "--permission-prompt-tool", "stdio", "--tools", "Read,Glob,Grep,Edit,Write,Bash",
       "--allowedTools", ...readRules(), "Edit(./**)", "Write(./**)",
       ...["layout", "shot", "slides", "pdf", "pdf-figure"].map(command => `Bash(${CLI_CMD} ${command}:*)`),
       "--disallowedTools", ...lockedPaths().flatMap((f) => [`Edit(./${f})`, `Write(./${f})`]),
@@ -1467,9 +1469,10 @@ let ready = false;
 const NEEDS_DECK = /^\/api\/(message|slides|layout|shot|pdf|pdf-figure|edit|text|split|remove|notes|delete|delete-info|source|slide-hidden|move-slide|add-slide|import-apply|export)$/;
 const CLI_ROUTES = /^\/api\/(slides|layout|shot|pdf|pdf-figure)$/;   // answered as text, for cli.mjs
 /* Scriptable files (HTML, SVG) from the deck get the sandbox, wherever they are asked for. Under /v/ they are
-   read by documents of that sandboxed origin, so fonts and module scripts need CORS; the path is the secret. */
+   read by documents of that sandboxed origin, so fonts and module scripts need CORS; the path is the secret.
+   On localhost (Present) there is no sandbox: no login works there (see presentHost). */
 const SCRIPTABLE = /\.(html|svg|xml)$/i;
-const deckHeaders = (f, viewing) => ({ ...(SCRIPTABLE.test(f) ? { "content-security-policy": SANDBOX } : {}),
+const deckHeaders = (f, viewing, open) => ({ ...(SCRIPTABLE.test(f) && !open ? { "content-security-policy": SANDBOX } : {}),
   ...(viewing ? { "access-control-allow-origin": "*" } : {}) });
 const server = http.createServer(async (req, res) => {
   if (!ready) return text(res, 503, "PinDeck is starting. Reload in a moment.");
@@ -1478,7 +1481,7 @@ const server = http.createServer(async (req, res) => {
   try {
     const url = new URL(req.url, ORIGIN);
     let p = url.pathname;
-    if (req.method === "GET" && p === "/login") return login(res, url);
+    if (req.method === "GET" && p === "/login") return login(res, url, host);
     // /v/<token>/deck/... and /v/<token>/files/...: the deck's pages and files, read-only, nothing else
     let viewing = false;
     if (p.startsWith("/v/")) {
@@ -1526,7 +1529,7 @@ const server = http.createServer(async (req, res) => {
       const f = deckPath;
       if (!viewing && /\.html$/i.test(f)) return toView(p);
       const mode = url.searchParams.get("editor");
-      if (!mode || !/\.html$/i.test(f)) return serveFile(res, f, null, req, deckHeaders(f, viewing));
+      if (!mode || !/\.html$/i.test(f)) return serveFile(res, f, null, req, deckHeaders(f, viewing, presentHost(host)));
       return serveFile(res, f, (s) => {
         // headless runs must not stream media, or Chrome never finishes the page
         if (mode === "shot" || mode === "dump" || mode === "pdf") s = s.replace(/\bpreload="(auto|metadata)"/g, 'preload="none"');
@@ -1537,7 +1540,7 @@ const server = http.createServer(async (req, res) => {
         }
         return s.replace(/<\/body>/i, BRIDGE_TAG);
       }, req, ["shot", "dump", "pdf"].includes(mode) && headlessKeys.delete(url.searchParams.get("headless"))
-        ? deckHeaders(".css", viewing) : deckHeaders(f, viewing));   // headless Chrome's page, once (see chromeStart)
+        ? deckHeaders(".css", viewing) : deckHeaders(f, viewing, presentHost(host)));   // headless Chrome's page, once (see chromeStart)
     }
     if (viewing) return text(res, 404, "Not found");
 
@@ -1872,8 +1875,9 @@ const server = http.createServer(async (req, res) => {
       if (!r.changed) return json(res, 200, { unchanged: true });
       const n = findSlides(parse(before[DECK_FILE])).findIndex((s) => s.attrs["data-eid"]?.value === b.eid) + 1;
       const text = String(b.text || "").trim();
+      const said = b.html ? decode(text.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]*>/g, "")).trim() : text;   // Claude reads the words, not the tags
       const turnId = recordHandEdit(before, r.html, text ? `Edited the notes of slide ${n}` : `Removed the notes of slide ${n}`,
-        text ? `The user edited the speaker notes of slide ${n} (${b.eid}) by hand. They now read: "${text.slice(0, 300)}".`
+        text ? `The user edited the speaker notes of slide ${n} (${b.eid}) by hand. They now read: "${said.slice(0, 300)}".`
              : `The user removed the speaker notes of slide ${n} (${b.eid}).`);   // manual: the slide itself does not change
       return json(res, 200, { turnId });
     }