slidemind 0.3.20 → 0.4.1

package/src/builders/gate-shell.js

@@ -0,0 +1,1494 @@
+// Shared browser-side CHROME for the CLI's two blocking gates — the plan
+// sign-off gate (plan-overlay.js) and the spatial preview gate
+// (review-overlay.js). gate-session.js owns the ledger/round machinery; this
+// module owns everything the two pages LOOK like in common: the brand assets
+// (orb + wordmark), the icon set, the top bar, the buttons, the workspace
+// strips under the bar (approved / not asked yet / agent revising), the
+// hand-off dialog, the "round arrived" toast, the done veil and the slide-rail
+// styling. Both overlays used to carry byte-identical copies of all of it; a
+// visual fix that landed in one and not the other is how the two drifted.
+//
+// Plain dependency-free ESM (a test can `import` it); the gates inline it
+// import-free as window.__SLIDEMIND_SHELL__ — see bundleGateSession() in
+// gate-server.mjs, which ships session + shell in one script block.
+//
+// STATE OWNERSHIP: the shell owns the decision on the wire (one attempt at a
+// time, retried on a busy deck or a stopped workspace) and the workspace
+// HAND-OVER after it — the message and the hand-off dialog that says to paste
+// it, the revising strip — because every strip and dialog reads it.
+// The overlay owns its ledger and its mode flags and tells the shell about them
+// through the callbacks it passes to createGateShell.
+//
+// HONESTY RULES (the workspace page; the user is not technical and chats with
+// the agent at the same time): nothing reaches an agent whose turn has ended, so
+// after every answer the page does the same thing — it shows the message that
+// brings the agent back and says "paste this into your agent chat" (doc 21).
+// The clipboard is the user's: only their click on the copy icon writes it,
+// and the page never claims a copy that did not happen. It never says anything about
+// whether some agent process happens to be listening, and "your agent picked it
+// up" appears only once the receipt (`pickedUpAt`) proves it. What the user
+// wrote is never dropped by a failure.
+
+// The add-in's embossed "raised slide" mark (src/ui/public/logo.svg), inlined.
+export const 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>";
+
+// Lucide icons (MIT) — the family the add-in's dialogs use.
+export const ICONS = {
+  copy:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
+  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>',
+  message:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M7 9h10"/><path d="M7 13h6"/></svg>',
+  trash:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>',
+  close:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="M6 6l12 12"/></svg>',
+  pin:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.4-8 12-8 12s-8-7.6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>',
+  arrow:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></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>',
+  grip:
+    '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg>',
+};
+
+// The chrome CSS both gates inject: tokens, bar, buttons, strips, dialogs,
+// veil, and the slide rail (`.sm-rail`, the plan gate's own rail; the preview
+// page brings its `.deck__rail`, which the same rules style through the
+// `--deck-chrome-*` tokens).
+export const SHELL_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-pop-in{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}}" +
+  "@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}}" +
+  "@keyframes sm-spin{to{transform:rotate(360deg)}}" +
+  ":root{--sm-bg:var(--deck-chrome-bg,#111113);--sm-surface:var(--deck-chrome-bg-2,#161618);--sm-surface-2:#1c1c20;" +
+  "--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);--sm-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sm-bar-h:62px;--sm-rail-w:220px;}" +
+  ".sm-o,.sm-o *{box-sizing:border-box;}" +
+  /* hosted in the workspace page: the page shows this gate's messages (publishChrome) — the bar stays, its status line and every strip go */
+  ".sm-hosted .sm-waiter,.sm-hosted .sm-strips,.sm-hosted .sm-arrived,.sm-hosted .sm-handoff{display:none!important;}" +
+  /* ...and the page's own top bar already carries the mark: the bar starts at its title */
+  ".sm-hosted .sm-bar .sm-brand,.sm-hosted .sm-bar>.sm-sep{display:none;}" +
+  /* header */
+  ".sm-bar{position:fixed;top:0;left:0;right:0;z-index:2147483600;display:flex;align-items:center;" +
+  "gap:16px;height:var(--sm-bar-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;flex:0 1 auto;overflow:hidden;}" +
+  ".sm-meta .t{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;white-space:nowrap;}" +
+  /* the bar's notes fold into an (i) when the middle of the bar has no room */
+  ".sm-info{display:none;align-items:center;justify-content:center;width:17px;height:17px;flex-shrink:0;padding:0;border-radius:50%;border:1px solid var(--sm-border);background:transparent;color:var(--sm-dim);font:600 10px/1 var(--sm-font);cursor:pointer;}" +
+  ".sm-info:hover{color:var(--sm-fg);border-color:#4a4a52;}.sm-bar.is-tight .sm-info.has{display:inline-flex;}" +
+  ".sm-info-pop{position:fixed;z-index:2147483630;max-width:min(380px,calc(100vw - 24px));padding:12px 14px;border-radius:12px;background:var(--sm-surface);border:1px solid var(--sm-border);box-shadow:0 18px 50px rgba(0,0,0,.55);font:12px/1.5 var(--sm-font);color:#d4d4d8;animation:sm-pop-in .14s ease;}" +
+  ".sm-info-pop p{margin:0;}.sm-info-pop p+p{margin-top:8px;}.sm-info-pop b{color:#f4f4f5;font-weight:600;}" +
+  ".sm-meta .h{font-size:11.5px;color:var(--sm-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}" +
+  ".sm-grow{flex:1;min-width:0;}" +
+  ".sm-edited{padding:1px 7px;border-radius:999px;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid rgba(169,194,255,.45);color:var(--sm-accent);}" +
+  ".sm-note{max-width:min(560px,38vw);min-width:0;font-size:10.5px;line-height:1.35;color:#c7c7cf;border-left:2px solid var(--sm-accent);padding-left:10px;" +
+  "overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;}" +
+  ".sm-bar.is-tight .sm-grow .sm-note{display:none;}" +
+  ".sm-note b{font-weight:600;color:#f4f4f5;}" +
+  ".sm-count{font-size:12px;color:var(--sm-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}" +
+  ".sm-waiter{display:flex;align-items:center;gap:8px;flex-shrink:0;max-width:250px;font-size:11px;line-height:1.3;color:var(--sm-dim);}" +
+  ".sm-waiter .dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#71717a;}" +
+  ".sm-waiter.on{color:#c6d4f5;}.sm-waiter.on .dot{background:var(--sm-success);box-shadow:0 0 0 3px rgba(46,204,113,.2);}" +
+  ".sm-waiter.warn{color:#fde68a;}.sm-waiter.warn .dot{background:var(--sm-warn);animation:sm-pulse 1.4s ease-in-out infinite;}" +
+  ".sm-waiter.err{color:#fecaca;}.sm-waiter.err .dot{background:var(--sm-danger);}" +
+  ".sm-waiter.act{cursor:pointer;}.sm-waiter.act:hover{color:var(--sm-fg);}" +
+  /* the bar at narrow widths: the brand and the secondary texts give way first */
+  "@media (max-width:1000px){.sm-meta .h{display:none;}.sm-count{display:none;}}" +
+  "@media (max-width:760px){.sm-bar{gap:10px;padding:0 12px;}.sm-word,.sm-sep{display:none;}.sm-waiter{max-width:170px;}}" +
+  /* the strips under the bar (workspace states + notices), stacked in one
+     fixed host so two of them can never paint over each other */
+  ".sm-strips{position:fixed;left:0;right:0;top:var(--sm-bar-h,62px);z-index:2147483610;display:flex;flex-direction:column;}" +
+  ".sm-strips:empty{display:none;}" +
+  ".sm-notice{order:1;display:flex;align-items:center;gap:12px;padding:10px 20px;font-family:var(--sm-font);color:var(--sm-fg);" +
+  "background:linear-gradient(90deg,rgba(169,194,255,.16),rgba(169,194,255,.06));border-bottom:1px solid rgba(169,194,255,.4);animation:sm-rise .3s cubic-bezier(.2,.7,.2,1);}" +
+  ".sm-notice>svg{width:18px;height:18px;flex-shrink:0;color:var(--sm-accent);}" +
+  ".sm-notice .txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;font-size:12px;line-height:1.45;color:#d7d7de;}.sm-notice .txt b{font-size:13px;color:#f4f4f5;}" +
+  ".sm-notice .acts{display:flex;align-items:center;gap:8px;flex-shrink:0;}" +
+  ".sm-notice--warn{background:linear-gradient(90deg,rgba(251,191,36,.16),rgba(251,191,36,.05));border-bottom-color:rgba(251,191,36,.45);}.sm-notice--warn>svg{color:#fbbf24;}.sm-notice--warn .sm-spin{border-color:#fbbf24;border-top-color:transparent;}" +
+  ".sm-notice--error{background:linear-gradient(90deg,rgba(248,113,113,.18),rgba(248,113,113,.06));border-bottom-color:rgba(248,113,113,.5);}.sm-notice--error>svg{color:var(--sm-danger);}" +
+  ".sm-notice--ok{background:linear-gradient(90deg,rgba(46,204,113,.16),rgba(46,204,113,.06));border-bottom-color:rgba(46,204,113,.4);}.sm-notice--ok>svg{color:var(--sm-success);}" +
+  ".sm-notice-x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sm-dim);cursor:pointer;}" +
+  ".sm-notice-x svg{width:14px;height:14px;}.sm-notice-x:hover{background:rgba(255,255,255,.08);color:var(--sm-fg);}" +
+  ".sm-approved-banner{order:2;display:flex;align-items:center;gap:12px;padding:10px 20px;" +
+  "background:linear-gradient(90deg,rgba(46,204,113,.16),rgba(46,204,113,.06));border-bottom:1px solid rgba(46,204,113,.4);font-family:var(--sm-font);color:var(--sm-fg);}" +
+  ".sm-approved-banner svg{width:18px;height:18px;color:var(--sm-success);flex-shrink:0;}" +
+  ".sm-approved-banner .txt{display:flex;flex-direction:column;gap:1px;font-size:12px;color:#d7d7de;}.sm-approved-banner .txt b{font-size:13px;color:#f4f4f5;}" +
+  ".sm-notasked{background:linear-gradient(90deg,rgba(251,191,36,.16),rgba(251,191,36,.05));border-bottom-color:rgba(251,191,36,.45);}.sm-notasked svg{color:#fbbf24;}" +
+  ".sm-revising{order:3;display:flex;align-items:center;gap:14px;padding:13px 20px;" +
+  "background:linear-gradient(90deg,rgba(169,194,255,.18),rgba(169,194,255,.08));border-bottom:1px solid rgba(169,194,255,.4);" +
+  "-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--sm-font);color:var(--sm-fg);animation:sm-rise .3s cubic-bezier(.2,.7,.2,1);}" +
+  ".sm-revising .txt{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:#d7d7de;}.sm-revising .txt b{font-size:14px;color:#f4f4f5;}" +
+  ".sm-revising>.ic{display:flex;flex-shrink:0;}.sm-revising>.ic svg{width:20px;height:20px;color:var(--sm-accent);}" +
+  ".sm-revising .txt{flex:1;min-width:0;}" +
+  ".sm-revising--warn{background:linear-gradient(90deg,rgba(251,191,36,.18),rgba(251,191,36,.06));border-bottom-color:rgba(251,191,36,.45);}.sm-revising--warn>.ic svg{color:#fbbf24;}" +
+  ".sm-revising--ok{background:linear-gradient(90deg,rgba(46,204,113,.16),rgba(46,204,113,.06));border-bottom-color:rgba(46,204,113,.4);}.sm-revising--ok>.ic svg{color:var(--sm-success);}" +
+  ".sm-spin{width:11px;height:11px;flex-shrink:0;border-radius:50%;border:2px solid var(--sm-accent);border-top-color:transparent;animation:sm-spin .9s linear infinite;}" +
+  ".sm-spin-lg{width:20px;height:20px;border-width:2.5px;}" +
+  ".sm-copy-msg{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;margin-top:8px;border:1px solid var(--sm-border);border-radius:9px;padding:7px 12px;background:transparent;color:var(--sm-fg);font:600 12px var(--sm-font);cursor:pointer;}" +
+  ".sm-copy-msg svg{width:14px;height:14px;}.sm-copy-msg:hover{background:rgba(255,255,255,.06);}" +
+  ".sm-copy-veil{margin-top:0;animation:sm-rise .6s .24s cubic-bezier(.2,.7,.2,1) both;}" +
+  ".sm-say{display:inline-block;padding:.02em .5em;border-radius:7px;background:rgba(169,194,255,.14);border:1px solid rgba(169,194,255,.42);color:#f4f4f5;font-weight:600;}" +
+  /* the "round arrived" toast */
+  ".sm-arrived{position:fixed;left:50%;top:calc(var(--deck-chrome-h,62px) + 14px);transform:translateX(-50%);z-index:2147483620;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;" +
+  "background:rgba(22,22,24,.96);border:1px solid rgba(46,204,113,.5);box-shadow:0 18px 54px rgba(0,0,0,.55);font-family:var(--sm-font);color:var(--sm-fg);animation:sm-rise .35s cubic-bezier(.2,.7,.2,1);transition:opacity .4s;}" +
+  ".sm-arrived.out{opacity:0;}.sm-arrived svg{width:20px;height:20px;color:var(--sm-success);flex-shrink:0;}" +
+  ".sm-arrived .txt{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:#d7d7de;}.sm-arrived .txt b{font-size:14px;color:#f4f4f5;}" +
+  /* hand-off dialog */
+  ".sm-handoff{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;background:rgba(5,5,7,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:sm-veil-in .2s ease;font-family:var(--sm-font);}" +
+  ".sm-handoff-box{width:min(560px,calc(100vw - 32px));background:var(--sm-surface);color:var(--sm-fg);border:1px solid var(--sm-border);border-radius:16px;padding:22px 24px;box-shadow:0 24px 64px rgba(0,0,0,.6);animation:sm-rise .3s cubic-bezier(.2,.7,.2,1);}" +
+  ".sm-handoff-head{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;margin-bottom:10px;}.sm-handoff-head svg{width:20px;height:20px;color:var(--sm-success);}" +
+  ".sm-handoff-p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:#d4d4d8;}.sm-handoff-p b{color:#f4f4f5;}" +
+  ".sm-handoff-p.big{font-size:15px;color:#ececf0;}" +
+  ".sm-handoff-sub{margin:0 0 18px;font-size:12.5px;line-height:1.5;color:var(--sm-dim);}" +
+  ".sm-msgbox{position:relative;margin:0 0 16px;}" +
+  ".sm-copy-icon{position:absolute;top:7px;right:7px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:7px;background:transparent;color:var(--sm-dim);cursor:pointer;}" +
+  ".sm-copy-icon:hover{background:rgba(255,255,255,.08);color:var(--sm-fg);}.sm-copy-icon svg{width:15px;height:15px;}.sm-copy-icon.is-copied{color:var(--sm-success);}" +
+  ".sm-handoff-msg{display:block;box-sizing:border-box;width:100%;margin:0;padding:10px 44px 10px 12px;resize:none;border:1px solid var(--sm-border);border-radius:9px;background:rgba(255,255,255,.04);color:#ececf0;font:12.5px/1.5 var(--sm-font);}" +
+  ".sm-handoff-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}" +
+  ".sm-handoff-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:9px;padding:8px 14px;font:600 12.5px var(--sm-font);cursor:pointer;}" +
+  ".sm-handoff-btn svg{width:15px;height:15px;}" +
+  ".sm-handoff-btn.ghost{background:transparent;border-color:var(--sm-border);color:var(--sm-fg);}.sm-handoff-btn.ghost:hover{background:rgba(255,255,255,.06);}" +
+  ".sm-handoff-btn.primary{background:#f4f4f5;color:#0f0f0f;}.sm-handoff-btn.primary:hover{background:#fff;}" +
+  /* buttons */
+  ".sm-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:9px;" +
+  "padding:8px 14px;font-family:var(--sm-font);font-weight:600;font-size:12.5px;cursor:pointer;" +
+  "transition:transform .14s ease,background .14s ease,box-shadow .14s ease,border-color .14s ease;white-space:nowrap;}" +
+  ".sm-btn svg{width:15px;height:15px;flex-shrink:0;}" +
+  ".sm-btn-primary{background:#f4f4f5;color:#0f0f0f;}" +
+  ".sm-btn-primary:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.45);}" +
+  ".sm-btn-primary svg{color:var(--sm-success);}" +
+  ".sm-btn-ghost{background:transparent;border-color:var(--sm-border);color:var(--sm-fg);}" +
+  ".sm-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:#3a3a40;}" +
+  ".sm-btn-danger{background:transparent;border-color:rgba(248,113,113,.4);color:var(--sm-danger);}" +
+  ".sm-btn-danger:hover{background:rgba(248,113,113,.12);}" +
+  ".sm-btn.is-off{opacity:.4;cursor:not-allowed;pointer-events:none;}" +
+  /* 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;}" +
+  /* the slide rail: the plan gate's own list; the preview page's .deck__rail
+     shares the widths and the card look through the --deck-chrome-* tokens */
+  ".sm-rail{display:flex;flex-direction:column;min-height:0;background:var(--sm-bg);border-right:1px solid var(--sm-border);font-family:var(--sm-font);color:var(--sm-fg);}" +
+  ".sm-rail-head{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sm-dim);}" +
+  ".sm-rail-head .n{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.7;}" +
+  ".sm-rail-list{flex:1;min-height:0;overflow-y:auto;padding:4px 14px 18px;margin:0;list-style:none;scrollbar-width:none;}" +
+  ".sm-rail-list::-webkit-scrollbar{display:none;}" +
+  ".sm-thumb{position:relative;display:block;width:100%;margin:0 0 10px;padding:8px;border:1px solid var(--sm-border);border-radius:8px;" +
+  "background:rgba(255,255,255,.025);color:inherit;cursor:pointer;text-align:left;transition:border-color .12s,background .12s,box-shadow .12s;}" +
+  ".sm-thumb:hover{background:rgba(255,255,255,.06);border-color:#3a3a40;}" +
+  ".sm-thumb.is-active{border-color:rgba(237,237,237,.7);background:rgba(255,255,255,.085);box-shadow:0 0 0 2px rgba(237,237,237,.08);}" +
+  ".sm-thumb-preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:none;}" +
+  ".sm-thumb-meta{display:flex;align-items:baseline;gap:7px;margin-top:7px;min-width:0;font-size:11px;line-height:1.3;}" +
+  ".sm-thumb-number{flex:0 0 auto;color:var(--sm-dim);font-variant-numeric:tabular-nums;}" +
+  ".sm-thumb-name{min-width:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}" +
+  ".sm-thumb-sub{margin-top:3px;font-size:10px;color:var(--sm-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}";
+
+// Give a copy of the logo unique gradient ids so two instances (header + done
+// veil) can coexist without id collisions.
+export function logoWithIds(suffix) {
+  return LOGO_SVG.replace(/id="([^"]+)"/g, 'id="$1' + suffix + '"').replace(/url\(#([^)]+)\)/g, "url(#$1" + suffix + ")");
+}
+
+export function el(tag, cls, html) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (html != null) n.innerHTML = html;
+  return n;
+}
+
+export function wordmarkHtml() {
+  return '<b class="top">slide</b><b class="bot">mind</b>';
+}
+
+
+// ---------- time words (pure — every strip, toast and dialog prints these) ----------
+
+// hh:mm on the 24-hour clock, from an epoch ms, an ISO string or a Date.
+export function hhmm(t) {
+  const d = t instanceof Date ? t : new Date(typeof t === "number" ? t : Date.parse(t));
+  if (isNaN(d.getTime())) return "";
+  return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
+}
+
+export function ago(ms) {
+  const m = Math.floor(Math.max(0, ms) / 60000);
+  if (m < 1) return "just now";
+  if (m < 60) return m + " min ago";
+  const h = Math.floor(m / 60);
+  return h + (h === 1 ? " hour ago" : " hours ago");
+}
+
+// How long the revising strip waits without a change by the agent before it
+// says the agent may have stopped.
+export const STALL_MS = 5 * 60 * 1000;
+
+// The revising strip's facts. `since` (epoch ms) is when the agent got the
+// answer; `activityAt` (ISO, heartbeat) is its newest change to the deck. A
+// change from BEFORE the answer is not revising, so it does not count.
+export function revisingStatus({ since, activityAt, now }) {
+  const act = activityAt ? Date.parse(activityAt) : NaN;
+  const lastChange = !isNaN(act) && (!since || act >= since) ? act : null;
+  const last = lastChange || since || now;
+  return { lastChange, stalled: now - last > STALL_MS };
+}
+
+// One chrome instance per page. `opts`:
+//   CFG             — the page's injected config (embedded / approved / asked /
+//                     heartbeat / subjectHash / logoMark are read here)
+//   session         — the page's gate session (gate-session.js): the decision
+//                     wire, the heartbeat reader, the next-load note
+//   what            — { revising: "the plan", approved: "Plan", answer: … }
+//   isWorking()     — the overlay's mode flag
+//   workingNote()   — the overlay's current working headline (may be null)
+//   onOffset(h)     — called with the total height of the strips under the bar
+//   onSaveCtx()     — the overlay persists its round context (the shell's
+//                     hand-over state rides in it — see ctxFields)
+//   onChange()      — the overlay refreshes its buttons (a decision started or
+//                     ended)
+//   onDecided(decision, ack, body)   — a decision was saved: mark rows sent etc.
+//   onDecisionFailed(outcome)        — it was not: the overlay re-arms
+//   onAlreadyAnswered(answered)      — another window answered this already
+//   onApprovalPickedUp(epochMs)      — the agent received a saved approval
+//   onLost()        — standalone: the gate command is gone
+//   reloadBlocker() — null | "typing" | "edits": why a newer version must not
+//                     replace the page right now
+//   reloadIntoNewRound() — persist and reload into the newer version
+//   staleLine       — preview gate only: the one line shown while the preview
+//                     on screen is older than the slides (CFG / heartbeat
+//                     `previewStale`); Approve is muted meanwhile
+export function createGateShell(opts) {
+  const CFG = opts.CFG || {};
+  const SES = opts.session || null;
+  const what = opts.what || { revising: "the slides", approved: "Slides" };
+  const isWorking = opts.isWorking || (() => false);
+  const workingNote = opts.workingNote || (() => null);
+  const onOffset = opts.onOffset || (() => {});
+  const onSaveCtx = opts.onSaveCtx || (() => {});
+  const onChange = opts.onChange || (() => {});
+  const reloadBlocker = opts.reloadBlocker || (() => null);
+  const reloadIntoNewRound = opts.reloadIntoNewRound || (() => location.reload());
+  const call = (name, ...args) => (typeof opts[name] === "function" ? opts[name](...args) : undefined);
+  const now = () => Date.now();
+
+  // The decision + the workspace hand-over. Everything but `activityAt` (a live
+  // heartbeat fact) is persisted in the round ctx.
+  const state = {
+    agentPrompt: null, // ack.message — what the user pastes into their chat with the agent
+    phase: null, // null | "handoff" | "revising" | "answered" | "approved"
+    decision: null, // "approve" | "comments" — what the user answered
+    task: null, // the agent's request the answer went to (ack.task)
+    decidedAt: null, // epoch ms the answer was saved
+    pickedUpAt: null, // epoch ms the agent received the answer
+    revisingSince: null, // epoch ms the agent has had the comments
+    handoffOpen: false, // the hand-off dialog is up (it survives a refresh)
+    answered: null, // { action, at } — answered in another window
+    pending: null, // the decision on its way: { operationId, decision, body, startedAt }
+    activityAt: null, // heartbeat: the newest change the agent made (ISO)
+  };
+  let bar = null;
+  let growEl = null;
+  let infoBtn = null;
+  let waiterEl = null;
+  let conn = "unknown"; // unknown | online | offline | signedout — the heartbeat's verdict
+  let monitorTimer = null;
+  let reloading = false;
+  let restoredPending = null;
+  let lastStripKey = null;
+  let authFromDecision = false; // a refused ANSWER stays on screen until it is retried
+  // The preview on screen predates the agent's latest slide changes: an approval
+  // would cover something the reviewer has not seen. Comments stay allowed.
+  let previewStale = !!CFG.previewStale;
+  const notices = {}; // id → { node, key }
+  // Hosted: the workspace page frames this gate and shows its MESSAGES from what
+  // this page publishes — the status line, the notices and banners, the hand-off
+  // dialog. The bar (brand, title, the overlay's notes) stays the gate's; the
+  // strips stay built, since the overlays measure them, but hidden.
+  const hosted = !!CFG.embedded && typeof window !== "undefined" && window.parent !== window;
+  const noticeModels = {}; // id → the notice as shown, for the host
+  const banners = []; // the not-asked / approved banners, in order
+  const chromeActions = {}; // host action id → handler
+  let waiterModel = null; // { cls, text, detail, spin } — the page's status badge
+  let notAskedNote = ""; // the badge's tooltip while the agent has not asked yet
+  let approvedNote = ""; // ...and once this content is approved and nobody asks again
+  let toastSeq = 0;
+  let lastChromeKey = null;
+
+  function logoNode(cls, idSuffix) {
+    const wrap = el("div", cls || "sm-logo");
+    wrap.appendChild(el("div", "sm-logo-svg", logoWithIds(idSuffix || "")));
+    if (CFG.logoMark) {
+      const img = el("img", "sm-logo-img");
+      img.src = CFG.logoMark;
+      img.alt = "";
+      img.onerror = () => img.remove();
+      wrap.appendChild(img);
+    }
+    return wrap;
+  }
+
+  function mkButton(label, variant, iconName) {
+    const b = el("button", "sm-btn sm-btn-" + variant, (iconName ? ICONS[iconName] : "") + "<span></span>");
+    b.type = "button";
+    b.querySelector("span").textContent = label;
+    return b;
+  }
+
+  function injectAssets(css) {
+    const style = el("style");
+    style.id = "sm-gate-style";
+    style.textContent = SHELL_CSS + (css || "");
+    document.head.appendChild(style);
+    const pre1 = el("link");
+    pre1.rel = "preconnect";
+    pre1.href = "https://fonts.googleapis.com";
+    const pre2 = el("link");
+    pre2.rel = "preconnect";
+    pre2.href = "https://fonts.gstatic.com";
+    pre2.crossOrigin = "anonymous";
+    const 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);
+  }
+
+  // The top bar: brand + title/hint + a flexible middle the overlay fills
+  // (`bar.grow` is the slot before the right-hand controls).
+  function buildBar(title, hint) {
+    bar = el("div", "sm-o sm-bar");
+    bar.setAttribute("data-sm-overlay", "1");
+    const 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"));
+    const meta = el("div", "sm-meta");
+    const titleEl = el("div", "t");
+    titleEl.appendChild(document.createTextNode(title));
+    // The notes in the middle of the bar fold into this (i) when there is no
+    // room for them — squeezed into a one-word column they read as noise.
+    infoBtn = el("button", "sm-info", "i");
+    infoBtn.type = "button";
+    infoBtn.title = "About this page";
+    infoBtn.setAttribute("aria-label", "About this page");
+    infoBtn.onclick = (e) => {
+      e.stopPropagation();
+      toggleInfo();
+    };
+    titleEl.appendChild(infoBtn);
+    meta.appendChild(titleEl);
+    const hintEl = el("div", "h");
+    hintEl.textContent = hint || "";
+    meta.appendChild(hintEl);
+    bar.appendChild(meta);
+    growEl = el("div", "sm-grow");
+    bar.appendChild(growEl);
+    if (CFG.embedded) {
+      // Workspace only: the page's one status badge (ready for review, paste
+      // the message, picked up, approved), refreshed with every heartbeat.
+      waiterEl = el("div", "sm-waiter");
+      waiterEl.style.display = "none";
+      bar.appendChild(waiterEl);
+    }
+    document.body.appendChild(bar);
+    if (hosted) document.documentElement.classList.add("sm-hosted");
+    // The chrome height is measured, so it is re-measured whenever it can have
+    // changed: a frame that loaded hidden (0 px) or narrow (strips wrapped tall)
+    // and is shown later, a resize, a strip that rewraps. Measured once, the
+    // surface sat under the strips or far below them until the next heartbeat —
+    // and while the workspace is offline there is none.
+    window.addEventListener("resize", offsetSurface);
+    watchSize(bar, offsetSurface);
+    watchSize(growEl, fitBar);
+    setTimeout(offsetSurface, 0);
+    if (CFG.embedded) startMonitor();
+    return { bar, titleEl, hintEl, grow: growEl };
+  }
+
+  // The middle of the bar is what is left after brand, title and controls. Under
+  // ~300px a note there is unreadable: the bar goes "tight" and the notes move
+  // behind the (i).
+  function fitBar() {
+    if (!bar || !growEl) return;
+    const tight = growEl.clientWidth < 300;
+    bar.classList.toggle("is-tight", tight);
+    if (infoBtn) infoBtn.classList.toggle("has", tight && infoNotes().length > 0);
+  }
+  function infoNotes() {
+    if (!growEl) return [];
+    return Array.prototype.filter.call(growEl.querySelectorAll(".sm-note"), (n) => !(n.classList.contains("sm-chart-note") && !n.classList.contains("on")));
+  }
+  function toggleInfo() {
+    const old = document.getElementById("sm-info-pop");
+    if (old) {
+      old.remove();
+      return;
+    }
+    const pop = el("div", "sm-o sm-info-pop");
+    pop.id = "sm-info-pop";
+    pop.setAttribute("data-sm-overlay", "1");
+    infoNotes().forEach((n) => pop.appendChild(el("p", null, n.innerHTML)));
+    const r = infoBtn.getBoundingClientRect();
+    pop.style.top = r.bottom + 10 + "px";
+    pop.style.left = Math.max(12, Math.min(r.left - 12, window.innerWidth - 392)) + "px";
+    document.body.appendChild(pop);
+    const close = (e) => {
+      if (e && pop.contains(e.target)) return;
+      pop.remove();
+      document.removeEventListener("pointerdown", close, true);
+    };
+    setTimeout(() => document.addEventListener("pointerdown", close, true), 0);
+  }
+
+  // ---------- the heartbeat monitor (workspace page only) ----------
+  // One poll every 2 s for the page's whole life — it never times out (the
+  // workspace page has no "session ended"). It drives the waiter chip, the
+  // offline / signed-out states, the hand-over (picked up? still revising?) and
+  // the round: a newer version reloads the page, keeping everything unsent.
+  function startMonitor() {
+    if (!CFG.heartbeat || monitorTimer) return;
+    tick();
+    monitorTimer = setInterval(tick, 2000);
+  }
+  function tick() {
+    let p;
+    try {
+      p = fetch(CFG.heartbeat, { cache: "no-store", credentials: "same-origin" });
+    } catch (e) {
+      p = Promise.reject(e);
+    }
+    Promise.resolve(p)
+      .then(
+        (r) =>
+          r
+            .json()
+            .catch(() => null)
+            .then((b) => SES.readBeat(r.status, b, opts.service)),
+        () => ({ conn: "offline", beat: null }),
+      )
+      .then(onBeat, () => {});
+  }
+  function onBeat(r) {
+    const was = conn;
+    conn = r.conn;
+    if (conn === "signedout") showNotice("auth", authNotice());
+    else if (!authFromDecision) clearNotice("auth");
+    if (conn !== "online") {
+      renderWaiter();
+      renderStale();
+      return;
+    }
+    // The workspace answers again: an answer that waited for it goes now.
+    if (was === "offline" || was === "signedout") SES.retryDecision();
+    const beat = r.beat;
+    if (beat.activityAt) state.activityAt = beat.activityAt;
+    if (typeof beat.previewStale === "boolean") setPreviewStale(beat.previewStale);
+    else renderStale();
+    // the agent received the answer (the user pasted the message, the agent ran its command)
+    if (state.phase === "handoff" && state.task) {
+      const at = SES.pickedUpAt(beat, state.task);
+      if (at) pickedUp(at);
+    }
+    // answered in another window while this one still offers the choice
+    if (CFG.asked && !state.phase && !state.pending && !isWorking() && beat.answered && beat.answered.taskId === CFG.asked) {
+      answeredElsewhere({ action: beat.answered.action, at: beat.answered.at });
+    }
+    if (beat.round && CFG.round && beat.round !== CFG.round) roundMoved(beat);
+    renderWaiter();
+    renderRevising();
+  }
+
+  // A newer version (or a new request from the agent) is on the server.
+  function roundMoved(beat) {
+    if (reloading || state.pending || (SES && SES.decisionPending())) return; // mid-submit: its answer decides
+    // A hand-over in progress stays on screen: the user's OWN answer can move the
+    // round (an approve that commits inline edits changes the content; one the
+    // agent never asked for creates its request). The pickup ends the hand-over;
+    // a newer version loads after that.
+    if (state.phase === "handoff") return;
+    // the veil after an approval stays up until the agent asks for something new
+    if ((state.phase === "approved" || state.phase === "answered") && !beat.taskId) return;
+    const blocker = reloadBlocker();
+    if (blocker) {
+      showNotice("newer", newerNotice(blocker));
+      return; // "typing" reloads on a later tick, "edits" only on the button
+    }
+    reload();
+  }
+  function reload() {
+    if (reloading) return;
+    reloading = true;
+    if (monitorTimer) clearInterval(monitorTimer);
+    reloadIntoNewRound();
+  }
+
+  function authNotice() {
+    return { tone: "error", title: "Your workspace signed you out", text: "Ask your agent to open the slidemind workspace. What you wrote here is kept." };
+  }
+  function newerNotice(blocker) {
+    return blocker === "edits"
+      ? {
+          tone: "info",
+          title: "A newer version is ready",
+          text: "Your agent changed " + what.revising + ". Your edits here are not sent — reloading shows the new version without them.",
+          actions: [{ label: "Reload", primary: true, onClick: reload }],
+        }
+      : {
+          tone: "info",
+          title: "A newer version is ready",
+          text: "It loads as soon as you finish what you are writing — nothing you wrote is lost.",
+          actions: [{ label: "Reload now", onClick: reload }],
+        };
+  }
+
+  // ---------- the waiter chip ----------
+  // The page's one status badge. A STATE (approved, still being written, the
+  // agent revising, waiting, away) is said here in a few words, its why in the
+  // tooltip — never as a banner; a banner is for something the user must do.
+  function renderWaiter() {
+    let cls = "";
+    let text = null;
+    let detail = "";
+    let spin = false;
+    let action = null; // a click on the badge runs this chrome action
+    if (conn === "offline") {
+      cls = "warn";
+      text = "Reconnecting…";
+      detail = "Lost the connection to the workspace. What you wrote is kept.";
+    } else if (conn === "signedout") {
+      cls = "err";
+      text = "Signed out";
+    } else if (conn === "unknown" || state.phase === "answered") {
+      text = null; // nothing proven yet / nothing left to hand over
+    } else if (alreadyApproved()) {
+      cls = "on";
+      text = reviewNotNeeded() ? "No review needed" : "Approved" + (approvedDay() ? " · " + approvedDay() : "");
+      detail = reviewNotNeeded() ? approvedNote : [what.approved + " approved " + approvedLabel() + ".", approvedNote].filter(Boolean).join(" ");
+    } else if (state.phase === "approved") {
+      cls = "on";
+      text = "Approved";
+      detail = "Your agent has your approval and continues.";
+    } else if (state.phase === "revising") {
+      const s = revisingStatus({ since: state.revisingSince, activityAt: state.activityAt, now: now() });
+      cls = s.stalled ? "warn" : "on";
+      spin = !s.stalled;
+      text = s.stalled ? "Your agent seems to have stopped" : "Your agent is working on your comments";
+      detail = s.lastChange ? "Last change at " + hhmm(s.lastChange) + ". This page updates by itself." : "This page updates by itself.";
+    } else if (state.phase === "handoff") {
+      // The STATE only. What to do about it was said once, in the dialog right
+      // after the click — no second strip repeating it. A click on the badge
+      // brings that dialog (and the message) back.
+      text = "Answer saved";
+      detail = "Click to see the message to paste into your agent chat.";
+      action = "handoff-open";
+    } else if (isWorking()) {
+      cls = "on";
+      spin = true;
+      text = "Your agent is working on it";
+      detail = workingNote() || "This page updates by itself.";
+    } else if (notAskedYet()) {
+      text = "Not ready for review yet";
+      detail = notAskedNote || "Your agent is still working on " + what.revising + ". This page updates by itself when it asks you.";
+    } else if (CFG.asked) {
+      cls = "on";
+      text = "Ready for your review";
+      detail = "When you are done, you get a message to paste into your agent chat.";
+    }
+    waiterModel = text ? { cls, text, detail, spin, action } : null;
+    if (!waiterEl) return publishChrome();
+    if (!text) {
+      waiterEl.style.display = "none";
+      publishChrome();
+      return;
+    }
+    waiterEl.style.display = "";
+    waiterEl.className = "sm-waiter" + (cls ? " " + cls : "") + (action ? " act" : "");
+    waiterEl.title = detail;
+    waiterEl.onclick = action ? () => chromeActions[action] && chromeActions[action]() : null;
+    if (waiterEl.textContent !== text) {
+      waiterEl.innerHTML = '<span class="dot"></span><span></span>';
+      waiterEl.lastChild.textContent = text;
+    }
+    publishChrome();
+  }
+
+  // Has the agent asked for this review yet? (workspace: a pending task)
+  function notAskedYet() {
+    return !!CFG.embedded && !CFG.asked && !CFG.approved && !isWorking();
+  }
+  // This exact content is approved and nobody asks again: nothing to do here.
+  function alreadyApproved() {
+    return !!CFG.embedded && !!CFG.approved && !CFG.asked && !isWorking();
+  }
+  // Approved before, and the agent asks again (it wants the answer for ITS
+  // request): Approve stays available — "approved" next to "your turn" is the
+  // contradiction this replaces. A deck that never needed a review is not
+  // "approved before": asked, it is an ordinary question.
+  function askedAgain() {
+    return !!CFG.embedded && !!CFG.approved && !!CFG.asked && !isWorking() && !reviewNotNeeded();
+  }
+  // Adopted from the user's own PowerPoint file: settled like an approved deck,
+  // but nobody approved anything, so it is never worded as an approval.
+  function reviewNotNeeded() {
+    return !!(CFG.approved && CFG.approved.notNeeded);
+  }
+  function decisionPending() {
+    return !!state.pending;
+  }
+  function isPreviewStale() {
+    return previewStale;
+  }
+  function setPreviewStale(stale) {
+    const changed = stale !== previewStale;
+    previewStale = stale;
+    renderStale();
+    if (changed) onChange();
+  }
+  // One plain line while it lasts; while the agent revises THIS page's comments
+  // the revising strip already says the slides are changing. Before the first
+  // beat nothing is claimed.
+  function renderStale() {
+    if (!previewStale || !opts.staleLine || isWorking() || state.phase || conn === "unknown") return clearNotice("stale");
+    if (opts.staleLineIdle) showNotice("stale", Object.assign({ tone: "info" }, opts.staleLineIdle));
+    else showNotice("stale", { tone: "info", title: opts.staleLine });
+  }
+
+  // The agent asked again on the same bytes: nothing was worked in.
+  function showAskedAgainUnchanged() {
+    showNotice("again", {
+      tone: "info",
+      title: "Nothing changed since your last answer",
+      text: "If something still needs to change, say so in a comment.",
+      dismiss: true,
+    });
+  }
+  // Is this row part of the answer on its way? It is frozen until the server
+  // answers — editing or deleting it then would show text the agent never got.
+  function inFlight(id) {
+    const p = state.pending;
+    return !!(p && p.body && (p.body.comments || []).some((w) => w && w.id === id));
+  }
+
+  // ---------- the strips under the bar ----------
+  function watchSize(node, fn) {
+    if (typeof ResizeObserver === "function") new ResizeObserver(() => fn()).observe(node);
+  }
+  function stripHost() {
+    let host = document.getElementById("sm-strips");
+    if (!host) {
+      host = el("div", "sm-o sm-strips");
+      host.id = "sm-strips";
+      host.setAttribute("data-sm-overlay", "1");
+      document.body.appendChild(host);
+      watchSize(host, offsetSurface);
+    }
+    return host;
+  }
+  // The strips make the chrome taller; the overlay refits its surface (rail +
+  // stage) under the total, so nothing is painted over them.
+  function offsetSurface() {
+    const host = document.getElementById("sm-strips");
+    const h = host ? host.offsetHeight : 0;
+    const total = (bar ? bar.offsetHeight || 62 : 62) + h; // hosted: the strips are hidden, so h is 0
+    document.documentElement.style.setProperty("--deck-chrome-h", total + "px");
+    onOffset(total);
+    fitBar();
+  }
+
+  // A notice: one line of what happened + at most one thing to do. `n`:
+  // { tone: info|warn|error|ok, title, text, spin, actions: [{label, primary, onClick}], dismiss }.
+  // Re-showing the same notice is free (the heartbeat re-asserts some every 2 s).
+  function showNotice(id, n) {
+    const key = JSON.stringify([n.tone, n.title, n.text, n.spin, (n.actions || []).map((a) => a.label), n.dismiss]);
+    const have = notices[id];
+    if (have && have.key === key && have.node.parentNode) return;
+    const node = have && have.node.parentNode ? have.node : el("div");
+    node.className = "sm-notice sm-notice--" + (n.tone || "info");
+    node.setAttribute("data-notice", id);
+    node.innerHTML =
+      (n.spin ? '<div class="sm-spin sm-spin-lg"></div>' : n.tone === "ok" ? ICONS.check : n.tone === "error" || n.tone === "warn" ? ICONS.message : ICONS.sparkles) +
+      '<div class="txt"><b></b><span></span></div><div class="acts"></div>';
+    node.querySelector(".txt b").textContent = n.title || "";
+    node.querySelector(".txt span").textContent = n.text || "";
+    const acts = node.querySelector(".acts");
+    (n.actions || []).forEach((a) => {
+      const b = el("button", "sm-btn " + (a.primary ? "sm-btn-primary" : "sm-btn-ghost"), "<span></span>");
+      b.type = "button";
+      b.querySelector("span").textContent = a.label;
+      b.onclick = a.onClick;
+      acts.appendChild(b);
+    });
+    if (n.copy) appendCopy(acts);
+    if (n.dismiss) {
+      const x = el("button", "sm-notice-x", ICONS.x);
+      x.type = "button";
+      x.title = "Dismiss";
+      x.setAttribute("aria-label", "Dismiss");
+      x.onclick = () => clearNotice(id);
+      acts.appendChild(x);
+    }
+    if (!node.parentNode) stripHost().appendChild(node);
+    notices[id] = { node, key };
+    noticeModels[id] = n;
+    offsetSurface();
+    publishChrome();
+  }
+  function clearNotice(id) {
+    const have = notices[id];
+    if (!have) return;
+    delete notices[id];
+    delete noticeModels[id];
+    if (have.node.parentNode) have.node.parentNode.removeChild(have.node);
+    offsetSurface();
+    publishChrome();
+  }
+
+  // Not asked yet / approved and done are STATES: standalone they are a strip
+  // under the bar, hosted they are the status badge (renderWaiter) and never a
+  // banner (chromeModel leaves them out).
+  function showNotAskedBanner(text) {
+    notAskedNote = text;
+    const node = el("div", "sm-o sm-approved-banner sm-notasked");
+    node.setAttribute("data-sm-overlay", "1");
+    node.innerHTML = ICONS.send + '<div class="txt"><b>Not ready for review yet</b><span></span></div>';
+    node.querySelector("span").textContent = text;
+    stripHost().appendChild(node);
+    banners.push({ id: "not-asked", tone: "info", title: "Not ready for review yet", text });
+    offsetSurface();
+    renderWaiter();
+  }
+
+  function approvedWhen() {
+    const at = (CFG.approved || {}).at;
+    const when = at ? new Date(at) : null;
+    return when && !isNaN(when.getTime()) ? when : null;
+  }
+  // "6 Oct" — the badge's date
+  function approvedDay() {
+    const when = approvedWhen();
+    return when ? when.toLocaleDateString(undefined, { day: "numeric", month: "short" }) : "";
+  }
+  function approvedLabel() {
+    const a = CFG.approved || {};
+    const when = approvedWhen();
+    const t = when ? approvedDay() + ", " + hhmm(when) : "";
+    return (t ? "on " + t : "") + (a.by ? (t ? " by " : "by ") + a.by : "");
+  }
+  // Approved and done (`askTitle` absent): the badge's tooltip, a strip only
+  // standalone. Approved and asked AGAIN (`askTitle`): the user has to act, so
+  // it is a notice, titled with what is asked.
+  function showApprovedBanner(text, askTitle) {
+    if (!askTitle) approvedNote = text;
+    const title = askTitle || (reviewNotNeeded() ? "No review needed" : what.approved + " approved " + approvedLabel());
+    const body = askTitle ? "You approved it " + approvedLabel() + ". " + text : text;
+    const node = el("div", "sm-o sm-approved-banner");
+    node.setAttribute("data-sm-overlay", "1");
+    node.innerHTML = ICONS.check + '<div class="txt"><b></b><span></span></div>';
+    node.querySelector("b").textContent = title;
+    node.querySelector("span").textContent = body;
+    stripHost().appendChild(node);
+    banners.push({ id: askTitle ? "asked-again" : "approved", tone: askTitle ? "info" : "ok", title, text: body });
+    offsetSurface();
+    renderWaiter();
+  }
+
+  // Copy the message that brings the agent back (the server's words: the deck,
+  // the answer and the command that receives it). `done(ok)` says whether a copy
+  // path REALLY succeeded — the clipboard API first, a selected textarea second
+  // (no permission needed; it works in Codex's own browser pane too). The page
+  // never says "Copied" for a copy that did not happen.
+  function copyText(text, done) {
+    const fallback = () => {
+      let ok = false;
+      try {
+        const ta = el("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "");
+        ta.style.cssText = "position:fixed;top:-1000px;opacity:0;";
+        document.body.appendChild(ta);
+        ta.select();
+        ok = document.execCommand("copy") === true;
+        ta.remove();
+      } catch {
+        ok = false;
+      }
+      done(ok);
+    };
+    try {
+      navigator.clipboard.writeText(text).then(() => done(true), fallback);
+    } catch {
+      fallback();
+    }
+  }
+  function copyMessageButton(cls) {
+    const b = el("button", cls || "sm-copy-msg", ICONS.copy + "<span>Copy message</span>");
+    b.type = "button";
+    b.onclick = () => {
+      copyText(state.agentPrompt || "", (ok) => {
+        b.querySelector("span").textContent = ok ? "Copied" : "Select it and press ⌘C";
+      });
+    };
+    return b;
+  }
+  function appendCopy(parent, cls) {
+    if (state.agentPrompt) parent.appendChild(copyMessageButton(cls));
+  }
+
+  // The hand-over strip under the bar: what happened to the answer, the one
+  // thing to do (if any) and a copy button. While the agent revises it shows the
+  // agent's own last change (heartbeat activityAt); quiet for 5 minutes, it says
+  // the agent may have stopped. Re-rendered on every heartbeat, rebuilt only
+  // when its words change.
+  function stripModel() {
+    const t = now();
+    const approve = state.decision === "approve";
+    switch (state.phase) {
+      case "handoff":
+        // no warning: the dialog after the click already said "paste it", once
+        return {
+          icon: ICONS.check,
+          title: approve ? "Approval saved" : "Comments saved",
+          text: "Paste the message into your agent chat.",
+          copy: true,
+        };
+      case "answered":
+        return { tone: "ok", icon: ICONS.check, title: "Already answered — approved" + (state.answered && state.answered.at ? " at " + hhmm(state.answered.at) : ""), text: "This was answered in another window. Nothing else to do here." };
+      case "revising": {
+        const s = revisingStatus({ since: state.revisingSince, activityAt: state.activityAt, now: t });
+        // it HAS the comments (the receipt landed) — the message would only ask again; a word to the agent is enough
+        if (s.stalled) return { tone: "warn", icon: ICONS.send, title: "Your agent seems to have stopped", text: "Go back to your agent and say:", say: "continue" };
+        return {
+          spin: true,
+          title: "Your agent is revising " + what.revising,
+          text: s.lastChange
+            ? "Last change " + hhmm(s.lastChange) + " (" + ago(t - s.lastChange) + ") · this page updates by itself."
+            : "It has your comments since " + hhmm(state.revisingSince || t) + " · this page updates by itself.",
+        };
+      }
+      default:
+        return { icon: ICONS.check, title: workingNote() || "Saved", text: "This page updates by itself." };
+    }
+  }
+  function renderRevising() {
+    let node = document.getElementById("sm-revising");
+    const show = !!CFG.embedded && (isWorking() || state.phase === "revising" || state.phase === "handoff");
+    if (!show || state.phase === "approved") {
+      if (node && node.parentNode) node.parentNode.removeChild(node);
+      lastStripKey = null;
+      offsetSurface();
+      publishChrome();
+      return;
+    }
+    const m = stripModel();
+    const key = JSON.stringify([m.tone, m.title, m.text, m.say, m.copy && !!state.agentPrompt]);
+    if (node && key === lastStripKey) return publishChrome();
+    lastStripKey = key;
+    if (!node) {
+      node = el("div", "sm-o sm-revising");
+      node.id = "sm-revising";
+      node.setAttribute("data-sm-overlay", "1");
+      stripHost().appendChild(node);
+    }
+    node.className = "sm-o sm-revising" + (m.tone ? " sm-revising--" + m.tone : "");
+    node.innerHTML = (m.spin ? '<div class="sm-spin sm-spin-lg"></div>' : '<span class="ic">' + (m.icon || ICONS.check) + "</span>") + '<div class="txt"><b></b><span></span></div>';
+    node.querySelector(".txt b").textContent = m.title;
+    node.querySelector(".txt span").textContent = m.text;
+    if (m.say) {
+      const say = el("span", "sm-say");
+      say.textContent = m.say;
+      node.querySelector(".txt span").append(" ", say);
+    }
+    if (m.copy) appendCopy(node.querySelector(".txt"));
+    offsetSurface();
+    publishChrome();
+  }
+
+  // A transient toast at the top ("Your agent picked it up at 14:32").
+  function showToast(title, detail) {
+    if (hosted) {
+      // the host shows it as a notice that goes away by itself
+      const id = "toast-" + ++toastSeq;
+      showNotice(id, { tone: "ok", title, text: detail || "", dismiss: true });
+      setTimeout(() => clearNotice(id), 9000);
+      return;
+    }
+    const node = el("div", "sm-o sm-arrived");
+    node.setAttribute("data-sm-overlay", "1");
+    node.innerHTML = ICONS.check + '<div class="txt"><b></b><span></span></div>';
+    node.querySelector("b").textContent = title;
+    node.querySelector("span").textContent = detail || "";
+    document.body.appendChild(node);
+    setTimeout(() => {
+      node.classList.add("out");
+      setTimeout(() => {
+        if (node.parentNode) node.parentNode.removeChild(node);
+      }, 400);
+    }, 9000);
+  }
+  // The agent's next version landed: say so, loudly and briefly.
+  function showArrived(detail) {
+    showToast("Your agent’s new version is ready", detail);
+  }
+
+  // After every answer: the user has ONE thing to do — paste the message into
+  // their agent chat. The title says that; the line under it follows the copy
+  // icon, which is the only thing that writes the clipboard (it is the user's).
+  // Same words every time, whatever any agent process is doing.
+  const HANDOFF_TITLE = "Paste this into your agent chat";
+  function pasteKey() {
+    return /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || "") ? "⌘V" : "Ctrl+V";
+  }
+  function handoffLine(copied) {
+    if (copied === true) return "Copied — press " + pasteKey() + " there and send.";
+    if (copied === false) return "Select the message, copy it, paste it there and send.";
+    return "Copy it, press " + pasteKey() + " there and send.";
+  }
+  // The copy icon: a click copies, the icon turns into a check for a moment.
+  function copyIconButton(text, onCopied) {
+    const b = el("button", "sm-copy-icon", ICONS.copy);
+    b.type = "button";
+    b.title = "Copy";
+    b.setAttribute("aria-label", "Copy message");
+    b.onclick = () =>
+      copyText(text, (ok) => {
+        if (onCopied) onCopied(ok);
+        if (!ok) return;
+        b.innerHTML = ICONS.check;
+        b.classList.add("is-copied");
+        b.title = "Copied";
+        clearTimeout(b._reset);
+        b._reset = setTimeout(() => {
+          b.innerHTML = ICONS.copy;
+          b.classList.remove("is-copied");
+          b.title = "Copy";
+        }, 2000);
+      });
+    return b;
+  }
+  function showHandoff() {
+    state.handoffOpen = true;
+    onSaveCtx();
+    if (hosted) return publishChrome(); // the host's own dialog, from handoffModel()
+    const old = document.getElementById("sm-handoff");
+    if (old && old.parentNode) old.parentNode.removeChild(old);
+    const veil = el("div", "sm-o sm-handoff");
+    veil.id = "sm-handoff";
+    veil.setAttribute("data-sm-overlay", "1");
+    veil.setAttribute("role", "dialog");
+    veil.setAttribute("aria-modal", "true");
+    const box = el("div", "sm-handoff-box");
+    box.innerHTML =
+      '<div class="sm-handoff-head">' + ICONS.check + "<span></span></div>" +
+      '<p class="sm-handoff-p big"></p>' +
+      '<div class="sm-msgbox"><textarea class="sm-handoff-msg" readonly rows="2"></textarea></div>';
+    box.querySelector(".sm-handoff-head span").textContent = HANDOFF_TITLE;
+    const line = box.querySelector(".sm-handoff-p");
+    line.textContent = handoffLine(null);
+    const msg = box.querySelector(".sm-handoff-msg");
+    msg.value = state.agentPrompt || "";
+    let copy = null;
+    if (state.agentPrompt) {
+      copy = copyIconButton(state.agentPrompt, (ok) => {
+        line.textContent = handoffLine(ok);
+        if (!ok) msg.select();
+      });
+      box.querySelector(".sm-msgbox").appendChild(copy);
+    }
+    const row = el("div", "sm-handoff-row");
+    const ok = el("button", "sm-handoff-btn primary", ICONS.check + "<span>Done</span>");
+    ok.type = "button";
+    ok.onclick = () => closeHandoff();
+    row.appendChild(ok);
+    box.appendChild(row);
+    veil.appendChild(box);
+    document.body.appendChild(veil);
+    // the whole message shows, however long its path: the box grows to fit it
+    msg.style.height = msg.scrollHeight + 2 + "px";
+    // the next thing to do is the copy: the icon has the focus, so Enter copies
+    (copy || ok).focus();
+  }
+  function closeHandoff() {
+    state.handoffOpen = false;
+    onSaveCtx();
+    const old = document.getElementById("sm-handoff");
+    if (old && old.parentNode) old.parentNode.removeChild(old);
+    publishChrome();
+  }
+  function handoffModel() {
+    return {
+      title: HANDOFF_TITLE,
+      text: handoffLine(null),
+      message: state.agentPrompt || "",
+      copy: state.agentPrompt || "",
+      actions: [{ id: "handoff-close", label: "Done", primary: true }],
+    };
+  }
+  chromeActions["handoff-close"] = closeHandoff;
+  // The badge brings the dialog back, with the message and its copy icon.
+  chromeActions["handoff-open"] = () => {
+    if (state.phase !== "handoff") return;
+    showHandoff();
+  };
+
+  // ---------- the chrome, published to the host ----------
+  // Everything this page would paint above its content, as one object the
+  // workspace page renders in its own chrome: the status line, the notices and
+  // banners (in strip order), the revising strip, the hand-off dialog. Posted
+  // only when it changed; a click on any of it comes back as a chrome event.
+  function chromeModel() {
+    const list = [];
+    const act = (nid, actions) =>
+      (actions || []).map((a, i) => {
+        const id = nid + ":" + i;
+        chromeActions[id] = a.onClick;
+        return { id, label: a.label, primary: !!a.primary };
+      });
+    Object.keys(noticeModels).forEach((id) => {
+      const n = noticeModels[id];
+      list.push({ id, tone: n.tone || "info", title: n.title || "", text: n.text || "", spin: !!n.spin, dismiss: !!n.dismiss, copy: n.copy ? state.agentPrompt || "" : "", actions: act(id, n.actions) });
+    });
+    // a state is the status badge's, never a banner: only "asked again" (the user must act) stays
+    banners.forEach((b) => b.id !== "approved" && b.id !== "not-asked" && list.push(b));
+    const strip = !!CFG.embedded && (isWorking() || state.phase === "revising" || state.phase === "handoff") && state.phase !== "approved";
+    if (strip) {
+      // revising / working / answer saved are the badge's; the strip is a notice
+      // only when something went wrong (the agent seems to have stopped). The
+      // paste itself was asked once, by the dialog after the click.
+      const m = stripModel();
+      if (m.tone === "warn") list.push({ id: "revising", tone: "warn", title: m.title, text: m.text, say: m.say || "", spin: false, copy: m.copy ? state.agentPrompt || "" : "" });
+    }
+    const w = waiterModel;
+    return {
+      status: w ? { text: w.text, detail: w.detail || "", spin: !!w.spin, tone: w.cls === "on" ? "ok" : w.cls === "warn" ? "warn" : w.cls === "err" ? "bad" : "", action: w.action || "" } : null,
+      notices: list,
+      dialog: state.handoffOpen ? handoffModel() : null,
+    };
+  }
+  function publishChrome() {
+    if (!hosted) return;
+    const chrome = chromeModel();
+    const key = JSON.stringify(chrome);
+    if (key === lastChromeKey) return;
+    lastChromeKey = key;
+    try {
+      window.parent.postMessage({ type: "slidemind-view-chrome", chrome }, location.origin);
+    } catch {
+      /* a parent on another origin cannot host this page */
+    }
+  }
+  if (hosted) {
+    window.addEventListener("message", (e) => {
+      const d = e.data;
+      if (e.source !== window.parent || e.origin !== location.origin || !d || d.type !== "slidemind-view-chrome-event" || !d.event) return;
+      const ev = d.event;
+      if (ev.kind === "dismiss") clearNotice(String(ev.id));
+      else if (ev.kind === "action" && typeof chromeActions[ev.id] === "function") chromeActions[ev.id]();
+    });
+  }
+
+  // ---------- the decision ----------
+  // One attempt at a time (the in-flight latch: a double click cannot send
+  // twice). The attempt — with its operationId — is persisted, so a reload in
+  // the middle of a retry re-sends the SAME request.
+  function decide(spec) {
+    if (!SES || state.pending) return false;
+    const body = { decision: spec.decision, comments: spec.comments || [] };
+    if (typeof spec.editedPlan === "string") body.editedPlan = spec.editedPlan;
+    if (typeof spec.design === "string") body.design = spec.design;
+    body.operationId = SES.newOperationId();
+    if (CFG.subjectHash) body.expectedHash = CFG.subjectHash;
+    state.pending = { operationId: body.operationId, decision: spec.decision, body, startedAt: now() };
+    authFromDecision = false;
+    clearNotice("auth");
+    clearNotice("failed");
+    onSaveCtx();
+    run();
+    return true;
+  }
+  function run() {
+    const p = state.pending;
+    SES.decide(p, {
+      onSuccess(ack) {
+        state.pending = null;
+        clearNotice("busy");
+        clearNotice("offline");
+        clearNotice("failed");
+        succeeded(p, ack);
+      },
+      onBusy(info) {
+        showNotice("busy", {
+          tone: "warn",
+          spin: true,
+          title: "Your agent is working on this deck right now",
+          text: "Your answer is kept and sent automatically as soon as it is free.",
+        });
+      },
+      onOffline() {
+        clearNotice("busy");
+        showNotice("offline", { tone: "warn", spin: true, title: "Connection lost", text: "Your answer is kept and sent as soon as the connection is back." });
+      },
+      onFailed(o) {
+        state.pending = null;
+        clearNotice("busy");
+        clearNotice("offline");
+        onSaveCtx();
+        failed(p, o);
+        onChange();
+      },
+    });
+    onChange();
+  }
+
+  function succeeded(p, ack) {
+    readAck(ack);
+    state.decision = p.decision;
+    state.task = ack.task || null;
+    state.decidedAt = now();
+    state.answered = null;
+    // Workspace: always the same hand-over — the one dialog with the message to
+    // paste. Nothing is copied on the user's behalf: their copy-icon click does it.
+    if (CFG.embedded) state.phase = "handoff";
+    onSaveCtx();
+    call("onDecided", p.decision, ack, p.body);
+    const after = () => {
+      renderRevising();
+      renderWaiter();
+      onChange();
+    };
+    if (state.phase === "handoff") showHandoff();
+    after();
+  }
+
+  function failed(p, o) {
+    const approve = p.decision === "approve";
+    switch (o.code) {
+      case "stale_subject":
+      case "local_conflict": {
+        // The preview is older than the slides: keep the page (a reload would
+        // show the same preview again), mute Approve, say why.
+        if (o.details && o.details.previewStale) {
+          setPreviewStale(true);
+          break;
+        }
+        const note = {
+          tone: "info",
+          title: "Your agent updated " + what.revising + " — here is the new version.",
+          text: approve ? "Have a look, then approve again." : "Your comments are kept.",
+        };
+        if (o.details && o.details.current && o.details.current === CFG.subjectHash) {
+          // this page already shows the current version (an answer re-sent after
+          // a reload): reloading would show the same page again
+          showNotice("note", Object.assign({ dismiss: true }, note));
+        } else if (reloadBlocker() === "edits") {
+          showNotice("newer", newerNotice("edits"));
+        } else {
+          SES.noteForNextLoad(note);
+          reload();
+        }
+        break;
+      }
+      case "already_answered":
+        answeredElsewhere(o.details || {});
+        break;
+      case "unauthorized":
+        // the heartbeat may still pass (it rides the page's cookie, the answer
+        // its own token): this notice stays until the reviewer tries again
+        authFromDecision = true;
+        showNotice("auth", Object.assign(authNotice(), { dismiss: true }));
+        break;
+      case "offline":
+        // standalone only — the workspace page waits for the workspace instead
+        showNotice("failed", {
+          tone: "error",
+          title: approve ? "Your approval did not arrive" : "Your comments did not arrive",
+          text: "This page lost its connection to your agent. What you wrote is kept — go back to your agent and ask it to open the review again; this page picks it up by itself.",
+        });
+        call("onLost");
+        break;
+      case "validation_failed":
+        showNotice("failed", { tone: "error", title: "This could not be sent", text: plainMessage(o.message) || "Something in it was not accepted. What you wrote is kept.", dismiss: true });
+        break;
+      default:
+        showNotice("failed", {
+          tone: "error",
+          title: "This could not be sent",
+          text: (plainMessage(o.message) ? plainMessage(o.message) + " " : "") + "What you wrote is kept — try again.",
+          dismiss: true,
+        });
+    }
+    call("onDecisionFailed", o);
+  }
+  // A server message, minus anything that reads like a command to type.
+  function plainMessage(m) {
+    const s = String(m || "").trim();
+    if (!s || /`|slidemind [a-z]/i.test(s)) return "";
+    return /[.!?]$/.test(s) ? s : s + ".";
+  }
+
+  // Another window answered already: switch to that answer, no hand-off.
+  function answeredElsewhere(details) {
+    const d = details || {};
+    const approvedThere = d.action === "approve";
+    state.answered = { action: d.action || null, at: d.at || null };
+    if (CFG.embedded) {
+      if (approvedThere) state.phase = "answered";
+      else {
+        state.decision = "comments";
+        state.phase = "revising";
+        state.revisingSince = (d.at && Date.parse(d.at)) || now();
+      }
+    }
+    onSaveCtx();
+    const at = d.at ? " at " + hhmm(d.at) : "";
+    // Embedded, an approval elsewhere IS the strip ("Already answered —
+    // approved at …"); everything else gets the one-line notice.
+    if (!(CFG.embedded && approvedThere)) {
+      showNotice("answered", {
+        tone: "info",
+        title: d.action ? "Already answered — " + (approvedThere ? "approved" : "comments sent") + at : "Already answered in another window",
+        text: approvedThere ? "This was answered in another window. Nothing else to do here." : "This was answered in another window. What you wrote here is kept.",
+        dismiss: true,
+      });
+    }
+    call("onAlreadyAnswered", state.answered);
+    renderRevising();
+    renderWaiter();
+    onChange();
+  }
+
+  // ---------- the hand-over after the answer ----------
+  function pickedUp(atIso) {
+    const at = Date.parse(atIso) || now();
+    state.pickedUpAt = at;
+    if (state.handoffOpen) closeHandoff();
+    if (state.decision === "approve") {
+      state.phase = "approved";
+      onSaveCtx();
+      call("onApprovalPickedUp", at);
+    } else {
+      state.phase = "revising";
+      state.revisingSince = at;
+      onSaveCtx();
+      showToast("Your agent picked it up at " + hhmm(at), "It is revising " + what.revising + " now.");
+    }
+    renderRevising();
+    renderWaiter();
+    onChange();
+  }
+
+  // The done veil: brand mark + wordmark + a status line. `hide` are the
+  // overlay's own nodes to take off screen behind it.
+  function showVeil(statusHtml, subText, subPulse, hide) {
+    if (bar) bar.style.display = "none";
+    const host = document.getElementById("sm-strips");
+    if (host) host.style.display = "none";
+    (hide || []).forEach((n) => {
+      if (n) n.style.display = "none";
+    });
+    const existing = document.querySelector(".sm-veil[data-sm-overlay]");
+    if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
+    const 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));
+    const sub = el("div", "sub" + (subPulse ? " sm-pulse" : ""));
+    sub.textContent = subText;
+    veil.appendChild(sub);
+    document.body.appendChild(veil);
+    return veil;
+  }
+
+  function requestTabClose() {
+    setTimeout(() => {
+      try {
+        window.open("", "_self");
+        window.close();
+      } catch {
+        // Some browsers only allow script-opened tabs to close themselves.
+      }
+    }, 120);
+  }
+
+  // ---------- the round context ----------
+  function ctxFields() {
+    return {
+      phase: state.phase,
+      decision: state.decision,
+      task: state.task,
+      decidedAt: state.decidedAt,
+      pickedUpAt: state.pickedUpAt,
+      revisingSince: state.revisingSince,
+      handoffOpen: state.handoffOpen,
+      answered: state.answered,
+      prompt: state.agentPrompt,
+      pending: state.pending,
+    };
+  }
+  // A changed nonce that is NOT the next round (see gate-session restore's
+  // `hold`): nothing new was asked, the content moved because of the answer this
+  // page gave — an approve that committed inline edits, an approve the agent
+  // never asked for (the server records the request on the user's behalf), the
+  // agent's own edits while it revises. The hand-over must survive that reload:
+  // an answer still on its way, waiting to be pasted, approved or revised.
+  function holdsRound(ctx) {
+    if (!CFG.embedded || CFG.asked || !ctx) return false;
+    if (ctx.pending && ctx.pending.operationId) return true;
+    return !!ctx.working && (ctx.phase === "handoff" || ctx.phase === "revising" || ctx.phase === "approved" || ctx.phase === "answered");
+  }
+  // Restore the hand-over a previous load of this round saved. Returns whether
+  // this load is the version the user was waiting for (the agent's next round).
+  function restoreCtx(ctx, working, newRound) {
+    if (!ctx) return false;
+    if (typeof ctx.prompt === "string") state.agentPrompt = ctx.prompt;
+    if (working) {
+      state.phase = ctx.phase || null;
+      state.decision = ctx.decision || null;
+      state.task = ctx.task || null;
+      state.decidedAt = ctx.decidedAt || null;
+      // a page from before the paste protocol saved "handing": it is the hand-off now
+      if (state.phase === "handing") state.phase = "handoff";
+      state.pickedUpAt = ctx.pickedUpAt || null;
+      state.revisingSince = typeof ctx.revisingSince === "number" ? ctx.revisingSince : null;
+      state.handoffOpen = !!ctx.handoffOpen;
+      state.answered = ctx.answered || null;
+    }
+    // A decision still on its way survives the reload; resume() re-sends it.
+    if (CFG.embedded && ctx.pending && ctx.pending.body && ctx.pending.operationId) restoredPending = ctx.pending;
+    return !!(newRound && ctx.decision === "comments" && (ctx.phase === "revising" || ctx.phase === "handing" || ctx.phase === "handoff"));
+  }
+  // Called by the overlay once its page is built: the next-load note, the
+  // hand-over in progress, and an answer that was still on its way.
+  function resume() {
+    const note = SES ? SES.consumeNote() : null;
+    if (note) showNotice("note", { tone: note.tone || "info", title: note.title, text: note.text, dismiss: true });
+    if (state.phase === "handoff" && state.handoffOpen) showHandoff();
+    renderStale();
+    if (restoredPending) {
+      // Re-sent as it was, same operationId, whatever this page now shows: the
+      // reload may have come from the answer itself (the workspace reloads the
+      // frame when the plan text moves), and the server replays an answer it
+      // already saved; one it never saw against older content comes back
+      // stale_subject, which says so.
+      state.pending = restoredPending;
+      restoredPending = null;
+      run();
+    }
+    renderRevising();
+    renderWaiter();
+  }
+
+  // A decision's ack: the message the user pastes into their chat with the agent.
+  function readAck(ack) {
+    if (ack && ack.message) state.agentPrompt = ack.message;
+  }
+
+  return {
+    state,
+    ICONS,
+    el,
+    logoNode,
+    wordmarkHtml,
+    mkButton,
+    injectAssets,
+    buildBar,
+    fitBar,
+    notAskedYet,
+    alreadyApproved,
+    reviewNotNeeded,
+    askedAgain,
+    decisionPending,
+    isPreviewStale,
+    inFlight,
+    offsetSurface,
+    showNotice,
+    clearNotice,
+    showNotAskedBanner,
+    showApprovedBanner,
+    copyMessageButton,
+    renderRevising,
+    showToast,
+    showArrived,
+    showAskedAgainUnchanged,
+    showHandoff,
+    showVeil,
+    requestTabClose,
+    decide,
+    restoreCtx,
+    holdsRound,
+    resume,
+    ctxFields,
+    readAck,
+    hhmm,
+  };
+}