@songsid/agend 2.2.1 → 2.2.6

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;
+}

package/dist/ui/chat-effects.js

@@ -0,0 +1,160 @@
+// #1629: Chat contributes a committed lease to the one app owner; no private pool or server polling.
+import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { ownerCssLifecycle } from "/assets/owner-css.js";
+import { chatEffectState, chatEffectIdentity } from "/assets/effect-chat-runtime.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { navigate } from "/assets/app-nav.js";
+import { toast } from "/assets/ui-toast.js";
+import { setThemesShown, themesShown, themesStore } from "/assets/app-themes.js";
+import { setFollowsReducedMotion } from "/assets/fx-motion.js";
+import { getAppEffects } from "./app-effects.js";
+
+register("chatFx", {
+  en: { stock: "Off: the page layout could not be verified ({0}). Reload and report this code if it persists.", transport: "Off: the isolated effect frame could not start. Reload to try again.", enableHere: "Turn effects on here", playMotion: "Play effects anyway", leaveSafe: "Leave safe mode", viewerShow: "Show themes, effects and widgets here", clock: "Off: the page timing clock is unavailable. Reload to try again.", gatesUnknown: "Off: the playback conditions could not be verified.", resource: "Off: this effect could not be loaded or verified. Reload to try again.", frontQueue: "Waiting for a foreground slot.", consent: "This page has older playback information. Reload to use the isolated effect player.", previewMissing: "Off: the isolated effect frame is unavailable. Reload to try again.", unsupported: "Off: this browser lacks required Canvas Worker or layout support.", calibration: "Starting the effect.", baseline: "This page has older playback information. Reload to try again.", safetyUnknown: "Stopped: this device's safety history could not be verified. Reload to check it.", rawReason: "Playback blocked: {0}", missingRow: "Playback state is unavailable (runtime_unavailable).", region: "Off: this effect does not declare the chat region.", blocked: "Placed effects are blocked for this viewer:", deviceSetting: "Open device preferences", webSetting: "Open Web settings", reloadHint: "Reload page",
+    title: "Effects", loading: "Checking effects…", empty: "No effects in this chat.", failed: "Effects stopped because their resources could not be verified. Reload the page to try again.", reload: "Reload page", pause: "Pause", resume: "Resume", remove: "Remove from chat", removeFailed: "Could not remove this effect. Reload the page to check its state.", css: "Agent foreground effects are paused while your custom CSS is on or cannot be verified.", setting: "Open Web appearance settings", running: "Running", starting: "Starting", off: "Stopped", resumeFailed: "This effect cannot resume: the page or its safety history is not ready. Reload the page or choose another effect.", queued: "Waiting for a slot", unknown: "Playback is off or unavailable here.", budget: "Paused to protect page responsiveness. Resume keeps the three-pauses safety limit.", pauseHelp: "Resume keeps this device’s automatic-pause history and three-pause safety limit.", paused: "Paused", low: "Reduced quality",
+    typing: "Waiting while you type — it plays when you leave the message box.", covered: "Waiting while a menu or panel covers the chat.",
+    dialogOpen: "Paused while this dialog is open.", wasRunning: "Was running; paused while this dialog is open.", modal: "Waiting while a dialog is open.",
+    off3: "Turned off on this device after three automatic pauses. Resume cannot restart it here.", interrupted: "Stopped: the page closed while it was playing. Resume to play it again.",
+    cssOff: "Off while your custom CSS is on.", reducedMotion: "Off: you chose to follow the system's reduced motion setting.", saveData: "This page has older playback information. Reload to try again.",
+    hiddenTab: "Waiting until this tab is visible.", offscreen: "Waiting until the chat is on screen.",
+    safeMode: "Off in safe mode.", publicLink: "Off on a public link.", disabled: "Effects are switched off." },
+  "zh-TW": { stock: "已關閉：無法驗證頁面版面（{0}）。請重新載入；若持續發生，請回報此代碼。", transport: "已關閉：無法啟動隔離效果框架。請重新載入再試。", enableHere: "在這裡開啟效果", playMotion: "仍然播放效果", leaveSafe: "離開安全模式", viewerShow: "在這裡顯示主題、效果與小工具", clock: "已關閉：頁面計時無法使用。請重新載入再試。", gatesUnknown: "已關閉：無法確認播放條件。", resource: "已關閉：無法載入或驗證此效果。請重新載入再試。", frontQueue: "等待前景空位。", consent: "這個頁面的播放資訊已過期。請重新載入以使用隔離效果播放器。", previewMissing: "已關閉：隔離效果框架無法使用。請重新載入再試。", unsupported: "已關閉：這個瀏覽器缺少 Canvas Worker 或版面驗證支援。", calibration: "正在啟動效果。", baseline: "這個頁面的播放資訊已過期，請重新載入再試。", safetyUnknown: "已停止：無法確認這台裝置的安全紀錄。請重新載入確認。", rawReason: "播放受阻：{0}", missingRow: "無法取得播放狀態（runtime_unavailable）。", region: "已關閉：此效果未宣告聊天區域。", blocked: "放置的效果目前無法在這個畫面播放：", deviceSetting: "開啟裝置偏好設定", webSetting: "開啟網頁設定", reloadHint: "重新載入頁面",
+    title: "效果", loading: "正在確認效果…", empty: "這個聊天沒有放置效果。", failed: "無法確認效果資源，已停止播放。重新載入頁面後再試。", reload: "重新載入頁面", pause: "暫停", resume: "恢復", remove: "從聊天移除", removeFailed: "無法移除效果。請重新載入頁面確認狀態。", css: "自訂 CSS 開啟或無法確認時，代理的前景效果會暫停。", setting: "開啟網頁外觀設定", running: "播放中", starting: "啟動中", off: "已停止", resumeFailed: "頁面或安全紀錄尚未就緒，無法恢復此效果。請重新載入頁面，或選擇其他效果。", queued: "等待空位", unknown: "這裡已關閉播放，或無法播放效果。", budget: "為維持頁面順暢，已暫停效果。恢復仍保留三次暫停的安全上限。", pauseHelp: "恢復仍保留這台裝置的自動暫停紀錄與三次暫停安全上限。", paused: "已暫停", low: "降低畫質",
+    typing: "輸入時暫停，離開訊息輸入框就會播放。", covered: "選單或面板蓋住聊天時暫停。",
+    dialogOpen: "開著這個對話框時暫停。", wasRunning: "原本在播放；開著這個對話框時暫停。", modal: "有對話框開著時暫停。",
+    off3: "已自動暫停三次，這台裝置已關閉此效果，無法在這裡恢復。", interrupted: "播放時頁面被關閉而停止。按「恢復」再播放一次。",
+    cssOff: "自訂 CSS 開啟時關閉。", reducedMotion: "已關閉：效果跟隨這台裝置的「減少動態效果」設定。", saveData: "這個頁面的播放資訊已過期，請重新載入再試。",
+    hiddenTab: "等這個分頁顯示時再播放。", offscreen: "等聊天顯示在畫面上時再播放。",
+    safeMode: "安全模式下關閉。", publicLink: "公開連結上關閉。", disabled: "效果已關閉。" },
+});
+
+/** Read/admin dashboard sessions keep management controls; public/guest Chat playback has no owner identity. */
+export function chatEffectsMenuAvailable() { return chatEffectIdentity(window) !== null; }
+
+// #2055: what a row's state means, in words — never only "Stopped" when the runtime knows why.
+const RECENT_MS = 5000;
+const REASON_KEY = { __proto__: null, transport_unavailable: "chatFx.transport", owner_css: "chatFx.cssOff", reduced_motion: "chatFx.reducedMotion", save_data: "chatFx.saveData", preview_unavailable: "chatFx.previewMissing", preview_not_consented: "chatFx.consent", unsupported_host: "chatFx.unsupported", registry_unsupported: "chatFx.unsupported",
+  baseline_unsupported: "chatFx.baseline", baseline_unavailable: "chatFx.baseline", baseline_timeout: "chatFx.baseline", calibrating: "chatFx.calibration", safety_unknown: "chatFx.safetyUnknown", region_unavailable: "chatFx.region",
+  hidden: "chatFx.hiddenTab", offscreen: "chatFx.offscreen", safe_mode: "chatFx.safeMode", public_link: "chatFx.publicLink", disabled: "chatFx.disabled",
+  clock_unavailable: "chatFx.clock", gates_unknown: "chatFx.gatesUnknown", runtime_unavailable: "chatFx.missingRow", resource_unavailable: "chatFx.resource", resource_timeout: "chatFx.resource", front_limit: "chatFx.frontQueue",
+  safety_off: "chatFx.off3", interrupted: "chatFx.interrupted" };
+/** `ownOpen`: this Effects dialog is open; `wasRunning`: the effect was running when it opened (shown as past, never as current). */
+export function effectRowText(row, { ownOpen = false, wasRunning = false, doc = typeof document === "undefined" ? null : document } = {}) {
+  if (!row) return t("chatFx.missingRow");
+  if (typeof row.reason === "string" && row.reason !== "stock_overlay" && /^(stock_|trust_|geometry_)/.test(row.reason)) return t("chatFx.stock", row.reason.replace(/[\u0000-\u001f\u007f]/g, "").slice(0, 80));
+  // The sticky history first (it is what Resume answers), then a pause, then what is playing or queued.
+  if (row.reason === "safety_off" || row.reason === "interrupted") return t(REASON_KEY[row.reason]);
+  if (row.reason === "paused" || row.reason === "host_budget") return t("chatFx.paused");
+  if (REASON_KEY[row.reason]) return t(REASON_KEY[row.reason]);
+  if (row.reason != null && !["stock_overlay", "modal", "frame_limit"].includes(row.reason))
+    return t("chatFx.rawReason", typeof row.reason === "string" ? row.reason.replace(/[\u0000-\u001f\u007f]/g, "").slice(0, 80) : "invalid_reason_type");
+  if (row.phase === "running") return t("chatFx.running");
+  if (row.phase) return t("chatFx.starting");
+  if (row.verdict === "queued") return t("chatFx.queued");
+  if (row.reason === "stock_overlay" || row.reason === "modal") {
+    if (ownOpen) return t(wasRunning ? "chatFx.wasRunning" : "chatFx.dialogOpen");
+    if (row.reason === "modal") return t("chatFx.modal");
+    return t("chatFx.covered");
+  }
+  return t("chatFx.rawReason", typeof row.reason === "string" ? row.reason.replace(/[\u0000-\u001f\u007f]/g, "").slice(0, 80) : "invalid_reason_type");
+}
+
+/** Fixed local actions: no server/Worker-provided destination or raw reason in a URL. */
+export function effectReasonAction(reason) {
+  if (reason === "preview_not_consented" || reason === "preview_unavailable") return { reload: true, label: "chatFx.reloadHint" };
+  if (["disabled", "owner_css"].includes(reason)) return { href: "/settings/appearance", label: "chatFx.setting" };
+  if (["transport_unavailable", "baseline_unsupported", "baseline_unavailable", "baseline_timeout", "runtime_unavailable", "resource_unavailable", "resource_timeout", "clock_unavailable", "safety_unknown"].includes(reason)) return { reload: true, label: "chatFx.reloadHint" };
+  return null;
+}
+const localViewer = () => document.body.dataset.publicLink === "1" || document.body.dataset.tier === "guest";
+function ReasonAction({ reason, onClose = () => {} }) {
+  if (reason === "safe_mode") return html`<button type="button" class="btn" onClick=${() => { onClose(); const url = new URL(location.href); url.searchParams.delete("safe"); location.assign(url.href); }}>${t("chatFx.leaveSafe")}</button>`;
+  if (reason === "reduced_motion") return html`<button type="button" class="btn" onClick=${() => { onClose(); setFollowsReducedMotion(false); }}>${t("chatFx.playMotion")}</button>`;
+  if (reason === "disabled" && localViewer()) return html`<button type="button" class="btn" onClick=${() => { onClose(); setThemesShown(true); }}>${t("chatFx.enableHere")}</button>`;
+  const action = document.body.dataset.tier === "guest" && reason === "owner_css" ? { reload: true, label: "chatFx.reloadHint" } : effectReasonAction(reason);
+  return action ? html`<button type="button" class="btn" onClick=${() => { onClose(); if (action.reload) location.reload(); else navigate(action.href); }}>${t(action.label)}</button>` : null;
+}
+
+const NO_PLAYBACK = () => {};
+export function ChatEffects({ name, lease, element, store, open, onClose, onPlayback = NO_PLAYBACK }) {
+  const cssLife = useStore(ownerCssLifecycle);
+  useStore(themesStore); // Viewer-local off/on is visible immediately, independent of runtime callbacks.
+  // Which effects were running just before this dialog opened ("was running" is said in the past, never shown as
+  // current). The ⋯ menu that opens it is a barrier too, so "just before" is within RECENT_MS of the observed stop.
+  // Tracked where updates arrive (an unchanged snapshot is not republished while an effect keeps running).
+  const before = useRef(null), wasOpen = useRef(false), playing = useRef(new Map());
+  const runtime = useRef(null), [state, setState] = useState(null), [canWrite, setCanWrite] = useState(false), [busy, setBusy] = useState(false);
+  useLayoutEffect(() => {
+    let live = true, api = null;
+    const releases = [];
+    // Effects are optional: a failed setup must release its partial ownership without breaking Chat.
+    const cleanup = () => {
+      if (!live) return;
+      live = false;
+      try { api?.dispose?.(); } catch { /* continue releasing partial setup */ }
+      for (const off of releases) { try { if (typeof off === "function") off(); } catch { /* release the rest */ } }
+      if (runtime.current === api) runtime.current = null;
+    };
+    lease.hold(cleanup);
+    try {
+      setBusy(false); onClose(); setCanWrite(false); setState(null);
+      const host = window, owner = getAppEffects(host);
+      const current = () => live && lease.current();
+      if (!owner) { setState({ error: null, rows: [], effects: [], unavailable: true, reason: typeof host.OffscreenCanvas !== "function" || typeof host.Worker !== "function" ? "unsupported_host" : "runtime_unavailable" }); return cleanup; }
+      releases.push(owner.onEnd(() => { if (current()) setState({ error: "resource_unavailable", rows: [], effects: [], unavailable: true }); }));
+      playing.current = new Map();   // evidence belongs to this name and lease only
+      const track = rows => {
+        const now = performance.now(), seen = new Set();
+        for (const r of Array.isArray(rows) ? rows : []) {
+          seen.add(r.id);
+          if (r.phase === "running") playing.current.set(r.id, null);
+          else if (playing.current.get(r.id) === null) playing.current.set(r.id, now);
+        }
+        for (const [id, at] of playing.current) if (!seen.has(id) && at === null) playing.current.set(id, now);
+      };
+      const changed = value => {
+        if (!current()) return;
+        track(value?.rows);
+        const g = owner.gates();
+        setState({ ...value, unavailable: !g.enabled || !g.show || !g.transportReady || g.safe || g.reducedMotion });
+      };
+      api = owner.attachChat({ name, element: element.current, current,
+        observe: () => ({ state: chatEffectState(appStore.get(), name) }), onChange: changed });
+      runtime.current = api;
+      if (!api?.ok) { setState({ error: null, rows: [], effects: [], unavailable: true, reason: "runtime_unavailable" }); return cleanup; }
+      if (chatEffectIdentity(host)) host.AgendAuth?.canWrite?.().then(value => { if (current()) setCanWrite(value === true); }).catch(() => {});
+      api.sync();
+      return cleanup;
+    } catch {
+      cleanup();
+      if (lease.current()) setState({ error: "runtime_unavailable", rows: [], effects: [] });
+      return cleanup;
+    }
+  }, [name, lease]);
+  const rows = state?.rows ?? [], effects = state?.effects ?? [];
+  if (open && !wasOpen.current) {
+    const now = performance.now();
+    before.current = new Map([...playing.current].map(([id, stoppedAt]) => [id, stoppedAt === null || now - stoppedAt < RECENT_MS]));
+  }
+  if (!open) before.current = null;
+  wasOpen.current = open;
+  const css = cssLife.state !== "off" && effects.some(p => p.by !== "human" && p.manifest.layer === "front");
+  const remove = async id => { if (busy) return; setBusy(true); const api = runtime.current; const ok = await api?.remove?.(id); if (!lease.current() || runtime.current !== api) return; setBusy(false); if (!ok) toast(t("chatFx.removeFailed"), false); };
+  const playingNow = !state?.unavailable && !state?.error && rows.some(row => row.phase === "running" && row.reason == null);
+  useEffect(() => { onPlayback({ name, playing: playingNow }); return () => onPlayback({ name, playing: false }); }, [name, playingNow, onPlayback]);
+  const blocked = effects.flatMap(p => { const row = rows.find(r => r.id === p.id); return row?.phase === "running" && row.reason == null ? [] : [{ p, row }]; });
+  return html`${!open && localViewer() && effects.length ? html`<div class="chat-fx-notice"><label><input type="checkbox" checked=${themesShown()} onChange=${e => setThemesShown(e.currentTarget.checked)} /> ${t("chatFx.viewerShow")}</label></div>` : null}${!open && state?.error && !effects.length ? html`<div class="chat-fx-notice" role="status">${effectRowText({ reason: state.error })} <${ReasonAction} reason=${state.error} /></div>` : null}${!open && state?.reason ? html`<div class="chat-fx-notice" role="status">${effectRowText({ reason: state.reason })} <${ReasonAction} reason=${state.reason} /></div>` : null}${!open && blocked.length ? html`<div class="chat-fx-notice" role="status"><strong>${t("chatFx.blocked")}</strong>
+    ${blocked.map(({ p, row }) => html`<span key=${p.id}>${p.manifest.title}: ${effectRowText(row)} ${["paused", "host_budget"].includes(row?.reason) ? html`<small>${t(row.reason === "host_budget" ? "chatFx.budget" : "chatFx.pauseHelp")}</small>` : null} <${ReasonAction} reason=${row?.reason} /></span>`)}</div>` : null}${open ? html`<${Dialog} title=${t("chatFx.title")} onClose=${onClose} busy=${busy}>
+      ${state?.error ? html`<p>${t("chatFx.failed")}</p><button type="button" class="btn" onClick=${() => location.reload()}>${t("chatFx.reload")}</button>` : null}
+      ${css ? html`<p>${t("chatFx.css")}</p><button type="button" class="btn" onClick=${() => { onClose(); navigate("/settings/appearance"); }}>${t("chatFx.setting")}</button>` : null}
+      ${!effects.length && !state?.error ? html`<p>${t(state?.unavailable ? "chatFx.unknown" : state?.loading || !state ? "chatFx.loading" : "chatFx.empty")}</p>` : null}
+      ${effects.map(p => { const row = rows.find(r => r.id === p.id); return html`<section key=${p.id}><h3>${p.manifest.title}</h3><p>${effectRowText(row, { ownOpen: open, wasRunning: before.current?.get(p.id) === true })}${row?.quality === "low" ? ` · ${t("chatFx.low")}` : ""}</p>
+        <${ReasonAction} reason=${row?.reason} onClose=${onClose} />
+        ${["paused", "host_budget"].includes(row?.reason) ? html`<p>${t(row.reason === "host_budget" ? "chatFx.budget" : "chatFx.pauseHelp")}</p>` : null}
+        <button type="button" class="btn" disabled=${busy} onClick=${() => runtime.current?.pause?.(p.id)}>${t("chatFx.pause")}</button>
+        <button type="button" class="btn" disabled=${busy} onClick=${() => { if (!runtime.current?.resume?.(p.id)) toast(t(rows.find(r => r.id === p.id)?.reason === "safety_off" ? "chatFx.off3" : "chatFx.resumeFailed"), false); }}>${t("chatFx.resume")}</button>
+        ${canWrite ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => remove(p.id)}>${t("chatFx.remove")}</button>` : null}</section>`; })}
+    </${Dialog}>` : null}`;
+}

package/dist/ui/chat-live-replies.js

@@ -0,0 +1,58 @@
+// #1629: transient host notifications, never message content or replay/history authority.
+const own = (o, k) => Object.prototype.hasOwnProperty.call(o, k);
+function fields(value, keys, closed = false) {
+  try {
+    if (!value || typeof value !== "object" || ![Object.prototype, null].includes(Object.getPrototypeOf(value))) return null;
+    if (closed && Reflect.ownKeys(value).length !== keys.length) return null;
+    const out = {};
+    for (const k of keys) { const d = Object.getOwnPropertyDescriptor(value, k); if (!d || !own(d, "value")) return null; out[k] = d.value; }
+    return out;
+  } catch { return null; }
+}
+const identity = x => !!x && typeof x.boot === "string" && /^[0-9a-f]{1,32}$/.test(x.boot)
+  && Number.isSafeInteger(x.id) && x.id > 0 && typeof x.instance === "string" && x.instance.length >= 1 && x.instance.length <= 128;
+const MAX_AGE = 5000, MAX_BOOTS = 64, MAX_PENDING = 64;
+export function createLiveAgentReplies(now) {
+  const seen = new Map(), pending = new Map(), listeners = new Set();
+  let last = null, revoked = false;
+  function time() {
+    if (revoked) return null;
+    let t; try { t = now(); } catch { t = null; }
+    if (typeof t !== "number" || !Number.isFinite(t) || t < 0 || last !== null && t < last) { revoked = true; pending.clear(); return null; }
+    last = t;
+    for (const [key, item] of pending) if (t - item.at > MAX_AGE) pending.delete(key);
+    return t;
+  }
+  function ingress(extra, t) {
+    const e = fields(extra, ["source", "receivedAt"], true);
+    return e && e.source === "sse" && typeof e.receivedAt === "number" && Number.isFinite(e.receivedAt) && e.receivedAt >= 0 && e.receivedAt <= t && t - e.receivedAt <= MAX_AGE ? e.receivedAt : null;
+  }
+  return {
+    // Record every accepted ingress, including history/poll, before its message-array merge/eviction.
+    message(value, extra) {
+      const m = fields(value, ["boot", "id", "instance"]); if (!identity(m)) return;
+      const role = fields(value, ["role"])?.role;
+      const t = time(); if (t === null) return;
+      const key = `${m.boot}:${m.id}`, previous = seen.get(m.boot) || 0;
+      pending.delete(key);
+      if (!seen.has(m.boot) && seen.size >= MAX_BOOTS) { revoked = true; pending.clear(); return; }
+      seen.set(m.boot, Math.max(previous, m.id));
+      const at = ingress(extra, t);
+      if (m.id <= previous || role !== "agent" || at === null) return;
+      // Reconnect replay has no receipts: discard old candidates, never the durable-in-page watermark.
+      if (pending.size >= MAX_PENDING) pending.delete(pending.keys().next().value);
+      pending.set(key, { instance: m.instance, at });
+    },
+    receipt(value, extra) {
+      const r = fields(value, ["v", "boot", "id", "instance"], true); if (!identity(r) || r.v !== 1) return false;
+      const t = time(); if (t === null) return false;
+      const at = ingress(extra, t); if (at === null) return false;
+      const key = `${r.boot}:${r.id}`, candidate = pending.get(key); pending.delete(key);
+      if (!candidate || candidate.instance !== r.instance || at < candidate.at || t - candidate.at > MAX_AGE) return false;
+      const event = Object.freeze({ v: 1, boot: r.boot, id: r.id, instance: r.instance });
+      for (const fn of [...listeners]) { try { fn(event); } catch { /* one host observer cannot suppress another */ } }
+      return true;
+    },
+    subscribe(fn) { if (typeof fn !== "function") return () => {}; listeners.add(fn); return () => listeners.delete(fn); },
+  };
+}

package/dist/ui/chat-render.js

@@ -36,7 +36,7 @@
   }
 
   function link(href, label) {
-    return '<a href="' + href + '" target="_blank" rel="noopener noreferrer">' + label + "</a>";
+    return '<a href="' + href + '" target="_blank" rel="noopener noreferrer" data-trust="link">' + label + "</a>";
   }
 
   // Placeholders survive the later passes untouched (they contain no Markdown characters).
@@ -53,11 +53,14 @@
 
   // #1630: a Discord server emoji, `<:name:id>` / `<a:name:id>` — escaped by now — drawn as its picture. Only an id the
   // page knows (the fleet's servers: /ui/emojis) and only from the dashboard's own route; the src is built from the
-  // matched digits, the name (word characters only) goes into alt/title. An unknown id stays the literal text.
+  // matched digits, the name (word characters only) goes into alt/title. Any other — an id the page does not know, or
+  // before the list has come — reads `:name:` (never the raw markup); so does a picture that does not load
+  // (chat-thread.js swaps it: an <img> sized to an emoji showed an empty box, the user's "tofu").
   var EMOJI_RE = /&lt;(a?):([A-Za-z0-9_]{2,32}):(\d{15,25})&gt;/g;
   function emojiImg(id, name) {
     return '<img class="emoji" src="/ui/img/emoji/' + id + '" alt=":' + name + ':" title=":' + name + ':" decoding="async">';
   }
+  function emojiText(name) { return '<span class="emoji-text" title=":' + name + ':">:' + name + ':</span>'; }
 
   // #1682: Discord mentions — `<@id>` / `<@!id>` (a user), `<@&id>` (a role), `<#id>` (a channel) — escaped by now (the
   // role's & too), drawn as a pill: the name the page knows (store.mentions(kind, id), inserted escaped), else @user /
@@ -82,7 +85,7 @@
     // path held its whole column wide.
     s = s.replace(/`([^`\n]+)`/g, function (_m, code) { return stash(store, "<code>" + (store.inCell ? code.replace(/\//g, "/<wbr>") : code) + "</code>"); });
     var known = store.emojis;
-    if (known) s = s.replace(EMOJI_RE, function (m, _a, name, id) { return known(id) ? stash(store, emojiImg(id, name)) : m; });
+    s = s.replace(EMOJI_RE, function (_m, _a, name, id) { return stash(store, known && known(id) ? emojiImg(id, name) : emojiText(name)); });
     var names = store.mentions;
     s = s.replace(MENTION_RE, function (_m, sigil, id) {
       var kind = MENTION_KIND[sigil];
@@ -577,6 +580,21 @@
    * With { htmlCards: true } (a server-marked agent reply, as for renderMarkdown) each .html/.htm file also gets an
    * empty card placeholder <div class="html-card" data-att="<id>"> after the list — the id is 32 hex, nothing else.
    */
+  // The box a photo is drawn in (app.css: .msg .att-img img, max 260 × 220): its own size, scaled down to fit.
+  var PHOTO_MAX_W = 260, PHOTO_MAX_H = 220;
+  /**
+   * #2184: a photo's drawn size as width/height attributes, from the size the server read from its headers: the box is there
+   * before the picture loads, so the text around it never moves when it does (a chat opened cold jittered, as each
+   * photo grew from nothing). Nothing when the size is not known (drawn as before).
+   */
+  function photoBox(a) {
+    var w = a.width, h = a.height;
+    var ok = function (v) { return typeof v === "number" && v >= 1 && v <= 65535 && Math.floor(v) === v; };
+    if (!ok(w) || !ok(h)) return "";
+    var k = Math.min(1, PHOTO_MAX_W / w, PHOTO_MAX_H / h);
+    return ' width="' + Math.max(1, Math.round(w * k)) + '" height="' + Math.max(1, Math.round(h * k)) + '"';
+  }
+
   function attachmentsHtml(attachments, opts) {
     if (!Array.isArray(attachments)) return "";
     var cards = !!(opts && opts.htmlCards);
@@ -594,17 +612,17 @@
       if (cards && isHtmlAttachment(a)) after.push('<div class="html-card" data-att="' + a.id + '"></div>');
       var url = "/ui/file/" + a.id;
       var kind = inline ? attachmentPreviewType(a) : null;
-      if (kind === "video") after.push('<div class="att-media"><video class="att-video" controls preload="metadata" src="' + url + '"></video></div>');
-      else if (kind === "audio") after.push('<div class="att-media"><audio class="att-audio" controls preload="metadata" src="' + url + '"></audio></div>');
+      if (kind === "video") after.push('<div data-trust="media" class="att-media"><video class="att-video" controls preload="metadata" src="' + url + '"></video></div>');
+      else if (kind === "audio") after.push('<div data-trust="media" class="att-media"><audio class="att-audio" controls preload="metadata" src="' + url + '"></audio></div>');
       else if (kind) after.push('<div class="text-card" data-att="' + a.id + '" data-type="' + kind + '"></div>');
       var name = escapeHtml(a.name || "file");
       if (a.kind === "photo") {
-        out.push('<a class="att-img" href="' + url + '" target="_blank" rel="noopener noreferrer"><img src="' + url + '" alt="' + name + '" loading="lazy"></a>');
+        out.push('<a class="att-img" href="' + url + '" target="_blank" rel="noopener noreferrer"><img src="' + url + '" alt="' + name + '"' + photoBox(a) + ' loading="lazy"></a>');
       } else {
         out.push('<a class="att-file" href="' + url + '" download="' + name + '">📎 ' + name + ' <span class="att-size">' + escapeHtml(formatSize(a.size)) + "</span></a>");
       }
     });
-    return (out.length ? '<div class="atts">' + out.join("") + "</div>" : "") + after.join("");
+    return (out.length ? '<div data-trust="attachment" class="atts">' + out.join("") + "</div>" : "") + after.join("");
   }
 
   return {

package/dist/ui/chat-store.js

@@ -8,6 +8,7 @@
 // Requests and #1374: the history of an instance is read once per page, when a person first opens its chat (a
 // navigation — it counts as use, as the old click did). Coming back to it reads nothing; the stream keeps it current.
 import "./chat-render.js";
+import { createLiveAgentReplies } from "./chat-live-replies.js";
 
 const R = () => globalThis.AgendChatRender;
 
@@ -41,7 +42,7 @@ const COMPACT_PAGE_LIMIT_MS = 11 * 60_000;
 /** Build a store. `deps` (fetch, toast, announce, t, now) are injected so tests can drive every path. */
 export function createChatStore(deps) {
   const s = {
-    msgs: {}, drafts: {}, failedSends: {}, pendingFiles: {}, sending: {}, inFlightFiles: {},
+    msgs: {}, drafts: {}, failedSends: {}, pendingFiles: {}, sending: {}, inFlightFiles: {}, sendFailures: {}, instanceStatus: {}, waking: {},
     prompts: {}, workingSince: {}, stopping: {}, cancelling: {}, scrollMemo: {}, historyRead: new Set(), rbBusy: new Set(),
     pollMine: readPollMine(),
     // #1823 (#1828 review): the server's clock minus this device's. A poll's deadline is the server's; a page whose clock
@@ -56,12 +57,14 @@ export function createChatStore(deps) {
   const pastedTexts = new WeakMap();
   const now = deps.now || (() => (typeof performance !== "undefined" ? performance.now() : Date.now()));
   const t = deps.t, tf = deps.t;
+  const liveReplies = createLiveAgentReplies(now);
 
   /** Tell subscribers what changed: `kind` "msgs" (the thread redraws) or "state" (everything else). */
   function changed(instance, kind = "state") { for (const fn of [...subs]) fn(instance, kind); }
-  async function api(method, path, body) {
+  async function api(method, path, body, signal) {
     const o = { method, headers: { "Content-Type": "application/json" } };
     if (body) o.body = JSON.stringify(body);
+    if (signal) o.signal = signal;
     const r = await deps.fetch(path, o);
     return r.json();
   }
@@ -80,6 +83,7 @@ export function createChatStore(deps) {
   function applyStatus(d) {
     if (!d || !Array.isArray(d.instances)) return;
     for (const i of d.instances) {
+      s.instanceStatus[i.name] = i.status;
       noteExec(i.name, (i.execution_state !== undefined ? i.execution_state : i.state) ?? null);
       const waits = i.state === "awaiting_input" ? (typeof i.interaction_summary === "string" ? i.interaction_summary : "") : null;
       if (i.name === s.current && waits != null && s.awaiting[i.name] == null) deps.announce(tf("chat.awaiting", i.name));
@@ -99,8 +103,9 @@ export function createChatStore(deps) {
   function noteServerClock(c) {
     if (c && typeof c.now === "number" && Number.isFinite(c.now)) s.clockSkew = c.now - Date.now();
   }
-  function ingest(m) {
+  function ingest(m, extra) {
     if (!m || typeof m.instance !== "string") return;
+    liveReplies.message(m, extra);
     const before = s.msgs[m.instance];
     s.msgs[m.instance] = R().mergeMessages(before, [m], 500);
     if (m.instance === s.current && s.msgs[m.instance] !== before && m.role !== "status" && !isUser(m, m.instance) && (s.msgs[m.instance] || []).length > (before || []).length) deps.announce(tf("chat.a11yReplied", m.sender));
@@ -139,14 +144,20 @@ export function createChatStore(deps) {
     if (!r || !r.answered) deps.toast(r && r.error ? r.error : t("chat.disconnected"), false);
   }
 
-  /** Read an instance's history once per page (the first time a person opens its chat). */
-  async function openHistory(name, lease) {
-    if (s.historyRead.has(name)) return false;
+  /**
+   * Read an instance's history once per page (the first time a person opens its chat). #2188: `signal` — the chat was
+   * left before the answer came (clicking down the sidebar): the read is aborted, nothing is merged, and the next visit
+   * reads again.
+   */
+  async function openHistory(name, lease, signal) {
+    if (s.historyRead.has(name) || signal?.aborted) return false;
     s.historyRead.add(name);
     try {
-      const r = await api("GET", `/ui/history?instance=${encodeURIComponent(name)}&limit=200`);
+      const r = await api("GET", `/ui/history?instance=${encodeURIComponent(name)}&limit=200`, undefined, signal);
+      if (signal?.aborted) { s.historyRead.delete(name); return false; }
       if (!r || !Array.isArray(r.messages)) { s.historyRead.delete(name); return true; }
       // Kept even when the person has moved on: the store is page-lived, and the answer belongs to `name`.
+      for (const m of r.messages) liveReplies.message(m);
       s.msgs[name] = R().mergeMessages(s.msgs[name], r.messages, 500);
       changed(name, "msgs");
     } catch { s.historyRead.delete(name); /* the live stream still works; the next visit tries again */ }
@@ -162,7 +173,7 @@ export function createChatStore(deps) {
     // A prompt already held (being answered, or claimed from Needs you) keeps its busy/answered state: a repeat of it
     // only refreshes its text and buttons (#1463 review).
     if (!had) s.prompts[p.nonce] = { ...p, resolved: false, busy: false };
-    else if (!had.resolved) Object.assign(had, { text: p.text, actions: p.actions, expiresAt: p.expiresAt });
+    else if (!had.resolved) Object.assign(had, { text: p.text, links: p.links, actions: p.actions, expiresAt: p.expiresAt });
     if (p.instance === s.current) changed(p.instance);
     else if (fresh) deps.toast(tf("chat.promptFor", p.instance, p.text), false);
   }
@@ -174,7 +185,7 @@ export function createChatStore(deps) {
     for (const p of list) {
       const had = s.prompts[p.nonce];
       if (!had) s.prompts[p.nonce] = { ...p, resolved: false, busy: false };
-      else if (!had.resolved) Object.assign(had, { text: p.text, actions: p.actions, expiresAt: p.expiresAt });
+      else if (!had.resolved) Object.assign(had, { text: p.text, links: p.links, actions: p.actions, expiresAt: p.expiresAt });
     }
     for (const n of Object.keys(s.prompts)) if (!s.prompts[n].resolved && !open.has(n)) s.prompts[n].resolved = true;
     changed(null);
@@ -242,6 +253,8 @@ export function createChatStore(deps) {
     const files = (s.pendingFiles[target] || []).slice();
     if ((!txt && !files.length) || !target || s.sending[target]) return;
     s.sending[target] = true;
+    s.waking[target] = s.instanceStatus[target] === "paused";
+    delete s.sendFailures[target];
     s.drafts[target] = "";
     s.pendingFiles[target] = []; s.inFlightFiles[target] = files;
     changed(target);
@@ -253,6 +266,7 @@ export function createChatStore(deps) {
       r = await api("POST", "/ui/send", ids.length ? { instance: target, message: txt, attachments: ids } : { instance: target, message: txt });
     } catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     s.sending[target] = false;
+    delete s.waking[target];
     delete s.inFlightFiles[target];
     if (r && !r.error) { changed(target); return; }
     if (files.length) s.pendingFiles[target] = R().checkFiles(files, s.pendingFiles[target] || []).kept;
@@ -261,9 +275,21 @@ export function createChatStore(deps) {
       if (R().settleFailedSend(target, s.current, shown, shown ? (s.drafts[target] || "") : "") === "restore") s.drafts[target] = txt;
       else s.failedSends[target] = s.failedSends[target] ? `${s.failedSends[target]}\n${txt}` : txt;
     }
+    const why = r && r.reason;
+    const key = typeof why === "string" ? `chat.sendFailure_${why}` : "";
+    const localized = key ? t(key) : "";
+    const error = localized && localized !== key ? localized : (r && r.error ? r.error : t("chat.disconnected"));
+    s.sendFailures[target] = { error, text: txt, files };
     changed(target);
-    deps.toast(r && r.error ? r.error : t("chat.disconnected"), false);
+    deps.toast(error, false);
+  }
+  function canRetrySend(target) {
+    const failed = s.sendFailures[target], files = s.pendingFiles[target] || [];
+    return !!failed && !s.sending[target] && !s.failedSends[target]
+      && (s.drafts[target] || "").trim() === failed.text
+      && files.length === failed.files.length && files.every((f, i) => f === failed.files[i]);
   }
+  function retrySend(target) { if (canRetrySend(target)) return send(target); }
   function addFiles(target, list) {
     if (!target) return;
     const inFlight = s.inFlightFiles[target] || [];
@@ -303,8 +329,8 @@ export function createChatStore(deps) {
     changed(target);
   }
   function discardFailed(target) { delete s.failedSends[target]; changed(target); }
-  /** Typing: kept for its chat, no redraw (the composer already shows it). */
-  function setDraft(target, value) { s.drafts[target] = value; }
+  /** Typing stays local, except a failed send's Retry button must follow edits too. */
+  function setDraft(target, value) { s.drafts[target] = value; if (s.sendFailures[target]) changed(target); }
 
   // ── Stop the reply under way (the composer's Stop, or Esc). Set before the request goes, so a held Esc or a second
   // click sends nothing more (#1317); "Stopping…" until the agent goes idle, or a minute passes.
@@ -380,6 +406,7 @@ export function createChatStore(deps) {
     stream.on("status", applyStatus);
     stream.on("activity", applyActivity);
     stream.on("message", ingest);
+    stream.on("agent_reply_live", liveReplies.receipt);
     stream.on("delivery", (d) => applyDeliveries([d]));
     stream.on("deliveries", applyDeliveries);
     stream.on("prompt", onPrompt);
@@ -393,10 +420,11 @@ export function createChatStore(deps) {
     state: s,
     subscribe(fn) { subs.add(fn); return () => subs.delete(fn); },
     setCurrent(name) { s.current = name; },
+    onAgentReply: liveReplies.subscribe,
     attach, applyStatus, applyActivity, ingest, applyDeliveries, openHistory,
     onPrompt, applyPrompts, resolvePrompt, answerPrompt, answerByNonce, holdPrompt, releasePrompt, promptsFor,
     applyReplyButtons, clickReplyButton,
-    uploadFile, send, addFiles, removeFile, attachPastedText, fileBackAsText, isPasted, putBack, discardFailed, setDraft,
+    uploadFile, send, canRetrySend, retrySend, addFiles, removeFile, attachPastedText, fileBackAsText, isPasted, putBack, discardFailed, setDraft,
     cancelReply, isUser, runCommand, dismissCommand, commandFree,
   };
 }