@songsid/agend 2.2.0 → 2.2.5

package/dist/ui/app-effects.js

@@ -0,0 +1,245 @@
+/** #1629: one session-only app effect owner. Importing this module starts nothing. */
+import { appStore } from "/assets/app-store.js";
+import { motionBlocked, onMotionChange } from "/assets/fx-motion.js";
+import { navStore } from "/assets/app-nav.js";
+import { onPrefsChanged } from "/assets/app-prefs.js";
+import { resolvedMode, themesStore, themesShown } from "/assets/app-themes.js";
+import { ownerCssLifecycle, safeMode } from "/assets/owner-css.js";
+import { constrainedDevice } from "/assets/effect-policy.js";
+import { createAppEffectRuntime } from "/assets/effect-app-runtime.js";
+import { effectBootstrapReady } from "/assets/effect-frame.js";
+import { createEffectCursor } from "/assets/effect-cursor.js";
+import { createOwnerEffectRegions } from "/assets/effect-owner-regions.js";
+import { chatEffectIdentity, effectPlaybackIdentity } from "/assets/effect-chat-runtime.js";
+import { createEffectTrialController } from "./effect-trial-controller.js";
+import { effectTrialMessage } from "./effect-trial-offer.js";
+import { claimPanel, panelVersion, panelStore, openTrialPanel, closePanel } from "./preview-panel.js";
+const owners = new WeakMap();
+export function getAppEffects(host = window) { const value = owners.get(host); return value && !value.dead && value.api?.ok ? value : null; }
+
+/** Boot once with the page's Chat store, including when the first visible panel is Fleet. */
+export function startAppEffects({ store, window: host = window, factories = {} } = {}) {
+  const existing = owners.get(host);
+  if (existing) { if (!existing.dead) existing.bindStore(store); return getAppEffects(host); }
+  const playbackIdentity = effectPlaybackIdentity(host), ownerIdentity = chatEffectIdentity(host);
+  if (!playbackIdentity || typeof host.AgendAuth?.onSessionEnd !== "function" || typeof host.AgendAuth?.sessionEnded !== "function") return null;
+  const doc = host.document, releases = [], ended = new Set(), updates = new Set(), trialUpdates = new Set(); let replyOff = null, replyStore = null, regions = null, cursor = null, cursorStamp = null, trialControl = null, trialIntent = null, trialHint = ownerIdentity ? null : false, trialSerial = 0, trialStamp = null, chatBinding = null;
+  const safe = fn => { try { return fn(); } catch { return null; } };
+  const hold = off => { if (entry.dead) safe(() => off?.()); else releases.push(off); };
+  const entry = { dead: false, api: null,
+    cursorSnapshot: () => cursor?.snapshot() ?? { status: "unavailable", id: null },
+    gates: () => context(),
+    subscribe(fn) { if (typeof fn !== "function" || entry.dead) return () => {}; updates.add(fn); return () => updates.delete(fn); },
+    subscribeTrial(fn) { if (typeof fn !== "function" || entry.dead) return () => {}; trialUpdates.add(fn); return () => trialUpdates.delete(fn); },
+    onEnd(fn) { if (typeof fn !== "function") return () => {}; if (entry.dead) { safe(fn); return () => {}; } ended.add(fn); return () => ended.delete(fn); },
+    bindStore(value) {
+      if (entry.dead || value === replyStore) return;
+      safe(() => replyOff?.()); replyOff = null; replyStore = value;
+      trialControl?.stop(); chatBinding = null; entry.api?.detachChat();
+      if (typeof value?.onAgentReply === "function") {
+        const off = value.onAgentReply(event => { if (!entry.dead && replyStore === value) entry.api?.reply(event); });
+        if (entry.dead || replyStore !== value) safe(() => off?.()); else replyOff = off;
+      }
+    },
+    trialStatus(message) {
+      const offer = safe(() => effectTrialMessage(message)), nav = navStore.get();
+      const now = safe(() => host.Date.now());
+      if (!offer || !Number.isFinite(now) || now >= offer.expiresAt) return "expired";
+      if (trialHint === null && !entry.dead) return "checking";
+      if (entry.dead || !trialHint || trialControl?.ok !== true) return "localAdmin";
+      if (!chatBinding || safe(() => chatBinding.current()) !== true || message.instance !== nav.route?.instance || nav.route?.panel !== "chat") return "chatChanged";
+      const state = trialControl.snapshot();
+      if (state.phase !== "idle" || state.busy) return "busy";
+      return trialPlaybackStatus();
+    },
+    trialFailure(message) {
+      const offer = safe(() => effectTrialMessage(message)), state = trialControl?.snapshot();
+      return offer && state?.phase === "idle" && state.offer === offer.offer && !["stopped", "replaced"].includes(state.reason) ? state.reason : null;
+    },
+    canTry(message) { return entry.trialStatus(message) === "ready"; },
+    stopTrial() { trialControl?.stop(); },
+    startTrial(message) {
+      if (!entry.canTry(message)) return Promise.resolve(false);
+      const nav = navStore.get(); trialIntent = { name: message.instance, seq: nav.seq, claim: claimPanel(), handle: null, chat: chatBinding };
+      return trialControl.start(message);
+    },
+    attachChat(options) {
+      const nav = navStore.get(), name = options?.name;
+      if (entry.dead || !entry.api?.ok || nav.route?.panel !== "chat" || nav.route.instance !== name || typeof options.current !== "function") return null;
+      const binding = { current: () => !entry.dead && host.document === doc && navStore.get().seq === nav.seq && navStore.get().route?.panel === "chat" && navStore.get().route?.instance === name && options.current() === true };
+      chatBinding = binding; trialControl?.stop();
+      if (entry.dead || chatBinding !== binding) return null;
+      const handle = entry.api.attachChat({ ...options, current: () => chatBinding === binding && binding.current() });
+      if (entry.dead || chatBinding !== binding) { safe(() => handle?.dispose()); return null; }
+      if (!handle) chatBinding = null;
+      return handle;
+    },
+    dispose() {
+      if (entry.dead) return; entry.dead = true;
+      safe(() => trialControl?.dispose()); safe(() => entry.api?.dispose()); safe(() => replyOff?.()); replyOff = null; replyStore = null;
+      for (const off of releases.splice(0)) safe(off);
+      updates.clear(); trialUpdates.clear(); const listeners = [...ended]; ended.clear(); for (const fn of listeners) safe(fn);
+    },
+  };
+  owners.set(host, entry); // Reentrant setup never constructs another owner.
+  let media, coarse;
+  function ownerCssForPlayback() {
+    if (doc.body.dataset.tier !== "guest") return ownerCssLifecycle.get().state;
+    // Guests never install owner CSS. Prove its absence rather than borrowing the uninstalled
+    // lifecycle's initial unknown, and refuse unexpected styles instead of trusting a missing id.
+    try {
+      if (doc.body.dataset.ownerCss || doc.querySelectorAll("#owner-css").length) return "unknown";
+      // A CSP-refused or disabled STYLE has no paint. Recheck on every proof so enabling
+      // it never borrows an earlier absence verdict (WebKit capture inserts a refused no-op).
+      for (const style of doc.querySelectorAll("style")) if (style.sheet && style.sheet.disabled !== true) return "unknown";
+      const allowed = new Set(["/assets/tokens.css", "/assets/app.css"]);
+      for (const link of doc.querySelectorAll('link[rel~="stylesheet"]')) {
+        const url = new URL(link.getAttribute("href"), host.location.origin);
+        if (url.origin !== host.location.origin || !allowed.has(url.pathname) || url.search || url.hash) return "unknown";
+      }
+      return "off";
+    } catch { return "unknown"; }
+  }
+  function guestChatVersion(value) {
+    if (doc.body.dataset.tier !== "guest") return null;
+    const name = navStore.get().route?.instance, v = value.instances?.find(i => i.name === name)?.effect_chat_v;
+    return typeof v === "string" && /^[a-f0-9]{32}$/.test(v) ? v : null;
+  }
+  // #2188: whether a dialog, menu or popover is open — a whole-document query when none is (the usual case), asked
+  // several times per sync. Read once per task: the cached value is dropped at the next microtask, and whenever the
+  // document changes (the MutationObserver below drops it before it reads).
+  let modalCache = null;
+  function modalOpen() {
+    if (modalCache === null) {
+      modalCache = !!doc.querySelector("dialog[open],.menu-list,.pop,[role=alertdialog],.oc-keep,.shell.sb-open");
+      Promise.resolve().then(() => { modalCache = null; });
+    }
+    return modalCache;
+  }
+  function context() {
+    return { safe: safeMode(), publicLink: doc.body.dataset.publicLink === "1", reducedMotion: motionBlocked(host), saveData: host.navigator?.connection?.saveData === true,
+      hidden: doc.visibilityState !== "visible", enabled: entry.api?.playbackAvailable !== false && typeof host.OffscreenCanvas === "function" && typeof host.Worker === "function" && typeof host.MutationObserver === "function" && typeof host.ResizeObserver === "function",
+      show: themesShown(), transportReady: effectBootstrapReady(host, host.location?.origin, doc.body.dataset.effectBoot),
+      constrained: constrainedDevice({ memory: host.navigator?.deviceMemory, cores: host.navigator?.hardwareConcurrency, coarse: coarse?.matches === true, width: host.innerWidth }),
+      modal: modalOpen(), openInstance: null };
+  }
+  function trialCurrent(name) {
+    const intent = trialIntent, nav = navStore.get();
+    return !entry.dead && host.document === doc && !!intent && !!intent.chat && chatBinding === intent.chat && intent.chat.current() === true && intent.name === name && nav.seq === intent.seq && nav.route?.panel === "chat" && nav.route.instance === name
+      && (panelVersion() === intent.claim || intent.handle !== null && panelStore.get().open?.handle === intent.handle);
+  }
+  // One priority order feeds both presentation and redraw identity: false→different-false must redraw.
+  function trialPlaybackStatus() {
+    const c = context();
+    if (c.safe) return "safe";
+    if (!c.show) return "effectsOff";
+    if (c.reducedMotion) return "reducedMotion";
+    if (!c.enabled) return "unsupported";
+    if (!c.transportReady) return "transport";
+    if (c.publicLink) return "localAdmin";
+    if (c.hidden || doc.hasFocus?.() !== true) return "inactive";
+    if (c.modal) return "dialog";
+    return "ready";
+  }
+  function trialAllowed() {
+    const c = context();
+    return !entry.dead && doc.visibilityState === "visible" && doc.hasFocus?.() === true
+      && c.enabled && c.show && c.transportReady && !c.safe && !c.publicLink && !c.reducedMotion && !c.hidden && !c.modal;
+  }
+  function mountTrial(handle) {
+    const intent = trialIntent; if (!intent || !trialCurrent(handle.instance) || !handle.current() || !Number.isSafeInteger(++trialSerial)) throw Error("trial_unavailable");
+    intent.handle = handle;
+    const binding = Object.freeze({ key: `trial:${trialSerial}:${handle.reply.trial}`, id: handle.reply.offer.id, run: handle.reply.trial, instance: handle.instance, generation: trialSerial });
+    let stage = null, source = null;
+    const cleanup = () => {
+      safe(() => source?.stop()); safe(() => stage?.dispose());
+      if (panelStore.get().open?.handle === handle) closePanel();
+    };
+    try {
+      openTrialPanel({ key: binding.key, instance: handle.instance, binding, handle,
+        onStage(value) {
+          stage = value;
+          if (!handle.current()) { cleanup(); handle.stop(); return; }
+          source = entry.api.attachTrial({ reply: handle.reply, offer: handle.reply.offer.offer, startedAt: handle.startedAt, stage,
+            current: handle.current, onStop: handle.stop });
+          if (!source) { cleanup(); handle.stop(); }
+        },
+      });
+    } catch (error) { cleanup(); throw error; }
+    return cleanup;
+  }
+  function notifyTrial() {
+    if (entry.dead) return;
+    const nav = navStore.get(), next = JSON.stringify([trialHint, safe(() => chatBinding?.current()) === true, trialPlaybackStatus(), nav.route?.panel, nav.route?.instance, trialControl?.snapshot()]);
+    if (next === trialStamp) return; trialStamp = next;
+    for (const fn of [...trialUpdates]) safe(fn);
+  }
+  const notify = () => { if (!entry.dead) { trialControl?.sync(); notifyTrial(); for (const fn of [...updates]) safe(fn); } };
+  const cursorDragging = () => doc.body.classList?.contains("side-resizing") === true || !!doc.querySelector(".chat-split.resizing");
+  function syncCursor() {
+    if (entry.dead || !cursor) return;
+    const c = context();
+    cursor.update(entry.api?.cursorSelection?.() ?? null, c.enabled && c.show && c.transportReady && !c.safe && !c.publicLink && !c.reducedMotion && !c.hidden && !c.modal && !cursorDragging());
+  }
+  try {
+    if (appStore.get().connection === "ended") { entry.dispose(); return null; }
+    media = host.matchMedia?.("(prefers-reduced-motion: reduce)") ?? { matches: true };
+    coarse = host.matchMedia?.("(pointer: coarse)") ?? { matches: false };
+    entry.api = (factories.runtime ?? createAppEffectRuntime)({ window: host, current: () => !entry.dead && host.document === doc,
+      observe: () => ({ context: context(), ownerCss: ownerCssForPlayback(), mode: resolvedMode() }), onDispose: () => entry.dispose(),
+      resolveOwnerTarget: (slot, manifest, proof) => !entry.dead ? regions?.resolve?.(slot, manifest.box, proof) ?? null : null,
+      onChange: () => { syncCursor(); notify(); } });
+    if (entry.dead || !entry.api.ok) { entry.dispose(); return null; }
+    if (ownerIdentity) trialControl = (factories.trialController ?? createEffectTrialController)({ window: host, current: trialCurrent, allowed: trialAllowed, onStart: mountTrial, onChange: notify });
+    hold(() => trialControl?.dispose());
+    if (ownerIdentity && typeof host.AgendAuth.trialSession === "function") Promise.resolve().then(() => host.AgendAuth.trialSession()).then(value => {
+      if (entry.dead) return; trialHint = value?.localAdmin === true && value.epoch === chatEffectIdentity(host)?.epoch; notify();
+    }).catch(() => { if (!entry.dead) { trialHint = false; notify(); } });
+    hold(panelStore.subscribe(() => { trialControl?.sync(); notifyTrial(); }));
+    const ownRegions = ownerIdentity && (factories.regions ?? createOwnerEffectRegions)({ window: host, current: () => !entry.dead && host.document === doc });
+    regions = ownRegions?.ok ? ownRegions : null; hold(() => ownRegions?.dispose?.());
+    if (entry.dead) return null;
+    const ownCursor = ownerIdentity && safe(() => (factories.cursor ?? createEffectCursor)({ window: host, current: () => !entry.dead && host.document === doc,
+      readImage: (selection, signal) => entry.api?.cursorImageSettled?.(selection, signal) ?? Promise.resolve(null),
+      onChange(value) { const next = JSON.stringify(value); if (next !== cursorStamp) { cursorStamp = next; notify(); } },
+    }));
+    cursor = ownCursor?.ok ? ownCursor : null; hold(() => ownCursor?.dispose?.());
+    if (entry.dead) return null;
+    const sync = () => { if (!entry.dead) { trialControl?.sync(); entry.api.sync(); syncCursor(); notifyTrial(); } };
+    let revision = appStore.get().themesRev, prefsRevision = appStore.get().prefsRev, guestRevision = guestChatVersion(appStore.get()), navSeq = navStore.get().seq;
+    hold(navStore.subscribe(value => { if (entry.dead || value.seq === navSeq) return; navSeq = value.seq; trialControl?.stop(); chatBinding = null; entry.api.detachChat(); syncCursor(); }));
+    hold(appStore.subscribe(value => {
+      if (entry.dead) return;
+      if (value.connection === "ended") { entry.dispose(); return; }
+      const guestNext = guestChatVersion(value), chatChanged = value.themesRev !== revision || guestNext !== guestRevision, ownerChanged = value.prefsRev !== prefsRevision;
+      revision = value.themesRev; prefsRevision = value.prefsRev; guestRevision = guestNext;
+      if (chatChanged) entry.api.changedChat();
+      if (ownerChanged) entry.api.changedOwner();
+      if (!chatChanged && !ownerChanged) sync();
+    }));
+    hold(ownerCssLifecycle.subscribe(sync)); hold(themesStore.subscribe(sync)); hold(onPrefsChanged(sync)); hold(onMotionChange(sync));
+    if (typeof host.AgendTheme?.onChange === "function") hold(host.AgendTheme.onChange(sync));
+    for (const [target, type] of [[media, "change"], [coarse, "change"], [doc, "visibilitychange"], [host, "resize"], [host.navigator?.connection, "change"]]) {
+      if (target?.addEventListener) { target.addEventListener(type, sync); hold(() => target.removeEventListener(type, sync)); }
+    }
+    if (entry.dead) return null;
+    let modal = context().modal, dragging = cursorDragging(), queuedSurface = false;
+    // Panel commits can happen after navigation and contain no Chat lease. Reproject fixed owner targets
+    // once after stock DOM changes. Body-level effect roots/frames/rules do not schedule themselves.
+    const surfaceChanged = () => {
+      if (entry.dead || queuedSurface) return; queuedSurface = true;
+      Promise.resolve().then(() => { queuedSurface = false; sync(); });
+    };
+    const barriers = typeof host.MutationObserver === "function" ? new host.MutationObserver(records => {
+      if (entry.dead) return;
+      modalCache = null;      // the document changed: a dialog may have opened or closed (read it again)
+      const value = context().modal, drag = cursorDragging(); if (value !== modal || drag !== dragging) { modal = value; dragging = drag; sync(); }
+      if (Array.isArray(records) && records.some(r => r.target?.closest?.("#app") || r.target === doc.getElementById?.("app"))) surfaceChanged();
+    }) : null;
+    hold(() => barriers?.disconnect());
+    if (entry.dead) return null;
+    barriers?.observe(doc.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["class", "open", "hidden", "role"] });
+    entry.bindStore(store); sync();
+    return getAppEffects(host);
+  } catch { entry.dispose(); return null; }
+}

