pindeck 2.8.1 → 3.0.0-beta.1

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 TOKEN = document.querySelector('meta[name="editor-token"]').content;
 const $ = (id) => document.getElementById(id);
@@ -261,7 +261,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 });
@@ -391,7 +391,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 });
@@ -497,7 +497,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)) : ""}">
@@ -573,7 +573,7 @@ function entryHtml(e) {
         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 index.html and theme.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(" ");
@@ -626,7 +626,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;
@@ -668,7 +668,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() {
@@ -723,8 +723,13 @@ function applyStatus(s) {
   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";
+  $("conn").title = s.running ? "The selected backend is running" : "The selected backend starts with the next message";
   $("add-shot").disabled = !s.chrome;
   $("add-shot").title = s.chrome ? "" : "Screenshots need Chrome or Chromium";
   $("add-slide-btn").disabled = !!s.busy;
@@ -793,7 +798,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;
@@ -837,11 +842,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";
@@ -866,7 +871,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 });
@@ -875,46 +880,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 ---------------------------------------------------------------------
@@ -923,7 +977,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();
@@ -964,7 +1018,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;

package/public/index.html

@@ -45,7 +45,7 @@
           <button id="select-toggle" class="toggle" aria-pressed="true"
             title="Select (V): click to select, drag to move, handles to resize, arrows to nudge (Shift: 10 px), Alt: no snapping. Double-click or Enter to edit text.">
             <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2l9 5-4 1.2L6.3 13z"/></svg> Select <kbd>V</kbd></button>
-          <button id="pin-toggle" class="toggle" title="Pin (P): click elements to pin them for Claude, Esc to stop" aria-pressed="false">
+          <button id="pin-toggle" class="toggle" title="Pin (P): click elements to pin them for the assistant, Esc to stop" aria-pressed="false">
             <span class="dot">1</span> Pin <kbd>P</kbd></button>
         </span>
         <span class="menu-wrap">
@@ -73,16 +73,20 @@
     </section>
   </main>
 
-  <!-- Right: chat with Claude -->
-  <aside class="chat-pane" aria-label="Claude">
+  <!-- Right: chat with the selected assistant -->
+  <aside class="chat-pane" aria-label="Assistant">
     <div class="pane-head chat-head">
       <span class="menu-wrap">
         <button id="model-btn" class="model-btn" aria-haspopup="menu" aria-expanded="false"
-          title="Model and effort for Claude">Claude <span id="model" class="muted"></span> ▾</button>
+          title="Choose model"><span id="model" class="muted"></span> ▾</button>
         <div id="model-menu" class="menu left model-menu" role="menu" hidden></div>
       </span>
+      <span class="menu-wrap effort-wrap">
+        <button id="effort-btn" class="model-btn" aria-label="Reasoning effort" aria-haspopup="menu" aria-expanded="false"><span id="effort">Effort</span> ▾</button>
+        <div id="effort-menu" class="menu model-menu" role="menu" aria-label="Reasoning effort" hidden></div>
+      </span>
       <span class="head-actions">
-        <span id="conn" class="conn" title="Claude Code session"></span>
+        <span id="conn" class="conn" title="Backend session"></span>
         <button id="new-chat" class="small" title="Start a new conversation">New chat</button>
       </span>
     </div>
@@ -92,25 +96,25 @@
         <p>Press <kbd>P</kbd> and click elements on the slide. Each click gets a number. Then write what to change, e.g.
           <em>“1: align with 2, make 3 smaller”</em>.</p>
         <p>Or edit yourself: click to select, drag to move, pull a handle to resize, arrow keys to nudge,
-          double-click to change the text. A selected element is what Claude takes “this” to mean.</p>
-        <p>Add figures, audio, a PDF or a screenshot with <strong>+</strong>, or drag and drop or paste a file; Claude can put it on a slide
+          double-click to change the text. A selected element is what the assistant takes “this” to mean.</p>
+        <p>Add figures, audio, a PDF or a screenshot with <strong>+</strong>, or drag and drop or paste a file; the assistant can put it on a slide
           or, for a paper or report, take the details from it.</p>
-        <p>Claude edits <code>index.html</code> and <code>theme.css</code>, checks the layout, and the slide updates here.
+        <p>The assistant edits <code>index.html</code> and <code>theme.css</code>, checks the layout, and the slide updates here.
           <code>brand.css</code> is locked.</p>
       </div>
     </div>
     <div id="drop-hint" class="drop-hint" hidden><div>Drop figures, audio or PDFs to attach them</div></div>
-    <div id="working" class="working" hidden><span class="spinner"></span> <span id="working-text">Claude is working…</span></div>
+    <div id="working" class="working" hidden><span class="spinner"></span> <span id="working-text">The assistant is working…</span></div>
     <div class="composer">
       <div id="pin-tray" class="pin-tray"></div>
       <div id="attach-tray" class="attach-tray"></div>
-      <textarea id="input" rows="3" placeholder="Ask Claude… refer to pins by number (1, 2, …)"></textarea>
+      <textarea id="input" rows="3" placeholder="Ask for a change… refer to pins by number (1, 2, …)"></textarea>
       <div class="composer-row">
         <span class="menu-wrap">
           <button id="add-btn" class="add-round" aria-haspopup="menu" aria-expanded="false" aria-label="Add to the message"
             title="Add a file or a screenshot to the message">+</button>
           <div id="add-menu" class="menu up" role="menu" hidden>
-            <button role="menuitem" data-add="file"><strong>File…</strong><span>A figure, audio file or PDF (a figure, table, paper or report) for Claude to use (or drop or paste it)</span></button>
+            <button role="menuitem" data-add="file"><strong>File…</strong><span>A figure, audio file or PDF (a figure, table, paper or report) for the assistant to use (or drop or paste it)</span></button>
             <button role="menuitem" data-add="shot" id="add-shot"><strong>Screenshot</strong><span>This slide with its pins, for questions about how it looks</span></button>
           </div>
         </span>
@@ -124,6 +128,19 @@
   </aside>
 </div>
 
+<dialog id="provider-switch" class="delete-dialog">
+  <form method="dialog">
+    <h3 id="provider-switch-title">Switch provider?</h3>
+    <p>This starts a new conversation. Carry over a summary of the current conversation?</p>
+    <p class="muted">The summary shares recent messages with the selected provider. Your slides and undo history stay unchanged.</p>
+    <div class="dialog-buttons">
+      <button value="cancel" autofocus>Cancel</button>
+      <button value="fresh">Start fresh</button>
+      <button value="summary" class="primary">Switch with summary</button>
+    </div>
+  </form>
+</dialog>
+
 <dialog id="delete-dialog" class="delete-dialog">
   <form method="dialog">
     <h3 id="delete-title">Delete this element?</h3>
@@ -146,7 +163,7 @@
     <div class="dialog-buttons">
       <span class="import-notes">
         <label class="check" id="import-refine-wrap" hidden><input type="checkbox" id="import-refine" checked>
-          <span id="import-refine-label">Then ask Claude to improve the complex slides</span></label>
+          <span id="import-refine-label">Then ask the assistant to improve the complex slides</span></label>
         <span class="muted small-note">Added after the current slide. You can undo this with ⌘Z.</span>
       </span>
       <button value="cancel">Cancel</button>