@songsid/agend 2.3.0-beta.1 → 2.3.0-beta.11

package/dist/ui/chat-effects.js

@@ -1,5 +1,5 @@
 // #1629: Chat contributes a committed lease to the one app owner; no private pool or server polling.
-import { html, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+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";
@@ -7,18 +7,84 @@ import { chatEffectState, chatEffectIdentity } from "/assets/effect-chat-runtime
 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: { 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 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.", paused: "Paused", low: "Reduced quality" },
-  "zh-TW": { title: "效果", loading: "正在確認效果…", empty: "這個聊天沒有放置效果。", failed: "無法確認效果資源，已停止播放。重新載入頁面後再試。", reload: "重新載入頁面", pause: "暫停", resume: "恢復", remove: "從聊天移除", removeFailed: "無法移除效果。請重新載入頁面確認狀態。", css: "自訂 CSS 開啟或無法確認時，代理的前景效果會暫停。", setting: "開啟外觀設定", running: "播放中", starting: "啟動中", off: "已停止", resumeFailed: "頁面或安全紀錄尚未就緒，無法恢復此效果。請重新載入頁面，或選擇其他效果。", queued: "等待空位", unknown: "這裡已關閉播放，或無法播放效果。", budget: "為維持頁面順暢，已暫停效果。恢復仍保留三次暫停的安全上限。", paused: "已暫停", low: "降低畫質" },
+  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: "效果已關閉。" },
 });
 
-/** Local read/admin sessions keep controls; public, View, poll and header-only pages have no runtime identity. */
+/** Read/admin dashboard sessions keep management controls; public/guest Chat playback has no owner identity. */
 export function chatEffectsMenuAvailable() { return chatEffectIdentity(window) !== null; }
 
-export function ChatEffects({ name, lease, element, store, open, onClose }) {
+// #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;
@@ -36,18 +102,29 @@ export function ChatEffects({ name, lease, element, store, open, onClose }) {
       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 }); return cleanup; }
+      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.previewReady || !g.optIn || g.safe || g.publicLink || g.reducedMotion || g.saveData });
+        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 }); return cleanup; }
-      host.AgendAuth?.canWrite?.().then(value => { if (current()) setCanWrite(value === true); }).catch(() => {});
+      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 {
@@ -57,16 +134,27 @@ export function ChatEffects({ name, lease, element, store, open, onClose }) {
     }
   }, [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); };
-  return html`${open ? html`<${Dialog} title=${t("chatFx.title")} onClose=${onClose} busy=${busy}>
+  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), phase = row?.phase; return html`<section key=${p.id}><h3>${p.manifest.title}</h3><p>${t(row?.reason === "paused" || row?.reason === "host_budget" ? "chatFx.paused" : phase === "running" ? "chatFx.running" : phase ? "chatFx.starting" : row?.verdict === "queued" ? "chatFx.queued" : "chatFx.off")}${row?.quality === "low" ? ` · ${t("chatFx.low")}` : ""}</p>
-        ${row?.reason === "host_budget" ? html`<p>${t("chatFx.budget")}</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("chatFx.resumeFailed"), false); }}>${t("chatFx.resume")}</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-render.js

@@ -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);
@@ -599,7 +617,7 @@
       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>");
       }

package/dist/ui/chat-strings.js

