slidemind 0.1.6 → 0.1.8

package/src/builders/plan-overlay.js

@@ -0,0 +1,747 @@
+// Plan sign-off overlay — the CLI's plan-review gate, styled as the same
+// branded slidemind "app" as the preview-review overlay (review-overlay.js).
+// Dormant unless `window.__SLIDEMIND_PLAN_REVIEW__` is set (only the
+// `slidemind plan` local server injects it), and dormant inside an iframe /
+// thumbnail render, so nothing runs on an ordinary page.
+//
+// The gate is editor-first: a plain markdown editor (the raw plan.md body) on
+// the left, a live rendered preview on the right — re-rendered client-side via
+// the same dependency-free renderer the server used (`plan-md.mjs`, shipped
+// inline as window.__SLIDEMIND_RENDER_MD__). The preview pane is collapsible
+// so users who just want the editor can hide it.
+//
+// The decision lives in ONE always-visible chat-style composer bar pinned at
+// the bottom (no per-block pins, nothing behind a pill): a chat input ("tell
+// the agent what to change…"), a round send button, and — fused to its right —
+// the Approve button, whose sub-label says what approving means: the agent
+// builds the slides next. The previous round's feedback shows as a read-only
+// note above the input.
+//   - send      → decision "comments" with the overall comment. The tab does
+//                 NOT veil over: the workspace stays readable (editor locks,
+//                 read-only) and the composer bar becomes a spinner + wait
+//                 note while the heartbeat polling waits for the agent's next
+//                 `slidemind plan` round, which reloads this same tab.
+//   - Approve   → decision "approve" (unsent feedback arm-confirms first),
+//                 then the full-screen brand animation — logo + drifting
+//                 wordmark + "the agent is building your slides" — before the
+//                 tab closes itself.
+// Both POST {decision, comment, editedPlan} to the local server so the
+// `slidemind plan` command unblocks.
+//
+// Branding is lifted verbatim from review-overlay.js: the embossed "raised
+// slide" logo (inline-SVG fallback when no per-brand orb PNG is bundled), the
+// drifting "slide"/"mind" wordmark, Poppins/Urbanist type, Lucide icons, and
+// the neutral dark product palette.
+
+(function () {
+  var CFG = window.__SLIDEMIND_PLAN_REVIEW__;
+  if (!CFG) return;
+  // Dormant inside an iframe / thumbnail render (mirrors review-overlay).
+  if (window.top !== window.self) return;
+  if (new URLSearchParams(location.search).get("thumb") === "1") return;
+
+  var PREVIEW_PREF_KEY = "slidemind-plan-preview";
+  var RENDER_DEBOUNCE_MS = 150;
+  var APPROVE_CLOSE_DELAY_MS = 2400; // long enough to read the build animation
+  var ROUND_READY_FLAG = "slidemind-plan-round-ready"; // sessionStorage marker across the reload
+  var ATTENTION_TITLE = "● Plan ready — slidemind";
+  var WAITING_TITLE = "⏳ Agent revising — slidemind";
+
+  // ---------- state ----------
+  var submitted = false;
+  var approveArmed = false; // inline "discard unsent feedback?" confirm state
+  var previewOpen = true;
+  var baseline = CFG.planBody || ""; // the served plan body; edits diff against it
+  var renderTimer = null;
+
+  var bar, wsEl, edPane, previewPane, editorEl, commentEl, composerEl;
+  var editedBadge, approveBtn, sendBtn, previewBtn;
+  var waitTextEl = null;
+  var notifyPermPromise = null; // resolved Notification permission, asked at the send gesture
+
+  // ---------- brand assets (identical to review-overlay.js) ----------
+  var LOGO_SVG =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="160 160 960 540" preserveAspectRatio="none">' +
+    "<defs>" +
+    '<linearGradient id="rimTop" gradientUnits="userSpaceOnUse" x1="160" y1="0" x2="1120" y2="0">' +
+    '<stop offset="0%" stop-color="#d0e4ff" stop-opacity="0.85"/>' +
+    '<stop offset="35%" stop-color="#fff" stop-opacity="0.5"/>' +
+    '<stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="rimLeft" gradientUnits="userSpaceOnUse" x1="0" y1="160" x2="0" y2="700">' +
+    '<stop offset="0%" stop-color="#d0e4ff" stop-opacity="0.6"/>' +
+    '<stop offset="40%" stop-color="#fff" stop-opacity="0.28"/>' +
+    '<stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="rimBottom" gradientUnits="userSpaceOnUse" x1="1120" y1="0" x2="160" y2="0">' +
+    '<stop offset="0%" stop-color="#000" stop-opacity="0.55"/>' +
+    '<stop offset="60%" stop-color="#000" stop-opacity="0.2"/>' +
+    '<stop offset="100%" stop-color="#000" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="rimRight" gradientUnits="userSpaceOnUse" x1="0" y1="700" x2="0" y2="160">' +
+    '<stop offset="0%" stop-color="#000" stop-opacity="0.45"/>' +
+    '<stop offset="60%" stop-color="#000" stop-opacity="0.16"/>' +
+    '<stop offset="100%" stop-color="#000" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="faceFill" gradientUnits="userSpaceOnUse" x1="160" y1="160" x2="1120" y2="700">' +
+    '<stop offset="0%" stop-color="#fff" stop-opacity="0.08"/>' +
+    '<stop offset="50%" stop-color="#808080" stop-opacity="0.02"/>' +
+    '<stop offset="100%" stop-color="#000" stop-opacity="0.10"/></linearGradient>' +
+    "</defs>" +
+    '<rect x="160" y="160" width="960" height="540" rx="40" ry="40" fill="url(#faceFill)"/>' +
+    '<path d="M 160,200 A 40,40 0 0 1 200,160 L 1080,160 A 40,40 0 0 1 1120,200" fill="none" stroke="url(#rimTop)" stroke-width="3" stroke-linecap="round"/>' +
+    '<path d="M 160,200 L 160,660 A 40,40 0 0 0 200,700" fill="none" stroke="url(#rimLeft)" stroke-width="2.4" stroke-linecap="round"/>' +
+    '<path d="M 1120,660 A 40,40 0 0 1 1080,700 L 200,700 A 40,40 0 0 1 160,660" fill="none" stroke="url(#rimBottom)" stroke-width="3" stroke-linecap="round"/>' +
+    '<path d="M 1120,660 L 1120,200 A 40,40 0 0 0 1080,160" fill="none" stroke="url(#rimRight)" stroke-width="2.4" stroke-linecap="round"/>' +
+    '<rect x="160" y="160" width="960" height="540" rx="40" ry="40" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.4"/>' +
+    "</svg>";
+
+  // Give a copy of the logo unique gradient ids so two instances (header + done
+  // veil) can coexist without id collisions.
+  function logoWithIds(suffix) {
+    return LOGO_SVG.replace(/id="([^"]+)"/g, 'id="$1' + suffix + '"').replace(
+      /url\(#([^)]+)\)/g,
+      "url(#$1" + suffix + ")",
+    );
+  }
+
+  // Lucide icons (MIT) — the same family review-overlay uses.
+  var ICONS = {
+    check:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
+    panel:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/></svg>',
+    ghost:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11a9 9 0 0 1 18 0v10l-3-2-3 2-3-2-3 2-3-2-3 2Z"/><path d="M9 11h.01"/><path d="M15 11h.01"/></svg>',
+    send:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>',
+  };
+
+  // ---------- styles (chrome copied from review-overlay.js; pins/popover/
+  // sidebar rules dropped, editor/preview/dock rules added) ----------
+  var CSS =
+    "@keyframes sm-drift-a{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}" +
+    "@keyframes sm-drift-b{0%,100%{transform:translateX(5px)}50%{transform:translateX(-5px)}}" +
+    "@keyframes sm-bar-in{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}" +
+    "@keyframes sm-veil-in{from{opacity:0}to{opacity:1}}" +
+    "@keyframes sm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}" +
+    "@keyframes sm-pulse{0%,100%{opacity:.45}50%{opacity:.85}}" +
+    ":root{--sm-bg:var(--deck-chrome-bg,#111113);--sm-surface:var(--deck-chrome-bg-2,#161618);" +
+    "--sm-border:var(--deck-chrome-border,#2b2b30);--sm-fg:var(--deck-chrome-fg,#ededed);" +
+    "--sm-dim:var(--deck-chrome-dim,#9a9aa0);--sm-accent:#a9c2ff;--sm-success:#2ecc71;--sm-danger:#f87171;" +
+    "--sm-warn:#f6c454;--sm-font:'Poppins',ui-sans-serif,system-ui,sans-serif;--sm-word:'Urbanist',var(--sm-font);}" +
+    ".sm-o,.sm-o *{box-sizing:border-box;}" +
+    /* header */
+    ".sm-bar{position:fixed;top:0;left:0;right:0;z-index:2147483600;display:flex;align-items:center;" +
+    "gap:16px;height:var(--deck-chrome-h,62px);padding:0 18px;color:var(--sm-fg);font-family:var(--sm-font);font-size:13px;" +
+    "background:var(--sm-bg);border-bottom:1px solid var(--sm-border);" +
+    "user-select:none;animation:sm-bar-in .5s cubic-bezier(.2,.7,.2,1);}" +
+    ".sm-brand{display:flex;align-items:center;gap:11px;}" +
+    ".sm-logo{position:relative;width:48px;height:27px;border-radius:5px;overflow:hidden;flex-shrink:0;background:#0a0c11;box-shadow:0 1px 3px rgba(0,0,0,.5);}" +
+    ".sm-logo-svg{position:absolute;inset:0;z-index:1;}.sm-logo-svg svg{width:100%;height:100%;display:block;}" +
+    ".sm-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}" +
+    ".sm-word{display:flex;flex-direction:column;line-height:.98;font-family:var(--sm-word);" +
+    "font-weight:300;font-size:13px;letter-spacing:.46em;color:var(--sm-fg);}" +
+    ".sm-word b{font-weight:300;display:block;will-change:transform;}" +
+    ".sm-word .top{animation:sm-drift-a 20s ease-in-out infinite;}" +
+    ".sm-word .bot{margin-left:.18em;animation:sm-drift-b 20s ease-in-out infinite;}" +
+    ".sm-sep{width:1px;height:28px;background:var(--sm-border);}" +
+    ".sm-meta{display:flex;flex-direction:column;gap:2px;}" +
+    ".sm-meta .t{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;}" +
+    ".sm-meta .h{font-size:11.5px;color:var(--sm-dim);}" +
+    ".sm-edited{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sm-warn);" +
+    "border:1px solid rgba(246,196,84,.4);border-radius:999px;padding:1px 7px;}" +
+    ".sm-grow{flex:1;}" +
+    /* buttons */
+    ".sm-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:9px;" +
+    "padding:8px 14px;font-family:var(--sm-font);font-weight:600;font-size:12.5px;cursor:pointer;" +
+    "transition:transform .14s ease,background .14s ease,box-shadow .14s ease,border-color .14s ease;white-space:nowrap;}" +
+    ".sm-btn svg{width:15px;height:15px;flex-shrink:0;}" +
+    ".sm-btn-primary{background:#f4f4f5;color:#0f0f0f;}" +
+    ".sm-btn-primary:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.45);}" +
+    ".sm-btn-primary svg{color:var(--sm-success);}" +
+    ".sm-btn-primary.is-armed{background:#f6c454;color:#241a00;}" +
+    ".sm-btn-primary.is-armed svg{color:#241a00;}" +
+    ".sm-btn-ghost{background:transparent;border-color:var(--sm-border);color:var(--sm-fg);}" +
+    ".sm-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:#3a3a40;}" +
+    ".sm-btn-ghost.is-on{background:rgba(169,194,255,.14);border-color:var(--sm-accent);color:#dbe6ff;}" +
+    ".sm-btn.is-off{opacity:.4;cursor:not-allowed;pointer-events:none;}" +
+    /* workspace: editor + preview panes, comment dock */
+    ".sm-ws{position:fixed;left:0;right:0;top:var(--deck-chrome-h,62px);bottom:0;z-index:2147483540;" +
+    "display:flex;flex-direction:column;background:var(--sm-bg);}" +
+    ".sm-panes{flex:1;display:flex;min-height:0;}" +
+    ".sm-ed{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--sm-border);}" +
+    ".sm-panes.preview-hidden .sm-ed{border-right:0;}" +
+    ".sm-ed-ta{flex:1;width:100%;resize:none;border:0;outline:none;background:#0c0c0e;color:#e8e8ea;" +
+    "padding:22px 24px;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;}" +
+    ".sm-prev{flex:1;min-width:0;overflow-y:auto;background:#0e0e10;}" +
+    ".sm-panes.preview-hidden .sm-prev{display:none;}" +
+    ".sm-prev #plan-root{padding:28px 30px 90px;}" +
+    /* chat composer bar — always visible; owns the whole decision */
+    ".sm-composer{flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:11px 16px;" +
+    "border-top:1px solid var(--sm-border);background:var(--sm-surface);font-family:var(--sm-font);}" +
+    ".sm-prev-note{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--sm-dim);" +
+    "line-height:1.5;padding:7px 10px;border:1px dashed #3a3a40;border-radius:9px;background:rgba(255,255,255,.02);}" +
+    ".sm-prev-note svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:#71717a;}" +
+    ".sm-prev-note .lbl{font-weight:600;color:#a1a1aa;white-space:nowrap;}" +
+    ".sm-prev-note .txt{white-space:pre-wrap;word-break:break-word;color:#b9b9be;}" +
+    ".sm-composer-row{display:flex;align-items:flex-end;gap:10px;}" +
+    ".sm-chat-ta{flex:1;min-height:40px;max-height:150px;resize:none;background:#0c0c0e;color:var(--sm-fg);" +
+    "border:1px solid var(--sm-border);border-radius:14px;padding:10px 15px;font:13px/1.5 var(--sm-font);" +
+    "outline:none;transition:border-color .15s;}" +
+    ".sm-chat-ta:focus{border-color:var(--sm-accent);}.sm-chat-ta::placeholder{color:#6b6b72;}" +
+    ".sm-send{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;flex-shrink:0;" +
+    "display:flex;align-items:center;justify-content:center;background:var(--sm-accent);color:#0f1220;" +
+    "transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;}" +
+    ".sm-send svg{width:16px;height:16px;margin:1px 1px 0 0;}" +
+    ".sm-send:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 8px 22px rgba(169,194,255,.35);}" +
+    ".sm-send.is-off{opacity:.35;cursor:not-allowed;pointer-events:none;}" +
+    ".sm-composer-sep{width:1px;align-self:stretch;background:var(--sm-border);}" +
+    /* approve — the sub-label announces the consequence: the agent builds next */
+    ".sm-approve{display:inline-flex;flex-direction:column;align-items:center;gap:1px;border:0;" +
+    "border-radius:12px;padding:7px 16px;background:#f4f4f5;color:#0f0f0f;cursor:pointer;font-family:var(--sm-font);" +
+    "transition:transform .14s ease,background .14s ease,box-shadow .14s ease;white-space:nowrap;}" +
+    ".sm-approve:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.45);}" +
+    ".sm-approve .main{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px;}" +
+    ".sm-approve .main svg{width:15px;height:15px;color:var(--sm-success);}" +
+    ".sm-approve .sub{font-size:9.5px;font-weight:500;color:#61616a;}" +
+    ".sm-approve.is-armed{background:#f6c454;color:#241a00;}" +
+    ".sm-approve.is-armed .main svg{color:#241a00;}" +
+    /* waiting state — feedback sent, the agent is revising; tab stays readable */
+    "@keyframes sm-rotate{to{transform:rotate(360deg)}}" +
+    ".sm-wait{display:flex;align-items:center;gap:12px;padding:7px 2px;font-size:12.5px;" +
+    "color:var(--sm-dim);line-height:1.5;}" +
+    ".sm-wait b{color:var(--sm-fg);font-weight:600;}" +
+    ".sm-spin{width:17px;height:17px;border-radius:50%;border:2px solid var(--sm-border);" +
+    "border-top-color:var(--sm-accent);animation:sm-rotate .9s linear infinite;flex-shrink:0;}" +
+    ".sm-ws.is-waiting .sm-ed-ta{opacity:.55;}" +
+    /* done veil */
+    ".sm-veil{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;align-items:center;" +
+    "justify-content:center;gap:30px;font-family:var(--sm-font);color:var(--sm-fg);" +
+    "background:radial-gradient(ellipse at center,rgba(16,16,18,.93),rgba(5,5,7,.98));" +
+    "-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:sm-veil-in .4s ease;}" +
+    ".sm-veil .sm-logo{width:188px;height:106px;border-radius:14px;animation:sm-rise .6s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-veil .word{display:flex;flex-direction:column;gap:6px;font-family:var(--sm-word);font-weight:300;" +
+    "font-size:36px;letter-spacing:.6em;text-align:center;animation:sm-rise .6s .06s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-veil .word b{font-weight:300;}" +
+    ".sm-veil .word .top{animation:sm-drift-a 18s ease-in-out infinite;}" +
+    ".sm-veil .word .bot{margin-left:.3em;animation:sm-drift-b 18s ease-in-out infinite;}" +
+    ".sm-veil .status{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;animation:sm-rise .6s .12s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-veil .status svg{width:24px;height:24px;color:var(--sm-success);}" +
+    ".sm-veil .sub{color:var(--sm-dim);font-size:13.5px;animation:sm-rise .6s .18s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-veil .sub.sm-pulse{animation:sm-rise .6s .18s cubic-bezier(.2,.7,.2,1) both,sm-pulse 2s .9s ease-in-out infinite;}";
+
+  // ---------- helpers ----------
+  function el(tag, cls, html) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (html != null) e.innerHTML = html;
+    return e;
+  }
+  function planRoot() {
+    return document.getElementById("plan-root");
+  }
+  function wordmarkHtml() {
+    return '<b class="top">slide</b><b class="bot">mind</b>';
+  }
+  // Genuine path: the add-in's per-brand orb PNG (CFG.logoMark). Fallback: the
+  // inline embossed slide glyph — no CLI-side orb re-creation.
+  function logoNode(cls, idSuffix) {
+    var box = el("div", cls);
+    if (CFG.logoMark) {
+      var img = el("img", "sm-logo-img");
+      img.src = CFG.logoMark;
+      img.alt = "slidemind";
+      box.appendChild(img);
+      return box;
+    }
+    box.appendChild(el("div", "sm-logo-svg", idSuffix ? logoWithIds(idSuffix) : LOGO_SVG));
+    return box;
+  }
+  function mkButton(label, variant, iconName) {
+    var b = el("button", "sm-btn sm-btn-" + variant);
+    b.innerHTML = (iconName ? ICONS[iconName] : "") + "<span>" + label + "</span>";
+    return b;
+  }
+  function btnLabel(b, text) {
+    var s = b.querySelector("span");
+    if (s) s.textContent = text;
+  }
+  function planWasEdited() {
+    return !!editorEl && editorEl.value !== baseline;
+  }
+  function commentText() {
+    return commentEl ? commentEl.value.trim() : "";
+  }
+
+  // ---------- chrome (top bar) ----------
+  function buildChrome() {
+    bar = el("div", "sm-o sm-bar");
+    bar.setAttribute("data-sm-overlay", "1");
+
+    var brand = el("div", "sm-brand");
+    brand.appendChild(logoNode("sm-logo"));
+    brand.appendChild(el("div", "sm-word", wordmarkHtml()));
+    bar.appendChild(brand);
+    bar.appendChild(el("div", "sm-sep"));
+
+    var meta = el("div", "sm-meta");
+    var title = el("div", "t");
+    title.appendChild(document.createTextNode("Plan review"));
+    editedBadge = el("span", "sm-edited", "edited");
+    editedBadge.style.display = "none";
+    title.appendChild(editedBadge);
+    meta.appendChild(title);
+    meta.appendChild(
+      el("div", "h", "Edit the markdown directly · the preview follows · decide below when it reads right"),
+    );
+    bar.appendChild(meta);
+
+    bar.appendChild(el("div", "sm-grow"));
+
+    previewBtn = mkButton("Preview", "ghost", "panel");
+    previewBtn.onclick = togglePreview;
+    bar.appendChild(previewBtn);
+
+    document.body.appendChild(bar);
+  }
+  function refreshChrome() {
+    if (editedBadge) editedBadge.style.display = planWasEdited() ? "" : "none";
+
+    var hasFeedback = commentText().length > 0;
+    if (sendBtn) {
+      sendBtn.classList.toggle("is-off", !hasFeedback);
+    }
+    if (approveBtn) {
+      var main = approveBtn.querySelector(".main span");
+      var sub = approveBtn.querySelector(".sub");
+      if (approveArmed && hasFeedback) {
+        approveBtn.classList.add("is-armed");
+        if (main) main.textContent = "Feedback not sent — approve anyway?";
+        if (sub) sub.style.display = "none";
+      } else {
+        approveArmed = false;
+        approveBtn.classList.remove("is-armed");
+        if (main) main.textContent = "Approve plan";
+        if (sub) sub.style.display = "";
+      }
+    }
+    if (previewBtn) {
+      previewBtn.classList.toggle("is-on", previewOpen);
+      btnLabel(previewBtn, previewOpen ? "Hide preview" : "Show preview");
+    }
+  }
+
+  // ---------- workspace: editor + live preview + comment dock ----------
+  function buildWorkspace() {
+    wsEl = el("div", "sm-o sm-ws");
+    wsEl.setAttribute("data-sm-overlay", "1");
+
+    var panes = el("div", "sm-panes");
+
+    edPane = el("div", "sm-ed");
+    editorEl = el("textarea", "sm-ed-ta");
+    editorEl.spellcheck = false;
+    editorEl.value = baseline;
+    editorEl.addEventListener("input", function () {
+      schedulePreview();
+      refreshChrome();
+    });
+    // Tab indents instead of walking focus out of the editor.
+    editorEl.addEventListener("keydown", function (e) {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        var s = editorEl.selectionStart;
+        var t = editorEl.selectionEnd;
+        editorEl.value = editorEl.value.slice(0, s) + "  " + editorEl.value.slice(t);
+        editorEl.selectionStart = editorEl.selectionEnd = s + 2;
+        schedulePreview();
+        refreshChrome();
+      }
+    });
+    edPane.appendChild(editorEl);
+    panes.appendChild(edPane);
+
+    // The preview pane adopts the server-rendered #plan-root; live re-renders
+    // replace its innerHTML from the editor content.
+    previewPane = el("div", "sm-prev");
+    var root = planRoot();
+    if (root) previewPane.appendChild(root);
+    panes.appendChild(previewPane);
+
+    wsEl.appendChild(panes);
+    document.body.appendChild(wsEl);
+    applyPreviewState(readPreviewPref());
+  }
+
+  // ---------- chat composer bar ----------
+  // Always visible at the bottom of the workspace — the whole decision in one
+  // strip: previous round's feedback read-only, the chat input ("tell the
+  // agent what to change…"), the round send button, and Approve with its
+  // consequence spelled out ("the agent builds the slides next").
+  function buildComposerBar() {
+    composerEl = el("div", "sm-composer");
+    composerEl.setAttribute("data-sm-overlay", "1");
+
+    if (CFG.previousComment) {
+      var prev = el("div", "sm-prev-note");
+      prev.innerHTML = ICONS.ghost + '<span class="lbl">Previous round</span>';
+      var txt = el("span", "txt");
+      txt.textContent = CFG.previousComment;
+      prev.appendChild(txt);
+      composerEl.appendChild(prev);
+    }
+
+    var row = el("div", "sm-composer-row");
+    commentEl = el("textarea", "sm-chat-ta");
+    commentEl.rows = 1;
+    commentEl.placeholder = "Tell the agent what to change — or edit the plan above yourself…";
+    commentEl.addEventListener("input", function () {
+      commentEl.style.height = "auto";
+      commentEl.style.height = Math.min(commentEl.scrollHeight, 150) + "px";
+      refreshChrome();
+    });
+    commentEl.addEventListener("keydown", function (e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") requestChanges();
+    });
+    row.appendChild(commentEl);
+
+    sendBtn = el("button", "sm-send is-off");
+    sendBtn.title = "Send — the agent revises the plan and comes back";
+    sendBtn.innerHTML = ICONS.send;
+    sendBtn.onclick = requestChanges;
+    row.appendChild(sendBtn);
+
+    row.appendChild(el("div", "sm-composer-sep"));
+
+    approveBtn = el("button", "sm-approve");
+    approveBtn.innerHTML =
+      '<span class="main">' +
+      ICONS.check +
+      "<span>Approve plan</span></span>" +
+      '<span class="sub">the agent builds the slides next</span>';
+    approveBtn.onclick = function () {
+      // Approving with unsent feedback in the input discards it — confirm inline.
+      if (commentText() && !approveArmed) {
+        approveArmed = true;
+        refreshChrome();
+        return;
+      }
+      submit("approve");
+    };
+    row.appendChild(approveBtn);
+
+    composerEl.appendChild(row);
+    wsEl.appendChild(composerEl);
+  }
+
+  // ---------- waiting state (comments sent) ----------
+  // The tab does NOT veil over on a comments round: the plan stays readable,
+  // the editor locks, and the composer bar becomes the wait signal until the
+  // agent's next `slidemind plan` round reloads this tab (heartbeat polling).
+  function enterWaiting() {
+    if (editorEl) editorEl.readOnly = true;
+    if (wsEl) wsEl.classList.add("is-waiting");
+    document.title = WAITING_TITLE; // the tab label signals the state from the tab bar
+    if (composerEl) {
+      composerEl.innerHTML = "";
+      var w = el("div", "sm-wait");
+      w.appendChild(el("div", "sm-spin"));
+      waitTextEl = el(
+        "div",
+        null,
+        "<b>Feedback sent.</b> The agent is revising the plan — this tab refreshes " +
+          "automatically when the next round is ready. Feel free to keep reading, " +
+          "or come back later.",
+      );
+      w.appendChild(waitTextEl);
+      composerEl.appendChild(w);
+    }
+    // The permission prompt was raised at the send click (a user gesture, so the
+    // browser shows it); once granted, tell the user a notification will come.
+    (notifyPermPromise || Promise.resolve(notifyPermission())).then(function (perm) {
+      if (perm === "granted" && waitTextEl) {
+        waitTextEl.innerHTML += " You'll get a notification the moment it's ready.";
+      }
+    });
+  }
+
+  // ---------- next-round attention ----------
+  // A background tab cannot steal focus (by browser design). What it CAN do:
+  // fire a system notification whose click is allowed to focus the tab, and
+  // flag itself in the tab bar with an attention title until it is focused.
+  function notifyPermission() {
+    try {
+      return "Notification" in window ? Notification.permission : "unsupported";
+    } catch {
+      return "unsupported";
+    }
+  }
+  function requestNotifyPermission() {
+    try {
+      if (!("Notification" in window)) return Promise.resolve("unsupported");
+      if (Notification.permission !== "default") return Promise.resolve(Notification.permission);
+      return Promise.resolve(Notification.requestPermission());
+    } catch {
+      return Promise.resolve("unsupported");
+    }
+  }
+  // The reload wipes this JS context, so the "announce the new round" wish is
+  // parked in sessionStorage and honoured by the NEXT page load.
+  function markRoundReadyAndReload() {
+    try {
+      sessionStorage.setItem(ROUND_READY_FLAG, "1");
+    } catch {
+      /* storage blocked — the reload still lands, just without the announce */
+    }
+    location.reload();
+  }
+  function announceNewRound() {
+    var flagged = false;
+    try {
+      flagged = sessionStorage.getItem(ROUND_READY_FLAG) === "1";
+      if (flagged) sessionStorage.removeItem(ROUND_READY_FLAG);
+    } catch {
+      /* no storage — nothing to announce */
+    }
+    if (!flagged) return;
+    try {
+      window.focus(); // best-effort; most browsers ignore it for background tabs
+    } catch {
+      /* ignore */
+    }
+    if (!document.hidden) return; // user is already looking at it
+    var origTitle = document.title;
+    var restore = function () {
+      document.title = origTitle;
+      document.removeEventListener("visibilitychange", onVis);
+      window.removeEventListener("focus", restore);
+    };
+    var onVis = function () {
+      if (!document.hidden) restore();
+    };
+    document.title = ATTENTION_TITLE;
+    document.addEventListener("visibilitychange", onVis);
+    window.addEventListener("focus", restore);
+    try {
+      if (notifyPermission() === "granted") {
+        var n = new Notification("slidemind — plan ready", {
+          body: "The revised plan is ready for your review. Click to jump back to the tab.",
+          tag: "slidemind-plan-round", // replaces an earlier round's notification
+        });
+        n.onclick = function () {
+          try {
+            window.focus();
+          } catch {
+            /* ignore */
+          }
+          n.close();
+        };
+      }
+    } catch {
+      /* notification construction can throw on some platforms — title marker stands */
+    }
+  }
+
+  // ---------- live preview ----------
+  // Debounced re-render of the preview from the editor's current text, via the
+  // renderer the page ships (plan-md.mjs run in-browser). Absent the renderer
+  // the preview simply stays at the served render.
+  function schedulePreview() {
+    if (!window.__SLIDEMIND_RENDER_MD__) return;
+    if (renderTimer) clearTimeout(renderTimer);
+    renderTimer = setTimeout(renderPreview, RENDER_DEBOUNCE_MS);
+  }
+  function renderPreview() {
+    renderTimer = null;
+    var root = planRoot();
+    var render = window.__SLIDEMIND_RENDER_MD__;
+    if (!root || !render) return;
+    var st = previewPane ? previewPane.scrollTop : 0;
+    try {
+      root.innerHTML = render(editorEl.value, {
+        lineOffset: (CFG.bodyStartLine || 1) - 1,
+      });
+    } catch {
+      return; // never let a renderer hiccup take down the editor
+    }
+    if (previewPane) previewPane.scrollTop = st;
+  }
+
+  // ---------- preview collapse ----------
+  function readPreviewPref() {
+    try {
+      return localStorage.getItem(PREVIEW_PREF_KEY) !== "hidden";
+    } catch {
+      return true;
+    }
+  }
+  function applyPreviewState(open) {
+    previewOpen = open;
+    var panes = wsEl && wsEl.querySelector(".sm-panes");
+    if (panes) panes.classList.toggle("preview-hidden", !previewOpen);
+    refreshChrome();
+  }
+  function togglePreview() {
+    applyPreviewState(!previewOpen);
+    try {
+      localStorage.setItem(PREVIEW_PREF_KEY, previewOpen ? "shown" : "hidden");
+    } catch {
+      /* private mode etc. — the toggle still works for this tab */
+    }
+    if (previewOpen) renderPreview(); // catch up on edits made while hidden
+  }
+
+  // ---------- submit ----------
+  function requestChanges() {
+    if (!commentText()) return;
+    // Ask for notification permission HERE — the click is a user gesture, the
+    // only context where the browser will actually show the prompt.
+    notifyPermPromise = requestNotifyPermission();
+    submit("comments");
+  }
+  function submit(decision) {
+    if (submitted) return;
+    submitted = true;
+    var payload = {
+      decision: decision,
+      comment: decision === "comments" ? commentText() : null,
+      editedPlan: planWasEdited() ? editorEl.value : null,
+    };
+    fetch(CFG.endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    })
+      .then(function () {
+        // Approve ends the session — the brand build animation plays, then the
+        // tab closes itself. A comments round keeps the tab OPEN and readable:
+        // the composer becomes a spinner + wait note while the heartbeat
+        // polling waits for the next run, which reloads this same tab.
+        if (decision === "approve") {
+          showApproved();
+        } else {
+          enterWaiting();
+          startNextRoundPolling();
+        }
+      })
+      .catch(function () {
+        submitted = false;
+        alert("Could not reach the slidemind plan server — is the terminal command still running?");
+      });
+  }
+  function requestTabClose() {
+    setTimeout(function () {
+      try {
+        window.open("", "_self");
+        window.close();
+      } catch {
+        // Some browsers only allow script-opened tabs to close themselves.
+      }
+    }, 120);
+  }
+  // After a comments round the tab stays open and polls the heartbeat so the
+  // NEXT run (which binds the same deterministic port) reloads this tab instead
+  // of opening a fresh browser window.
+  function startNextRoundPolling() {
+    var startedAt = Date.now();
+    var pollMs = CFG.pollMs || 1000;
+    var ttl = CFG.pollTtlMs || 35 * 60 * 1000;
+    var hb = CFG.heartbeat || "/__plan/heartbeat";
+    var timer = setInterval(function () {
+      if (Date.now() - startedAt > ttl) {
+        clearInterval(timer);
+        showSessionEnded();
+        return;
+      }
+      fetch(hb, { cache: "no-store" })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (data) {
+          // Reload only for a genuine NEWER slidemind plan round: shape-guard the
+          // service marker (a foreign app / the preview gate may have taken the
+          // port) and require a different nonce (same nonce = this run's own
+          // orphan — never self-reload).
+          if (!data || data.service !== "slidemind-plan" || !data.round) return;
+          if (data.round !== CFG.round) {
+            clearInterval(timer);
+            markRoundReadyAndReload();
+          }
+        })
+        .catch(function () { /* server down between rounds — keep polling */ });
+    }, pollMs);
+  }
+
+  // ---------- done veil ----------
+  // Shared full-screen veil (logo + wordmark + status + sub). Replaces any veil
+  // already shown rather than stacking a second one, so a comments round's
+  // "waiting" veil can be swapped for "session ended" in place.
+  function showVeil(statusHtml, subText, subPulse) {
+    if (bar) bar.style.display = "none";
+    if (wsEl) wsEl.style.display = "none";
+    var existing = document.querySelector(".sm-veil[data-sm-overlay]");
+    if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
+    var veil = el("div", "sm-o sm-veil");
+    veil.setAttribute("data-sm-overlay", "1");
+    veil.appendChild(logoNode("sm-logo", "-v"));
+    veil.appendChild(el("div", "word", wordmarkHtml()));
+    veil.appendChild(el("div", "status", statusHtml));
+    veil.appendChild(el("div", "sub" + (subPulse ? " sm-pulse" : ""), subText));
+    document.body.appendChild(veil);
+  }
+  // Approve's exit moment: the full-screen brand animation — rising logo,
+  // drifting wordmark — announcing that the agent now builds the slides. The
+  // tab closes itself after the animation has had time to land; if the browser
+  // refuses, the pulsing veil keeps telling the user what's happening.
+  function showApproved() {
+    showVeil(
+      ICONS.check + "<span>Plan approved</span>",
+      "The agent is building your slides now — you can close this tab.",
+      true,
+    );
+    setTimeout(requestTabClose, APPROVE_CLOSE_DELAY_MS);
+  }
+  function showSessionEnded() {
+    showVeil("<span>Session ended</span>", "You can close this tab.");
+  }
+
+  // ---------- assets ----------
+  function injectAssets() {
+    var style = el("style");
+    style.id = "sm-plan-style";
+    style.textContent = CSS;
+    document.head.appendChild(style);
+
+    var pre1 = el("link");
+    pre1.rel = "preconnect";
+    pre1.href = "https://fonts.googleapis.com";
+    var pre2 = el("link");
+    pre2.rel = "preconnect";
+    pre2.href = "https://fonts.gstatic.com";
+    pre2.crossOrigin = "anonymous";
+    var fonts = el("link");
+    fonts.rel = "stylesheet";
+    fonts.href =
+      "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Urbanist:wght@300;400&display=swap";
+    document.head.appendChild(pre1);
+    document.head.appendChild(pre2);
+    document.head.appendChild(fonts);
+  }
+
+  // ---------- wire up ----------
+  function init() {
+    var root = planRoot();
+    if (!root) {
+      setTimeout(init, 50);
+      return;
+    }
+    injectAssets();
+    buildChrome();
+    buildWorkspace();
+    buildComposerBar();
+    refreshChrome();
+    editorEl.focus();
+    announceNewRound(); // notification + title marker when this load IS the next round
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();