slidemind 0.3.20 → 0.4.0

package/src/builders/plan-overlay.js

@@ -1,63 +1,56 @@
-// 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.
+// Plan sign-off overlay — the CLI's plan-review gate, laid out like the
+// preview-review gate (review-overlay.js): the storyline as a slide RAIL on the
+// left, the selected slide's storyboard on a fitted STAGE in the middle, its
+// layout gallery + details in an ASIDE on the right, and the decision composer
+// pinned at the bottom. 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 chrome (bar, buttons, strips, hand-off dialog, veil, rail styling) is the
+// SHARED gate shell (gate-shell.js → window.__SLIDEMIND_SHELL__); the session
+// (ledger, rounds, heartbeat) is the shared gate session (gate-session.js).
+// This file owns only what is plan-specific: the storyline edits, the
+// storyboard canvas, the layout pick, the composer and the decision POST.
 //
-// The decision lives in ONE always-visible chat-style composer bar pinned at
-// the bottom: a scope control (This slide / Whole story), a comment 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. Above it, the LEDGER rail lists every comment of this
-// session with its anchor and status (sent → addressed).
+// A plan that carries ```storyboard-canvas``` fences renders as rail + stage +
+// aside; a plain-markdown plan renders its blocks inline-editable
+// (contenteditable) as one document. Both paths edit the SAME markdown string,
+// mapped back through the plan modules on window.__SLIDEMIND_PLAN__ (bundled
+// by plan.mjs).
 //
 // TWO MODES, not "reviewing vs. locked out":
 //   - PARKED (the command is blocking on this tab): everything is live. Send
 //     resolves the gate at once (decision "comments"); Approve resolves it as
 //     "approve"; direct edits and story iteration are allowed.
-//   - WORKING (the agent is revising): the plan stays readable and the strip
+//   - WORKING (the agent is revising): the plan stays readable and the rail
 //     stays navigable; the composer, direct edits, story iteration and Approve
-//     are off (the displayed round is already superseded). A status strip says
-//     so — the add-in's "Revising the plan / this window refreshes when it's
-//     ready". Nothing is queued behind the agent's back: the tab polls the
-//     heartbeat and reloads itself when the next `slidemind plan` run presents
-//     the revised round.
+//     are off (the displayed round is already superseded). Nothing is queued
+//     behind the agent's back: the tab polls the heartbeat and reloads itself
+//     when the next `slidemind plan` run presents the revised round.
 //
-// A round transition is detected from the SERVER's per-run nonce (CFG.round):
-// a different nonce means a newer `slidemind plan` run served this page. It
-// flips "sent" ledger rows to "addressed", restores the selected tab + the
+// A round transition is detected from the SERVER's per-run nonce (CFG.round).
+// It flips "sent" ledger rows to "addressed", restores the selected slide + the
 // unsent draft, shows a transient banner, and diffs the cached previous plan
-// body per slide to badge the changed tabs "updated" — the body diff is
-// COSMETIC only; it never decides whether a round arrived. The web notification
-// fires when the arriving round parks (a plain refresh of a sent round stays
-// silent).
+// body per slide to badge the changed rail cards "updated" — the body diff is
+// COSMETIC only; it never decides whether a round arrived.
 //
-// A fresh window (no session of its own) seeds its ledger from CFG.ledgerSeed,
-// the deck's persisted plan-review.json round, so the reviewer still sees the
-// comments the agent is currently working.
-//
-// The decision POSTs {decision, comments[], 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.
+// The decision POSTs {decision, comments[], editedPlan, operationId,
+// expectedHash} through the shell's decision wire (SHELL.decide) so the
+// `slidemind plan` command — or, inside the workspace page, the agent's waiting
+// request — gets it. A refusal never drops what the reviewer wrote: a busy deck
+// re-sends it, a newer version reloads with the drafts kept, and the card edits
+// that have not been sent yet are persisted per plan version (EDITS_KEY), so a
+// reload or a crash brings them back.
 
 (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;
+  // The copy of this page saved at the deck root: a browser cannot write back
+  // to a file, so the gate stays dormant and the plan reads as a document.
+  if (CFG.readOnly) return;
+  // Dormant inside an iframe / thumbnail render — except the workspace page,
+  // which frames the LIVE gate on purpose (CFG.embedded).
+  if (window.top !== window.self && !CFG.embedded) return;
   if (new URLSearchParams(location.search).get("thumb") === "1") return;
 
   // The bundled plan modules (schema / storyboard-markdown / backbone / edit /
@@ -67,22 +60,23 @@
   var APPROVE_CLOSE_DELAY_MS = 2400; // long enough to read the build animation
   var WAITING_TITLE = "⏳ Agent revising — slidemind";
   // The plan body of the round that is on screen, cached for the NEXT round's
-  // per-slide diff. Its own key on purpose: it is ~60 KB and never changes
-  // during a page's life, so it is written ONCE at boot — the round context
-  // (selection, unsent draft) is the small blob a keystroke may rewrite.
-  var BODY_KEY = "slidemind-plan-body:" + (CFG.deck || "");
-
-  // The shared gate session (src/builders/gate-session.js, inlined into the page
-  // as window.__SLIDEMIND_GATE__): the deck-keyed sessionStorage ledger, the
-  // server-nonce round transition, the round-ready announce and the heartbeat
-  // poll — one implementation, shared with the preview gate.
+  // per-slide diff. Its own key: ~60 KB, written ONCE at boot.
+  // The storage namespace: inside the workspace the registry id (two decks may
+  // share a name, and one tab's sessionStorage serves every deck it frames);
+  // standalone the deck name, as before.
+  var DECK_KEY = CFG.embedded && CFG.deckId ? "id:" + CFG.deckId : CFG.deck || "";
+  var BODY_KEY = "slidemind-plan-body:" + DECK_KEY;
+
   var SES = window.__SLIDEMIND_GATE__.createGateSession({
     name: "plan",
-    deck: CFG.deck || "",
+    deck: DECK_KEY,
     storage: sessionStorage,
     fetch: function (u, o) {
       return fetch(u, o);
     },
+    endpoint: CFG.endpoint || "/plan-review",
+    embedded: !!CFG.embedded,
+    subject: CFG.subjectHash || null, // the content version this page shows (rides in ctx)
     round: CFG.round || "",
     service: "slidemind-plan",
     heartbeat: CFG.heartbeat || "/__plan/heartbeat",
@@ -92,455 +86,370 @@
     notifyTitle: "slidemind — plan ready",
     notifyBody: "The revised plan is ready for your review. Click to jump back to the tab.",
   });
-  var BANNER_MS = 7000; // how long the "Updated · Round N" banner stays
-  var BEAT_DRAG_THRESHOLD = 4; // px before a tab press becomes a drag
+  var BANNER_MS = 7000; // how long the "Updated by your agent" banner stays
+  var BEAT_DRAG_THRESHOLD = 4; // px before a rail card 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 working = false; // the agent is revising → edits, composer and approve off
   var baseline = CFG.planBody || ""; // the served plan body; edits diff against it
-  var ledger = []; // every comment of this session: {…, status:sent|addressed}
+  var ledger = []; // every comment of this session: {…, status:draft|sent|addressed}
   var roundNo = 1; // this tab's round counter (sessionStorage, not server state)
-  var changedSlides = {}; // 1-based tab position → true ("updated" badges this round)
+  var changedSlides = {}; // slide number → true ("updated" badges this round)
   var bannerText = null; // transient round-arrival banner, null once dismissed
   var commentScope = "slide"; // composer scope control: "slide" | "story"
+  var pendingBullet = false; // a content point being typed, not in the record yet
 
   // 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 };
+  // frontmatter-less plan body; `selectedIndex` is the slide on stage;
+  // `storyDraft` is a staged red-thread restructure (null when none), which
+  // blocks Approve and turns "send" into a story-iteration round.
+  // `design` is a cached design the reviewer picked (its presFP), null while
+  // the deck's own design is shown; it rides with the answer, like the edits.
+  var S = { value: baseline, selectedIndex: 0, storyDraft: null, design: null };
+  // The bound design's palette; a picked design's comes from CFG.designs.
+  var boundLayouts = Array.isArray(CFG.layouts) ? CFG.layouts : [];
+  // The plan text before the last design switch moved its layouts, and right
+  // after: switching again over an untouched remap starts from `before`, so
+  // A → B → A gives back exactly the plan the reviewer had.
+  var designUndo = null; // { before, from, after }
 
   var feedbackText = ""; // the composer input, kept across composer rebuilds
-  var editingKey = null; // the beat whose move text is in rename mode
+  var editingKey = null; // the rail card 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, hintEl;
   var workingNote = null; // headline of the working status strip
   var pendingComments = []; // the batch the next decision POST carries
   var pendingEdited = null; // the edited plan markdown riding with it
-  var notifyPermPromise = null; // resolved Notification permission, asked at the send gesture
+  var arrivedAfterRevising = false; // this load is the round the reviewer was waiting for
+  var askedAgainUnchanged = false; // …and the agent asked again without changing anything
 
-  // Read-only surface: working mode is the ONLY thing that locks the plan text.
-  // Navigation (tab selection) and the composer stay live regardless.
+  var wsEl, surfaceEl, composerEl, commentEl;
+  var editedBadge, approveBtn, sendBtn, hintEl, barTools;
+
+  // The shared chrome: bar, strips, hand-off dialog, veil, buttons.
+  var SHELL = window.__SLIDEMIND_SHELL__.createGateShell({
+    CFG: CFG,
+    session: SES,
+    service: "slidemind-plan",
+    what: { revising: "the plan", approved: "Plan" },
+    isWorking: function () {
+      return working;
+    },
+    workingNote: function () {
+      return workingNote;
+    },
+    onSaveCtx: function () {
+      saveCtx();
+    },
+    onChange: function () {
+      // an answer started or ended: the cards lock / unlock with it
+      if (locked() !== surfaceLocked) renderSurface();
+      refreshChrome();
+    },
+    onDecided: function (decision, ack, body) {
+      decided(decision, body);
+    },
+    onDecisionFailed: function () {
+      refreshChrome();
+    },
+    onAlreadyAnswered: function (a) {
+      enterWorking(a && a.action === "approve" ? "Already approved." : a && a.action ? "Comments already sent." : "Already answered in another window.");
+    },
+    onApprovalPickedUp: function () {
+      showApproved();
+    },
+    onLost: function () {
+      startNextRoundPolling(); // a re-run of the plan gate reloads this tab, drafts and all
+    },
+    // Unsent card edits are the one thing a reload into a newer version would
+    // drop (a comment being typed is kept, but the reload would yank the field
+    // from under the cursor): the newer version waits for both.
+    reloadBlocker: function () {
+      if (working) return null;
+      if (planWasEdited() || S.storyDraft || S.design) return "edits";
+      var a = document.activeElement;
+      if (a && (a.isContentEditable || (a === commentEl && commentEl.value.trim()))) return "typing";
+      return null;
+    },
+    reloadIntoNewRound: function () {
+      SES.write(EDITS_KEY, null); // reached only without edits, or by the reviewer's own "Reload"
+      saveLedger();
+      saveCtx();
+      SES.markRoundReadyAndReload();
+    },
+  });
+  var el = SHELL.el;
+  var ICONS = SHELL.ICONS;
+
+  // Read-only surface: working mode — and an answer on its way (a busy deck or
+  // a stopped workspace re-sends it) — lock the plan text: the request carries
+  // the edits made BEFORE it, so an edit made meanwhile would ride on nothing
+  // and be wiped when it lands. Navigation (rail selection) and the composer
+  // stay live regardless.
   function locked() {
-    return working;
-  }
-
-  // ---------- 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 + ")",
-    );
+    return working || SHELL.decisionPending();
   }
+  var surfaceLocked = false; // what the surface was last rendered as
 
-  // 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>',
-    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) ----------
+  // ---------- styles (plan-specific; the chrome comes from the shell) ----------
   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));" +
