slidemind 0.1.8 → 0.1.9

package/src/builders/plan-overlay.js

@@ -4,23 +4,27 @@
 // `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 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 (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.
+// 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
@@ -40,25 +44,45 @@
   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;
+  // 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 previewOpen = true;
+  var waiting = false; // comments round sent → the surface locks read-only
   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;
+  // 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">' +
@@ -105,16 +129,24 @@
   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>',
+    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; pins/popover/
-  // sidebar rules dropped, editor/preview/dock rules added) ----------
+  // ---------- 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)}}" +
@@ -124,8 +156,15 @@
     "@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-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;" +
@@ -142,7 +181,7 @@
     ".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{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);" +
@@ -153,72 +192,201 @@
     "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 */
+    /* 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-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-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-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-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;}" +
+    "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{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);}" +
-    /* 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{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 */
+    ".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{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;}" +
+    ".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));" +
+    ".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{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;}" +
@@ -234,9 +402,6 @@
     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>';
   }
@@ -254,20 +419,28 @@
     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 clamp(v, min, max) {
+    return Math.min(Math.max(v, min), max);
   }
   function planWasEdited() {
-    return !!editorEl && editorEl.value !== baseline;
+    return S.value !== baseline;
   }
   function commentText() {
-    return commentEl ? commentEl.value.trim() : "";
+    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) ----------
@@ -289,95 +462,965 @@
     title.appendChild(editedBadge);
     meta.appendChild(title);
     meta.appendChild(
-      el("div", "h", "Edit the markdown directly · the preview follows · decide below when it reads right"),
+      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"));
 
-    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);
-    }
+    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 (approveArmed && hasFeedback) {
-        approveBtn.classList.add("is-armed");
-        if (main) main.textContent = "Feedback not sent — approve anyway?";
-        if (sub) sub.style.display = "none";
-      } else {
+      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 = "";
+        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";
+          }
+        }
       }
     }
-    if (previewBtn) {
-      previewBtn.classList.toggle("is-on", previewOpen);
-      btnLabel(previewBtn, previewOpen ? "Hide preview" : "Show preview");
-    }
   }
 
-  // ---------- workspace: editor + live preview + comment dock ----------
+  // ---------- workspace: one scrollable document surface + composer ----------
   function buildWorkspace() {
     wsEl = el("div", "sm-o sm-ws");
     wsEl.setAttribute("data-sm-overlay", "1");
 
-    var panes = el("div", "sm-panes");
+    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();
+  }
 
-    edPane = el("div", "sm-ed");
-    editorEl = el("textarea", "sm-ed-ta");
-    editorEl.spellcheck = false;
-    editorEl.value = baseline;
-    editorEl.addEventListener("input", function () {
-      schedulePreview();
+  // 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";
     });
-    // 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();
+    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);
     });
-    edPane.appendChild(editorEl);
-    panes.appendChild(edPane);
+    track.appendChild(gapAt(slides.length));
 
-    // 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);
+    return section;
+  }
 
-    wsEl.appendChild(panes);
-    document.body.appendChild(wsEl);
-    applyPreviewState(readPreviewPref());
+  // ---------- 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 ----------
-  // 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");
+  // 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");
@@ -391,8 +1434,11 @@
     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.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();
@@ -402,21 +1448,31 @@
     });
     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;
+    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;
@@ -428,16 +1484,17 @@
     row.appendChild(approveBtn);
 
     composerEl.appendChild(row);
-    wsEl.appendChild(composerEl);
+    refreshChrome();
   }
 
   // ---------- 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).
+  // 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() {
-    if (editorEl) editorEl.readOnly = true;
+    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 = "";
@@ -463,9 +1520,6 @@
   }
 
   // ---------- 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";
@@ -502,7 +1556,7 @@
     }
     if (!flagged) return;
     try {
-      window.focus(); // best-effort; most browsers ignore it for background tabs
+      window.focus();
     } catch {
       /* ignore */
     }
@@ -523,7 +1577,7 @@
       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
+          tag: "slidemind-plan-round",
         });
         n.onclick = function () {
           try {
@@ -539,58 +1593,20 @@
     }
   }
 
-  // ---------- 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;
+    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();
@@ -601,8 +1617,8 @@
     submitted = true;
     var payload = {
       decision: decision,
-      comment: decision === "comments" ? commentText() : null,
-      editedPlan: planWasEdited() ? editorEl.value : null,
+      comment: decision === "comments" ? pendingComment : null,
+      editedPlan: decision === "comments" ? pendingEdited : planWasEdited() ? S.value : null,
     };
     fetch(CFG.endpoint, {
       method: "POST",
@@ -610,10 +1626,6 @@
       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 {
@@ -638,7 +1650,12 @@
   }
   // 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.
+  // 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;
@@ -650,27 +1667,37 @@
         showSessionEnded();
         return;
       }
-      fetch(hb, { cache: "no-store" })
-        .then(function (r) { return r.ok ? r.json() : null; })
+      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) {
-          // 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) {
+          if (data.round === CFG.round) return;
+          if (data.action === "close") {
             clearInterval(timer);
-            markRoundReadyAndReload();
+            showSuperseded();
+            return;
           }
+          if (data.action === "wait") return; // grace window still deciding — keep polling
+          clearInterval(timer);
+          markRoundReadyAndReload();
         })
-        .catch(function () { /* server down between rounds — keep polling */ });
+        .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";
@@ -684,10 +1711,6 @@
     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>",
@@ -699,6 +1722,13 @@
   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() {
@@ -725,17 +1755,18 @@
 
   // ---------- wire up ----------
   function init() {
-    var root = planRoot();
-    if (!root) {
-      setTimeout(init, 50);
+    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();
-    buildComposerBar();
-    refreshChrome();
-    editorEl.focus();
     announceNewRound(); // notification + title marker when this load IS the next round
   }