@songsid/agend 2.3.0-beta.2 → 2.3.0-beta.3

package/dist/ui/shared/app.css

@@ -119,7 +119,10 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .idc { --id: var(--id-light); --id-name: var(--id-name-light); } }
 :root[data-theme="light"] .idc { --id: var(--id-light); --id-name: var(--id-name-light); }
 .idc.id-ring .av { box-shadow: 0 0 0 2px var(--id); }
-.idc.id-bar { box-shadow: inset 3px 0 0 var(--id); }
+/* #2056: the bar is a plain straight line inside the row: no caps following the row's rounded corners (an inset shadow
+   did), and short of the corners, so the hover and selected highlight's radius is never crossed. */
+.idc.id-bar { position: relative; }
+.idc.id-bar::before { content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: 3px; background: var(--id); pointer-events: none; }
 .idc.id-name .inst-name { color: var(--id-name); }
 .idc-swatches, .idc-places { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .idc-swatches legend, .idc-places legend { font-weight: var(--fw-semibold); margin-bottom: 6px; width: 100%; }
@@ -132,6 +135,20 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .idc-hex { width: 9ch; font-family: var(--font-mono, monospace); }
 .dlg-actions .dlg-spacer { flex: 1 1 auto; }
 .idc-preview { padding: 6px; border-radius: 10px; background: var(--bg-sidebar); max-width: 260px; }
+/* #2056 B: Settings → Web appearance — plain group headings, a "?" per card to its docs section, and the colour card's sample row. */
+.s-ap-group { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); margin: var(--s-4) 0 var(--s-2); }
+.s-ap-group:first-child { margin-top: 0; }
+.s-ap-title { display: flex; align-items: center; gap: var(--s-2); }
+/* The fields' placeholders show the defaults: readable, not the browser's faint grey (dark mode). */
+.s-appearance input::placeholder { color: var(--text-3); opacity: 1; }
+/* A card title in Chinese is never upper-cased ("AGENT 的主題"): the small caps are a Latin convention. */
+:lang(zh-Hant) .card h3 { text-transform: none; letter-spacing: 0; }
+.s-learn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-full); border: 1px solid var(--border);
+  color: var(--text-3); font-size: 11px; text-decoration: none; text-transform: none; letter-spacing: 0; line-height: 1; }
+.s-learn:hover, .s-learn:focus-visible { color: var(--text); border-color: var(--text-3); }
+.s-colors-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
+.s-colors-row .idc-places { margin-bottom: 0; flex: 1 1 220px; }
+.s-colors-sample { flex: 0 1 220px; min-width: 0; }
 .av-text { overflow: hidden; }
 .av .av-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar); }
 /* #1722: the CLI as a letter on the avatar's top-left corner — monochrome (the #1630 ring keeps the colour), cut out like the dot */
@@ -222,11 +239,15 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 .panel-head .sb-open { display: none; }
 .sb-collapsed .panel-head .sb-open { display: inline-flex; }
+/* #2074: a collapsed sidebar's "New agent", beside its ☰ (a phone opens the drawer, which has the row). */
+.panel-head .sb-new { margin-left: calc(-1 * var(--s-1)); }
 /* One row of --header-h on every page (a phone's instance tabs wrap below it): the title, its status and badges on one centre line. */
 .panel-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--header-h) - 2 * var(--s-1)); }
 .panel-title h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; outline: none; }
 .panel-sub { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
 .status { display: inline-flex; align-items: center; gap: 6px; }
+/* #2015: the largest processes, after the host memory chip's text. */
+.host-mem-top { margin-left: var(--s-2); opacity: 0.8; overflow-wrap: anywhere; }
 .panel-actions { display: flex; align-items: center; gap: var(--s-1); }
 /* #1523 N2: the instance view switch — beside the title on a wide screen; on a phone, a row of tabs under the header. */
 .inst-switch.seg { padding: 0; margin: 0; width: auto; max-width: none; flex-shrink: 0; }
@@ -725,6 +746,7 @@ html.lb-open .scroller { overflow: hidden; }
   .sb-open .sidebar { transform: none; visibility: visible; }
   .sb-open .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 39; }
   .panel-head .sb-open { display: inline-flex; }
+  .panel-head .sb-new { display: none; }
   .only-narrow { display: inline-flex; }
   .thread { padding: var(--s-3) var(--s-3) var(--s-2); gap: var(--s-5); }
   .col { padding: var(--s-3) var(--s-3) var(--s-8); }
@@ -1122,6 +1144,114 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
     content: ""; position: absolute; top: var(--s-5); left: calc(-1 * var(--s-4) - 2px); width: var(--s-4); height: 2px; background: var(--border-strong); }
   .org-link { min-height: var(--tap); }
 }
