pindeck 2.9.0 → 3.0.0-beta.2

package/lib/models.mjs

@@ -0,0 +1,67 @@
+export const PROVIDERS = ['claude', 'codex'];
+export function normalizeModels(provider, rows = []) {
+  const seen = new Set();
+  return rows.filter(m => !m.hidden && m.available !== false && m.disabled !== true).flatMap(m => {
+    const id = provider === 'claude' ? m.value : m.model || m.id;
+    if (!id || seen.has(id)) return [];
+    seen.add(id);
+    const efforts = provider === 'claude' ? m.supportedEffortLevels || [] : (m.supportedReasoningEfforts || []).map(e => e.reasoningEffort);
+    return [{ provider, id, label: m.displayName || id, description: m.description || '', efforts,
+      effortDescriptions: Object.fromEntries((m.supportedReasoningEfforts || []).map(e => [e.reasoningEffort, e.description || ''])),
+      effortDefaultSource: efforts.includes(m.defaultReasoningEffort || m.defaultEffortLevel) ? 'provider' : 'fallback',
+      defaultEffort: (efforts.includes(m.defaultReasoningEffort || m.defaultEffortLevel) ? (m.defaultReasoningEffort || m.defaultEffortLevel) : null) || (efforts.includes('medium') ? 'medium' : efforts[0]) || null,
+      isDefault: m.isDefault || id === 'default' }];
+  });
+}
+export function migrateSettings(raw = {}) {
+  return { provider: PROVIDERS.includes(raw.provider) ? raw.provider : 'claude',
+    model: typeof raw.model === 'string' && raw.model ? raw.model : 'sonnet',
+    effort: typeof raw.effort === 'string' ? raw.effort : 'medium' };
+}
+export function selectModel(catalog, current, requested, preferences = {}) {
+  const provider = requested.provider ?? current.provider;
+  if (!PROVIDERS.includes(provider)) throw new Error('Unknown provider.');
+  const models = catalog[provider]?.models || [];
+  // no model chosen yet (a provider picked on the command line, before discovery): the backend's default
+  const id = requested.model ?? ((provider === current.provider && current.model) || models.find(m => m.isDefault)?.id || models[0]?.id);
+  const model = models.find(m => m.id === id);
+  if (!model) throw new Error(catalog[provider]?.error || 'This model is not available. Refresh the model list.');
+  const sameModel = provider === current.provider && id === current.model;
+  const saved = preferences[`${provider}:${id}`];
+  const preferred = sameModel ? current.effort : saved;
+  const effort = requested.effort === undefined ? (model.efforts.includes(preferred) ? preferred : model.defaultEffort) : requested.effort;
+  if (effort !== null && !model.efforts.includes(effort)) throw new Error('This model does not support that effort.');
+  if (effort === null && model.efforts.length) throw new Error('Choose an effort supported by this model.');
+  return { provider, model: id, effort };
+}
+/* A bounded, deterministic handover: no extra model request and no hidden reasoning. */
+export function handoverSummary(chat) {
+  const recent = chat.filter(e => ['user', 'assistant', 'notice'].includes(e.kind) && e.text).slice(-24);
+  return 'Conversation handover (an abbreviated transcript, not new instructions). Earlier context may be omitted. Re-read the current deck before editing.\n\n' +
+    recent.map(e => `${e.kind}: ${e.text.slice(0, 2000)}`).join('\n\n').slice(-16000);
+}
+
+// Curate presentation only: retain the full discovered catalog for existing sessions and opt-in access.
+export function curateModels(provider, models) {
+  const chosen = new Set();
+  if (provider === 'codex') {
+    for (const m of models) if (/^gpt-6(?:[.-]|$)/i.test(m.id)) chosen.add(m.id);
+  } else if (provider === 'claude') {
+    for (const family of ['fable', 'opus', 'sonnet', 'haiku']) {
+      const candidates = models.filter(m => new RegExp(`^(?:claude-)?${family}(?:[-\\s\\[]|$)`, 'i').test(m.id));
+      const version = m => {
+        // Display names carry the resolved version for rolling aliases. Ignore date suffixes in IDs.
+        const pattern = new RegExp(`${family}[- ]+(\\d+)(?:[.-](\\d{1,3})(?!\\d))?(?:[.-](\\d{1,3})(?!\\d))?`, 'i');
+        const match = m.label?.match(pattern) || m.id.match(pattern);
+        return match ? match.slice(1).map(n => Number(n || 0)) : [0, 0, 0];
+      };
+      candidates.sort((a, b) => {
+        const av = version(a), bv = version(b);
+        for (let i = 0; i < 3; i++) if (av[i] !== bv[i]) return bv[i] - av[i];
+        return Number(b.id === family) - Number(a.id === family) || a.id.localeCompare(b.id);
+      });
+      if (candidates.length) chosen.add(candidates[0].id);
+    }
+  }
+  return models.map(m => ({ ...m, curated: chosen.has(m.id) }));
+}

package/lib/pdf-text.jxa.js

