slidemind 0.3.4 → 0.3.12

package/src/builders/plan-overlay.js

@@ -18,25 +18,19 @@
 // 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 (queued → sent → addressed).
+// session with its anchor and status (sent → addressed).
 //
 // 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", carrying the anchored
-//     comment plus any queued stragglers); Approve resolves it as "approve";
-//     direct edits and story iteration are allowed.
+//     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
-//     stays navigable, and the composer stays LIVE — sent comments QUEUE in
-//     sessionStorage (ledger status "queued") instead of hitting the server.
-//     Direct edits, story iteration and Approve are off (the displayed round is
-//     already superseded). A status strip says so.
-//
-// Queued comments are never lost: the tab polls the heartbeat, and when the
-// agent's next `slidemind plan` run claims it the reload's boot POSTs the whole
-// backlog to /plan-review/backlog — which resolves that run immediately as a
-// drain round, so the tab simply stays in working mode with the ledger flipped
-// to "sent". A tab that is superseded by a fresh window flushes its backlog
-// before retiring, for the same reason.
+//     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.
 //
 // 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
@@ -44,7 +38,8 @@
 // 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 ONLY when the arriving round PARKS — drain rounds land silently.
+// fires when the arriving round parks (a plain refresh of a sent round stays
+// silent).
 //
 // 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
@@ -79,8 +74,8 @@
 
   // The shared gate session (src/builders/gate-session.js, inlined into the page
   // as window.__SLIDEMIND_GATE__): the deck-keyed sessionStorage ledger, the
-  // backlog flush, the server-nonce round transition, the round-ready announce
-  // and the heartbeat poll — one implementation, shared with the preview gate.
+  // server-nonce round transition, the round-ready announce and the heartbeat
+  // poll — one implementation, shared with the preview gate.
   var SES = window.__SLIDEMIND_GATE__.createGateSession({
     name: "plan",
     deck: CFG.deck || "",
@@ -91,7 +86,6 @@
     round: CFG.round || "",
     service: "slidemind-plan",
     heartbeat: CFG.heartbeat || "/__plan/heartbeat",
-    backlogEndpoint: CFG.backlogEndpoint || "/plan-review/backlog",
     pollMs: CFG.pollMs,
     pollTtlMs: CFG.pollTtlMs,
     attentionTitle: "● Plan ready — slidemind",
@@ -105,9 +99,9 @@
   // ---------- state ----------
   var submitted = false;
   var approveArmed = false; // inline "discard unsent feedback?" confirm state
-  var working = false; // the agent is revising → edits off, comments queue
+  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:queued|sent|addressed}
+  var ledger = []; // every comment of this session: {…, status: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 bannerText = null; // transient round-arrival banner, null once dismissed
@@ -297,24 +291,37 @@
     ".plan-storyboard-draft-note p{margin:0;}.plan-storyboard-draft-note strong{color:var(--sm-fg);font-weight:600;}" +
     /* storyline tab strip */
     ".plan-storyline{margin:0;}" +
-    ".plan-storyline-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px 20px 12px;}" +
+    ".plan-storyline-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;}" +
-    ".plan-storyline-beat{position:relative;display:flex;flex:1 1 150px;min-width:132px;max-width:260px;flex-direction:row;" +
-    "align-items:baseline;gap:9px;padding:8px 8px 9px;border:0;border-radius:8px;background:transparent;cursor:pointer;transition:background-color 130ms ease;}" +
+    /* 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{flex:none;color:color-mix(in srgb,var(--sm-dim) 55%,transparent);" +
+    ".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{display:-webkit-box;min-width:0;overflow:hidden;color:var(--sm-dim);font-size:12px;" +
+    ".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);" +
@@ -357,8 +364,8 @@
     "linear-gradient(90deg,color-mix(in srgb,var(--plan-annotation) 13%,transparent) 1px,transparent 1px);" +
     "background-size:calc(100%/12) calc(100%/6);background-color:color-mix(in srgb,#3565d4 3%,transparent);}" +
     ".plan-storyboard-block{position:absolute;display:flex;min-width:0;min-height:0;flex-direction:column;gap:clamp(4px,.72vw,7px);" +
-    "overflow:hidden;border:1.5px dashed color-mix(in srgb,var(--plan-annotation) 44%,transparent);border-radius:6px;" +
-    "background:color-mix(in srgb,var(--sm-surface) 62%,transparent);padding:clamp(6px,.95vw,10px);}" +
+    "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;}" +
@@ -392,6 +399,40 @@
     ".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-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-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;}" +
+    ".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-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-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);}" +
@@ -419,7 +460,6 @@
     ".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=\"queued\"]{color:var(--sm-warn);border-color:rgba(246,196,84,.4);}" +
     ".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 */
@@ -439,6 +479,7 @@
     "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;" +
@@ -532,7 +573,7 @@
   // the unsent draft (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 };
+    return { round: roundNo, selectedIndex: S.selectedIndex, draft: feedbackText, working: working };
   }
   function saveCtx() {
     SES.saveCtx(ctxFields());
@@ -541,12 +582,6 @@
   function saveDraftSoon() {
     SES.saveCtxSoon(ctxFields());
   }
-  function queuedComments() {
-    return SES.queued(ledger);
-  }
-  function flushBacklog() {
-    return SES.flushBacklog(ledger);
-  }
 
   // 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
@@ -633,7 +668,7 @@
     if (editedBadge) editedBadge.style.display = planWasEdited() ? "" : "none";
     if (hintEl) {
       hintEl.textContent = working
-        ? "The agent is revising · read on, browse the strip, keep commenting — editing resumes with the next round"
+        ? "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";
     }
 
@@ -655,16 +690,6 @@
           sub.style.display = "";
           sub.textContent = "The agent is revising — approve the next round";
         }
