slidemind 0.3.20 → 0.4.1

package/src/workspace/ui/app.js

@@ -0,0 +1,1886 @@
+// The workspace page. Plain script, no build step. State lives in this closure;
+// every screen is re-rendered from a fresh GET (SSE only says "re-GET").
+//
+// Boot: exchange `#bootstrap=<key>` (the workspace's link key, valid every time
+// it is clicked) for the session cookie + CSRF token, strip
+// the fragment, then route on location.pathname:
+//   /                                   library + inbox
+//   /deck/<id>[/plan|/preview]          deck tabs — the address follows the tab, so
+//                                       the link an agent posts opens the view itself
+//   /deck/<id>/tasks/<taskId>           an older task link: opens that task's tab
+//
+// The workspace restarts under the page (a crash, a reboot, every CLI update):
+// the page notices (a dropped event stream, a failed request), says so in ONE
+// sentence, polls /health and picks up where it was — same cookie, same port —
+// without a new link. Nothing the user typed is dropped on the way.
+//
+// Pure helpers hang off window.SlidemindApp so the test can call them in-page.
+(function () {
+  "use strict";
+  const API = "/api/v1";
+  const AUTOSAVE_MS = 500;
+  const RETRY_MS = 2000; // a busy deck: the autosave tries again by itself
+  const POLL_MS = window.SLIDEMIND_POLL_MS ?? 30_000; // visible shared plan: GET-only refresh, never a PUT
+  const HEALTH_MS = window.SLIDEMIND_HEALTH_MS ?? 3_000; // offline: how often the page asks whether the workspace is back
+  const BUSY_HINT_MS = 60_000; // a deck still busy after this long: tell the user how to nudge the agent
+  const RECENT_TYPING_MS = 15_000; // keys in the Markdown editor this recently: an agent's ask waits in a toast
+  const OFFLINE_TEXT = "The workspace stopped — your work is kept. This page reconnects by itself.";
+  const SIGNED_OUT_TEXT = "Your workspace signed you out — ask your agent to open the slidemind workspace.";
+  const $app = document.getElementById("app");
+  const $conn = document.getElementById("conn");
+  const $banner = document.getElementById("conn-banner");
+  // the shell (top bar + deck sidebar) lives in index.html and is refreshed alongside every screen
+  const $library = document.getElementById("library");
+  const $more = document.getElementById("more");
+  const $search = document.getElementById("library-search");
+  const $inboxCount = document.getElementById("inbox-count");
+  const $inboxLink = document.getElementById("inbox-link");
+  const $metaTitle = document.getElementById("meta-title");
+  const $metaSub = document.getElementById("meta-sub");
+  const $topActions = document.getElementById("top-actions");
+  let csrf = window.SLIDEMIND_CSRF ?? null;
+  let sse = null;
+  let current = null; // { kind:"home"|"deck", deckId?, taskId?, tab? }
+  let planEditor = null; // the core-plan editor state while the Plan tab is open
+  let planFrame = null; // the plan iframe while the Plan tab is open (adapter page or the deck's plan.html)
+  let planSaving = null; // the plan frame's save in flight, so an answer can wait for it
+  let poll = null; // the 30s refresh timer for a visible shared plan
+  let planView = null; // { setMode } of the core plan tab, so an agent's ask can bring the page view forward
+  const answered = new Set(); // task ids this page answered: their continuation note survives re-renders
+  const deckNames = new Map(); // deck id → name, from the library, for toasts about decks not on screen
+
+  // ---------- pure helpers ----------
+  const h = (tag, attrs = {}, ...kids) => {
+    const el = document.createElement(tag);
+    for (const [k, v] of Object.entries(attrs)) {
+      if (v === null || v === undefined || v === false) continue;
+      if (k === "class") el.className = v;
+      else if (k.startsWith("on")) el.addEventListener(k.slice(2), v);
+      else el.setAttribute(k, v === true ? "" : v);
+    }
+    for (const kid of kids.flat()) if (kid !== null && kid !== undefined) el.append(kid.nodeType ? kid : document.createTextNode(String(kid)));
+    return el;
+  };
+  /** An inline 24×24 icon; `button svg` sizes it. innerHTML is ours, never user text. */
+  const icon = (d) => {
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    el.setAttribute("viewBox", "0 0 24 24");
+    el.innerHTML = d;
+    return el;
+  };
+  const ICON_CHEVRON = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m9 6 6 6-6 6"/>';
+  const ICON_REVEAL = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 17 17 7M8 7h9v9"/>';
+  const ICON_FOLDER = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>';
+  // Lucide copy / check: the copy icon people know from every chat and code block
+  const ICON_COPY = '<rect width="14" height="14" x="8" y="8" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>';
+  const ICON_CHECK = '<path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5"/>';
+  const ICON_TRASH = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M10 11v6M14 11v6"/>';
+  const LABEL = { approve: "Approve", "request-changes": "Request changes", done: "Done", comment: "Comment", resolve: "Resolve" };
+  /** Which phase (tab) a task belongs to and how the inbox names it; gate kinds are answered inside the gate itself. */
+  const PHASE = {
+    "plan-approval": { label: "Planning", tab: "plan", gate: true, ask: "The agent asks you to approve the plan. Approve it or send changes in the review below." },
+    "plan-edit": { label: "Plan editing", tab: "plan", gate: false, ask: "The agent asks you to edit the plan. Switch to Markdown, edit, then mark it done." },
+    "preview-review": { label: "Preview review", tab: "preview", gate: true, ask: "The agent asks you to review the slides. Pin comments, then approve or send changes in the review below." },
+    "sync-conflict": { label: "Sync conflict", tab: "plan", gate: true, ask: "The shared plan changed where you changed it. Resolve it in the panel below." },
+  };
+  const phaseOf = (kind) => PHASE[kind] ?? { label: kind, tab: "plan", gate: false, ask: "The agent asks you to answer this task." };
+  /** The tab a question is asked in: its phase's, or the deck's first when the deck has no such tab — never nowhere. */
+  const tabOf = (task, tabs) => (tabs.includes(phaseOf(task.kind).tab) ? phaseOf(task.kind).tab : tabs[0]);
+  const actionLabel = (a) => LABEL[a] ?? a;
+  /**
+   * An answer's button: what the click decides, in two words. The click also
+   * copies the message the user pastes to their agent; the dialog right after
+   * it says so — once, never on the button and never again under the bar (doc 21).
+   */
+  const answerLabel = (a) => ({ approve: "Approve", "request-changes": "Send changes", comment: "Send comment", done: "Done", resolve: "Resolve" })[a] ?? actionLabel(a);
+  const fmtTime = (iso) => (iso ? new Date(iso).toLocaleString() : "never");
+  /** The library chip for a deck's layout generation; null for a current one. */
+  const formatChip = (d) => (d?.format === "legacy" ? { text: "Legacy", cls: "bad" } : d?.format === "unknown" ? { text: "empty", cls: "" } : null);
+  /** Which tabs a deck view offers; only capabilities the view lists. A legacy deck has none (the header says why). */
+  function tabsFor(view) {
+    const tabs = [];
+    if (view.deck?.format === "legacy") return tabs;
+    if (view.adapter?.blocker || (view.views ?? []).some((v) => v.id === "plan") || view.adapter?.id === "core") tabs.push("plan");
+    if (view.preview !== false) tabs.push("preview");
+    return tabs;
+  }
+  /** What a refused request means to the person at the page: one plain sentence, never a code. */
+  const PLAIN = {
+    offline: OFFLINE_TEXT,
+    workspace_stopping: OFFLINE_TEXT,
+    stopping: OFFLINE_TEXT,
+    unauthorized: SIGNED_OUT_TEXT,
+    csrf_required: SIGNED_OUT_TEXT,
+    deck_busy: "Your agent is working on this deck right now — try again in a moment.",
+    approval_in_progress: "An approval of this plan is still being saved — your edits are kept; try again in a moment.",
+    missing_path: "This deck's folder is gone — it was moved or deleted.",
+    unknown_deck: "This deck is no longer in your library.",
+    not_found: "This isn't there any more.",
+    not_implemented: "This needs a newer workspace — ask your agent to open the slidemind workspace.",
+    extension_missing: "This deck needs a slidemind extension that isn't installed on this computer — ask your agent to set it up.",
+    extension_incompatible: "This deck needs a newer version of its slidemind extension — ask your agent to update it.",
+    login_required: "Your Microsoft 365 sign-in is missing or expired — ask your agent to sign you in to Microsoft 365, then try again.",
+  };
+  const plainError = (err) => PLAIN[err?.code] ?? err?.message ?? "Something went wrong.";
+  /** A deck whose plan lives on SharePoint (polls, refreshes on focus). */
+  const isShared = (view) => ["shared", "blocked"].includes(view?.remote?.plan?.state);
+  /** The queue's conflict record, if the plan is blocked on one. */
+  const conflictOf = (view) => view?.sync?.conflict ?? view?.remote?.sync?.conflict ?? null;
+  const jitter = (ms) => ms + Math.floor(Math.random() * ms * 0.2) - Math.floor(ms * 0.1);
+  /**
+   * Save status chip from a PUT result / sync state. `dirty`: true while a save
+   * is on its way or retries by itself, "failed" when it stopped and the
+   * message next to it says why. A plan nobody shares is simply "Saved" — the
+   * user's computer is the only place it could be.
+   */
+  function saveStatus(sync, dirty) {
+    if (dirty === "failed") return { text: "Not saved", cls: "warn" };
+    if (dirty) return { text: "Saving…", cls: "" };
+    if (!sync) return { text: "Saved", cls: "ok" };
+    if (sync.state === "pending" || sync.state === "sending" || sync.state === "applying") return { text: "Saving to SharePoint…", cls: "" };
+    if (sync.state === "blocked" || sync.state === "outcome-unknown" || sync.conflict) return { text: "Action needed", cls: "bad" };
+    if (sync.state === "idle" && sync.lastConfirmedAt) return { text: "Saved to SharePoint", cls: "ok" };
+    return { text: "Saved", cls: "ok" };
+  }
+  /**
+   * Copy text to the clipboard: the clipboard API, else a selected textarea
+   * (no permission needed — it works in Codex's own browser pane too). Resolves
+   * true only when a path REALLY copied: the page never says "Copied" otherwise.
+   */
+  function copyText(text) {
+    const fallback = () => {
+      try {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "");
+        ta.style.cssText = "position:fixed;top:-1000px;opacity:0;";
+        document.body.append(ta);
+        ta.select();
+        const ok = document.execCommand("copy") === true;
+        ta.remove();
+        return ok;
+      } catch {
+        return false;
+      }
+    };
+    try {
+      if (!navigator.clipboard?.writeText) return Promise.resolve(fallback());
+      return navigator.clipboard.writeText(text).then(() => true, () => fallback());
+    } catch {
+      return Promise.resolve(fallback());
+    }
+  }
+  /** A deck is unfinished until a .pptx sits at its root (what build-pptx / adopt leave there). */
+  const unfinished = (d) => !d.built;
+  const newestFirst = (tasks) => [...tasks].sort((a, b) => String(b.createdAt).localeCompare(String(a.createdAt)));
+  const backupKey = (deckId, baseHash) => `plan:${deckId}:${baseHash}`;
+
+  const SEP = /[\\/]/;
+  /** `/Users/me/x` -> `~/x`; a path outside home is left alone. The page has no homedir of its own — the deck list ships it. */
+  function tilde(p, home) {
+    if (!home || !p.startsWith(home)) return p;
+    const rest = p.slice(home.length);
+    return rest === "" || SEP.test(rest[0]) ? "~" + rest : p;
+  }
+  /** Sidebar headings: the shortest trailing segments that tell these folders apart.
+   *  Every deck folder is called "decks" (SLIDEMIND_DECKS / ./decks), so the basename alone names nothing. */
+  function groupLabels(dirs, home) {
+    if (dirs.length < 2) return dirs.map((d) => tilde(d, home)); // nothing to tell apart: name the folder in full
+    const segs = dirs.map((d) => tilde(d, home).split(SEP).filter(Boolean));
+    // ponytail: O(groups² · depth); groups are a handful — index the tails if that ever changes
+    return dirs.map((_, i) => {
+      for (let n = 1; n <= segs[i].length; n++) {
+        const tail = segs[i].slice(-n).join("/");
+        if (segs.some((s, j) => j !== i && s.slice(-n).join("/") === tail)) continue;
+        if (n < segs[i].length) return "…/" + tail;
+        return segs[i][0] === "~" ? tail : "/" + tail;
+      }
+      return tilde(dirs[i], home);
+    });
+  }
+  /** What a folder is CALLED in the sidebar: the distinguishing label minus its "…/" and the
+   *  "decks" basename every deck folder shares, so "…/alpha/decks" reads "alpha". The full path
+   *  stays on the row's tooltip; a folder that is only "decks" keeps that name. */
+  function folderTitle(label) {
+    const segs = label.replace(/^…\//, "").split(SEP).filter(Boolean);
+    if (segs.length > 1 && segs[segs.length - 1].toLowerCase() === "decks" && segs[segs.length - 2] !== "~") segs.pop();
+    return segs.length ? segs.join("/") : label;
+  }
+  /** Where a deck lives, in the top bar: the folder holding it, by its own name (the
+   *  sidebar heading's word for it); the full path is the tooltip. */
+  function deckFolder(p, home) {
+    const segs = tilde(p, home).split(SEP).filter(Boolean).slice(0, -1);
+    if (segs.length > 1 && segs[segs.length - 1].toLowerCase() === "decks" && segs[segs.length - 2] !== "~") segs.pop();
+    return segs.length ? segs[segs.length - 1] : "/";
+  }
+  const revealLabel = () => (/Mac/i.test(navigator.platform) ? "Reveal in Finder" : /Win/i.test(navigator.platform) ? "Show in Explorer" : "Open folder");
+
+  window.SlidemindApp = { tabsFor, saveStatus, answerLabel, newestFirst, actionLabel, backupKey, isShared, conflictOf, formatChip, unfinished, phaseOf, tabOf, groupLabels, folderTitle, deckFolder, tilde, plainError };
+
+  // ---------- transport ----------
+  class ApiError extends Error {
+    constructor(status, error) {
+      super(error?.message ?? `HTTP ${status}`);
+      this.status = status;
+      this.code = error?.code ?? "http_error";
+      this.details = error?.details ?? null;
+      this.retryable = !!error?.retryable;
+    }
+  }
+  async function api(method, p, body) {
+    const headers = {};
+    if (body !== undefined) headers["Content-Type"] = "application/json";
+    if (method !== "GET") headers["X-CSRF-Token"] = csrf ?? "";
+    let res;
+    try {
+      res = await fetch(API + p, { method, headers, body: body === undefined ? undefined : JSON.stringify(body), credentials: "same-origin" });
+    } catch (err) {
+      checkConnection(); // the banner + the /health poll take it from here
+      throw new ApiError(0, { code: "offline", message: OFFLINE_TEXT });
+    }
+    let json = null;
+    try {
+      json = await res.json();
+    } catch {
+      // not JSON (e.g. 404 from the shell)
+    }
+    if (!res.ok || json?.ok === false) {
+      const err = new ApiError(res.status, json?.error ?? { code: res.status === 501 ? "not_implemented" : "http_error", message: `HTTP ${res.status}` });
+      // signed out, or a workspace on its way out: either way the connection says so, once
+      if (res.status === 401 || err.code === "workspace_stopping" || err.code === "stopping") checkConnection();
+      throw err;
+    }
+    return json;
+  }
+  /** A failure the connection banner already explains: the screen keeps what it shows. */
+  const connectionLost = (err) => ["offline", "unauthorized", "workspace_stopping", "stopping"].includes(err?.code);
+  const errorBox = (err, extra) => h("p", { class: "error", "data-code": err.code }, plainError(err), extra ? " " : "", extra ?? "");
+
+  // ---------- connection: live / offline / signed out ----------
+  // One owner for "can this page talk to its workspace": the event stream's
+  // error and every failed request end up here. Offline polls /health; back,
+  // it re-reads the session (the cookie survives a restart) and reconnects.
+  let connState = "connecting"; // connecting | live | offline | signed-out
+  let started = false; // the page is up (start() ran): only then is there an event stream to bring back
+  let connTimer = null;
+  let connChecking = null;
+  const reconnectHooks = new Set(); // work to resume once the workspace answers again (an unsaved plan)
+  function setBanner(text, cls) {
+    if (!$banner) return;
+    $banner.textContent = text ?? "";
+    $banner.className = `conn-banner ${cls ?? ""}`;
+    $banner.hidden = !text;
+  }
+  function setConn(text, cls) {
+    $conn.textContent = text;
+    $conn.className = `chip ${cls}`;
+  }
+  function goOffline() {
+    connState = "offline";
+    setConn("Workspace offline — reconnecting…", "warn");
+    setBanner(OFFLINE_TEXT, "warn");
+    clearTimeout(connTimer);
+    connTimer = setTimeout(checkConnection, HEALTH_MS);
+  }
+  function goSignedOut() {
+    connState = "signed-out";
+    if (sse) sse.close();
+    sse = null;
+    setConn("Signed out", "bad");
+    setBanner(SIGNED_OUT_TEXT, "bad");
+    // a sign-in in another tab of this browser sets the same cookie: notice it
+    clearTimeout(connTimer);
+    connTimer = setTimeout(checkConnection, HEALTH_MS * 2);
+  }
+  function goLive() {
+    connState = "live";
+    clearTimeout(connTimer);
+    setBanner(null);
+    if (started && !sse) connectEvents(); // its onopen refreshes what the page shows
+    // whatever failed while it was away (or on a one-off blip) goes again now
+    for (const fn of [...reconnectHooks]) fn();
+  }
+  /** Is the workspace up, and is this page still signed in to it? Settles the connection state. */
+  function checkConnection() {
+    if (connChecking) return connChecking;
+    connChecking = (async () => {
+      let health = null;
+      try {
+        const r = await fetch("/health", { cache: "no-store" });
+        health = r.ok ? await r.json() : null;
+      } catch {
+        health = null;
+      }
+      if (!health || health.draining) return goOffline();
+      let r;
+      try {
+        r = await fetch(API + "/session", { credentials: "same-origin", cache: "no-store" });
+      } catch {
+        return goOffline();
+      }
+      if (r.status === 401) return goSignedOut();
+      if (!r.ok) return goOffline();
+      const j = await r.json().catch(() => null);
+      if (j?.csrfToken) {
+        csrf = j.csrfToken;
+        try {
+          sessionStorage.setItem("slidemind.csrf", csrf);
+        } catch {
+          // per tab only
+        }
+      }
+      goLive();
+    })().finally(() => (connChecking = null));
+    return connChecking;
+  }
+
+  // ---------- attention: the agent just asked ----------
+  // "● " in the tab title until the user is back on the page.
+  let unseen = false;
+  let baseTitle = document.title;
+  function setTitle(t) {
+    baseTitle = t;
+    document.title = (unseen ? "● " : "") + t;
+  }
+  function markSeen() {
+    if (!unseen || document.visibilityState === "hidden") return;
+    unseen = false;
+    document.title = baseTitle;
+  }
+  // One toast per deck + kind: a repeated ask replaces it, never stacks.
+  const attnToasts = new Map();
+  function deckToast(key, text, run) {
+    attnToasts.get(key)?.remove();
+    attnToasts.set(key, toast(text, "attn", { label: "Open", run, sticky: true }));
+  }
+  function attentionToast(e, run) {
+    const what = e.kind === "preview-review" ? "slides" : "plan";
+    deckToast(`${e.deckId}:${e.kind}`, `Your agent asks you to review the ${what} of ${e.deckName ?? "a deck"}`, run);
+  }
+  const deckName = async (deckId) => deckNames.get(deckId) ?? (await api("GET", `/decks/${deckId}`).then((v) => v.deck.name, () => null)) ?? "a deck";
+  /**
+   * The agent opened a deck (`slidemind workspace <deck>` with this page already
+   * up): the page goes there — unless the user is typing in the Markdown
+   * editor, then the deck waits in a toast.
+   */
+  async function focusDeck(e) {
+    unseen = true;
+    setTitle(baseTitle);
+    if (current?.kind === "deck" && current.deckId === e.deckId) return;
+    const href = `/deck/${e.deckId}`;
+    if (!userEditing()) return navigate(href);
+    deckToast(`${e.deckId}:focus`, `Your agent opened ${await deckName(e.deckId)}`, () => navigate(href));
+  }
+  /** Typing in the Markdown editor (unsaved, or keys in the last seconds): nothing may move the page under it. */
+  function userEditing() {
+    const ed = planEditor;
+    return !!ed && (ed.dirty || (ed.editing && Date.now() - (ed.typedAt ?? 0) < RECENT_TYPING_MS));
+  }
+  /** Move to a tab of the deck on screen; edits typed in the plan are saved first, never dropped. */
+  async function showTab(t) {
+    if (planEditor?.dirty) await planEditor.flush?.();
+    if (planEditor?.dirty && !confirm("You have unsaved plan changes. Leave anyway?")) return;
+    current.tab = t;
+    refresh(true);
+  }
+  async function attention(e) {
+    const tab = e.kind === "preview-review" ? "preview" : "plan";
+    unseen = true;
+    setTitle(baseTitle);
+    const href = `/deck/${e.deckId}/${tab}`;
+    const here = () => current?.kind === "deck" && current.deckId === e.deckId;
+    // bring the question forward: its tab, and the page view of the plan
+    const show = () => {
+      if (!here()) return navigate(href);
+      if (current.tab !== tab) return showTab(tab);
+      if (tab === "plan") planView?.setMode("view");
+    };
+    if (here() && !userEditing()) {
+      // already on its tab, the gate's own heartbeat moves it into the new round (keeping what the user typed)
+      show();
+      return refreshDeckChrome();
+    }
+    attentionToast({ ...e, deckName: await deckName(e.deckId) }, show);
+    if (here()) refreshDeckChrome();
+  }
+
+  /** Every screen renders into one scrolling page column under the top bar. */
+  const page = (...kids) => h("div", { class: "page" }, ...kids);
+  // the deck page lays out as rows + one flexible tab body, so the plan/preview frame keeps the screen
+  const deckPage = (...kids) => h("div", { class: "page deck" }, ...kids);
+  /** replaceChildren that drops null/undefined (the DOM would print them as "null"). */
+  const fill = ($el, ...kids) => $el.replaceChildren(...kids.flat().filter((k) => k !== null && k !== undefined));
+  const chip = (text, cls = "", attrs = {}) => h("span", { class: `chip ${cls}`, ...attrs }, text);
+  /** The SharePoint mark + label; a link when the item has one. */
+  const sharepointChip = (link, text = "SharePoint", note = null) => h(link ? "a" : "span", { class: "chip sp", "data-tip": [link ? "Open on SharePoint" : null, note].filter(Boolean).join("\n") || null, ...(link ? { href: link, target: "_blank", rel: "noopener" } : {}) }, h("img", { src: "/ui/sharepoint.svg", alt: "" }), h("span", { class: "lbl" }, text));
+  /** The top bar is the page's one header: its name, a line under it (text or a node), and the page's own buttons and chips beside it. */
+  const setMeta = (title, sub, actions = []) => {
+    $metaTitle.textContent = title;
+    fill($metaSub, sub);
+    fill($topActions, actions);
+  };
+
+  async function boot() {
+    // index.html already exchanged the link key (window.SLIDEMIND_CSRF)
+    // or re-read this tab's token from the cookie's session.
+    if (!csrf) {
+      await checkConnection();
+      if (connState !== "live") {
+        $app.replaceChildren(page(h("p", { class: "error", id: "signed-out" }, connState === "signed-out" ? SIGNED_OUT_TEXT : OFFLINE_TEXT)));
+        // the connection loop keeps trying; once it answers, the page starts for real
+        reconnectHooks.add(function started() {
+          reconnectHooks.delete(started);
+          start();
+        });
+        return;
+      }
+    }
+    start();
+  }
+  function start() {
+    started = true;
+    document.getElementById("add-folder").addEventListener("click", addFolder);
+    sidebarGrip();
+    $search.addEventListener("input", () => {
+      libraryQuery = $search.value;
+      loadLibrary();
+    });
+    $more.addEventListener("click", () => loadLibrary(true));
+    sidebarKeys();
+    for (const b of document.querySelectorAll("#library-filter button")) {
+      b.addEventListener("click", () => {
+        libraryFilter = b.dataset.filter;
+        try {
+          localStorage.setItem("slidemind.library.filter", libraryFilter);
+        } catch {
+          // ignore
+        }
+        loadLibrary();
+      });
+    }
+    connectEvents();
+    window.addEventListener("popstate", route);
+    document.addEventListener("click", (e) => {
+      const a = e.target.closest("a[data-nav]");
+      if (!a || e.metaKey || e.ctrlKey) return;
+      e.preventDefault();
+      navigate(a.getAttribute("href"));
+    });
+    const onVisible = () => {
+      if (document.visibilityState === "hidden") return;
+      markSeen();
+      if (current?.kind === "deck" && current.shared) remoteRefresh(current.deckId);
+    };
+    window.addEventListener("focus", onVisible);
+    document.addEventListener("visibilitychange", onVisible);
+    document.addEventListener("pointerdown", markSeen);
+    document.addEventListener("keydown", markSeen);
+    window.addEventListener("beforeunload", (e) => {
+      if (planEditor?.dirty) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    });
+    route();
+  }
+
+  // The stream is recreated by us, never left to the browser: after a restart
+  // its retry would meet a 401 or a closed stream and stop for good while the
+  // chip still said "reconnecting". An error hands over to checkConnection,
+  // which brings it back once the workspace answers (with a growing pause
+  // while it keeps failing, so a flapping workspace is not hammered).
+  let sseFailures = 0;
+  let sseOpened = 0;
+  function connectEvents() {
+    if (sse) sse.close();
+    const es = new EventSource(API + "/events");
+    sse = es;
+    es.onopen = () => {
+      sseOpened = Date.now();
+      connState = "live";
+      setConn("Connected", "ok");
+      // reconnect: never trust what we may have missed
+      refresh();
+    };
+    es.onerror = () => {
+      if (sse !== es) return;
+      es.close();
+      sse = null;
+      // a stream that held for a while was healthy: start the pause over
+      sseFailures = Date.now() - sseOpened > 30_000 ? 1 : sseFailures + 1;
+      setConn("Reconnecting…", "warn");
+      setTimeout(checkConnection, Math.min(1000 * 2 ** (sseFailures - 1), 15_000) - 1000);
+    };
+    es.onmessage = (ev) => {
+      let e = null;
+      try {
+        e = JSON.parse(ev.data);
+      } catch {
+        return;
+      }
+      if (!current) return;
+      if (e.type === "attention") return attention(e);
+      if (e.type === "focus") return focusDeck(e);
+      if (current.kind === "home") return refresh();
+      if (e.deckId && e.deckId !== current.deckId) return refreshShell(); // another deck moved: sidebar + inbox badge only
+      if (e.type === "tasks") {
+        // a task moved: redraw the header + "your turn" and the shell, never the gate frame
+        refreshShell();
+        refreshDeckChrome();
+        return;
+      }
+      // a plan / preview change: the header follows; a live gate frame follows by itself
+      // (its heartbeat sees the new round and reloads when the user is not mid-edit)
+      refresh();
+    };
+  }
+
+  function navigate(href) {
+    if (planEditor?.dirty && !confirm("You have unsaved plan changes. Leave anyway?")) return;
+    history.pushState(null, "", href);
+    route();
+  }
+  function route() {
+    planEditor = null;
+    planFrame = null;
+    planView = null;
+    clearTimeout(poll);
+    poll = null;
+    // /deck/<id>/plan|preview names the tab; an older /tasks/<id> link opens that task's tab
+    const m = location.pathname.match(/^\/deck\/([^/]+)(?:\/(plan|preview)\b|\/tasks\/([^/]+))?/);
+    current = m ? { kind: "deck", deckId: m[1], taskId: m[3] ?? null, tab: m[2] ?? (m[3] ? null : current?.deckId === m[1] ? current.tab : "plan") } : { kind: "home" };
+    refresh(true);
+  }
+  let refreshing = null;
+  /**
+   * Re-GET and re-render. An advisory refresh never wipes a dirty plan buffer
+   * and never reloads a live gate frame (it keeps its own state and follows its
+   * own heartbeat): it redraws the deck's header, tab marks and "your turn".
+   */
+  function refresh(force = false) {
+    if (!current) return Promise.resolve();
+    refreshShell();
+    if (!force && current?.kind === "deck" && hasLiveFrame()) return refreshDeckChrome();
+    if (refreshing) return refreshing;
+    refreshing = (current.kind === "home" ? renderHome() : renderDeck())
+      .catch((err) => {
+        if (connectionLost(err)) return; // the banner says it; what is on screen stays until the workspace is back
+        $app.replaceChildren(page(errorBox(err)));
+      })
+      .finally(() => (refreshing = null));
+    return refreshing;
+  }
+
+  // ---------- shell: deck sidebar + inbox badge ----------
+  let libraryQuery = "";
+  let libraryCursor = null;
+  let libraryFilter = "all"; // all | unfinished — remembered per browser
+  let libraryHome = null; // the daemon's home dir, for ~-collapsing a path outside the sidebar
+  let collapsed = new Set(); // folder paths folded shut — remembered per browser
+  try {
+    libraryFilter = localStorage.getItem("slidemind.library.filter") === "unfinished" ? "unfinished" : "all";
+    collapsed = new Set(JSON.parse(localStorage.getItem("slidemind.library.collapsed") || "[]"));
+  } catch {
+    // per-viewer convenience only
+  }
+  const rememberCollapsed = () => {
+    try {
+      localStorage.setItem("slidemind.library.collapsed", JSON.stringify([...collapsed]));
+    } catch {
+      // ignore
+    }
+  };
+  /** The tab on screen holds a gate frame (or a dirty plan buffer) that a re-render would reset. */
+  function hasLiveFrame() {
+    if (current?.tab === "plan") return !!(planEditor?.dirty || planFrame);
+    if (current?.tab === "preview") return !!document.getElementById("preview-view");
+    return false;
+  }
+  function refreshShell() {
+    $inboxLink.setAttribute("aria-current", current?.kind === "home" ? "page" : "false");
+    loadLibrary();
+    api("GET", "/tasks?status=pending").then((r) => ($inboxCount.textContent = r.tasks.length ? String(r.tasks.length) : ""), () => ($inboxCount.textContent = ""));
+  }
+  function deckRow(d, { nested = false } = {}) {
+    const fmt = formatChip(d);
+    const active = current?.kind === "deck" && current.deckId === d.id;
+    // the link carries only the name (its ::after stretches over the row); the status and the bin stay outside it
+    return h(
+      "li",
+      { class: `deck-row${d.missing ? " missing" : ""}${nested ? " nested" : ""}`, "data-format": d.format ?? "", "aria-current": active ? "page" : "false", "data-tip": d.missing ? `${d.path}\nThis folder is not there any more` : d.path },
+      h("span", { class: `deck-ico${d.remote ? " sp" : ""}`, "data-tip": d.remote ? "On SharePoint" : null }),
+      h("a", { href: `/deck/${d.id}`, "data-nav": true, "data-side-item": true, class: "deck-name", "data-tip": d.path }, d.name ?? d.path),
+      d.remote ? h("img", { src: "/ui/sharepoint.svg", alt: "On SharePoint", "data-tip": "On SharePoint", class: "sp-mark" }) : null,
+      h(
+        "span",
+        { class: "deck-sub" },
+        d.taskCount ? h("span", { class: "badge", "data-tip": `${d.taskCount} question${d.taskCount === 1 ? "" : "s"} waiting for you` }, String(d.taskCount)) : null,
+        d.missing ? h("span", { class: "deck-state" }, "missing") : null,
+        fmt ? chip(fmt.text, fmt.cls, { "data-legacy": d.format === "legacy" ? "" : null }) : null,
+      ),
+      // drops the registry entry only — the deck folder is the user's, and no route deletes it
+      h("button", { class: "deck-x", "data-tip": "Remove from library", "aria-label": `Remove ${d.name ?? d.path} from the library`, onclick: (e) => {
+        e.preventDefault(); // the row's stretched link would otherwise open the deck
+        e.stopPropagation();
+        removeDeckDialog(d);
+      } }, icon(ICON_TRASH)),
+    );
+  }
+  /** A folder heading: the disclosure toggles its decks, the arrow reveals it in the OS file manager. */
+  function groupRow(dir, decks, label, open) {
+    const title = folderTitle(label);
+    const full = tilde(dir, libraryHome);
+    const $toggle = h(
+      "button",
+      { class: "side-group-name", "data-side-item": true, "aria-expanded": String(open), "data-tip": full, onclick: () => {
+        if (collapsed.has(dir)) collapsed.delete(dir);
+        else collapsed.add(dir);
+        rememberCollapsed();
+        loadLibrary();
+      } },
+      icon(ICON_CHEVRON),
+      h("span", { class: "side-group-txt" }, title),
+      h("span", { class: "side-group-n" }, String(decks.length)),
+    );
+    return h(
+      "li",
+      { class: `side-group${open ? "" : " closed"}`, "data-dir": dir },
+      $toggle,
+      // the folder is revealed through one of its OWN decks: no route takes a bare path
+      h("button", { class: "icon side-group-reveal", "data-tip": `${revealLabel()}\n${full}`, "aria-label": `${revealLabel()}: ${full}`, onclick: () => api("POST", `/decks/${decks[0].id}/reveal`, { parent: true }).catch((err) => toast(plainError(err), "bad")) }, icon(ICON_REVEAL)),
+    );
+  }
+  async function loadLibrary(append = false) {
+    try {
+      const r = await api("GET", `/decks?q=${encodeURIComponent(libraryQuery)}&limit=100${append && libraryCursor ? `&cursor=${libraryCursor}` : ""}`);
+      libraryCursor = r.nextCursor;
+      libraryHome = r.home ?? libraryHome;
+      for (const d of r.decks) deckNames.set(d.id, d.name ?? d.path);
+      // grouped by parent folder: the folder heading is what tells two "q3-review"s apart
+      const parent = (p) => p.replace(/[\\/][^\\/]+$/, "");
+      // a deck whose folder is gone is not a deck to open: it stays out of the list
+      // (its registry entry is forgotten from the page its link still reaches)
+      const present = r.decks.filter((d) => !d.missing);
+      const shown = libraryFilter === "unfinished" ? present.filter(unfinished) : present;
+      const groups = new Map();
+      for (const d of shown) {
+        const key = parent(d.path);
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key).push(d);
+      }
+      // one folder only = nothing to tell apart: no heading
+      const entries = [...groups.entries()].sort(([a], [b]) => a.localeCompare(b));
+      const labels = groupLabels(entries.map(([dir]) => dir), r.home);
+      // a folded folder hides its decks — except while searching (a match must show) and
+      // the one holding the deck on screen (it is revealed, as any file tree does)
+      const rows = entries.flatMap(([dir, decks], i) => {
+        if (groups.size < 2) return decks.map((d) => deckRow(d));
+        const open = !collapsed.has(dir) || !!libraryQuery || decks.some((d) => current?.kind === "deck" && current.deckId === d.id);
+        return [groupRow(dir, decks, labels[i], open), ...(open ? decks.map((d) => deckRow(d, { nested: true })) : [])];
+      });
+      const scanning = r.scanning?.length ? h("li", { class: "side-empty", id: "library-scanning" }, h("span", { class: "spin" }), " Scanning your decks…") : null;
+      const scanned = r.roots?.length ? ` Scanned: ${r.roots.join(", ")}.` : "";
+      if (append) $library.append(...rows);
+      else $library.replaceChildren(...[scanning, ...rows, rows.length || scanning ? null : h("li", { class: "side-empty", id: "library-empty" }, libraryQuery ? "No decks match." : libraryFilter === "unfinished" && present.length ? "Every deck here has its .pptx." : `No decks yet. Add a local folder or run a slidemind command in a deck.${scanned}`)].filter(Boolean));
+      for (const b of document.querySelectorAll("#library-filter button")) b.setAttribute("aria-pressed", String(b.dataset.filter === libraryFilter));
+      $more.hidden = !libraryCursor;
+    } catch (err) {
+      if (!connectionLost(err)) $library.replaceChildren(h("li", { class: "side-empty" }, errorBox(err)));
+    }
+  }
+
+  // ---------- home: the inbox ----------
+  async function renderHome() {
+    // fetched before anything is replaced: offline, the page on screen stays, its header with it
+    const r = await api("GET", "/tasks?status=pending");
+    setTitle("Inbox · slidemind");
+    setMeta("Inbox", "Everything your agent asked you, newest first");
+    const rows = newestFirst(r.tasks).map((t) =>
+      h(
+        "li",
+        { class: "task", "data-kind": t.kind, "data-tip": t.deckPath ?? null },
+        // in-page navigation to the card itself (it opens its tab, marked as the one clicked)
+        h("div", { class: "card-head" }, h("a", { href: `/deck/${t.deckId}/tasks/${t.id}`, "data-nav": true }, `${phaseOf(t.kind).label} · ${t.deckName ?? "deck"}`), h("span", { class: "path" }, fmtTime(t.createdAt))),
+      ),
+    );
+    const $inbox = h("ul", { class: "list", id: "inbox" }, ...(rows.length ? rows : [h("li", { class: "muted", id: "inbox-empty" }, "Nothing waiting for you.")]));
+    $app.replaceChildren(page($inbox));
+  }
+  // ---------- sidebar keyboard: ⌘K or / finds, ↑↓ walk the list, Enter opens ----------
+  function sidebarKeys() {
+    const typing = (el) => el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable);
+    const items = () => [...document.querySelectorAll("#side [data-side-item]")].filter((el) => el.offsetParent !== null);
+    const step = (from, dir) => {
+      const all = items();
+      const i = all.indexOf(from);
+      const next = all[i < 0 ? (dir > 0 ? 0 : all.length - 1) : Math.min(Math.max(i + dir, 0), all.length - 1)];
+      next?.focus();
+    };
+    document.addEventListener("keydown", (e) => {
+      if (e.defaultPrevented) return;
+      const inSearch = e.target === $search;
+      if (((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "k") || (e.key === "/" && !typing(e.target) && !e.metaKey && !e.ctrlKey && !e.altKey)) {
+        e.preventDefault();
+        // on a small screen the list is a drawer: open it first so the field is on screen
+        if (window.innerWidth <= 1000 && !document.body.classList.contains("side-open")) document.getElementById("side-toggle")?.click();
+        $search.focus();
+        $search.select();
+        return;
+      }
+      if (inSearch) {
+        if (e.key === "Escape") {
+          if ($search.value) {
+            $search.value = "";
+            libraryQuery = "";
+            loadLibrary();
+          } else $search.blur();
+          e.preventDefault();
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          step(null, 1);
+        }
+        return;
+      }
+      const item = e.target.closest?.("#side [data-side-item]");
+      if (!item) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        step(item, e.key === "ArrowDown" ? 1 : -1);
+      } else if (e.key === "ArrowRight" && item.getAttribute("aria-expanded") === "false") item.click();
+      else if (e.key === "ArrowLeft" && item.getAttribute("aria-expanded") === "true") item.click();
+      else if (e.key === "ArrowLeft" && item.matches("a.deck-name")) {
+        let li = item.closest("li")?.previousElementSibling; // up to the folder this deck sits in
+        while (li && !li.classList.contains("side-group")) li = li.previousElementSibling;
+        li?.querySelector(".side-group-name")?.focus();
+      }
+    });
+  }
+
+  // ---------- sidebar width: drag the full-height grip on its right edge ----------
+  function sidebarGrip() {
+    const $side = document.getElementById("side");
+    const $grip = document.getElementById("side-grip");
+    if (!$side || !$grip) return;
+    // Small screens: the list is a drawer behind the top-bar button; picking a
+    // deck or tapping outside closes it.
+    const $toggle = document.getElementById("side-toggle");
+    const setOpen = (open) => {
+      document.body.classList.toggle("side-open", open);
+      $toggle?.setAttribute("aria-expanded", String(open));
+    };
+    $toggle?.addEventListener("click", () => setOpen(!document.body.classList.contains("side-open")));
+    document.addEventListener("click", (e) => {
+      if (!document.body.classList.contains("side-open")) return;
+      if (e.target.closest("#side-toggle")) return;
+      if (!e.target.closest("#side") || e.target.closest("a[data-nav]")) setOpen(false);
+    });
+    const apply = (w) => document.documentElement.style.setProperty("--sm-side", `${Math.round(Math.min(Math.max(w, 200), window.innerWidth / 2))}px`);
+    try {
+      const saved = Number(localStorage.getItem("slidemind.sidebar"));
+      if (saved) apply(saved);
+    } catch {
+      // per-viewer convenience only
+    }
+    $grip.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      $grip.setPointerCapture(e.pointerId);
+      document.body.classList.add("resizing");
+      const move = (ev) => apply(ev.clientX);
+      const up = () => {
+        $grip.removeEventListener("pointermove", move);
+        $grip.removeEventListener("pointerup", up);
+        $grip.removeEventListener("pointercancel", up);
+        document.body.classList.remove("resizing");
+        try {
+          localStorage.setItem("slidemind.sidebar", String($side.getBoundingClientRect().width));
+        } catch {
+          // ignore
+        }
+      };
+      $grip.addEventListener("pointermove", move);
+      $grip.addEventListener("pointerup", up);
+      $grip.addEventListener("pointercancel", up);
+    });
+    $grip.addEventListener("dblclick", () => {
+      apply(272);
+      try {
+        localStorage.removeItem("slidemind.sidebar");
+      } catch {
+        // ignore
+      }
+    });
+  }
+
+  // ---------- dialogs (native <dialog>, styled like the gate popover) ----------
+  /**
+   * One text field + Cancel/submit. `run(value)` is awaited on submit: it
+   * resolves to close, or throws to show the error inside the dialog and keep
+   * what was typed. Closing without submitting runs nothing.
+   */
+  function dialog({ title, hint, placeholder, submit = "OK", multiline = false, body = null, input = true, danger = false, run }) {
+    // `input: false` makes it a confirm — same popover, no field, `run()` takes no value
+    const $in = input ? h(multiline ? "textarea" : "input", { type: "text", id: "dialog-input", placeholder, spellcheck: multiline ? "true" : "false", autocomplete: "off" }) : null;
+    const $err = h("p", { class: "error", id: "dialog-error", hidden: true });
+    const $ok = h("button", { class: danger ? "danger" : "primary", type: "submit" }, submit);
+    const $dlg = h(
+      "dialog",
+      { class: "dlg", id: "dialog" },
+      h(
+        "form",
+        {
+          onsubmit: async (e) => {
+            e.preventDefault();
+            const value = $in ? $in.value.trim() : null;
+            if ($in && !value) return $in.focus();
+            $ok.disabled = true;
+            $err.hidden = true;
+            try {
+              await run(value);
+              $dlg.close();
+            } catch (err) {
+              $err.textContent = plainError(err);
+              $err.hidden = false;
+              ($in ?? $ok).focus();
+            } finally {
+              $ok.disabled = false;
+            }
+          },
+        },
+        h("h3", {}, title),
+        hint ? h("p", { class: "muted" }, hint) : null,
+        $in,
+        body ? body($in) : null,
+        $err,
+        h("div", { class: "row end" }, h("button", { type: "button", onclick: () => $dlg.close() }, "Cancel"), $ok),
+      ),
+    );
+    $dlg.addEventListener("close", () => $dlg.remove());
+    document.body.append($dlg);
+    $dlg.showModal();
+    ($in ?? $ok).focus();
+    return $dlg;
+  }
+  /**
+   * A short bottom-right note that fades by itself. With `action` it carries one
+   * button (`{ label, run }`); `sticky` keeps it until clicked or dismissed.
+   */
+  function toast(text, cls = "", action = null) {
+    const $t = h("div", { class: `toast ${cls}`, role: "status" }, h("span", {}, text));
+    if (action) {
+      $t.append(
+        h("button", { class: "mini primary", onclick: () => ($t.remove(), action.run()) }, action.label),
+        h("button", { class: "icon toast-x", "data-tip": "Dismiss", "aria-label": "Dismiss", onclick: () => $t.remove() }, icon('<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M6 6l12 12M18 6 6 18"/>')),
+      );
+    }
+    document.body.append($t);
+    if (!action?.sticky) setTimeout(() => $t.remove(), 5000);
+    return $t;
+  }
+
+  // ---------- tooltip ----------
+  // Every hint on this page is a `data-tip`, never a native `title` (the OS
+  // draws that one late, small and unstyled). One tooltip serves them all: it
+  // appears after a short delay — at once when the pointer moves from one hint
+  // to the next — sits under its element (over it when there is no room; at the
+  // pointer for a tall element like the sidebar grip), and goes on any click,
+  // key, scroll or re-render. Keyboard focus shows it too. It lives in the top
+  // layer when the browser has one, so a hint inside a modal dialog is not
+  // painted under it.
+  const TIP_DELAY_MS = 450;
+  const TIP_WARM_MS = 500; // a hint closed this recently: the next one shows without the delay
+  const TIP_GAP = 6;
+  const TIP_MARGIN = 8;
+  const $tip = h("div", { class: "tip", id: "sm-tip", role: "tooltip", popover: "manual" });
+  const tipLayer = typeof $tip.showPopover === "function";
+  let tipFor = null; // the element whose hint is showing, or waiting out the delay
+  let tipMuted = null; // the element just clicked: no hint until the pointer has left it
+  let tipTimer = 0;
+  let tipWatch = 0;
+  let tipClosedAt = 0; // when the pointer last moved off a showing hint
+  let tipPointer = null; // { x, y } while the pointer is on the page
+  function armTip(el, byPointer) {
+    if (el === tipFor) return;
+    if ($tip.classList.contains("on")) tipClosedAt = Date.now();
+    hideTip();
+    if (!el) return;
+    tipFor = el;
+    tipTimer = setTimeout(() => showTip(el, byPointer), Date.now() - tipClosedAt < TIP_WARM_MS ? 0 : TIP_DELAY_MS);
+  }
+  function showTip(el, byPointer) {
+    const text = el.getAttribute("data-tip");
+    if (!text || !el.isConnected) return hideTip();
+    // a path wraps after its separators, not inside a folder name
+    $tip.replaceChildren(...text.split(/(?<=[\\/])/).flatMap((part, i) => (i ? [h("wbr"), part] : [part])));
+    $tip.classList.remove("on");
+    if (!$tip.isConnected) document.body.append($tip);
+    if (tipLayer) {
+      // re-opened, so it lands above a modal dialog opened since it last showed
+      if ($tip.matches(":popover-open")) $tip.hidePopover();
+      $tip.showPopover();
+    }
+    // measured at the origin: where it last stood would narrow its fit-content width
+    $tip.style.left = $tip.style.top = "0px";
+    const r = el.getBoundingClientRect();
+    const at = byPointer && tipPointer && r.height > 48 ? { left: tipPointer.x, right: tipPointer.x, top: tipPointer.y, bottom: tipPointer.y + 16 } : r;
+    const t = $tip.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth;
+    const vh = document.documentElement.clientHeight;
+    const left = Math.max(TIP_MARGIN, Math.min((at.left + at.right) / 2 - t.width / 2, vw - TIP_MARGIN - t.width));
+    const below = at.bottom + TIP_GAP;
+    const above = at.top - TIP_GAP - t.height;
+    const top = below + t.height <= vh - TIP_MARGIN || above < TIP_MARGIN ? below : above;
+    $tip.style.left = `${Math.round(left)}px`;
+    $tip.style.top = `${Math.round(top)}px`;
+    $tip.classList.add("on");
+    if (!el.hasAttribute("aria-describedby")) el.setAttribute("aria-describedby", "sm-tip");
+    // a re-render replaces the element under the pointer without a pointer event
+    clearInterval(tipWatch);
+    tipWatch = setInterval(() => {
+      if (!el.isConnected || !el.getAttribute("data-tip")) hideTip();
+      else if (el.getAttribute("data-tip") !== $tip.textContent) showTip(el, byPointer);
+    }, 250);
+  }
+  function hideTip() {
+    clearTimeout(tipTimer);
+    clearInterval(tipWatch);
+    $tip.classList.remove("on");
+    if (tipLayer && $tip.matches(":popover-open")) $tip.hidePopover();
+    if (tipFor?.getAttribute("aria-describedby") === "sm-tip") tipFor.removeAttribute("aria-describedby");
+    tipFor = null;
+  }
+  document.addEventListener("pointermove", (e) => (tipPointer = { x: e.clientX, y: e.clientY }), { passive: true });
+  document.addEventListener("pointerover", (e) => {
+    if (e.pointerType === "touch") return;
+    const el = e.target.closest?.("[data-tip]") ?? null;
+    if (el && el === tipMuted) return;
+    tipMuted = null;
+    armTip(el, true);
+  });
+  document.addEventListener("pointerout", (e) => {
+    if (e.relatedTarget) return;
+    tipPointer = null; // left the window
+    hideTip();
+  });
+  document.addEventListener("pointerdown", (e) => {
+    tipMuted = e.target.closest?.("[data-tip]") ?? null;
+    hideTip();
+  }, { capture: true, passive: true });
+  document.addEventListener("focusin", (e) => {
+    const el = e.target.closest?.("[data-tip]");
+    if (el && e.target.matches(":focus-visible")) armTip(el, false);
+  });
+  document.addEventListener("focusout", (e) => {
+    if (tipFor && tipFor.contains(e.target)) hideTip();
+  });
+  for (const type of ["keydown", "scroll", "wheel"]) document.addEventListener(type, () => hideTip(), { capture: true, passive: true });
+  if (typeof window.addEventListener === "function") for (const type of ["resize", "blur"]) window.addEventListener(type, () => hideTip());
+
+  /** A Browse… button: the daemon opens the OS folder dialog and the answer fills the field. */
+  function browseButton($in) {
+    const $msg = h("span", { class: "muted", id: "fs-pick-note" }, "opens your system's folder dialog");
+    const $browse = h("button", { type: "button", id: "fs-browse", onclick: async () => {
+      $browse.disabled = true;
+      $msg.textContent = "Choose the folder in the dialog that just opened…";
+      try {
+        const r = await api("POST", "/fs/pick", {});
+        if (r.path) $in.value = r.path;
+        $msg.textContent = r.path ? "" : "No folder chosen.";
+      } catch (err) {
+        $msg.textContent = err.status === 404 ? PLAIN.not_implemented : plainError(err);
+      } finally {
+        $browse.disabled = false;
+      }
+    } }, "Browse…");
+    return h("div", { class: "row" }, $browse, $msg);
+  }
+  /** The deck goes to the OS trash, entry and folder; `trash: false` drops the entry only. */
+  function removeDeckDialog(deck, { trash = true, after = null } = {}) {
+    dialog({
+      title: trash ? `Delete ${deck.name ?? deck.path}?` : `Remove ${deck.name ?? deck.path} from the library?`,
+      input: false,
+      danger: true,
+      submit: trash ? "Move to Trash" : "Remove",
+      body: () => h("p", { class: "path" }, tilde(deck.path, libraryHome)),
+      run: async () => {
+        await api("DELETE", `/decks/${deck.id}`, trash ? { files: "trash" } : {});
+        if (after) after();
+        else if (current?.kind === "deck" && current.deckId === deck.id) navigate("/");
+        else loadLibrary();
+      },
+    });
+  }
+  function addFolder() {
+    dialog({
+      title: "Add a local folder",
+      hint: "The deck folder is the one that holds .slidemind/.",
+      placeholder: "/Users/you/decks/q3-review",
+      submit: "Add deck",
+      body: browseButton,
+      run: async (p) => {
+        const r = await api("POST", "/decks", { path: p });
+        navigate(`/deck/${r.deckId}`);
+      },
+    });
+  }
+  /** Local deck → SharePoint folder: the share link of the folder is all the daemon needs. */
+  function connectSharePoint(view) {
+    dialog({
+      title: "Connect a SharePoint folder",
+      hint: "Paste the share link of the folder this deck should live in. In SharePoint open the folder, click Share, then Copy link. The plan record and the published PPTX go there.",
+      placeholder: "https://contoso.sharepoint.com/:f:/s/Projects/EiXk3…?e=abc123",
+      submit: "Connect",
+      run: async (url) => {
+        try {
+          await api("POST", `/decks/${view.deck.id}/remote/connect`, { folderRef: url });
+        } catch (err) {
+          if (err.code === "not_implemented") throw new Error("Connecting a folder needs a newer workspace — ask your agent to open the slidemind workspace.");
+          throw new Error(plainError(err));
+        }
+        toast("Folder connected. The plan is shared there once it is editable.");
+        refresh(); // the header says where it lives now; the frame keeps its state
+      },
+    });
+  }
+
+  // ---------- view chrome: a framed view's MESSAGES, shown by this page ----------
+  // A framed view (the plan gate, the review gate, a pack's plan page) keeps its
+  // own navigation — its tabs, its title line, its switches — but what it has to
+  // SAY to the user is this page's to show: the status line ("your agent is
+  // listening"), every banner and notice (an approval and when, a warning, a
+  // failed save), and the hand-off dialog. The view publishes them as one
+  // `chrome` object and this page renders them in its chrome — the status beside
+  // the save state, notices in a stack above the frame — so a message never sits
+  // inside the frame it is about. A click on any of it goes back to the view as
+  // an event. The CLI's own gates post it on the window (same origin, checked by
+  // source); a pack page posts it on its MessagePort (plan-bridge.js). Every
+  // publish replaces the last.
+  const CHROME_EVENT = "slidemind-view-chrome-event";
+  let viewChrome = { frame: null, send: null, chrome: null, dismissed: new Set() };
+  const str = (v, max = 400) => (typeof v === "string" || typeof v === "number" ? String(v).slice(0, max) : "");
+  const few = (v, max = 12) => (Array.isArray(v) ? v.slice(0, max).filter((x) => x && typeof x === "object") : []);
+  const TONES = new Set(["info", "ok", "warn", "error"]);
+  /** Only plain strings and known shapes get through: a view never injects markup or unbounded text. */
+  function cleanChrome(c) {
+    if (!c || typeof c !== "object") return null;
+    const tone = (t) => (TONES.has(t) ? t : "info");
+    const acts = (a) => few(a, 4).map((x) => ({ id: str(x.id, 60), label: str(x.label, 80), primary: !!x.primary })).filter((x) => x.id && x.label);
+    return {
+      status: c.status && typeof c.status === "object" && str(c.status.text) ? cleanStatus(c.status) : null,
+      notices: few(c.notices).map((n) => ({ id: str(n.id, 60), tone: tone(n.tone), title: str(n.title, 300), text: str(n.text, 1000), say: str(n.say, 40), spin: !!n.spin, dismiss: !!n.dismiss, copy: str(n.copy, 4000), actions: acts(n.actions) })).filter((n) => n.id && (n.title || n.text)),
+      dialog: c.dialog && typeof c.dialog === "object" ? { title: str(c.dialog.title, 200), text: str(c.dialog.text, 1000), say: str(c.dialog.say, 40), copy: str(c.dialog.copy, 4000), message: str(c.dialog.message, 4000), actions: acts(c.dialog.actions) } : null,
+    };
+  }
+  /** The status line, with what it stands for: `items` ({tag, text, kind}) preferred, else `detail`'s lines ("heading\ntag · text\n…"). */
+  function cleanStatus(st) {
+    const kind = (k) => (["add", "remove", "edit", "deck"].includes(k) ? k : "");
+    let items = few(st.items, 40).map((i) => ({ tag: str(i.tag, 40), text: str(i.text, 300), kind: kind(i.kind) })).filter((i) => i.text);
+    let heading = str(st.heading, 200);
+    const detail = str(st.detail, 2000);
+    if (!items.length && detail.includes("\n")) {
+      const [first, ...rest] = detail.split("\n");
+      heading ||= first;
+      items = rest.filter(Boolean).slice(0, 40).map((line) => {
+        const at = line.indexOf(" · ");
+        return at > 0 ? { tag: line.slice(0, at), text: line.slice(at + 3), kind: "" } : { tag: "", text: line, kind: "" };
+      });
+    }
+    return { text: str(st.text, 200), tone: ["ok", "warn", "bad", "accent"].includes(st.tone) ? st.tone : "", spin: !!st.spin, detail, heading, items, action: str(st.action, 60) };
+  }
+  /** Bind the view frame on screen: `send(event)` is how its chrome talks back. */
+  function bindViewChrome(frame, send) {
+    viewChrome = { frame, send, chrome: null, dismissed: new Set() };
+    renderViewChrome();
+  }
+  function unbindViewChrome() {
+    viewChrome = { frame: null, send: null, chrome: null, dismissed: new Set() };
+    renderViewChrome();
+  }
+  function setViewChrome(frame, chrome) {
+    if (viewChrome.frame !== frame) return;
+    viewChrome.chrome = cleanChrome(chrome);
+    renderViewChrome();
+  }
+  const chromeEvent = (kind, id) => viewChrome.send?.({ kind, id });
+  // the CLI's own gates: same origin, and only the frame on screen is heard
+  if (typeof window.addEventListener === "function") window.addEventListener("message", (e) => {
+    const d = e.data;
+    if (!d || d.type !== "slidemind-view-chrome" || e.origin !== location.origin) return;
+    if (!viewChrome.frame || e.source !== viewChrome.frame.contentWindow) return;
+    setViewChrome(viewChrome.frame, d.chrome);
+  });
+  const copyButton = (text, label = "Copy message") => {
+    const $b = h("button", { class: "mini", onclick: async () => ($b.textContent = (await copyText(text)) ? "Copied" : "Select it and press ⌘C") }, label);
+    return $b;
+  };
+  const sayNode = (say) => (say ? h("span", {}, " ", h("kbd", { class: "say" }, say)) : null);
+  function renderViewChrome() {
+    const c = viewChrome.chrome;
+    const $meta = document.getElementById("view-meta");
+    if ($meta) {
+      const st = c?.status;
+      const wasOpen = !!document.getElementById("view-status-pop");
+      const listed = st && (st.items.length || st.heading);
+      // a status that names an action (the hand-off: see the message again) is a button that runs it
+      const acts = st && !listed && st.action;
+      const $chip = st
+        ? h(listed || acts ? "button" : "span", { class: `chip view-status ${st.tone}${listed || acts ? " listed" : ""}`, id: "view-status", "data-tip": st.text + (st.detail && !listed ? `\n${st.detail}` : ""), ...(listed ? { type: "button", "aria-haspopup": "dialog", "aria-expanded": String(wasOpen), onclick: (e) => { e.stopPropagation(); toggleStatusPop(); } } : acts ? { type: "button", "data-view-action": st.action, onclick: () => chromeEvent("action", st.action) } : {}) }, st.spin ? h("span", { class: "spin" }) : null, h("span", { class: "view-status-txt" }, st.text))
+        : null;
+      fill($meta, $chip);
+      if (wasOpen && listed) renderStatusPop(); // the list follows the chrome while it is open
+      else document.getElementById("view-status-pop")?.remove();
+    }
+    const $notices = document.getElementById("view-notices");
+    if ($notices) {
+      const shown = (c?.notices ?? []).filter((n) => !viewChrome.dismissed.has(n.id));
+      fill(
+        $notices,
+        shown.map((n) =>
+          h(
+            "div",
+            { class: `view-notice ${n.tone}`, "data-notice": n.id, role: n.tone === "error" || n.tone === "warn" ? "alert" : "status" },
+            n.spin ? h("span", { class: "spin" }) : null,
+            h("div", { class: "txt" }, n.title ? h("b", {}, n.title) : null, n.text || n.say ? h("span", {}, n.text, sayNode(n.say)) : null),
+            h(
+              "div",
+              { class: "acts" },
+              n.actions.map((a) => h("button", { class: `mini${a.primary ? " primary" : ""}`, "data-view-action": a.id, onclick: () => chromeEvent("action", a.id) }, a.label)),
+              n.copy ? copyButton(n.copy) : null,
+              n.dismiss ? h("button", { class: "icon notice-x", "data-tip": "Dismiss", "aria-label": "Dismiss", onclick: () => {
+                viewChrome.dismissed.add(n.id);
+                chromeEvent("dismiss", n.id);
+                renderViewChrome();
+              } }, "×") : null,
+            ),
+          ),
+        ),
+      );
+      $notices.hidden = !shown.length;
+    }
+    renderViewDialog(c?.dialog ?? null);
+  }
+  // the status line's list (what the changes are), opened from the chip, closed by a click elsewhere or Escape
+  function renderStatusPop() {
+    const st = viewChrome.chrome?.status;
+    document.getElementById("view-status-pop")?.remove();
+    if (!st) return;
+    const $pop = h(
+      "div",
+      { class: "view-pop", id: "view-status-pop", role: "dialog", "aria-label": st.heading || st.text },
+      st.heading ? h("p", { class: "view-pop-head" }, st.heading) : null,
+      st.items.length ? h("ul", { class: "view-pop-list" }, st.items.map((i) => h("li", { "data-kind": i.kind || null }, i.tag ? h("b", {}, i.tag) : null, h("span", {}, i.text)))) : h("p", { class: "muted" }, st.detail || st.text),
+    );
+    document.getElementById("view-meta")?.append($pop);
+    document.getElementById("view-status")?.setAttribute("aria-expanded", "true");
+  }
+  function toggleStatusPop() {
+    if (document.getElementById("view-status-pop")) {
+      document.getElementById("view-status-pop").remove();
+      document.getElementById("view-status")?.setAttribute("aria-expanded", "false");
+    } else renderStatusPop();
+  }
+  document.addEventListener("click", (e) => {
+    if (!document.getElementById("view-status-pop") || e.target.closest("#view-status-pop")) return;
+    toggleStatusPop();
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && document.getElementById("view-status-pop")) toggleStatusPop();
+  });
+  // the view's one modal (the hand-off: "now tell your agent"), as this page's own dialog
+  let viewDialogKey = null;
+  function renderViewDialog(d) {
+    const key = d ? JSON.stringify(d) : null;
+    if (key === viewDialogKey) return;
+    viewDialogKey = key;
+    document.getElementById("view-dialog")?.remove();
+    document.getElementById("handoff-dialog")?.remove();
+    if (!d) return;
+    // the gate's hand-over: the same dialog a pack's task card shows
+    if (d.message) {
+      const close = d.actions.find((a) => a.id === "handoff-close") ?? d.actions[d.actions.length - 1];
+      showHandoff({ message: d.message, onClose: () => close && chromeEvent("action", close.id) });
+      return;
+    }
+    const $dlg = h(
+      "dialog",
+      { class: "dlg view-dialog", id: "view-dialog" },
+      h("h3", {}, d.title),
+      d.text || d.say ? h("p", { class: "big" }, d.text, sayNode(d.say)) : null,
+      h(
+        "div",
+        { class: "row end" },
+        d.copy ? copyButton(d.copy) : null,
+        d.actions.map((a) => h("button", { class: a.primary ? "primary" : "", "data-view-action": a.id, onclick: () => chromeEvent("action", a.id) }, a.label)),
+      ),
+    );
+    // Escape = the view's own close action, so the view's state follows
+    $dlg.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      const close = d.actions.find((a) => a.id === "close") ?? d.actions[d.actions.length - 1];
+      if (close) chromeEvent("action", close.id);
+    });
+    document.body.append($dlg);
+    $dlg.showModal();
+  }
+
+  // ---------- deck ----------
+  // Opening a deck and the focus the browser gives the new page arrive
+  // together: one refresh in flight answers both.
+  const remoteInFlight = new Set();
+  /** GET-only: ask the daemon to fetch the latest shared plan and merge; it never PUTs. */
+  async function remoteRefresh(deckId) {
+    if (remoteInFlight.has(deckId)) return;
+    remoteInFlight.add(deckId);
+    try {
+      await api("POST", `/decks/${deckId}/remote/refresh`, {});
+    } catch (err) {
+      if (err.code !== "not_implemented") console.warn("refresh", err.code, err.message);
+    } finally {
+      remoteInFlight.delete(deckId);
+    }
+  }
+  function schedulePoll(view) {
+    clearTimeout(poll);
+    poll = null;
+    if (!isShared(view) || current?.tab !== "plan") return;
+    poll = setTimeout(async () => {
+      if (document.visibilityState !== "hidden" && current?.kind === "deck" && current.deckId === view.deck.id && current.tab === "plan") await remoteRefresh(view.deck.id);
+      schedulePoll(view);
+    }, jitter(POLL_MS));
+  }
+  /** Blocker text for an adapter the deck cannot use here. */
+  const blockerText = (b) => PLAIN[b.code] ?? b.message ?? "This deck's plan can't be opened here.";
+  const LEGACY_BANNER = "This deck uses an older folder layout that couldn't be moved to the new one automatically. Its files are untouched — ask your agent to open this deck, it can finish the move.";
+
+  // Why a connected folder does not hold the presentation yet — plain words, the next build retries.
+  const UPLOAD_FAILED = {
+    name_exists: "A file with this name is already in the folder, so nothing was replaced. Ask your agent to publish under another name.",
+    deck_busy: "Your agent was working on the deck. The next build uploads it.",
+    login_required: "Your Microsoft 365 sign-in has expired. Ask your agent to sign you in again; the next build uploads it.",
+    write_disabled: "Saving to SharePoint is switched off for your organization.",
+    publish_failed: "The presentation could not be uploaded yet. The next build uploads it.",
+  };
+  /**
+   * The deck's header is the top bar — its name, the folder it lives in (a click
+   * reveals it) and its chips beside them — and the banners are the page's, under
+   * it. Built the same way by the first render and by every advisory refresh,
+   * which swaps it in place without touching the tab body (a gate frame keeps its state).
+   */
+  function deckHead(view) {
+    const remote = view.remote;
+    const planState = remote?.plan?.state ?? "none";
+    const pptxState = remote?.pptx?.state ?? "none";
+    // one SharePoint chip, linking to the item, worded by what lives there
+    const spLink = remote?.pptx?.link ?? remote?.plan?.link ?? remote?.destination?.webUrl ?? null;
+    // never a code: a blocked sync's reason is in the conflict panel / the agent's output, the chip only says it needs a look
+    // a folder connected after the build uploads that build; how it went is the folder's chip
+    const upload = pptxState === "none" ? remote?.destination?.upload ?? null : null;
+    const spText = pptxState === "published" ? "SharePoint · published" : pptxState === "bound" ? "SharePoint · linked" : planState === "shared" ? "SharePoint · plan shared" : planState === "blocked" ? "SharePoint · needs attention" : planState === "destination-only" ? (upload?.state === "uploading" ? "SharePoint · uploading" : upload?.state === "failed" ? "SharePoint · not uploaded" : "SharePoint · folder connected") : null;
+    const legacy = view.deck.format === "legacy";
+    const where = tilde(view.deck.path, libraryHome);
+    // when it last synced is the chip's tooltip: the save chip by the tabs already says whether it did
+    const synced = upload?.state === "failed" ? UPLOAD_FAILED[upload.reason] ?? UPLOAD_FAILED.publish_failed : upload?.state === "uploading" ? "Uploading the presentation to this folder" : spText ? `Last synced ${fmtTime(remote?.plan?.lastConfirmedAt ?? remote?.pptx?.lastConfirmedAt ?? view.sync?.lastConfirmedAt)}` : null;
+    return {
+      title: view.deck.name ?? where,
+      sub: h("button", { class: "meta-folder", id: "reveal", "data-tip": `${revealLabel()}\n${where}`, "aria-label": `${revealLabel()}: ${where}`, onclick: () => api("POST", `/decks/${view.deck.id}/reveal`, {}).catch((err) => toast(plainError(err), "bad")) }, icon(ICON_FOLDER), deckFolder(view.deck.path, libraryHome)),
+      actions: [
+        view.pptx ? openPptxButton(view) : null,
+        spText ? sharepointChip(spLink, spText, synced) : null,
+        !spText && !legacy ? h("button", { class: "mini", id: "connect-sharepoint", "aria-label": "Connect SharePoint folder", onclick: () => connectSharePoint(view) }, h("img", { src: "/ui/sharepoint.svg", alt: "", class: "sp-ico" }), h("span", { class: "lbl" }, "Connect SharePoint folder")) : null,
+        // the PRESENTATION's policy: a deployment without the shared-plan service still saves the .pptx
+        remote?.publishWrites === "disabled" ? chip("SharePoint · read-only", "warn", { "data-tip": "slidemind can read from SharePoint here but does not save to it" }) : null,
+        view.adapter.blocker ? chip("Can't open here", "bad") : null,
+        legacy ? h("button", { class: "mini", id: "remove-deck", onclick: () => removeDeckDialog(view.deck, { trash: false, after: () => navigate("/") }) }, "Remove from library") : null,
+      ],
+      banners: [
+        view.adapter.blocker ? h("p", { class: "error", id: "deck-blocker", "data-code": view.adapter.blocker.code }, blockerText(view.adapter.blocker)) : null,
+        legacy ? h("p", { class: "error", id: "legacy-banner", "data-code": "unsupported_format" }, LEGACY_BANNER) : null,
+      ],
+    };
+  }
+  /** The tab buttons, each with its ✓ once that phase is approved and the count of questions waiting in it (the sidebar's badge). */
+  function deckTabs(view, tabs) {
+    const waiting = (t) => view.tasks.filter((k) => k.status === "pending" && tabOf(k, tabs) === t).length;
+    return h(
+      "div",
+      { class: "tabs", role: "tablist" },
+      tabs.map((t) => {
+        const n = waiting(t);
+        return h("button", { role: "tab", "aria-selected": String(t === current.tab), "data-tab": t, onclick: () => {
+          if (planEditor?.dirty && !confirm("You have unsaved plan changes. Leave anyway?")) return;
+          current.tab = t;
+          refresh(true);
+        } }, t[0].toUpperCase() + t.slice(1), (t === "plan" && view.stage?.plan?.approved) || (t === "preview" && view.stage?.review?.approved) ? h("span", { class: "tab-ok", "data-tip": "Approved" }, "✓") : null, n ? h("span", { class: "badge", "data-tip": `${n} question${n === 1 ? "" : "s"} waiting for you` }, String(n)) : null);
+      }),
+    );
+  }
+  async function renderDeck() {
+    const { deckId } = current;
+    let view;
+    try {
+      view = await api("GET", `/decks/${deckId}`);
+    } catch (err) {
+      if (connectionLost(err)) throw err; // the banner says it; the deck on screen stays
+      const gone = err.code === "missing_path" ? { id: deckId, name: err.details?.name ?? deckNames.get(deckId) ?? null, path: err.details?.path ?? "" } : null;
+      setMeta(gone?.name ?? "Deck", "");
+      $app.replaceChildren(
+        page(
+          errorBox(err, err.code === "missing_path" || err.code === "unknown_deck" ? h("a", { href: "/", "data-nav": true }, "Back to the inbox") : null),
+          gone ? h("div", { class: "row" }, h("button", { id: "forget-deck", onclick: () => removeDeckDialog(gone, { trash: false, after: () => navigate("/") }) }, "Forget this deck")) : null,
+        ),
+      );
+      return;
+    }
+    setTitle(`${view.deck.name ?? "deck"} · slidemind`);
+    const head = deckHead(view);
+    setMeta(head.title, head.sub, head.actions);
+    const tabs = tabsFor(view);
+    if (current.taskId && !current.tab) current.tab = phaseOf(view.tasks.find((t) => t.id === current.taskId)?.kind).tab; // a task link opens its phase
+    if (!tabs.includes(current.tab)) current.tab = tabs[0];
+    // the address names the tab on screen, so a reload or a copied address opens the same view
+    if (current.tab) {
+      const want = `/deck/${deckId}/${current.tab}`;
+      if (location.pathname !== want) history.replaceState(null, "", want);
+    }
+    const opened = !current.shared && current.opened !== deckId;
+    current.shared = isShared(view);
+    if (opened && current.shared) {
+      current.opened = deckId;
+      remoteRefresh(deckId); // on open: fetch the latest, merge under lock, then SSE re-renders
+    }
+    // the tab's tools sit by the tabs; the right end holds only the two state chips, so a
+    // chip whose text changes moves nothing but its own edge
+    const $tabRow = tabs.length ? h("div", { class: "row tab-row" }, deckTabs(view, tabs), h("div", { class: "row", id: "tab-tools" }), h("div", { class: "row", id: "tab-meta" }, h("span", { class: "row", id: "view-meta" }))) : null;
+    const $notices = h("div", { id: "view-notices", class: "view-notices", hidden: true });
+    const $body = h("section", { id: "tab-body" });
+    // the tab body is rebuilt: a plan editor or frame from before is gone with it (renderPlan sets them anew)
+    planEditor = null;
+    planFrame = null;
+    planView = null;
+    unbindViewChrome();
+    fill($app, deckPage(...head.banners, $tabRow, $notices, $body));
+    if (!tabs.length) {
+      renderYourTurn(view, $body, null);
+      return;
+    }
+    if (current.tab === "plan") await renderPlan(view, $body);
+    else if (current.tab === "preview") renderPreview(view, $body);
+    renderYourTurn(view, $body, current.tab);
+    schedulePoll(view);
+  }
+  /**
+   * An advisory refresh of the deck on screen: header chips, tab marks, the
+   * conflict panel and "your turn" follow the server;
+   * the tab body's frame is left alone.
+   */
+  let chromeSeq = 0;
+  async function refreshDeckChrome() {
+    if (current?.kind !== "deck") return;
+    const { deckId } = current;
+    const seq = ++chromeSeq;
+    let view;
+    try {
+      view = await api("GET", `/decks/${deckId}`);
+    } catch {
+      return; // the next event or the reconnect tries again
+    }
+    if (seq !== chromeSeq || current?.kind !== "deck" || current.deckId !== deckId) return;
+    const $page = document.querySelector(".page.deck");
+    if (!$page) return;
+    const head = deckHead(view);
+    setMeta(head.title, head.sub, head.actions);
+    for (const id of ["deck-blocker", "legacy-banner"]) document.getElementById(id)?.remove();
+    $page.prepend(...head.banners.filter(Boolean));
+    const tabs = tabsFor(view);
+    const $tabs = document.querySelector(".tab-row .tabs");
+    if ($tabs && tabs.includes(current.tab)) $tabs.replaceWith(deckTabs(view, tabs));
+    const $body = document.getElementById("tab-body");
+    if (!$body) return;
+    if (current.tab === "plan" && planFrame) {
+      const $panel = document.getElementById("conflict-panel");
+      const c = conflictOf(view);
+      if (($panel?.dataset.conflict ?? null) !== (c ? `${c.conflictId}:${c.expectedHash ?? ""}` : null)) {
+        $panel?.remove();
+        renderConflict(view, $body);
+      }
+    }
+    redrawYourTurn(view);
+  }
+
+  // ---------- conflicts (7.5) ----------
+  /**
+   * Mine / theirs / merged from the queue's conflict record. Resolving sends the
+   * CURRENT conflict id + expected local hash; a stale one is refused by the
+   * daemon, the panel re-renders with the new ids and nothing typed is lost.
+   */
+  function renderConflict(view, $body) {
+    const c = conflictOf(view);
+    if (!c) return null;
+    const $msg = h("p", { class: "muted", id: "conflict-message" });
+    const show = (v) => (typeof v === "string" ? v : JSON.stringify(v ?? null, null, 2));
+    const paths = (c.conflicts ?? []).map((x) => h("li", {}, h("code", {}, x.path ?? "?"), x.mine !== undefined ? ` — mine: ${show(x.mine).slice(0, 80)}` : "", x.theirs !== undefined ? ` · theirs: ${show(x.theirs).slice(0, 80)}` : ""));
+    const pick = (label, value) => h("button", { "data-resolve": label, onclick: () => resolve(value) }, label);
+    async function resolve(value) {
+      for (const b of $panel.querySelectorAll("button")) b.disabled = true;
+      $msg.textContent = "";
+      try {
+        await api("POST", `/decks/${view.deck.id}/conflicts/resolve`, { conflictId: c.conflictId, expectedHash: c.expectedHash, value });
+        $msg.textContent = "Resolved. Syncing the chosen version.";
+      } catch (err) {
+        for (const b of $panel.querySelectorAll("button")) b.disabled = false;
+        $msg.textContent = err.code === "stale_subject" ? "The plan changed again while you decided; refreshing the conflict. Your unsaved text is kept." : plainError(err);
+        if (err.code === "stale_subject") setTimeout(refreshDeckChrome, 500); // the panel follows the new conflict; the gate frame stays
+      }
+    }
+    const $panel = h(
+      "div",
+      { class: "banner conflict", id: "conflict-panel", "data-conflict": `${c.conflictId}:${c.expectedHash ?? ""}` },
+      h("strong", {}, "The shared plan changed where you changed it."),
+      h("p", { class: "muted" }, "Pick the version to keep. Nothing is lost until you choose."),
+      paths.length ? h("ul", { class: "list", id: "conflict-paths" }, paths) : null,
+      h("div", { class: "row" }, pick("Keep mine", c.local ?? c.current?.value ?? c.mine), pick("Take theirs", c.current?.value ?? c.theirs ?? c.current), pick("Use merged", c.merged)),
+      h("details", {}, h("summary", {}, "Show both versions"), h("pre", { class: "copy", id: "conflict-mine" }, show(c.local ?? c.mine)), h("pre", { class: "copy", id: "conflict-theirs" }, show(c.current?.value ?? c.theirs ?? c.current))),
+      $msg,
+    );
+    $body.prepend($panel);
+    return $panel;
+  }
+
+  async function renderPlan(view, $body) {
+    if (view.adapter.blocker) {
+      $body.replaceChildren(h("p", { class: "error", "data-code": view.adapter.blocker.code }, blockerText(view.adapter.blocker)));
+      return;
+    }
+    if (view.adapter.id !== "core") return renderAdapterPlan(view, $body);
+    // core deck: plain Markdown editor over PUT /plan
+    let plan;
+    try {
+      plan = await api("GET", `/decks/${view.deck.id}/plan`);
+    } catch (err) {
+      if (connectionLost(err)) throw err;
+      $body.replaceChildren(errorBox(err));
+      return;
+    }
+    // No plan.md yet: the agent writes the first one (the plan route has no
+    // "create" — a save needs the version it replaces), so there is nothing to
+    // frame or edit; the page says so and refreshes when the plan arrives.
+    if (plan.value === null || plan.value === undefined) {
+      fill($body, h("div", { class: "empty", id: "plan-empty" }, h("div", { class: "brand" }, ...brandMark()), h("p", { class: "muted" }, "Your agent hasn't written a plan for this deck yet.")));
+      return;
+    }
+    const ed = { base: { hash: plan.hash, value: plan.value ?? "" }, dirty: false, timer: null, sync: plan.sync ?? null, saving: false, busySince: null };
+    planEditor = ed;
+    const restored = (() => {
+      try {
+        return sessionStorage.getItem(backupKey(view.deck.id, plan.hash));
+      } catch {
+        return null;
+      }
+    })();
+    const $status = h("span", { class: "chip save", id: "save-status" });
+    const $msg = h("p", { class: "muted", id: "save-message" });
+    const $ta = h("textarea", { class: "plan", id: "plan-editor", spellcheck: "false" });
+    $ta.value = restored ?? ed.base.value;
+    if (restored !== null && restored !== ed.base.value) ed.dirty = true;
+    const setStatus = () => {
+      const s = saveStatus(ed.sync, ed.dirty && ed.failed ? "failed" : ed.dirty);
+      $status.textContent = s.text;
+      $status.className = `chip save ${s.cls}`;
+    };
+    const backup = () => {
+      try {
+        if (ed.dirty) sessionStorage.setItem(backupKey(view.deck.id, ed.base.hash), $ta.value);
+        else sessionStorage.removeItem(backupKey(view.deck.id, ed.base.hash));
+      } catch {
+        // storage may be unavailable; the buffer stays in the textarea
+      }
+    };
+    async function save() {
+      clearTimeout(ed.timer);
+      if (ed.saving) return;
+      if ($ta.value === ed.base.value) {
+        ed.dirty = false;
+        backup();
+        setStatus();
+        return;
+      }
+      ed.saving = true;
+      ed.failed = false;
+      $msg.textContent = "";
+      try {
+        const r = await api("PUT", `/decks/${view.deck.id}/plan`, { operationId: crypto.randomUUID(), base: ed.base, value: $ta.value });
+        const oldKey = backupKey(view.deck.id, ed.base.hash);
+        ed.base = { hash: r.hash, value: r.value };
+        ed.sync = r.sync ?? null;
+        ed.dirty = $ta.value !== r.value;
+        ed.busySince = null;
+        try {
+          sessionStorage.removeItem(oldKey);
+        } catch {
+          // ignore
+        }
+        backup();
+        // the gate page shows the saved plan by itself (a new subject is a new round for it)
+        if (ed.dirty) ed.timer = setTimeout(save, AUTOSAVE_MS);
+      } catch (err) {
+        // keep the buffer, say why
+        ed.dirty = true;
+        backup();
+        if (err.code === "deck_busy" || err.code === "approval_in_progress") {
+          ed.busySince ??= Date.now();
+          const long = Date.now() - ed.busySince > BUSY_HINT_MS;
+          $msg.textContent = "Your agent is working on this deck right now — your text is kept and saved automatically as soon as it is free.";
+          ed.timer = setTimeout(save, RETRY_MS); // autosave retries by itself
+        } else if (err.code === "local_conflict") {
+          $msg.replaceChildren("Someone else changed the plan. Your text is kept. ", h("button", { onclick: () => discardTo(err.details?.current) }, "Discard mine and take theirs"));
+        } else if (connectionLost(err)) {
+          // saved by itself once the workspace answers again (or signs this tab back in)
+          $msg.textContent = "Your text is kept in this tab and saved as soon as the workspace is back.";
+          reconnectHooks.add(resume);
+        } else $msg.textContent = plainError(err);
+        if (err.code !== "deck_busy" && err.code !== "approval_in_progress") ed.busySince = null;
+        // busy and offline retry by themselves ("Saving…"); anything else waits for the user ("Not saved")
+        ed.failed = !(err.code === "deck_busy" || err.code === "approval_in_progress" || connectionLost(err));
+      } finally {
+        ed.saving = false;
+        setStatus();
+      }
+    }
+    function resume() {
+      reconnectHooks.delete(resume);
+      if (planEditor === ed && ed.dirty) save();
+    }
+    // wait out an autosave already on the wire, then save what is left
+    ed.flush = async () => {
+      for (let i = 0; i < 100 && ed.saving; i++) await new Promise((r) => setTimeout(r, 50));
+      if (ed.dirty) await save();
+    };
+    function discardTo(cur) {
+      if (!cur) return refresh();
+      ed.base = { hash: cur.hash, value: cur.value };
+      $ta.value = cur.value;
+      ed.dirty = false;
+      ed.failed = false;
+      backup();
+      $msg.textContent = "";
+      setStatus();
+    }
+    $ta.addEventListener("input", () => {
+      ed.typedAt = Date.now();
+      ed.dirty = $ta.value !== ed.base.value;
+      backup();
+      setStatus();
+      clearTimeout(ed.timer);
+      ed.timer = setTimeout(save, AUTOSAVE_MS);
+    });
+    $ta.addEventListener("blur", () => ed.dirty && save());
+    // The page is the deck's own plan.html carrying the live gate; the Markdown
+    // editor sits behind a toggle. This page never reloads that frame: the gate
+    // follows every change itself (its heartbeat), keeping what the user typed.
+    // same-origin on purpose: this is the CLI's own page carrying the live gate, whose decision POST rides the session cookie
+    const $frame = h("iframe", { class: "view", id: "plan-view", sandbox: "allow-scripts allow-same-origin allow-modals", title: "Plan", src: `${API}/decks/${view.deck.id}/render/plan` });
+    const $editor = h("div", { class: "plan-editor", id: "plan-editor-panel", hidden: true }, $msg, $ta);
+    // page ⟷ markdown: a real switch between two icons; the Markdown side saves by itself
+    const ICON_PAGE = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M7 8h10M7 12h10M7 16h6"/>';
+    const ICON_CODE = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m16 18 6-6-6-6M8 6l-6 6 6 6"/>';
+    const $check = h("input", { type: "checkbox", role: "switch", id: "plan-edit-toggle", "aria-label": "Edit the plan as Markdown", onchange: () => setMode($check.checked ? "edit" : "view") });
+    const $iconPage = h("span", { class: "sw-ico on", "data-tip": "Plan page" }, icon(ICON_PAGE));
+    const $iconCode = h("span", { class: "sw-ico", "data-tip": "Markdown" }, icon(ICON_CODE));
+    const $toggle = h("label", { class: "switch" }, $iconPage, $check, h("span", { class: "sw-track" }), $iconCode);
+    function setMode(mode) {
+      const editing = mode === "edit";
+      ed.editing = editing;
+      $editor.hidden = !editing;
+      $frame.hidden = editing;
+      $check.checked = editing;
+      $iconPage.classList.toggle("on", !editing);
+      $iconCode.classList.toggle("on", editing);
+      if (editing) $ta.focus();
+      else if (ed.dirty) save();
+    }
+    planFrame = $frame;
+    planView = { setMode };
+    bindViewChrome($frame, (event) => $frame.contentWindow?.postMessage({ type: CHROME_EVENT, event }, location.origin));
+    fill(document.getElementById("tab-tools") ?? h("div"), $toggle);
+    fill(document.getElementById("tab-meta") ?? h("div"), h("span", { class: "row", id: "view-meta" }), $status);
+    $body.replaceChildren($editor, $frame);
+    renderConflict(view, $body);
+    setStatus();
+  }
+
+  function renderAdapterPlan(view, $body) {
+    const $frame = h("iframe", { class: "view", id: "plan-view", sandbox: "allow-scripts", title: "Plan" });
+    const $status = h("span", { class: "chip save ok", id: "save-status" }, "Saved");
+    const $msg = h("p", { class: "muted", id: "save-message" });
+    fill(document.getElementById("tab-meta") ?? h("div"), h("span", { class: "row", id: "view-meta" }), $status);
+    $body.replaceChildren($msg, $frame);
+    if (!window.PlanBridge) {
+      $msg.className = "error";
+      $msg.textContent = "This plan view could not load — reload the page; if it stays, ask your agent to open the slidemind workspace.";
+      $msg.dataset.code = "plan_bridge_missing";
+      return;
+    }
+    const deckId = view.deck.id;
+    const setStatus = (r, dirty) => {
+      const s = saveStatus(r?.sync ?? null, dirty);
+      $status.textContent = s.text;
+      $status.className = `chip save ${s.cls}`;
+    };
+    const wrap = (fn) => async (...args) => {
+      try {
+        const r = await fn(...args);
+        $msg.textContent = "";
+        return r;
+      } catch (err) {
+        const plain = err.code === "deck_busy" ? "Your agent is working on this deck right now — your edits are kept; they save once it is free." : plainError(err);
+        // a view that shows its own messages (it publishes chrome) says it once, in its notice;
+        // the line above the frame is for a view that does not
+        $msg.textContent = viewChrome.frame === $frame && viewChrome.chrome ? "" : plain;
+        setStatus(null, err.code === "deck_busy" || connectionLost(err) ? true : "failed");
+        // the view gets the plain sentence, never a server's wording; the code still says what happened —
+        // a lost connection as the transport's own "disconnected", which this page's banner already says
+        throw { code: connectionLost(err) ? "disconnected" : err.code, message: plain, details: err.details };
+      }
+    };
+    const bridgeApi = {
+      read: wrap(() => api("GET", `/decks/${deckId}/plan`)),
+      save: wrap(async ({ base, value }) => {
+        const saving = api("PUT", `/decks/${deckId}/plan`, { operationId: crypto.randomUUID(), base, value });
+        planSaving = saving;
+        const r = await saving.finally(() => planSaving === saving && (planSaving = null));
+        setStatus(r, false);
+        return r;
+      }),
+      validate: wrap((payload) => api("POST", `/decks/${deckId}/actions/plan.validate`, { operationId: crypto.randomUUID(), payload: payload ?? {} })),
+      action: wrap((name, payload) => api("POST", `/decks/${deckId}/actions/${encodeURIComponent(name)}`, { operationId: crypto.randomUUID(), payload: payload ?? {} })),
+      respondTask: wrap((taskId, { action, payload, expectedHash }) => api("POST", `/decks/${deckId}/tasks/${encodeURIComponent(taskId)}/respond`, { operationId: crypto.randomUUID(), expectedHash: expectedHash ?? null, action, payload: payload ?? {} })),
+      dirty: (d) => setStatus(null, d),
+    };
+    $frame.src = `${API}/decks/${deckId}/render/plan`;
+    planFrame = $frame;
+    const session = window.PlanBridge.connect($frame, { viewId: "plan", deckId, api: bridgeApi, onChrome: (chrome) => setViewChrome($frame, chrome), onDirty: (d) => setStatus(null, d) });
+    bindViewChrome($frame, (event) => session.notify({ type: "chrome-event", event }));
+    renderConflict(view, $body);
+  }
+
+  /** The header's own mark + wordmark, cloned for an empty state. */
+  const brandMark = () => {
+    const brand = document.querySelector("header .brand");
+    return brand ? [...brand.children].map((n) => n.cloneNode(true)) : [];
+  };
+
+  /** Hand the built .pptx to PowerPoint on this machine (the daemon owns the shell). */
+  function openPptxButton(view) {
+    const $b = h("button", { class: "mini primary", id: "open-pptx", "data-tip": view.pptx, onclick: async () => {
+      $b.disabled = true;
+      try {
+        await api("POST", `/decks/${view.deck.id}/open-pptx`, {});
+        toast("Opening in PowerPoint…");
+      } catch (err) {
+        toast(plainError(err), "bad");
+      } finally {
+        $b.disabled = false;
+      }
+    } }, "Open in PowerPoint");
+    return $b;
+  }
+
+  function renderPreview(view, $body) {
+    // no presentation.html on disk: the frame would show the API's 404 body
+    if (!view.preview) {
+      fill($body, h("div", { class: "empty", id: "preview-empty" }, h("div", { class: "brand" }, ...brandMark()), h("p", { class: "muted" }, "No preview has been created yet.")));
+      return;
+    }
+    // a preview older than its slides is the review gate's to say (it knows whether the agent is listening) — never a second banner here
+    // same-origin on purpose: the CLI's own preview page — its per-slide thumbnail frames need the session cookie, and the review gate inside it POSTs the decision
+    const $frame = h("iframe", { class: "view", id: "preview-view", sandbox: "allow-scripts allow-same-origin allow-modals", title: "Preview", src: `${API}/decks/${view.deck.id}/preview/presentation.html` });
+    fill($body, $frame);
+    bindViewChrome($frame, (event) => $frame.contentWindow?.postMessage({ type: CHROME_EVENT, event }, location.origin));
+    $frame.addEventListener("error", () => $body.prepend(h("p", { class: "error" }, "No preview built yet.")));
+  }
+
+  /**
+   * The words of the hand-over: the same after every answer (doc 21). The title
+   * is the one thing to do; the line under it follows the copy icon — nothing is
+   * copied until the user clicks it (the clipboard is theirs), and "Copied" only
+   * when a copy path really succeeded.
+   */
+  const pasteKey = () => (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || "") ? "⌘V" : "Ctrl+V");
+  const HANDOFF_TITLE = "Paste this into your agent chat";
+  const handoffLine = (copied) =>
+    copied === true ? `Copied — press ${pasteKey()} there and send.` : copied === false ? "Select the message, copy it, paste it there and send." : `Copy it, press ${pasteKey()} there and send.`;
+  /** The copy icon: a click copies, the icon turns into a check for a moment; `onCopied(ok)` reports the outcome. */
+  function copyIcon(message, { onCopied = null } = {}) {
+    const tip = (t) => {
+      $copy.dataset.tip = t;
+      $copy.setAttribute("aria-label", t === "Copy" ? "Copy message" : t);
+    };
+    const $copy = h("button", { class: "icon copy-icon", id: "copy-message", type: "button", "data-message": message, onclick: async () => {
+      const ok = await copyText(message);
+      onCopied?.(ok);
+      if (!ok) return tip("Copy failed — select the message");
+      $copy.replaceChildren(icon(ICON_CHECK));
+      $copy.classList.add("is-copied");
+      tip("Copied");
+      clearTimeout($copy._reset);
+      $copy._reset = setTimeout(() => {
+        $copy.replaceChildren(icon(ICON_COPY));
+        $copy.classList.remove("is-copied");
+        tip("Copy");
+      }, 2000);
+    } }, icon(ICON_COPY));
+    tip("Copy");
+    return $copy;
+  }
+  /**
+   * Once a task was answered here: the state, with the message's copy icon.
+   * Nothing about whether an agent is running — the user does the same thing
+   * every time.
+   */
+  function doneNote(message) {
+    return h("div", { class: "done handoff" }, h("p", { class: "ok", id: "task-done" }, h("strong", {}, "Answer saved")), message ? copyIcon(message) : null);
+  }
+  /** The hand-over dialog: the one thing to do and the message, its copy icon in the corner; `onClose` runs on Done / Escape. */
+  function showHandoff({ message, onClose = null }) {
+    document.getElementById("handoff-dialog")?.remove();
+    const $msg = h("textarea", { class: "handoff-msg", id: "handoff-message", readonly: true, rows: 2 });
+    $msg.value = message;
+    const $line = h("p", { class: "big" }, handoffLine(null));
+    const $copy = copyIcon(message, {
+      onCopied: (ok) => {
+        $line.textContent = handoffLine(ok);
+        $dlg.dataset.copied = String(ok);
+        if (!ok) $msg.select();
+      },
+    });
+    const close = () => {
+      $dlg.close();
+      $dlg.remove();
+      onClose?.();
+    };
+    const $dlg = h(
+      "dialog",
+      { class: "dlg view-dialog handoff-dialog", id: "handoff-dialog", "data-copied": "none" },
+      h("h3", {}, HANDOFF_TITLE),
+      $line,
+      h("div", { class: "msgbox" }, $msg, message ? $copy : null),
+      h("div", { class: "row end" }, h("button", { class: "primary", id: "handoff-done", onclick: close }, "Done")),
+    );
+    $dlg.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      close();
+    });
+    document.body.append($dlg);
+    $dlg.showModal();
+    // the whole message shows, however long its path: the box grows to fit it
+    $msg.style.height = `${$msg.scrollHeight + 2}px`;
+    // the next thing to do is the copy: the icon has the focus, so Enter copies
+    if (message) $copy.focus();
+    return $dlg;
+  }
+
+  /**
+   * "Your turn" — the pending tasks of this phase, at the top of the tab, so the
+   * human sees what is asked before the page below. A gate kind is answered in
+   * the gate itself (approve / comments live there); other kinds carry their
+   * buttons here.
+   */
+  function renderYourTurn(view, $body, tab) {
+    const tabs = tabsFor(view);
+    const mine = newestFirst(view.tasks.filter((t) => t.status === "pending" && (tab === null || tabOf(t, tabs) === tab)));
+    if (!mine.length) return;
+    const $box = h(
+      "div",
+      { class: "your-turn", id: "your-turn" },
+      mine.map((t) => {
+        const ph = phaseOf(t.kind);
+        const $out = h("div", { class: "task-result" });
+        return h(
+          "div",
+          { class: `task turn${t.id === current.taskId ? " mine" : ""}`, id: `task-${t.id}` },
+          // a core deck's gate frame shows the agent's state as its own badge right above: not twice
+          h("div", { class: "card-head" }, h("span", { class: "kind" }, `Your turn · ${ph.label}`), h("span", { class: "path" }, fmtTime(t.createdAt))),
+          h("p", { class: "ask" }, ph.gate && view.adapter?.id !== "core" ? ph.ask.replace(/ in the review below\.| in the panel below\./, ".") : ph.ask),
+          // a core deck answers a gate kind inside the embedded gate; a pack's page may not carry approve controls, so its card keeps the buttons
+          ph.gate && view.adapter?.id === "core" ? null : h("div", { class: "actions row" }, (t.actions ?? []).map((a) => h("button", { "data-action": a, class: a === "approve" || a === "done" ? "primary" : null, onclick: (e) => respond(view, t, a, e.target, $out) }, answerLabel(a)))),
+          // put it away without answering it — the agent that asked is long gone
+          h("button", { class: "icon dismiss", "data-dismiss": t.id, "data-tip": "Put this question away without answering", "aria-label": "Put this question away without answering", onclick: () => dismiss(view, t) }, icon('<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M6 6l12 12M18 6 6 18"/>')),
+          $out,
+        );
+      }),
+    );
+    $body.prepend($box);
+  }
+  /** Redraw only the "your turn" box from a fresh deck view (the gate frame stays). */
+  function redrawYourTurn(view) {
+    if (current?.kind !== "deck") return;
+    const $body = document.getElementById("tab-body");
+    if (!$body) return;
+    const old = document.getElementById("your-turn");
+    // keep a box that is showing an answer's note until the user moves on
+    if (old && old.querySelector("#task-done")) return;
+    if (old) old.remove();
+    renderYourTurn(view, $body, current.tab);
+  }
+  /**
+   * An answered card is not a question any more: the ask, the buttons and the
+   * dismiss go, and what is left is one row saying what to do now.
+   */
+  function settleCard(task) {
+    const $card = document.getElementById(`task-${task.id}`);
+    if (!$card) return;
+    $card.classList.add("answered");
+    for (const sel of [".ask", ".actions", ".dismiss"]) $card.querySelector(sel)?.remove();
+    $card.querySelector(".card-head .kind")?.after(chip("Saved", "ok"));
+  }
+
+  /** Dismiss: the ask is put away (cancelled) without an answer, after the page's own confirm. */
+  function dismiss(view, task) {
+    dialog({
+      title: "Put this question away?",
+      hint: "Your agent asked this earlier. It will not get an answer to it.",
+      input: false,
+      danger: true,
+      submit: "Put away",
+      run: async () => {
+        await api("POST", `/decks/${view.deck.id}/tasks/${encodeURIComponent(task.id)}/dismiss`, { operationId: crypto.randomUUID() });
+        document.getElementById(`task-${task.id}`)?.remove();
+      },
+    });
+  }
+
+  /** Ask the plan frame to save what is still debounced, then wait for the save. */
+  async function settlePlanEdits() {
+    if (planFrame && window.PlanBridge?.notify(planFrame, { type: "flush" })) await new Promise((r) => setTimeout(r, 150));
+    while (planSaving) await planSaving.catch(() => {});
+  }
+
+  async function respond(view, task, action, $btn, $out) {
+    if (action === "comment" || action === "request-changes") {
+      return dialog({ title: actionLabel(action), hint: "Your note goes to the agent with the answer.", placeholder: "What should change?", submit: actionLabel(action), multiline: true, run: (comment) => send({ comment }) });
+    }
+    return send({});
+    async function send(payload) {
+      for (const b of $btn.parentElement.querySelectorAll("button")) b.disabled = true;
+      try {
+        // Edits typed just before the click land first; the task follows them
+        // on the server, so the answer covers the plan as it is on screen.
+        await settlePlanEdits();
+        const r = await api("POST", `/decks/${view.deck.id}/tasks/${encodeURIComponent(task.id)}/respond`, { operationId: crypto.randomUUID(), expectedHash: task.subject?.hash ?? null, action, payload });
+        answered.add(task.id);
+        settleCard(task);
+        // the same hand-over after every answer: the message to paste, copied only by the user's own click
+        const message = r.message ?? "";
+        $out.replaceChildren(doneNote(message));
+        showHandoff({ message });
+      } catch (err) {
+        for (const b of $btn.parentElement.querySelectorAll("button")) b.disabled = false;
+        if (err.code === "stale_subject") $out.replaceChildren(h("p", { class: "error", "data-code": err.code }, "Your agent changed this since it asked — showing the new version."));
+        else $out.replaceChildren(errorBox(err));
+        if (err.code === "stale_subject") setTimeout(refreshDeckChrome, 1500);
+      }
+    }
+  }
+
+  boot();
+})();