package/dist/ui/chat-ambient.js

@@ -0,0 +1,307 @@
+// #2117: an agent's ambient effect on its own chat — falling petals, rising lanterns, twinkles, stars on a click. The
+// agent sends data only (web-ambient.ts checks it; this checks the bounds again); the page draws it with plain nodes
+// animated by the Web Animations API: transform and opacity only, positions through the CSSOM (no style attribute,
+// #1300), every node aria-hidden and pointer-events: none. The looping layer sits behind the thread (.amb-layer, under
+// the scroller and the dock); a burst shows over the messages for a moment (.amb-burst) and never takes the click.
+//
+// Its own gates (not the Canvas Worker runtime's, #2115): the viewer's "Show agents' themes, effects and widgets", safe
+// mode, Web Animations support, and reduced motion only when this device chose to follow the system's setting
+// (fx-motion.js; the user's direction: effects play by default). A hidden tab pauses. Nothing else gates it: it runs
+// no agent code and fetches nothing but its own glyph pictures (fleet decision: no gate without a threat it stops).
+// Caps: 24 looping particles, bursts of at most 16, at most 3 bursts alive — 72 nodes and animations per chat.
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { useStore } from "/assets/app-store.js";
+import { onPrefsChanged } from "/assets/app-prefs.js";
+import { safeMode } from "/assets/owner-css.js";
+import { setThemesShown, themeImageUrl, themesShown, themesStore } from "/assets/app-themes.js";
+import { markMotionNoteShown, motionBlocked, motionNoteDue, onMotionChange, setFollowsReducedMotion } from "/assets/fx-motion.js";
+import "./chat-strings.js";
+
+export const AMBIENT_CAPS = { loop: 24, burst: 16, bursts: 3 };
+const LOOP_PRESETS = ["fall", "rise", "twinkle"];
+const RULES = {
+  fall: { count: [1, 24], duration: [4, 30] }, rise: { count: [1, 24], duration: [4, 30] },
+  twinkle: { count: [1, 24], duration: [1, 10] }, "burst-on-click": { count: [4, 16], duration: [0.3, 2] },
+};
+const COLOR = /^#[0-9a-f]{6}$/;
+const ASSET = /^[0-9a-f]{32}$/;
+const own = (o, k) => !!o && typeof o === "object" && Object.prototype.hasOwnProperty.call(o, k);
+const num = (v, lo, hi) => typeof v === "number" && Number.isFinite(v) && v >= lo && v <= hi;
+const pair = (v, lo, hi) => Array.isArray(v) && v.length === 2 && num(v[0], lo, hi) && num(v[1], lo, hi) && v[0] <= v[1];
+
+/** A spec as the host keeps it, checked again; null when anything is off (it is then not drawn at all). */
+export function sanitizeAmbient(spec) {
+  if (!spec || typeof spec !== "object" || !own(RULES, spec.preset)) return null;
+  const r = RULES[spec.preset];
+  if (!Array.isArray(spec.glyphs) || spec.glyphs.length < 1 || spec.glyphs.length > 4) return null;
+  const glyphs = [];
+  for (const g of spec.glyphs) {
+    if (typeof g === "string" && g.length >= 1 && g.length <= 32) glyphs.push(g);
+    else if (g && typeof g === "object" && typeof g.asset === "string" && ASSET.test(g.asset)) glyphs.push({ asset: g.asset });
+    else return null;
+  }
+  const colors = Array.isArray(spec.colors) ? spec.colors.filter((c) => typeof c === "string" && COLOR.test(c)).slice(0, 5) : [];
+  if (!Number.isInteger(spec.count) || !num(spec.count, r.count[0], r.count[1])) return null;
+  if (!pair(spec.duration, r.duration[0], r.duration[1]) || !pair(spec.size, 10, 40) || !pair(spec.spread, 20, 120)) return null;
+  if (!num(spec.sway, 0, 80) || !num(spec.rotate, 0, 720)) return null;
+  if (!Array.isArray(spec.opacity) || spec.opacity.length !== 3 || !spec.opacity.every((o) => num(o, 0, 1))) return null;
+  return { preset: spec.preset, glyphs, colors, count: spec.count, duration: spec.duration, size: spec.size, sway: spec.sway, spread: spec.spread, rotate: spec.rotate, opacity: spec.opacity };
+}
+
+/** `name`'s ambients from GET /ui/themes, checked: { loop, click } (either null). Null when it has none. */
+export function ambientFor(name) {
+  const a = themesStore.get().ambient;
+  if (!a || typeof a !== "object" || !own(a, name)) return null;
+  const mine = a[name];
+  const loop = own(mine, "loop") ? sanitizeAmbient(mine.loop && mine.loop.spec) : null;
+  const click = own(mine, "click") ? sanitizeAmbient(mine.click && mine.click.spec) : null;
+  if (loop && !LOOP_PRESETS.includes(loop.preset)) return null;
+  if (click && click.preset !== "burst-on-click") return null;
+  return loop || click ? { loop, click } : null;
+}
+
+/** Why this page does not draw ambients now, or null. */
+export function ambientBlock(win = globalThis) {
+  if (safeMode()) return "safe";
+  if (!themesShown()) return "hidden";
+  if (motionBlocked(win)) return "reducedMotion";
+  const El = win.Element;
+  if (!El || !El.prototype || typeof El.prototype.animate !== "function") return "unsupported";
+  return null;
+}
+
+/** The gate as state: moves with the switches, the themes and the device's reduced-motion answer. */
+function useAmbientBlock() {
+  useStore(themesStore);
+  const [, bump] = useState(0);
+  useEffect(() => {
+    const again = () => bump((n) => n + 1);
+    const offPrefs = onPrefsChanged((changed) => { if (changed.has("fx.show")) again(); });
+    const offMotion = onMotionChange(again);
+    return () => { if (typeof offPrefs === "function") offPrefs(); offMotion(); };
+  }, []);
+  return ambientBlock();
+}
+
+const rand = (lo, hi) => lo + Math.random() * (hi - lo);
+const pick = (list) => list[Math.floor(Math.random() * list.length)];
+
+/** One particle node: a text glyph (its colour, else the accent) or a glyph picture. */
+function particle(doc, name, spec, cls) {
+  const g = pick(spec.glyphs), size = Math.round(rand(spec.size[0], spec.size[1]));
+  let el;
+  if (typeof g === "string") {
+    el = doc.createElement("span");
+    el.textContent = g;
+    el.style.setProperty("font-size", `${size}px`);
+    if (spec.colors.length) el.style.setProperty("color", pick(spec.colors));
+  } else {
+    el = doc.createElement("img");
+    el.src = themeImageUrl(name, g.asset);
+    el.alt = "";
+    el.decoding = "async";
+    el.draggable = false;
+    el.style.setProperty("width", `${size}px`);
+    el.style.setProperty("height", `${size}px`);
+  }
+  el.className = cls;
+  el.setAttribute("aria-hidden", "true");
+  return { el, size };
+}
+
+/**
+ * Draw `ambient` ({ loop, click }) for `name` into `layer` (behind) and `front` (bursts), listening on `surface` for
+ * clicks. Returns { stop() }: every node and animation it made goes, every listener it added is removed.
+ */
+export function startAmbient({ name, ambient, layer, front, surface, doc = globalThis.document }) {
+  const anims = new Set();
+  const loopNodes = [];
+  let bursts = 0, stopped = false;
+  const track = (a) => { anims.add(a); if (doc.visibilityState === "hidden") a.pause(); return a; };
+
+  const drawLoop = () => {
+    for (const n of loopNodes.splice(0)) n.remove();
+    for (const a of [...anims]) if (a._amb === "loop") { a.cancel(); anims.delete(a); }
+    const spec = ambient.loop;
+    if (!spec) return;
+    const h = layer.clientHeight || 600, w = layer.clientWidth || 360;
+    const [o0, o1, o2] = spec.opacity;
+    for (let i = 0; i < Math.min(spec.count, AMBIENT_CAPS.loop); i++) {
+      const { el, size } = particle(doc, name, spec, "amb-p");
+      const dur = rand(spec.duration[0], spec.duration[1]) * 1000;
+      const turn = spec.rotate * (Math.random() < 0.5 ? -1 : 1);
+      let frames;
+      if (spec.preset === "twinkle") {
+        el.style.setProperty("left", `${rand(0, Math.max(0, w - size))}px`);
+        el.style.setProperty("top", `${rand(0, Math.max(0, h - size))}px`);
+        frames = [
+          { transform: "scale(0.6) rotate(0deg)", opacity: o0 },
+          { transform: `scale(1) rotate(${turn / 2}deg)`, opacity: o1, offset: 0.5 },
+          { transform: `scale(0.6) rotate(${turn}deg)`, opacity: o2 },
+        ];
+      } else {
+        el.style.setProperty("left", `${rand(0, Math.max(0, w - size))}px`);
+        el.style.setProperty("top", "0px");
+        const dx = rand(-spec.sway, spec.sway), down = spec.preset === "fall";
+        const from = down ? -size - 4 : h + 4, to = down ? h + 4 : -size - 4;
+        frames = [
+          { transform: `translate(0px, ${from}px) rotate(0deg)`, opacity: o0 },
+          { transform: `translate(${dx * 0.6}px, ${from + (to - from) * 0.15}px) rotate(${turn * 0.15}deg)`, opacity: o1, offset: 0.15 },
+          { transform: `translate(${-dx * 0.4}px, ${from + (to - from) * 0.6}px) rotate(${turn * 0.6}deg)`, opacity: (o1 + o2) / 2, offset: 0.6 },
+          { transform: `translate(${dx}px, ${to}px) rotate(${turn}deg)`, opacity: o2 },
+        ];
+      }
+      layer.appendChild(el);
+      loopNodes.push(el);
+      // A negative delay starts each one part-way through, so the layer is already full when it appears.
+      const a = el.animate(frames, { duration: dur, delay: -Math.random() * dur, iterations: Infinity, easing: "linear" });
+      a._amb = "loop";
+      track(a);
+    }
+  };
+
+  const burst = (x, y) => {
+    const spec = ambient.click;
+    if (!spec || bursts >= AMBIENT_CAPS.bursts || stopped) return;
+    bursts++;
+    const [, o1, o2] = spec.opacity;
+    let left = Math.min(spec.count, AMBIENT_CAPS.burst);
+    const done = (el, a) => { el.remove(); anims.delete(a); if (--left === 0) bursts--; };
+    for (let i = 0, n = left; i < n; i++) {
+      const { el, size } = particle(doc, name, spec, "amb-p");
+      el.style.setProperty("left", `${x - size / 2}px`);
+      el.style.setProperty("top", `${y - size / 2}px`);
+      const angle = (i / n) * Math.PI * 2 + rand(-0.3, 0.3), dist = rand(spec.spread[0], spec.spread[1]);
+      const turn = rand(-spec.rotate, spec.rotate) / 2;
+      front.appendChild(el);
+      const a = el.animate([
+        { transform: "translate(0px, 0px) scale(0.4) rotate(0deg)", opacity: o1 },
+        { transform: `translate(${Math.cos(angle) * dist}px, ${Math.sin(angle) * dist}px) scale(1) rotate(${turn}deg)`, opacity: Math.min(o2, o1) },
+      ], { duration: rand(spec.duration[0], spec.duration[1]) * 1000, easing: "cubic-bezier(.2,.7,.3,1)", fill: "forwards" });
+      a._amb = "burst";
+      track(a);
+      let gone = false;
+      const finish = () => { if (!gone) { gone = true; done(el, a); } };
+      a.onfinish = finish; a.oncancel = finish;
+    }
+  };
+
+  // Passive and never cancelling: the click still lands on what is under it. Only in the thread (not the composer),
+  // and not on a menu or dialog open over it: stars are for the conversation.
+  const onDown = (ev) => {
+    if (!ambient.click || ev.button > 0) return;
+    const target = ev.target;
+    if (!target || typeof target.closest !== "function" || !target.closest(".scroller") || target.closest("[role=menu], [role=dialog]")) return;
+    const box = front.getBoundingClientRect();
+    burst(ev.clientX - box.left, ev.clientY - box.top);
+  };
+  const onVisible = () => { for (const a of anims) { if (doc.visibilityState === "hidden") a.pause(); else a.play(); } };
+  // Size moves (a rotated phone, the preview panel opening): the loop is drawn again for the new box, a moment later.
+  let resizeTimer = null, lastW = layer.clientWidth, lastH = layer.clientHeight;
+  const ro = typeof globalThis.ResizeObserver === "function" ? new globalThis.ResizeObserver(() => {
+    if (layer.clientWidth === lastW && layer.clientHeight === lastH) return;
+    lastW = layer.clientWidth; lastH = layer.clientHeight;
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => { if (!stopped) drawLoop(); }, 200);
+  }) : null;
+
+  drawLoop();
+  if (ambient.click) surface.addEventListener("pointerdown", onDown, { passive: true });
+  doc.addEventListener("visibilitychange", onVisible);
+  if (ro && ambient.loop) ro.observe(layer);
+
+  return {
+    stop() {
+      stopped = true;
+      clearTimeout(resizeTimer);
+      if (ro) ro.disconnect();
+      surface.removeEventListener("pointerdown", onDown, { passive: true });
+      doc.removeEventListener("visibilitychange", onVisible);
+      for (const a of anims) a.cancel();
+      anims.clear();
+      for (const n of loopNodes.splice(0)) n.remove();
+      while (front.firstChild) front.firstChild.remove();
+    },
+    /** For tests and the smoke: what is alive now. */
+    stats() { return { nodes: layer.children.length + front.children.length, animations: anims.size, bursts }; },
+  };
+}
+
+/**
+ * The chat's ambient: renders its two layers inside .chat-main (`surface`) and runs them. `part` is "layer" (behind,
+ * right after the theme picture) or "front" (after the dock); the "layer" instance owns the run and finds its sibling.
+ */
+export function ChatAmbient({ name, surface, part }) {
+  const block = useAmbientBlock();
+  const ambient = block ? null : ambientFor(name);
+  const key = ambient ? JSON.stringify(ambient) : "";
+  const ref = useRef(null);
+  useEffect(() => {
+    if (part !== "layer" || !ambient) return undefined;
+    const layer = ref.current, host = surface.current;
+    const front = host && host.querySelector(".amb-burst");
+    if (!layer || !host || !front) return undefined;
+    host.classList.add("has-amb");
+    const run = startAmbient({ name, ambient, layer, front, surface: host });
+    if (typeof globalThis !== "undefined") globalThis.__agendAmbient = run;   // the smoke reads stats(); nothing else
+    return () => { run.stop(); host.classList.remove("has-amb"); if (globalThis.__agendAmbient === run) delete globalThis.__agendAmbient; };
+  }, [name, key, part]);
+  if (!ambient) return null;
+  return part === "layer" ? html`<div ref=${ref} class="amb-layer" aria-hidden="true"></div>` : html`<div class="amb-burst" aria-hidden="true"></div>`;
+}
+
+/**
+ * The one-time note (the user's direction): the system asks for reduced motion and this chat's ambient or Canvas Worker plays anyway —
+ * say so once on this device, and turn it off right here (this device's switch: the same on the public link, where
+ * Settings is not). Shown only while an ambient or Canvas Worker is playing.
+ */
+export function AmbientMotionNote({ name, canvasPlaying = false }) {
+  const block = useAmbientBlock();
+  const shown = canvasPlaying || !block && !!ambientFor(name);
+  const noteDue = motionNoteDue();
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!shown || open || !noteDue) return;
+    markMotionNoteShown();
+    setOpen(true);
+  }, [shown, noteDue]);
+  if (!open || !shown) return null;
+  const off = () => { setOpen(false); setFollowsReducedMotion(true); };
+  return html`<div class="amb-note" data-trust="thread-control" role="status">
+    <span>${t("chat.ambientMotionNote")}</span>
+    <button type="button" class="amb-note-off" onClick=${off}>${t("chat.ambientMotionNoteLink")}</button>
+    <button type="button" class="amb-note-x" aria-label=${t("chat.ambientMotionNoteClose")} onClick=${() => setOpen(false)}>×</button>
+  </div>`;
+}
+
+/**
+ * The fix for a block, done right here: both switches are this viewer's own (the show switch is a local choice on the
+ * public link; the reduced-motion one is per device), so it works on the public link too; safe mode is the URL. Both
+ * stay in Settings → Web appearance as well.
+ */
+const FIX = {
+  hidden: () => setThemesShown(true),
+  reducedMotion: () => setFollowsReducedMotion(false),
+  safe: () => { const u = new URL(globalThis.location.href); u.searchParams.delete("safe"); globalThis.location.assign(u.toString()); },
+};
+
+/**
+ * The chat ⋯ entries for `name`'s ambient: why it is not showing here (a visible reason; choosing it fixes it when the
+ * page can), and — for an admin, never over the public link — Clear for each kind.
+ */
+export function ambientMenuItems(name, { publicLink, clear }) {
+  const a = themesStore.get().ambient;
+  const mine = a && own(a, name) ? a[name] : null;
+  if (!mine || typeof mine !== "object" || !(own(mine, "loop") || own(mine, "click"))) return [];
+  const items = [];
+  const block = ambientBlock();
+  if (block) {
+    items.push({
+      key: "ambient-blocked", label: t(`chat.ambientBlocked_${block}`), icon: "info",
+      onSelect: () => { if (own(FIX, block)) FIX[block](); },
+    });
+  }
+  if (!publicLink) for (const k of ["loop", "click"]) if (own(mine, k)) items.push({ key: `ambient-clear-${k}`, label: t(k === "loop" ? "chat.ambientClearLoop" : "chat.ambientClearClick"), icon: "trash", onSelect: () => clear(name, k) });
+  return items;
+}

