slidemind 0.1.7 → 0.1.9

package/src/builders/plan-overlay.js

@@ -0,0 +1,1778 @@
+// 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 a storyboard "dossier": the plan.md body is rendered into ONE
+// scrollable document surface. A plan that carries ```storyboard-canvas```
+// fences renders as the dossier — a red-thread tab strip + the selected
+// slide's editable storyboard canvas + a details aside — instead of a raw
+// editor. A plain-markdown plan renders its blocks inline-editable
+// (contenteditable) directly. Both paths edit the SAME markdown string, mapped
+// back through the plan modules exposed on window.__SLIDEMIND_PLAN__ (bundled
+// alongside window.__SLIDEMIND_RENDER_MD__ by plan.mjs).
+//
+// The decision lives in ONE always-visible chat-style composer bar pinned at
+// the bottom: a feedback input, a round send button (a "story iteration" pill
+// while storyline edits are staged) and — fused to its right — the Approve
+// button, whose sub-label says 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 (plus, when the
+//                 red thread was restructured, a generated story-iteration
+//                 instruction + the edited plan markdown). The tab does NOT
+//                 veil over: the surface locks read-only and the composer bar
+//                 becomes a spinner + wait note while 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;
+
+  // The bundled plan modules (schema / storyboard-markdown / backbone / edit /
+  // renderer) hang off this namespace — see plan.mjs bundlePlanModules.
+  var PLAN = window.__SLIDEMIND_PLAN__ || {};
+
+  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";
+  var BEAT_DRAG_THRESHOLD = 4; // px before a tab press becomes a drag
+  var BLOCK_DRAG_THRESHOLD = 3; // px before a block press becomes a drag
+
+  // ---------- state ----------
+  var submitted = false;
+  var approveArmed = false; // inline "discard unsent feedback?" confirm state
+  var waiting = false; // comments round sent → the surface locks read-only
+  var baseline = CFG.planBody || ""; // the served plan body; edits diff against it
+
+  // The single source of truth the whole overlay renders from. `value` is the
+  // frontmatter-less plan body (edits index into it); `selectedIndex` is the
+  // beat on stage; `storyDraft` is a staged red-thread restructure (null when
+  // none), which blocks Approve and turns "send" into a story-iteration round.
+  var S = { value: baseline, selectedIndex: 0, storyDraft: null };
+
+  var feedbackText = ""; // the composer input, kept across composer rebuilds
+  var pendingComment = null; // resolved comment/editedPlan for the next submit
+  var pendingEdited = null;
+  var editingKey = null; // the beat whose move text is in rename mode
+  var newSlideCounter = 0; // unique keys for inserted slides
+  var focusAfterRender = null; // an element to focus once a render settles
+
+  var bar, wsEl, surfaceEl, composerEl, commentEl;
+  var editedBadge, approveBtn, sendBtn;
+  var waitTextEl = null;
+  var notifyPermPromise = null; // resolved Notification permission, asked at the send gesture
+
+  function locked() {
+    return waiting;
+  }
+
+  // ---------- 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>',
+    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>',
+    sparkles:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>',
+    plus:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+    x:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    ruler:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>',
+  };
+
+  // ---------- styles (chrome copied from review-overlay.js; the editor/preview
+  // split is replaced by the storyboard dossier — plan-markdown.css ported and
+  // remapped onto the overlay's dark --sm-* palette; the two structural hues
+  // #3565d4 (blueprint blue) and #b41830 (storyline red) are literals) ----------
+  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-muted:rgba(255,255,255,.05);--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);" +
+    /* the two structural hues, brightened against the dark surface */
+    "--plan-annotation:color-mix(in srgb,#3565d4 60%,var(--sm-fg));" +
+    "--plan-annotation-line:color-mix(in srgb,#3565d4 52%,transparent);" +
+    "--plan-annotation-wash:color-mix(in srgb,#3565d4 12%,transparent);" +
+    "--plan-story:color-mix(in srgb,#b41830 72%,var(--sm-fg));" +
+    "--plan-story-line:color-mix(in srgb,#b41830 45%,transparent);}" +
+    ".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;min-width:0;}" +
+    ".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;}" +
+    /* workspace: one scrollable document surface + composer 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-ws-surface{flex:1;min-height:0;overflow-y:auto;background:var(--sm-bg);padding:22px 22px 30px;}" +
+    ".sm-ws.is-waiting .sm-ws-surface{pointer-events:none;opacity:.62;}" +
+    /* markdown document (Mode A + the storyboard headings share this scale) */
+    ".plan-md-root{max-width:min(1120px,100%);margin:0 auto;line-height:1.65;font-size:15.5px;color:var(--sm-fg);}" +
+    ".plan-md-root--storyboards{max-width:100%;display:flex;flex-direction:column;gap:0;}" +
+    ".plan-md-root h1,.plan-md-root h2,.plan-md-root h3,.plan-md-root h4,.plan-md-root h5,.plan-md-root h6{" +
+    "color:var(--sm-fg);font-weight:600;line-height:1.28;margin:1.6em 0 .5em;}" +
+    ".plan-md-root h1{font-size:1.95em;margin-top:.2em;}" +
+    ".plan-md-root h2{font-size:1.5em;padding-bottom:.24em;border-bottom:1px solid var(--sm-border);}" +
+    ".plan-md-root h3{font-size:1.22em;}.plan-md-root h4{font-size:1.05em;}" +
+    ".plan-md-root h5,.plan-md-root h6{font-size:.95em;color:var(--sm-dim);}" +
+    ".plan-md-root p{margin:.7em 0;}" +
+    ".plan-md-root ul,.plan-md-root ol{margin:.6em 0;padding-left:1.5em;}" +
+    ".plan-md-root ul{list-style:disc;}.plan-md-root ol{list-style:decimal;}" +
+    ".plan-md-root li{margin:.3em 0;}" +
+    ".plan-md-root blockquote{margin:.95em 0;padding:.45em 1em;border-left:3px solid var(--sm-border);" +
+    "color:var(--sm-dim);background:var(--sm-muted);border-radius:0 6px 6px 0;}" +
+    ".plan-md-root code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;" +
+    "background:var(--sm-muted);padding:.12em .42em;border-radius:5px;}" +
+    ".plan-md-root pre{background:#0c0c0e;border:1px solid var(--sm-border);border-radius:10px;padding:14px 16px;overflow-x:auto;line-height:1.5;}" +
+    ".plan-md-root pre code{background:none;padding:0;font-size:.86em;}" +
+    ".plan-md-root strong{color:var(--sm-fg);font-weight:600;}.plan-md-root em{font-style:italic;}" +
+    ".plan-md-root a{color:var(--sm-accent);}" +
+    ".plan-md-root [contenteditable=\"true\"]{border:0;background:transparent;border-radius:0;box-shadow:none;caret-color:currentColor;outline:none;}" +
+    ".plan-md-root [contenteditable=\"true\"]:focus{outline:none;box-shadow:none;background:transparent;}" +
+    /* dossier card */
+    ".plan-dossier{max-width:1120px;margin:0 auto;border:1px solid var(--sm-border);border-radius:14px;" +
+    "background:var(--sm-surface);overflow:hidden;}" +
+    ".plan-dossier-body{display:flex;flex-direction:column;gap:16px;padding:18px 20px 20px;}" +
+    ".plan-dossier-new-slide{display:flex;align-items:flex-start;gap:10px;border:1.5px dashed var(--plan-story-line);" +
+    "border-radius:10px;background:color-mix(in srgb,#b41830 6%,transparent);color:var(--sm-dim);font-size:13px;line-height:1.5;padding:22px 18px;}" +
+    ".plan-dossier-new-slide svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--plan-story);}" +
+    ".plan-dossier-new-slide p{margin:0;}.plan-dossier-new-slide strong{color:var(--sm-fg);font-weight:600;}" +
+    /* hand-off note */
+    ".plan-storyboard-draft-note{display:flex;align-items:flex-start;gap:10px;margin:0;padding:9px 13px;" +
+    "border:1px dashed color-mix(in srgb,var(--sm-dim) 45%,transparent);border-radius:9px;background:var(--sm-muted);" +
+    "color:var(--sm-dim);font-size:12px;line-height:1.5;}" +
+    ".plan-storyboard-draft-note svg{width:14px;height:14px;flex:none;margin-top:2px;}" +
+    ".plan-storyboard-draft-note p{margin:0;}.plan-storyboard-draft-note strong{color:var(--sm-fg);font-weight:600;}" +
+    /* storyline tab strip */
+    ".plan-storyline{margin:0;}" +
+    ".plan-storyline-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px 20px 12px;}" +
+    ".plan-storyline-label{color:var(--plan-story);font-size:9px;font-weight:700;letter-spacing:.18em;line-height:1.2;text-transform:uppercase;}" +
+    ".plan-storyline-track{display:flex;flex-wrap:wrap;align-items:stretch;margin:0;padding:4px 14px 10px;list-style:none;" +
+    "border-bottom:1px solid var(--sm-border);row-gap:2px;}" +
+    ".plan-storyline-beat{position:relative;display:flex;flex:1 1 150px;min-width:132px;max-width:260px;flex-direction:row;" +
+    "align-items:baseline;gap:9px;padding:8px 8px 9px;border:0;border-radius:8px;background:transparent;cursor:pointer;transition:background-color 130ms ease;}" +
+    ".plan-storyline-beat:hover{background:var(--sm-muted);}" +
+    ".plan-storyline-beat--active{background:color-mix(in srgb,var(--sm-fg) 8%,transparent);}" +
+    ".plan-storyline-beat--draggable{touch-action:none;}" +
+    ".plan-storyline-beat--dragging{z-index:20;cursor:grabbing;background:var(--sm-surface);box-shadow:0 16px 36px rgba(0,0,0,.5);transition:none;}" +
+    ".plan-storyline-beat--editing{cursor:text;}" +
+    ".plan-storyline-beat-slide{flex:none;color:color-mix(in srgb,var(--sm-dim) 55%,transparent);" +
+    "font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:400;line-height:1;transition:color 130ms ease;}" +
+    ".plan-storyline-beat--active .plan-storyline-beat-slide{color:var(--plan-story);}" +
+    ".plan-storyline-beat-text{display:-webkit-box;min-width:0;overflow:hidden;color:var(--sm-dim);font-size:12px;" +
+    "font-weight:500;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;}" +
+    ".plan-storyline-beat--active .plan-storyline-beat-text{color:var(--sm-fg);font-weight:600;}" +
+    ".plan-storyline-beat-text[contenteditable=\"true\"]{display:block;border-radius:4px;cursor:text;outline:none;-webkit-line-clamp:unset;}" +
+    ".plan-storyline-gap{position:relative;display:flex;flex:none;align-items:center;justify-content:center;width:22px;}" +
+    ".plan-storyline-gap[data-active=\"true\"]::before{position:absolute;top:18%;bottom:18%;left:50%;width:3px;border-radius:2px;background:var(--plan-story);content:\"\";transform:translateX(-50%);}" +
+    ".plan-storyline-insert{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:18px;" +
+    "border:1px solid var(--sm-border);border-radius:999px;background:var(--sm-surface);color:var(--sm-dim);cursor:pointer;" +
+    "opacity:0;padding:0;pointer-events:none;transform:scale(.85);transition:opacity 140ms ease,transform 140ms ease,background-color 140ms ease,border-color 140ms ease,color 140ms ease;}" +
+    ".plan-storyline-insert svg{width:12px;height:12px;}" +
+    ".plan-storyline-track:hover .plan-storyline-insert,.plan-storyline-insert:focus-visible{opacity:1;pointer-events:auto;transform:scale(1);}" +
+    ".plan-storyline-insert:hover{background:var(--plan-story);border-color:var(--plan-story);color:var(--sm-bg);transform:scale(1.1);}" +
+    ".plan-storyline-beat-remove{position:absolute;top:-7px;right:-7px;display:inline-flex;align-items:center;justify-content:center;" +
+    "width:19px;height:19px;border:1px solid var(--sm-border);border-radius:999px;background:var(--sm-surface);box-shadow:0 2px 6px rgba(0,0,0,.35);" +
+    "color:var(--sm-dim);cursor:pointer;opacity:0;padding:0;pointer-events:none;transition:opacity 120ms ease;}" +
+    ".plan-storyline-beat-remove svg{width:12px;height:12px;}" +
+    ".plan-storyline-beat:hover .plan-storyline-beat-remove{opacity:1;pointer-events:auto;}" +
+    ".plan-storyline-beat--dragging .plan-storyline-beat-remove,.plan-storyline-beat--editing .plan-storyline-beat-remove{opacity:0;pointer-events:none;}" +
+    ".plan-storyline-beat-remove:disabled{cursor:default;opacity:0;}" +
+    /* storyboard canvas */
+    ".plan-storyboard{margin:0;}" +
+    ".plan-storyboard-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;" +
+    "font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--sm-dim);}" +
+    ".plan-storyboard-legend{display:inline-flex;flex:none;align-items:baseline;gap:10px;letter-spacing:0;text-transform:none;}" +
+    ".plan-storyboard-legend-item--element{border:1px dashed var(--plan-annotation-line);border-radius:4px;background:var(--plan-annotation-wash);" +
+    "color:var(--plan-annotation);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8.5px;font-weight:650;letter-spacing:.08em;padding:2px 6px;text-transform:uppercase;}" +
+    ".plan-storyboard-legend-item--content{color:var(--sm-fg);font-size:10.5px;font-weight:500;}" +
+    ".plan-storyboard-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,26%);gap:14px;align-items:start;}" +
+    ".plan-storyboard-frame{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border:0;border-radius:8px;" +
+    "background:color-mix(in srgb,var(--sm-bg) 78%,white);}" +
+    ".slide-emboss{box-shadow:0 1px 2px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);}" +
+    ".plan-storyboard-reserved{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;" +
+    "background:repeating-linear-gradient(-45deg,var(--sm-muted),var(--sm-muted) 8px,transparent 8px,transparent 16px);" +
+    "color:var(--sm-dim);font-size:clamp(9px,1.6vw,11px);font-weight:500;}" +
+    ".plan-storyboard-reserved-top{top:0;height:12.2%;border-bottom:1px solid var(--sm-border);}" +
+    ".plan-storyboard-reserved-bottom{bottom:0;height:13.3%;border-top:1px solid var(--sm-border);}" +
+    ".plan-storyboard-body{position:absolute;inset:12.2% 5% 13.3%;" +
+    "background:linear-gradient(color-mix(in srgb,var(--plan-annotation) 13%,transparent) 1px,transparent 1px)," +
+    "linear-gradient(90deg,color-mix(in srgb,var(--plan-annotation) 13%,transparent) 1px,transparent 1px);" +
+    "background-size:calc(100%/12) calc(100%/6);background-color:color-mix(in srgb,#3565d4 3%,transparent);}" +
+    ".plan-storyboard-block{position:absolute;display:flex;min-width:0;min-height:0;flex-direction:column;gap:clamp(4px,.72vw,7px);" +
+    "overflow:hidden;border:1.5px dashed color-mix(in srgb,var(--plan-annotation) 44%,transparent);border-radius:6px;" +
+    "background:color-mix(in srgb,var(--sm-surface) 62%,transparent);padding:clamp(6px,.95vw,10px);}" +
+    ".plan-storyboard-block[data-emphasis=\"primary\"]{border-width:2px;border-color:color-mix(in srgb,var(--plan-annotation) 70%,transparent);}" +
+    ".plan-storyboard-block[data-emphasis=\"tertiary\"]{opacity:.78;}" +
+    ".plan-storyboard-block--movable{cursor:grab;touch-action:none;}" +
+    ".plan-storyboard-block--movable:hover{border-color:color-mix(in srgb,var(--plan-annotation) 66%,transparent);}" +
+    ".plan-storyboard-block--dragging{z-index:10;cursor:grabbing;border-style:solid;box-shadow:0 10px 26px rgba(0,0,0,.45);}" +
+    ".plan-storyboard-block-remove{position:absolute;top:3px;right:3px;display:inline-flex;align-items:center;justify-content:center;" +
+    "width:18px;height:18px;border:1px solid var(--sm-border);border-radius:999px;background:var(--sm-surface);box-shadow:0 2px 6px rgba(0,0,0,.35);" +
+    "color:var(--sm-dim);cursor:pointer;opacity:0;padding:0;pointer-events:none;transition:opacity 120ms ease;}" +
+    ".plan-storyboard-block-remove svg{width:12px;height:12px;}" +
+    ".plan-storyboard-block:hover .plan-storyboard-block-remove{opacity:1;pointer-events:auto;}" +
+    ".plan-storyboard-block--dragging .plan-storyboard-block-remove{opacity:0;pointer-events:none;}" +
+    ".plan-storyboard-block-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;border:0;border-radius:0 0 5px 0;" +
+    "background:linear-gradient(135deg,transparent 0 52%,var(--plan-annotation-line) 52% 60%,transparent 60% 72%,var(--plan-annotation-line) 72% 80%,transparent 80%);" +
+    "cursor:nwse-resize;opacity:0;padding:0;touch-action:none;transition:opacity 120ms ease;}" +
+    ".plan-storyboard-block:hover .plan-storyboard-block-resize,.plan-storyboard-block--dragging .plan-storyboard-block-resize{opacity:1;}" +
+    ".plan-storyboard-reserved-top .plan-storyboard-add{position:absolute;top:50%;right:10px;transform:translateY(-50%);}" +
+    ".plan-storyboard-add{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--plan-annotation-line);border-radius:5px;" +
+    "background:var(--plan-annotation-wash);color:var(--plan-annotation);cursor:pointer;font-size:10px;font-weight:600;letter-spacing:.02em;padding:2px 7px;" +
+    "font-family:var(--sm-font);transition:background-color 130ms ease,border-color 130ms ease;}" +
+    ".plan-storyboard-add svg{width:11px;height:11px;}" +
+    ".plan-storyboard-add:hover:not(:disabled){border-color:var(--plan-annotation);background:color-mix(in srgb,#3565d4 18%,transparent);}" +
+    ".plan-storyboard-add:disabled{cursor:default;opacity:.45;}" +
+    ".plan-storyboard-field{min-width:0;}" +
+    ".plan-storyboard-field-control{display:block;width:100%;min-height:1.25em;overflow:hidden;border:0;background:transparent;padding:0;" +
+    "color:var(--sm-fg);font:inherit;line-height:1.16;outline:none;box-shadow:none;white-space:normal;word-break:break-word;}" +
+    ".plan-storyboard-field-control:focus{outline:none;box-shadow:none;background:transparent;}" +
+    ".plan-storyboard-field[data-field=\"element\"]{display:inline-flex;width:fit-content;max-width:100%;flex-direction:column;" +
+    "border:1px dashed var(--plan-annotation-line);border-radius:4px;background:var(--plan-annotation-wash);padding:3px 6px;}" +
+    ".plan-storyboard-field[data-field=\"element\"] .plan-storyboard-field-control{color:var(--plan-annotation);" +
+    "font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;letter-spacing:.07em;line-height:1.15;text-transform:uppercase;}" +
+    ".plan-storyboard-field[data-field=\"content\"] .plan-storyboard-field-control{color:var(--sm-fg);font-weight:500;line-height:1.18;}" +
+    ".plan-storyboard-detail{position:sticky;top:0;max-height:min(62vh,620px);overflow:auto;padding:30px 0 0;}" +
+    ".plan-storyboard-detail-label{margin:0 0 5px;color:var(--sm-dim);font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;}" +
+    ".plan-storyboard-key-message{margin:0 0 18px;color:var(--sm-fg);font-size:15px;font-weight:650;line-height:1.34;white-space:pre-wrap;word-break:break-word;outline:none;}" +
+    ".plan-storyboard-detail-text{min-height:9em;border:0;background:transparent;color:var(--sm-fg);font-size:13.5px;font-weight:400;line-height:1.42;outline:none;white-space:pre-wrap;word-break:break-word;}" +
+    ".plan-storyboard-warnings{margin:.75em 0 0;padding-left:1.2em;font-size:.86em;color:var(--sm-dim);}" +
+    ".plan-storyboard-error{margin:1em 0;border:1px solid var(--sm-danger);border-radius:8px;background:color-mix(in srgb,var(--sm-danger) 10%,transparent);padding:12px;}" +
+    ".plan-storyboard-error p{margin:0 0 8px;font-weight:600;}" +
+    ".plan-storyboard-error pre{margin:0;overflow-x:auto;font-size:.82em;color:var(--sm-dim);}" +
+    "@media (max-width:900px){.plan-storyline-beat{max-width:none;}.plan-storyboard-layout{grid-template-columns:1fr;}" +
+    ".plan-storyboard-detail{position:static;max-height:none;padding-top:8px;}}" +
+    /* chat composer bar */
+    ".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-story-banner{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px;line-height:1.5;" +
+    "border:1px solid color-mix(in srgb,#b41830 30%,transparent);border-radius:9px;background:color-mix(in srgb,#b41830 8%,transparent);}" +
+    ".sm-story-banner svg{width:14px;height:14px;flex-shrink:0;color:var(--plan-story);}" +
+    ".sm-story-banner .txt{flex:1;min-width:0;color:var(--sm-dim);}" +
+    ".sm-story-banner .txt b{color:var(--sm-fg);font-weight:600;}" +
+    ".sm-story-discard{flex-shrink:0;border:0;background:transparent;color:var(--sm-dim);font-family:var(--sm-font);font-weight:500;" +
+    "font-size:12px;padding:4px 8px;border-radius:6px;cursor:pointer;transition:background .12s,color .12s;}" +
+    ".sm-story-discard:hover{background:var(--sm-muted);color:var(--sm-fg);}" +
+    ".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:var(--sm-muted);}" +
+    ".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;}" +
+    /* story-iteration pill (send while a storyline draft is staged) */
+    ".sm-send-pill{display:inline-flex;align-items:center;gap:7px;height:38px;flex-shrink:0;border:0;border-radius:999px;" +
+    "padding:0 16px;background:var(--sm-accent);color:#0f1220;font-family:var(--sm-font);font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap;" +
+    "transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;}" +
+    ".sm-send-pill svg{width:15px;height:15px;}" +
+    ".sm-send-pill:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(169,194,255,.35);}" +
+    ".sm-send-pill.is-off{opacity:.35;cursor:not-allowed;pointer-events:none;}" +
+    ".sm-composer-sep{width:1px;align-self:stretch;background:var(--sm-border);}" +
+    ".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;}" +
+    ".sm-approve.is-off{opacity:.45;cursor:not-allowed;pointer-events:none;}" +
+    /* waiting state */
+    "@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;}" +
+    /* 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 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 clamp(v, min, max) {
+    return Math.min(Math.max(v, min), max);
+  }
+  function planWasEdited() {
+    return S.value !== baseline;
+  }
+  function commentText() {
+    return (commentEl ? commentEl.value : feedbackText).trim();
+  }
+  function placeCaretAtEnd(node) {
+    try {
+      node.focus();
+      var sel = window.getSelection();
+      if (!sel) return;
+      var range = document.createRange();
+      range.selectNodeContents(node);
+      range.collapse(false);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    } catch {
+      /* headless / detached — ignore */
+    }
+  }
+
+  // ---------- 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",
+        "Shape the red thread and storyboards below · drag to reorder, rename moves, edit blocks · decide when it reads right",
+      ),
+    );
+    bar.appendChild(meta);
+    bar.appendChild(el("div", "sm-grow"));
+
+    document.body.appendChild(bar);
+  }
+  function refreshChrome() {
+    if (editedBadge) editedBadge.style.display = planWasEdited() ? "" : "none";
+
+    var hasFeedback = commentText().length > 0;
+    var canSend = !!S.storyDraft || hasFeedback;
+    if (sendBtn) sendBtn.classList.toggle("is-off", !canSend);
+
+    if (approveBtn) {
+      var main = approveBtn.querySelector(".main span");
+      var sub = approveBtn.querySelector(".sub");
+      if (S.storyDraft) {
+        // Approve is blocked until the staged storyline is sent or discarded.
+        approveArmed = false;
+        approveBtn.classList.remove("is-armed");
+        approveBtn.classList.add("is-off");
+        if (main) main.textContent = "Approve plan";
+        if (sub) {
+          sub.style.display = "";
+          sub.textContent = "Send or discard your storyline changes first";
+        }
+      } else {
+        approveBtn.classList.remove("is-off");
+        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 = "";
+            sub.textContent = "the agent builds the slides next";
+          }
+        }
+      }
+    }
+  }
+
+  // ---------- workspace: one scrollable document surface + composer ----------
+  function buildWorkspace() {
+    wsEl = el("div", "sm-o sm-ws");
+    wsEl.setAttribute("data-sm-overlay", "1");
+
+    surfaceEl = el("div", "sm-ws-surface");
+    // Delegated inline-edit commit for Mode A rendered markdown blocks. Attached
+    // to the persistent surface so a Mode-B re-render (which replaces the
+    // surface's children) keeps these live. commitRenderedEdit is a no-op for
+    // anything that isn't a stamped, editable, non-storyboard block.
+    surfaceEl.addEventListener(
+      "blur",
+      function (e) {
+        commitRenderedEdit(e.target);
+      },
+      true,
+    );
+    surfaceEl.addEventListener(
+      "keydown",
+      function (e) {
+        if (e.key !== "Enter" || e.shiftKey) return;
+        var t = e.target;
+        if (!(t instanceof HTMLElement)) return;
+        if (t.closest(".plan-storyboard")) return;
+        if (!t.closest("[data-md-line][data-md-kind]")) return;
+        e.preventDefault();
+        commitRenderedEdit(t);
+        t.blur();
+      },
+      true,
+    );
+    wsEl.appendChild(surfaceEl);
+    document.body.appendChild(wsEl);
+
+    composerEl = el("div", "sm-composer");
+    composerEl.setAttribute("data-sm-overlay", "1");
+    wsEl.appendChild(composerEl);
+
+    renderSurface();
+    renderComposer();
+  }
+
+  // Map an edited Mode-A block's innerText back into S.value at its stamped
+  // source line WITHOUT re-rendering the node (caret preservation).
+  function commitRenderedEdit(target) {
+    if (locked()) return;
+    if (!(target instanceof HTMLElement)) return;
+    var editable = target.closest("[data-md-line][data-md-kind]");
+    if (!editable || editable.closest(".plan-storyboard")) return;
+    var next = PLAN.replaceRenderedMarkdownBlock({
+      markdown: S.value,
+      line: Number(editable.dataset.mdLine),
+      kind: editable.dataset.mdKind || "",
+      text: editable.innerText != null ? editable.innerText : editable.textContent || "",
+    });
+    if (next !== S.value) {
+      S.value = next;
+      approveArmed = false; // any plan edit disarms a pending approve-confirm
+      refreshChrome();
+    }
+  }
+
+  // ---------- surface render ----------
+  // A plan with storyboard fences renders as the dossier; otherwise the plain
+  // markdown renders inline-editable. Mode B re-renders in full on every
+  // committed model change (nothing is focused at commit — edits commit on
+  // blur / pointerup — so no caret is lost); Mode A never re-renders here.
+  function renderSurface() {
+    if (!surfaceEl) return;
+    surfaceEl.innerHTML = "";
+    focusAfterRender = null;
+    var segments = PLAN.splitPlanMarkdownIntoSegments(S.value);
+    var hasStoryboards = segments.some(function (s) {
+      return s.type === "storyboard";
+    });
+    if (hasStoryboards) renderDossier(segments);
+    else renderModeA(segments);
+    if (focusAfterRender) {
+      placeCaretAtEnd(focusAfterRender);
+      focusAfterRender = null;
+    }
+  }
+
+  function renderModeA(segments) {
+    var root = el("div", "plan-md-root");
+    segments.forEach(function (seg) {
+      if (seg.type !== "markdown") return;
+      var html = PLAN.renderPlanMarkdown(seg.text, { lineOffset: seg.lineOffset });
+      if (!locked()) html = PLAN.addEditableAttributes(html);
+      var holder = el("div");
+      holder.innerHTML = html;
+      while (holder.firstChild) root.appendChild(holder.firstChild);
+    });
+    surfaceEl.appendChild(root);
+  }
+
+  // ---------- dossier (storyboard mode) ----------
+  function renderDossier(segments) {
+    var storyboardSegments = segments.filter(function (s) {
+      return s.type === "storyboard";
+    });
+    var storyboardData = storyboardSegments
+      .map(function (s) {
+        return s.data;
+      })
+      .filter(Boolean);
+    var redThreadMessages = PLAN.extractRedThreadMessages(S.value);
+    // Tabs need a beat per board even without a `## Red thread` section — fall
+    // back to each board's key message (read-only tabs then).
+    var beatMessages = redThreadMessages.length
+      ? redThreadMessages
+      : storyboardSegments.map(function (seg, i) {
+          return (seg.data && seg.data.keyMessage) || "Slide " + ((seg.data && seg.data.slide) || i + 1);
+        });
+    var committed = PLAN.backboneFromMessages(beatMessages);
+    var slides = S.storyDraft || committed;
+    var backboneEditable = PLAN.parsePlanBackbone(S.value) !== null;
+    var canEdit = !locked() && backboneEditable;
+
+    if (S.selectedIndex >= slides.length) S.selectedIndex = slides.length - 1;
+    if (S.selectedIndex < 0) S.selectedIndex = 0;
+    var activeIndex = S.selectedIndex;
+
+    // A staged draft resolves a tab to the board of the slide it originally was;
+    // new slides (originalIndex null) have no board yet.
+    var activeSegment;
+    if (S.storyDraft) {
+      var oi = slides[activeIndex] ? slides[activeIndex].originalIndex : undefined;
+      activeSegment = oi === null || oi === undefined ? undefined : storyboardSegments[oi];
+    } else {
+      activeSegment = storyboardSegments[activeIndex];
+    }
+
+    var dossier = el("div", "plan-dossier");
+    var root = el("div", "plan-md-root plan-md-root--storyboards");
+    dossier.appendChild(root);
+
+    root.appendChild(
+      renderStrip(slides, committed, beatMessages, storyboardData, canEdit, activeIndex),
+    );
+
+    var body = el("div", "plan-dossier-body");
+    if (activeSegment) {
+      if (activeSegment.data) {
+        body.appendChild(renderCanvas(activeSegment));
+      } else {
+        var err = el("div", "plan-storyboard-error");
+        err.appendChild(el("p", null, "Storyboard block could not be rendered."));
+        var pre = el("pre");
+        var codeNode = document.createElement("code");
+        codeNode.textContent = activeSegment.raw || "";
+        pre.appendChild(codeNode);
+        err.appendChild(pre);
+        body.appendChild(err);
+      }
+    } else {
+      // A staged new slide (or a beat with no board yet): the agent builds its
+      // storyboard once the story round is sent.
+      var placeholder = el("div", "plan-dossier-new-slide");
+      placeholder.innerHTML =
+        ICONS.ruler +
+        "<p><strong>Storyline edited.</strong> Sending asks the agent to build storyboards and content for your new and renamed slides — add comments below if you like.</p>";
+      body.appendChild(placeholder);
+    }
+
+    var note = el("div", "plan-storyboard-draft-note");
+    note.innerHTML =
+      ICONS.ruler +
+      "<p><strong>Draft storyboard.</strong> A rough sketch of what goes where — it guides the design agent, and the finished slides will follow your corporate design.</p>";
+    body.appendChild(note);
+
+    root.appendChild(body);
+    surfaceEl.appendChild(dossier);
+  }
+
+  // ---------- storyline tab strip ----------
+  function renderStrip(slides, committed, committedMessages, storyboardData, canEdit, activeIndex) {
+    var section = el("section", "plan-storyline");
+    var head = el("div", "plan-storyline-head");
+    head.appendChild(el("span", "plan-storyline-label", "Red thread"));
+    section.appendChild(head);
+
+    var track = el("ol", "plan-storyline-track");
+    section.appendChild(track);
+
+    var cardEls = [];
+    var gapEls = [];
+    var stripDrag = null;
+    var dropGap = null;
+
+    function paintGaps() {
+      for (var i = 0; i < gapEls.length; i++) {
+        if (stripDrag && dropGap === i) gapEls[i].setAttribute("data-active", "true");
+        else gapEls[i].removeAttribute("data-active");
+      }
+    }
+    function nearestGap(cx, cy) {
+      var best = 0;
+      var bd = Infinity;
+      for (var i = 0; i < slides.length; i++) {
+        var card = cardEls[i];
+        if (!card) continue;
+        var r = card.getBoundingClientRect();
+        var dy = cy - (r.top + r.height / 2);
+        var before = (cx - r.left) * (cx - r.left) + dy * dy;
+        if (before < bd) {
+          bd = before;
+          best = i;
+        }
+        var after = (cx - r.right) * (cx - r.right) + dy * dy;
+        if (after < bd) {
+          bd = after;
+          best = i + 1;
+        }
+      }
+      return best;
+    }
+
+    // Sequence-only edits (reorder / remove) cascade to the storyboards now;
+    // renames / inserts stage a draft the agent has to build.
+    function beatCommit(next) {
+      var sequenceOnly = next.every(function (s) {
+        return s.originalIndex !== null && committedMessages[s.originalIndex] === s.message;
+      });
+      if (sequenceOnly) {
+        S.storyDraft = null;
+        var applied = PLAN.applyPlanBackbone(S.value, next);
+        if (applied) S.value = applied;
+      } else {
+        S.storyDraft = next;
+      }
+      approveArmed = false; // a storyline edit disarms a pending approve-confirm
+      refreshChrome();
+      renderComposer();
+      renderSurface();
+    }
+    function renameSlide(index, message) {
+      var cur = slides[index];
+      if (!cur || cur.message === message) {
+        editingKey = null;
+        renderSurface();
+        return;
+      }
+      editingKey = null;
+      beatCommit(
+        slides.map(function (s, i) {
+          return i === index ? { key: s.key, originalIndex: s.originalIndex, message: message } : s;
+        }),
+      );
+    }
+    function insertSlideAt(position) {
+      newSlideCounter += 1;
+      var next = slides.slice();
+      next.splice(position, 0, {
+        key: "new-" + newSlideCounter,
+        originalIndex: null,
+        message: "New slide",
+      });
+      S.selectedIndex = position;
+      beatCommit(next);
+    }
+    function removeSlide(index) {
+      if (slides.length <= 1) return;
+      var next = slides.filter(function (_, i) {
+        return i !== index;
+      });
+      if (index < S.selectedIndex) S.selectedIndex = S.selectedIndex - 1;
+      else if (index === S.selectedIndex) S.selectedIndex = Math.min(index, slides.length - 2);
+      beatCommit(next);
+    }
+    function reorderTo(from, gap) {
+      var next = slides.slice();
+      var moved = next.splice(from, 1)[0];
+      if (!moved) return;
+      var target = from < gap ? gap - 1 : gap;
+      if (target === from) return;
+      next.splice(target, 0, moved);
+      S.selectedIndex = target;
+      beatCommit(next);
+    }
+
+    function gapAt(position) {
+      var li = el("li", "plan-storyline-gap");
+      li.setAttribute("aria-hidden", canEdit ? "false" : "true");
+      if (canEdit) {
+        var btn = el("button", "plan-storyline-insert", ICONS.plus);
+        btn.type = "button";
+        btn.title = "Insert slide here";
+        btn.setAttribute("aria-label", "Insert slide here");
+        btn.onclick = function () {
+          insertSlideAt(position);
+        };
+        li.appendChild(btn);
+      }
+      gapEls[position] = li;
+      return li;
+    }
+
+    slides.forEach(function (item, index) {
+      track.appendChild(gapAt(index));
+
+      var li = el(
+        "li",
+        "plan-storyline-beat" +
+          (index === activeIndex ? " plan-storyline-beat--active" : "") +
+          (canEdit ? " plan-storyline-beat--draggable" : "") +
+          (editingKey === item.key ? " plan-storyline-beat--editing" : ""),
+      );
+      cardEls[index] = li;
+
+      var numeral = S.storyDraft ? index + 1 : (storyboardData[index] && storyboardData[index].slide) || index + 1;
+      var slideNo = el("div", "plan-storyline-beat-slide");
+      slideNo.setAttribute("aria-hidden", "true");
+      slideNo.textContent = numeral;
+      li.appendChild(slideNo);
+
+      var textEl = el("div", "plan-storyline-beat-text");
+      textEl.setAttribute("role", "textbox");
+      textEl.textContent = item.message;
+      var isEditing = canEdit && editingKey === item.key;
+      if (isEditing) {
+        textEl.contentEditable = "true";
+        textEl.spellcheck = true;
+        focusAfterRender = textEl;
+        // Commit-once guard: renameSlide re-renders and detaches this focused
+        // node, firing a second blur that must not commit again.
+        var renamed = false;
+        textEl.addEventListener("blur", function () {
+          if (renamed) return;
+          renamed = true;
+          var t = (textEl.textContent || "").replace(/\s+/g, " ").trim();
+          if (t) renameSlide(index, t);
+          else {
+            editingKey = null;
+            renderSurface();
+          }
+        });
+        textEl.addEventListener("keydown", function (e) {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            textEl.blur();
+          } else if (e.key === "Escape") {
+            textEl.textContent = item.message;
+            editingKey = null;
+            textEl.blur();
+          }
+        });
+      }
+      li.appendChild(textEl);
+
+      if (canEdit) {
+        var rm = el("button", "plan-storyline-beat-remove", ICONS.x);
+        rm.type = "button";
+        rm.setAttribute("data-no-drag", "");
+        rm.title = "Remove slide";
+        rm.setAttribute("aria-label", "Remove slide");
+        rm.disabled = slides.length <= 1;
+        rm.addEventListener("pointerdown", function (e) {
+          e.stopPropagation();
+        });
+        rm.addEventListener("click", function () {
+          removeSlide(index);
+        });
+        li.appendChild(rm);
+      }
+
+      // Pointer: drag ≥ threshold reorders; a click selects; a click on the
+      // active tab (when editable) enters rename mode.
+      li.addEventListener("pointerdown", function (e) {
+        if (e.button !== 0) return;
+        if (editingKey === item.key) return;
+        if (e.target.closest && e.target.closest("[data-no-drag]")) return;
+        stripDrag = {
+          index: index,
+          key: item.key,
+          pointerId: e.pointerId,
+          ox: e.clientX,
+          oy: e.clientY,
+          moved: false,
+        };
+        try {
+          li.setPointerCapture(e.pointerId);
+        } catch {
+          /* headless */
+        }
+      });
+      li.addEventListener("pointermove", function (e) {
+        if (!stripDrag || stripDrag.pointerId !== e.pointerId) return;
+        if (!canEdit) return;
+        var dx = e.clientX - stripDrag.ox;
+        var dy = e.clientY - stripDrag.oy;
+        if (!stripDrag.moved && Math.hypot(dx, dy) < BEAT_DRAG_THRESHOLD) return;
+        stripDrag.moved = true;
+        li.classList.add("plan-storyline-beat--dragging");
+        li.style.transform = "translate(" + dx + "px," + dy + "px)";
+        dropGap = nearestGap(e.clientX, e.clientY);
+        paintGaps();
+      });
+      function endBeat(e) {
+        if (!stripDrag || stripDrag.pointerId !== e.pointerId) return;
+        try {
+          li.releasePointerCapture(e.pointerId);
+        } catch {
+          /* ignore */
+        }
+        var moved = stripDrag.moved;
+        var gap = dropGap;
+        var idx = stripDrag.index;
+        var key = stripDrag.key;
+        stripDrag = null;
+        dropGap = null;
+        li.style.transform = "";
+        li.classList.remove("plan-storyline-beat--dragging");
+        paintGaps();
+        if (moved) {
+          if (gap !== null) reorderTo(idx, gap);
+        } else if (idx !== activeIndex) {
+          S.selectedIndex = idx;
+          renderSurface();
+        } else if (canEdit) {
+          editingKey = key;
+          renderSurface();
+        }
+      }
+      li.addEventListener("pointerup", endBeat);
+      li.addEventListener("pointercancel", function (e) {
+        if (!stripDrag || stripDrag.pointerId !== e.pointerId) return;
+        stripDrag = null;
+        dropGap = null;
+        li.style.transform = "";
+        li.classList.remove("plan-storyline-beat--dragging");
+        paintGaps();
+      });
+
+      track.appendChild(li);
+    });
+    track.appendChild(gapAt(slides.length));
+
+    return section;
+  }
+
+  // ---------- storyboard canvas ----------
+  function fittedFontSize(value, variant) {
+    var len = value.trim().length;
+    if (variant === "element") return Math.max(8.5, 12.5 - Math.max(0, len - 14) * 0.22);
+    return Math.max(8, 13 - Math.max(0, len - 12) * 0.3);
+  }
+  function compactSingleLine(text, variant) {
+    var lim = variant === "element" ? PLAN.MAX_DESIGN_ELEMENT_LENGTH : PLAN.MAX_CONTENT_LENGTH;
+    return text
+      .replace(/\u00a0/g, " ")
+      .replace(/\s+/g, " ")
+      .trim()
+      .slice(0, lim);
+  }
+  function notesToText(notes) {
+    return notes && notes.length ? notes.join("\n") : "";
+  }
+  function textToNotes(text) {
+    var notes = text
+      .replace(/\u00a0/g, " ")
+      .split(/\r?\n/)
+      .map(function (l) {
+        return l.trim();
+      })
+      .filter(Boolean);
+    return notes.length ? notes : undefined;
+  }
+  function updateBlock(data, blockId, patch) {
+    var blocks = data.blocks.map(function (b) {
+      if (b.id !== blockId) return b;
+      var next = {};
+      for (var k in b) next[k] = b[k];
+      for (var p in patch) next[p] = patch[p];
+      return next;
+    });
+    return withBlocks(data, blocks);
+  }
+  function withBlocks(data, blocks) {
+    var next = {};
+    for (var k in data) next[k] = data[k];
+    next.blocks = blocks;
+    return next;
+  }
+
+  // Commit a storyboard mutation into S.value and re-render the surface. Safe to
+  // full-re-render because every canvas edit commits on blur / pointerup, so no
+  // field is focused at commit time.
+  function commitStoryboard(segment, nextData) {
+    if (locked()) return;
+    S.value = PLAN.replaceStoryboardSegment(S.value, segment, nextData);
+    approveArmed = false; // a storyboard edit disarms a pending approve-confirm
+    refreshChrome();
+    renderSurface();
+  }
+
+  function renderField(variant, value, onCommit) {
+    var wrap = el("div", "plan-storyboard-field");
+    wrap.setAttribute("data-field", variant);
+    var ctrl = el("div", "plan-storyboard-field-control");
+    ctrl.setAttribute("role", "textbox");
+    ctrl.setAttribute("aria-label", variant === "element" ? "Design element" : "Content");
+    ctrl.textContent = value;
+    ctrl.style.fontSize = fittedFontSize(value, variant) + "px";
+    if (!locked()) {
+      ctrl.contentEditable = "true";
+      ctrl.spellcheck = true;
+    }
+    // Commit exactly once per edit session. A commit re-renders the surface,
+    // which detaches this (still-focused) node and fires a SECOND blur; the
+    // `committed` guard makes that second blur a no-op so we never splice the
+    // stale `segment` offsets back in (double-commit → corrupted fences).
+    var committed = false;
+    function commit() {
+      if (committed) return;
+      committed = true;
+      var normalized = compactSingleLine(ctrl.textContent || "", variant);
+      ctrl.textContent = normalized;
+      ctrl.style.fontSize = fittedFontSize(normalized, variant) + "px";
+      if (normalized !== value) onCommit(normalized);
+    }
+    ctrl.addEventListener("input", function () {
+      ctrl.style.fontSize = fittedFontSize(ctrl.textContent || "", variant) + "px";
+    });
+    ctrl.addEventListener("blur", commit);
+    // Enter blurs and lets the blur handler be the single committer (matches the
+    // beat-rename pattern) — never commit directly here, or the follow-on blur
+    // would commit a second time against the mutated markdown.
+    ctrl.addEventListener("keydown", function (e) {
+      if (e.key !== "Enter") return;
+      e.preventDefault();
+      ctrl.blur();
+    });
+    wrap.appendChild(ctrl);
+    return wrap;
+  }
+
+  function renderBlock(frameEl, block, data, segment, canRemove) {
+    var node = el("div", "plan-storyboard-block" + (locked() ? "" : " plan-storyboard-block--movable"));
+    node.setAttribute("data-emphasis", block.emphasis || "secondary");
+    node.style.left = (block.x / PLAN.STORYBOARD_WIDTH) * 100 + "%";
+    node.style.top = (block.y / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
+    node.style.width = (block.w / PLAN.STORYBOARD_WIDTH) * 100 + "%";
+    node.style.height = (block.h / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
+
+    function change(patch) {
+      commitStoryboard(segment, updateBlock(data, block.id, patch));
+    }
+
+    node.appendChild(
+      renderField("element", block.designElement, function (v) {
+        change({ designElement: v });
+      }),
+    );
+    node.appendChild(
+      renderField("content", block.content, function (v) {
+        change({ content: v });
+      }),
+    );
+
+    if (!locked() && canRemove) {
+      var rm = el("button", "plan-storyboard-block-remove", ICONS.x);
+      rm.type = "button";
+      rm.setAttribute("data-no-drag", "");
+      rm.title = "Remove container";
+      rm.setAttribute("aria-label", "Remove container");
+      rm.addEventListener("pointerdown", function (e) {
+        e.stopPropagation();
+      });
+      rm.addEventListener("click", function () {
+        if (data.blocks.length <= 1) return;
+        commitStoryboard(
+          segment,
+          withBlocks(
+            data,
+            data.blocks.filter(function (b) {
+              return b.id !== block.id;
+            }),
+          ),
+        );
+      });
+      node.appendChild(rm);
+    }
+
+    if (!locked()) {
+      node.title = "Drag to reposition";
+      wireBlockDrag(node, frameEl, block, change);
+      var rz = el("button", "plan-storyboard-block-resize");
+      rz.type = "button";
+      rz.setAttribute("data-no-drag", "");
+      rz.title = "Drag to resize";
+      rz.setAttribute("aria-label", "Drag to resize");
+      wireBlockResize(rz, frameEl, block, change);
+      node.appendChild(rz);
+    }
+    return node;
+  }
+
+  function clampPos(block, x, y) {
+    var A = PLAN.BODY_SAFE_AREA;
+    return {
+      x: clamp(x, A.x, A.x + A.w - block.w),
+      y: clamp(y, A.y, A.y + A.h - block.h),
+    };
+  }
+  function clampSize(block, w, h) {
+    var A = PLAN.BODY_SAFE_AREA;
+    return {
+      w: clamp(w, PLAN.MIN_BLOCK_WIDTH, A.x + A.w - block.x),
+      h: clamp(h, PLAN.MIN_BLOCK_HEIGHT, A.y + A.h - block.y),
+    };
+  }
+  function wireBlockDrag(node, frameEl, block, change) {
+    var st = null;
+    node.addEventListener("pointerdown", function (e) {
+      if (locked() || e.button !== 0) return;
+      if (e.target.closest && e.target.closest(".plan-storyboard-field, [data-no-drag]")) return;
+      var rect = frameEl.getBoundingClientRect();
+      if (!rect || rect.width <= 0) return;
+      st = {
+        pointerId: e.pointerId,
+        ox: e.clientX,
+        oy: e.clientY,
+        sx: block.x,
+        sy: block.y,
+        scale: PLAN.STORYBOARD_WIDTH / rect.width,
+        moved: false,
+      };
+      try {
+        node.setPointerCapture(e.pointerId);
+      } catch {
+        /* headless */
+      }
+    });
+    node.addEventListener("pointermove", function (e) {
+      if (!st || st.pointerId !== e.pointerId) return;
+      var dx = e.clientX - st.ox;
+      var dy = e.clientY - st.oy;
+      if (!st.moved && Math.hypot(dx, dy) < BLOCK_DRAG_THRESHOLD) return;
+      st.moved = true;
+      node.classList.add("plan-storyboard-block--dragging");
+      var p = clampPos(block, st.sx + dx * st.scale, st.sy + dy * st.scale);
+      node.style.left = (p.x / PLAN.STORYBOARD_WIDTH) * 100 + "%";
+      node.style.top = (p.y / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
+    });
+    function end(e) {
+      if (!st || st.pointerId !== e.pointerId) return;
+      try {
+        node.releasePointerCapture(e.pointerId);
+      } catch {
+        /* ignore */
+      }
+      var s = st;
+      st = null;
+      if (!s.moved) {
+        node.classList.remove("plan-storyboard-block--dragging");
+        return;
+      }
+      var p = clampPos(block, s.sx + (e.clientX - s.ox) * s.scale, s.sy + (e.clientY - s.oy) * s.scale);
+      var x = Math.round(p.x);
+      var y = Math.round(p.y);
+      if (x !== block.x || y !== block.y) change({ x: x, y: y });
+      else node.classList.remove("plan-storyboard-block--dragging");
+    }
+    node.addEventListener("pointerup", end);
+    node.addEventListener("pointercancel", function (e) {
+      if (!st || st.pointerId !== e.pointerId) return;
+      st = null;
+      node.classList.remove("plan-storyboard-block--dragging");
+    });
+  }
+  function wireBlockResize(handle, frameEl, block, change) {
+    var st = null;
+    handle.addEventListener("pointerdown", function (e) {
+      if (locked() || e.button !== 0) return;
+      e.stopPropagation();
+      var rect = frameEl.getBoundingClientRect();
+      if (!rect || rect.width <= 0) return;
+      st = {
+        pointerId: e.pointerId,
+        ox: e.clientX,
+        oy: e.clientY,
+        sw: block.w,
+        sh: block.h,
+        scale: PLAN.STORYBOARD_WIDTH / rect.width,
+        moved: false,
+      };
+      try {
+        handle.setPointerCapture(e.pointerId);
+      } catch {
+        /* headless */
+      }
+    });
+    handle.addEventListener("pointermove", function (e) {
+      if (!st || st.pointerId !== e.pointerId) return;
+      var dx = e.clientX - st.ox;
+      var dy = e.clientY - st.oy;
+      if (!st.moved && Math.hypot(dx, dy) < BLOCK_DRAG_THRESHOLD) return;
+      st.moved = true;
+      var node = handle.parentNode;
+      var p = clampSize(block, st.sw + dx * st.scale, st.sh + dy * st.scale);
+      node.classList.add("plan-storyboard-block--dragging");
+      node.style.width = (p.w / PLAN.STORYBOARD_WIDTH) * 100 + "%";
+      node.style.height = (p.h / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
+    });
+    function end(e) {
+      if (!st || st.pointerId !== e.pointerId) return;
+      try {
+        handle.releasePointerCapture(e.pointerId);
+      } catch {
+        /* ignore */
+      }
+      var s = st;
+      st = null;
+      if (!s.moved) return;
+      var p = clampSize(block, s.sw + (e.clientX - s.ox) * s.scale, s.sh + (e.clientY - s.oy) * s.scale);
+      var w = Math.round(p.w);
+      var h = Math.round(p.h);
+      if (w !== block.w || h !== block.h) change({ w: w, h: h });
+    }
+    handle.addEventListener("pointerup", end);
+    handle.addEventListener("pointercancel", function (e) {
+      if (st && st.pointerId === e.pointerId) st = null;
+    });
+  }
+
+  function renderDetailField(className, ariaLabel, value, multiline, onCommit) {
+    var field = el("div", className);
+    field.setAttribute("role", "textbox");
+    field.setAttribute("aria-label", ariaLabel);
+    if (multiline) field.setAttribute("aria-multiline", "true");
+    field.textContent = value;
+    if (!locked()) {
+      field.contentEditable = "true";
+      field.spellcheck = true;
+    }
+    // Commit-once guard: a commit re-renders the surface and detaches this
+    // focused field, firing a second blur \u2014 which must not re-splice the stale
+    // segment (double-commit \u2192 corrupted fences on the single-line beat field).
+    var committed = false;
+    function commit() {
+      if (committed) return;
+      committed = true;
+      var normalized = (field.textContent || "").replace(/\u00a0/g, " ").trim();
+      field.textContent = normalized;
+      if (normalized !== value) onCommit(normalized);
+    }
+    field.addEventListener("blur", commit);
+    if (!multiline) {
+      // Enter blurs; the blur handler is the single committer.
+      field.addEventListener("keydown", function (e) {
+        if (e.key !== "Enter") return;
+        e.preventDefault();
+        field.blur();
+      });
+    }
+    return field;
+  }
+
+  function renderDetails(data, segment) {
+    var aside = el("aside", "plan-storyboard-detail");
+    aside.appendChild(el("div", "plan-storyboard-detail-label", "Story beat"));
+    aside.appendChild(
+      renderDetailField(
+        "plan-storyboard-key-message",
+        "Story beat",
+        data.keyMessage || "",
+        false,
+        function (next) {
+          if (next) {
+            var d = {};
+            for (var k in data) d[k] = data[k];
+            d.keyMessage = next;
+            commitStoryboard(segment, d);
+          } else {
+            var d2 = {};
+            for (var k2 in data) if (k2 !== "keyMessage") d2[k2] = data[k2];
+            commitStoryboard(segment, d2);
+          }
+        },
+      ),
+    );
+    aside.appendChild(el("div", "plan-storyboard-detail-label", "Content draft"));
+    var currentContent = notesToText(data.contentNotes);
+    aside.appendChild(
+      renderDetailField(
+        "plan-storyboard-detail-text",
+        "Content draft",
+        currentContent,
+        true,
+        function (next) {
+          var notes = textToNotes(next);
+          if (notesToText(notes) === currentContent) return;
+          var d = {};
+          for (var k in data) if (k !== "contentNotes" && k !== "depthNotes") d[k] = data[k];
+          if (notes) d.contentNotes = notes;
+          commitStoryboard(segment, d);
+        },
+      ),
+    );
+    return aside;
+  }
+
+  function renderCanvas(segment) {
+    var data = segment.data;
+    var figure = el("figure", "plan-storyboard");
+
+    var header = el("div", "plan-storyboard-header");
+    header.appendChild(el("span", null, "Slide " + data.slide + " body storyboard"));
+    var legend = el("span", "plan-storyboard-legend");
+    legend.appendChild(el("span", "plan-storyboard-legend-item plan-storyboard-legend-item--element", "Design element"));
+    legend.appendChild(el("span", "plan-storyboard-legend-item plan-storyboard-legend-item--content", "Content"));
+    header.appendChild(legend);
+    figure.appendChild(header);
+
+    var layout = el("div", "plan-storyboard-layout");
+    var frame = el("div", "plan-storyboard-frame slide-emboss");
+
+    var top = el("div", "plan-storyboard-reserved plan-storyboard-reserved-top");
+    top.appendChild(document.createTextNode("Template header/title area not planned here"));
+    if (!locked()) {
+      var add = el("button", "plan-storyboard-add", ICONS.plus + "<span>Add container</span>");
+      add.type = "button";
+      add.title = "Add container";
+      add.setAttribute("aria-label", "Add container");
+      add.disabled = data.blocks.length >= PLAN.MAX_BLOCKS;
+      add.addEventListener("click", function () {
+        if (data.blocks.length >= PLAN.MAX_BLOCKS) return;
+        var serial = data.blocks.length + 1;
+        while (
+          data.blocks.some(function (b) {
+            return b.id === "block-" + serial;
+          })
+        )
+          serial += 1;
+        var A = PLAN.BODY_SAFE_AREA;
+        var w = 360;
+        var h = 150;
+        var offset = (data.blocks.length % 4) * 48;
+        var nextBlocks = data.blocks.concat([
+          {
+            id: "block-" + serial,
+            x: clamp(A.x + 40 + offset, A.x, A.x + A.w - w),
+            y: clamp(A.y + 40 + offset, A.y, A.y + A.h - h),
+            w: w,
+            h: h,
+            designElement: "container",
+            content: "New content",
+          },
+        ]);
+        commitStoryboard(segment, withBlocks(data, nextBlocks));
+      });
+      top.appendChild(add);
+    }
+    frame.appendChild(top);
+
+    var grid = el("div", "plan-storyboard-body");
+    grid.setAttribute("aria-hidden", "true");
+    frame.appendChild(grid);
+
+    var canRemove = !locked() && data.blocks.length > 1;
+    data.blocks.forEach(function (block) {
+      frame.appendChild(renderBlock(frame, block, data, segment, canRemove));
+    });
+
+    var bottom = el("div", "plan-storyboard-reserved plan-storyboard-reserved-bottom", "Footer/template area not planned here");
+    frame.appendChild(bottom);
+
+    layout.appendChild(frame);
+    layout.appendChild(renderDetails(data, segment));
+    figure.appendChild(layout);
+
+    if (segment.warnings && segment.warnings.length) {
+      var ul = el("ul", "plan-storyboard-warnings");
+      segment.warnings.forEach(function (w) {
+        var li = document.createElement("li");
+        li.textContent = w;
+        ul.appendChild(li);
+      });
+      figure.appendChild(ul);
+    }
+    return figure;
+  }
+
+  // ---------- chat composer bar ----------
+  // Rebuilt on structural state changes (a storyline draft staged / discarded),
+  // NOT on every keystroke (keystrokes only call refreshChrome). The typed
+  // feedback survives a rebuild via feedbackText.
+  function renderComposer() {
+    if (!composerEl || waiting) return;
+    composerEl.innerHTML = "";
+
+    if (S.storyDraft) {
+      var banner = el("div", "sm-story-banner");
+      banner.innerHTML =
+        ICONS.sparkles +
+        '<span class="txt"><b>Storyline edited.</b> Sending asks the agent to build storyboards and content for your new and renamed slides — add comments below if you like.</span>';
+      var discard = el("button", "sm-story-discard", "Discard changes");
+      discard.type = "button";
+      discard.onclick = function () {
+        S.storyDraft = null;
+        approveArmed = false; // discarding the storyline disarms approve-confirm
+        refreshChrome();
+        renderComposer();
+        renderSurface();
+      };
+      banner.appendChild(discard);
+      composerEl.appendChild(banner);
+    }
+
+    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 = "What should change? Leave a note, or edit the plan directly.";
+    commentEl.value = feedbackText;
+    commentEl.addEventListener("input", function () {
+      feedbackText = commentEl.value;
+      approveArmed = false; // typing more feedback disarms a pending approve-confirm
+      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);
+
+    if (S.storyDraft) {
+      // The round is sendable as-is — "send" grows the story-iteration label.
+      sendBtn = el("button", "sm-send-pill", ICONS.sparkles + "<span>Iterate on the story</span>");
+      sendBtn.type = "button";
+      sendBtn.title = "Iterate on the story";
+    } else {
+      sendBtn = el("button", "sm-send", ICONS.send);
+      sendBtn.type = "button";
+      sendBtn.title = "Send feedback";
+      sendBtn.setAttribute("aria-label", "Send feedback");
+    }
+    sendBtn.onclick = requestChanges;
+    row.appendChild(sendBtn);
+
+    row.appendChild(el("div", "sm-composer-sep"));
+
+    approveBtn = el("button", "sm-approve");
+    approveBtn.type = "button";
+    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 () {
+      if (S.storyDraft) return; // blocked while a storyline draft is staged
+      // 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);
+    refreshChrome();
+  }
+
+  // ---------- waiting state (comments sent) ----------
+  // The tab does NOT veil over on a comments round: the plan stays readable, the
+  // surface locks, and the composer becomes the wait signal until the agent's
+  // next `slidemind plan` round reloads this tab (heartbeat polling).
+  function enterWaiting() {
+    waiting = true;
+    if (wsEl) wsEl.classList.add("is-waiting");
+    renderSurface(); // rebuild the surface read-only (no contenteditable attrs)
+    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 ----------
+  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();
+    } 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",
+        });
+        n.onclick = function () {
+          try {
+            window.focus();
+          } catch {
+            /* ignore */
+          }
+          n.close();
+        };
+      }
+    } catch {
+      /* notification construction can throw on some platforms — title marker stands */
+    }
+  }
+
+  // ---------- submit ----------
+  function requestChanges() {
+    if (waiting) return;
+    if (S.storyDraft) {
+      var staged = PLAN.stageStoryIteration(S.value, S.storyDraft);
+      if (!staged) return;
+      var typed = commentText();
+      pendingComment = typed ? staged.feedback + "\n\n" + typed : staged.feedback;
+      pendingEdited = staged.editedPlanMarkdown;
+    } else {
+      if (!commentText()) return;
+      pendingComment = commentText();
+      pendingEdited = planWasEdited() ? S.value : null;
+    }
+    // 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" ? pendingComment : null,
+      editedPlan: decision === "comments" ? pendingEdited : planWasEdited() ? S.value : null,
+    };
+    fetch(CFG.endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    })
+      .then(function () {
+        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. The poll reports this tab's round nonce
+  // and its visibility: only a VISIBLE tab may claim the next round for reuse —
+  // a tab buried in a background window must not swallow the round invisibly, so
+  // the server opens a fresh browser tab instead and answers `action: "close"`
+  // here, which retires this tab with a notice rather than reloading it into a
+  // hidden duplicate.
+  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;
+      }
+      var visible = document.visibilityState === "visible" ? "1" : "0";
+      var url =
+        hb +
+        (hb.indexOf("?") < 0 ? "?" : "&") +
+        "round=" +
+        encodeURIComponent(CFG.round || "") +
+        "&visible=" +
+        visible;
+      fetch(url, { cache: "no-store" })
+        .then(function (r) {
+          return r.ok ? r.json() : null;
+        })
+        .then(function (data) {
+          if (!data || data.service !== "slidemind-plan" || !data.round) return;
+          if (data.round === CFG.round) return;
+          if (data.action === "close") {
+            clearInterval(timer);
+            showSuperseded();
+            return;
+          }
+          if (data.action === "wait") return; // grace window still deciding — keep polling
+          clearInterval(timer);
+          markRoundReadyAndReload();
+        })
+        .catch(function () {
+          /* server down between rounds — keep polling */
+        });
+    }, pollMs);
+  }
+
+  // ---------- done veil ----------
+  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);
+  }
+  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.");
+  }
+  function showSuperseded() {
+    document.title = "Plan review moved — slidemind";
+    showVeil(
+      "<span>Continued in a new tab</span>",
+      "The next plan round opened in a fresh browser tab — you can close this one.",
+    );
+  }
+
+  // ---------- 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() {
+    if (!document.body) {
+      setTimeout(init, 20);
+      return;
+    }
+    // The server-rendered #plan-root is the no-JS fallback only; the overlay
+    // renders the interactive surface from S.value, so drop the static node.
+    var stale = document.getElementById("plan-root");
+    if (stale && stale.parentNode) stale.parentNode.removeChild(stale);
+
+    injectAssets();
+    buildChrome();
+    buildWorkspace();
+    announceNewRound(); // notification + title marker when this load IS the next round
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();