+    ":root{--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;}" +
-    /* working mode: read-only, NOT locked out — the surface stays scrollable and
-       the strip stays clickable; the dashed frame is the read-only signal */
-    ".sm-ws.is-waiting .plan-dossier{border-style:dashed;}" +
-    /* round-arrival banner */
-    ".sm-round-banner{display:flex;align-items:center;gap:9px;max-width:1120px;margin:0 auto 14px;padding:9px 13px;" +
-    "border:1px solid color-mix(in srgb,var(--sm-accent) 35%,transparent);border-radius:10px;" +
-    "background:color-mix(in srgb,var(--sm-accent) 9%,transparent);color:var(--sm-dim);font-size:12.5px;line-height:1.5;" +
-    "animation:sm-rise .45s cubic-bezier(.2,.7,.2,1) both;}" +
-    ".sm-round-banner svg{width:15px;height:15px;flex-shrink:0;color:var(--sm-accent);}" +
-    ".sm-round-banner b{color:var(--sm-fg);font-weight:600;}" +
-    /* 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;}" +
+    "html,body{overflow:hidden;}" +
+    /* the workspace: surface + composer under the bar */
+    ".sm-ws{position:fixed;left:0;right:0;top:var(--deck-chrome-h,62px);bottom:0;display:flex;flex-direction:column;" +
+    "background:var(--sm-bg);color:var(--sm-fg);font-family:var(--sm-font);font-size:13px;}" +
+    ".sm-ws-surface{flex:1;min-height:0;display:flex;flex-direction:column;}" +
+    /* Mode A: one scrolling document */
+    ".sm-doc{flex:1;min-height:0;overflow-y:auto;padding:28px 28px 40px;}" +
+    ".plan-md-root{max-width:760px;margin:0 auto;line-height:1.65;font-size:15.5px;color:var(--sm-fg);}" +
+    ".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 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:var(--sm-mono);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 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-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 20px;padding:16px 20px 12px;}" +
-    ".plan-storyline-head-text{display:flex;flex:1 1 240px;flex-direction:column;gap:3px;min-width:0;}" +
-    /* deck-level layout knob: one pick binds every slide's layout */
-    ".plan-storyline-deck-layout{display:flex;flex:0 1 280px;flex-direction:column;gap:4px;min-width:200px;}" +
-    ".plan-storyline-deck-layout-label{color:var(--sm-dim);font-size:9px;font-weight:700;letter-spacing:.18em;line-height:1.2;text-transform:uppercase;}" +
-    ".plan-storyline-deck-layout .plan-storyboard-layout-picker{margin:0;}" +
-    ".plan-storyline-deck-layout .plan-storyboard-layout-menu{left:auto;right:0;min-width:340px;}" +
-    ".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;}" +
-    /* grid: numeral + move text share a baseline row; the layout chip fills the
-       second row and pins to the bottom, so cards in a row stay one height */
-    ".plan-storyline-beat{position:relative;display:grid;flex:1 1 150px;min-width:132px;max-width:260px;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;" +
-    "align-items:baseline;column-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{grid-row:1;grid-column:1;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{grid-row:1;grid-column:2;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-storyboard-layout-picker--beat{grid-row:2;grid-column:2;align-self:end;min-width:0;margin:5px 0 0;max-width:100%;}" +
-    ".plan-storyboard-layout-picker--beat .plan-storyboard-layout-current{width:auto;max-width:100%;gap:6px;border-color:transparent;border-radius:5px;padding:2px 4px;margin-left:-4px;color:var(--sm-dim);font-size:10.5px;font-weight:500;}" +
-    ".plan-storyboard-layout-picker--beat .plan-storyboard-layout-current:not(:disabled):hover{border-color:var(--sm-line);}" +
-    ".plan-storyboard-layout-picker--beat .plan-storyboard-layout-current>.plan-storyboard-layout-thumb{width:36px;height:20px;}" +
-    ".plan-storyboard-layout-picker--beat .plan-storyboard-layout-menu{right:auto;min-width:320px;}" +
-    /* "updated" badge — this slide changed in the round that just arrived */
-    ".plan-storyline-beat-updated{position:absolute;top:-6px;left:6px;border-radius:999px;padding:0 6px;" +
-    "background:color-mix(in srgb,var(--sm-accent) 22%,var(--sm-bg));color:var(--sm-accent);" +
-    "border:1px solid color-mix(in srgb,var(--sm-accent) 45%,transparent);" +
-    "font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.6;}" +
-    ".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;}" +
+    /* the dossier: rail | stage | aside */
+    /* A wider rail than the preview gate's: these cards carry a story beat, not
+       a filename, and the beat is what the reviewer navigates by. */
+    ".sm-plan{--sm-rail-w:272px;flex:1;min-height:0;display:grid;grid-template-columns:var(--sm-rail-w) minmax(0,1fr);}" +
+    /* the header's deck-wide choices, each with its name: Design, Slide Layouts */
+    ".sm-bar-tools{display:flex;align-items:center;gap:16px;min-width:0;flex:0 1 auto;}" +
+    ".sm-bar-tools:empty{display:none;}" +
+    ".sm-bar-tool{display:flex;align-items:center;gap:8px;min-width:0;}" +
+    ".sm-bar-tool-label{flex:none;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sm-dim);}" +
+    ".sm-bar-tool .plan-design-picker,.sm-bar-tool .plan-storyboard-layout-picker{min-width:0;max-width:280px;}" +
+    "@media (max-width:760px){.sm-bar-tool-label{display:none;}}" +
+    ".sm-rail-gap{position:relative;height:10px;margin:-2px 0 0;display:flex;align-items:center;justify-content:center;}" +
+    ".sm-rail-gap[data-active=\"true\"]::before{content:\"\";position:absolute;left:8%;right:8%;top:50%;height:3px;border-radius:2px;background:var(--plan-story);transform:translateY(-50%);}" +
+    ".plan-storyline-insert{position:relative;z-index:2;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;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);}" +
+    ".sm-rail-gap:hover .plan-storyline-insert,.plan-storyline-insert:focus-visible{opacity:1;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;}" +
+    ".sm-rail-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:4px;padding:8px;border:1px dashed var(--sm-border);border-radius:8px;background:transparent;color:var(--sm-dim);font:500 11.5px var(--sm-font);cursor:pointer;}" +
+    ".sm-rail-add svg{width:12px;height:12px;}.sm-rail-add:hover{color:var(--sm-fg);border-color:#3a3a40;background:var(--sm-muted);}" +
+    ".plan-beat{touch-action:none;}" +
+    ".plan-beat.is-dragging{z-index:20;cursor:grabbing;box-shadow:0 16px 36px rgba(0,0,0,.5);transition:none;}" +
+    ".plan-beat.is-editing{cursor:text;}" +
+    ".plan-beat .sm-thumb-name[contenteditable=\"true\"]{display:block;-webkit-line-clamp:unset;border-radius:3px;cursor:text;outline:none;background:var(--sm-muted);padding:1px 3px;margin:-1px -3px;}" +
+    ".plan-beat.is-active .sm-thumb-number{color:var(--plan-story);font-weight:600;}" +
+    ".plan-storyline-beat-updated{position:absolute;top:-6px;left:8px;z-index:2;border-radius:999px;padding:0 6px;background:color-mix(in srgb,var(--sm-accent) 22%,var(--sm-bg));color:var(--sm-accent);" +
+    "border:1px solid color-mix(in srgb,var(--sm-accent) 45%,transparent);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.6;}" +
+    ".plan-storyline-beat-remove{position:absolute;top:-7px;right:-7px;z-index:2;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) 55%,transparent);border-radius:6px;" +
-    "background:color-mix(in srgb,var(--sm-surface) 94%,transparent);box-shadow:0 1px 4px rgba(15,23,42,.12);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-frame--chrome{background:#fff;}" +
-    ".plan-storyboard-chrome{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.95;}" +
-    ".plan-storyboard-zones{position:absolute;inset:0;pointer-events:none;}" +
-    ".plan-storyboard-zone-wash{position:absolute;background:rgba(15,23,42,.16);}" +
-    ".plan-storyboard-zone-notice-layer{position:absolute;inset:0;z-index:30;pointer-events:none;}" +
-    ".plan-storyboard-zone-canvas{position:absolute;border:2px solid rgba(53,101,212,.8);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.55);}" +
-    ".plan-storyboard-zone-label{position:absolute;top:-1px;left:-1px;border-radius:3px 0 4px 0;background:rgba(53,101,212,.85);padding:1px 7px;color:#fff;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}" +
-    ".plan-storyboard-zone-notice{position:absolute;top:10px;left:50%;transform:translateX(-50%);max-width:78%;border-radius:999px;background:rgba(15,23,42,.82);padding:5px 14px;color:#fff;font-size:11px;font-weight:600;line-height:1.35;text-align:center;}" +
-    ".plan-storyboard-ph{position:absolute;border:1px solid rgba(15,23,42,.5);border-radius:3px;background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.55);}" +
-    ".plan-storyboard-ph-label{position:absolute;top:-1px;left:-1px;border-radius:2px 0 3px 0;background:rgba(15,23,42,.78);padding:0 5px;color:#fff;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(255,255,255,.5);}" +
-    ".plan-storyboard-image-layer{position:absolute;inset:0;pointer-events:none;}" +
-    ".plan-storyboard-image-slot{position:absolute;display:flex;flex-direction:column;pointer-events:auto;border:1px dashed rgba(53,101,212,.75);border-radius:4px;background:rgba(255,255,255,.55);overflow:hidden;}" +
-    ".plan-storyboard-image-slot--filled{border-style:solid;background:rgba(255,255,255,.86);}" +
-    ".plan-storyboard-image-caption{flex:none;padding:1px 5px;background:rgba(53,101,212,.85);color:#fff;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}" +
-    ".plan-storyboard-image-input{flex:1;width:100%;min-height:0;resize:none;border:0;background:transparent;padding:4px 5px;font:inherit;font-size:10px;line-height:1.3;color:#0f172a;}" +
-    ".plan-storyboard-image-input:focus{outline:none;}" +
-    ".plan-storyboard-image-input::placeholder{color:rgba(15,23,42,.45);font-style:italic;}" +
-    ".plan-storyboard-layout-picker{position:relative;margin:0 0 18px;}" +
-    ".plan-storyboard-layout-current{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--sm-line);border-radius:8px;background:transparent;padding:6px 8px;color:var(--sm-fg);font-size:12.5px;font-weight:550;text-align:left;cursor:pointer;font-family:inherit;}" +
+    ".plan-beat:hover .plan-storyline-beat-remove{opacity:1;pointer-events:auto;}" +
+    ".plan-beat.is-dragging .plan-storyline-beat-remove,.plan-beat.is-editing .plan-storyline-beat-remove,.plan-storyline-beat-remove:disabled{opacity:0;pointer-events:none;}" +
+    /* the mini storyboard on a rail card */
+    ".sm-mini{position:absolute;inset:0;}" +
+    ".sm-mini-chrome{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}" +
+    ".sm-mini-block{position:absolute;border:1px dashed color-mix(in srgb,#3565d4 70%,transparent);border-radius:2px;background:rgba(53,101,212,.14);}" +
+    ".sm-mini-block[data-emphasis=\"primary\"]{border-style:solid;background:rgba(53,101,212,.22);}" +
+    ".sm-mini-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a8a90;font-size:10px;background:#f4f4f5;}" +
+    /* the stage: the selected storyboard, fitted to the column */
+    ".sm-stage{container-type:size;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 22px;overflow:auto;background:#0a0a0b;}" +
+    /* The PANEL is the subject, not the slide. Letting the slide fill the
+       column made a wide grey field around a small box, which read as "look
+       at the slide" when the job is "correct the text" — so the slide is
+       capped to a reading size and the panel takes a large fraction OF it. */
+    ".sm-stage-fit{width:min(100%,980px,calc((100cqh - 96px) * 16 / 9));min-width:min(100%,360px);}" +
+    ".sm-stage-head{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);}" +
+    ".sm-stage-head .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" +
+    ".sm-stage-head .t b{color:var(--sm-fg);text-transform:none;letter-spacing:0;font-weight:500;}" +
+    ".sm-round-banner{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--sm-accent) 35%,transparent);border-radius:10px;" +
+    "background:color-mix(in srgb,var(--sm-accent) 9%,transparent);color:var(--sm-dim);font-size:12.5px;line-height:1.5;animation:sm-rise .45s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-round-banner svg{width:15px;height:15px;flex-shrink:0;color:var(--sm-accent);}.sm-round-banner b{color:var(--sm-fg);font-weight:600;}" +
+    ".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;}" +
+    /* the slide on stage: the layout's own render with its slot geometry on
+       top, a light veil pushing it back, and ONE panel floating over both. The
+       panel is the only thing on the stage with elevation — that is what makes
+       it read as an overlay ON the slide rather than content IN it. */
+    ".plan-stage-frame{position:relative;width:100%;container-type:inline-size;}" +
+    /* The slide itself: the shared embossed card treatment, and the only
+       element here that clips — the panel above it has a menu that escapes. */
+    ".plan-stage-slide{position:relative;overflow:hidden;border-radius:12px;background:#fff;}" +
+    ".slide-emboss{box-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);}" +
+    ".plan-stage-chrome{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:0;background:#fff;}" +
+    ".plan-stage-chrome--blank{background:#16161a;border:1px solid var(--sm-border);}" +
+    ".plan-stage-slots{position:absolute;inset:0;pointer-events:none;}" +
+    ".plan-stage-slot{position:absolute;border:1px solid rgba(15,23,42,.45);border-radius:3px;background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.45);}" +
+    ".plan-stage-slot-label{position:absolute;top:-1px;left:-1px;border-radius:2px 0 3px 0;background:rgba(15,23,42,.72);padding:0 5px;color:#fff;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}" +
+    ".sm-mini-slots .plan-stage-slot{border-width:.5px;box-shadow:none;}" +
+    ".sm-mini-slots .plan-stage-slot-label{display:none;}" +
+    ".sm-mini-slots .plan-stage-zone{border-width:1px;}" +
+    ".plan-stage-zone{position:absolute;border:1.5px dashed rgba(53,101,212,.7);border-radius:4px;background:rgba(53,101,212,.07);}" +
+    ".plan-stage-veil{position:absolute;inset:0;background:rgba(9,11,16,.22);pointer-events:none;}" +
+    ".plan-stage-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;width:84%;max-height:88%;flex-direction:column;gap:clamp(10px,1.7cqw,18px);" +
+    /* Glass, not a lid: the slide stays readable through it, so the reviewer
+       can see the layout they are choosing copy for. The blur is what keeps
+       text legible over a busy render — opacity alone would not. */
+    "border:1px solid color-mix(in srgb,var(--sm-fg) 18%,transparent);border-radius:12px;background:color-mix(in srgb,var(--sm-surface) 76%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sm-fg) 11%,transparent),0 2px 6px rgba(0,0,0,.3),0 26px 64px rgba(0,0,0,.46);padding:clamp(16px,2.4cqw,26px) clamp(16px,2.6cqw,28px) clamp(12px,1.8cqw,20px);backdrop-filter:blur(16px) saturate(115%);}" +
+    "@supports not (backdrop-filter:blur(1px)){.plan-stage-card{background:color-mix(in srgb,var(--sm-surface) 97%,transparent);}}" +
+    /* label gutter + content column: the label names which KIND of thing this
+       is, which is why it earns the space */
+    ".plan-stage-row{display:grid;min-height:0;margin-left:clamp(-9px,-.8cqw,-5px);grid-template-columns:calc(clamp(68px,10.5cqw,104px) - clamp(-9px,-.8cqw,-5px)) minmax(0,1fr);gap:4px clamp(10px,1.6cqw,18px);}" +
+    ".plan-stage-label{color:var(--sm-dim);font-size:clamp(10.5px,1.25cqw,12.5px);font-weight:500;line-height:1.5;padding-top:clamp(4px,.7cqw,7px);}" +
+    ".plan-stage-beat{color:var(--sm-fg);font-size:clamp(14px,2.25cqw,21px);font-weight:600;line-height:1.3;outline:none;white-space:pre-wrap;word-break:break-word;}" +
+    ".plan-stage-points{display:flex;min-height:0;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none;}" +
+    ".plan-stage-points::-webkit-scrollbar{display:none;}" +
+    ".plan-stage-bullets{display:flex;flex-direction:column;gap:clamp(2px,.5cqw,6px);margin:0;padding:0;list-style:none;}" +
+    ".plan-stage-bullet{display:flex;align-items:flex-start;gap:8px;color:var(--sm-fg);font-size:clamp(12px,1.55cqw,15px);line-height:1.5;}" +
+    ".plan-stage-bullet::before{flex:none;color:var(--plan-story);content:\"\\2022\";font-weight:700;line-height:inherit;}" +
+    ".plan-stage-bullet-text{min-width:0;flex:1;outline:none;white-space:pre-wrap;word-break:break-word;}" +
+    /* These two fields ARE the gate. At rest they read as copy; the moment a
+       pointer crosses them they read as inputs, and focus draws a real ring. */
+    ".plan-stage-beat[contenteditable=\"true\"],.plan-stage-bullet-text[contenteditable=\"true\"]{border-radius:6px;cursor:text;padding:clamp(3px,.5cqw,6px) clamp(5px,.8cqw,9px);transition:background 120ms ease,box-shadow 120ms ease;}" +
+    ".plan-stage-beat[contenteditable=\"true\"]:hover,.plan-stage-bullet-text[contenteditable=\"true\"]:hover{background:var(--sm-muted);}" +
+    ".plan-stage-beat:focus,.plan-stage-bullet-text:focus{background:color-mix(in srgb,var(--sm-fg) 8%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sm-fg) 26%,transparent);}" +
+    ".plan-stage-bullet-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:16px;height:16px;margin-top:2px;border:0;border-radius:999px;background:transparent;color:var(--sm-dim);cursor:pointer;opacity:0;padding:0;transition:opacity 120ms ease;}" +
+    ".plan-stage-bullet-remove svg{width:11px;height:11px;}" +
+    ".plan-stage-bullet:hover .plan-stage-bullet-remove,.plan-stage-bullet:focus-within .plan-stage-bullet-remove{opacity:1;}" +
+    ".plan-stage-bullet-remove:hover{background:var(--sm-muted);color:var(--sm-fg);}" +
+    ".plan-stage-bullet-add{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;margin-top:5px;border:0;border-radius:6px;background:transparent;color:var(--sm-dim);cursor:pointer;font-family:var(--sm-font);font-size:clamp(11.5px,1.35cqw,13.5px);font-weight:500;padding:clamp(3px,.5cqw,6px) clamp(5px,.8cqw,9px);}" +
+    ".plan-stage-bullet-add svg{width:11px;height:11px;}" +
+    ".plan-stage-bullet-add:hover{color:var(--sm-fg);}" +
+    /* the slide's approved image uses: read-only, one row per use — the file
+       the user handed over, shown, next to what it is FOR in plain words */
+    ".plan-stage-uses{display:flex;min-height:0;flex-direction:column;gap:clamp(5px,.8cqw,9px);overflow-y:auto;scrollbar-width:none;}" +
+    ".plan-stage-uses::-webkit-scrollbar{display:none;}" +
+    ".plan-stage-use{display:flex;align-items:flex-start;gap:clamp(7px,1.1cqw,11px);}" +
+    ".plan-stage-use-thumb{flex:none;width:clamp(38px,5.4cqw,54px);height:clamp(26px,3.7cqw,37px);border:1px solid var(--sm-border);border-radius:5px;background:var(--sm-muted);object-fit:contain;}" +
+    ".plan-stage-use-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}" +
+    ".plan-stage-use-what{color:var(--sm-fg);font-size:clamp(11.5px,1.45cqw,14px);font-weight:600;line-height:1.4;}" +
+    ".plan-stage-use-name{color:var(--sm-dim);font-weight:500;}" +
+    ".plan-stage-use-instruction{color:var(--sm-fg);font-size:clamp(11px,1.35cqw,13.5px);line-height:1.45;word-break:break-word;}" +
+    ".plan-stage-use-framing{color:var(--sm-dim);font-size:clamp(10.5px,1.2cqw,12.5px);line-height:1.45;}" +
+    ".plan-stage-foot{display:grid;flex:none;align-items:center;margin-left:clamp(-9px,-.8cqw,-5px);grid-template-columns:calc(clamp(68px,10.5cqw,104px) - clamp(-9px,-.8cqw,-5px)) minmax(0,1fr);gap:clamp(10px,1.6cqw,18px);border-top:1px solid color-mix(in srgb,var(--sm-fg) 12%,transparent);padding-top:clamp(10px,1.5cqw,16px);}" +
+    ".plan-stage-foot .plan-stage-label{padding-top:0;}" +
+    ".plan-stage-card .plan-stage-layout{width:auto;max-width:100%;margin:0;}" +
+    /* A real button, not a caption: bordered, filled, and it lifts on hover. */
+    ".plan-stage-card .plan-stage-layout .plan-storyboard-layout-current{width:auto;gap:9px;border-color:color-mix(in srgb,var(--sm-fg) 26%,transparent);border-radius:8px;background:color-mix(in srgb,var(--sm-fg) 7%,transparent);padding:clamp(4px,.6cqw,7px) clamp(9px,1.1cqw,13px) clamp(4px,.6cqw,7px) clamp(4px,.6cqw,7px);font-size:clamp(11.5px,1.35cqw,13.5px);font-weight:600;}" +
+    ".plan-stage-card .plan-stage-layout .plan-storyboard-layout-current:not(:disabled):hover{border-color:color-mix(in srgb,var(--sm-fg) 42%,transparent);background:color-mix(in srgb,var(--sm-fg) 12%,transparent);}" +
+    ".plan-stage-card .plan-stage-layout .plan-storyboard-layout-thumb{width:clamp(34px,4.4cqw,46px);height:clamp(19px,2.5cqw,26px);}" +
+    /* a narrow panel has no room for a gutter: the label sits above its content */
+    "@container (max-width:620px){" +
+    ".plan-stage-card{width:90%;gap:12px;}" +
+    ".plan-stage-row,.plan-stage-foot{grid-template-columns:minmax(0,1fr);gap:2px;}" +
+    ".plan-stage-foot .plan-stage-layout{margin-top:4px;}" +
+    ".plan-stage-beat{font-size:15px;}" +
+    "}" +
+    ".plan-storyboard-warnings{margin:.75em 0 0;padding-left:1.2em;font-size:.86em;color:var(--sm-dim);}" +
+    ".plan-storyboard-error{margin: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);}" +
+    ".plan-storyboard-layout-unknown{display:inline-block;border-radius:999px;background:rgba(217,75,75,.14);padding:1px 7px;color:#e07272;font-size:10px;font-weight:650;}" +
+    ".plan-storyboard-layout-purpose{color:var(--sm-dim);font-size:11px;line-height:1.35;margin:0 0 6px;}" +
+    ".plan-storyboard-draft-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0 0;color:var(--sm-dim);font-size:11.5px;line-height:1.4;}" +
+    ".plan-storyboard-draft-note svg{width:14px;height:14px;flex:none;}" +
+    ".plan-storyboard-draft-note p{margin:0;}.plan-storyboard-draft-note strong{color:var(--sm-fg);font-weight:600;}" +
+    /* the layout picker: the deck default in the header, the slide pick on the card */
+    ".plan-storyboard-layout-picker{position:relative;margin:0;}" +
+    ".plan-storyboard-layout-current{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--sm-border);border-radius:8px;background:transparent;padding:5px 8px;color:var(--sm-fg);font-size:11.5px;font-weight:500;text-align:left;cursor:pointer;font-family:inherit;}" +
     ".plan-storyboard-layout-current:disabled{cursor:default;opacity:.85;}" +
     ".plan-storyboard-layout-current:not(:disabled):hover{background:rgba(255,255,255,.05);}" +
-    ".plan-storyboard-layout-thumb{width:52px;height:30px;flex:none;border:1px solid var(--sm-line);border-radius:4px;object-fit:cover;background:#fff;}" +
+    ".plan-storyboard-layout-thumb{width:36px;height:20px;flex:none;border:1px solid var(--sm-border);border-radius:3px;object-fit:cover;background:#fff;}" +
     ".plan-storyboard-layout-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" +