-      } else if (queuedComments().length) {
-        // Only reachable when a backlog flush failed: approving would drop them.
-        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 your queued comments first";
-        }
       } else if (S.storyDraft) {
         // Approve is blocked until the staged storyline is sent or discarded.
         approveArmed = false;
@@ -872,7 +897,7 @@
     dossier.appendChild(root);
 
     root.appendChild(
-      renderStrip(slides, committed, beatMessages, storyboardData, canEdit, activeIndex),
+      renderStrip(slides, committed, beatMessages, storyboardData, storyboardSegments, canEdit, activeIndex),
     );
 
     var body = el("div", "plan-dossier-body");
@@ -910,10 +935,13 @@
   }
 
   // ---------- storyline tab strip ----------
-  function renderStrip(slides, committed, committedMessages, storyboardData, canEdit, activeIndex) {
+  function renderStrip(slides, committed, committedMessages, storyboardData, storyboardSegments, canEdit, activeIndex) {
     var section = el("section", "plan-storyline");
     var head = el("div", "plan-storyline-head");
-    head.appendChild(el("span", "plan-storyline-label", "Red thread"));
+    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);
 
     var track = el("ol", "plan-storyline-track");
@@ -1094,6 +1122,24 @@
         });
       }
       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;
+            commitStoryboard(chipSegment, d);
+          },
+        });
+        chip.setAttribute("data-no-drag", "");
+        li.appendChild(chip);
+      }
 
       if (canEdit) {
         var rm = el("button", "plan-storyline-beat-remove", ICONS.x);
@@ -1237,13 +1283,16 @@
   // Commit a storyboard mutation into S.value and re-render the surface. Safe to
   // full-re-render because every canvas edit commits on blur / pointerup, so no
   // field is focused at commit time.
-  function commitStoryboard(segment, nextData) {
+  function commitPlan(nextValue) {
     if (locked()) return;
-    S.value = PLAN.replaceStoryboardSegment(S.value, segment, nextData);
+    S.value = nextValue;
     approveArmed = false; // a storyboard edit disarms a pending approve-confirm
     refreshChrome();
     renderSurface();
   }
+  function commitStoryboard(segment, nextData) {
+    commitPlan(PLAN.replaceStoryboardSegment(S.value, segment, nextData));
+  }
 
   function renderField(variant, value, onCommit) {
     var wrap = el("div", "plan-storyboard-field");
@@ -1286,13 +1335,43 @@
     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 };
+    }
+    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");
-    node.style.left = (block.x / PLAN.STORYBOARD_WIDTH) * 100 + "%";
-    node.style.top = (block.y / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
-    node.style.width = (block.w / PLAN.STORYBOARD_WIDTH) * 100 + "%";
-    node.style.height = (block.h / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
+    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));
@@ -1335,13 +1414,13 @@
 
     if (!locked()) {
       node.title = "Drag to reposition";
-      wireBlockDrag(node, frameEl, block, change);
+      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, change);
+      wireBlockResize(rz, frameEl, block, map, change);
       node.appendChild(rz);
     }
     return node;
