@songsid/agend 2.3.0-beta.5 → 2.3.0-beta.7

package/dist/ui/settings-web-authority.js

@@ -0,0 +1,91 @@
+// #1939 S2a: Settings → Web → Web authority — whether a signed-in admin's web messages carry their account's authority
+// in delivery receipts (docs/design/1939-verified-web-sessions.md §0, §0.1, §3, §10): the server switch (on by default),
+// "Only this computer can authorize", how long a session's authorization lasts, the sessions authorized now, and "Revoke
+// web authority". Changes go through Review changes → Apply like every Settings edit, and apply at once (§0.1: none of
+// them grants anything by itself — a session still needs its account's Confirm in Discord or Telegram).
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { toast } from "/assets/ui-toast.js";
+import { confirmDialog } from "/assets/ui-confirm.js";
+import { api } from "./settings-confirm.js";
+import { Feedback } from "./settings-dialogs.js";
+import { resetWebAuthorization } from "/assets/web-authorize.js";
+import "./settings-strings.js";
+
+const tn = (k, ...v) => t(`settings.${k}`, ...v);
+
+/** What changed against what fleet.yaml says, as the PUT /api/settings/fleet/web body's `verified_authority` (null: nothing). */
+export function verifiedAuthorityBody(original, f) {
+  const out = {};
+  if (f.enabled !== original.enabled) out.enabled = f.enabled ? null : false;                   // §0.1: on is the default
+  if (f.loopbackOnly !== original.loopbackOnly) out.loopback_only = f.loopbackOnly ? true : null;
+  if (f.hours !== original.hours) out.max_session_hours = f.hours === null ? null : f.hours;
+  return Object.keys(out).length ? out : null;
+}
+
+export function WebAuthorityCard({ ctx, staged, disabled = false }) {
+  const [overview, setOverview] = useState(null), [failed, setFailed] = useState(false);
+  const [original, setOriginal] = useState(null), [f, setF] = useState(null), [msg, setMsg] = useState(null);
+  const load = async () => {
+    // What changes here (a revoke, the switch) changes this browser's own line: the chat reads it again when it shows.
+    resetWebAuthorization();
+    let r = null;
+    try { r = await api("/api/settings/web-authority"); } catch { r = null; }
+    // Anything but the overview's shape (an older server, an error page) is "could not be loaded", never a crash.
+    const o = r && r.ok ? r.body : null;
+    if (!o || typeof o !== "object" || !o.state || !o.hours || !Array.isArray(o.lanHosts) || !Array.isArray(o.authorized)) { setFailed(true); return; }
+    const c = o.configured || {};
+    const orig = { enabled: c.enabled !== false, loopbackOnly: c.loopback_only === true, hours: typeof c.max_session_hours === "number" ? c.max_session_hours : null };
+    setOverview(o); setFailed(false);
+    setOriginal((prev) => prev || orig);
+    setF((prev) => prev || { ...orig });
+  };
+  useEffect(() => { load(); }, []);
+  const card = (body) => html`<section class="card s-web-authority"><h3>${tn("vaTitle")}</h3><p class="note">${tn("vaHint")}</p>${body}</section>`;
+  if (failed) return card(html`<p class="note" role="status">${tn("vaLoadFailed")} <button type="button" class="btn btn-sm" onClick=${load}>${t("app.retry")}</button></p>`);
+  if (!overview || !f) return card(html`<p class="note">${t("app.loading")}</p>`);
+
+  const set = (patch) => setF((x) => ({ ...x, ...patch }));
+  const hoursText = f.hours === null ? "" : String(f.hours);
+  const hoursError = f.hours !== null && (!Number.isFinite(f.hours) || f.hours < overview.hours.min || f.hours > overview.hours.max) ? "vaHoursRange" : "";
+  const stuckOff = f.enabled && original.enabled && !overview.state.enabled;
+  const warnHosts = !f.loopbackOnly && overview.lanHosts.length > 0;
+  const when = (ms) => new Date(ms).toLocaleString();
+
+  const review = () => {
+    if (hoursError) return;
+    const body = verifiedAuthorityBody(original, f);
+    if (body) ctx.stage("verified_authority", { label: tn("vaTitle"), impact: "now", request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } });
+    else if (staged.has("verified_authority")) ctx.unstage("verified_authority");
+    setMsg(tn("readyApply"));
+  };
+  const revoke = async () => {
+    const yes = await confirmDialog({ title: tn("vaRevokeTitle"), message: tn("vaRevokeConfirm"), confirmLabel: tn("vaRevoke"), danger: true });
+    if (!yes) return;
+    let r = null;
+    try { r = await api("/api/settings/web-authority/revoke", { method: "POST", body: "{}" }); } catch { r = null; }
+    if (r && r.ok) { toast(tn(r.body && r.body.durable === false ? "vaRevokedNotDurable" : "vaRevoked")); load(); }
+    else toast(tn("vaRevokeFailed"), false);
+  };
+
+  return card(html`<fieldset class="s-va-fields" disabled=${disabled}>
+      ${stuckOff ? html`<p class="note s-va-warn" role="status" id="vaStuckOff">${tn("vaStuckOff")}</p>` : null}
+      <label class="check"><input id="vaEnabled" type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /><span>${tn("vaEnabled")}</span></label>
+      <p class="note">${tn("vaEnabledHint")}</p>
+      <label class="check"><input id="vaLoopbackOnly" type="checkbox" checked=${f.loopbackOnly} onChange=${(e) => set({ loopbackOnly: e.target.checked })} /><span>${tn("vaLoopbackOnly")}</span></label>
+      <p class="note">${tn("vaLoopbackOnlyHint")}</p>
+      ${warnHosts ? html`<p class="note s-va-warn" role="status" id="vaLanWarning">${tn("vaLanWarning", overview.lanHosts.join(", "))}</p>` : null}
+      <div class="field"><label for="vaHours">${tn("vaHours", overview.hours.min, overview.hours.max)}</label>
+        <input id="vaHours" type="number" min=${overview.hours.min} max=${overview.hours.max} step="any" placeholder=${tn("defaultHours", overview.hours.default)}
+          class=${hoursError ? "invalid" : ""} value=${hoursText} onInput=${(e) => set({ hours: e.target.value.trim() === "" ? null : Number(e.target.value) })} />
+        <${Feedback} error=${hoursError} /></div>
+      <h4>${tn("vaSessionsTitle")}</h4>
+      ${overview.authorized.length
+        ? html`<ul class="s-va-sessions" id="vaSessions">${overview.authorized.map((a) => html`<li key=${a.handle} data-handle=${a.handle}>
+            <strong>${a.label}</strong> <span class="note">${a.account}</span><br /><span class="note">${tn("vaSessionUntil", when(a.authorizedAt), when(a.until))}</span></li>`)}</ul>`
+        : html`<p class="note" id="vaSessionsNone">${tn("vaSessionsNone")}</p>`}
+    </fieldset>
+    <div class="save-row"><button type="button" class="btn btn-primary" id="vaReview" disabled=${disabled || !!hoursError} onClick=${review}>${tn("vaReview")}</button>
+      <button type="button" class="btn btn-danger" id="vaRevoke" disabled=${disabled} onClick=${revoke}>${tn("vaRevoke")}</button>
+      ${msg ? html`<span class="note" role="status">${msg}</span>` : null}</div>`);
+}