-    ".plan-storyboard-layout-chevron{flex:none;margin-left:auto;color:var(--sm-dim);font-size:11px;line-height:1;}" +
-    ".plan-storyboard-layout-unknown{flex:none;border-radius:999px;background:rgba(217,75,75,.14);padding:1px 7px;color:#e07272;font-size:10px;font-weight:650;}" +
-    ".plan-storyboard-layout-menu{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;max-height:300px;overflow:auto;border:1px solid var(--sm-line);border-radius:10px;background:var(--sm-bg);box-shadow:0 10px 32px rgba(0,0,0,.35);padding:4px;}" +
+    /* the same drawn chevron as the comment target: a "▾" glyph rendered as a dot */
+    ".plan-storyboard-layout-chevron{display:flex;flex:none;margin-left:auto;color:var(--sm-dim);transition:transform .15s ease;}.plan-storyboard-layout-chevron svg{width:10px;height:6px;}" +
+    "[aria-expanded=\"true\"]>.plan-storyboard-layout-chevron{transform:rotate(180deg);}" +
+    ".plan-storyboard-layout-menu{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:280px;max-height:320px;overflow:auto;border:1px solid var(--sm-border);border-radius:10px;background:var(--sm-surface);box-shadow:0 10px 32px rgba(0,0,0,.45);padding:4px;}" +
     ".plan-storyboard-layout-option{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:7px;background:transparent;padding:6px;color:var(--sm-fg);text-align:left;cursor:pointer;font-family:inherit;}" +
-    ".plan-storyboard-layout-option:hover{background:rgba(255,255,255,.06);}" +
-    ".plan-storyboard-layout-option--selected{background:rgba(255,255,255,.09);}" +
-    ".plan-storyboard-layout-thumb--option{width:72px;height:41px;}" +
+    ".plan-storyboard-layout-option:hover{background:rgba(255,255,255,.06);}.plan-storyboard-layout-option--selected{background:rgba(255,255,255,.09);}" +
+    ".plan-storyboard-layout-thumb--option{width:64px;height:36px;}" +
     ".plan-storyboard-layout-option-text{display:flex;min-width:0;flex-direction:column;gap:1px;}" +
-    ".plan-storyboard-layout-option-text .plan-storyboard-layout-name{font-size:12.5px;font-weight:600;}" +
-    ".plan-storyboard-layout-purpose{overflow:hidden;color:var(--sm-dim);font-size:11px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}" +
+    ".plan-storyboard-layout-option-text .plan-storyboard-layout-name{font-size:12px;font-weight:600;}" +
     ".plan-storyboard-layout-canvas{color:var(--sm-dim);font-size:10px;font-variant-numeric:tabular-nums;}" +
-    ".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);}" +
+    /* the design picker: name, then the design's accent colours */
+    ".plan-design-picker{position:relative;margin:0;}" +
+    ".plan-design-current,.plan-design-option{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--sm-border);border-radius:8px;background:transparent;padding:6px 8px;color:var(--sm-fg);font:500 11.5px var(--sm-font);text-align:left;cursor:pointer;}" +
+    ".plan-design-current:disabled{cursor:default;opacity:.85;}" +
+    ".plan-design-current:not(:disabled):hover{background:rgba(255,255,255,.05);}" +
+    ".plan-design-current .plan-storyboard-layout-chevron{margin-left:0;}" +
+    ".plan-design-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" +
+    ".plan-design-dots{display:inline-flex;flex:none;gap:3px;margin-left:auto;}" +
+    ".plan-design-dot{display:block;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}" +
+    /* a design the backend serves that this machine has not downloaded yet */
+    ".plan-design-get{flex:none;margin-left:auto;color:var(--sm-dim);font-size:10.5px;font-weight:500;}" +
+    ".plan-design-current.is-busy{cursor:progress;}.plan-design-current.is-busy .plan-design-name{color:var(--sm-dim);}" +
+    ".plan-design-menu{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:100%;max-height:320px;overflow:auto;border:1px solid var(--sm-border);border-radius:10px;background:var(--sm-surface);box-shadow:0 10px 32px rgba(0,0,0,.45);padding:4px;}" +
+    ".plan-design-option{border:0;border-radius:7px;padding:8px;font-size:12px;}" +
+    ".plan-design-option:hover,.plan-design-option:focus-visible{background:rgba(255,255,255,.06);outline:none;}.plan-design-option.is-selected{background:rgba(255,255,255,.09);}" +
+    /* designs not on this computer yet: last, smaller and quieter, under one divider */
+    ".plan-design-option.is-remote{padding:4px 8px;font-size:11px;color:var(--sm-dim);}" +
+    ".plan-design-option.is-first-remote{position:relative;margin-top:9px;}" +
+    ".plan-design-option.is-first-remote::before{content:'';position:absolute;left:8px;right:8px;top:-5px;border-top:1px solid var(--sm-border);}" +
+    /* small screens: the rail becomes a horizontal strip above the stage */
+    "@media (max-width:960px){" +
+    ".sm-plan{display:block;overflow-y:auto;}" +
+    ".sm-rail{border-right:0;border-bottom:1px solid var(--sm-border);}" +
+    ".sm-rail-list{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:4px 12px 10px;}" +
+    ".sm-rail-gap{width:12px;height:auto;align-self:stretch;margin:0;flex:none;}" +
+    ".sm-rail-gap[data-active=\"true\"]::before{left:50%;right:auto;top:8%;bottom:8%;height:auto;width:3px;transform:translateX(-50%);}" +
+    ".sm-thumb{width:150px;flex:none;margin:0;}" +
+    ".sm-rail-add{width:auto;flex:none;align-self:center;margin:0 0 0 6px;white-space:nowrap;}" +
+    ".sm-stage{container-type:normal;min-height:0;overflow:visible;justify-content:flex-start;padding:14px;}" +
+    ".sm-stage-fit{width:100%;}" +
+    "}" +
+    /* the composer: the unsent comments, then ONE row — what the comment is
+       about, the comment itself, Send (only once there is something to send)
+       and Approve */
+    ".sm-composer{flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-top:1px solid var(--sm-border);background:var(--sm-surface);font-family:var(--sm-font);}" +
+    ".sm-composer[hidden]{display:none;}" +
+    ".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-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);}" +
-    /* comment ledger rail (supersedes the old single "previous round" note) */
-    ".sm-ledger{display:flex;flex-direction:column;gap:3px;max-height:118px;overflow-y:auto;" +
-    "padding:7px 10px;border:1px dashed #3a3a40;border-radius:9px;background:var(--sm-muted);}" +
-    ".sm-ledger-row{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.45;color:#b9b9be;}" +
-    ".sm-ledger-anchor{flex:none;font-weight:600;color:#a1a1aa;white-space:nowrap;}" +
-    ".sm-ledger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" +
-    ".sm-ledger-status{flex:none;border-radius:999px;padding:1px 8px;font-size:10px;font-weight:600;" +
-    "letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--sm-border);color:var(--sm-dim);}" +
-    ".sm-ledger-status[data-state=\"sent\"]{color:var(--sm-accent);border-color:rgba(169,194,255,.4);}" +
-    ".sm-ledger-status[data-state=\"addressed\"]{color:var(--sm-success);border-color:rgba(46,204,113,.4);}" +
-    /* scope control */
-    ".sm-composer-meta{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--sm-dim);}" +
-    ".sm-scope-label{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:9.5px;}" +
-    ".sm-scope{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--sm-border);border-radius:999px;background:#0c0c0e;}" +
-    ".sm-scope-btn{border:0;border-radius:999px;padding:3px 11px;background:transparent;color:var(--sm-dim);" +
-    "font-family:var(--sm-font);font-size:11.5px;font-weight:500;cursor:pointer;max-width:220px;overflow:hidden;" +
-    "text-overflow:ellipsis;white-space:nowrap;transition:background .12s,color .12s;}" +
-    ".sm-scope-btn:hover{color:var(--sm-fg);}" +
-    ".sm-scope-btn.is-on{background:var(--sm-accent);color:#0f1220;font-weight:600;}" +
-    ".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:disabled,.sm-chat-ta:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}" +
-    ".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-drafts{display:flex;flex-direction:column;gap:3px;max-height:128px;overflow-y:auto;margin:0;padding:0;list-style:none;}" +
+    ".sm-draft{display:flex;align-items:center;gap:10px;padding:4px 4px 4px 11px;border-radius:8px;background:var(--sm-muted);font-size:12.5px;line-height:1.45;}" +
+    ".sm-draft-anchor{flex:none;color:var(--sm-dim);font-size:11.5px;font-weight:600;white-space:nowrap;}" +
+    ".sm-draft-text{flex:1;min-width:0;overflow:hidden;color:var(--sm-fg);text-overflow:ellipsis;white-space:nowrap;}" +
+    ".sm-draft-del{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--sm-dim);cursor:pointer;}" +
+    ".sm-draft-del svg{width:12px;height:12px;}.sm-draft-del:hover{background:rgba(255,255,255,.08);color:var(--sm-fg);}" +
+    ".sm-composer-row{display:flex;align-items:flex-end;gap:8px;}" +
+    ".sm-chat-box{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px 5px;border:1px solid var(--sm-border);border-radius:14px;background:#0c0c0e;transition:border-color .15s;}" +
+    ".sm-chat-box:focus-within{border-color:var(--sm-accent);}" +
+    /* what the comment is about: a small menu of its own — a native select
+       opens the system's list, white on this dark page */
+    ".sm-target-wrap{position:relative;flex:none;}" +
+    ".sm-target{display:inline-flex;align-items:center;gap:7px;height:30px;max-width:170px;margin:0;border:0;border-radius:10px;padding:0 10px;background:var(--sm-muted);color:var(--sm-fg);font:600 11.5px var(--sm-font);cursor:pointer;transition:background .12s;}" +
+    ".sm-target:hover,.sm-target[aria-expanded=\"true\"]{background:rgba(255,255,255,.09);}.sm-target:focus-visible{outline:2px solid var(--sm-accent);outline-offset:1px;}" +
+    ".sm-target-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" +
+    ".sm-target-chevron{display:flex;flex:none;color:var(--sm-dim);transition:transform .15s ease;}.sm-target-chevron svg{width:10px;height:6px;}" +
+    ".sm-target[aria-expanded=\"true\"] .sm-target-chevron{transform:rotate(180deg);}" +
+    ".sm-target-menu{position:absolute;z-index:40;left:-5px;bottom:calc(100% + 10px);width:max-content;min-width:220px;max-width:min(340px,calc(100vw - 32px));padding:4px;" +
+    "border:1px solid var(--sm-border);border-radius:12px;background:var(--sm-surface-2);box-shadow:0 -12px 36px rgba(0,0,0,.5);animation:sm-pop-in .14s ease;}" +
+    ".sm-target-option{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:8px;background:transparent;padding:7px 9px;color:var(--sm-fg);font-family:var(--sm-font);text-align:left;cursor:pointer;}" +
+    ".sm-target-option:hover,.sm-target-option:focus-visible{background:rgba(255,255,255,.06);outline:none;}.sm-target-option.is-selected{background:rgba(169,194,255,.1);}" +
+    ".sm-target-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;}" +
+    ".sm-target-option-label{font-size:12px;font-weight:600;}" +
+    ".sm-target-option-detail{overflow:hidden;color:var(--sm-dim);font-size:11px;text-overflow:ellipsis;white-space:nowrap;}" +
+    ".sm-target-check{display:flex;flex:none;width:14px;color:var(--sm-accent);}.sm-target-check svg{width:14px;height:14px;}" +
+    ".sm-chat-ta{flex:1;min-width:0;min-height:30px;max-height:150px;resize:none;border:0;background:transparent;padding:5px 8px;color:var(--sm-fg);font:13px/1.5 var(--sm-font);outline:none;}" +
+    ".sm-chat-ta::placeholder{color:#6b6b72;}" +
+    ".sm-send-pill,.sm-approve{display:inline-flex;align-items:center;gap:7px;height:40px;flex-shrink:0;border:0;border-radius:999px;padding:0 17px;font:600 12.5px var(--sm-font);cursor:pointer;white-space:nowrap;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,opacity .14s ease;}" +
+    ".sm-send-pill svg,.sm-approve svg{width:15px;height:15px;}" +
+    ".sm-send-pill{background:var(--sm-accent);color:#0f1220;}" +
     ".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{background:#f4f4f5;color:#0f0f0f;}.sm-approve svg{color:var(--sm-success);}" +
     ".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;}";
+    /* off: still there, so it is clear Approve comes back once the comments are sent */
+    ".sm-send-pill.is-off,.sm-approve.is-off{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}";
 
   // ---------- 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);
   }
@@ -564,16 +473,48 @@
       /* headless / detached — ignore */
     }
   }
+  function pctOf(v) {
+    return (v * 100).toFixed(2) + "%";
+  }
+  function copyOf(o) {
+    var d = {};
+    for (var k in o) d[k] = o[k];
+    return d;
+  }
+  function layoutOptions() {
+    var d = shownDesign();
+    return d && !d.current ? d.layouts || [] : boundLayouts;
+  }
+  function designOptions() {
+    return Array.isArray(CFG.designs) ? CFG.designs : [];
+  }
+  // The design the page shows: the picked one, else the deck's own (null when
+  // the deck is bound to none this machine has cached).
+  function shownDesign() {
+    var all = designOptions();
+    for (var i = 0; i < all.length; i++) {
+      if (S.design ? all[i].presFP === S.design : all[i].current) return all[i];
+    }
+    return null;
+  }
+  function findLayout(componentName) {
+    return layoutOptions().find(function (o) {
+      return o.componentName === componentName;
+    }) || null;
+  }
 
   // ---------- session (shared with the preview gate via gate-session.js) ------
   function saveLedger() {
     SES.saveLedger(ledger);
   }
-  // The small round context the NEXT round restores from: the selected tab and
-  // the unsent draft (the server nonce is added by the shared session). The
-  // plan body is NOT in here — see BODY_KEY.
+  // The small round context the NEXT round restores from: the selected slide,
+  // the unsent draft and the shell's hand-off state (the server nonce is added
+  // by the shared session). The plan body is NOT in here — see BODY_KEY.
   function ctxFields() {
-    return { round: roundNo, selectedIndex: S.selectedIndex, draft: feedbackText, working: working };
+    var f = { round: roundNo, selectedIndex: S.selectedIndex, draft: feedbackText, working: working };
+    var shell = SHELL.ctxFields();
+    for (var k in shell) f[k] = shell[k];
+    return f;
   }
   function saveCtx() {
     SES.saveCtx(ctxFields());
@@ -583,12 +524,53 @@
     SES.saveCtxSoon(ctxFields());
   }
 
+  // Card edits that are not sent yet, keyed by the plan version they were made
+  // on (CFG.subjectHash, else a hash of the served body): a reload of the same
+  // version brings them back; edits on an older version are offered for copying
+  // instead of being applied to text they were not written against. Written on
+  // each committed edit (blur / drop), never per keystroke.
+  var EDITS_KEY = "slidemind-plan-edits:" + DECK_KEY;
+  var editsRestored = false; // this load brought unsent edits back
+  var staleEdits = null; // edits made on an older version: { value }
+  function textHash(t) {
+    var h = 0x811c9dc5;
+    for (var i = 0; i < t.length; i++) {
+      h ^= t.charCodeAt(i);
+      h = Math.imul(h, 0x01000193) >>> 0;
+    }
+    return ("0000000" + h.toString(16)).slice(-8) + ":" + t.length;
+  }
+  function editsBase() {
+    return CFG.subjectHash || "body:" + textHash(baseline);
+  }
+  function saveEdits() {
+    if (S.value !== baseline || S.storyDraft || S.design) SES.write(EDITS_KEY, { base: editsBase(), value: S.value, storyDraft: S.storyDraft || null, design: S.design || null });
+    else SES.write(EDITS_KEY, null);
+  }
+  function restoreEdits() {
+    var saved = SES.read(EDITS_KEY, null);
+    if (!saved || typeof saved !== "object" || typeof saved.value !== "string") return;
+    if (saved.base === editsBase()) {
+      S.value = saved.value;
+      S.storyDraft = saved.storyDraft || null;
+      // a picked design survives a reload only while it is still on offer
+      S.design = designOptions().some(function (d) {
+        return d.presFP === saved.design && !d.current;
+      })
+        ? saved.design
+        : null;
+      editsRestored = S.value !== baseline || !!S.storyDraft || !!S.design;
+    } else {
+      staleEdits = { value: saved.value };
+      SES.write(EDITS_KEY, null);
+    }
+  }
+
   // Per-slide segment diff between the previous round's plan body and this one,
   // keyed by the slide NUMBER the `### Slide N` heading declares — never by the
   // heading's position. Real decks number non-contiguously (2,3,4,7,8,9), so a