@@ -1361,7 +1440,7 @@
       h: clamp(h, PLAN.MIN_BLOCK_HEIGHT, A.y + A.h - block.y),
     };
   }
-  function wireBlockDrag(node, frameEl, block, change) {
+  function wireBlockDrag(node, frameEl, block, map, change) {
     var st = null;
     node.addEventListener("pointerdown", function (e) {
       if (locked() || e.button !== 0) return;
@@ -1374,7 +1453,7 @@
         oy: e.clientY,
         sx: block.x,
         sy: block.y,
-        scale: PLAN.STORYBOARD_WIDTH / rect.width,
+        scale: stagePerPixel(map, rect.width),
         moved: false,
       };
       try {
@@ -1390,9 +1469,8 @@
       if (!st.moved && Math.hypot(dx, dy) < BLOCK_DRAG_THRESHOLD) return;
       st.moved = true;
       node.classList.add("plan-storyboard-block--dragging");
-      var p = clampPos(block, st.sx + dx * st.scale, st.sy + dy * st.scale);
-      node.style.left = (p.x / PLAN.STORYBOARD_WIDTH) * 100 + "%";
-      node.style.top = (p.y / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
+      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;
@@ -1407,7 +1485,7 @@
         node.classList.remove("plan-storyboard-block--dragging");
         return;
       }
-      var p = clampPos(block, s.sx + (e.clientX - s.ox) * s.scale, s.sy + (e.clientY - s.oy) * s.scale);
+      var 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 });
@@ -1420,7 +1498,7 @@
       node.classList.remove("plan-storyboard-block--dragging");
     });
   }
-  function wireBlockResize(handle, frameEl, block, change) {
+  function wireBlockResize(handle, frameEl, block, map, change) {
     var st = null;
     handle.addEventListener("pointerdown", function (e) {
       if (locked() || e.button !== 0) return;
@@ -1433,7 +1511,7 @@
         oy: e.clientY,
         sw: block.w,
         sh: block.h,
-        scale: PLAN.STORYBOARD_WIDTH / rect.width,
+        scale: stagePerPixel(map, rect.width),
         moved: false,
       };
       try {
@@ -1449,10 +1527,9 @@
       if (!st.moved && Math.hypot(dx, dy) < BLOCK_DRAG_THRESHOLD) return;
       st.moved = true;
       var node = handle.parentNode;
-      var p = clampSize(block, st.sw + dx * st.scale, st.sh + dy * st.scale);
+      var p = clampSize(block, st.sw + dx * st.scale.x, st.sh + dy * st.scale.y);
       node.classList.add("plan-storyboard-block--dragging");
-      node.style.width = (p.w / PLAN.STORYBOARD_WIDTH) * 100 + "%";
-      node.style.height = (p.h / PLAN.STORYBOARD_HEIGHT) * 100 + "%";
+      placeBlock(node, map, block.x, block.y, p.w, p.h);
     });
     function end(e) {
       if (!st || st.pointerId !== e.pointerId) return;
@@ -1464,7 +1541,7 @@
       var s = st;
       st = null;
       if (!s.moved) return;
-      var p = clampSize(block, s.sw + (e.clientX - s.ox) * s.scale, s.sh + (e.clientY - s.oy) * s.scale);
+      var 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 });
@@ -1508,8 +1585,161 @@
     return field;
   }
 