+/* ── #1918: the org chart as a canvas (fleet-canvas.js). SVG with classes only: per-card values are SVG attributes, the
+   view's transform one attribute on .oc-world (#1300). The stage fills the panel's height; touch gestures are the
+   canvas's own (touch-action: none on it only), the page around it still scrolls. ── */
+.oc-bar { flex-wrap: wrap; row-gap: var(--s-2); }
+.oc-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.oc-find { flex: 0 1 260px; min-width: 150px; position: relative; }
+.oc-find input { height: 32px; padding-right: 72px; }
+.oc-found { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; pointer-events: none; }
+.oc-stage { position: relative; height: clamp(420px, calc(100dvh - 240px), 960px); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
+.oc-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
+.oc-svg:active { cursor: grabbing; }
+.oc-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.oc-tree path { fill: none; stroke: var(--border-strong); stroke-width: 1.25; }
+.oc-box { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
+.oc-team.loose .oc-box { stroke-dasharray: 5 4; }
+.oc-box.match { stroke: var(--focus); stroke-width: 2.5; }
+.oc-head { fill: var(--surface-2); }
+.oc-hit { fill: transparent; }
+.oc-toggle:not(.empty) { cursor: pointer; }
+.oc-toggle:focus { outline: none; }
+.oc-toggle:focus-visible .oc-hit { stroke: var(--focus); stroke-width: 2; }
+.oc-caret { fill: var(--text-2); font-size: 12px; }
+.oc-team-name { fill: var(--text); font-size: 13px; font-weight: 600; }
+.oc-team-meta { fill: var(--text-3); font-size: 11px; }
+.oc-team-sum { fill: var(--text-2); font-size: 11.5px; }
+.oc-team.dim { opacity: 0.55; }
+.oc-node.dim { opacity: 0.4; }
+.oc-node { cursor: pointer; }
+.oc-node[role="img"] { cursor: default; }
+.oc-node:focus { outline: none; }
+.oc-card { fill: var(--bg); stroke: var(--border); stroke-width: 1; }
+.oc-node.lead .oc-card { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
+.oc-node:hover .oc-card { stroke: var(--border-strong); }
+.oc-node:focus-visible .oc-card, .oc-node.match .oc-card, .oc-node.match:hover .oc-card { stroke: var(--focus); stroke-width: 2.5; }
+.oc-node.st-missing { opacity: 0.7; }
+.oc-av { fill: var(--surface-2); stroke: var(--surface); stroke-width: 2; }
+.oc-node.idc.id-ring .oc-av { stroke: var(--id); stroke-width: 2.5; }
+.oc-idbar { display: none; }
+.oc-node.idc.id-bar .oc-idbar { display: inline; fill: var(--id); }
+.oc-face.emoji .oc-av { fill: transparent; }
+.oc-av-t { fill: var(--text-2); font-size: 12px; font-weight: 600; }
+.oc-face.emoji .oc-av-t { font-size: 18px; font-weight: normal; }
+.oc-name { fill: var(--text); font-size: 13.5px; font-weight: 600; }
+.oc-node.lead .oc-name { font-size: 15px; }
+.oc-node.idc.id-name .oc-name { fill: var(--id-name); }
+.oc-sub { font-size: 12px; }
+.oc-st { fill: var(--text-2); }
+.oc-st.st-working { fill: var(--ok); } .oc-st.st-needs, .oc-st.st-stuck { fill: var(--warn); } .oc-st.st-crashed { fill: var(--danger); }
+.oc-dot { fill: var(--text-3); stroke: var(--bg); stroke-width: 2; }
+.oc-dot.st-working, .oc-dot.st-idle { fill: var(--ok); } .oc-dot.st-needs, .oc-dot.st-stuck { fill: var(--warn); } .oc-dot.st-crashed { fill: var(--danger); }
+.oc-dot.st-paused { fill: var(--bg); stroke: var(--text-3); stroke-width: 1.5; }
+.oc-zoom { position: absolute; right: var(--s-3); top: var(--s-3); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
+.oc-zoom .icon-btn { width: 36px; height: 34px; border-radius: 0; font-size: 18px; }
+.oc-zoom .icon-btn + .icon-btn { border-top: 1px solid var(--border); }
+.oc-mini { position: absolute; right: var(--s-3); bottom: var(--s-3); width: 180px; height: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
+.oc-mini-team { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 6; }
+.oc-mini-team.needs { fill: var(--warn-bg); stroke: var(--warn); }
+.oc-mini-top { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 6; }
+.oc-mini-team.match { stroke: var(--focus); stroke-width: 14; }
+.oc-mini-hit { fill: var(--focus); }
+.oc-mini-view { fill: none; stroke: var(--focus); stroke-width: 10; }
+/* #1918 phase 3: live traffic. Kind hues kept apart from the state colours (ok = working/idle, warn = needs you, danger). */
+.oc { --fx-task: #b794f6; --fx-send: #2dd4bf; --fx-report: #f472b6; --fx-broadcast: #fb923c; --fx-team: #cbd5e1; }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .oc { --fx-task: #7c3aed; --fx-send: #0f766e; --fx-report: #be185d; --fx-broadcast: #c2410c; --fx-team: #475569; } }
+:root[data-theme="light"] .oc { --fx-task: #7c3aed; --fx-send: #0f766e; --fx-report: #be185d; --fx-broadcast: #c2410c; --fx-team: #475569; }
+.oc-flow { fill: none; stroke-width: 2.5; stroke-linecap: round; }
+.oc-flow-halo { fill: none; stroke: var(--bg); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
+.oc-flow.h-task { stroke: var(--fx-task); } .oc-flow.h-send { stroke: var(--fx-send); } .oc-flow.h-report { stroke: var(--fx-report); }
+.oc-flow.h-broadcast { stroke: var(--fx-broadcast); } .oc-flow.h-team { stroke: var(--fx-team); stroke-width: 3.5; }
+.oc-flow.ph-live { stroke-dasharray: 7 6; animation: oc-dash 0.9s linear infinite; }
+.oc-flow.ph-queued { stroke-dasharray: 2 5; opacity: 0.8; }
+.oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 3s ease-out forwards; }
+.oc-ah.h-task { fill: var(--fx-task); } .oc-ah.h-send { fill: var(--fx-send); } .oc-ah.h-report { fill: var(--fx-report); }
+.oc-ah.h-broadcast { fill: var(--fx-broadcast); } .oc-ah.h-team { fill: var(--fx-team); } .oc-ah.h-fading { fill: var(--text-3); }
+.oc-pulse.h-task { fill: var(--fx-task); } .oc-pulse.h-send { fill: var(--fx-send); } .oc-pulse.h-report { fill: var(--fx-report); }
+.oc-pulse.h-broadcast { fill: var(--fx-broadcast); } .oc-pulse.h-team { fill: var(--fx-team); }
+.oc-fl.dim { opacity: 0.18; }
+.oc-badge rect { fill: var(--surface-2); stroke: var(--border); } .oc-badge text { fill: var(--text-2); font-size: 10.5px; }
+@keyframes oc-dash { to { stroke-dashoffset: -26; } }
+@keyframes oc-fade { from { opacity: 0.8; } to { opacity: 0.15; } }
+.oc-legend { position: absolute; left: var(--s-3); bottom: var(--s-3); max-width: calc(100% - 220px);
+  font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 10px; }
+.oc-legend summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text); }
+.oc-legend[open] summary { margin-bottom: 4px; }
+.oc-lg-rows { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
+.oc-lg { display: inline-flex; align-items: center; gap: 6px; }
+.oc-sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; background: var(--text-3); }
+.oc-sw.h-task { background: var(--fx-task); } .oc-sw.h-send { background: var(--fx-send); } .oc-sw.h-report { background: var(--fx-report); } .oc-sw.h-broadcast { background: var(--fx-broadcast); }
+.oc-sw.ph-queued { background: repeating-linear-gradient(90deg, var(--text-2) 0 3px, transparent 3px 7px); }
+.oc-sw.ph-fading { opacity: 0.5; }
+.oc-live { gap: 6px; }
+.oc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
+.oc-live.on .oc-live-dot { background: var(--ok); }
+.org-sending { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
+.org-send.k-task { color: var(--fx-task); } .org-send.k-report { color: var(--fx-report); } .org-send.k-broadcast { color: var(--fx-broadcast); }
+.org-send.k-send, .org-send.k-query, .org-send.k-update { color: var(--fx-send); }
+@media (prefers-reduced-motion: reduce) {
+  .oc-flow.ph-live { animation: none; stroke-dasharray: none; }
+  .oc-flow.ph-fading { animation: none; opacity: 0.4; }
+  .oc-pulse { display: none; }
+}
+@media (max-width: 640px) {
+  .oc-stage { height: calc(100dvh - 248px); min-height: 340px; }
+  .oc-find { flex: 1 1 150px; }
+  .oc-tools { margin-left: 0; width: 100%; flex-wrap: nowrap; }
+  .oc-mini { display: none; }
+  .oc-legend { max-width: calc(100% - 24px); gap: 2px var(--s-2); }
+}
 /* A phone: Fleet's five tabs fit when only the open one shows its label (the others keep theirs for screen readers). */
 @media (max-width: 479px) {
   .p-fleet .seg-item:not(.active) > span, .p-settings .seg-item:not(.active) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@@ -1200,12 +1330,17 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   font-weight: var(--fw-medium); white-space: nowrap; }
 
 /* #1629 r4 §1 / r4.1 Q3 (a): the identity card (identity-card.js). The size is a class token; its heights are here
-   (S 160 / M 240 / L 360 px, on a phone 120 / 180 / 240); the banner scales with the portrait. Never a style attribute. */
-.id-card { --id-h: 240px; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
-.id-card.card-s { --id-h: 160px; }
-.id-card.card-l { --id-h: 360px; }
-.id-card.card-c { --id-h: 96px; margin: 0; border: 0; border-radius: 0; background: none; }
-.id-banner { display: block; width: 100%; height: calc(var(--id-h) / 2); object-fit: cover; }
+   (S 160 / M 240 / L 360 px, on a phone 120 / 180 / 240). Never a style attribute.
+   #2038: the banner's height follows the card's width — S 4:1, M 3:1, L 2.25:1 — between a floor and a ceiling per size,
+   so it is never a strip across a wide chat and never a wall on a phone; the picture fills it, cropped about its middle.
+   The chat header's card (card-c) follows the same size choice (card-c bs-<size>). */
+.id-card { --id-h: 240px; --id-ar: 3 / 1; --id-bmin: 140px; --id-bmax: 240px; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+.id-card.card-s { --id-h: 160px; --id-ar: 4 / 1; --id-bmin: 100px; --id-bmax: 160px; }
+.id-card.card-l { --id-h: 360px; --id-ar: 9 / 4; --id-bmin: 200px; --id-bmax: 360px; }
+.id-card.card-c { --id-h: 96px; --id-bmin: 120px; --id-bmax: 200px; margin: 0; border: 0; border-radius: 0; background: none; }
+.id-card.card-c.bs-s { --id-ar: 4 / 1; --id-bmin: 96px; --id-bmax: 150px; }
+.id-card.card-c.bs-l { --id-ar: 9 / 4; --id-bmin: 150px; --id-bmax: 220px; }
+.id-banner { display: block; width: 100%; height: auto; aspect-ratio: var(--id-ar); min-height: var(--id-bmin); max-height: var(--id-bmax); object-fit: cover; object-position: 50% 50%; }
 .id-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
 .id-portrait { display: block; flex-shrink: 0; height: var(--id-h); width: auto; max-width: min(calc(var(--id-h) * 0.75), 100%); object-fit: cover; border-radius: var(--r-sm); }
 .id-text { flex: 1; min-width: 0; }
@@ -1263,9 +1398,12 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .chat-card-toggle { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 32px; padding: 0 var(--s-4); border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: pointer; }
 .chat-card-peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
 @media (max-width: 479px) {
-  .id-card.card-s { --id-h: 120px; }
-  .id-card.card-m { --id-h: 180px; }
-  .id-card.card-l { --id-h: 240px; }
+  .id-card.card-s { --id-h: 120px; --id-bmin: 80px; --id-bmax: 120px; }
+  .id-card.card-m { --id-h: 180px; --id-bmin: 100px; --id-bmax: 150px; }
+  .id-card.card-l { --id-h: 240px; --id-bmin: 120px; --id-bmax: 200px; }
+  .id-card.card-c { --id-bmin: 100px; --id-bmax: 140px; }
+  .id-card.card-c.bs-s { --id-bmin: 80px; --id-bmax: 110px; }
+  .id-card.card-c.bs-l { --id-bmin: 110px; --id-bmax: 150px; }
   .id-row { flex-wrap: wrap; }
   .id-text { flex-basis: 100%; }
 }
@@ -1304,6 +1442,10 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .s-fx-owner-row{display:flex;align-items:end;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
 .s-fx-owner-row>label{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;flex:1}
 
+/* #2044: the effect frame's document declares no colour scheme (light). An iframe whose own colour scheme differs
+   from its document's gets an opaque backdrop, so under the dark theme the frame hid the whole chat: keep them equal. */
+.agend-effect-frame { color-scheme: normal !important; }
+
 /* #1629: host-created static poster IMG; geometry and visibility belong to the trusted CSSOM binding. */
 .agend-effect-poster { object-fit: cover !important; object-position: center !important; user-select: none; }
 

package/dist/ui/shared/effect-app-runtime.js

@@ -98,7 +98,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
     if (!registry.ok) throw Error("runtime_unavailable");
     trial = make("trialSource", createEffectTrialSource)({ window: host, current: () => {
       if (!alive()) return false; const v = observe(), c = v.context;
-      return alive() && v.ownerCss === "off" && c.enabled === true && c.show === true && c.previewReady === true && c.optIn === true
+      return alive() && c.enabled === true && c.show === true && c.trialReady === true
         && c.safe === false && c.publicLink === false && c.reducedMotion === false && c.saveData === false && c.hidden === false;
     }, ownerCurrent: (s, name) => sourceAlive(s) && s.name === name,
       stock: () => registry.frameRoot ? make("stock", stockEffectTrust)(host, { frameRoot: registry.frameRoot, ownerCss: observe().ownerCss }) : null,

package/dist/ui/shared/effect-frame.js

@@ -30,16 +30,21 @@ function snapshotRender(raw) {
   return { code: raw.code, params: { ...params }, instance: raw.instance, width: raw.width, height: raw.height, dpr: raw.dpr, assets, wants: [...raw.wants] };
 }
 
+/** Listener transport only; this does not grant HTML-preview or ordinary-effect consent. */
+export function effectTransportReady(host, origin, boot) {
+  try {
+    const target = new URL(origin), page = new URL(host.location.origin);
+    return origin === target.origin && ["http:", "https:"].includes(target.protocol) && ["http:", "https:"].includes(page.protocol)
+      && target.origin !== page.origin && !(page.protocol === "https:" && target.protocol !== "https:") && typeof boot === "string" && /^[0-9a-f]{32}$/.test(boot);
+  } catch { return false; }
+}
+
 /**
  * All options come from the host, never from an agent event or manifest origin. The registry supplies an admitted
  * root and geometry in a later integration. This primitive alone does not implement caps, clipping or profiling.
  */
 export function createEffectFrame({ window: host, root, origin, boot, render, clock = () => performance.now(), onReady = () => {}, onRemove = () => {} } = {}) {
-  let url;
-  try { url = new URL(origin); } catch { return { ok: false, reason: "preview_unknown" }; }
-  if (origin !== url.origin || !["http:", "https:"].includes(url.protocol) || typeof boot !== "string" || !/^[0-9a-f]{32}$/.test(boot)) return { ok: false, reason: "preview_unknown" };
-  let hostOrigin; try { hostOrigin = new URL(host.location.origin); } catch { return { ok: false, reason: "preview_unknown" }; }
-  if (!["http:", "https:"].includes(hostOrigin.protocol) || origin === hostOrigin.origin || hostOrigin.protocol === "https:" && url.protocol !== "https:") return { ok: false, reason: "preview_unknown" };
+  if (!effectTransportReady(host, origin, boot)) return { ok: false, reason: "preview_unknown" };
   const payload = snapshotRender(render);
   if (!payload || !host || !root || root.ownerDocument !== host.document || typeof root.append !== "function" || typeof host.MessageChannel !== "function" || typeof clock !== "function" || typeof onReady !== "function" || typeof onRemove !== "function") return { ok: false, reason: "unsupported" };
   let mounted;

package/dist/ui/shared/effect-geometry.js

@@ -70,36 +70,51 @@ export function createEffectGeometry({ window: host } = {}) {
       frame.remove();
       return { ok: false, reason: "geometry_unknown" };
     }
-    let dead = false;
+    let dead = false, shown = false;
     const hide = () => {
+      shown = false;
       try {
         rule.style.setProperty("visibility", "hidden", "important");
-        if (frame.isConnected === true && host.getComputedStyle(frame).visibility !== "hidden") frame.remove();
-      } catch { frame.remove(); }
+        if (frame.isConnected === true && host.getComputedStyle(frame).visibility !== "hidden") { frame.remove(); return false; }
+        return true;
+      } catch { frame.remove(); return false; }
     };
     const handle = { ok: true, hide,
       /** Same-turn host paint snapshot is mandatory, including behind/human placements. No DOM fallback. */
       sync(rect, stock) {
-        hide();
+        const refuse = () => { hide(); return false; };
         const proof = effectStockSnapshot(stock);
-        if (!effectStockAllows(proof, { layer, by })) return false;
-        if (dead || disposed || !hostEffectSpace(host, frame) || !rect || ![rect.x, rect.y, rect.width, rect.height].every(number) || ![rect.x, rect.y, rect.width, rect.height].every(Number.isInteger) || rect.width < 1 || rect.height < 1 || rect.width > 4096 || rect.height > 4096 || rect.width * rect.height > 8388608) { hide(); return false; }
+        if (!effectStockAllows(proof, { layer, by })) return refuse();
+        if (dead || disposed || !hostEffectSpace(host, frame) || !rect || ![rect.x, rect.y, rect.width, rect.height].every(number) || ![rect.x, rect.y, rect.width, rect.height].every(Number.isInteger) || rect.width < 1 || rect.height < 1 || rect.width > 4096 || rect.height > 4096 || rect.width * rect.height > 8388608) return refuse();
         let path = "none";
         if (layer === "front" && by !== "human") {
           const clipped = effectTrustClip(rect, proof.rects);
-          if (!clipped.ok) return false;
+          if (!clipped.ok) return refuse();
           path = clipped.path;
         }
 
         try {
+          const matches = visibility => {
+            const style = host.getComputedStyle(frame), actual = frame.getBoundingClientRect();
+            return style.position === "fixed" && style.pointerEvents === "none" && style.visibility === visibility
+              && style.opacity === (layer === "front" && by !== "human" ? "0.85" : "1") && style.zIndex === (layer === "front" ? "20" : "0")
+              && sameClip(path, rule.style.getPropertyValue("clip-path")) && sameClip(path, style.clipPath)
+              && ["x", "y", "width", "height"].every(key => number(actual[key]) && Math.abs(actual[key] - rect[key]) < 0.02)
+              && frame.isConnected === true && frame.ownerDocument === host.document;
+          };
+          // A fresh proof and actual viewport/clip are still checked every frame. Rewriting an
+          // already verified presentation makes WebKit repeatedly invalidate the iframe's paint.
+          if (shown && matches("visible")) return true;
+          // Changed or unproven geometry is hidden before writes and verified before reveal.
+          if (!hide()) return false;
           for (const key of ["x", "y", "width", "height"]) rule.style.setProperty(key === "x" ? "left" : key === "y" ? "top" : key, `${rect[key]}px`, "important");
           rule.style.setProperty("clip-path", path, "important");
           if (!sameClip(path, rule.style.getPropertyValue("clip-path"))) return false;
           // The stylesheet can lose the cascade to another host rule. Verify the actual viewport and clip
           // before revealing: holes expressed in planned coordinates cannot protect a transformed frame.
-          const style = host.getComputedStyle(frame), actual = frame.getBoundingClientRect();
-          if (style.position !== "fixed" || style.pointerEvents !== "none" || style.visibility !== "hidden" || style.opacity !== (layer === "front" && by !== "human" ? "0.85" : "1") || style.zIndex !== (layer === "front" ? "20" : "0") || !sameClip(path, style.clipPath) || !["x", "y", "width", "height"].every(key => number(actual[key]) && Math.abs(actual[key] - rect[key]) < 0.02)) return false;
+          if (!matches("hidden")) return false;
           rule.style.setProperty("visibility", "visible", "important");
+          shown = true;
           return true;
         } catch { hide(); return false; }
       },

package/dist/ui/shared/effect-policy.js

@@ -74,7 +74,7 @@ export function allocateEffectFrames(descriptors, context) {
   else if (context.saveData === true) global = "save_data";
   else if (context.hidden === true) global = "hidden";
   else if (context.enabled !== true || context.show !== true) global = "disabled";
-  else if (context.previewReady !== true || context.optIn !== true) global = "preview_unavailable";
+
   const candidates = [];
   for (let i = 0; i < descriptors.length; i++) {
     const d = descriptors[i], r = result[i];
@@ -87,6 +87,7 @@ export function allocateEffectFrames(descriptors, context) {
     if (!owner && d.region !== "chat") { r.reason = "scope"; continue; }
     if (d.region === "chat" && (!instanceName(d.instance) || d.instance !== context.openInstance)) { r.reason = "closed_chat"; continue; }
     if (global) { r.reason = global; continue; }
+    if (trial ? context.trialReady !== true : context.previewReady !== true || context.optIn !== true) { r.reason = "preview_unavailable"; continue; }
     if (d.paused === true) { r.reason = "paused"; continue; }
     if (d.visible !== true) { r.reason = "offscreen"; continue; }
     if (d.layer === "front" && context.modal === true && !trial) { r.reason = "modal"; continue; }

package/dist/ui/shared/effect-registry.js

@@ -65,7 +65,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     finally { readingStages.delete(d.trialStage); }
     return !dead && !blocked && revision === before && stage?.root === d.element ? stage : null;
   };
-  const permits = (d, proof) => d.trialStage ? !!localStage(d, proof) : effectStockAllows(proof, d);
+  const permits = (d, proof) => eligible(d) && (d.trialStage ? !!localStage(d, proof) : effectStockAllows(proof, d));
   const coverage = (d = null) => {
     if (dead || blocked || readingStock) return null;
     const before = revision; let proof = null; readingStock = true;
@@ -91,6 +91,26 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
   const current = s => !dead && !blocked && slots.get(s.d.key) === s && s.live;
   const tell = () => { if (dead) return; const state = view(), stamp = JSON.stringify(state); if (stamp === lastView) return; lastView = stamp; try { onChange(state); } catch { /* a display callback cannot admit code */ } };
   const receipt = (fn, ...args) => { try { return Reflect.apply(fn, safety, args); } catch { return null; } };
+  // #2055: the history's own read names a denial; any other answer stays unknown (and denied).
+  const SAFETY_REASON = Object.freeze({ __proto__: null, off: "safety_off", paused: "paused", interrupted: "interrupted" });
+  // Display only: the sticky history state per descriptor, which outranks a waiting reason (a queue, a dialog, typing)
+  // because it is what Resume must answer. Admission, caps, latches and safety policy never read it.
+  const named = new Map();
+  // The read can re-enter (an update from a callback): only a pass still current, for the same device, may write.
+  const nameSafety = (d, dev = device()) => {
+    const proposed = revision;
+    const reason = d.trialStage ? null : SAFETY_REASON[receipt(safety.status, d.id, dev)?.state];
+    if (dead || proposed !== revision || dev !== device()) return false;
+    if (reason) named.set(d.key, { identity: signature(d), reason }); else named.delete(d.key);
+    return true;
+  };
+  // Display only: the closed global gate a row is waiting on, when the host knows it (else the caller's unknown).
+  const gateReason = () => {
+    if (!gatesKnown()) return null;
+    const c = context;
+    return c.safe ? "safe_mode" : c.publicLink ? "public_link" : c.reducedMotion ? "reduced_motion" : c.saveData ? "save_data"
+      : !(c.enabled && c.show) ? "disabled" : !(c.previewReady && c.optIn) ? "preview_unavailable" : null;
+  };
   const clearMarker = (s, why) => {
     if (!s.token) return true;
     const token = s.token; s.token = null;
@@ -110,6 +130,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       paused.set(s.d.key, signature(s.d));
       if (receipt(safety.pause, { id: s.d.id, device: s.device, reason: why, metrics: s.budget?.snapshot().metrics ?? null }) !== true) blocked = "safety_unknown";
     }
+    if (count || why === "safety_revoked") nameSafety(s.d, s.device);   // #2055: the third pause, or another tab's, says off now
     clearMarker(s, why);
     if (s.owner) { try { onRetire(s.owner, why); } catch { /* an observation cannot prevent physical cleanup */ } }
     if (blocked) for (const other of [...slots.values()]) retire(other, blocked);
@@ -124,14 +145,25 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     return true;
   }
   function gatesKnown() { return context && FLAGS.every(k => typeof context[k] === "boolean") && (context.openInstance === null || typeof context.openInstance === "string" && context.openInstance.length >= 1 && context.openInstance.length <= 128); }
-  function eligible() { return gatesKnown() && !context.safe && !context.publicLink && !context.reducedMotion && !context.saveData && context.enabled && context.show && context.previewReady && context.optIn; }
-  const globalAllowed = () => eligible() && host.document.visibilityState === "visible";
+  function consent(d) {
+    const trial = d?.trialStage && effectTrialStageIdentity(d.trialStage);
+    return trial ? context.trialReady === true : context.previewReady === true && context.optIn === true;
+  }
+  function eligible(d = null) {
+    return gatesKnown() && !context.safe && !context.publicLink && !context.reducedMotion && !context.saveData && context.enabled && context.show
+      && (d ? consent(d) : context.previewReady && context.optIn || descriptors.some(x => x.trialStage && consent(x)));
+  }
+  const globalAllowed = (d = null) => eligible(d) && host.document.visibilityState === "visible";
   const signature = d => d.identity;
+  // A frame stopped because its gates closed is recorded as gates_unknown; when the host knows which gate, say it.
+  const shown = why => (why === "gates_unknown" && !eligible() && gateReason()) || why;
   function view() {
     return descriptors.map(d => {
-      const r = results.get(d.key) ?? { verdict: "off", reason: blocked ?? "unknown", queuePos: null }, s = slots.get(d.key);
-      return { key: d.key, id: d.id, ...r, phase: s?.frame ? s.ready ? "running" : "starting" : s ? "loading" : null,
-        quality: s?.budget?.snapshot().quality ?? null, reason: blocked ?? ((paused.get(d.key) === signature(d)) ? "paused" : failures.get(d.key)?.identity === signature(d) ? failures.get(d.key).reason : s && context?.hidden ? "hidden" : r.reason) };
+      const r = results.get(d.key) ?? { verdict: "off", reason: blocked ?? (!eligible() && gateReason()) ?? "unknown", queuePos: null }, s = slots.get(d.key);
+      // #2055 one display precedence: a global latch, then the sticky safety history, then this page's own pause/failure.
+      const n = named.get(d.key), sticky = n && n.identity === signature(d) ? n.reason : null;
+      return { key: d.key, id: d.id, ...r, ...(sticky && r.verdict === "queued" ? { verdict: "off", queuePos: null } : {}), phase: s?.frame ? s.ready ? "running" : "starting" : s ? "loading" : null,
+        quality: s?.budget?.snapshot().quality ?? null, reason: blocked ?? sticky ?? ((paused.get(d.key) === signature(d)) ? "paused" : failures.get(d.key)?.identity === signature(d) ? shown(failures.get(d.key).reason) : s && context?.hidden ? "hidden" : r.reason) };
     });
   }
   function schedule() {
@@ -165,7 +197,9 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     const stock = eligible() ? coverage() : null;
     if (blocked || !eligible() || !stock) {
       if (!stopAll(blocked ?? "gates_unknown")) return;
-      results.clear(); tell(); return;
+      results.clear();
+      if (!blocked) for (const d of descriptors) if (!nameSafety(d) || dead || proposal !== revision) return;
+      tell(); return;
     }
     // Hidden frames already owned may survive for <=10 s, but no new frame or load is admitted while hidden.
     const ctx = { ...context, hidden: false };
@@ -176,6 +210,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       if (dead || proposal !== revision) return;
       ds.push({ ...d, paused: !allowed || d.paused === true || paused.get(d.key) === signature(d) || failures.get(d.key)?.identity === signature(d) });
     }
+    for (const d of descriptors) if (!nameSafety(d) || dead || proposal !== revision) return;
     const allocation = allocateEffectFrames(ds, ctx); results.clear();
     for (const r of allocation) {
       const d = descriptors.find(d => d.key === r.key);
@@ -230,8 +265,14 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       if (slots.size >= max || loads.size >= max) break;
       const permitted = receipt(safety.allowed, d.id, device());
       if (proposal !== revision) return;
-      if (permitted !== true) { results.set(d.key, { verdict: "off", reason: "safety_unknown", queuePos: null }); continue; }
-      if (slots.has(d.key) || slots.size >= max || loads.size >= max || !globalAllowed() || context.hidden || !coverage(d) || proposal !== revision || !descriptors.some(x => x.key === d.key && signature(x) === signature(d) && x.element === d.element)) break;
+      if (permitted !== true) {
+        // #2055: say which denial it is. Only the safety history's own read names it; anything else stays unknown (still denied).
+        const st = receipt(safety.status, d.id, device());
+        if (proposal !== revision) return;
+        const why = SAFETY_REASON[st?.state] ?? "safety_unknown";
+        results.set(d.key, { verdict: "off", reason: why, queuePos: null }); continue;
+      }
+      if (slots.has(d.key) || slots.size >= max || loads.size >= max || !globalAllowed(d) || context.hidden || !coverage(d) || proposal !== revision || !descriptors.some(x => x.key === d.key && signature(x) === signature(d) && x.element === d.element)) break;
       const rect = position(d, coverage(d));
       if (dead || proposal !== revision) return;
       if (!rect || d.element.ownerDocument !== host.document) { results.set(d.key, { verdict: "off", reason: "geometry_unknown", queuePos: null }); continue; }
@@ -254,7 +295,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       const acceptCompletion = () => {
         if (!current(s)) { clearMarker(s, "superseded"); return false; }
         if (!withinDeadline()) return false;
-        if (request.controller.signal.aborted || !globalAllowed() || context.hidden || !coverage(d)) {
+        if (request.controller.signal.aborted || !globalAllowed(d) || context.hidden || !coverage(d)) {
           if (current(s)) retire(s, "admission_revoked"); else clearMarker(s, "superseded");
           return false;
         }
@@ -290,7 +331,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
         s.budget = new EffectBudget({ device: s.device, baselineFps: baseline, clock: nativeClock, longTasksSupported });
         const frame = createEffectFrame({ window: host, root: local?.root ?? root, origin, boot, clock: nativeClock,
           render: { code: resource.code, params: resource.params, assets: resource.assets, wants: resource.wants, instance: d.instance, width: fresh.width, height: fresh.height, dpr: dpr(s.device) },
-          onReady() { if (!current(s)) return; if (!globalAllowed() || context.hidden || !coverage(d)) { retire(s, "hidden"); tell(); return; } const n = time(); if (n === null) { blocked = "clock_unavailable"; stopAll(blocked); tell(); return; } s.ready = true; s.readyAt = n; s.healthySince = n; publishEnv(s); schedule(); tell(); },
+          onReady() { if (!current(s)) return; if (!globalAllowed(d) || context.hidden || !coverage(d)) { retire(s, "hidden"); tell(); return; } const n = time(); if (n === null) { blocked = "clock_unavailable"; stopAll(blocked); tell(); return; } s.ready = true; s.readyAt = n; s.healthySince = n; publishEnv(s); schedule(); tell(); },
           onRemove(why) { if (current(s)) { retire(s, why); tell(); } },
         });
         s.frame = frame;
@@ -316,7 +357,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     schedule(); tell();
   }
   function publishEnv(s, proof = coverage(s.d)) {
-    if (!s.ready || !current(s) || context.hidden || !globalAllowed() || !permits(s.d, proof)) return;
+    if (!s.ready || !current(s) || context.hidden || !globalAllowed(s.d) || !permits(s.d, proof)) return;
     const e = effectEvent("env", { width: s.rect.width, height: s.rect.height, dpr: dpr(s.device), quality: s.budget.snapshot().quality }, null, time());
     if (e) s.frame.send(e);
   }
@@ -339,12 +380,17 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       if (changed) publishEnv(s, paint);
       if (s.ready) s.budget.frame();
       if (s.pointer) {
-        const packet = s.pointer; s.pointer = null;
+        const packet = s.pointer;
         const n = time(), b = s.budget.snapshot();
-        if (n !== null && n - packet.at <= 100 && permits(s.d, paint) && pointerGate(paint) && current(s) && b.forward && (s.lastPointer === null || n - s.lastPointer >= 1000 / b.pointerHz)) {
+        if (n === null || n - packet.at > 100 || !permits(s.d, paint) || !pointerGate(paint) || !current(s) || !b.forward) {
+          if (s.pointer === packet) s.pointer = null;
+        } else if (s.lastPointer === null || n - s.lastPointer >= 1000 / b.pointerHz) {
+          if (s.pointer === packet) s.pointer = null;
           const event = effectEvent("pointer", packet.fields, s.d.instance, packet.at);
           if (event && s.frame.send(event)) s.lastPointer = n;
         }
+        // Keep the latest fresh sample until the next eligible frame. An early rAF must
+        // not consume a click just because the preceding move used this rate interval.
       }
     }
     if (dead || proposal !== revision) return;
@@ -401,7 +447,11 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     if (!globalAllowed() || context.hidden || context.modal || !proof || proof.front !== true) return false;
     try {
       const focused = host.document.activeElement;
-      return host.document.designMode !== "on" && !!focused && ["BODY", "BUTTON", "A"].includes(focused.tagName) && focused.isContentEditable === false && typeof focused.matches === "function" && !focused.matches("input,textarea,select,[contenteditable]:not([contenteditable='false'])");
+      // Native clicks on ordinary stock content focus its tabindex=-1 main ancestor.
+      // Recognize only that unique host root; unknown/editor focus remains a refusal.
+      const mains = focused?.tagName === "MAIN" ? host.document.querySelectorAll("#app > .shell > main#main.main[tabindex='-1']") : [];
+      const stockMain = focused?.isConnected === true && focused.ownerDocument === host.document && mains.length === 1 && mains[0] === focused;
+      return host.document.designMode !== "on" && !!focused && (["BODY", "BUTTON", "A"].includes(focused.tagName) || stockMain) && focused.isContentEditable === false && typeof focused.matches === "function" && !focused.matches("input,textarea,select,[contenteditable]:not([contenteditable='false'])");
     } catch { return false; }
   }
   function pointer(event) {
@@ -416,7 +466,11 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       const fields = { kind, x: event.clientX - r.x, y: event.clientY - r.y, buttons: event.buttons };
       if (fields.x < 0 || fields.y < 0 || fields.x > r.width || fields.y > r.height) continue;
       if (kind === "wheel") { fields.dx = event.deltaX; fields.dy = event.deltaY; }
-      if (effectEvent("pointer", fields, s.d.instance, at)) s.pointer = { fields, at };
+      if (effectEvent("pointer", fields, s.d.instance, at)) {
+        // One slot, with discrete input ahead of motion. A later move must not erase
+        // a waiting click; down/up/click may still coalesce to the latest discrete event.
+        if (kind !== "move" || !s.pointer || s.pointer.fields.kind === "move" || at - s.pointer.at > 100) s.pointer = { fields, at };
+      }
     }
     schedule();
   }
@@ -456,7 +510,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       descriptors = ds.map(snapshotDescriptor).filter(Boolean);
       for (const [key, identity] of paused) if (!descriptors.some(d => d.key === key && signature(d) === identity)) paused.delete(key);
       for (const [key, f] of failures) if (!descriptors.some(d => d.key === key && signature(d) === f.identity)) failures.delete(key);
-      context = Object.fromEntries([...FLAGS, "openInstance"].map(k => [k, ctx[k]]));
+      context = Object.fromEntries([...FLAGS, "trialReady", "openInstance"].map(k => [k, ctx[k]]));
       reconcile(); return view();
     },
     snapshot: view,

package/dist/ui/shared/effect-trial-shadow.js

@@ -0,0 +1,62 @@
+/** #2039: fixed host-only closed shadow shell. Owner CSS has no exported parts or slots into it. */
+const roots = new WeakMap();
+const clear = root => { while (root.firstChild) root.removeChild(root.firstChild); };
+function sheetOf(host, record) {
+  try {
+    const link = record.link, sheet = link?.sheet;
+    return record.ready && !record.dead && roots.get(record.panel)?.current === record && record.root.mode === "closed" && record.root.host === record.panel
+      && link.getRootNode() === record.root && link.isConnected && link.disabled === false && sheet?.ownerNode === link && sheet.disabled === false
+      && sheet.href === new URL("/assets/effect-trial.css", host.location.origin).href && typeof sheet.insertRule === "function" && typeof sheet.deleteRule === "function" && sheet.cssRules ? sheet : null;
+  } catch { return null; }
+}
+/** Reflect only a shell issued here, after its fixed same-origin stylesheet loaded. Never a serialized capability. */
+export function effectTrialShadow(host, panel) {
+  const record = roots.get(panel)?.current;
+  return record && sheetOf(host, record) === record.proof?.sheet ? record.proof : null;
+}
+export function createEffectTrialShadow({ window: host, panel, title, labels, onStop, onClose, onReady, onError } = {}) {
+  if (!host?.document || panel?.ownerDocument !== host.document || typeof panel.attachShadow !== "function" || typeof onReady !== "function" || typeof onError !== "function") return null;
+  let slot = roots.get(panel), cleanup = null;
+  const clock = () => (host.performance ?? globalThis.performance).now(), later = host.setTimeout?.bind(host) ?? globalThis.setTimeout, cancel = host.clearTimeout?.bind(host) ?? globalThis.clearTimeout;
+  try {
+    if (slot?.current && !slot.current.dead) return null;
+    if (!slot) { slot = { root: panel.attachShadow({ mode: "closed" }), current: null }; roots.set(panel, slot); }
+    const root = slot.root; clear(root);
+    const doc = host.document, element = (tag, cls) => { const el = doc.createElement(tag); el.className = cls; return el; };
+    const link = element("link", "effect-trial-style"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", "/assets/effect-trial.css");
+    const head = element("header", "effect-trial-head"), label = element("strong", "effect-trial-label"), name = element("span", "effect-trial-title"), close = element("button", "effect-trial-close"), controls = element("div", "effect-trial-controls"), stop = element("button", "effect-trial-stop"), body = element("div", "effect-trial-body"), stage = element("div", "effect-trial-stage"), note = element("p", "effect-trial-note");
+    close.setAttribute("type", "button"); stop.setAttribute("type", "button"); stage.setAttribute("aria-hidden", "true");
+    head.append(label, name, close); controls.append(stop); body.append(stage);
+    const nodes = [head, controls, body, note]; for (const el of nodes) el.setAttribute("hidden", "");
+    const began = clock(); if (!Number.isFinite(began) || began < 0) return null;
+    let timer = null;
+    const record = { panel, root, link, stage, head, controls, body, note, close, stop, ready: false, dead: false, proof: null }; slot.current = record;
+    const text = (nextTitle, nextLabels) => {
+      if (record.dead || !nextLabels) return;
+      label.textContent = nextLabels.label; name.textContent = typeof nextTitle === "string" ? nextTitle : "";
+      close.textContent = nextLabels.close; stop.textContent = nextLabels.stop; note.textContent = nextLabels.note;
+      panel.setAttribute("data-effect-trial-theme", doc.documentElement.dataset.theme === "dark" ? "dark" : "light");
+    };
+    const failed = () => { if (!record.dead) { dispose(); try { onError("stage_unavailable"); } catch { /* cleanup already owns failure */ } } };
+    const loaded = () => {
+      if (record.dead || record.ready || slot.current !== record) return;
+      const at = clock(); if (!Number.isFinite(at) || at < began || at - began >= 10000) { failed(); return; }
+      record.ready = true; const sheet = sheetOf(host, record);
+      if (!sheet) { failed(); return; }
+      cancel(timer); timer = null;
+      record.proof = Object.freeze({ panel, root, link, sheet, stage, head, controls, body, note, close, stop });
+      for (const el of nodes) el.removeAttribute("hidden");
+      try { onReady(record.proof); } catch { failed(); }
+    };
+    const stopClick = () => { if (!record.dead) onStop?.(); }, closeClick = () => { if (!record.dead) onClose?.(); };
+    function dispose() {
+      if (record.dead) return; record.dead = true; cancel(timer); timer = null;
+      link.removeEventListener("load", loaded); link.removeEventListener("error", failed); stop.removeEventListener("click", stopClick); close.removeEventListener("click", closeClick);
+      if (slot.current === record) { slot.current = null; clear(root); }
+    }
+    cleanup = dispose;
+    link.addEventListener("load", loaded); link.addEventListener("error", failed); stop.addEventListener("click", stopClick); close.addEventListener("click", closeClick);
+    text(title, labels); timer = later(failed, 10000); root.append(link, ...nodes);
+    return Object.freeze({ dispose, text });
+  } catch { cleanup?.(); return null; }
+}