-  // positional key badged the wrong tab. Each chunk also STOPS at the next `## `
-  // section, so trailing prose (`## Design language`, `## Quellen`) can't be
-  // swept into the last slide and badge it for an unrelated edit.
+  // positional key badged the wrong card. Each chunk also STOPS at the next
+  // `## ` section, so trailing prose can't be swept into the last slide.
   function slideChunks(md) {
     var out = {};
     String(md || "")
@@ -596,8 +578,6 @@
       .forEach(function (part) {
         var m = /^###\s+Slide\s+(\d+)/.exec(part);
         if (!m) return;
-        // Cut at the next level-2 heading (the chunk's own `###` line is at
-        // index 0, so only a later `## ` can match).
         var stop = part.search(/\n##\s+/);
         var body = stop > 0 ? part.slice(0, stop) : part;
         out[Number(m[1])] = body.trim();
@@ -618,117 +598,112 @@
   // Runs before the first render so the surface is built in the right mode.
   function restoreSession() {
     var prevBody = SES.read(BODY_KEY, null);
-    var st = SES.restore(CFG.ledgerSeed);
+    // A changed nonce while the agent still revises this page's comments is not
+    // the next round (SHELL.holdsRound) — nothing it was handed is answered yet.
+    var st = SES.restore(CFG.ledgerSeed, { hold: SHELL.holdsRound });
     ledger = st.ledger;
     roundNo = st.roundNo;
     working = st.working;
-    if (st.newRound) {
+    if (st.newRound && !st.unchanged) {
       // Cosmetics only: WHICH slides moved is a content question, so it stays a
       // body diff — the round transition itself came from the server nonce.
       changedSlides = diffSlides(prevBody, baseline);
-      bannerText = "Updated · Round " + roundNo;
+      bannerText = "Updated by your agent";
     }
-    // Reviewer context survives the round (invariant 6): selection + draft.
+    // Same bytes, asked again: never "updated", never "worked in".
+    askedAgainUnchanged = !!(st.unchanged && st.hadSent);
+    // Reviewer context survives the round: selection + draft + hand-off state.
     if (st.ctx) {
       if (typeof st.ctx.selectedIndex === "number") S.selectedIndex = st.ctx.selectedIndex;
       if (typeof st.ctx.draft === "string") feedbackText = st.ctx.draft;
     }
+    arrivedAfterRevising = SHELL.restoreCtx(st.ctx, working, st.newRound);
+    if (!working) restoreEdits();
     saveLedger();
     saveCtx();
     // Once per page load — the served body never changes while this page lives.
-    SES.write(BODY_KEY, baseline);
+    // A held load keeps the body the reviewer commented on: the "updated"
+    // badges of the real next round compare against THAT.
+    if (!st.held) SES.write(BODY_KEY, baseline);
   }
 
   // ---------- 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"));
+    var bar = SHELL.buildBar("Plan review", "");
     editedBadge = el("span", "sm-edited", "edited");
     editedBadge.style.display = "none";
-    title.appendChild(editedBadge);
-    meta.appendChild(title);
-    hintEl = el("div", "h");
-    meta.appendChild(hintEl);
-    bar.appendChild(meta);
-    bar.appendChild(el("div", "sm-grow"));
-
-    document.body.appendChild(bar);
+    bar.titleEl.appendChild(editedBadge);
+    hintEl = bar.hintEl;
+    // the deck-wide choices sit next to the title, each named: the design and the body slides' layout
+    barTools = el("div", "sm-bar-tools");
+    bar.bar.insertBefore(barTools, bar.grow);
   }
   function refreshChrome() {
-    if (editedBadge) editedBadge.style.display = planWasEdited() ? "" : "none";
+    if (editedBadge) editedBadge.style.display = planWasEdited() || S.design ? "" : "none";
     if (hintEl) {
       hintEl.textContent = working
-        ? "The agent is revising · read on and browse the strip — commenting and editing resume with the next round"
-        : "Shape the red thread and storyboards below · drag to reorder, rename moves, edit blocks · decide when it reads right";
+        ? CFG.embedded
+          ? "Read on and browse the slides · you can comment again when your agent asks"
+          : "The agent is revising · read on and browse the slides — commenting and editing resume with the next round"
+        : SHELL.notAskedYet()
+          ? "Your agent is still working on this plan · it asks for your review when it is ready"
+          : SHELL.alreadyApproved()
+            ? "Approved · comment only if something must still change"
+            : "Pick a slide on the left · drag to reorder, click its title to rename · edit its story, points and layout on the card";
     }
 
-    var hasFeedback = commentText().length > 0;
-    var canSend = (!working && !!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 (working) {
-        // Approve applies to exactly the displayed round; while the agent is
-        // revising, that round is already superseded (server refuses it too).
-        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 = "The agent is revising — approve the next round";
-        }
-      } 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 = "";
-          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";
-          }
-        }
+    // the in-flight latch: one answer at a time, a double click cannot send twice
+    var sending = SHELL.decisionPending() ? SHELL.state.pending : null;
+    var total = draftComments().length + (commentText() ? 1 : 0);
+    // Send appears once there is something to send — a comment typed or
+    // listed, or a storyline change — and stays while that answer is on its way.
+    if (sendBtn) {
+      var canSend = !working && (!!S.storyDraft || total > 0);
+      sendBtn.style.display = canSend || (sending && sending.decision === "comments") ? "" : "none";
+      sendBtn.classList.toggle("is-off", !!sending);
+      var n = sendBtn.querySelector(".n");
+      if (n) {
+        n.textContent =
+          sending && sending.decision === "comments"
+            ? "Sending…"
+            : S.storyDraft
+              ? "Send changes"
+              : "Send " + total + (total === 1 ? " comment" : " comments");
       }
     }
-  }
 
-  // ---------- workspace: one scrollable document surface + composer ----------
+    if (!approveBtn) return;
+    // Why Approve is off — said on hover, never as one more line on the page.
+    // A comment and an approval never go out together: anything typed or
+    // listed turns Approve off until it is sent or removed.
+    var why = null;
+    if (working) why = CFG.embedded ? "Your answer is saved. You can approve the next version when your agent asks." : "The agent is revising — approve the next round";
+    else if (sending) why = "Sending your answer…";
+    else if (S.storyDraft) why = "Send or discard your storyline changes first";
+    else if (SHELL.notAskedYet()) why = "Your agent asks for your approval when the plan is ready";
+    else if (SHELL.alreadyApproved()) why = "This plan is approved";
+    else if (total > 0) why = "Send or remove your " + (total === 1 ? "comment" : "comments") + " first";
+    approveBtn.classList.toggle("is-off", !!why);
+    approveBtn.setAttribute("aria-disabled", why ? "true" : "false");
+    approveBtn.title = why || approveTip();
+    var label = approveBtn.querySelector(".n");
+    if (label) label.textContent = sending && sending.decision === "approve" ? "Approving…" : SHELL.alreadyApproved() ? "Plan approved" : "Approve plan";
+  }
+
+  // What Approve does, on hover. In the workspace the click also copies the
+  // message the reviewer pastes to their agent — the dialog after the click is
+  // where that is said; the button itself stays two words (doc 21).
+  function approveTip() {
+    if (!CFG.embedded) return "Approve the plan — the agent builds the slides next";
+    return "Approve the plan. You then paste a message into your agent chat.";
+  }
+
+  // ---------- workspace: 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.
+    // Delegated inline-edit commit for Mode A rendered markdown blocks.
     surfaceEl.addEventListener(
       "blur",
       function (e) {
@@ -742,7 +717,7 @@
         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(".sm-plan")) return;
         if (!t.closest("[data-md-line][data-md-kind]")) return;
         e.preventDefault();
         commitRenderedEdit(t);
@@ -751,12 +726,10 @@
       true,
     );
     wsEl.appendChild(surfaceEl);
-    document.body.appendChild(wsEl);
-
     composerEl = el("div", "sm-composer");
     composerEl.setAttribute("data-sm-overlay", "1");
     wsEl.appendChild(composerEl);
-
+    document.body.appendChild(wsEl);
     renderSurface();
     renderComposer();
   }
@@ -767,7 +740,7 @@
     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;