+  // 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 renderLayoutPicker(value, opts) {
+    var options = Array.isArray(CFG.layouts) ? CFG.layouts : [];
+    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 canPick = !locked() && options.length > 0;
+
+    var current = document.createElement("button");
+    current.type = "button";
+    current.className = "plan-storyboard-layout-current";
+    current.setAttribute("aria-label", opts.ariaLabel || "Choose the slide's layout");
+    current.disabled = !canPick;
+    if (selected && selected.previewUrl) {
+      var thumb = document.createElement("img");
+      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 = 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");
+      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);
+      }
+    }
+    function onOutside(e) {
+      if (!root.contains(e.target)) closeMenu();
+    }
+    current.addEventListener("click", function () {
+      if (menu) {
+        closeMenu();
+        return;
+      }
+      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.setAttribute("role", "option");
+        btn.setAttribute("aria-selected", option.componentName === value ? "true" : "false");
+        if (option.previewUrl) {
+          var t = document.createElement("img");
+          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.componentName;
+        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);
+        text.appendChild(c);
+        btn.appendChild(text);
+        btn.addEventListener("click", function () {
+          closeMenu();
+          if (option.componentName === value) return;
+          opts.onPick(option.componentName);
+        });
+        menu.appendChild(btn);
+      });
+      root.appendChild(menu);
+      document.addEventListener("pointerdown", onOutside);
+    });
+    return root;
+  }
+
+  // Deck-level layout knob: the one layout every board shares (or "Mixed"); a
+  // pick binds EVERY storyboard's `layout` in one commit.
+  function renderDeckLayoutKnob(storyboardData) {
+    var wrap = el("div", "plan-storyline-deck-layout");
+    wrap.appendChild(el("span", "plan-storyline-deck-layout-label", "Deck layout"));
+    var seen = {};
+    var distinct = 0;
+    for (var i = 0; i < storyboardData.length; i++) {
+      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 one layout for every slide",
+        onPick: function (componentName) {
+          commitPlan(PLAN.setStoryboardLayoutForAll(S.value, componentName));
+        },
+      }),
+    );
+    return wrap;
+  }
+
   function renderDetails(data, segment) {
     var aside = el("aside", "plan-storyboard-detail");
+    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;
+          commitStoryboard(segment, d);
+        },
+      }),
+    );
     aside.appendChild(el("div", "plan-storyboard-detail-label", "Story beat"));
     aside.appendChild(
       renderDetailField(
@@ -1552,29 +1782,174 @@
     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];
+    }
+    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);
+    }
+    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);
+    }
+    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);
+      });
+      box.appendChild(input);
+      layer.appendChild(box);
+    });
+    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", "plan-storyboard-frame slide-emboss");
+    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);
+    }
+    // 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);
+        }
+        phLayer.appendChild(box);
+      });
+      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 (!locked()) {
-      var add = el("button", "plan-storyboard-add", ICONS.plus + "<span>Add container</span>");
-      add.type = "button";
-      add.title = "Add container";
-      add.setAttribute("aria-label", "Add container");
-      add.disabled = data.blocks.length >= PLAN.MAX_BLOCKS;
+    if (addBtn) {
+      var add = addBtn;
       add.addEventListener("click", function () {
         if (data.blocks.length >= PLAN.MAX_BLOCKS) return;
         var serial = data.blocks.length + 1;
@@ -1601,21 +1976,34 @@
         ]);
         commitStoryboard(segment, withBlocks(data, nextBlocks));
       });