package/dist/ui/shared/app-session.js

@@ -4,6 +4,7 @@
 import { html, useEffect, useRef, useState } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t, lang } from "./app-i18n.js";
+import { AuthorizeChip } from "./web-authorize.js";
 
 async function getJson(url) {
   try {
@@ -53,6 +54,7 @@ export function SessionMenu() {
       ${!me ? html`<h3>${t("app.signedOut")}</h3><a class="btn" href=${`/signin?next=${encodeURIComponent(location.pathname)}`}>${t("app.signIn")}</a>` : html`
         <h3>${t("app.signedIn")} · ${me.label}</h3>
         <p class="sub">${t("app.expires", clock(me.expiresAt), span(me.idleMs))}</p>
+        <${AuthorizeChip} />
         ${rows.length > 1 ? html`<h3>${t("app.devices")}</h3><ul class="devices">${rows.map(s => html`<li key=${s.handle}>
           <span class="grow"><span class="name">${s.label}${s.current ? ` · ${t("app.thisDevice")}` : ""}</span><span class="when">${t("app.lastActive", ago(s.lastSeen))}</span></span>
           ${s.current ? null : html`<button type="button" class="btn btn-sm danger" onClick=${() => act("DELETE", `/auth/sessions/${encodeURIComponent(s.handle)}`, refresh)}>${t("app.signOut")}</button>`}</li>`)}</ul>` : null}

package/dist/ui/shared/app-shell.js

@@ -394,7 +394,7 @@ function PrefsPopover() {
  * The header every panel shows: ☰ (phone, or a collapsed sidebar), its title and status, then its actions. `nav`
  * (#1523 N2): an instance page's view switch — beside the title on a wide screen, a row of tabs under it on a phone.
  */
-export function PanelHeader({ title, sub, children, headingRef, nav }) {
+export function PanelHeader({ title, sub, children, headingRef, nav, notice }) {
   const shell = useStore(shellStore);
   const canCreate = useCanCreate() && !!newInstanceOpener;
   return html`<header data-trust="header" class=${`panel-head${shell.collapsed ? " collapsed" : ""}`}>
@@ -404,6 +404,7 @@ export function PanelHeader({ title, sub, children, headingRef, nav }) {
     <div class="panel-title"><h1 ref=${headingRef} tabindex="-1">${title}</h1>${sub ? html`<div class="panel-sub">${sub}</div>` : null}</div>
     ${nav || null}
     <div class="panel-actions">${children}</div>
+    ${notice || null}
   </header>`;
 }
 

package/dist/ui/shared/app-themes.js

@@ -10,8 +10,11 @@ import { t } from "./app-i18n.js";
 import { toast } from "./ui-toast.js";
 import { confirmDialog } from "./ui-confirm.js";
 
-/** { rev, themes: { <name>: theme }, locked: [<name>], widgets: { <name>: { <slot>: widget } } } as GET /ui/themes said (rev -1: not read yet). */
-export const themesStore = createStore({ rev: -1, themes: {}, locked: [], widgets: {}, shown: true });
+/**
+ * { rev, themes: { <name>: theme }, locked: [<name>], widgets: { <name>: { <slot>: widget } }, ambient: { <name>: { loop?, click? } } }
+ * as GET /ui/themes said (rev -1: not read yet).
+ */
+export const themesStore = createStore({ rev: -1, themes: {}, locked: [], widgets: {}, ambient: {}, shown: true });
 const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
 
 const COLOR = /^#[0-9a-f]{6}$/;
@@ -30,14 +33,15 @@ function labelOk(s) {
   return n >= 1 && n <= 24;
 }
 
-// Public sessions cannot write host prefs. Keep their explicit switch apart from boot-cached host defaults.
+// Public/guest sessions cannot write host prefs. Keep their explicit browser switch apart from boot-cached defaults.
+// Keep the existing public key for compatibility; both read-only viewer surfaces share this device choice.
 const PUBLIC_FX_SHOW = "agend_public_fx_show";
 let publicFxChoice = (() => { try { const v = localStorage.getItem(PUBLIC_FX_SHOW); return v === "on" ? true : v === "off" ? false : null; } catch { return null; } })();
 
 /** Whether this page shows agents' themes now: the viewer's switch (default on), and never in safe mode. */
 export function themesShown() {
   if (safeMode()) return false;
-  if (publicLink() && publicFxChoice !== null) return publicFxChoice;
+  if (localAppearanceViewer() && publicFxChoice !== null) return publicFxChoice;
   try {
     const f = prefInForce("fx.show");                       // this page's choice, else the host's, else the default
     if (f) return f.value !== false;
@@ -46,7 +50,7 @@ export function themesShown() {
 }
 /** The viewer's switch (Settings → Appearance): kept with the person's preferences, and in force on this page at once. */
 export function setThemesShown(on) {
-  if (publicLink()) {
+  if (localAppearanceViewer()) {
     publicFxChoice = !!on;
     try { localStorage.setItem(PUBLIC_FX_SHOW, on ? "on" : "off"); } catch { /* the in-memory choice still applies */ }
   } else savePref("fx.show", on ? null : false);
@@ -122,7 +126,8 @@ async function read(rev) {
       if (!body || typeof body !== "object") break;
       themesStore.set({ rev: typeof body.rev === "number" ? body.rev : want, themes: body.themes && typeof body.themes === "object" ? body.themes : {},
         locked: Array.isArray(body.locked) ? body.locked.filter((n) => typeof n === "string") : [],
-        widgets: body.widgets && typeof body.widgets === "object" && !Array.isArray(body.widgets) ? body.widgets : {} });
+        widgets: body.widgets && typeof body.widgets === "object" && !Array.isArray(body.widgets) ? body.widgets : {},
+        ambient: body.ambient && typeof body.ambient === "object" && !Array.isArray(body.ambient) ? body.ambient : {} });
       if (want === wanted) break;
     }
   } finally { reading = false; }
@@ -144,6 +149,7 @@ export function startThemes() {
 }
 
 const publicLink = () => typeof document !== "undefined" && !!document.body && document.body.dataset.publicLink === "1";
+const localAppearanceViewer = () => publicLink() || typeof document !== "undefined" && document.body?.dataset.tier === "guest";
 
 /** A person's Reset or Lock of an agent's theme (an admin session; never over the public link). */
 async function themeAction(name, what, body) {
@@ -169,6 +175,18 @@ async function removeWidget(name, slot) {
   else toast(t("chat.widgetRemoved", name));
 }
 
+/** #2117: a person's Clear of an agent's ambient, one kind ("loop" or "click"). */
+export async function clearAmbient(name, which) {
+  let r;
+  try {
+    const res = await fetch(`/ui/themes/${encodeURIComponent(name)}/ambient`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ which }) });
+    r = await res.json().catch(() => ({}));
+    if (!res.ok) r = { error: r && r.error ? r.error : `HTTP ${res.status}` };
+  } catch (err) { r = { error: err && err.message ? err.message : "network" }; }
+  if (r && r.error) toast(t("chat.themeFailed", r.error), false);
+  else toast(t("chat.ambientCleared", name));
+}
+
 /** The chat's and Details' ⋯ entries for an agent's theme: Lock/Unlock, Reset… and its widgets' Remove — none over the public link. */
 export function themeMenuItems(name) {
   if (publicLink()) return [];

package/dist/ui/shared/app.css

@@ -569,6 +569,20 @@ html.lb-open .scroller { overflow: hidden; }
 .th-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--th-bg-opacity, 1); pointer-events: none; z-index: 0; user-select: none; }
 .th-bg-cover { object-fit: cover; }
 .th-bg-contain { object-fit: contain; }
+/* #2117: an agent's ambient effect (chat-ambient.js). The loop sits behind the thread (z 0, under the scroller and the
+   dock at z 1); a burst follows the dock in the tree at z 1, so it shows over the messages and under the header (z 2).
+   Neither ever takes a pointer, focus or selection; positions and sizes are set through the CSSOM. */
+.chat-main.has-amb { position: relative; }
+.chat-main.has-amb > .amb-layer, .chat-main.has-amb > .amb-burst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; contain: strict; }
+.chat-main.has-amb > .amb-layer { z-index: 0; }
+.chat-main.has-amb > .amb-burst { z-index: 1; }
+.amb-p { position: absolute; left: 0; top: 0; line-height: 1; color: var(--accent); pointer-events: none; will-change: transform, opacity; }
+img.amb-p { object-fit: contain; }
+.s-mod-glyph { width: 24px; height: 24px; object-fit: contain; }
+/* #2117: the one-time "reduced motion; effects are on" note, a strip above the thread. */
+.chat-main > .amb-note { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) var(--s-3) 0; padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font-size: 13px; }
+.chat-main > .amb-note .amb-note-off { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; min-height: 32px; }
+.chat-main > .amb-note .amb-note-x { margin-left: auto; min-width: 32px; min-height: 32px; border: 0; background: none; color: var(--text-2); cursor: pointer; }
 .pv-divider { flex: 0 0 8px; cursor: col-resize; background: var(--bg); border-left: 1px solid var(--border); touch-action: none; position: relative; }
 .pv-divider::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 32px; margin-top: -16px; border-radius: 2px; background: var(--border-strong); }
 .pv-divider:hover::after, .pv-divider:focus-visible::after, .chat-split.resizing .pv-divider::after { background: var(--accent); }
@@ -677,6 +691,15 @@ html.lb-open .scroller { overflow: hidden; }
 .s-guests .guest-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
 .s-guests .guest-narrow-edit { margin-top: var(--s-2); }
 .s-guests .guest-away { color: var(--text-3); }
+/* #1939 S2b: this browser's authorization, under the composer and in the session menu (one compact line). */
+.webauth-chip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: var(--s-1) 0 0; font-size: var(--fs-xs); }
+.webauth-chip .webauth-ok { color: var(--ok); }
+.webauth-chip .btn-sm { min-height: 24px; }
+/* #1939 S2a: Settings → Web → Web authority. */
+.s-web-authority .s-va-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.s-web-authority .s-va-sessions li { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; }
+.s-web-authority .s-va-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
+.s-web-authority .save-row { flex-wrap: wrap; }
 /* #1920: a guest's note under the composer — on a phone too, where the key hints are hidden. */
 .guest-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
 .pending-files { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
@@ -1448,15 +1471,21 @@ 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); }
+/* A phone: the portrait stays on the text's row, smaller (the user's ask: never a portrait alone on a line with the text
+   under it); the S / M / L control takes the line below. The chat header's card is trimmed further: a smaller portrait
+   and banner, and its tagline and bio cut to a few lines (Details and View show them whole). */
 @media (max-width: 479px) {
-  .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%; }
+  .id-card.card-s { --id-h: 96px; --id-bmin: 80px; --id-bmax: 120px; }
+  .id-card.card-m { --id-h: 128px; --id-bmin: 100px; --id-bmax: 150px; }
+  .id-card.card-l { --id-h: 168px; --id-bmin: 120px; --id-bmax: 200px; }
+  .id-card.card-c { --id-h: 64px; --id-bmin: 80px; --id-bmax: 110px; }
+  .id-card.card-c.bs-s { --id-bmin: 80px; --id-bmax: 100px; }
+  .id-card.card-c.bs-l { --id-bmin: 96px; --id-bmax: 130px; }
+  .id-row { flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); }
+  .card-size { flex-basis: 100%; justify-content: flex-end; }
+  .id-card.card-c .id-tagline, .id-card.card-c .id-bio { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
+  .id-card.card-c .id-tagline { -webkit-line-clamp: 2; line-clamp: 2; }
+  .id-card.card-c .id-bio { -webkit-line-clamp: 3; line-clamp: 3; }
 }
 /* #1629 r4 §1: the card in View (above the profile row) and its part of Edit profile. */
 .v-id { flex-shrink: 0; padding: var(--s-2) var(--s-4) 0; background: var(--bg); }
@@ -1514,3 +1543,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .effect-trial-head > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
 .effect-trial-body { flex: 1; min-height: 0; display: flex; padding: var(--s-3); }
 .effect-trial-stage { position: relative; z-index: 0; flex: 1; min-width: 0; min-height: 0; contain: paint; overflow: clip; padding: 0; border: 0; outline: none; box-shadow: none; }
+
+/* #2115: diagnostics remain inside the stock protected panel header, never in an effect plane. */
+.panel-head:has(> .chat-fx-notice) { flex-wrap: wrap; }
+.chat-fx-notice { order: 10; flex: 1 1 100%; min-width: 0; max-width: 100%; font-size: var(--fs-sm); overflow-wrap: anywhere; }
+.chat-fx-notice > span { display: block; }

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

@@ -1,4 +1,5 @@
 /** #1629: app-owned pool; Chat contributes a lease, never another registry/loader. */
+import { effectPlaybackReason, EFFECT_BLOCK_REASONS } from "./effect-policy.js";
 import { createEffectTrialSource } from "./effect-trial-source.js";
 import { createOwnerEffectSource } from "./effect-owner-source.js";
 import { createEffectRuntimeLoader } from "./effect-runtime-loader.js";
@@ -6,7 +7,7 @@ import { createEffectRegistry } from "./effect-registry.js";
 import { createEffectSafety } from "./effect-safety.js";
 import { stockEffectTrust } from "./effect-stock-trust.js";
 import { createEffectProfileCollector } from "./effect-profiles.js";
-import { chatEffectIdentity, createEffectWriter } from "./effect-chat-runtime.js";
+import { effectPlaybackIdentity, createEffectWriter } from "./effect-chat-runtime.js";
 
 const episodes = new WeakSet();
 
@@ -14,7 +15,8 @@ const episodes = new WeakSet();
 export function createAppEffectRuntime({ window: host, current, observe, onChange = () => {}, onDispose = () => {}, resolveOwnerTarget = null, onOwnerUnavailable = () => {}, factories = {} }) {
   let dead = false, error = null, loader = null, registry = null, writer = null, source = null, personal = null, trial = null, pending = null, lastMetadata = null, serial = 0, revision = 0, stamp = null, syncing = false, queued = false;
   const bindings = new Map(), profiles = new Map();
-  const identity = chatEffectIdentity(host), auth = host?.AgendAuth;
+  let lastContext = null, playbackUnavailable = null;
+  const identity = effectPlaybackIdentity(host), auth = host?.AgendAuth;
   const safe = fn => { try { return fn(); } catch { return null; } };
   const alive = () => { if (dead) return false; const value = safe(() => current() === true && !auth.sessionEnded()); return !dead && value === true; };
   const sourceAlive = s => {
@@ -25,15 +27,49 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
   const placementIdentity = p => JSON.stringify([p.by, p.manifest.layer, p.params]);
   const clock = () => host.performance.now();
   let offAuth = null;
-  const snapshot = s => ({ error: error ?? s?.error ?? null, rows: registry?.snapshot().filter(row => s?.bindings.get(row.id)?.key === row.key) ?? [], effects: s?.metadata?.effects ?? [], loading: !!s && !s.dead && s.metadata === null && !s.error });
+  const snapshot = s => {
+    const effects = s?.metadata?.effects ?? [], known = registry?.snapshot?.() ?? [];
+    const rows = effects.map(p => {
+      const b = s.bindings.get(p.id), row = known.find(r => b && r.key === b.key && r.id === p.id);
+      if (row && !s.error && !playbackUnavailable) return row.reason == null && row.phase == null ? { ...row, reason: "calibrating" } : row;
+      return { id: p.id, key: b?.key ?? null, verdict: "off", phase: null, quality: null,
+        reason: s.error ?? playbackUnavailable ?? effectPlaybackReason(lastContext) ?? (!p.manifest.regions.includes("chat") ? "region_unavailable" : "runtime_unavailable") };
+    });
+    return { error: error ?? s?.error ?? null, rows, effects, loading: !!s && !s.dead && s.metadata === null && !s.error };
+  };
   function tell() {
     const s = source, value = snapshot(s); if (dead) return;
-    if (sourceAlive(s)) safe(() => s.onChange(value));
+    if (sourceAlive(s)) {
+      const next = JSON.stringify(value);
+      if (next !== s.lastSnapshot) { s.lastSnapshot = next; safe(() => s.onChange(value)); }
+    }
     if (!dead) safe(() => onChange(snapshot(source)));
   }
+  function reportPlayback(s) {
+    if (!sourceAlive(s) || identity.scope !== "owner") return;
+    const now = safe(clock);
+    if (!Number.isFinite(now) || now < 0 || s.reportClock !== null && now < s.reportClock) { s.reporter.dispose(); return; }
+    s.reportClock = now;
+    const value = snapshot(s);
+    for (const id of s.reported.keys()) if (!value.effects.some(p => p.id === id)) s.reported.delete(id);
+    for (const row of value.rows) {
+      if (!sourceAlive(s)) return;
+      const status = row.phase === "running" && row.reason == null ? "playing" : "blocked";
+      const reason = status === "playing" ? null : EFFECT_BLOCK_REASONS.includes(row.reason) ? row.reason : "unknown";
+      const device = lastContext?.constrained === true ? "constrained" : "standard";
+      const next = JSON.stringify([status, reason, device]), last = s.reported.get(row.id);
+      if (last && (now - last.at < 10000 || next === last.value && now - last.at < 60000)) continue;
+      s.reported.set(row.id, { at: now, value: next });
+      void s.reporter.post(`/ui/effects/profile/${row.id}?instance=${encodeURIComponent(s.name)}&ownerEpoch=${identity.epoch}`,
+        { v: 1, kind: "playback", device, status, reason });
+    }
+    // No server polling or unbounded retries: at most one observation per effect / 10s, a 60s heartbeat.
+    if (sourceAlive(s)) s.reportTimer = host.setTimeout(() => reportPlayback(s), 10000);
+  }
   function discard(s) {
     if (!s || s.dead) return;
     s.dead = true; s.generation++; s.metadata = null;
+    safe(() => host.clearTimeout(s.reportTimer)); safe(() => s.reporter?.dispose());
     if (source === s) source = null;
     safe(() => trial?.stopFor(s));
     for (const b of s.bindings.values()) bindings.delete(b.key); s.bindings.clear();
@@ -63,7 +99,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
     writer = createEffectWriter(host, alive);
     loader = make("loader", createEffectRuntimeLoader)({ window: host, ownerEpoch: identity.epoch, current: alive, onRevoke: () => fail("runtime_unavailable") });
     if (!loader.ok || typeof loader.placementsSettled !== "function" || typeof loader.resourceSettled !== "function") throw Error("runtime_unavailable");
-    registry = make("registry", createEffectRegistry)({ window: host, origin: host.document.body.dataset.previewOrigin, boot: host.document.body.dataset.previewBoot,
+    registry = make("registry", createEffectRegistry)({ window: host, origin: host.location?.origin, boot: host.document.body.dataset.effectBoot,
       load: async (descriptor, signal) => {
         const b = bindingFor(descriptor.key, descriptor.id);
         if (!bindingAlive(b) || descriptor.id !== b.id || signal.aborted) return null;
@@ -78,7 +114,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
       stockSnapshot: ({ frameRoot }) => make("stock", stockEffectTrust)(host, { frameRoot, ownerCss: observe().ownerCss }),
       onChange() { try { tell(); emit(); } catch { fail("runtime_unavailable"); } },
       onMount(owner) {
-        const b = bindingFor(owner.key, owner.id); if (!bindingAlive(b) || b.id !== owner.id || !owner.current()) return;
+        const b = bindingFor(owner.key, owner.id); if (identity.scope !== "owner" || !bindingAlive(b) || b.id !== owner.id || !owner.current()) return;
         const collector = make("collector", createEffectProfileCollector)({ key: owner.key, id: owner.id, device: owner.device, clock });
         const began = safe(clock);
         if (collector.ok && Number.isFinite(began) && began >= 0 && bindingAlive(b) && owner.current()) profiles.set(owner, { binding: b, collector, began, attempted: null }); else collector.dispose?.();
@@ -95,17 +131,23 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
         void writer.post(`/ui/effects/profile/${owner.id}?${query}ownerEpoch=${identity.epoch}`, report.profile);
       }, clock,
     });
-    if (!registry.ok) throw Error("runtime_unavailable");
-    trial = make("trialSource", createEffectTrialSource)({ window: host, current: () => {
+    if (!registry.ok) {
+      // Keep authenticated placement metadata available for explanations. This inert adapter cannot create,
+      // load, resume, send to, or authorize a frame; a failed paint subsystem is never permission.
+      playbackUnavailable = "unsupported_host";
+      safe(() => registry?.dispose?.());
+      registry = { ok: true, frameRoot: null, update() {}, snapshot: () => [], publish() {}, resume: () => false, dispose() {} };
+    }
+    if (identity.scope === "owner") trial = make("trialSource", createEffectTrialSource)({ window: host, current: () => {
       if (!alive()) return false; const v = observe(), c = v.context;
-      return alive() && c.enabled === true && c.show === true && c.trialReady === true
+      return alive() && c.enabled === true && c.show === true && c.transportReady === 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,
       readResource: (spec, signal) => typeof loader.trialResourceSettled === "function" ? loader.trialResourceSettled(spec, signal) : Promise.resolve(null),
       onChange() { revision++; stamp = null; sync(); tell(); },
     });
-    if (typeof resolveOwnerTarget === "function") {
+    if (identity.scope === "owner" && typeof resolveOwnerTarget === "function") {
       if (typeof loader.ownerSettled !== "function") throw Error("runtime_unavailable");
       personal = createOwnerEffectSource({ current: alive,
         readMetadata: signal => loader.ownerSettled(signal), readResource: (spec, signal) => loader.resourceSettled(spec, signal), resolveTarget: resolveOwnerTarget,
@@ -139,7 +181,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
   }
   function refuseSource(s) {
     if (!sourceAlive(s)) return;
-    s.error = "resource_unavailable"; s.metadata = null; s.generation++;
+    s.error = "resource_unavailable"; s.generation++;
     for (const b of s.bindings.values()) bindings.delete(b.key); s.bindings.clear(); revision++; stamp = null; sync(); tell();
   }
   function queueSync() {
@@ -156,6 +198,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
       if (!alive() || revision !== before || s !== source) { if (alive()) queueSync(); return; }
       const entries = [...(personal?.descriptors() ?? []), ...(trial?.descriptors() ?? []), ...descriptors(s)];
       if (!alive() || revision !== before || s !== source) { stamp = null; if (alive()) queueSync(); return; }
+      lastContext = { ...value.context };
       const next = JSON.stringify([revision, value.context, entries.map(d => [d.key, d.paused])]);
       if (stamp !== next) {
         if (!alive() || revision !== before || s !== source) { stamp = null; if (alive()) queueSync(); return; }
@@ -164,12 +207,15 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
       if (!alive() || revision !== before || s !== source) { stamp = null; if (alive()) queueSync(); return; }
       emit();
       const c = value.context;
-      if (!pending && c.enabled && c.show && c.previewReady && c.optIn && !c.safe && !c.publicLink && !c.reducedMotion && !c.saveData && !c.hidden) {
-        const ownerNeeds = personal?.needsMetadata() === true, chatNeeds = sourceAlive(s) && !s.error && !s.metadata;
+      // Metadata describes placements, not executable resources. Its existing session/epoch/current and
+      // shared settled-lane fences apply even when this viewer has declined playback. No code is fetched here.
+      if (!pending) {
+        const ownerNeeds = identity.scope === "owner" && !c.publicLink && c.enabled && c.show && c.transportReady && !c.safe && !c.reducedMotion && !c.saveData && !c.hidden && personal?.needsMetadata() === true, chatNeeds = sourceAlive(s) && !s.error && !s.metadata;
         if (!alive() || revision !== before || s !== source) { if (alive()) queueSync(); return; }
         if (ownerNeeds && (!chatNeeds || lastMetadata !== "owner")) void readPersonal();
         else if (chatNeeds) void read(s);
       }
+      tell();
     } catch { fail("runtime_unavailable"); }
     finally { syncing = false; }
   }
@@ -216,14 +262,17 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
     for (const b of s.bindings.values()) bindings.delete(b.key); s.bindings.clear();
     if (pending?.source === s) safe(() => pending.controller.abort()); revision++; stamp = null; sync(); tell();
   }
-  function publishReply(s, event) { if (sourceAlive(s) && !s.error && event.instance === s.name) registry.publish("reply", {}, s.name); }
+  function publishReply(s, event) { if (host.document.body.dataset.webTransport !== "poll" && sourceAlive(s) && !s.error && event.instance === s.name) registry.publish("reply", {}, s.name); }
   function attachChat(options) {
     discard(source); const expected = revision; sync();
     if (!alive() || revision !== expected || source !== null) return null;
     const { name, element, current: ownCurrent, observe: ownObserve, onChange: ownChange = () => {} } = options ?? {};
     if (!alive() || typeof name !== "string" || name.length < 1 || name.length > 128 || !element || element.isConnected !== true || typeof ownCurrent !== "function" || typeof ownObserve !== "function" || safe(() => ownCurrent() === true) !== true || revision !== expected || source !== null) return null;
     const s = { name, element, current: ownCurrent, observe: ownObserve, onChange: ownChange, serial: ++serial, generation: 0, dead: false, error: null, metadata: null, bindings: new Map(), paused: new Map() };
-    source = s; revision++; stamp = null;
+    source = s;
+    s.reporter = createEffectWriter(host, () => sourceAlive(s)); s.reported = new Map(); s.reportClock = null;
+    s.reportTimer = host.setTimeout(() => reportPlayback(s), 10000);
+    revision++; stamp = null;
     const placement = id => sourceAlive(s) && !s.error ? s.metadata?.effects.find(p => p.id === id) : null;
     const changed = () => changedSource(s);
     const api = { ok: true, sync,
@@ -231,14 +280,14 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
       reply(event) { publishReply(s, event); },
       pause(id) { const p = placement(id); if (!p) return false; s.paused.set(id, placementIdentity(p)); revision++; sync(); return true; },
       resume(id) { const p = placement(id); if (!p) return false; s.paused.delete(id); revision++; sync(); const b = s.bindings.get(id); return bindingAlive(b) && registry.resume(b.key); },
-      async remove(id) { const p = placement(id); if (!p) return false; const generation = s.generation; const ok = await writer.post("/ui/effects/remove", { instance: s.name, id }); if (!sourceAlive(s) || generation !== s.generation) return false; if (ok) changed(); return ok; },
+      async remove(id) { const p = placement(id); if (identity.scope !== "owner" || !p) return false; const generation = s.generation; const ok = await writer.post("/ui/effects/remove", { instance: s.name, id }); if (!sourceAlive(s) || generation !== s.generation) return false; if (ok) changed(); return ok; },
       snapshot: () => sourceAlive(s) ? snapshot(s) : { error: null, rows: [], effects: [], loading: false },
       dispose() { if (source !== s) return; discard(s); sync(); },
     };
     sync(); tell(); return sourceAlive(s) ? api : null;
   }
-  return { ok: true, sync, attachChat, changedOwner, ownerSnapshot,
-    attachTrial(options) { const s = source; return sourceAlive(s) ? trial.attach(options, s) : null; },
+  return { ok: true, playbackAvailable: playbackUnavailable === null, sync, attachChat, changedOwner, ownerSnapshot,
+    attachTrial(options) { const s = source; return trial && !playbackUnavailable && sourceAlive(s) ? trial.attach(options, s) : null; },
     stopTrial() { trial?.stop(); },
     trialSnapshot() { return { rows: registry?.snapshot().filter(row => trial?.binding(row.key, row.id)) ?? [] }; },
     cursorSelection: () => personal?.cursorSelection() ?? null, cursorImageSettled,

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

@@ -46,10 +46,23 @@ export function createEffectWriter(host, current) {
 export function chatEffectIdentity(host) {
   try {
     const b = host.document.body.dataset, x = JSON.parse(host.document.documentElement.getAttribute("data-prefs") || "null");
-    if (b.mode !== "full" || b.publicLink === "1" || b.webTransport === "poll" || !["person", "operator"].includes(x?.ownerScope) || x.unreadable === true || typeof x.ownerEpoch !== "string" || !/^[a-f0-9]{16}$/.test(x.ownerEpoch)) return null;
+    if (b.mode !== "full" || b.tier === "guest" || b.publicLink === "1" || b.webTransport === "poll" || !["person", "operator"].includes(x?.ownerScope) || x.unreadable === true || typeof x.ownerEpoch !== "string" || !/^[a-f0-9]{16}$/.test(x.ownerEpoch)) return null;
     return Object.freeze({ epoch: x.ownerEpoch, scope: x.ownerScope });
   } catch { return null; }
 }
+/** Chat-only public/guest capability stays separate from personal preferences and management. */
+export function effectPlaybackIdentity(host) {
+  try {
+    const b = host.document.body.dataset;
+    if (b.mode !== "full" || typeof b.effectEpoch !== "string" || !/^[a-f0-9]{16}$/.test(b.effectEpoch)) return null;
+    if (b.effectScope === "owner") {
+      const own = chatEffectIdentity(host);
+      return own?.epoch === b.effectEpoch ? Object.freeze({ epoch: b.effectEpoch, scope: "owner" }) : null;
+    }
+    if (b.effectScope === "chat" && (b.publicLink === "1" && b.webTransport === "poll" || b.tier === "guest")) return Object.freeze({ epoch: b.effectEpoch, scope: "chat" });
+  } catch { /* no session capability */ }
+  return null;
+}
 export function chatEffectState(state, name) {
   const inst = state.instances?.find(i => i.name === name);
   if (!inst) return null;
@@ -81,7 +94,7 @@ export function createChatEffectRuntime({ window: host, name, element, current,
     writer = createEffectWriter(host, alive);
     loader = make("loader", createEffectRuntimeLoader)({ window: host, ownerEpoch: identity.epoch, current: alive });
     if (!loader.ok) throw Error("runtime_unavailable");
-    registry = make("registry", createEffectRegistry)({ window: host, origin: host.document.body.dataset.previewOrigin, boot: host.document.body.dataset.previewBoot,
+    registry = make("registry", createEffectRegistry)({ window: host, origin: host.location?.origin, boot: host.document.body.dataset.effectBoot,
       load: async (d, signal) => {
         const mine = generation, value = await loader.resource({ id: d.id, instance: name }, signal);
         if (!alive() || mine !== generation || signal.aborted) return null;
@@ -125,7 +138,7 @@ export function createChatEffectRuntime({ window: host, name, element, current,
     const stamp = JSON.stringify(ctx);
     if (stamp !== lastContext) { lastContext = stamp; registry.update(descriptors(), ctx); }
     emit();
-    if (!metadata && !active && ctx.enabled && ctx.show && ctx.previewReady && ctx.optIn && !ctx.safe && !ctx.publicLink && !ctx.reducedMotion && !ctx.saveData && !ctx.hidden) void read();
+    if (!metadata && !active && ctx.enabled && ctx.show && ctx.transportReady && !ctx.safe && !ctx.publicLink && !ctx.reducedMotion && !ctx.saveData && !ctx.hidden) void read();
   }
   async function read() {
     if (!alive() || error || active) return;

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

@@ -39,12 +39,26 @@ export function effectTransportReady(host, origin, boot) {
   } catch { return false; }
 }
 
+/** #2118: same URL origin, opaque realm. This helper does not alter product admission or HTML preview consent. */
+export function effectBootstrapReady(host, origin, boot) {
+  try {
+    const target = new URL(origin), page = new URL(host.location.origin);
+    return origin === target.origin && target.origin === page.origin && ["http:", "https:"].includes(target.protocol)
+      && 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 = () => {} } = {}) {
-  if (!effectTransportReady(host, origin, boot)) return { ok: false, reason: "preview_unknown" };
+export function createEffectFrame(options = {}) { return ownedEffectFrame(options, false); }
+
+/** Product transport: the same-listener trusted document still has an opaque sandboxed realm. */
+export function createOpaqueEffectFrame(options = {}) { return ownedEffectFrame(options, true); }
+
+function ownedEffectFrame({ window: host, root, origin, boot, render, clock = () => performance.now(), onReady = () => {}, onRemove = () => {} } = {}, sameListener) {
+  if (!(sameListener ? effectBootstrapReady : effectTransportReady)(host, origin, boot)) return { ok: false, reason: sameListener ? "bootstrap_unknown" : "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;
@@ -122,7 +136,7 @@ export function createEffectFrame({ window: host, root, origin, boot, render, cl
   host.addEventListener("message", hello);
   frame.addEventListener("load", load);
   timer = host.setTimeout(deadline, 10000);
-  try { frame.src = `${origin}/effect`; root.append(frame); } catch { remove("mount_failed"); }
+  try { frame.src = origin + (sameListener ? "/effect-bootstrap" : "/effect"); root.append(frame); } catch { remove("mount_failed"); }
   return { ok: true, element: frame, state, remove,
     send(event) {
       if (!ready || !current() || !maySendEffectEvent(event, { instance: payload.instance, wants: payload.wants })) return false;

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

@@ -58,6 +58,19 @@ export function constrainedDevice(signals) {
   return !!signals && (finite(signals.memory) && signals.memory > 0 && signals.memory <= 4 || finite(signals.cores) && signals.cores > 0 && signals.cores <= 4 || signals.coarse === true && finite(signals.width) && signals.width > 0 && signals.width <= 900);
 }
 
+export const EFFECT_BLOCK_REASONS = Object.freeze([
+  "transport_unavailable", "preview_unavailable", "preview_not_consented", "unsupported_host", "safe_mode", "reduced_motion", "save_data", "hidden", "disabled", "public_link",
+  "baseline_unsupported", "baseline_unavailable", "baseline_timeout", "calibrating", "clock_unavailable", "gates_unknown", "owner_css", "stock_overlay", "modal",
+  "safety_off", "safety_unknown", "interrupted", "paused", "host_budget", "frame_limit", "front_limit", "offscreen", "region_unavailable", "resource_unavailable", "resource_timeout", "runtime_unavailable", "unknown",
+]);
+
+/** Diagnostic names only; the admission policy below still validates every required flag. */
+export function effectPlaybackReason(c) {
+  if (!c || ["safe", "publicLink", "reducedMotion", "saveData", "hidden", "enabled", "show", "transportReady"].some(k => typeof c[k] !== "boolean")) return "gates_unknown";
+  return c.safe ? "safe_mode" : c.reducedMotion ? "reduced_motion" : c.saveData ? "save_data"
+    : c.hidden ? "hidden" : !c.enabled ? "unsupported_host" : !c.show ? "disabled" : !c.transportReady ? "transport_unavailable" : null;
+}
+
 const OWNER_ORDER = Object.freeze({ page: 0, header: 1, sidebar: 2, box: 3 });
 /** Recomputed from host descriptors; queued/off/unknown descriptors never get a frame reservation. */
 export function allocateEffectFrames(descriptors, context) {
@@ -65,15 +78,15 @@ export function allocateEffectFrames(descriptors, context) {
   const keys = new Set(), duplicate = new Set();
   for (const d of descriptors) if (d && typeof d.key === "string") { if (keys.has(d.key)) duplicate.add(d.key); keys.add(d.key); }
   const result = descriptors.map(d => ({ key: d?.key, verdict: "off", reason: "unknown", queuePos: null }));
-  const gates = ["safe", "publicLink", "reducedMotion", "saveData", "hidden", "enabled", "show", "previewReady", "optIn", "constrained", "modal"];
+  const gates = ["safe", "publicLink", "reducedMotion", "saveData", "hidden", "enabled", "show", "transportReady", "constrained", "modal"];
   if (gates.some(k => typeof context[k] !== "boolean") || context.openInstance !== null && !instanceName(context.openInstance)) return result;
   let global = null;
   if (context.safe === true) global = "safe_mode";
-  else if (context.publicLink === true) global = "public_link";
   else if (context.reducedMotion === true) global = "reduced_motion";
   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.enabled !== true) global = "unsupported_host";
+  else if (context.show !== true) global = "disabled";
 
   const candidates = [];
   for (let i = 0; i < descriptors.length; i++) {
@@ -87,7 +100,8 @@ 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 (context.publicLink && (d.region !== "chat" || trial)) { r.reason = "public_link"; continue; }
+    if (!context.transportReady) { r.reason = "transport_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; }