+    if (!editable || editable.closest(".sm-plan")) return;
     var next = PLAN.replaceRenderedMarkdownBlock({
       markdown: S.value,
       line: Number(editable.dataset.mdLine),
@@ -776,21 +749,21 @@
     });
     if (next !== S.value) {
       S.value = next;
-      approveArmed = false; // any plan edit disarms a pending approve-confirm
+      saveEdits(); // an unsent edit survives a reload of this version
       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.
+  // A plan with storyboard fences renders as rail + stage + aside; otherwise the
+  // plain markdown renders inline-editable. The dossier re-renders in full on
+  // every committed model change (edits commit on blur / pointerup, so nothing
+  // is focused at commit time).
   function renderSurface() {
     if (!surfaceEl) return;
+    surfaceLocked = locked();
     surfaceEl.innerHTML = "";
     focusAfterRender = null;
-    if (bannerText) surfaceEl.appendChild(roundBanner());
     var segments = PLAN.splitPlanMarkdownIntoSegments(S.value);
     var hasStoryboards = segments.some(function (s) {
       return s.type === "storyboard";
@@ -803,20 +776,15 @@
     }
   }
 
-  // Transient "Updated · Round N" banner. It states the round arrived and how
-  // many slides changed; the per-tab badges say WHICH. Self-dismisses so it
-  // can't be mistaken for a permanent state.
+  // Transient "Updated · Round N" banner. Self-dismisses so it can't be
+  // mistaken for a permanent state.
   function roundBanner() {
     var count = Object.keys(changedSlides).length;
     var node = el("div", "sm-round-banner");
     node.innerHTML =
       ICONS.sparkles +
-      "<span><b>" +
-      bannerText +
-      "</b> " +
-      (count
-        ? count + (count === 1 ? " slide changed" : " slides changed") + " — marked “updated” on the strip."
-        : "The plan was revised.") +
+      "<span><b>" + bannerText + "</b> " +
+      (count ? count + (count === 1 ? " slide changed" : " slides changed") + " — marked “updated” on the left." : "The plan was revised.") +
       "</span>";
     setTimeout(function () {
       bannerText = null;
@@ -826,7 +794,9 @@
   }
 
   function renderModeA(segments) {
+    var doc = el("div", "sm-doc");
     var root = el("div", "plan-md-root");
+    if (bannerText) root.appendChild(roundBanner());
     segments.forEach(function (seg) {
       if (seg.type !== "markdown") return;
       var html = PLAN.renderPlanMarkdown(seg.text, { lineOffset: seg.lineOffset });
@@ -835,20 +805,21 @@
       holder.innerHTML = html;
       while (holder.firstChild) root.appendChild(holder.firstChild);
     });
-    surfaceEl.appendChild(root);
+    doc.appendChild(root);
+    surfaceEl.appendChild(doc);
   }
 
-  // The story beats on the strip: the `## Red thread` moves — but only when
-  // they match the boards one-to-one, so a drifted red thread (more moves than
-  // slides) never renders phantom slide tabs — otherwise each board's key
-  // message (read-only tabs then). Each beat carries the slide number its board
-  // declares, which is what a "This slide" comment is anchored to (so the agent
-  // reads the same number the reviewer saw).
+  // The story beats: the backbone (a body slide's `## Red thread` move, a frame
+  // slide's key message), else the moves — but only when they match the boards
+  // one-to-one, so a drifted red thread never renders phantom slides —
+  // otherwise each board's key message. Each beat carries the slide number its
+  // board declares, which is what a "This slide" comment is anchored to.
   function planBeats() {
     var boards = PLAN.splitPlanMarkdownIntoSegments(S.value).filter(function (s) {
       return s.type === "storyboard";
     });
-    var messages = PLAN.extractRedThreadMessages(S.value);
+    var backbone = PLAN.parsePlanBackbone(S.value);
+    var messages = backbone ? backbone.messages : PLAN.extractRedThreadMessages(S.value);
     if (messages.length !== boards.length) {
       messages = boards.map(function (seg, i) {
         return (seg.data && seg.data.keyMessage) || "Slide " + ((seg.data && seg.data.slide) || i + 1);
@@ -860,7 +831,7 @@
     });
   }
 
-  // ---------- dossier (storyboard mode) ----------
+  // ---------- dossier: rail | stage | aside ----------
   function renderDossier(segments) {
     var storyboardSegments = segments.filter(function (s) {
       return s.type === "storyboard";
@@ -875,77 +846,37 @@
     });
     var committed = PLAN.backboneFromMessages(beatMessages);
     var slides = S.storyDraft || committed;
-    var backboneEditable = PLAN.parsePlanBackbone(S.value) !== null;
-    var canEdit = !locked() && backboneEditable;
+    var canEdit = !locked() && PLAN.parsePlanBackbone(S.value) !== null;
 
     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, storyboardSegments, 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);
+    // A staged draft resolves a card to the board of the slide it originally
+    // was; new slides (originalIndex null) have no board yet.
+    function segmentFor(index) {
+      if (!S.storyDraft) return storyboardSegments[index];
+      var oi = slides[index] ? slides[index].originalIndex : undefined;
+      return oi === null || oi === undefined ? undefined : storyboardSegments[oi];
     }
+    var activeSegment = segmentFor(activeIndex);
 
-    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);
+    var plan = el("div", "sm-plan");
+    plan.appendChild(renderRail(slides, beatMessages, storyboardData, segmentFor, canEdit, activeIndex));
+    plan.appendChild(renderStage(activeSegment, activeIndex, slides));
+    surfaceEl.appendChild(plan);
   }
 
-  // ---------- storyline tab strip ----------
-  function renderStrip(slides, committed, committedMessages, storyboardData, storyboardSegments, canEdit, activeIndex) {
-    var section = el("section", "plan-storyline");
-    var head = el("div", "plan-storyline-head");
-    var headText = el("div", "plan-storyline-head-text");
-    headText.appendChild(el("span", "plan-storyline-label", "Red thread"));
-    head.appendChild(headText);
-    head.appendChild(renderDeckLayoutKnob(storyboardData));
-    section.appendChild(head);
+  // ---------- the rail: one card per slide, in story order ----------
+  function renderRail(slides, committedMessages, storyboardData, segmentFor, canEdit, activeIndex) {
+    var rail = el("aside", "sm-rail");
+    var head = el("div", "sm-rail-head", "<span>Storyline</span>");
+    head.appendChild(el("span", "n", "")).textContent = slides.length + (slides.length === 1 ? " slide" : " slides");
+    rail.appendChild(head);
+    renderBarTools(storyboardData);
 
-    var track = el("ol", "plan-storyline-track");
-    section.appendChild(track);
+    var list = el("ol", "sm-rail-list");
+    rail.appendChild(list);
 
     var cardEls = [];
     var gapEls = [];
@@ -958,20 +889,31 @@
         else gapEls[i].removeAttribute("data-active");
       }
     }
+    // Gap index nearest the pointer: each card contributes its leading edge
+    // (the gap before it) and trailing edge (the gap after it), on whichever
+    // axis the rail flows.
     function nearestGap(cx, cy) {
       var best = 0;
       var bd = Infinity;
+      var horizontal = list.scrollWidth > list.clientWidth + 1 || getComputedStyle(list).display === "flex";
       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;
+        var before, after;
+        if (horizontal) {
+          var dy = cy - (r.top + r.height / 2);
+          before = (cx - r.left) * (cx - r.left) + dy * dy;
+          after = (cx - r.right) * (cx - r.right) + dy * dy;
+        } else {
+          var dx = cx - (r.left + r.width / 2);
+          before = (cy - r.top) * (cy - r.top) + dx * dx;
+          after = (cy - r.bottom) * (cy - r.bottom) + dx * dx;
+        }
         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;
@@ -980,32 +922,34 @@
       return best;
     }
 
-    // Sequence-only edits (reorder / remove) cascade to the storyboards now;
-    // renames / inserts stage a draft the agent has to build.
+    // Only a RENAME stages a draft: a renamed move says the slide's job in the
+    // story changed, which is the agent's to re-answer. Reorders, removals and
+    // INSERTS apply now. An insert used to stage too, which left the new slide
+    // with no record at all — the stage had nothing to render, so its beat,
+    // points and layout could not be touched until a whole agent round had run.
     function beatCommit(next) {
-      var sequenceOnly = next.every(function (s) {
-        return s.originalIndex !== null && committedMessages[s.originalIndex] === s.message;
+      var renamed = next.some(function (s) {
+        return s.originalIndex !== null && committedMessages[s.originalIndex] !== s.message;
       });
-      if (sequenceOnly) {
+      if (renamed) {
+        S.storyDraft = next;
+      } else {
         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
+      saveEdits();
       refreshChrome();
       renderComposer();
       renderSurface();
     }
     function renameSlide(index, message) {
       var cur = slides[index];
+      editingKey = null;
       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;
@@ -1015,11 +959,7 @@
     function insertSlideAt(position) {
       newSlideCounter += 1;
       var next = slides.slice();
-      next.splice(position, 0, {
-        key: "new-" + newSlideCounter,
-        originalIndex: null,
-        message: "New slide",
-      });
+      next.splice(position, 0, { key: "new-" + newSlideCounter, originalIndex: null, message: "New slide" });
       S.selectedIndex = position;
       beatCommit(next);
     }
@@ -1044,7 +984,7 @@
     }
 
     function gapAt(position) {
-      var li = el("li", "plan-storyline-gap");
+      var li = el("li", "sm-rail-gap");
       li.setAttribute("aria-hidden", canEdit ? "false" : "true");
       if (canEdit) {
         var btn = el("button", "plan-storyline-insert", ICONS.plus);
@@ -1061,35 +1001,34 @@
     }
 
     slides.forEach(function (item, index) {
-      track.appendChild(gapAt(index));
-
+      list.appendChild(gapAt(index));
+      var segment = segmentFor(index);
+      var data = segment && segment.data;
       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" : ""),
+        "sm-thumb plan-beat" + (index === activeIndex ? " is-active" : "") + (editingKey === item.key ? " is-editing" : ""),
       );
       cardEls[index] = li;
+      li.setAttribute("aria-current", index === activeIndex ? "true" : "false");
 
       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);
-
-      // "updated" badge: this tab's slide changed in the round that just landed.
-      // Keyed by the SLIDE NUMBER shown on the tab (`numeral`, straight off the
-      // board data) — the same source the diff keys by, so non-contiguous decks
-      // (2,3,4,7,8,9) badge the tab that actually moved. A staged storyline
-      // renumbers positionally, so badges are suppressed while one is open.
+      // "updated" badge: this card's slide changed in the round that just
+      // landed. Keyed by the SLIDE NUMBER (`numeral`, straight off the board
+      // data) — the same source the diff keys by. A staged storyline renumbers
+      // positionally, so badges are suppressed while one is open.
       if (!S.storyDraft && changedSlides[numeral]) {
         var upd = el("span", "plan-storyline-beat-updated", "updated");
         upd.title = "This slide changed in the latest round";
         li.appendChild(upd);
       }
 
-      var textEl = el("div", "plan-storyline-beat-text");
+      li.appendChild(renderMini(data));
+
+      var meta = el("div", "sm-thumb-meta");
+      var num = el("span", "sm-thumb-number");
+      num.textContent = String(numeral).padStart(2, "0");
+      meta.appendChild(num);
+      var textEl = el("div", "sm-thumb-name");
       textEl.setAttribute("role", "textbox");
       textEl.textContent = item.message;
       var isEditing = canEdit && editingKey === item.key;
@@ -1121,28 +1060,15 @@
           }
         });
       }
-      li.appendChild(textEl);
-      // Layout chip: the board's layout, picked in place. A tab resolves to the
-      // board of the slide it originally was; staged new slides have no board.
-      var chipIndex = S.storyDraft ? item.originalIndex : index;
-      var chipSegment = chipIndex === null || chipIndex === undefined ? undefined : storyboardSegments[chipIndex];
-      if (chipSegment && chipSegment.data) {
-        var chip = renderLayoutPicker(chipSegment.data.layout, {
-          className: "plan-storyboard-layout-picker--beat",
-          ariaLabel: "Choose the layout of slide " + (index + 1),
-          onPick: function (componentName) {
-            var d = {};
-            for (var k in chipSegment.data) d[k] = chipSegment.data[k];
-            d.layout = componentName;
-          d.layoutSelection = "explicit";
-          d.layoutKey = (CFG.layouts || []).find(function(o) { return o.componentName === componentName; })?.layoutKey;
-          delete d.layoutReason;
-            commitStoryboard(chipSegment, d);
-          },
-        });
-        chip.setAttribute("data-no-drag", "");
-        li.appendChild(chip);
-      }
+      meta.appendChild(textEl);
+      li.appendChild(meta);
+
+      var sub = el("div", "sm-thumb-sub");
+      var chosen = data && findLayout(data.layout);
+      sub.textContent = data
+        ? (chosen && chosen.nativeLayoutName) || data.layout || "No layout chosen"
+        : "Storyboard follows once sent";
+      li.appendChild(sub);
 
       if (canEdit) {
         var rm = el("button", "plan-storyline-beat-remove", ICONS.x);
@@ -1161,19 +1087,12 @@
       }
 
       // Pointer: drag ≥ threshold reorders; a click selects; a click on the
-      // active tab (when editable) enters rename mode.
+      // active card's title (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,
-        };
+        stripDrag = { index: index, key: item.key, pointerId: e.pointerId, ox: e.clientX, oy: e.clientY, moved: false, onTitle: e.target === textEl };
         try {
           li.setPointerCapture(e.pointerId);
         } catch {
@@ -1187,7 +1106,7 @@
         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.classList.add("is-dragging");
         li.style.transform = "translate(" + dx + "px," + dy + "px)";
         dropGap = nearestGap(e.clientX, e.clientY);
         paintGaps();
@@ -1203,10 +1122,11 @@
         var gap = dropGap;
         var idx = stripDrag.index;
         var key = stripDrag.key;
+        var onTitle = stripDrag.onTitle;
         stripDrag = null;
         dropGap = null;
         li.style.transform = "";
-        li.classList.remove("plan-storyline-beat--dragging");
+        li.classList.remove("is-dragging");
         paintGaps();
         if (moved) {
           if (gap !== null) reorderTo(idx, gap);
@@ -1217,7 +1137,7 @@
           saveCtx();
           renderSurface();
           renderComposer(); // the scope control names the newly selected slide
-        } else if (canEdit) {
+        } else if (canEdit && onTitle) {
           editingKey = key;
           renderSurface();
         }
@@ -1228,389 +1148,381 @@
         stripDrag = null;
         dropGap = null;
         li.style.transform = "";
-        li.classList.remove("plan-storyline-beat--dragging");
+        li.classList.remove("is-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;
+      list.appendChild(li);
     });
-    return withBlocks(data, blocks);
-  }
-  function withBlocks(data, blocks) {
-    var next = {};
-    for (var k in data) next[k] = data[k];
-    next.blocks = blocks;
-    return next;
+    list.appendChild(gapAt(slides.length));
+    if (canEdit) {
+      var add = el("li");
+      var addBtn = el("button", "sm-rail-add", ICONS.plus + "<span>Add slide</span>");
+      addBtn.type = "button";
+      addBtn.onclick = function () {
+        insertSlideAt(slides.length);
+      };
+      add.appendChild(addBtn);
+      list.appendChild(add);
+    }
+    // Keep the selected card in view (the preview rail does the same).
+    setTimeout(function () {
+      var active = cardEls[activeIndex];
+      if (active && active.scrollIntoView) active.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }, 0);
+    return rail;
   }
 
-  // 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 commitPlan(nextValue) {
-    if (locked()) return;
-    S.value = nextValue;
-    approveArmed = false; // a storyboard edit disarms a pending approve-confirm
-    refreshChrome();
-    renderSurface();
+  // The rail card's picture: the render of the layout this slide sits on.
+  function renderMini(data) {
+    var box = el("div", "sm-thumb-preview");
+    var mini = el("div", "sm-mini");
+    if (!data) {
+      mini.appendChild(el("div", "sm-mini-empty", "new"));
+      box.appendChild(mini);
+      return box;
+    }
+    var selected = selectedPlanLayout(data);
+    if (selected && selected.previewUrl) {
+      var img = el("img", "sm-mini-chrome");
+      img.src = selected.previewUrl;
+      img.alt = "";
+      img.loading = "lazy";
+      mini.appendChild(img);
+    } else {
+      mini.appendChild(el("div", "sm-mini-empty", ""));
+    }
+    // Same slot treatment as the stage: scanning the rail should say how each
+    // slide is SHAPED, not just what it is called.
+    mini.appendChild(renderSlotGeometry(selected, "sm-mini-slots"));
+    box.appendChild(mini);
+    return box;
   }
-  function commitStoryboard(segment, nextData) {
-    commitPlan(PLAN.replaceStoryboardSegment(S.value, segment, nextData));
+
+  // ---------- the stage: the slide, fitted ----------
+  // The bound layout's own chrome render with its slot geometry on top, a light
+  // veil pushing it back, and ONE panel floating over both: the story beat, the
+  // 3-5 key points, the layout pick. That is the whole of what the gate asks a
+  // human — the storyboard canvas it replaced was design input nobody reviewed.
+  //
+  // The slide is CONTEXT and the panel is the SUBJECT, so the panel is centred
+  // and is the only thing on the stage with elevation. Pinning it to the
+  // layout's content region made it read as part of the slide, which is the one
+  // thing it must not be; the layout's shape is carried by its own geometry.
+  var MAX_BULLETS = 5;
+
+  function renderStage(segment, activeIndex, slides) {
+    var stage = el("section", "sm-stage");
+    var fit = el("div", "sm-stage-fit");
+    if (bannerText) fit.appendChild(roundBanner());
+    if (segment) {
+      if (segment.data) fit.appendChild(renderSlideCard(segment, segment.data));
+      else {
+        var err = el("div", "plan-storyboard-error");
+        err.appendChild(el("p", null, "Slide plan could not be read."));
+        var pre = el("pre");
+        var codeNode = document.createElement("code");
+        codeNode.textContent = segment.raw || "";
+        pre.appendChild(codeNode);
+        err.appendChild(pre);
+        fit.appendChild(err);
+      }
+    } else {
+      // A staged new slide (or a beat with no record yet): the agent fills it
+      // once the story round is sent.
+      var head = el("div", "sm-stage-head");
+      head.appendChild(el("span", "t", "")).textContent = "Slide " + (activeIndex + 1) + " · " + ((slides[activeIndex] && slides[activeIndex].message) || "");
+      fit.appendChild(head);
+      var placeholder = el("div", "plan-dossier-new-slide");
+      placeholder.innerHTML =
+        ICONS.ruler +
+        "<p><strong>Storyline edited.</strong> Sending asks the agent to draft the content for your new and renamed slides — add comments below if you like.</p>";
+      fit.appendChild(placeholder);
+    }
+    fit.appendChild(draftNote());
+    stage.appendChild(fit);
+    return stage;
   }
 
-  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;
+  function renderSlideCard(segment, data) {
+    var frame = el("div", "plan-stage-frame");
+    var selected = selectedPlanLayout(data);
+    // The slide card: the same embossed physical object the add-in uses for a
+    // slide anywhere else. The clip lives HERE, not on the frame, because the
+    // panel's layout menu has to escape it.
+    var slide = el("div", "plan-stage-slide slide-emboss");
+    if (selected && selected.previewUrl) {
+      var chrome = el("img", "plan-stage-chrome");
+      chrome.src = selected.previewUrl;
+      chrome.alt = "";
+      slide.appendChild(chrome);
+    } else {
+      slide.appendChild(el("div", "plan-stage-chrome plan-stage-chrome--blank"));
     }
-    // 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);
+    slide.appendChild(renderSlotGeometry(selected));
+    slide.appendChild(el("div", "plan-stage-veil"));
+    frame.appendChild(slide);
+
+    var card = el("div", "plan-stage-card");
+
+    var beatRow = el("div", "plan-stage-row");
+    beatRow.appendChild(el("span", "plan-stage-label", "Story beat"));
+    beatRow.appendChild(
+      renderDetailField("plan-stage-beat", "Story beat", data.keyMessage || "", false, function (next) {
+        var d = copyOf(data);
+        if (next) d.keyMessage = next;
+        else delete d.keyMessage;
+        commitStoryboard(segment, d);
+      }),
+    );
+    card.appendChild(beatRow);
+
+    var bullets = data.contentNotes || data.depthNotes || [];
+    function writeBullets(next) {
+      var d = {};
+      for (var k in data) if (k !== "contentNotes" && k !== "depthNotes") d[k] = data[k];
+      if (next.length) d.contentNotes = next;
+      commitStoryboard(segment, d);
     }
-    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();
+    var pointsRow = el("div", "plan-stage-row");
+    pointsRow.appendChild(el("span", "plan-stage-label", "Key points"));
+    var points = el("div", "plan-stage-points");
+    var list = el("ul", "plan-stage-bullets");
+    bullets.forEach(function (bullet, index) {
+      var li = el("li", "plan-stage-bullet");
+      li.appendChild(
+        renderDetailField("plan-stage-bullet-text", "Key points", bullet, false, function (next) {
+          writeBullets(
+            bullets.reduce(function (acc, b, at) {
+              if (at !== index) acc.push(b);
+              else if (next) acc.push(next);
+              return acc;
+            }, []),
+          );
+        }),
+      );
+      if (!locked()) {
+        var rm = document.createElement("button");
+        rm.type = "button";
+        rm.className = "plan-stage-bullet-remove";
+        rm.title = "Remove this point";
+        rm.setAttribute("aria-label", "Remove this point");
+        rm.innerHTML = ICONS.x;
+        rm.addEventListener("click", function () {
+          writeBullets(
+            bullets.filter(function (_, at) {
+              return at !== index;
+            }),
+          );
+        });
+        li.appendChild(rm);
+      }
+      list.appendChild(li);
     });
-    wrap.appendChild(ctrl);
-    return wrap;
-  }
-
-  // Where the generic body-safe area lands on the frame. Blocks are planned in
-  // the 1600×900 stage inside BODY_SAFE_AREA; a bound layout's content zone
-  // (normalized 0..1) IS the real body, so the safe area is stretched onto it —
-  // every block reads as a fraction of the body, never as a bare stage position
-  // that may fall outside the template's content area. Without a zone the
-  // stage is the frame. {x,y} = normalized frame offset, {sx,sy} = normalized
-  // frame units per stage unit.
-  function frameMapFor(data) {
-    var selected = selectedPlanLayout(data);
-    var zone = selected && selected.canvasBounds;
-    // A zero-size zone would make the per-pixel scale infinite and a drag
-    // write NaN coordinates — treat it as no zone.
-    if (!zone || !(zone.w > 0) || !(zone.h > 0)) {
-      return { x: 0, y: 0, sx: 1 / PLAN.STORYBOARD_WIDTH, sy: 1 / PLAN.STORYBOARD_HEIGHT };
+    if (pendingBullet) {
+      var draftLi = el("li", "plan-stage-bullet");
+      var draftField = renderDetailField("plan-stage-bullet-text", "One short point", "", false, function (next) {
+        pendingBullet = false;
+        if (next) writeBullets(bullets.concat([next]));
+        else render();
+      });
+      draftLi.appendChild(draftField);
+      list.appendChild(draftLi);
+      focusAfterRender = draftField;
     }
-    var A = PLAN.BODY_SAFE_AREA;
-    var sx = zone.w / A.w;
-    var sy = zone.h / A.h;
-    return { x: zone.x - A.x * sx, y: zone.y - A.y * sy, sx: sx, sy: sy };
-  }
-  function placeBlock(node, map, x, y, w, h) {
-    node.style.left = (map.x + x * map.sx) * 100 + "%";
-    node.style.top = (map.y + y * map.sy) * 100 + "%";
-    node.style.width = w * map.sx * 100 + "%";
-    node.style.height = h * map.sy * 100 + "%";
-  }
-  // Stage units per client pixel, per axis, for a 16:9 frame `width` px wide.
-  function stagePerPixel(map, width) {
-    var height = (width * PLAN.STORYBOARD_HEIGHT) / PLAN.STORYBOARD_WIDTH;
-    return { x: 1 / (width * map.sx), y: 1 / (height * map.sy) };
-  }
-
-  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");
-    var map = frameMapFor(data);
-    placeBlock(node, map, block.x, block.y, block.w, block.h);
-
-    function change(patch) {
-      commitStoryboard(segment, updateBlock(data, block.id, patch));
+    points.appendChild(list);
+    if (!locked() && !pendingBullet && bullets.length < MAX_BULLETS) {
+      var add = document.createElement("button");
+      add.type = "button";
+      add.className = "plan-stage-bullet-add";
+      add.innerHTML = ICONS.plus;
+      add.appendChild(document.createTextNode("Add a point"));
+      add.addEventListener("click", function () {
+        pendingBullet = true;
+        render();
+      });
+      points.appendChild(add);
     }
+    pointsRow.appendChild(points);
+    card.appendChild(pointsRow);
 
-    node.appendChild(
-      renderField("element", block.designElement, function (v) {
-        change({ designElement: v });
-      }),
-    );
-    node.appendChild(
-      renderField("content", block.content, function (v) {
-        change({ content: v });
+    var usesRow = renderImageUses(data.assetUses);
+    if (usesRow) card.appendChild(usesRow);
+
+    var foot = el("div", "plan-stage-foot");
+    // Same label column as the two fields above, so the layout reads as a third
+    // thing this gate lets you change rather than a caption on the panel.
+    foot.appendChild(el("span", "plan-stage-label", "Change layout"));
+    foot.appendChild(
+      renderLayoutPicker(data.layout, {
+        className: "plan-stage-layout",
+        ariaLabel: "Choose the slide's layout",
+        onPick: function (componentName) {
+          var d = copyOf(data);
+          d.layout = componentName;
+          d.layoutSelection = "explicit";
+          d.layoutKey = (findLayout(componentName) || {}).layoutKey;
+          delete d.layoutReason;
+          commitStoryboard(segment, d);
+        },
       }),
     );
+    card.appendChild(foot);
+
+    frame.appendChild(card);
+    return frame;
+  }
+
+  // ---------- the slide's image uses (read-only) ----------
+  // What a reviewer signs off is not "there is an image" but WHICH image and
+  // what it is for, so the row shows the file, names the obligation in plain
+  // language and quotes the agent's instruction verbatim. Framing is shown only
+  // when it is not the default (`contain`, centred, uncropped) — a line saying
+  // the default back is noise.
+  //
+  // Read-only ON PURPOSE. There is deliberately no role picker (design decision
+  // 3): a correction is a comment like every other change to the plan, and the
+  // agent rewrites the use.
+  // Keyed by fidelity AND scope, not composed from a shared stem: the add-in
+  // ships the same sentences in de/fr, where the "whole slide" / "one element"
+  // qualifier does not sit where English puts it. One key per case is what lets
+  // both clients say the same thing to the same user.
+  var USE_WORDS = {
+    original: "Placed as the image itself",
+    "reconstruct:slide": "Rebuilt as editable slide content — whole slide",
+    "reconstruct:element": "Rebuilt as editable slide content — one element",
+    reference: "Visual reference only",
+  };
 
-    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);
+  function useWords(use) {
+    if (use.fidelity === "reconstruct") {
+      return USE_WORDS["reconstruct:" + use.reconstructionScope] || USE_WORDS["reconstruct:element"];
     }
+    return USE_WORDS[use.fidelity] || use.fidelity;
+  }
 
-    if (!locked()) {
-      node.title = "Drag to reposition";
-      wireBlockDrag(node, frameEl, block, map, 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, map, change);
-      node.appendChild(rz);
+  function imageAssetById(assetId) {
+    var all = (CFG && CFG.imageAssets) || [];
+    for (var i = 0; i < all.length; i++) {
+      if (all[i] && all[i].assetId === assetId) return all[i];
     }
-    return node;
+    return null;
   }
 
-  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, map, 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: stagePerPixel(map, 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.x, st.sy + dy * st.scale.y);
-      placeBlock(node, map, p.x, p.y, block.w, block.h);
-    });
-    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.x, s.sy + (e.clientY - s.oy) * s.scale.y);
-      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");
+  function useFramingText(use) {
+    // Only an original is framed, and only a non-default framing is worth a
+    // line: `contain`, centred and uncropped says nothing back to the reviewer.
+    // The reconstruct scope is part of the label above, not a framing fact.
+    if (use.fidelity !== "original") return "";
+    var bits = [];
+    if (use.crop) {
+      bits.push(
+        "Cropped to " +
+          Math.round(use.crop.w * 100) + "% × " + Math.round(use.crop.h * 100) +
+          "% of the source",
+      );
     }
-    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, map, 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: stagePerPixel(map, rect.width),
-        moved: false,
-      };
-      try {
-        handle.setPointerCapture(e.pointerId);
-      } catch {
-        /* headless */
+    if (use.fit === "cover") bits.push("Framed to fill (cover)");
+    if (use.slot) bits.push("In the " + use.slot + " slot");
+    return bits.join(" · ");
+  }
+
+  function renderImageUses(uses) {
+    if (!uses || !uses.length) return null;
+    var row = el("div", "plan-stage-row");
+    row.appendChild(el("span", "plan-stage-label", uses.length === 1 ? "Image" : "Images"));
+    var list = el("div", "plan-stage-uses");
+    uses.forEach(function (use) {
+      var asset = imageAssetById(use.assetId);
+      var item = el("div", "plan-stage-use");
+      if (asset && asset.previewUrl) {
+        var thumb = el("img", "plan-stage-use-thumb");
+        thumb.src = asset.previewUrl;
+        thumb.alt = "";
+        item.appendChild(thumb);
+      } else {
+        item.appendChild(el("div", "plan-stage-use-thumb"));
       }
-    });
-    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.x, st.sh + dy * st.scale.y);
-      node.classList.add("plan-storyboard-block--dragging");
-      placeBlock(node, map, block.x, block.y, p.w, p.h);
-    });
-    function end(e) {
-      if (!st || st.pointerId !== e.pointerId) return;
-      try {
-        handle.releasePointerCapture(e.pointerId);
-      } catch {
-        /* ignore */
+      var body = el("div", "plan-stage-use-body");
+      var what = el("div", "plan-stage-use-what");
+      what.textContent = useWords(use);
+      // The file the user handed over — the only way to tell two screenshots
+      // apart when both thumbnails look alike.
+      var name = el("span", "plan-stage-use-name", "");
+      name.textContent = " · " + ((asset && asset.displayName) || use.assetId);
+      what.appendChild(name);
+      body.appendChild(what);
+      var instruction = el("div", "plan-stage-use-instruction");
+      instruction.textContent = use.instruction || "";
+      body.appendChild(instruction);
+      var framing = useFramingText(use);
+      if (framing) {
+        var fr = el("div", "plan-stage-use-framing");
+        fr.textContent = framing;
+        body.appendChild(fr);
       }
-      var s = st;
-      st = null;
-      if (!s.moved) return;
-      var p = clampSize(block, s.sw + (e.clientX - s.ox) * s.scale.x, s.sh + (e.clientY - s.oy) * s.scale.y);
-      var w = Math.round(p.w);
-      var h = Math.round(p.h);
-      if (w !== block.w || h !== block.h) change({ w: w, h: h });
+      item.appendChild(body);
+      list.appendChild(item);
+    });
+    row.appendChild(list);
+    return row;
+  }
+
+  // The layout's own slots over its render: how a reviewer sees WHICH layout
+  // they are on without reading its name. Read-only, pointer-through, and
+  // under the veil so the panel stays the brightest thing on the stage.
+  function renderSlotGeometry(layout, extraClass) {
+    var slots = el("div", "plan-stage-slots" + (extraClass ? " " + extraClass : ""));
+    slots.setAttribute("aria-hidden", "true");
+    if (!layout) return slots;
+    function place(node, rect) {
+      node.style.left = rect.x * 100 + "%";
+      node.style.top = rect.y * 100 + "%";
+      node.style.width = rect.w * 100 + "%";
+      node.style.height = rect.h * 100 + "%";
+      slots.appendChild(node);
     }
-    handle.addEventListener("pointerup", end);
-    handle.addEventListener("pointercancel", function (e) {
-      if (st && st.pointerId === e.pointerId) st = null;
+    (layout.placeholders || []).forEach(function (ph) {
+      var box = el("div", "plan-stage-slot");
+      if (ph.label) box.appendChild(el("span", "plan-stage-slot-label", "")).textContent = ph.label;
+      place(box, ph);
     });
+    (layout.contentAreas || []).forEach(function (area) {
+      place(el("div", "plan-stage-zone"), area);
+    });
+    return slots;
   }
 
-  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 draftNote() {
+    var note = el("div", "plan-storyboard-draft-note");
+    note.innerHTML =
+      ICONS.ruler +
+      "<p><strong>Draft plan.</strong> The finished slides follow your corporate design.</p>";
+    return note;
   }
 
-  // Layout picker: current choice (chrome thumbnail + name) plus a dropdown of
-  // the bundle's layouts (CFG.layouts; empty → read-only). Used per slide in
-  // the details aside and once for the deck-level knob; `opts.onPick` owns the
-  // commit. All labels/names go through textContent — bundle strings never
-  // reach innerHTML.
-  // One short line per option instead of the codegen's geometry dump: the
-  // count is what a human picks on; the exact rectangles are drawn on the
-  // storyboard frame once the layout is chosen.
   function contentAreaSummary(option) {
     var n = option.contentAreas ? option.contentAreas.length : 0;
     if (!n && option.canvas) n = (option.canvas.match(/(?:^|;)\s*\d+\./g) || []).length || 1;
     if (!n) return "Chrome only";
     return n === 1 ? "1 content area" : n + " content areas";
   }
+  function usesSummary(option) {
+    var u = option.selection;
+    if (!u) return "";
+    if (u.currentCount) return u.currentCount + " uses in this presentation";
+    if (u.usage && u.usage.count) return u.usage.count + " observed uses";
+    return "";
+  }
 
+  // ---------- the compact deck-level layout knob (rail head) ----------
+  // Dropdown of the bundle's layouts: one pick binds EVERY body board's
+  // `layout` in one commit; a mixed deck reads "Mixed". Read-only without a
+  // bundle. Bundle strings only ever reach textContent.
   function renderLayoutPicker(value, opts) {
-    var options = Array.isArray(CFG.layouts) ? CFG.layouts : [];
-    if (opts.bodyOnly) options = options.filter(function(o) { return o.canvasBounds || o.contentAreas?.length; });
+    var options = layoutOptions();
+    if (opts.bodyOnly) options = options.filter(function (o) { return o.canvasBounds || (o.contentAreas && o.contentAreas.length); });
     var root = el("div", "plan-storyboard-layout-picker" + (opts.className ? " " + opts.className : ""));
-    var selected = null;
-    for (var i = 0; i < options.length; i++) {
-      if (options[i].componentName === value) selected = options[i];
-    }
+    var selected = findLayout(value);
     var canPick = !locked() && options.length > 0;
 
     var current = document.createElement("button");
@@ -1623,51 +1535,37 @@
       thumb.className = "plan-storyboard-layout-thumb";
       thumb.src = selected.previewUrl;
       thumb.alt = "";
-      thumb.setAttribute("aria-hidden", "true");
       current.appendChild(thumb);
     }
     var nameSpan = el("span", "plan-storyboard-layout-name");
     nameSpan.textContent = (selected && selected.nativeLayoutName) || value || opts.placeholder || "No layout chosen";
     current.appendChild(nameSpan);
-    if (value && options.length > 0 && !selected) {
-      var badge = el("span", "plan-storyboard-layout-unknown");
-      badge.textContent = "Not in this brand";
-      current.appendChild(badge);
-    }
     if (canPick) {
-      var chevron = el("span", "plan-storyboard-layout-chevron", "\u25BE");
+      var chevron = el("span", "plan-storyboard-layout-chevron", CHEVRON);
       chevron.setAttribute("aria-hidden", "true");
       current.appendChild(chevron);
     }
     root.appendChild(current);
-
     if (!canPick) return root;
 
     var menu = null;
     function closeMenu() {
-      if (menu) {
-        menu.remove();
-        menu = null;
-        document.removeEventListener("pointerdown", onOutside);
-      }
+      if (!menu) return;
+      menu.remove();
+      menu = null;
+      document.removeEventListener("pointerdown", onOutside);
     }
     function onOutside(e) {
       if (!root.contains(e.target)) closeMenu();
     }
     current.addEventListener("click", function () {
-      if (menu) {
-        closeMenu();
-        return;
-      }
+      if (menu) return closeMenu();
       menu = el("div", "plan-storyboard-layout-menu");
       menu.setAttribute("role", "listbox");
       options.forEach(function (option) {
         var btn = document.createElement("button");
         btn.type = "button";
-        btn.className =
-          option.componentName === value
-            ? "plan-storyboard-layout-option plan-storyboard-layout-option--selected"
-            : "plan-storyboard-layout-option";
+        btn.className = "plan-storyboard-layout-option" + (option.componentName === value ? " plan-storyboard-layout-option--selected" : "");
         btn.setAttribute("role", "option");
         btn.setAttribute("aria-selected", option.componentName === value ? "true" : "false");
         if (option.previewUrl) {
@@ -1675,23 +1573,14 @@
           t.className = "plan-storyboard-layout-thumb plan-storyboard-layout-thumb--option";
           t.src = option.previewUrl;
           t.alt = "";
-          t.setAttribute("aria-hidden", "true");
           btn.appendChild(t);
         }
         var text = el("span", "plan-storyboard-layout-option-text");
         var n = el("span", "plan-storyboard-layout-name");
         n.textContent = option.nativeLayoutName || option.componentName;
-        if (options.filter(function (other) { return other.nativeLayoutName === option.nativeLayoutName; }).length > 1 && option.selection?.masterName) n.textContent += " · " + option.selection.masterName;
-        if (option.selection) n.title = option.selection.masterName || "";
         text.appendChild(n);
-        if (option.purpose) {
-          var p = el("span", "plan-storyboard-layout-purpose");
-          p.textContent = option.purpose;
-          text.appendChild(p);
-        }
         var c = el("span", "plan-storyboard-layout-canvas");
-        c.textContent = contentAreaSummary(option);
-        if (option.selection) { var u = option.selection; c.textContent += u.currentCount ? " · " + u.currentCount + " uses in this presentation" : u.usage.count ? " · " + u.usage.count + " observed uses" : ""; }
+        c.textContent = [contentAreaSummary(option), usesSummary(option)].filter(Boolean).join(" · ");
         text.appendChild(c);
         btn.appendChild(text);
         btn.addEventListener("click", function () {
@@ -1706,356 +1595,360 @@
     return root;
   }
 
-  // Deck-level layout knob: the one layout every board shares (or "Mixed"); a
-  // pick binds EVERY storyboard's `layout` in one commit.
+  // ---------- the header's deck-wide choices: the design, then the body slides' layout ----------
+  function renderBarTools(storyboardData) {
+    if (!barTools) return;
+    barTools.textContent = "";
+    var designPicker = renderDesignPicker();
+    if (designPicker) barTools.appendChild(barTool("Design", designPicker));
+    barTools.appendChild(barTool("Slide Layouts", renderDeckLayoutKnob(storyboardData)));
+  }
+  function barTool(label, control) {
+    var group = el("div", "sm-bar-tool");
+    group.appendChild(el("span", "sm-bar-tool-label", "")).textContent = label;
+    group.appendChild(control);
+    return group;
+  }
   function renderDeckLayoutKnob(storyboardData) {
-    var wrap = el("div", "plan-storyline-deck-layout");
-    wrap.appendChild(el("span", "plan-storyline-deck-layout-label", "Body defaults"));
     var seen = {};
     var distinct = 0;
     for (var i = 0; i < storyboardData.length; i++) {
+      if (storyboardData[i].role === "frame") continue;
       var name = storyboardData[i].layout || "";
       if (!seen[name]) {
         seen[name] = true;
         distinct++;
       }
     }
-    var common = distinct === 1 && storyboardData[0] ? storyboardData[0].layout : undefined;
-    wrap.appendChild(
-      renderLayoutPicker(common || undefined, {
-        placeholder: distinct > 1 ? "Mixed" : undefined,
-        ariaLabel: "Set the default for compatible body slides",
-        bodyOnly: true,
-        onPick: function (componentName) {
-          commitPlan(PLAN.setStoryboardLayoutForAll(S.value, componentName, CFG.layouts || []));
-        },
-      }),
-    );
-    if ((CFG.layouts || []).some(function(o) { return o.selection?.counterpartKey; })) {
-      ["light", "dark"].forEach(function(tone) {
-        var button = el("button", "plan-storyboard-layout-current", tone === "dark" ? "Dark variants" : "Light variants");
-        button.type = "button";
-        button.addEventListener("click", function() { commitPlan(PLAN.setStoryboardStyle(S.value, tone, CFG.layouts || [])); });
-        wrap.appendChild(button);
-      });
-    }
-    return wrap;
-  }
-
-  function renderDetails(data, segment) {
-    var aside = el("aside", "plan-storyboard-detail");
-    var roleSelect = document.createElement("select");
-    roleSelect.setAttribute("aria-label", "Slide role");
-    ["body", "cover", "agenda", "divider", "closing"].forEach(function(role) {
-      var option = document.createElement("option"); option.value = role; option.textContent = role;
-      option.selected = role === (data.role === "frame" ? data.frameKind : "body"); roleSelect.appendChild(option);
-    });
-    roleSelect.addEventListener("change", function() { var d = Object.assign({}, data);
-      d.role = roleSelect.value === "body" ? "body" : "frame";
-      d.frameKind = d.role === "frame" ? roleSelect.value : undefined;
-      commitStoryboard(segment, d);
+    var common = distinct === 1 ? Object.keys(seen)[0] : undefined;
+    return renderLayoutPicker(common || undefined, {
+      placeholder: distinct > 1 ? "Mixed layouts" : undefined,
+      ariaLabel: "Set the layout for every body slide",
+      bodyOnly: true,
+      onPick: function (componentName) {
+        commitPlan(PLAN.setStoryboardLayoutForAll(S.value, componentName, layoutOptions()));
+      },
     });
-    aside.appendChild(roleSelect);
-    if (data.layoutReason) aside.appendChild(el("div", "plan-storyboard-layout-purpose", data.layoutReason));
-    aside.appendChild(el("div", "plan-storyboard-detail-label", "Layout"));
-    aside.appendChild(
-      renderLayoutPicker(data.layout, {
-        onPick: function (componentName) {
-          var d = {};
-          for (var k in data) d[k] = data[k];
-          d.layout = componentName;
-          d.layoutSelection = "explicit";
-          d.layoutKey = (CFG.layouts || []).find(function(o) { return o.componentName === componentName; })?.layoutKey;
-          delete d.layoutReason;
-          commitStoryboard(segment, d);
-        },
-      }),
-    );
-    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;
   }
 
-  // The planned layout, when the storyboard names one the bundle has: its
-  // chrome render grounds the frame and its canvas rect draws the content/
-  // no-go zones. Absent both, the generic hatched bands render as before.
-  function selectedPlanLayout(data) {
-    var options = Array.isArray(CFG.layouts) ? CFG.layouts : [];
-    if (!data.layout) return null;
-    for (var i = 0; i < options.length; i++) {
-      if (options[i].componentName === data.layout) return options[i];
+  // ---------- a dropdown menu (the comment target, the design picker) ----------
+  // Drawn here rather than a native <select>, whose open list is the system's
+  // own — white on this dark page. Opens on click (or an arrow key), closes on
+  // a pick, an outside press, Tab or Escape; the arrow keys walk the options.
+  // `render(node, item, selected)` fills an option; strings reach textContent.
+  var CHEVRON = '<svg viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  function attachMenu(root, trigger, spec) {
+    var menu = null;
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    function options() {
+      return menu ? Array.prototype.slice.call(menu.querySelectorAll('[role="option"]')) : [];
     }
-    return null;
-  }
-
-  function pctOf(v) {
-    return (v * 100).toFixed(2) + "%";
-  }
-
-  function renderZoneOverlay(zone, areas) {
-    var zones = el("div", "plan-storyboard-zones");
-    zones.setAttribute("aria-hidden", "true");
-    function wash(style) {
-      var d = el("div", "plan-storyboard-zone-wash");
-      for (var k in style) d.style[k] = style[k];
-      zones.appendChild(d);
+    function close(refocus) {
+      if (!menu) return;
+      menu.remove();
+      menu = null;
+      trigger.setAttribute("aria-expanded", "false");
+      document.removeEventListener("pointerdown", onOutside, true);
+      if (refocus) trigger.focus();
     }
-    wash({ left: "0", top: "0", right: "0", height: pctOf(zone.y) });
-    wash({ left: "0", top: pctOf(zone.y + zone.h), right: "0", bottom: "0" });
-    wash({ left: "0", top: pctOf(zone.y), width: pctOf(zone.x), height: pctOf(zone.h) });
-    wash({
-      left: pctOf(zone.x + zone.w),
-      top: pctOf(zone.y),
-      right: "0",
-      height: pctOf(zone.h),
-    });
-    // One rectangle per writable area; the washes above cover the union bbox
-    // and the gutters between areas stay unmarked on purpose.
-    for (var i = 0; i < areas.length; i++) {
-      var area = areas[i];
-      var rect = el("div", "plan-storyboard-zone-canvas");
-      rect.style.left = pctOf(area.x);
-      rect.style.top = pctOf(area.y);
-      rect.style.width = pctOf(area.w);
-      rect.style.height = pctOf(area.h);
-      var chip = el("span", "plan-storyboard-zone-label");
-      chip.textContent = areas.length > 1 ? "Content area " + (i + 1) : "Content area";
-      rect.appendChild(chip);
-      zones.appendChild(rect);
+    function onOutside(e) {
+      if (!root.contains(e.target)) close(false);
     }
-    return zones;
-  }
-
-  // Per-image-slot prompt fields drawn INSIDE the bound layout's image
-  // placeholders. The value lives structurally in `imagePrompts` (keyed by the
-  // slot's codegen prop name); a populated prompt is binding guidance for the
-  // downstream image search/generation, empty = the AI decides. Own layer
-  // after the blocks (paint order = DOM order), click-through except the fields.
-  function renderImagePrompts(segment, data, slots) {
-    var layer = el("div", "plan-storyboard-image-layer");
-    slots.forEach(function (slot) {
-      var value = (data.imagePrompts && data.imagePrompts[slot.key]) || "";
-      var box = el("div", "plan-storyboard-image-slot" + (value.trim() ? " plan-storyboard-image-slot--filled" : ""));
-      box.style.left = pctOf(slot.x);
-      box.style.top = pctOf(slot.y);
-      box.style.width = pctOf(slot.w);
-      box.style.height = pctOf(slot.h);
-      box.appendChild(el("span", "plan-storyboard-image-caption", "Image idea"));
-      var input = document.createElement("textarea");
-      input.className = "plan-storyboard-image-input";
-      input.value = value;
-      input.maxLength = PLAN.MAX_IMAGE_PROMPT_LENGTH;
-      input.placeholder = "Describe the image for this slot — leave empty to let the AI decide";
-      input.disabled = locked();
-      input.setAttribute("aria-label", "Image idea " + slot.key);
-      input.addEventListener("blur", function () {
-        var trimmed = input.value.trim().slice(0, PLAN.MAX_IMAGE_PROMPT_LENGTH);
-        if (trimmed === value.trim()) return;
-        var next = {};
-        for (var k in data.imagePrompts || {}) next[k] = data.imagePrompts[k];
-        if (trimmed) next[slot.key] = trimmed;
-        else delete next[slot.key];
-        var rest = {};
-        for (var k2 in data) if (k2 !== "imagePrompts") rest[k2] = data[k2];
-        if (Object.keys(next).length) rest.imagePrompts = next;
-        commitStoryboard(segment, rest);
+    function open() {
+      menu = el("div", spec.menuClass);
+      menu.setAttribute("role", "listbox");
+      spec.items.forEach(function (item) {
+        var selected = !!spec.isSelected(item);
+        var btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = spec.optionClass + (selected ? " is-selected" : "");
+        btn.setAttribute("role", "option");
+        btn.setAttribute("aria-selected", selected ? "true" : "false");
+        spec.render(btn, item, selected);
+        btn.addEventListener("click", function () {
+          close(true);
+          spec.onPick(item);
+        });
+        menu.appendChild(btn);
       });
-      box.appendChild(input);
-      layer.appendChild(box);
+      root.appendChild(menu);
+      trigger.setAttribute("aria-expanded", "true");
+      document.addEventListener("pointerdown", onOutside, true);
+      var all = options();
+      var first = menu.querySelector('[aria-selected="true"]') || all[0];
+      if (first) first.focus();
+    }
+    trigger.addEventListener("click", function () {
+      if (menu) close(true);
+      else open();
+    });
+    root.addEventListener("keydown", function (e) {
+      if (!menu) {
+        if (e.target === trigger && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+          e.preventDefault();
+          open();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        close(true);
+      } else if (e.key === "Tab") {
+        close(false);
+      } else if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
+        e.preventDefault();
+        var all = options();
+        var at = all.indexOf(document.activeElement);
+        var next = e.key === "Home" ? 0 : e.key === "End" ? all.length - 1 : e.key === "ArrowDown" ? Math.min(at + 1, all.length - 1) : Math.max(at - 1, 0);
+        if (all[next]) all[next].focus();
+      }
     });
-    return layer;
   }
 
-  function renderCanvas(segment) {
-    var data = segment.data;
-    var figure = el("figure", "plan-storyboard");
-    var selected = selectedPlanLayout(data);
-    var chromeUrl = selected && selected.previewUrl ? selected.previewUrl : null;
-    var zone = selected && selected.canvasBounds ? selected.canvasBounds : null;
-    var areas = selected && selected.contentAreas && selected.contentAreas.length ? selected.contentAreas : zone ? [zone] : [];
-    // A known layout WITHOUT a canvas has no plannable region — wash the whole
-    // frame + notice instead of presenting the generic guides as its zone.
-    var noCanvas = Boolean(selected) && !zone;
-    var showBands = !selected && !chromeUrl;
-
-    var addBtn = null;
-    if (!locked()) {
-      addBtn = el("button", "plan-storyboard-add", ICONS.plus + "<span>Add container</span>");
-      addBtn.type = "button";
-      addBtn.title = "Add container";
-      addBtn.setAttribute("aria-label", "Add container");
-      addBtn.disabled = data.blocks.length >= PLAN.MAX_BLOCKS;
-    }
-
-    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"));
-    if (!showBands && addBtn) legend.appendChild(addBtn);
-    header.appendChild(legend);
-    figure.appendChild(header);
-
-    var layout = el("div", "plan-storyboard-layout");
-    var frame = el(
-      "div",
-      chromeUrl
-        ? "plan-storyboard-frame plan-storyboard-frame--chrome slide-emboss"
-        : "plan-storyboard-frame slide-emboss",
-    );
-    if (chromeUrl) {
-      var chromeImg = document.createElement("img");
-      chromeImg.className = "plan-storyboard-chrome";
-      chromeImg.src = chromeUrl;
-      chromeImg.alt = "";
-      chromeImg.setAttribute("aria-hidden", "true");
-      frame.appendChild(chromeImg);
-    }
-    // Abstract guides grid ONLY without a template: once the real layout
-    // render is the ground, its own artwork is the guide.
-    if (showBands) {
-      var grid = el("div", "plan-storyboard-body");
-      grid.setAttribute("aria-hidden", "true");
-      frame.appendChild(grid);
+  // ---------- the design picker (rail head, above the layout default) ----------
+  // Every design cached on this machine, each shown as its name and accent
+  // colours. A pick swaps the layout palette and moves every slide whose layout
+  // the new design lacks onto its nearest equivalent (remapStoryboardLayouts);
+  // the deck is rebound only when the answer is sent. Bundle strings reach
+  // textContent only, and a colour must be a plain hex to reach a style.
+  function designSwatches(design) {
+    var dots = el("span", "plan-design-dots");
+    dots.setAttribute("aria-hidden", "true");
+    (design.accents || []).forEach(function (hex) {
+      if (!/^#[0-9a-f]{6}$/i.test(String(hex))) return;
+      var dot = el("i", "plan-design-dot");
+      dot.style.background = hex;
+      dots.appendChild(dot);
+    });
+    return dots;
+  }
+  function designLabel(node, design) {
+    var name = el("span", "plan-design-name");
+    name.textContent = design ? design.name : "Choose a design";
+    node.appendChild(name);
+    if (design && design.cached === false) node.appendChild(el("span", "plan-design-get", "")).textContent = "Download";
+    else if (design) node.appendChild(designSwatches(design));
+  }
+  // The design picker stays a dropdown while the plan can change — even when
+  // the one design on offer is already picked: the rest of the menu (every
+  // design a connected backend serves) loads after the page does (loadDesigns),
+  // and a design this machine has not downloaded yet is fetched when picked
+  // (downloadDesign), then applied like any other.
+  var designPickerEl = null; // the picker on screen, swapped when its state changes
+  var designBusy = null; // the design being downloaded, null otherwise
+  var designsAsked = false; // the backend's part of the menu was asked for
+  function renderDesignPicker() {
+    var options = designOptions();
+    if (!options.length && !CFG.designsUrl) return null;
+    var shown = shownDesign();
+    var canPick = !locked() && !designBusy;
+    var root = el("div", "plan-design-picker");
+    var current = document.createElement("button");
+    current.type = "button";
+    current.className = "plan-design-current" + (designBusy ? " is-busy" : "");
+    current.setAttribute("aria-label", "Choose the deck's design");
+    current.disabled = !canPick;
+    if (designBusy) current.appendChild(el("span", "plan-design-name", "")).textContent = "Downloading " + designBusy.name + "…";
+    else designLabel(current, shown);
+    if (canPick) {
+      var chevron = el("span", "plan-storyboard-layout-chevron", CHEVRON);
+      chevron.setAttribute("aria-hidden", "true");
+      current.appendChild(chevron);
     }
-    // Placeholder outlines go UNDER the washes: template ground, muted by the
-    // no-go wash instead of competing with the sketch as another line system.
-    if (selected && Array.isArray(selected.placeholders) && selected.placeholders.length) {
-      var phLayer = el("div", "plan-storyboard-zones");
-      phLayer.setAttribute("aria-hidden", "true");
-      selected.placeholders.forEach(function (ph) {
-        var box = el("div", "plan-storyboard-ph");
-        box.style.left = pctOf(ph.x);
-        box.style.top = pctOf(ph.y);
-        box.style.width = pctOf(ph.w);
-        box.style.height = pctOf(ph.h);
-        if (ph.label) {
-          var chip = el("span", "plan-storyboard-ph-label");
-          chip.textContent = ph.label;
-          box.appendChild(chip);
+    root.appendChild(current);
+    designPickerEl = root;
+    if (!canPick) return root;
+    attachMenu(root, current, {
+      menuClass: "plan-design-menu",
+      optionClass: "plan-design-option",
+      items: options, // read when the menu opens: designs that arrive later are in it
+      isSelected: function (design) {
+        return design === shown;
+      },
+      render: function (node, design) {
+        designLabel(node, design);
+        // not on this computer yet: a quieter, smaller row under a divider
+        if (design.cached === false) {
+          node.classList.add("is-remote");
+          var first = null;
+          for (var i = 0; i < options.length; i++) {
+            if (options[i].cached === false) {
+              first = options[i];
+              break;
+            }
+          }
+          if (design === first) node.classList.add("is-first-remote");
         }
-        phLayer.appendChild(box);
+      },
+      onPick: function (design) {
+        if (design.cached === false) downloadDesign(design);
+        else pickDesign(design.presFP);
+      },
+    });
+    return root;
+  }
+  function refreshDesignPicker() {
+    var old = designPickerEl;
+    if (!old || !old.parentNode) return;
+    var next = renderDesignPicker();
+    if (next) old.parentNode.replaceChild(next, old);
+  }
+  // Once per page: the designs a connected backend serves that this machine has
+  // not downloaded. A backend that does not answer leaves the menu as it is.
+  function loadDesigns() {
+    if (!CFG.designsUrl || designsAsked) return;
+    designsAsked = true;
+    if (!Array.isArray(CFG.designs)) CFG.designs = [];
+    fetch(CFG.designsUrl, { credentials: "same-origin" })
+      .then(function (r) {
+        return r.ok ? r.json() : null;
+      })
+      .then(function (j) {
+        if (!j || !Array.isArray(j.designs)) return;
+        var all = designOptions();
+        var have = {};
+        all.forEach(function (d) {
+          have[d.presFP] = true;
+        });
+        var added = 0;
+        j.designs.forEach(function (d) {
+          if (d && typeof d.presFP === "string" && typeof d.name === "string" && !have[d.presFP]) {
+            all.push({ presFP: d.presFP, name: d.name, accents: [], current: false, cached: false });
+            added++;
+          }
+        });
+        if (!added) return;
+        // what this machine has first, what would still have to be downloaded last
+        all.sort(function (a, b) {
+          var ra = a.cached === false ? 1 : 0;
+          var rb = b.cached === false ? 1 : 0;
+          return ra - rb || String(a.name).localeCompare(String(b.name));
+        });
+        refreshDesignPicker();
+      })
+      .catch(function () {
+        /* the menu stays at what this machine has */
       });
-      frame.appendChild(phLayer);
-    }
-    if (zone) frame.appendChild(renderZoneOverlay(zone, areas));
-
-    var top = el("div", "plan-storyboard-reserved plan-storyboard-reserved-top");
-    top.appendChild(document.createTextNode("Template header/title area not planned here"));
-    if (addBtn) {
-      var add = addBtn;
-      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;
+  }
+  // A picked design this machine does not have yet: the workspace downloads it
+  // (POST, carrying the gate token like the answer does), and its entry —
+  // palette, layouts — replaces the bare one before it is applied.
+  function downloadDesign(design) {
+    if (designBusy || locked() || !CFG.designsUrl) return;
+    designBusy = design;
+    SHELL.clearNotice("design");
+    refreshDesignPicker();
+    var url = CFG.designsUrl + "/" + encodeURIComponent(design.presFP) + "?t=" + encodeURIComponent(CFG.designsGate || "");
+    fetch(url, { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: "{}" })
+      .then(function (r) {
+        return r
+          .json()
+          .catch(function () {
+            return null;
           })
-        )
-          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));
+          .then(function (j) {
+            return r.ok && j && j.design && j.design.presFP === design.presFP ? j.design : null;
+          });
+      })
+      .then(function (fresh) {
+        designBusy = null;
+        if (!fresh) throw new Error("no design");
+        var all = designOptions();
+        for (var i = 0; i < all.length; i++) if (all[i].presFP === fresh.presFP) all[i] = fresh;
+        pickDesign(fresh.presFP); // re-renders the surface, this picker with it
+        refreshDesignPicker(); // …or not, when the pick changed nothing
+      })
+      .catch(function () {
+        designBusy = null;
+        refreshDesignPicker();
+        SHELL.showNotice("design", { tone: "warn", title: "That design could not be downloaded", text: "Check your connection, then pick it again.", dismiss: true });
       });
-      if (showBands) top.appendChild(add);
+  }
+  function pickDesign(presFP) {
+    if (locked()) return;
+    var target = null;
+    designOptions().forEach(function (d) {
+      if (d.presFP === presFP) target = d;
+    });
+    if (!target || target === shownDesign()) return;
+    if (!designUndo || S.value !== designUndo.after) designUndo = { before: S.value, from: layoutOptions() };
+    S.design = target.current ? null : presFP;
+    var next = PLAN.remapStoryboardLayouts(designUndo.before, layoutOptions(), designUndo.from);
+    designUndo.after = next;
+    if (next === S.value) {
+      saveEdits(); // the layouts all exist in both designs: only the pick changed
+      refreshChrome();
+      renderSurface();
+    } else {
+      commitPlan(next);
     }
-    if (showBands) frame.appendChild(top);
-
+  }
 
-    var canRemove = !locked() && data.blocks.length > 1;
-    data.blocks.forEach(function (block) {
-      frame.appendChild(renderBlock(frame, block, data, segment, canRemove));
-    });
+  function commitPlan(nextValue) {
+    if (locked()) return;
+    S.value = nextValue;
+    saveEdits();
+    refreshChrome();
+    renderSurface();
+  }
+  function commitStoryboard(segment, nextData) {
+    commitPlan(PLAN.replaceStoryboardSegment(S.value, segment, nextData));
+  }
 
-    if (showBands) {
-      var bottom = el("div", "plan-storyboard-reserved plan-storyboard-reserved-bottom", "Footer/template area not planned here");
-      frame.appendChild(bottom);
+  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;
     }
-    var imageSlots = selected && Array.isArray(selected.placeholders)
-      ? selected.placeholders.filter(function (ph) { return typeof ph.key === "string"; })
-      : [];
-    if (imageSlots.length) frame.appendChild(renderImagePrompts(segment, data, imageSlots));
-    if (noCanvas) {
-      // Own top layer, click-through: the warning must never hide behind blocks.
-      var noticeLayer = el("div", "plan-storyboard-zone-notice-layer");
-      noticeLayer.setAttribute("aria-hidden", "true");
-      var notice = el("span", "plan-storyboard-zone-notice");
-      notice.textContent =
-        "No content area on this layout — pick a layout with a content body";
-      noticeLayer.appendChild(notice);
-      frame.appendChild(noticeLayer);
+    // 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);
     }
-
-    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);
+    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();
       });
-      figure.appendChild(ul);
     }
-    return figure;
+    return field;
+  }
+
+  // The planned layout, when the record names one the bundle has: its chrome
+  // render grounds the stage and its content region places the slide card.
+  function selectedPlanLayout(data) {
+    var options = layoutOptions();
+    if (!data.layout) return null;
+    for (var i = 0; i < options.length; i++) {
+      if (options[i].componentName === data.layout) return options[i];
+    }
+    return null;
+  }
+
+  function pctOf(v) {
+    return (v * 100).toFixed(2) + "%";
   }
 
   // ---------- comment ledger ----------
   // The anchor a comment written right now would carry. "This slide" reads the
-  // SELECTED strip tab; without a storyboard strip there is nothing to anchor
-  // to, so everything is whole-story.
+  // SELECTED rail card; without storyboards there is nothing to anchor to, so
+  // everything is whole-story.
   function currentAnchor() {
     var beats = planBeats();
     if (!beats.length || commentScope !== "slide") {
@@ -2071,7 +1964,7 @@
       return "c-" + Date.now() + "-" + Math.random().toString(16).slice(2);
     }
   }
-  function newComment(text, forceScope) {
+  function newComment(text, forceScope, status) {
     var a = forceScope === "story" ? { scope: "story", slideIndex: null, slideHeading: null } : currentAnchor();
     return {
       id: newId(),
@@ -2081,74 +1974,93 @@
       slideHeading: a.slideHeading,
       text: text,
       at: new Date().toISOString(),
-      status: "sent",
+      status: status || "sent",
     };
   }
+  // Comments queue up as drafts (Enter); ONE send carries the batch — the
+  // reviewer reads the whole plan, notes everything, then answers once (every
+  // answer is one paste to the agent, so one batch is one round trip).
+  function draftComments() {
+    return ledger.filter(function (c) {
+      return c.status === "draft";
+    });
+  }
+  function addDraft() {
+    if (working) return;
+    var typed = commentText();
+    if (!typed) return;
+    ledger.push(newComment(typed, null, "draft"));
+    feedbackText = "";
+    if (commentEl) commentEl.value = "";
+    saveLedger();
+    saveCtx();
+    renderComposer();
+    if (commentEl) commentEl.focus();
+  }
+  function deleteDraft(c) {
+    var i = ledger.indexOf(c);
+    if (i >= 0) ledger.splice(i, 1);
+    saveLedger();
+    renderComposer();
+  }
   function anchorLabel(c) {
     if (c.scope !== "slide") return "Whole story";
     return "Slide " + (c.slideIndex == null ? "?" : c.slideIndex);
   }
-  function statusLabel(c) {
-    return SES.statusLabel(c);
-  }
-  // The rail: every comment of this session, newest last, with its anchor and
-  // where it stands. This is what replaced the single "previous round" note —
-  // it survives rounds and shows every comment the reviewer sent.
-  function ledgerRail() {
-    var rail = el("div", "sm-ledger");
-    ledger.forEach(function (c) {
-      var row = el("div", "sm-ledger-row");
-      row.appendChild(el("span", "sm-ledger-anchor", anchorLabel(c)));
-      var txt = el("span", "sm-ledger-text");
-      txt.textContent = c.text;
-      row.appendChild(txt);
-      var chip = el("span", "sm-ledger-status");
-      chip.setAttribute("data-state", c.status);
-      chip.textContent = statusLabel(c);
-      row.appendChild(chip);
-      rail.appendChild(row);
+  // The comments not sent yet — the only ones the composer shows. Sent and
+  // worked-in comments stay in the ledger (the next round marks them) but not
+  // on screen: what the reviewer needs here is what this answer will carry.
+  function draftList(drafts) {
+    var list = el("ul", "sm-drafts");
+    drafts.forEach(function (c) {
+      var row = el("li", "sm-draft");
+      row.appendChild(el("span", "sm-draft-anchor", "")).textContent = anchorLabel(c);
+      var text = row.appendChild(el("span", "sm-draft-text", ""));
+      text.textContent = c.text;
+      text.title = c.text;
+      if (!SHELL.inFlight(c.id)) {
+        var del = el("button", "sm-draft-del", ICONS.close);
+        del.type = "button";
+        del.title = "Remove this comment";
+        del.setAttribute("aria-label", "Remove this comment");
+        del.onclick = function () {
+          deleteDraft(c);
+        };
+        row.appendChild(del);
+      }
+      list.appendChild(row);
     });
-    return rail;
-  }
-
-  // ---------- chat composer bar ----------
-  // Rebuilt on structural state changes (a storyline draft staged / discarded,
-  // a mode or selection change), NOT on every keystroke (keystrokes only call
-  // refreshChrome). The typed feedback survives a rebuild via feedbackText.
+    return list;
+  }
+
+  // ---------- the composer ----------
+  // One row: what the comment is about, the comment, Send (only once there is
+  // something to send) and Approve (off while there is). Rebuilt on structural
+  // changes (a draft added / removed, a storyline staged, the selected slide),
+  // NOT on every keystroke (keystrokes only call refreshChrome); the typed text
+  // survives a rebuild via feedbackText.
+  //
+  // While the agent has the next move (WORKING) the composer is gone: the
+  // answer is saved, the hand-off dialog said what to do with it, and the bar's
+  // hint says commenting opens again — nothing to type into, nothing greyed out.
   function renderComposer() {
     if (!composerEl) return;
     composerEl.innerHTML = "";
-
+    composerEl.hidden = working;
     if (working) {
-      var status = el("div", "sm-wait");
-      status.appendChild(el("div", "sm-spin"));
-      var note = el("div");
-      note.innerHTML =
-        "<b>" +
-        (workingNote || "Comments sent.") +
-        "</b> The agent is revising the plan — this tab refreshes when the next " +
-        "round is ready. Keep reading and navigating; comment again on that round.";
-      status.appendChild(note);
-      composerEl.appendChild(status);
-      // The permission prompt was raised at the send click (a user gesture, the
-      // only context a browser shows it in); once granted, say so.
-      (notifyPermPromise || Promise.resolve(SES.notifyPermission())).then(function (perm) {
-        if (perm === "granted") {
-          note.innerHTML += " You'll get a notification when the next round needs you.";
-        }
-      });
+      commentEl = sendBtn = approveBtn = null;
+      refreshChrome();
+      return;
     }
 
-    if (!working && S.storyDraft) {
+    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>';
+      banner.innerHTML = ICONS.sparkles + '<span class="txt"><b>Storyline changed.</b> Send it and your agent fills in the new and renamed slides.</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
+        saveEdits();
         refreshChrome();
         renderComposer();
         renderSurface();
@@ -2157,88 +2069,92 @@
       composerEl.appendChild(banner);
     }
 
-    if (ledger.length) composerEl.appendChild(ledgerRail());
+    var drafts = draftComments();
+    if (drafts.length) composerEl.appendChild(draftList(drafts));
+
+    var row = el("div", "sm-composer-row");
+    var box = el("div", "sm-chat-box");
 
-    // Scope control — "This slide" reads the selected strip tab. Hidden when
-    // there is no strip to anchor to (plain-markdown plans).
+    // What the comment is about: the slide on stage, or the whole story. A plan
+    // with no slides to anchor to is whole-story only, and shows no choice.
     var beats = planBeats();
     if (!beats.length) commentScope = "story";
     if (beats.length) {
-      var meta = el("div", "sm-composer-meta");
-      meta.appendChild(el("span", "sm-scope-label", "Comment on"));
-      var scopeBox = el("div", "sm-scope");
       var active = clamp(S.selectedIndex, 0, beats.length - 1);
-      [
-        { key: "slide", label: "Slide " + beats[active].slide },
-        { key: "story", label: "Whole story" },
-      ].forEach(function (opt) {
-        var b = el("button", "sm-scope-btn" + (commentScope === opt.key ? " is-on" : ""), opt.label);
-        b.type = "button";
-        b.onclick = function () {
-          commentScope = opt.key;
-          renderComposer();
+      var targets = [
+        { key: "slide", label: "Slide " + beats[active].slide, detail: beats[active].message },
+        { key: "story", label: "Whole story", detail: "The storyline as a whole" },
+      ];
+      var wrap = el("div", "sm-target-wrap");
+      var target = el("button", "sm-target");
+      target.type = "button";
+      target.setAttribute("aria-label", "What your comment is about");
+      target.title = "What your comment is about";
+      var targetLabel = el("span", "sm-target-label");
+      targetLabel.textContent = targets[commentScope === "story" ? 1 : 0].label;
+      target.appendChild(targetLabel);
+      target.appendChild(el("span", "sm-target-chevron", CHEVRON));
+      wrap.appendChild(target);
+      attachMenu(wrap, target, {
+        menuClass: "sm-target-menu",
+        optionClass: "sm-target-option",
+        items: targets,
+        isSelected: function (t) {
+          return t.key === commentScope;
+        },
+        render: function (node, t, selected) {
+          var text = el("span", "sm-target-text");
+          text.appendChild(el("span", "sm-target-option-label")).textContent = t.label;
+          text.appendChild(el("span", "sm-target-option-detail")).textContent = t.detail;
+          node.appendChild(text);
+          node.appendChild(el("span", "sm-target-check", selected ? ICONS.check : ""));
+        },
+        onPick: function (t) {
+          commentScope = t.key;
+          targetLabel.textContent = t.label;
           if (commentEl) commentEl.focus();
-        };
-        scopeBox.appendChild(b);
+        },
       });
-      meta.appendChild(scopeBox);
-      composerEl.appendChild(meta);
+      box.appendChild(wrap);
     }
 
-    var row = el("div", "sm-composer-row");
     commentEl = el("textarea", "sm-chat-ta");
     commentEl.rows = 1;
-    commentEl.placeholder = working
-      ? "The agent is revising — comment on the next round."
-      : "What should change? Leave a note, or edit the plan directly.";
-    commentEl.disabled = working;
     commentEl.value = feedbackText;
+    commentEl.placeholder = drafts.length ? "Add another comment…" : "What should change? Press Enter to add it.";
+    commentEl.setAttribute("aria-label", "Your comment");
     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";
       saveDraftSoon(); // an unsent draft survives the next round's reload
       refreshChrome();
     });
     commentEl.addEventListener("keydown", function (e) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") requestChanges();
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") return requestChanges();
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        addDraft();
+      }
     });
-    row.appendChild(commentEl);
+    box.appendChild(commentEl);
+    row.appendChild(box);
 
-    if (!working && 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 = working ? "The agent is revising — send on the next round" : "Send feedback";
-      sendBtn.setAttribute("aria-label", sendBtn.title);
-      sendBtn.disabled = working;
-    }
+    sendBtn = el("button", "sm-send-pill", (S.storyDraft ? ICONS.sparkles : ICONS.send) + '<span class="n">Send</span>');
+    sendBtn.type = "button";
+    sendBtn.title = S.storyDraft ? "Send your storyline changes and comments" : "Send your comments (⌘/Ctrl+Enter)";
     sendBtn.onclick = requestChanges;
     row.appendChild(sendBtn);
 
-    row.appendChild(el("div", "sm-composer-sep"));
-
-    approveBtn = el("button", "sm-approve");
+    approveBtn = el("button", "sm-approve", ICONS.check + '<span class="n">Approve plan</span>');
     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 (working) return; // superseded round
+      if (SHELL.decisionPending()) return; // one answer at a time
+      if (SHELL.alreadyApproved()) return; // already approved and nobody asks again
+      if (SHELL.notAskedYet()) return; // the agent is still working on it
       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;
-      }
+      if (draftComments().length || commentText()) return; // comments go out or away first
       submit("approve");
     };
     row.appendChild(approveBtn);
@@ -2249,7 +2165,7 @@
 
   // ---------- working mode (the agent is revising) ----------
   // The tab neither veils over nor freezes: the plan stays readable and the
-  // strip stays navigable; the composer, the editing affordances and Approve go
+  // rail stays navigable; the composer, the editing affordances and Approve go
   // away until the next round. Heartbeat polling waits for the agent's next
   // `slidemind plan` round, which reloads this same tab.
   function enterWorking(note) {
@@ -2264,97 +2180,85 @@
   }
 
   // ---------- submit ----------
-  // Send: resolves the gate right now with the typed comment (plus a staged
+  // Send: resolves the gate right now with the listed comments (plus a staged
   // storyline restructure as a whole-story instruction). Off while WORKING.
   function requestChanges() {
     if (working) return;
-    var typed = commentText();
+    if (SHELL.decisionPending()) return; // the answer on its way carries no late additions
+    addDraft(); // whatever is still typed goes with the batch
+    var drafts = draftComments();
     var batch = [];
     if (S.storyDraft) {
       var staged = PLAN.stageStoryIteration(S.value, S.storyDraft);
       if (!staged) return;
       // A storyline restructure is a whole-story instruction by construction.
-      batch = batch.concat([
-        newComment(typed ? staged.feedback + "\n\n" + typed : staged.feedback, "story"),
-      ]);
+      batch = [newComment(staged.feedback, "story")].concat(drafts);
       pendingEdited = staged.editedPlanMarkdown;
     } else {
-      if (!typed) return;
-      batch = batch.concat([newComment(typed)]);
+      if (!drafts.length) return;
+      batch = drafts;
       pendingEdited = planWasEdited() ? S.value : null;
     }
     pendingComments = batch;
     // Ask for notification permission HERE — the click is a user gesture, the
-    // only context where the browser will actually show the prompt.
-    notifyPermPromise = SES.requestNotifyPermission();
+    // only context where the browser will actually show the prompt. Standalone
+    // only: in the workspace a permission prompt is friction on the click that
+    // copies the message, and nothing waits in the background there.
+    if (!CFG.embedded) SES.requestNotifyPermission();
     submit("comments");
   }
-  function clearDraft() {
-    feedbackText = "";
-    if (commentEl) commentEl.value = "";
-    saveCtx();
-  }
+  // One answer at a time (SHELL.decide holds the in-flight latch and carries
+  // the operationId + the plan version it answers). Nothing here changes until
+  // the server SAVED it: decided() below is the success path.
   function submit(decision) {
-    if (submitted) return;
-    submitted = true;
-    var payload = {
+    if (SHELL.decisionPending()) return;
+    SHELL.decide({
       decision: decision,
       comments: decision === "comments" ? pendingComments.map(SES.wire) : [],
       editedPlan: decision === "comments" ? pendingEdited : planWasEdited() ? S.value : null,
-    };
-    fetch(CFG.endpoint, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload),
-    })
-      .then(function (res) {
-        if (res.status === 409) {
-          // Another tab already decided this run — this round is stale. The
-          // typed text stays in the input (restored on the next round's reload)
-          // so it isn't lost; disarm the submit latch — leaving it armed made
-          // every later send a silent no-op. A staged story restructure is
-          // dropped deliberately: its editedPlanMarkdown was computed against
-          // the superseded plan and applying it to the next round would corrupt
-          // it (same call the add-in dialog makes on round arrival).
-          S.storyDraft = null;
-          submitted = false;
-          enterWorking("Round superseded.");
-          return;
-        }
-        if (!res.ok) throw new Error("gate refused the decision");
-        if (decision === "approve") {
-          showApproved();
-          return;
-        }
-        pendingComments.forEach(function (c) {
-          c.status = "sent";
-          if (ledger.indexOf(c) < 0) ledger.push(c);
-        });
-        saveLedger();
-        clearDraft();
-        // The staged restructure is now the agent's job — keeping it staged
-        // would show the reviewer a storyline the served plan no longer claims.
-        S.storyDraft = null;
-        enterWorking("Comments sent.");
-      })
-      .catch(function () {
-        submitted = false;
-        alert("Could not reach the slidemind plan server — is the terminal command still running?");
-      });
+      design: S.design,
+    });
+    refreshChrome();
   }
-  function requestTabClose() {
-    setTimeout(function () {
-      try {
-        window.open("", "_self");
-        window.close();
-      } catch {
-        // Some browsers only allow script-opened tabs to close themselves.
-      }
-    }, 120);
+  // The server saved the answer. The rows it carried are sent — read off the
+  // request itself, so an answer re-sent after a reload marks the right rows —
+  // and the edits that rode with it are the server's now.
+  function decided(decision, body) {
+    baseline = S.value;
+    if (S.design) {
+      // the server rebound the deck: the picked design is its own from here on
+      designOptions().forEach(function (d) {
+        if (d.current) d.layouts = boundLayouts;
+        d.current = d.presFP === S.design;
+        if (d.current) boundLayouts = d.layouts || [];
+      });
+      S.design = null;
+    }
+    designUndo = null;
+    SES.write(EDITS_KEY, null);
+    if (decision === "approve") {
+      showApproved();
+      return;
+    }
+    ((body && body.comments) || []).forEach(function (w) {
+      var row = null;
+      for (var i = 0; i < ledger.length; i++) if (ledger[i].id === w.id) row = ledger[i];
+      if (row) row.status = "sent";
+      else ledger.push(Object.assign({}, w, { status: "sent" })); // the generated story instruction
+    });
+    saveLedger();
+    // The staged restructure is now the agent's job — keeping it staged
+    // would show the reviewer a storyline the served plan no longer claims.
+    S.storyDraft = null;
+    enterWorking(CFG.embedded ? "Comments saved." : "Comments sent.");
   }
+
   // The shared heartbeat poll (gate-session.js) with this gate's two endings:
-  // a retired tab simply says where the review went.
+  // a retired tab simply says where the review went. Standalone only — in the
+  // workspace page the shell's monitor watches the round for the page's whole
+  // life, and the page never "ends".
   function startNextRoundPolling() {
+    if (CFG.embedded) return;
     SES.startNextRoundPolling({
       onEnded: showSessionEnded,
       // A retired tab still holding an unsent draft must not discard it: the
@@ -2369,58 +2273,37 @@
 
   // ---------- 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);
+    return SHELL.showVeil(statusHtml, subText, subPulse, [wsEl]);
   }
+  // Embedded, the veil says the agent HAS the approval — only once the wire
+  // proved it (delivered, or picked up later). Until then the approval is saved
+  // and the strip + hand-off say what is still missing.
   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);
+    if (CFG.embedded) {
+      if (SHELL.state.phase !== "approved") {
+        enterWorking("Plan approved.");
+        return;
+      }
+      // working, so a reload (the approval itself may move the round) restores
+      // this state instead of a fresh "approved — nothing to do" page
+      if (!working) enterWorking("Plan approved.");
+      var picked = SHELL.state.pickedUpAt;
+      showVeil(
+        ICONS.check + "<span>Plan approved</span>",
+        picked ? "Your agent picked it up at " + SHELL.hhmm(picked) + " and is building the slides now." : "Your agent has it and is building the slides now.",
+        true,
+      );
+      return;
+    }
+    showVeil(ICONS.check + "<span>Plan approved</span>", "The agent is building your slides now — you can close this tab.", true);
+    setTimeout(SHELL.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);
+    showVeil("<span>Continued in a new tab</span>", "The next plan round opened in a fresh browser tab — you can close this one.");
   }
 
   // ---------- wire up ----------
@@ -2439,19 +2322,58 @@
     var flagged = SES.consumeRoundFlag();
     restoreSession();
 
-    injectAssets();
+    SHELL.injectAssets(CSS);
     buildChrome();
     buildWorkspace();
+    refreshChrome();
+    loadDesigns(); // the rest of the design menu, after the page is up
 
     if (working) {
       // A refresh of a round the reviewer already sent: keep waiting quietly.
       if (wsEl) wsEl.classList.add("is-waiting");
       document.title = WAITING_TITLE;
       startNextRoundPolling();
+      if (CFG.embedded) SHELL.renderRevising(); // a refresh mid-revision keeps the strip
+      if (CFG.embedded && SHELL.state.phase === "approved") showApproved(); // the agent has the approval
     } else {
       // Parked round: the agent is waiting on the reviewer — announce it.
       SES.announceNewRound(flagged);
+      if (SHELL.alreadyApproved()) SHELL.showApprovedBanner("Your agent builds the slides from it. If something must still change, leave a comment.");
+      if (SHELL.askedAgain()) SHELL.showApprovedBanner("Approve again to let it continue, or leave a comment if something must still change.", "Your agent asks you to confirm the plan again");
+      if (SHELL.notAskedYet()) SHELL.showNotAskedBanner("Your agent is still writing the plan. Read along if you like — this page updates by itself when it asks you.");
+      if (CFG.embedded && askedAgainUnchanged && CFG.asked) {
+        SHELL.showAskedAgainUnchanged();
+      } else if (CFG.embedded && arrivedAfterRevising && CFG.asked) {
+        var n = Object.keys(changedSlides).length;
+        SHELL.showArrived(n ? n + (n === 1 ? " slide changed" : " slides changed") + " — your comments were worked in. Have another look." : "Your comments were worked in. Have another look.");
+      }
+      if (editsRestored) {
+        SHELL.showNotice("edits", { tone: "info", title: "Your unsent edits are back", text: "They are not sent yet — send or approve when you are ready.", dismiss: true });
+      }
+      if (staleEdits) {
+        var old = staleEdits.value;
+        SHELL.showNotice("edits", {
+          tone: "warn",
+          title: "Your agent changed the plan after your last unsent edits",
+          text: "They were made on the older version, so they are not applied here. Copy them if you want to reuse a part.",
+          dismiss: true,
+          actions: [
+            {
+              label: "Copy my edited version",
+              onClick: function () {
+                try {
+                  navigator.clipboard.writeText(old);
+                } catch {
+                  /* no clipboard in this frame */
+                }
+              },
+            },
+          ],
+        });
+      }
     }
+    // The hand-over in progress, the next-load note, an answer on its way.
+    SHELL.resume();
   }
 
   if (document.readyState === "loading") {