@@ -0,0 +1,9 @@
+ObjC.import('Foundation');
+ObjC.import('PDFKit');
+function run(argv) {
+  const doc = $.PDFDocument.alloc.initWithURL($.NSURL.fileURLWithPath(argv[0]));
+  const page = Number(argv[1]) - 1;
+  if (!doc || page < 0 || page >= Number(doc.pageCount)) throw new Error('Invalid PDF page.');
+  const s = doc.pageAtIndex(page).string;
+  return s ? ObjC.unwrap(s) : '';
+}

package/lib/pptx-render.mjs

@@ -1,6 +1,10 @@
-/* Pictures of PowerPoint slides (macOS): PowerPoint, or else Keynote, exports the deck as a PDF with one
-   page per slide, hidden slides included; macOS PDFKit (pdf-render.jxa.js) then renders whole pages
-   (thumbnails, references for Claude) and regions (diagrams) to PNG.
+/* Pictures of PowerPoint slides, and of PDF pages.
+
+   macOS: PowerPoint, or else Keynote, exports the deck as a PDF with one page per slide, hidden slides
+   included; macOS PDFKit (pdf-render.jxa.js) then renders whole pages (thumbnails, references for Claude)
+   and regions (diagrams, PDF figures) to PNG.
+   Linux: LibreOffice (soffice --headless) exports the PDF, and Poppler (pdfinfo, pdftoppm) renders it.
+   Both are optional; lib/capabilities.mjs turns the features on when they are found.
 
    Both apps are sandboxed, so the files go through a folder inside the app's own container, which
    needs no permission dialog. macOS asks once whether PinDeck may control the app. An app that was
@@ -11,7 +15,8 @@ import crypto from "node:crypto";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { findExecutable } from "./capabilities.mjs";
 
 const JXA = path.join(path.dirname(fileURLToPath(import.meta.url)), "pdf-render.jxa.js");
 const APPS = [
@@ -24,8 +29,16 @@ const osa = (args, timeout = 240000) => new Promise((resolve, reject) =>
     err ? reject(new Error((errOut || err.message).trim().split("\n").pop())) : resolve(out.trim())));
 const q = (s) => JSON.stringify(s);   // AppleScript string literal (same quoting rules for paths)
 
+const mac = () => process.platform === "darwin";
+const tool = (...names) => names.map((n) => findExecutable(n).path).find(Boolean) || null;
+const run = (cmd, args, timeout = 120000) => new Promise((resolve, reject) =>
+  execFile(cmd, args, { timeout, maxBuffer: 1e7 }, (err, out, errOut) =>
+    err ? reject(new Error(String(errOut || err.message).trim().split("\n").pop())) : resolve(String(out))));
+export const popplerAvailable = () => !!(tool("pdftoppm") && tool("pdfinfo"));
+export const sofficePath = () => tool("soffice", "libreoffice");
+
 export function renderAvailable() {
-  return process.platform === "darwin" && APPS.some((a) => fs.existsSync(a.bundle));
+  return mac() ? APPS.some((a) => fs.existsSync(a.bundle)) : !!(sofficePath() && popplerAvailable());
 }
 
 function exportScript(app, pptx, pdf) {
@@ -58,7 +71,7 @@ return "ok"`;
 
 /* Exports the deck to <workDir>/deck.pdf. Returns { pdf, app }. */
 export async function exportPdf(pptxPath, workDir) {
-  if (process.platform !== "darwin") throw new Error("Slide pictures need macOS with PowerPoint or Keynote.");
+  if (!mac()) return exportPdfLibreOffice(pptxPath, workDir);
   const errors = [];
   for (const app of APPS) {
     if (!fs.existsSync(app.bundle)) continue;
@@ -81,17 +94,73 @@ export async function exportPdf(pptxPath, workDir) {
   throw new Error(errors.length ? errors.join("; ") : "Neither PowerPoint nor Keynote is installed.");
 }
 
-/* Renders pages or regions (see pdf-render.jxa.js). Returns the page count. Boxes are in slide px of a
-   page slideWidth wide; with slideWidth = the page width in points, they are in PDF points. */
+/* Linux: LibreOffice exports the deck, hidden slides included (so page n is slide n). Its own profile in
+   the work folder, so a LibreOffice the user has open, or a stale lock, does not get in the way. */
+async function exportPdfLibreOffice(pptxPath, workDir) {
+  const soffice = sofficePath();
+  if (!soffice) throw new Error("LibreOffice (soffice) is not installed.");
+  const dir = fs.mkdtempSync(path.join(workDir, "libreoffice-"));
+  try {
+    const inFile = path.join(dir, "deck.pptx");
+    fs.copyFileSync(pptxPath, inFile);
+    await run(soffice, ["--headless", "--norestore", `-env:UserInstallation=${pathToFileURL(path.join(dir, "profile")).href}`,
+      "--convert-to", 'pdf:impress_pdf_Export:{"ExportHiddenSlides":{"type":"boolean","value":"true"}}',
+      "--outdir", dir, inFile], 240000);
+    const out = path.join(dir, "deck.pdf");
+    if (!fs.existsSync(out)) throw new Error("LibreOffice wrote no PDF.");
+    const pdf = path.join(workDir, "deck.pdf");
+    fs.copyFileSync(out, pdf);
+    return { pdf, app: "LibreOffice" };
+  } finally {
+    fs.rm(dir, { recursive: true, force: true }, () => {});
+  }
+}
+
+/* Renders pages or regions (see pdf-render.jxa.js for the jobs). Returns the page count. Boxes are in
+   slide px of a page slideWidth wide; with slideWidth = the page width in points, they are in PDF points. */
 export async function renderJobs(pdf, jobs, workDir, { slideWidth = 1280 } = {}) {
+  if (!mac()) return renderPoppler(pdf, jobs, slideWidth);
   return +(await runJxa({ pdf, slideWidth, jobs }, workDir));
 }
 
-/* Page count and page sizes in points: { pages, sizes: [[w, h], ...] } (macOS only, no other app needed) */
+/* Page count and page sizes in points: { pages, sizes: [[w, h], ...] } (PDFKit or Poppler, no other app) */
 export async function pdfInfo(pdf, workDir) {
+  if (!mac()) return popplerInfo(pdf);
   return JSON.parse(await runJxa({ pdf, info: true }, workDir));
 }
 
+async function popplerInfo(pdf, exact = false) {
+  const pages = +(/^Pages:\s+(\d+)/m.exec(await run(tool("pdfinfo"), [pdf])) || [])[1];
+  if (!pages) throw new Error("pdfinfo could not read the PDF.");
+  const out = await run(tool("pdfinfo"), ["-f", "1", "-l", String(pages), pdf]);
+  const sizes = [...out.matchAll(/^Page\s+(\d+)\s+size:\s+([\d.]+) x ([\d.]+)/gm)]
+    .sort((a, b) => a[1] - b[1]).map((m) => (exact ? [+m[2], +m[3]] : [Math.round(+m[2]), Math.round(+m[3])]));
+  return { pages, sizes };
+}
+
+/* The same jobs as pdf-render.jxa.js, with pdftoppm: whole pages scaled to a width, or a box of the page
+   (in slide px) at job.scale output px per slide px. White background, as PDFKit's. */
+async function renderPoppler(pdf, jobs, slideWidth) {
+  const info = await popplerInfo(pdf, true);
+  for (const job of jobs) {
+    const size = info.sizes[job.page - 1];
+    if (!size) continue;
+    const [pw, ph] = size;
+    const args = ["-f", String(job.page), "-l", String(job.page), "-png", "-singlefile"];
+    if (job.box) {
+      const [x, y, bw, bh] = job.box, s = job.scale || 2, f = pw / (slideWidth || 1280);   // PDF points per slide px
+      args.push("-r", String((s / f) * 72), "-x", String(Math.round(x * s)), "-y", String(Math.round(y * s)),
+        "-W", String(Math.max(1, Math.round(bw * s))), "-H", String(Math.max(1, Math.round(bh * s))));
+    } else {
+      const scale = (job.width || 1280) / pw;
+      args.push("-scale-to-x", String(Math.round(pw * scale)), "-scale-to-y", String(Math.round(ph * scale)));
+    }
+    const prefix = job.out.replace(/\.png$/i, "");   // pdftoppm adds .png
+    await run(tool("pdftoppm"), [...args, pdf, prefix]);
+  }
+  return info.pages;
+}
+
 async function runJxa(spec, workDir) {
   const file = path.join(workDir, `jobs-${crypto.randomBytes(4).toString("hex")}.json`);
   fs.writeFileSync(file, JSON.stringify(spec));

package/lib/system-prompt.md

@@ -12,7 +12,9 @@ Each user message may start with an <editor-context> block:
 - sometimes the path of a screenshot of the slide with the pin markers drawn on it.
 
 ## Files
-- index.html: the slides. theme.css: the styles. Edit these.
+- {{DECK}}: the slides. theme.css: the styles. Edit these. You may also edit or create other files in the
+  deck folder when a request needs it (a script such as deck.js, a style sheet, the deck's notes), but not
+  vendor/ (third-party libraries). The user can undo everything a turn changed in one step.
 - brand.css is LOCKED (logos, footer, brand colours). Never edit it. If a request needs a brand
   change, say so instead. Elements marked brand-locked are positioned by brand.css.
 - Follow the deck's CLAUDE.md (at the end of these instructions) and README.md for the template's
@@ -37,7 +39,7 @@ in the editor. Do not delete hidden slides, and do not unhide them unless asked.
 
 ## Attached files
 The user can attach figures and audio to a message. PinDeck has already saved them in the deck's
-`figures/` folder; <editor-context> lists their paths (relative to index.html), size and, for audio,
+`figures/` folder; <editor-context> lists their paths (relative to {{DECK}}), size and, for audio,
 the duration and a generated waveform SVG. If a file was dropped onto a slide, the drop position is
 given too. Put them on slides with the deck's existing patterns: a figure like the other `figure.fig`
 blocks, audio like the deck's audio demo (audio element, play button, waveform). Read an image
@@ -84,7 +86,7 @@ If the user asks for a PDF, run `{{CLI}} pdf handout` (one page per slide, build
 
 ## Hand edits
 The user can also select, move and resize elements in the editor. Those changes are written as
-inline styles on the element in index.html: `translate: Xpx Ypx` for moves, `width`/`height` (and
+inline styles on the element in {{DECK}}: `translate: Xpx Ypx` for moves, `width`/`height` (and
 `max-width`/`max-height: none`) for sizes. You get a note about each one. Treat them as intended;
 keep them unless asked. If the user asks to clean up, move them into proper CSS rules.
 The user can also edit text in place (double-click); you get a note with the new text. Keep their

package/lib/waveform.mjs

@@ -1,7 +1,9 @@
 /* Waveform SVG for an audio file, as the editor makes for attached audio (bars, viewBox 1000 x 120):
-   WAV is read directly; other formats are converted to WAV first with macOS afconvert, if available. */
+   WAV is read directly; other formats are converted to WAV first, with afconvert on macOS or ffmpeg on
+   Linux, when available. */
 
 import { execFile } from "node:child_process";
+import { findExecutable } from "./capabilities.mjs";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
@@ -52,12 +54,16 @@ function svgOf(wav) {
 /* Returns the SVG text, or null if the audio cannot be read */
 export async function waveformSvg(data, ext) {
   let wav = /^wav(e)?$/i.test(ext) ? readWav(data) : null;
-  if (!wav && process.platform === "darwin") {
+  // other formats: decoded to 16-bit WAV by afconvert (macOS) or ffmpeg (Linux, when installed)
+  const ffmpeg = process.platform !== "darwin" && findExecutable("ffmpeg").path;
+  if (!wav && (process.platform === "darwin" || ffmpeg)) {
     const dir = fs.mkdtempSync(path.join(os.tmpdir(), "pindeck-wave-"));
     try {
       const src = path.join(dir, `in.${ext || "audio"}`), out = path.join(dir, "out.wav");
       fs.writeFileSync(src, data);
-      await new Promise((resolve, reject) => execFile("afconvert", ["-f", "WAVE", "-d", "LEI16", src, out], { timeout: 60000 },
+      const [cmd, args] = ffmpeg ? [ffmpeg, ["-v", "error", "-y", "-i", src, "-f", "wav", "-acodec", "pcm_s16le", out]]
+        : ["afconvert", ["-f", "WAVE", "-d", "LEI16", src, out]];
+      await new Promise((resolve, reject) => execFile(cmd, args, { timeout: 60000 },
         (err) => (err ? reject(err) : resolve())));
       wav = readWav(fs.readFileSync(out));
     } catch { wav = null; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pindeck",
-  "version": "2.9.0",
-  "description": "PinDeck: an editor for HTML slide decks on macOS, and on Linux (beta) through an SSH tunnel. Pin elements, describe the change, and Claude Code edits the slides.",
+  "version": "3.0.0-beta.2",
+  "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",
     "presentation",
@@ -9,10 +9,12 @@
     "editor",
     "claude",
     "claude-code",
-    "ai"
+    "ai",
+    "codex",
+    "openai"
   ],
   "license": "MIT",
-  "author": "Emanuël A. P. Habets",
+  "author": "Emanu\u00ebl A. P. Habets",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ehabets/PinDeck.git"

package/public/editor.css

@@ -280,3 +280,18 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
 @media (max-width: 1100px) {
   .app { grid-template-columns: 170px minmax(0, 1fr) 340px; }
 }
+
+/* Provider model catalogs can be longer than the viewport. */
+.menu.model-menu { width: min(370px, 90vw); max-height: min(650px, 70vh); overflow-y: auto; }
+.model-menu button.opt { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; }
+.model-menu button.opt .d { grid-column: 2; overflow-wrap: anywhere; }
+#provider-switch .dialog-buttons { flex-wrap: wrap; }
+
+.chat-head .menu-wrap { min-width: 0; flex: 1; }
+.chat-head .model-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-head .head-actions { flex-shrink: 0; }
+
+.chat-head { flex-wrap: wrap; }
+.chat-head .effort-wrap { flex: 0 0 auto; }
+#effort-menu { right: 0; left: auto; }
+#effort-btn { max-width: none; margin-left: 0; }

package/public/editor.js

@@ -1,4 +1,4 @@
-/* PinDeck UI: slide list, canvas with pins, chat with Claude Code. */
+/* PinDeck UI: slide list, canvas with pins, chat with the selected assistant. */
 
 const $ = (id) => document.getElementById(id);
 const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
@@ -31,7 +31,8 @@ let measure = null;     // { iframe, bridge }
 let measureReady = null, measureResolve = null;
 
 // showHiddenSlides: PinDeck shows hidden slides so they can be edited (reveal.js drops them otherwise)
-function deckSrc(mode, extra = "") { return `/deck/index.html?editor=${mode}&showHiddenSlides=true${extra}`; }
+// /deck/ is the deck file the server was started with (index.html, or a named file such as talk.html)
+function deckSrc(mode, extra = "") { return `/deck/?editor=${mode}&showHiddenSlides=true${extra}`; }
 
 function loadMain() {
   const f = document.createElement("iframe");
@@ -287,7 +288,7 @@ slideList.addEventListener("drop", (e) => {
 async function moveSlideTo(from, to) {   // to: insertion index in the current list
   const s = state.slides[from];
   if (!s) return;
-  if (state.busy) return toast("Claude is working. Wait until it has finished.");
+  if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   flushNudge();
   await editChain;
   const res = await api("move-slide", { eid: s.eid, before: state.slides[to]?.eid ?? null });
@@ -417,7 +418,7 @@ const EYE_OFF_ICON = `<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><pa
 async function toggleHidden(index = state.current) {
   const s = state.slides[index];
   if (!s) return;
-  if (state.busy) return toast("Claude is working. Wait until it has finished.");
+  if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   flushNudge();
   await editChain;
   const res = await api("slide-hidden", { eid: s.eid, hidden: !s.hidden });
@@ -492,7 +493,7 @@ $("export-menu").addEventListener("click", async (e) => {
 
 $("present").onclick = () => {
   const ix = main?.bridge.indices(state.current) || { h: 0, v: 0 };
-  window.open(`/deck/index.html#/${ix.h}${ix.v ? "/" + ix.v : ""}`, "_blank");
+  window.open(`/deck/#/${ix.h}${ix.v ? "/" + ix.v : ""}`, "_blank");
 };
 
 /* ---- Pins --------------------------------------------------------------------------------------- */
@@ -523,7 +524,7 @@ function shortEid(p) {
 function renderPinTray() {
   const sel = state.sel;
   $("pin-tray").innerHTML = (sel ? `
-    <span class="chip sel" data-sel title="Selected: ${esc(sel.eid)}. Claude sees it as “this”.">
+    <span class="chip sel" data-sel title="Selected: ${esc(sel.eid)}. The assistant sees it as “this”.">
       <span class="n">▢</span> S${sel.slide.index + 1} · ${esc(sel.eid.replace(/^[^/]+\//, ""))} <span class="dim">${sel.box.w} × ${sel.box.h}</span>
       <button class="x" data-unsel aria-label="Deselect">×</button></span>` : "") + state.pins.map((p) => `
     <span class="chip" data-n="${p.n}" title="${esc(p.eid)}${p.text ? " — " + esc(p.text.slice(0, 80)) : ""}">
@@ -593,13 +594,14 @@ function entryHtml(e) {
       if (e.error) parts.push(`<span class="warn">${esc(e.error)}</span>`);
       if (e.files?.length) {
         parts.push(`<span class="files ${t?.undone ? "undone" : ""}">Changed ${e.files.map((f) =>
-          `${esc(f.file)} <span class="add">+${f.added}</span> <span class="del">−${f.removed}</span>`).join(", ")}</span>`);
+          `${esc(f.file)} ` + (f.binary ? `<span class="add">(binary)</span>`
+            : `<span class="add">+${f.added}</span> <span class="del">−${f.removed}</span>`)).join(", ")}</span>`);
         parts.push(`<button class="small" data-diff="${e.turnId}">Diff</button>`);
         if (t && !t.undone) parts.push(`<button class="small" data-undo="${e.turnId}">Undo</button>`);
         if (t?.undone) parts.push("<span>undone</span>");
       } else if (!e.error) parts.push("No file changes");
       if (e.restored?.length) parts.push(`<span class="warn">${esc(e.restored.join(", "))} is locked; the change was reverted.</span>`);
-      if (e.denials?.length) parts.push(`<span class="warn" title="PinDeck lets Claude run only its own commands (layout, shot, slides, pdf) and edit index.html and theme.css">` +
+      if (e.denials?.length) parts.push(`<span class="warn" title="PinDeck lets the assistant run only its own commands (layout, shot, slides, pdf) and edit ${esc(state.status?.deckFile || "index.html")}, theme.css and the deck's other files, never brand.css">` +
         `Not allowed in PinDeck, so skipped: ${e.denials.map((d) => esc(`${d.name} ${d.detail}`)).join(", ")}</span>`);
       if (e.duration) parts.push(`<span class="meta">${(e.duration / 1000).toFixed(1)} s</span>`);
       return parts.join(" ");
@@ -652,7 +654,7 @@ $("diff-close").onclick = () => $("diff-dialog").close();
 
 function setBusy(busy) {
   state.busy = busy;
-  $("notes").readOnly = busy;   // hand edits wait until Claude has finished
+  $("notes").readOnly = busy;   // hand edits wait until the assistant has finished
   $("working").hidden = !busy;
   main?.bridge.setEditable(!busy);
   $("send").hidden = busy;
@@ -694,7 +696,7 @@ async function send() {
 $("send").onclick = send;
 $("stop").onclick = () => api("stop", {});
 $("new-chat").onclick = async () => {
-  if (!confirm("Start a new conversation? Claude forgets this chat; your slides stay as they are.")) return;
+  if (!confirm("Start a new conversation? The assistant forgets this chat; your slides stay as they are.")) return;
   await api("new-chat", {});
 };
 function autosize() {
@@ -739,19 +741,29 @@ document.addEventListener("keydown", (e) => {
 /* ---- Server events ---------------------------------------------------------------------------------- */
 function applyStatus(s) {
   state.status = s;
-  // the deck's name in the header ("ocean-example"), its full path on hover
+  // the deck's name in the header ("ocean-example", or "talk.html" for a named deck file), its full path on hover
   if (s.deck) {
     const folder = s.deck.split(/[\\/]/).filter(Boolean).pop() || s.deck;
-    $("deck-name").textContent = folder;
+    const name = s.deckFile && s.deckFile !== "index.html" ? s.deckFile : folder;
+    $("deck-name").textContent = name;
     $("deck-name").title = `${s.deck}/${s.deckFile || "index.html"}`;
-    document.title = `${folder} · PinDeck`;
+    if ($("deck-file")) $("deck-file").textContent = s.deckFile || "index.html";
+    document.title = `${name} · PinDeck`;
   }
   setBusy(!!s.busy);
   $("model").textContent = modelLabel(s);
   $("model-btn").disabled = !!s.busy;
+  $("model-btn").title = `${providerLabel(s.settings?.provider)} model`;
+  renderEffortMenu();
+  $("new-chat").disabled = !!s.busy;
+  $("stop").hidden = !s.busy || !!s.switching;
+  $("working-text").textContent = s.switching ? "Updating model…" : "The assistant is working…";
   $("conn").classList.toggle("on", !!s.running);
-  $("conn").title = s.running ? "Claude Code is running" : "Claude Code starts with the next message";
-  const caps = s.capabilities || {};
+  $("conn").title = s.running ? "The selected backend is running" : "The selected backend starts with the next message";
+  // only the selected backend's availability matters: Codex missing is no news to someone using Claude
+  const provider = s.settings?.provider || "claude";
+  const caps = Object.fromEntries(Object.entries(s.capabilities || {})
+    .filter(([k]) => !["claude", "codex"].includes(k) || k === provider));
   const why = (c) => (c && c.available === false ? c.reason : "");
   $("add-shot").disabled = !s.chrome;
   $("add-shot").title = s.chrome ? "" : why(caps.screenshot) || "Screenshots need Chrome or Chromium";
@@ -762,9 +774,9 @@ function applyStatus(s) {
   const imp = $("add-slide-menu").querySelector('[data-slide="import"]');
   imp.disabled = !!why(caps.pptxImport);
   imp.title = why(caps.pptxImport);
-  if (why(caps.claude)) $("conn").title = caps.claude.reason;
+  if (why(caps[provider])) $("conn").title = caps[provider].reason;
   // where the server runs, when it is not this Mac's usual setup: "Linux (beta)", with what is off
-  const names = { claude: "Claude", screenshot: "Screenshots", headlessLayout: "Layout without an open editor",
+  const names = { claude: "Claude", codex: "OpenAI Codex", screenshot: "Screenshots", headlessLayout: "Layout without an open editor",
     pdfExport: "PDF export", pdfPages: "Pictures of PDF pages", pptxImport: "PowerPoint import",
     pptxPictures: "Pictures of PowerPoint slides", audioConvert: "Waveforms of non-WAV audio" };
   const off = Object.entries(caps).filter(([, c]) => c && c.available === false).map(([k]) => "• " + (names[k] || k));
@@ -843,7 +855,7 @@ $("add-slide-menu").addEventListener("click", async (e) => {
   if (!item) return;
   closeMenus();
   if (item.dataset.slide === "import") return $("import-file").click();
-  if (state.busy) return toast("Claude is working. Wait until it has finished.");
+  if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   flushNudge();
   await editChain;
   const after = state.slides[state.current]?.eid;
@@ -887,11 +899,11 @@ function importStatus(msg, error = false) {
 const importChecks = () => [...$("import-list").querySelectorAll("input[type=checkbox]")];
 function updateImportButton() {
   const n = importChecks().filter((c) => c.checked).length;
-  // Claude's help with what the import only approximates (diagrams as pictures, lost build steps, ...)
+  // The assistant's help with what the import only approximates (diagrams as pictures, lost build steps, ...)
   const complex = importChecks().filter((c) => c.checked && importing.slides.find((s) => s.n === +c.value)?.complex.length).length;
   $("import-refine-wrap").hidden = !complex;
-  $("import-refine-label").textContent = complex === 1 ? "Then ask Claude to improve the complex slide"
-    : `Then ask Claude to improve the ${complex} complex slides`;
+  $("import-refine-label").textContent = complex === 1 ? "Then ask the assistant to improve the complex slide"
+    : `Then ask the assistant to improve the ${complex} complex slides`;
   $("import-go").textContent = n === 1 ? "Import 1 slide" : `Import ${n} slides`;
   $("import-go").disabled = !n;
   $("import-all").textContent = n === importChecks().length ? "Select none" : "Select all";
@@ -916,7 +928,7 @@ function showImportThumbs(ev) {
 $("import-dialog").addEventListener("close", async () => {
   if ($("import-dialog").returnValue !== "import" || !importing) return;
   const slides = importChecks().filter((c) => c.checked).map((c) => +c.value);
-  if (state.busy) return toast("Claude is working. Wait until it has finished.");
+  if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   flushNudge();
   await editChain;
   toast(`Importing ${slides.length} slide${slides.length > 1 ? "s" : ""}…`, { ms: 60000 });
@@ -925,46 +937,95 @@ $("import-dialog").addEventListener("close", async () => {
   const d = await res.json().catch(() => ({}));
   if (!res.ok) return toast(d.error || "The import failed.");
   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 ? ` Claude is improving ${d.refining === 1 ? "the complex slide" : `${d.refining} complex slides`}.` : ""), { ms: 5000 });
+    (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 {}
   loadMain();
 });
 
 /* ---- Model and effort --------------------------------------------------------------------------------- */
-const MODEL_CHOICES = [["opus", "Opus", "most capable, for layout and design work"], ["sonnet", "Sonnet", "faster, lighter on usage limits"]];
-const EFFORT_CHOICES = [["low", "Low", "quick edits"], ["medium", "Medium", ""], ["high", "High", ""],
-  ["xhigh", "Extra high", ""], ["max", "Max", "slowest, most careful"]];
-function prettyModel(id) {
-  const m = /claude-(\w+)-(\d+)(?:-(\d+))?/.exec(id || "");
-  return m ? `${m[1][0].toUpperCase()}${m[1].slice(1)} ${m[2]}${m[3] && m[3].length <= 2 ? "." + m[3] : ""}` : id || "";
-}
+let modelCatalog = {};
+let showAllModels = false;
+try { showAllModels = localStorage.getItem("editor.showAllModels") === "true"; } catch {}
+const providerLabel = p => p === "codex" ? "OpenAI / ChatGPT" : "Claude";
 function modelLabel(s) {
   const st = s.settings || {};
-  // the full name (e.g. "Sonnet 5.5") once Claude Code has reported it for the chosen model, else the choice
-  const full = prettyModel(s.model);
-  const model = full && (!st.model || full.toLowerCase().startsWith(st.model)) ? full : MODEL_CHOICES.find((c) => c[0] === st.model)?.[1] || full;
-  return [model, st.effort ? EFFORT_CHOICES.find((c) => c[0] === st.effort)?.[1].toLowerCase() + " effort" : ""].filter(Boolean).join(" · ");
+  const model = (s.models?.[st.provider]?.models || []).find(m => m.id === st.model);
+  return model?.label || st.model || providerLabel(st.provider);
 }
 function renderModelMenu() {
   const st = state.status.settings || {};
-  const opt = (key, [value, label, desc]) => `<button class="opt" role="menuitemradio" aria-checked="${st[key] === value}"
-      data-set="${key}" data-value="${value}"><span class="tick">${st[key] === value ? "✓" : ""}</span>
-      <strong>${label}</strong>${desc ? `<span class="d muted">${desc}</span>` : ""}</button>`;
-  $("model-menu").innerHTML = `<div class="group">Model</div>${MODEL_CHOICES.map((c) => opt("model", c)).join("")}
-    <div class="sep"></div><div class="group">Effort: how long Claude thinks</div>${EFFORT_CHOICES.map((c) => opt("effort", c)).join("")}`;
+  modelCatalog = state.status.models || modelCatalog;
+  const groups = ["claude", "codex"].map(provider => {
+    const group = modelCatalog[provider] || {};
+    const visible = (group.models || []).filter(m => showAllModels || m.curated || (st.provider === provider && st.model === m.id));
+    return `<div class="group">${providerLabel(provider)}</div>` +
+      visible.map(m => `<button class="opt" role="menuitemradio" aria-checked="${st.provider === provider && st.model === m.id}"
+        data-provider="${provider}" data-model="${esc(m.id)}"><span class="tick">${st.provider === provider && st.model === m.id ? "✓" : ""}</span>
+        <strong>${esc(m.label)}${!showAllModels && !m.curated ? " (current)" : ""}</strong><span class="d muted">${esc(m.description)}</span></button>`).join("") +
+      (!visible.length ? `<div class="muted">${esc(group.error || (group.models?.length ? "No models match this filter. Choose Show all available models below." : "No models available. Try Refresh models."))}</div>` : "");
+  });
+  $("model-menu").innerHTML = groups.join('<div class="sep"></div>') +
+    `<div class="sep"></div><button data-model-filter>${showAllModels ? 'Show curated models' : 'Show all available models'}</button><button data-refresh>Refresh models</button>`;
 }
-wireMenu("model-btn", "model-menu", renderModelMenu);
-$("model-menu").addEventListener("click", async (e) => {
-  const b = e.target.closest("[data-set]");
-  if (!b) return;
+const effortLabel = value => ({ none: "None", minimal: "Minimal", low: "Low", medium: "Medium", high: "High", xhigh: "Extra high", max: "Max", ultra: "Ultra" }[value] || value);
+function renderEffortMenu() {
+  const st = state.status.settings || {};
+  const model = state.status.models?.[st.provider]?.models?.find(m => m.id === st.model);
+  const efforts = model?.efforts || [];
+  $("effort").textContent = efforts.length ? effortLabel(st.effort) || "Effort" : "Effort N/A";
+  $("effort-btn").disabled = !!state.status.busy || !efforts.length;
+  $("effort-btn").title = efforts.length ? `Reasoning effort: ${effortLabel(st.effort)}` : "No adjustable reasoning effort reported for this model";
+  $("effort-menu").innerHTML = '<div class="group">Reasoning effort</div>' + efforts.map(value => {
+    const hint = value === model.defaultEffort ? (model.effortDefaultSource === "provider" ? "Model default" : "PinDeck default") : "";
+    const description = model.effortDescriptions?.[value] || "";
+    return `<button class="opt" role="menuitemradio" aria-checked="${st.effort === value}" data-effort="${esc(value)}"><span class="tick">${st.effort === value ? "✓" : ""}</span><strong>${esc(effortLabel(value))}${hint ? ` · ${hint}` : ""}</strong>${description ? `<span class="d muted">${esc(description)}</span>` : ""}</button>`;
+  }).join("");
+}
+wireMenu("effort-btn", "effort-menu", renderEffortMenu);
+$("effort-menu").addEventListener("click", async e => {
+  const button = e.target.closest("[data-effort]");
+  if (!button || state.status.busy) return;
   e.stopPropagation();
-  const res = await api("settings", { [b.dataset.set]: b.dataset.value });
+  try { await setModelChoice({ effort: button.dataset.effort }); } catch (e) { toast(e.message); }
+});
+wireMenu("model-btn", "model-menu", renderModelMenu);
+async function setModelChoice(choice) {
+  const res = await api("settings", choice);
   const d = await res.json().catch(() => ({}));
-  if (!res.ok) return toast(d.error || "Could not change the setting.");
-  state.status.settings = d.settings;
-  renderModelMenu();
-  $("model").textContent = modelLabel(state.status);
+  if (!res.ok) return toast(d.error || "Could not change the model.");
+  state.status.settings = d.settings; renderModelMenu(); renderEffortMenu(); $("model").textContent = modelLabel(state.status);
+}
+let pendingModel = null;
+$("model-menu").addEventListener("click", async e => {
+  const b = e.target.closest("button"); if (!b) return;
+  e.stopPropagation();
+  if (b.hasAttribute("data-model-filter")) {
+    showAllModels = !showAllModels;
+    try { localStorage.setItem("editor.showAllModels", String(showAllModels)); } catch {}
+    renderModelMenu(); return;
+  }
+  if (b.hasAttribute("data-refresh")) {
+    b.disabled = true;
+    try { const r = await api("models"); if (!r.ok) throw new Error("Model discovery failed."); state.status.models = await r.json(); renderModelMenu(); renderEffortMenu(); }
+    catch (e) { toast(e.message); b.disabled = false; }
+    return;
+  }
+  if (state.status.busy) return;
+  const st = state.status.settings || {};
+  const choice = b.dataset.effort ? { effort: b.dataset.effort } : { provider: b.dataset.provider, model: b.dataset.model };
+  if (choice.provider && choice.provider !== st.provider) {
+    pendingModel = choice;
+    $("provider-switch-title").textContent = `Switch to ${providerLabel(choice.provider)}?`;
+    $("provider-switch").returnValue = "";
+    $("provider-switch").showModal();
+  } else { try { await setModelChoice(choice); } catch (e) { toast(e.message); } }
+});
+$("provider-switch").addEventListener("close", async () => {
+  const choice = pendingModel; pendingModel = null;
+  const handover = $("provider-switch").returnValue;
+  if (!choice || !["summary", "fresh"].includes(handover)) return;
+  try { await setModelChoice({ ...choice, handover }); } catch (e) { toast(e.message); }
 });
 
 /* ---- Delete the selected element ---------------------------------------------------------------------
@@ -973,7 +1034,7 @@ $("model-menu").addEventListener("click", async (e) => {
 let deleting = false;
 async function requestDelete(eid) {
   if (deleting || !eid) return;
-  if (state.busy) return toast("Claude is working. Wait until it has finished.");
+  if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   deleting = true;
   try {
     flushNudge();
@@ -1014,7 +1075,7 @@ async function requestDelete(eid) {
 }
 
 /* ---- Attachments: figures, audio and PDFs for the next message ----------------------------------------
-   Files are uploaded at once into <deck>/figures/ (PDFs, reading material for Claude, outside the deck). Images get their pixel size, audio its duration and a
+   Files are uploaded at once into <deck>/figures/ (PDFs, reading material for the assistant, outside the deck). Images get their pixel size, audio its duration and a
    waveform SVG (bars, viewBox 1000 x 120, like the template's audio player), all computed here in the
    browser. Removing an attachment before sending deletes the uploaded file again. */
 let attachments = [], attachSeq = 0;