-      top.appendChild(add);
+      if (showBands) top.appendChild(add);
     }
-    frame.appendChild(top);
+    if (showBands) frame.appendChild(top);
 
-    var grid = el("div", "plan-storyboard-body");
-    grid.setAttribute("aria-hidden", "true");
-    frame.appendChild(grid);
 
     var canRemove = !locked() && data.blocks.length > 1;
     data.blocks.forEach(function (block) {
       frame.appendChild(renderBlock(frame, block, data, segment, canRemove));
     });
 
-    var bottom = el("div", "plan-storyboard-reserved plan-storyboard-reserved-bottom", "Footer/template area not planned here");
-    frame.appendChild(bottom);
+    if (showBands) {
+      var bottom = el("div", "plan-storyboard-reserved plan-storyboard-reserved-bottom", "Footer/template area not planned here");
+      frame.appendChild(bottom);
+    }
+    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);
+    }
 
     layout.appendChild(frame);
     layout.appendChild(renderDetails(data, segment));
@@ -1662,7 +2050,7 @@
       slideHeading: a.slideHeading,
       text: text,
       at: new Date().toISOString(),
-      status: "queued",
+      status: "sent",
     };
   }
   function anchorLabel(c) {
@@ -1674,7 +2062,7 @@
   }
   // 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 the queue the reviewer built up.