@@ -3,8 +3,25 @@ import { register } from "/assets/app-i18n.js";
 
 register("chat", {
   en: {
-    effectTrial: "Effect trial", effectTrialLocal: "Try requires a local admin, enabled previews and custom CSS off.",
-    effectTrialStart: "Try", effectTrialExpired: "This trial offer has expired.", effectTrialUnavailable: "Trial unavailable: access or playback settings may have changed.",
+    effectTrialReason_checking: "Checking this session…",
+    effectTrialReason_localAdmin: "Sign in as an admin outside the public link to Try.",
+    effectTrialReason_chatChanged: "Open the chat that offered this trial.",
+    effectTrialReason_busy: "Stop the current trial before starting another.",
+    effectTrialReason_safe: "Turn off safe mode to Try.",
+    effectTrialReason_effectsOff: "Turn on effects to Try.",
+    effectTrialReason_reducedMotion: "Effects follow this device’s reduced-motion setting.",
+    effectTrialReason_saveData: "Your device requests reduced data use.",
+    effectTrialReason_transport: "The isolated effect player is unavailable. Reload this page.",
+    effectTrialReason_unsupported: "Canvas Worker playback is unavailable in this browser.",
+    effectTrialReason_inactive: "Return to this page to Try.",
+    effectTrialReason_dialog: "Close the other menu or dialog to Try.",
+    effectTrialReason_expired: "This trial offer has expired.",
+    effectTrialSignIn: "Sign in here",
+    effectTrialStopOther: "Stop current trial",
+    effectTrialSettings: "Open playback settings",
+    effectTrialPlayMotion: "Play effects anyway",
+    effectTrial: "Effect trial", effectTrialLocal: "A sample on this page. Nothing is applied or saved.",
+    effectTrialStopped: "Try stopped", effectTrialStart: "Try", effectTrialExpired: "This trial offer has expired.", effectTrialUnavailable: "This trial is no longer available.",
     cmdConfirm: "Clear", cmdConfirmBackend: "Switch and restart", cmdRunning: "Running /{0}…", cmdNotCommand: "Not a command here — Enter sends it as a message.", cmdDismiss: "Dismiss", cmdCommands: "Commands",
     compactRunning: "Compacting…", compactDone: "✅ Conversation compacted", compactUnknown: "This backend does not report when compaction ends.",
     compactTimeout: "No sign that compaction finished within {0} minutes — check the agent's own chat.",
@@ -25,7 +42,8 @@ register("chat", {
     a11yWorking: "{0} started working", a11yIdle: "{0} finished", a11yReplied: "{0} replied", conversationWith: "Conversation with {0}",
     stopping: "Stopping {0}…", awaiting: "{0} is waiting for your input", approxNote: "Read from the terminal, so approximate", elapsedTitle: "Time since this page saw it start (approximate)",
     dropHere: "Drop files to attach them", asText: "As text", pasteAttached: "A long paste ({0} characters) was attached as a text file", pasteKeptAsText: "No room for another attachment: the long paste stays as text",
-    send: "Send", composerPlaceholder: "Message {0}…", composerHint: "Enter to send · Shift+Enter for a new line", composerMore: "/ for commands · Esc stops the reply", attachTitle: "Attach files (any type — or paste / drop them)",
+    send: "Send", composerPlaceholder: "Message {0}…", composerHint: "Enter to send · Shift+Enter for a new line", composerMore: "/ for commands · Esc stops the reply", guestMore: "Esc stops the reply",
+    guestNote: "You're a guest: the agent sees your messages as a guest's (recognition only).", guestNoCommands: "Guests can't run commands — send it without the leading /.", attachTitle: "Attach files (any type — or paste / drop them)",
     pvPreview: "Preview", pvStop: "Stop", pvDownload: "Download", pvMenu: "Preview options", pvHtml: "HTML",
     pvAllowButton: "Allow previews", pvAllow: "Allow HTML previews — they may be able to send data out", pvDisallow: "Stop allowing HTML previews",
     pvConfirm: "Allow HTML previews?\n\nThis applies on every device where you are signed in. A preview runs the agent's HTML in an isolated frame. It cannot use your login, but it may be able to send data out, and it can slow or freeze this tab. You still click Preview each time.",
@@ -71,6 +89,8 @@ register("chat", {
     "pvFail_bad-address": "Cloudflare gave an address that could not be used",
     pvFail_unknown: "an unexpected error",
     pvServer_notOffered: "Previews are not available on this page.",
+    pvServer_listenFailed: "Previews are unavailable: the fleet could not open its preview port ({0}). Another program may be using it — set web.preview_port, then restart AgEnD.",
+    pvServer_notListening: "Previews are not available on this fleet right now.",
     previews: "Allow HTML previews",
     clicked: "Clicked:", clickShow: "Show the message these buttons were on",
     copy: "Copy", copyMessage: "Copy this reply", copied: "Copied", copyFailed: "Copy failed", wrap: "Wrap", showAll: "Show all {0} lines", showMore: "Show more", showLess: "Show less", jumpLatest: "Latest", newBelow: "{0} new",
@@ -98,11 +118,35 @@ register("chat", {
     themeResetDone: "{0}'s theme was reset.", themeLocked: "{0}'s theme is locked: the agent can't change it.", themeUnlocked: "{0}'s theme is unlocked.",
     themeFailed: "The theme was not changed ({0}).",
     widgetRemoveHeader: "Remove the chat header widget", widgetRemoveDetails: "Remove the Details widget", widgetRemoved: "{0}'s widget was removed.",
+    // #2117: an agent's ambient effect — why it is not showing here, and a person's Clear.
+    ambientBlocked_hidden: "Ambient effect hidden: agents' themes are off — turn them on",
+    ambientBlocked_safe: "Ambient effect hidden: safe mode (?safe=1) — leave safe mode",
+    ambientBlocked_reducedMotion: "Ambient effect hidden: this device follows reduced motion — play effects anyway",
+    ambientBlocked_unsupported: "Ambient effect hidden: this browser can't animate it",
+    ambientClearLoop: "Clear the ambient effect", ambientClearClick: "Clear the click effect", ambientCleared: "{0}'s ambient effect was cleared.",
+    ambientMotionNote: "Your system asks for reduced motion; effects are on.", ambientMotionNoteLink: "Turn off here", ambientMotionNoteClose: "Close",
     configured: "(configured)", fleetDefault: "(fleet default)",
   },
   "zh-TW": {
-    effectTrial: "效果試播", effectTrialLocal: "需由本機管理員啟用預覽並關閉自訂 CSS，才能試播。",
-    effectTrialStart: "試播", effectTrialExpired: "試播邀請已過期。", effectTrialUnavailable: "無法試播：存取權或播放設定可能已變更。",
+    effectTrialReason_checking: "正在確認工作階段…",
+    effectTrialReason_localAdmin: "請在公開連結以外的儀表板以管理員登入後試播。",
+    effectTrialReason_chatChanged: "請開啟發出試播邀請的聊天。",
+    effectTrialReason_busy: "請先停止目前的試播。",
+    effectTrialReason_safe: "請先關閉安全模式。",
+    effectTrialReason_effectsOff: "請先開啟效果。",
+    effectTrialReason_reducedMotion: "效果跟隨這台裝置的「減少動態效果」設定。",
+    effectTrialReason_saveData: "裝置目前要求節省數據。",
+    effectTrialReason_transport: "隔離效果播放器目前無法使用。請重新載入頁面。",
+    effectTrialReason_unsupported: "此瀏覽器無法播放 Canvas Worker 效果。",
+    effectTrialReason_inactive: "請回到本頁後試播。",
+    effectTrialReason_dialog: "請先關閉其他選單或對話框。",
+    effectTrialReason_expired: "試播邀請已過期。",
+    effectTrialSignIn: "在此登入",
+    effectTrialStopOther: "停止目前試播",
+    effectTrialSettings: "開啟播放設定",
+    effectTrialPlayMotion: "仍然播放效果",
+    effectTrial: "效果試播", effectTrialLocal: "僅在本頁試播，不會套用或儲存。",
+    effectTrialStopped: "試播已停止", effectTrialStart: "試播", effectTrialExpired: "試播邀請已過期。", effectTrialUnavailable: "此試播已無法使用。",
     cmdConfirm: "清空", cmdConfirmBackend: "切換並重新啟動", cmdRunning: "執行 /{0} 中…", cmdNotCommand: "這裡沒有這個指令——按 Enter 會當成一般訊息送出。", cmdDismiss: "關閉", cmdCommands: "指令",
     compactRunning: "壓縮中…", compactDone: "✅ 對話已壓縮", compactUnknown: "這個後端不會回報壓縮何時完成。",
     compactTimeout: "{0} 分鐘內沒有看到壓縮完成的紀錄，請到代理自己的對話確認。",
@@ -123,7 +167,8 @@ register("chat", {
     a11yWorking: "{0} 開始工作", a11yIdle: "{0} 已完成", a11yReplied: "{0} 已回覆", conversationWith: "與 {0} 的對話",
     stopping: "正在中止 {0}…", awaiting: "{0} 正在等你回應", approxNote: "從終端畫面判讀，僅供參考", elapsedTitle: "從這個頁面看到它開始工作起算（約略）",
     dropHere: "放開即可附加檔案", asText: "改為文字", pasteAttached: "貼上的長文字（{0} 個字元）已改為文字檔附加", pasteKeptAsText: "附件已滿，貼上的長文字保留為一般文字",
-    send: "送出", composerPlaceholder: "傳訊息給 {0}…", composerHint: "Enter 送出 · Shift+Enter 換行", composerMore: "/ 叫出指令 · Esc 中止回覆", attachTitle: "附加檔案（任何類型，也可以貼上或拖曳）",
+    send: "送出", composerPlaceholder: "傳訊息給 {0}…", composerHint: "Enter 送出 · Shift+Enter 換行", composerMore: "/ 叫出指令 · Esc 中止回覆", guestMore: "Esc 中止回覆",
+    guestNote: "你是訪客：agent 會把你的訊息視為訪客的訊息（僅供辨識）。", guestNoCommands: "訪客不能執行指令，請去掉開頭的 / 再送出。", attachTitle: "附加檔案（任何類型，也可以貼上或拖曳）",
     pvPreview: "預覽", pvStop: "停止", pvDownload: "下載", pvMenu: "預覽選項", pvHtml: "HTML",
     pvAllowButton: "允許預覽", pvAllow: "允許預覽 HTML（預覽可能把資料傳出去）", pvDisallow: "不再允許預覽 HTML",
     pvConfirm: "要允許預覽 HTML 嗎？\n\n這會套用到你登入的每一台裝置。預覽會在隔離的框架裡執行 agent 的 HTML。它無法使用你的登入，但可能把資料傳出去，也可能讓這個分頁變慢或卡住。每次仍需要你按「預覽」。",
@@ -168,6 +213,8 @@ register("chat", {
     "pvFail_bad-address": "Cloudflare 給出的網址無法使用",
     pvFail_unknown: "發生了未預期的錯誤",
     pvServer_notOffered: "這個頁面不提供預覽。",
+    pvServer_listenFailed: "無法預覽：fleet 無法開啟預覽用的連接埠（{0}）。可能有其他程式正在使用它——請設定 web.preview_port，然後重新啟動 AgEnD。",
+    pvServer_notListening: "這個 fleet 目前無法預覽。",
     previews: "允許預覽 HTML",
     clicked: "點選了：", clickShow: "顯示這些按鈕所在的訊息",
     copy: "複製", copyMessage: "複製這則回覆", copied: "已複製", copyFailed: "複製失敗", wrap: "換行", showAll: "展開全部 {0} 行", showMore: "顯示更多", showLess: "收合", jumpLatest: "最新", newBelow: "{0} 則新訊息",
@@ -193,6 +240,12 @@ register("chat", {
     themeResetDone: "已重設 {0} 的主題。", themeLocked: "已鎖定 {0} 的主題：agent 無法變更。", themeUnlocked: "已解除 {0} 的主題鎖定。",
     themeFailed: "主題沒有變更（{0}）。",
     widgetRemoveHeader: "移除聊天標頭的小工具", widgetRemoveDetails: "移除詳細資料頁的小工具", widgetRemoved: "已移除 {0} 的小工具。",
+    ambientBlocked_hidden: "環境效果未顯示：已關閉 agent 的主題——開啟",
+    ambientBlocked_safe: "環境效果未顯示：安全模式（?safe=1）——離開安全模式",
+    ambientBlocked_reducedMotion: "環境效果未顯示：這台裝置跟隨「減少動態效果」——仍然播放",
+    ambientBlocked_unsupported: "環境效果未顯示：此瀏覽器無法播放",
+    ambientClearLoop: "清除環境效果", ambientClearClick: "清除點擊效果", ambientCleared: "已清除 {0} 的環境效果。",
+    ambientMotionNote: "你的系統要求減少動態效果；效果目前開著。", ambientMotionNoteLink: "在這裡關閉", ambientMotionNoteClose: "關閉",
     configured: "（設定值）", fleetDefault: "（fleet 預設）",
   },
 });