package/dist/ui/chat-effect-posters.js

@@ -0,0 +1,42 @@
+/** #1629: static Chat fallback. It requires no preview origin, device consent, Worker or personal identity. */
+import { useLayoutEffect } from "/assets/app-html.js";
+import { appStore } from "/assets/app-store.js";
+import { onPrefsChanged } from "/assets/app-prefs.js";
+import { themesShown, themesStore } from "/assets/app-themes.js";
+import { ownerCssLifecycle } from "/assets/owner-css.js";
+import { effectPlaybackIdentity } from "/assets/effect-chat-runtime.js";
+import { effectBootstrapReady } from "/assets/effect-frame.js";
+import { motionBlocked, onMotionChange } from "/assets/fx-motion.js";
+import { createChatPosters } from "/assets/effect-posters.js";
+
+export function ChatEffectPosters({ name, lease, element }) {
+  useLayoutEffect(() => {
+    let live = true, api = null;
+    const releases = [], host = window;
+    const current = () => live && lease.current();
+    const cleanup = () => { if (!live) return; live = false; try { api?.dispose?.(); } catch { /* optional */ } for (const off of releases) { try { off?.(); } catch { /* release all */ } } };
+    lease.hold(cleanup);
+    try {
+      const motion = host.matchMedia?.("(prefers-reduced-motion: reduce)") ?? { matches: true };
+      const observe = () => {
+        // This is a surface fallback, not a replacement for an explicit Pause, queued effect or failed live read.
+        const playback = effectPlaybackIdentity(host) && typeof host.Worker === "function" && typeof host.OffscreenCanvas === "function" &&
+          effectBootstrapReady(host, host.location?.origin, host.document.body.dataset.effectBoot) && !motionBlocked(host);
+        return { shown: themesShown(), fallback: !playback, ownerCss: ownerCssLifecycle.get().state };
+      };
+      api = createChatPosters({ window: host, name, element: element.current, current, observe });
+      if (!api.ok) return cleanup;
+      const sync = () => { if (current()) api.sync(); };
+      let revision = appStore.get().themesRev;
+      releases.push(appStore.subscribe(s => {
+        if (!current()) return;
+        if (s.connection === "ended") { api.dispose(); return; }
+        if (s.themesRev !== revision) { revision = s.themesRev; api.changed(); } else sync();
+      }));
+      releases.push(ownerCssLifecycle.subscribe(sync)); releases.push(themesStore.subscribe(sync)); releases.push(onPrefsChanged(sync)); releases.push(onMotionChange(sync));
+      for (const target of [motion, host.navigator?.connection]) if (target?.addEventListener) { target.addEventListener("change", sync); releases.push(() => target.removeEventListener("change", sync)); }
+      sync(); return cleanup;
+    } catch { cleanup(); return cleanup; }
+  }, [name, lease]);
+  return null;
+}