+  // it survives rounds and shows every comment the reviewer sent.
   function ledgerRail() {
     var rail = el("div", "sm-ledger");
     ledger.forEach(function (c) {
@@ -1707,9 +2095,8 @@
       note.innerHTML =
         "<b>" +
         (workingNote || "Comments sent.") +
-        "</b> The agent is revising the plan — this tab updates itself when the " +
-        "next round lands. Keep reading and navigating; anything you send now is " +
-        "queued and delivered with that round.";
+        "</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
@@ -1771,8 +2158,9 @@
     commentEl = el("textarea", "sm-chat-ta");
     commentEl.rows = 1;
     commentEl.placeholder = working
-      ? "Keep commenting — this goes to the agent with the next round."
+      ? "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.addEventListener("input", function () {
       feedbackText = commentEl.value;
@@ -1795,8 +2183,9 @@
     } else {
       sendBtn = el("button", "sm-send", ICONS.send);
       sendBtn.type = "button";
-      sendBtn.title = working ? "Queue for the next round" : "Send feedback";
+      sendBtn.title = working ? "The agent is revising — send on the next round" : "Send feedback";
       sendBtn.setAttribute("aria-label", sendBtn.title);
+      sendBtn.disabled = working;
     }
     sendBtn.onclick = requestChanges;
     row.appendChild(sendBtn);
@@ -1811,7 +2200,7 @@
       "<span>Approve plan</span></span>" +
       '<span class="sub">the agent builds the slides next</span>';
     approveBtn.onclick = function () {
-      if (working || queuedComments().length) return; // superseded round / unsent queue
+      if (working) return; // superseded round
       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) {
@@ -1828,35 +2217,28 @@
   }
 
   // ---------- working mode (the agent is revising) ----------
-  // The tab neither veils over nor freezes: the plan stays readable, the strip
-  // stays navigable, the composer stays live (comments queue), and only the
-  // editing affordances + Approve go away. Heartbeat polling waits for the
-  // agent's next `slidemind plan` round, which reloads this same tab.
+  // The tab neither veils over nor freezes: the plan stays readable and the
+  // strip 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) {
     working = true;
     workingNote = note || null;
     if (wsEl) wsEl.classList.add("is-waiting");
     document.title = WAITING_TITLE; // the tab label signals the state from the tab bar
+    saveCtx(); // a plain refresh of this round stays in working mode
     renderSurface(); // rebuild the surface read-only (no contenteditable attrs)
     renderComposer();
     startNextRoundPolling();
   }
 
   // ---------- submit ----------
-  // Send. WORKING → the comment is queued locally (the agent is mid-round; it
-  // rides along on the next run). PARKED → it resolves the gate right now,
-  // carrying any queued stragglers from a flush that couldn't reach the server.
+  // Send: resolves the gate right now with the typed comment (plus a staged
+  // storyline restructure as a whole-story instruction). Off while WORKING.
   function requestChanges() {
+    if (working) return;
     var typed = commentText();
-    if (working) {
-      if (!typed) return;
-      ledger.push(newComment(typed));
-      saveLedger();
-      clearDraft();
-      renderComposer();
-      return;
-    }
-    var batch = queuedComments();
+    var batch = [];
     if (S.storyDraft) {
       var staged = PLAN.stageStoryIteration(S.value, S.storyDraft);
       if (!staged) return;
@@ -1896,23 +2278,14 @@
     })
       .then(function (res) {
         if (res.status === 409) {
-          // The gate already drained a backlog this run — this round is stale.
-          // Park the batch in the ledger as QUEUED (the next claim flushes it),
-          // clear the input so it isn't typed twice, and disarm the submit
-          // latch — leaving it armed made every later send a silent no-op.
-          // A staged story restructure survives only as its instruction TEXT:
-          // its editedPlanMarkdown was computed against the superseded plan and
-          // applying it to the next round would corrupt it, so it is dropped
-          // deliberately (same call the add-in dialog makes on round arrival).
-          if (decision === "comments") {
-            pendingComments.forEach(function (c) {
-              c.status = "queued";
-              if (ledger.indexOf(c) < 0) ledger.push(c);
-            });
-            saveLedger();
-            clearDraft();
-            S.storyDraft = null;
-          }
+          // 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;
@@ -1949,14 +2322,16 @@
     }, 120);
   }
   // The shared heartbeat poll (gate-session.js) with this gate's two endings:
-  // a retired tab hands its backlog over FIRST — the fresh window that replaces
-  // it starts with an empty sessionStorage, so anything still queued here would
-  // otherwise be lost (the handover also drains the new run immediately).
+  // a retired tab simply says where the review went.
   function startNextRoundPolling() {
     SES.startNextRoundPolling({
       onEnded: showSessionEnded,
+      // A retired tab still holding an unsent draft must not discard it: the
+      // fresh window that replaced it has its own (empty) sessionStorage, so
+      // this tab reloads into the new round instead and flags itself.
       onSuperseded: function () {
-        flushBacklog().then(showSuperseded, showSuperseded);
+        if (commentText()) SES.markRoundReadyAndReload();
+        else showSuperseded();
       },
     });
   }
@@ -2028,8 +2403,8 @@
     var stale = document.getElementById("plan-root");
     if (stale && stale.parentNode) stale.parentNode.removeChild(stale);
 
-    // Session first: it decides the MODE this page renders in (a queued backlog
-    // means the agent is still working) and the round-transition state.
+    // Session first: it decides the MODE this page renders in (a refresh of an
+    // already-sent round stays in working mode) and the round-transition state.
     var flagged = SES.consumeRoundFlag();
     restoreSession();
 
@@ -2038,14 +2413,10 @@
     buildWorkspace();
 
     if (working) {
-      // Drain round: hand the backlog over, stay in working mode, stay silent —
-      // the reviewer already knows they're mid-round.
+      // A refresh of a round the reviewer already sent: keep waiting quietly.
       if (wsEl) wsEl.classList.add("is-waiting");
       document.title = WAITING_TITLE;
       startNextRoundPolling();
-      flushBacklog().then(function () {
-        renderComposer(); // rows flip queued → sent
-      });
     } else {
       // Parked round: the agent is waiting on the reviewer — announce it.
       SES.announceNewRound(flagged);