@songsid/agend 2.2.0 → 2.3.0-beta.1

package/dist/ui/settings-effects.js

@@ -0,0 +1,201 @@
+// #1629 B2: library management only. This module never loads Worker code or creates a preview/frame.
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { confirmDialog } from "/assets/ui-confirm.js";
+import { OwnerEffects } from "./settings-owner-effects.js";
+
+register("effectSettings", {
+  en: {
+    title: "Effects", lead: "Manage effect files and save selections for a chat. Saving replaces that chat’s parameters with the values below.", folder: "Upload an effect folder", files: "Choose effect.json and worker.js, with optional raster assets. Up to 1 MiB after processing.",
+    inUse: "This effect is still in use and cannot be deleted.", quota: "Your library reached its 10-effect or 8 MiB limit. Delete unused copies first.", rateLimited: "Too many changes. Wait a moment, then try again.",
+    loading: "Loading effects…", retry: "Reload library", empty: "No effects in your library.", failed: "Couldn't load the library. Try again.", actionFailed: "Couldn't save this change. Try again.", savedRefresh: "Saved. Reload the library to see the result.",
+    uploadFailed: "Couldn't upload this folder. Check its files and size, then try again.", public: "Effect management isn't available on a temporary public link.", readOnly: "Read-only session: sign in as an admin to change effects.",
+    yours: "Your copy", shared: "Shared with you", share: "Share your copy with agents and people on this fleet", delete: "Delete your copy", deleteConfirm: "Delete your unused copy of this effect? Other people's copies are kept.",
+    chat: "Chat", chooseChat: "Choose a chat", apply: "Save for this chat", remove: "Remove from this chat", saved: "Saved.", history: "Profile history", unmeasured: "Not measured yet", unavailable: "Profile unavailable", reported: "Reported host observations; they don't prove an effect's cost.",
+    fps: "Host FPS p50 / p10", tasks: "Host long task p95", noTasks: "Not observed", standard: "Standard device", constrained: "Constrained device", params: "Parameters", badParams: "Check the parameter values.", more: "Show more", count: "{0} effects", one: "1 effect", profileFailed: "Couldn't read profile history. Try again.",
+  },
+  "zh-TW": {
+    title: "效果", lead: "管理效果檔案，並儲存聊天的效果選擇。儲存時會以下方數值取代該聊天的效果參數。", folder: "上傳效果資料夾", files: "選擇 effect.json、worker.js，以及可選的點陣圖素材；處理後最多 1 MiB。",
+    inUse: "這個效果仍在使用中，無法刪除。", quota: "你的程式庫已達 10 個效果或 8 MiB 上限，請先刪除未使用的副本。", rateLimited: "變更太頻繁，請稍候再試。",
+    loading: "正在載入效果…", retry: "重新載入程式庫", empty: "程式庫中還沒有效果。", failed: "無法載入程式庫，請重試。", actionFailed: "無法儲存變更，請重試。", savedRefresh: "已儲存，請重新載入程式庫查看結果。",
+    uploadFailed: "無法上傳這個資料夾，請檢查檔案與大小後重試。", public: "臨時公開連結不提供效果管理。", readOnly: "目前為唯讀登入，請以管理員身分登入才能修改效果。",
+    yours: "你持有的副本", shared: "他人與你共享", share: "將你的副本共享給這個 fleet 的 agent 與使用者", delete: "刪除你的副本", deleteConfirm: "刪除你未使用的效果副本？其他人的副本會保留。",
+    chat: "聊天", chooseChat: "選擇聊天", apply: "儲存到這個聊天", remove: "從這個聊天移除", saved: "已儲存。", history: "效能回報紀錄", unmeasured: "尚未測量", unavailable: "無法取得效能回報", reported: "這是主機觀測回報，不能證明效果本身的資源用量。",
+    fps: "主機 FPS p50／p10", tasks: "主機長任務 p95", noTasks: "未觀測到", standard: "一般裝置", constrained: "受限裝置", params: "參數", badParams: "請檢查參數值。", more: "顯示更多", count: "{0} 個效果", one: "1 個效果", profileFailed: "無法讀取效能回報紀錄，請重試。",
+  },
+});
+const tn = (key, ...args) => t(`effectSettings.${key}`, ...args);
+const REFUSALS = Object.freeze({ effect_in_use: "inUse", effect_quota: "quota", rate_limited: "rateLimited" });
+const refusal = (body, fallback) => tn(typeof body?.error === "string" && Object.hasOwn(REFUSALS, body.error) ? REFUSALS[body.error] : fallback);
+const ID = /^[0-9a-f]{32}$/;
+const PATH = /^(?:effect\.json|worker\.js|poster\.png|cursor\.png|assets\/[a-z0-9][a-z0-9_-]{0,63}\.(?:png|jpe?g|webp|gif))$/;
+const RAW_MAX = 8 * 1024 * 1024, WIRE_MAX = 12 * 1024 * 1024;
+const plain = (v) => !!v && typeof v === "object" && Object.getPrototypeOf(v) === Object.prototype;
+const publicLink = () => typeof document !== "undefined" && document.body?.dataset.publicLink === "1";
+
+/** File metadata bounds are checked before reading. No directory path reaches the server. */
+export async function encodeEffectFolder(input, signal) {
+  const files = Array.from(input || []);
+  if (files.length < 2 || files.length > 20) throw Error("effect_files");
+  const nested = files.some(f => !!f?.webkitRelativePath), paths = new Set(); let root = null, raw = 0, assets = 0;
+  const rows = files.map(file => {
+    if (!file || typeof file.name !== "string" || !Number.isSafeInteger(file.size) || file.size < 0 || (raw += file.size) > RAW_MAX || typeof file.arrayBuffer !== "function") throw Error("effect_files");
+    let path = file.name;
+    if (nested) {
+      const relative = file.webkitRelativePath;
+      if (typeof relative !== "string" || relative.startsWith("/") || relative.includes("\\")) throw Error("effect_files");
+      const at = relative.indexOf("/"); if (at < 1) throw Error("effect_files");
+      const prefix = relative.slice(0, at); if (root === null) root = prefix; if (root !== prefix) throw Error("effect_files");
+      path = relative.slice(at + 1);
+    }
+    if (!PATH.test(path) || paths.has(path) || (path.startsWith("assets/") && ++assets > 16)) throw Error("effect_files");
+    paths.add(path); return { file, path };
+  });
+  if (!paths.has("effect.json") || !paths.has("worker.js")) throw Error("effect_files");
+  const encoded = [];
+  for (const { file, path } of rows) {
+    if (signal?.aborted) throw Error("cancelled");
+    const buffer = await file.arrayBuffer(); if (signal?.aborted) throw Error("cancelled");
+    if (!(buffer instanceof ArrayBuffer) || buffer.byteLength !== file.size) throw Error("effect_files");
+    const bytes = new Uint8Array(buffer), chunks = [];
+    for (let i = 0; i < bytes.length; i += 8192) chunks.push(String.fromCharCode(...bytes.subarray(i, i + 8192)));
+    encoded.push({ path, data_b64: btoa(chunks.join("")) });
+  }
+  const body = JSON.stringify(encoded); if (new TextEncoder().encode(body).byteLength > WIRE_MAX) throw Error("effect_files");
+  return body;
+}
+export function effectCatalog(body) {
+  if (!plain(body) || typeof body.canWrite !== "boolean" || !Array.isArray(body.effects)) return null;
+  const seen = new Set(), effects = [];
+  for (const e of body.effects) {
+    if (!plain(e) || typeof e.id !== "string" || !ID.test(e.id) || seen.has(e.id) || !plain(e.manifest) || typeof e.manifest.title !== "string" || e.manifest.title.length < 1 || e.manifest.title.length > 40 || !Number.isInteger(e.bytes) || e.bytes < 1 || e.bytes > 1048576 || typeof e.ownClaim !== "boolean" || typeof e.sharedByYou !== "boolean" || !e.ownClaim && e.sharedByYou) return null;
+    if (effectParamOverrides(e.manifest) === null) return null;
+    seen.add(e.id); effects.push(e);
+  }
+  return { canWrite: body.canWrite, effects };
+}
+/** UI draft conversion only; the host independently checks the manifest and every override on apply. */
+export function effectParamOverrides(manifest, draft = {}) {
+  if (!plain(manifest) || !plain(draft) || manifest.params !== undefined && !plain(manifest.params)) return null;
+  const defs = manifest.params || {}, out = Object.create(null);
+  if (Object.keys(defs).length > 16 || Object.keys(draft).some(k => !Object.hasOwn(defs, k))) return null;
+  for (const [key, d] of Object.entries(defs)) {
+    if (!/^[a-z][a-z0-9_]{0,31}$/.test(key) || !plain(d)) return null;
+    const supplied = Object.hasOwn(draft, key); let v = supplied ? draft[key] : d.default;
+    if (d.type === "int" || d.type === "number") {
+      if (supplied && typeof v === "string" && v.trim() !== "") v = Number(v);
+      if (typeof v !== "number" || !Number.isFinite(v) || !Number.isFinite(d.min) || !Number.isFinite(d.max) || v < d.min || v > d.max || d.type === "int" && !Number.isSafeInteger(v)) return null;
+      if (d.type === "number" && d.step !== undefined) {
+        const n = (v - d.min) / d.step;
+        if (!(d.step > 0) || !Number.isFinite(n) || Math.abs(n - Math.round(n)) > 1e-8) return null;
+      }
+    } else if (d.type === "bool") { if (typeof v !== "boolean") return null; }
+    else if (d.type === "enum") { if (!Array.isArray(d.values) || d.values.length > 16 || typeof v !== "string" || !d.values.includes(v)) return null; }
+    else if (d.type === "color") { if (typeof v !== "string" || !/^#[0-9a-fA-F]{6}$/.test(v)) return null; v = v.toLowerCase(); }
+    else return null;
+    if (v !== d.default) out[key] = v;
+  }
+  return out;
+}
+function Params({ manifest, draft, update, disabled }) {
+  const defs = plain(manifest.params) ? Object.entries(manifest.params).slice(0, 16) : [];
+  if (!defs.length) return null;
+  return html`<fieldset class="s-fx-params" disabled=${disabled}><legend>${tn("params")}</legend>${defs.map(([key, d]) => {
+    const value = Object.hasOwn(draft, key) ? draft[key] : d.default;
+    if (d.type === "bool") return html`<label key=${key} class="check"><input data-param=${key} type="checkbox" checked=${value} onChange=${e => update(key, e.target.checked)} />${key}</label>`;
+    if (d.type === "enum") return html`<label key=${key}>${key}<select data-param=${key} value=${value} onChange=${e => update(key, e.target.value)}>${d.values.map(v => html`<option key=${v} value=${v}>${v}</option>`)}</select></label>`;
+    return html`<label key=${key}>${key}<input data-param=${key} type=${d.type === "color" ? "color" : "number"} min=${d.min} max=${d.max} step=${d.type === "int" ? 1 : d.step || "any"} value=${value} onInput=${e => update(key, e.target.value)} /></label>`;
+  })}</fieldset>`;
+}
+async function call(path, init, signal) {
+  try {
+    const res = await fetch(path, { credentials: "same-origin", ...init, signal });
+    let body = null; try { body = await res.json(); } catch { /* unknown response refuses */ }
+    return { ok: res.ok && !body?.error, body };
+  } catch { return { ok: false, body: null }; }
+}
+
+function Profile({ value }) {
+  if (!value || value.error || !Array.isArray(value.records)) return html`<p class="sub">${tn("unavailable")}</p>`;
+  if (value.status === "unmeasured" || !value.records.length) return html`<p class="sub">${tn("unmeasured")}</p>`;
+  return html`<div class="s-fx-profile"><p class="sub">${tn("reported")}</p>${value.records.map((p, i) => {
+    const valid = p && ["standard", "constrained"].includes(p.device) && [p.fps_p50, p.fps_p10].every(n => typeof n === "number" && Number.isFinite(n) && n >= 0 && n <= 1000);
+    if (!valid) return html`<p key=${i} class="sub">${tn("unavailable")}</p>`;
+    return html`<div key=${i}><strong>${tn(p.device)}</strong><p class="sub">${tn("fps")}: ${p.fps_p50} / ${p.fps_p10} · ${tn("tasks")}: ${typeof p.long_task_p95 === "number" && Number.isFinite(p.long_task_p95) ? `${p.long_task_p95} ms` : tn("noTasks")}</p></div>`;
+  })}</div>`;
+}
+
+/** Admin changes remain authoritative on the host; canWrite is a display hint only. */
+export function EffectsCard() {
+  const app = useStore(appStore), [view, setView] = useState(null), [error, setError] = useState(null), [busy, setBusy] = useState(false), [message, setMessage] = useState(null);
+  const [target, setTarget] = useState(""), [limit, setLimit] = useState(50), [history, setHistory] = useState({}), [drafts, setDrafts] = useState({});
+  const uploadInput = useRef(null);
+  const life = useRef({ alive: false, seq: 0, controller: null, pending: false });
+  const current = (seq) => life.current.alive && seq === life.current.seq;
+  const begin = () => { if (!life.current.alive || life.current.pending || publicLink()) return null; life.current.pending = true; life.current.controller?.abort(); const controller = new AbortController(), seq = ++life.current.seq; life.current.controller = controller; return { seq, signal: controller.signal }; };
+  const finish = seq => { if (current(seq)) { life.current.pending = false; setBusy(false); } };
+  const load = async (op) => {
+    const r = await call("/ui/effects", {}, op.signal); if (!current(op.seq)) return false;
+    const data = r.ok ? effectCatalog(r.body) : null; setView(data); setHistory({}); setError(data ? null : tn("failed")); return !!data;
+  };
+  const reload = async () => { const op = begin(); if (!op) return; setBusy(true); setMessage(null); await load(op); finish(op.seq); };
+  useEffect(() => {
+    life.current.alive = true;
+    if (!publicLink()) reload();
+    return () => { life.current.alive = false; life.current.seq++; life.current.controller?.abort(); };
+  }, []);
+  if (publicLink()) return html`<section class="card s-appearance s-effects"><h3>${tn("title")}</h3><p class="sub">${tn("public")}</p></section>`;
+  const names = app.ready ? [...new Set((app.instances || []).map(i => i?.name).filter(n => typeof n === "string" && n.length > 0 && n.length <= 128))] : [];
+  const selected = names.includes(target) ? target : "";
+  const change = async (path, body, method = "POST") => {
+    if (busy || !view?.canWrite) return;
+    const op = begin(); if (!op) return; setBusy(true); setMessage(null);
+    const r = await call(path, { method, ...(body === undefined ? {} : { headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }) }, op.signal);
+    if (!current(op.seq)) return;
+    if (!r.ok) setMessage(refusal(r.body, "actionFailed")); else { const refreshed = await load(op); if (current(op.seq)) setMessage(tn(refreshed ? "saved" : "savedRefresh")); }
+    finish(op.seq);
+  };
+  const upload = async (event) => {
+    const input = event.currentTarget, files = Array.from(input.files || []); input.value = "";
+    if (busy || !view?.canWrite || !files.length) return;
+    const op = begin(); if (!op) return; setBusy(true); setMessage(null);
+    try {
+      const body = await encodeEffectFolder(files, op.signal); if (!current(op.seq)) return;
+      const r = await call("/ui/effects/upload", { method: "POST", headers: { "Content-Type": "application/json" }, body }, op.signal);
+      if (!current(op.seq)) return;
+      if (!r.ok) setMessage(refusal(r.body, "uploadFailed")); else { const refreshed = await load(op); if (current(op.seq)) setMessage(tn(refreshed ? "saved" : "savedRefresh")); }
+    } catch { if (current(op.seq)) setMessage(tn("uploadFailed")); }
+    finish(op.seq);
+  };
+  const profile = async (id) => {
+    if (busy) return; const op = begin(); if (!op) return; setBusy(true);
+    const r = await call(`/ui/effects/profile/${id}`, {}, op.signal); if (!current(op.seq)) return;
+    if (r.ok && r.body && Array.isArray(r.body.records) && r.body.records.length <= 40) setHistory(h => ({ ...h, [id]: r.body })); else setMessage(tn("profileFailed"));
+    finish(op.seq);
+  };
+  const askDelete = async id => {
+    if (!view?.canWrite) return; const op = begin(); if (!op) return; setBusy(true);
+    const yes = await confirmDialog({ message: tn("deleteConfirm"), confirmLabel: tn("delete"), danger: true });
+    if (!current(op.seq)) return; finish(op.seq);
+    if (yes) await change(`/ui/effects/${id}`, undefined, "DELETE");
+  };
+  return html`<section class="card s-appearance s-effects"><h3>${tn("title")}</h3><p class="sub">${tn("lead")}</p>
+    <div class="s-fx-actions"><button type="button" class="btn" disabled=${busy} onClick=${reload}>${tn("retry")}</button>
+      ${view?.canWrite ? html`<button class="btn s-fx-choose" type="button" disabled=${busy} onClick=${() => uploadInput.current?.click()}>${tn("folder")}</button><input ref=${uploadInput} class="offscreen s-fx-upload" aria-label=${tn("folder")} tabindex="-1" type="file" webkitdirectory=${true} directory=${true} multiple disabled=${busy} onChange=${upload} />` : null}</div>
+    ${busy ? html`<p class="sub" role="status">${tn("loading")}</p>` : null}${error ? html`<p class="err" role="status">${error}</p>` : null}${message ? html`<p class="sub" role="status">${message}</p>` : null}
+    ${view ? html`<p class="sub">${tn(view.effects.length === 1 ? "one" : "count", view.effects.length)}${!view.canWrite ? ` · ${tn("readOnly")}` : ""}</p>` : null}
+    ${view?.canWrite ? html`<p class="sub">${tn("files")}</p><label class="s-fx-chat">${tn("chat")}<select class="s-fx-target" value=${selected} disabled=${busy} onChange=${e => setTarget(e.target.value)}><option value="">${tn("chooseChat")}</option>${names.map(n => html`<option key=${n} value=${n}>${n}</option>`)}</select></label>` : null}
+    ${view && !view.effects.length ? html`<p class="sub">${tn("empty")}</p>` : null}
+    <${OwnerEffects} catalog=${view} busy=${busy} />
+    <div class="s-fx-list">${(view?.effects || []).slice(0, limit).map(e => html`<article class="s-fx-item" key=${e.id} data-effect-id=${e.id}><h4>${e.manifest.title}</h4><p class="sub"><code>${e.id.slice(0, 8)}</code> · ${Math.ceil(e.bytes / 1024)} KiB · ${tn(e.ownClaim ? "yours" : "shared")}</p>
+      ${e.manifest.poster === "poster.png" ? html`<img class="s-fx-poster" src=${`/ui/effects/image/${e.id}/poster.png`} alt="" loading="lazy" />` : null}
+      <${Profile} value=${history[e.id] || e.profiles} />
+      ${view.canWrite ? html`<${Params} manifest=${e.manifest} draft=${drafts[e.id] || {}} disabled=${busy} update=${(key, value) => setDrafts(s => ({ ...s, [e.id]: { ...(s[e.id] || {}), [key]: value } }))} />` : null}<div class="s-fx-actions"><button class="btn" type="button" disabled=${busy} onClick=${() => profile(e.id)}>${tn("history")}</button>
+      ${view.canWrite ? html`<button class="btn s-fx-apply" type="button" disabled=${busy || !selected} onClick=${() => { const params = effectParamOverrides(e.manifest, drafts[e.id] || {}); if (params === null) setMessage(tn("badParams")); else change("/ui/effects/apply", { instance: selected, id: e.id, params }); }}>${tn("apply")}</button><button class="btn s-fx-remove" type="button" disabled=${busy || !selected} onClick=${() => change("/ui/effects/remove", { instance: selected, id: e.id })}>${tn("remove")}</button>` : null}
+      ${view.canWrite && e.ownClaim ? html`<button class="btn s-fx-delete" type="button" disabled=${busy} onClick=${() => askDelete(e.id)}>${tn("delete")}</button>` : null}</div>
+      ${view.canWrite && e.ownClaim ? html`<label class="check"><input class="s-fx-share" type="checkbox" checked=${e.sharedByYou} disabled=${busy} onChange=${event => change("/ui/effects/share", { id: e.id, shared: event.target.checked })} />${tn("share")}</label>` : null}
+    </article>`)}</div>
+    ${view && limit < view.effects.length ? html`<button class="btn" type="button" onClick=${() => setLimit(n => n + 50)}>${tn("more")}</button>` : null}
+  </section>`;
+}

package/dist/ui/settings-mods.js

@@ -0,0 +1,257 @@
+// #1629 r4 §4 (r4-5): Settings → Appearance → Mods. A mod is one file that carries a look: an agent's theme with its
+// pictures, its card text, widgets, effects, and a person's own CSS. Importing is a person's action in two steps:
+// the file is checked whole and its plan shown in full (every part, the custom CSS's whole text) — then only the
+// parts the person ticks are applied, all or nothing. Custom CSS from a file is never ticked by default. Installed
+// mods can be downloaded again or uninstalled (what they applied stays: Reset and the CSS controls work on it).
+// Export builds a file from what is in force now.
+import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { Icon } from "/assets/ui-icons.js";
+import { toast } from "/assets/ui-toast.js";
+import { confirmDialog } from "/assets/ui-confirm.js";
+import { startOwnerCssTrial } from "/assets/owner-css.js";
+import { AgentWidget, checkWidget, fleetBinds, instanceBinds } from "/assets/agent-widget.js";
+import "./settings-strings.js";
+
+const tn = (k, ...v) => t(`settings.${k}`, ...v);
+const kib = (n) => (n >= 1024 * 1024 ? `${(n / 1024 / 1024).toFixed(1)} MiB` : `${Math.max(1, Math.round(n / 1024))} KiB`);
+
+async function call(path, init) {
+  let res;
+  try { res = await fetch(path, { credentials: "same-origin", ...init }); } catch { return { ok: false, status: 0, body: null }; }
+  let body = null;
+  try { body = await res.json(); } catch { /* not JSON */ }
+  return { ok: res.ok, status: res.status, body, res };
+}
+const postJson = (path, body) => call(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+function download(text, name) {
+  const url = URL.createObjectURL(new Blob([text], { type: "application/octet-stream" }));
+  const a = document.createElement("a"); a.href = url; a.download = name; a.className = "offscreen";
+  document.body.appendChild(a); a.click(); a.remove();
+  URL.revokeObjectURL(url);
+}
+/** Why the host refused, in words (the first problems of a bundle, each with where it is). */
+function why(body) {
+  if (!body) return tn("modFailed", "?");
+  if (Array.isArray(body.problems) && body.problems.length) return body.problems.slice(0, 5).map((p) => `${p.path || "file"}: ${p.problem}`).join("\n");
+  return tn("modFailed", body.detail ? `${body.error}: ${body.detail}` : body.error || "?");
+}
+
+/** The parts a plan offers, each with its default: everything but custom CSS. */
+export function defaultChoice(plan) {
+  const c = { theme: false, identity: false, effects: false, ownerCss: false, widgets: {}, replace: false };
+  for (const it of plan.items) {
+    if (it.part === "theme" || it.part === "identity") c[it.part] = true;
+    else if (it.part === "widget") c.widgets[it.slot] = true;
+    else if (it.part === "effect") c.effects = true;
+    // ownerCss stays false: "read it before turning it on" (r4 §4).
+  }
+  return c;
+}
+
+const COLOR = /^#[0-9a-f]{6}$/;
+/** A colour as a swatch (its fill set through the CSSOM — never a style attribute) and its hex code. */
+function Swatch({ color }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => { if (ref.current && ref.current.style && COLOR.test(color)) ref.current.style.setProperty("--sw", color); }, [color]);
+  return html`<span class="s-mod-sw"><span class="s-mod-sw-chip" ref=${ref} aria-hidden="true"></span><code>${color}</code></span>`;
+}
+/** Every field of the checked theme, as it will be applied — nothing left unseen (#1897 review). */
+export function ThemeDetail({ theme, pictures, effects }) {
+  const th = theme || {};
+  const row = (k, v) => html`<div class="s-mod-kv"><span class="k">${k}</span><span class="v">${v}</span></div>`;
+  const pal = (mode) => {
+    const p = th.colors && th.colors[mode];
+    return p && Object.keys(p).length ? row(tn(mode === "dark" ? "modColorsDark" : "modColorsLight"), html`<span class="s-mod-sws">${Object.keys(p).map((k) => html`<span key=${k} class="s-mod-sw-item">${k} <${Swatch} color=${p[k]} /></span>`)}</span>`) : null;
+  };
+  const picOf = (id) => (pictures || []).find((p) => p.id === id);
+  const pic = (id, label) => {
+    const p = picOf(id);
+    return p ? row(label, html`<span class="s-mod-pic"><img src=${`/ui/mods/staged/${p.id}`} alt=${label} loading="lazy" /><span class="muted">${p.path} · ${kib(p.bytes)}</span></span>`) : null;
+  };
+  return html`<div class="s-mod-theme">
+    ${th.accent ? row(tn("modAccent"), html`<${Swatch} color=${th.accent} />`) : null}
+    ${pal("light")}${pal("dark")}
+    ${th.bubble ? row(tn("modBubble"), `${th.bubble.radius !== undefined ? `${th.bubble.radius}px` : ""}${th.bubble.radius !== undefined && th.bubble.border ? " · " : ""}${th.bubble.border || ""}`) : null}
+    ${th.font ? row(tn("modFont"), th.font) : null}
+    ${th.workingLabel ? row(tn("modWorkingLabel"), html`<span class="s-mod-text">${th.workingLabel}</span>`) : null}
+    ${th.background ? pic(th.background.image, tn("modBackground")) : null}
+    ${th.background ? row(tn("modBackgroundFit"), `${th.background.fit} · ${Math.round(th.background.opacity * 100)}%`) : null}
+    ${th.avatar ? pic(th.avatar, tn("modAvatar")) : null}
+    ${(effects || []).map((e, i) => html`<div key=${i}>${row(tn("modPlacesEffect"), html`<span><code>${e.effect}</code>${e.id ? html` <span class="muted">${e.id.slice(0, 8)}</span>` : null}${Object.keys(e.params || {}).length ? html` · <code>${JSON.stringify(e.params)}</code>` : null}</span>`)}</div>`)}
+    <details class="s-mod-raw"><summary>${tn("modAllFields")}</summary><pre class="s-mod-css-text">${JSON.stringify(th, null, 2)}</pre></details>
+  </div>`;
+}
+
+function PlanItem({ it, choice, setChoice, binds, fleet }) {
+  const tick = (label, on, set) => html`<label class="check s-mod-tick"><input type="checkbox" checked=${on} onChange=${(e) => set(e.target.checked)} /><span>${label}</span></label>`;
+  if (it.part === "theme") {
+    return html`<li class="s-mod-item">${tick(tn("modPartTheme"), choice.theme, (v) => setChoice({ ...choice, theme: v }))}
+      <div class="s-mod-detail"><${ThemeDetail} theme=${it.theme} pictures=${it.pictures} effects=${it.effects} /></div></li>`;
+  }
+  if (it.part === "identity") {
+    return html`<li class="s-mod-item">${tick(tn("modPartIdentity"), choice.identity, (v) => setChoice({ ...choice, identity: v }))}
+      <div class="s-mod-detail">${it.tagline ? html`<span class="s-mod-text">${it.tagline}</span>` : null}${it.bio ? html`<span class="s-mod-text">${it.bio}</span>` : null}</div></li>`;
+  }
+  if (it.part === "widget") {
+    const w = checkWidget(it.slot, { spec: it.spec, data: it.data });
+    return html`<li class="s-mod-item">${tick(tn(`modPartWidget_${it.slot}`), !!choice.widgets[it.slot], (v) => setChoice({ ...choice, widgets: { ...choice.widgets, [it.slot]: v } }))}
+      <div class="s-mod-detail s-mod-widget">${w ? html`<${AgentWidget} slot=${it.slot} widget=${w} binds=${it.slot === "sidebar" ? fleet : binds} />` : null}</div></li>`;
+  }
+  if (it.part === "effect") {
+    return html`<li class="s-mod-item">${tick(tn("modPartEffect", it.title), choice.effects, (v) => setChoice({ ...choice, effects: v }))}
+      <div class="s-mod-detail"><span>${kib(it.bytes)} · ${tn("modRegions", it.regions.join(", "))}</span>${it.wants.length ? html`<span>${tn("modWants", it.wants.join(", "))}</span>` : null}</div></li>`;
+  }
+  if (it.part === "ownerCss") {
+    return html`<li class="s-mod-item s-mod-css">${tick(tn("modPartCss"), choice.ownerCss, (v) => setChoice({ ...choice, ownerCss: v }))}
+      <p class="s-mod-warn">${tn("modCssWarn")}</p>
+      <pre class="s-mod-css-text">${it.text}</pre>
+      ${it.assets.length ? html`<p class="sub">${tn("modCssAssets", it.assets.length, kib(it.assets.reduce((n, a) => n + a.bytes, 0)))}</p>` : null}</li>`;
+  }
+  return null;
+}
+
+function Plan({ staged, onDone }) {
+  const app = useStore(appStore);
+  const plan = staged.plan;
+  const [choice, setChoice] = useState(() => defaultChoice(plan));
+  const [target, setTarget] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const toInstance = choice.theme || choice.identity || !!choice.widgets.chat_header || !!choice.widgets.details;
+  const names = (app.instances || []).map((i) => i.name);
+  const install = async () => {
+    setBusy(true); setError("");
+    const r = await postJson("/ui/mods/commit", { stage: staged.stage, plan_hash: staged.plan_hash, include: choice, ...(toInstance ? { target } : {}) });
+    setBusy(false);
+    // The stage this plan shows is gone or no longer this plan (replaced on another device, expired): read again —
+    // the page then shows whatever is staged now, with its own, fresh choices (keyed by stage).
+    if (!r.ok) { setError(why(r.body)); if (r.status === 404 || (r.body && r.body.error === "plan_changed")) onDone(); return; }
+    if (r.body.css) { startOwnerCssTrial(r.body.css.trial, r.body.css.sha, r.body.css.previous); toast(tn("cssTrying")); }
+    toast(tn("modInstalled", plan.mod.title));
+    onDone();
+  };
+  const cancel = async () => {
+    const r = await postJson("/ui/mods/abort", { stage: staged.stage });
+    // Not this stage any more (another device staged a file meanwhile): say so, then show what is staged now.
+    if (!r.ok) toast(r.status === 404 ? tn("modStageGone") : why(r.body), false);
+    onDone();
+  };
+  const inst = (app.instances || []).find((i) => i.name === target) || null;
+  const binds = inst ? instanceBinds(inst, app.exec && app.exec[inst.name], app.awaiting && Object.prototype.hasOwnProperty.call(app.awaiting, inst.name) ? app.awaiting[inst.name] : null) : {};
+  const m = plan.mod;
+  return html`<div class="s-mod-plan" role="group" aria-label=${tn("modPlan")}>
+    <h4>${m.title} <span class="muted">${m.name} ${m.version}</span></h4>
+    ${m.author ? html`<p class="sub">${tn("modAuthor", m.author)}</p>` : null}
+    ${m.description ? html`<p class="sub s-mod-text">${m.description}</p>` : null}
+    <p class="sub">${tn("modSizeId", kib(m.bytes), m.id.slice(0, 8))}${m.installed ? ` · ${tn("modAlready")}` : ""}</p>
+    ${m.replaces ? html`<label class="check"><input type="checkbox" checked=${choice.replace} onChange=${(e) => setChoice({ ...choice, replace: e.target.checked })} /><span>${tn("modReplace", m.replaces.version)}</span></label>` : null}
+    <ul class="s-mod-items">${plan.items.map((it, i) => html`<${PlanItem} key=${i} it=${it} choice=${choice} setChoice=${setChoice} binds=${binds} fleet=${fleetBinds(app.instances, app.exec, app.awaiting)} />`)}</ul>
+    ${toInstance ? html`<label class="field"><span>${tn("modTarget")}</span>
+      <select value=${target} onChange=${(e) => setTarget(e.target.value)}><option value="">${tn("modTargetPick")}</option>${names.map((n) => html`<option key=${n} value=${n}>${n}</option>`)}</select></label>` : null}
+    ${toInstance && !target ? html`<p class="sub">${tn("modTargetNeeded")}</p>` : null}
+    ${error ? html`<p class="err s-mod-err" role="alert">${error}</p>` : null}
+    <div class="s-widget-actions">
+      <button type="button" class="btn btn-primary" disabled=${busy || (toInstance && !target) || (m.replaces && !choice.replace)} onClick=${install}><${Icon} name="check" size=${16} />${tn("modInstall")}</button>
+      <button type="button" class="btn" disabled=${busy} onClick=${cancel}>${tn("modCancel")}</button>
+    </div>
+  </div>`;
+}
+
+function ExportForm() {
+  const app = useStore(appStore);
+  const [f, setF] = useState({ instance: "", name: "", version: "1.0.0", title: "", theme: true, identity: true, header: true, details: true, sidebar: false, ownerCss: false });
+  const [error, setError] = useState("");
+  const set = (k) => (e) => setF({ ...f, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
+  const go = async () => {
+    setError("");
+    const body = { instance: f.instance || undefined, name: f.name, version: f.version, title: f.title,
+      include: { theme: f.theme, identity: f.identity, ownerCss: f.ownerCss, widgets: { chat_header: f.header, details: f.details, sidebar: f.sidebar } } };
+    let res;
+    try { res = await fetch("/ui/mods/export", { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }); }
+    catch { setError(tn("modFailed", "network")); return; }
+    if (!res.ok) { let b = null; try { b = await res.json(); } catch { /* none */ } setError(why(b)); return; }
+    download(await res.text(), `${f.name}-${f.version}.agendmod.json`);
+    // Effects that aren't this person's to carry stay out of the file (their own claims and shared ones travel).
+    const omitted = Number(res.headers && res.headers.get ? res.headers.get("X-AgEnD-Effects-Omitted") : 0);
+    if (omitted > 0) toast(tn("modExportOmitted", omitted), false);
+  };
+  const box = (k, label) => html`<label class="check"><input type="checkbox" checked=${f[k]} onChange=${set(k)} /><span>${label}</span></label>`;
+  return html`<details class="s-mod-export"><summary>${tn("modExport")}</summary>
+    <p class="sub">${tn("modExportLead")}</p>
+    <label class="field"><span>${tn("modExportInstance")}</span><select value=${f.instance} onChange=${set("instance")}><option value="">—</option>${(app.instances || []).map((i) => html`<option key=${i.name} value=${i.name}>${i.name}</option>`)}</select></label>
+    <div class="s-mod-boxes">${box("theme", tn("modPartTheme"))}${box("identity", tn("modPartIdentity"))}${box("header", tn("modPartWidget_chat_header"))}${box("details", tn("modPartWidget_details"))}${box("sidebar", tn("modPartWidget_sidebar"))}${box("ownerCss", tn("modPartCss"))}</div>
+    <label class="field"><span>${tn("modExportName")}</span><input value=${f.name} placeholder="my-look" onInput=${set("name")} /></label>
+    <label class="field"><span>${tn("modExportVersion")}</span><input value=${f.version} onInput=${set("version")} /></label>
+    <label class="field"><span>${tn("modExportTitle")}</span><input value=${f.title} onInput=${set("title")} /></label>
+    ${error ? html`<p class="err s-mod-err" role="alert">${error}</p>` : null}
+    <div class="s-widget-actions"><button type="button" class="btn" disabled=${!f.name || !f.title} onClick=${go}><${Icon} name="download" size=${16} />${tn("modExportGo")}</button></div>
+  </details>`;
+}
+
+export function ModsCard() {
+  const [state, setState] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const file = useRef(null);
+  // Only an answer of the expected shape is shown (#1889's lesson): anything else is "couldn't load", never a crash.
+  const load = async () => {
+    const r = await call("/ui/mods");
+    const b = r.ok && r.body && typeof r.body === "object" ? r.body : null;
+    const staged = b && b.staged && typeof b.staged === "object" && typeof b.staged.stage === "string" && b.staged.plan && Array.isArray(b.staged.plan.items) ? b.staged : null;
+    const proposals = b && Array.isArray(b.proposals) ? b.proposals.filter((p) => p && typeof p.instance === "string" && typeof p.title === "string") : [];
+    setState(b && Array.isArray(b.mods) ? { mods: b.mods.filter((m) => m && typeof m.id === "string"), staged, proposals } : { failed: true });
+  };
+  useEffect(() => { load(); }, []);
+  if (!state) return html`<section class="card s-appearance s-mods"><h3>${tn("modsTitle")}</h3><p class="sub">…</p></section>`;
+  if (state.failed) return html`<section class="card s-appearance s-mods"><h3>${tn("modsTitle")}</h3><p class="err">${tn("modsLoadFailed")}</p></section>`;
+  const stage = async () => {
+    const f = file.current && file.current.files && file.current.files[0];
+    if (!f) return;
+    setBusy(true); setError("");
+    const r = await call("/ui/mods/stage", { method: "POST", headers: { "Content-Type": "application/json" }, body: f });
+    setBusy(false);
+    if (file.current) file.current.value = "";
+    if (!r.ok) { setError(why(r.body)); return; }
+    setState({ ...state, staged: r.body });
+  };
+  const review = async (p) => {
+    const r = await postJson("/ui/mods/proposal/stage", { instance: p.instance });
+    if (!r.ok) { setError(why(r.body)); return; }
+    setState({ ...state, staged: r.body });
+  };
+  const dismiss = async (p) => {
+    const r = await postJson("/ui/mods/proposal/dismiss", { instance: p.instance });
+    if (!r.ok) { toast(why(r.body), false); return; }
+    load();
+  };
+  const uninstall = async (m) => {
+    if (!(await confirmDialog({ message: tn("modUninstallConfirm", m.title), confirmLabel: tn("modUninstall"), danger: true }))) return;
+    const r = await postJson("/ui/mods/uninstall", { id: m.id });
+    if (!r.ok) { toast(why(r.body), false); return; }
+    toast(tn("modUninstalled", m.title));
+    load();
+  };
+  const fetchFile = async (m) => {
+    const r = await fetch(`/ui/mods/file/${m.id}`, { credentials: "same-origin" }).catch(() => null);
+    if (!r || !r.ok) { toast(tn("modFailed", r ? r.status : "network"), false); return; }
+    download(await r.text(), `${m.name}-${m.version}.agendmod.json`);
+  };
+  return html`<section class="card s-appearance s-mods"><h3>${tn("modsTitle")}</h3>
+    <p class="sub">${tn("modsLead")}</p>
+    ${state.staged ? html`<${Plan} key=${state.staged.stage} staged=${state.staged} onDone=${load} />` : html`<div class="s-mod-import">
+      <label class="btn"><${Icon} name="attach" size=${16} /><span>${tn("modChoose")}</span>
+        <input ref=${file} type="file" accept=".json,application/json" class="sr-only" disabled=${busy} onChange=${stage} /></label></div>`}
+    ${error ? html`<p class="err s-mod-err" role="alert">${error}</p>` : null}
+    ${!state.staged && (state.proposals || []).length ? html`<div class="s-mod-proposals"><h4>${tn("modProposals")}</h4><ul class="s-mod-list">${state.proposals.map((p) => html`<li key=${p.instance}>
+      <span class="grow">${tn("modProposedBy", p.instance)} <strong>${p.title}</strong> <span class="muted">${p.name} ${p.version}</span></span>
+      <button type="button" class="btn btn-sm" onClick=${() => review(p)}>${tn("modReview")}</button>
+      <button type="button" class="btn btn-sm" onClick=${() => dismiss(p)}>${tn("modDismiss")}</button></li>`)}</ul></div>` : null}
+    ${state.mods.length ? html`<ul class="s-mod-list">${state.mods.map((m) => html`<li key=${m.id}>
+      <span class="grow"><strong>${m.title}</strong> <span class="muted">${m.name} ${m.version}${m.target ? ` · ${tn("modAppliedTo", m.target)}` : ""}</span></span>
+      <button type="button" class="btn btn-sm" onClick=${() => fetchFile(m)}>${tn("modDownload")}</button>
+      <button type="button" class="btn btn-sm danger" onClick=${() => uninstall(m)}>${tn("modUninstall")}</button></li>`)}</ul>` : html`<p class="sub">${tn("modsNone")}</p>`}
+    <${ExportForm} />
+  </section>`;
+}

package/dist/ui/settings-owner-effects.js

@@ -0,0 +1,80 @@
+// #1629: authoritative selectors and local slot controls; the app owns all playback and resource reads.
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { useStore } from "/assets/app-store.js";
+import { OWNER_EFFECT_PREF_KEYS } from "/assets/app-prefs.js";
+import { getAppEffects } from "./app-effects.js";
+import { ownerEffectsStore, watchOwnerEffects, refreshOwnerEffects, saveOwnerEffects } from "/assets/owner-effect-prefs.js";
+register("ownerEffects", {
+  en: {
+    title: "Your effect choices", operatorTitle: "Host-wide effect choices", person: "These choices follow this platform sign-in. Discord and Telegram accounts stay separate.",
+    operator: "Host-wide choices: everyone signed in as the host operator shares these slots.",
+    sidebar: "Sidebar", header: "Header", page: "Page", box: "Box", cursor: "Cursor", none: "None", savedChoice: "Saved choice",
+    unknown: "Choices are unavailable. Reload to try again.", changed: "This page can no longer access these choices. Reload and sign in again.",
+    unavailable: "No longer available", clear: "Clear", reload: "Reload choices", saved: "Saved.", failed: "Couldn't save. Reload choices and try again.",
+    savedRefresh: "Saved, but the choices couldn't be refreshed. Reload to check.", readOnly: "Sign in as an admin to change these choices.",
+    playback: "Playback requires Effects and preview consent. The cursor follows the same consent and falls back to stock cursors when unavailable.",
+    pause: "Pause", resume: "Resume", running: "Running", cursorFailed: "The cursor could not be applied here. Clear or reload the choice to try again.", starting: "Starting", queued: "Waiting for a slot", paused: "Paused", off: "Playback is off or unavailable here.", budget: "Paused to protect page responsiveness. Resume keeps the three-pauses safety limit.", resumeFailed: "This effect cannot resume: the page or its safety history is not ready. Reload the page or choose another effect.",
+  },
+  "zh-TW": {
+    title: "你的效果選擇", operatorTitle: "主機共用效果選擇", person: "選擇會跟隨這個平台的登入身分；Discord 與 Telegram 帳號各自獨立。",
+    operator: "主機共用選擇：所有以主機操作者身分登入的人，都會共用這些欄位。",
+    sidebar: "側邊欄", header: "頁首", page: "頁面", box: "區塊", cursor: "游標", none: "無", savedChoice: "已儲存的選擇",
+    unknown: "目前無法取得選擇，請重新載入再試。", changed: "這個頁面已無法存取選擇，請重新載入並登入。",
+    unavailable: "已無法使用", clear: "清除", reload: "重新載入選擇", saved: "已儲存。", failed: "無法儲存，請重新載入選擇再試。",
+    savedRefresh: "已儲存，但無法更新畫面；請重新載入確認。", readOnly: "請以管理員身分登入才能修改選擇。",
+    playback: "開啟效果並允許預覽後才會播放；游標也遵循相同的同意設定；無法使用時會還原一般游標。",
+    pause: "暫停", resume: "恢復", running: "播放中", cursorFailed: "這裡無法套用游標。可清除或重新載入選擇後再試。", starting: "啟動中", queued: "等待空位", paused: "已暫停", off: "這裡已關閉播放，或無法播放效果。", budget: "為維持頁面順暢，已暫停效果。恢復仍保留三次暫停的安全上限。", resumeFailed: "頁面或安全紀錄尚未就緒，無法恢復此效果。請重新載入頁面，或選擇其他效果。",
+  },
+});
+const text = key => t(`ownerEffects.${key}`);
+export function ownerEffectFits(manifest, key) {
+  if (!manifest || typeof manifest !== "object" || !OWNER_EFFECT_PREF_KEYS.includes(key)) return false;
+  if (key === "fx.cursor") return !!manifest.cursor;
+  const region = key.slice(3);
+  return Array.isArray(manifest.regions) && manifest.regions.includes(region) && (region !== "box" || !!manifest.box);
+}
+export function OwnerEffects({ catalog, busy = false }) {
+  const state = useStore(ownerEffectsStore), [message, setMessage] = useState(null), life = useRef({ alive: false, seq: 0 }), [runtime, setRuntime] = useState(null);
+  useEffect(() => { life.current.alive = true; const stop = watchOwnerEffects(); return () => { life.current.alive = false; life.current.seq++; stop(); }; }, []);
+  useEffect(() => {
+    let live = true; const entry = getAppEffects();
+    const pull = () => { if (!live) return; const gates = entry?.gates(); setRuntime({ entry, snapshot: entry?.api?.ownerSnapshot?.(), cursor: entry?.cursorSnapshot?.(), available: !!entry && !entry.dead && gates.enabled && gates.show && gates.previewReady && gates.optIn && !gates.safe && !gates.publicLink && !gates.reducedMotion && !gates.saveData }); };
+    const off = entry?.subscribe(pull), end = entry?.onEnd(pull); pull();
+    return () => { live = false; off?.(); end?.(); };
+  }, []);
+  const reload = () => { getAppEffects()?.api?.changedOwner?.(); return refreshOwnerEffects(); };
+  // Library reloads/own share changes can alter availability without changing the preference revision.
+  useEffect(() => { if (catalog) reload(); }, [catalog]);
+  if (state.scope === "none") return null;
+  const disabled = busy || state.busy || state.status !== "known" || state.revoked || !catalog?.canWrite;
+  const save = async (key, id) => {
+    if (disabled || !life.current.alive) return;
+    if (id !== null && !(catalog.effects || []).some(e => e.id === id && ownerEffectFits(e.manifest, key))) return;
+    const seq = ++life.current.seq; setMessage(null);
+    const result = await saveOwnerEffects({ [key]: id });
+    if (!life.current.alive || seq !== life.current.seq) return;
+    if (result.ok || result.saved) getAppEffects()?.api?.changedOwner?.();
+    setMessage(text(result.ok ? "saved" : result.saved ? "savedRefresh" : "failed"));
+  };
+  return html`<section class="s-fx-owner" aria-label=${text(state.scope === "operator" ? "operatorTitle" : "title")}><h4>${text(state.scope === "operator" ? "operatorTitle" : "title")}</h4><p class="sub">${text(state.scope === "operator" ? "operator" : "person")}</p>
+    <p class="sub">${text("playback")}</p>${catalog && !catalog.canWrite ? html`<p class="sub">${text("readOnly")}</p>` : null}
+    <button class="btn" type="button" disabled=${busy || state.busy || state.revoked} onClick=${reload}>${text("reload")}</button>
+    ${state.status !== "known" ? html`<p class="sub" role="status">${text(state.revoked ? "changed" : "unknown")}</p>` : OWNER_EFFECT_PREF_KEYS.map(key => {
+      const row = state.slots[key], options = (catalog?.effects || []).filter(e => ownerEffectFits(e.manifest, key));
+      const absent = !!row.id && !options.some(e => e.id === row.id);
+      const play = runtime?.snapshot?.rows?.find(r => r.slot === key && r.id === row.id);
+      const unavailable = row.status === "unavailable" || runtime?.snapshot?.slots?.[key]?.id === row.id && runtime.snapshot.slots[key].status === "unavailable";
+      const phase = !runtime?.available ? "off" : play?.reason === "paused" || play?.reason === "host_budget" ? "paused" : play?.phase === "running" ? "running" : play?.phase ? "starting" : play?.verdict === "queued" ? "queued" : "off";
+      return html`<div class="s-fx-owner-row" key=${key}><label>${text(key.slice(3))}<select class="s-fx-target" data-owner-slot=${key} disabled=${disabled} value=${row.id || ""} onChange=${e => save(key, e.target.value || null)}>
+        <option value="">${text("none")}</option>${absent ? html`<option value=${row.id} disabled>${text(row.status === "unavailable" ? "unavailable" : "savedChoice")}</option>` : null}
+        ${options.map(e => html`<option key=${e.id} value=${e.id}>${e.manifest.title}</option>`)}</select></label>
+        ${unavailable ? html`<span class="sub" role="status">${text("unavailable")}</span>` : null}
+        ${key === "fx.cursor" && row.status === "available" && row.id && !unavailable ? html`<span class="sub" role="status" data-owner-runtime=${key}>${text(!runtime?.available ? "off" : runtime.cursor?.id === row.id && runtime.cursor.status === "running" ? "running" : runtime.cursor?.id === row.id && runtime.cursor.status === "loading" ? "starting" : runtime.cursor?.id === row.id && runtime.cursor.status === "unavailable" ? "cursorFailed" : "off")}</span>` : null}
+        ${key !== "fx.cursor" && row.status === "available" && row.id && !unavailable ? html`<span class="sub" role="status" data-owner-runtime=${key}>${text(phase)}</span>
+          ${play?.reason === "host_budget" ? html`<span class="sub">${text("budget")}</span>` : null}
+          <button class="btn" type="button" data-owner-pause=${key} disabled=${!runtime?.available || !play} onClick=${() => runtime?.entry?.api?.pauseOwner?.(key)}>${text("pause")}</button>
+          <button class="btn" type="button" data-owner-resume=${key} disabled=${!runtime?.available || !play} onClick=${() => { if (!runtime?.entry?.api?.resumeOwner?.(key)) setMessage(text("resumeFailed")); }}>${text("resume")}</button>` : null}
+        ${row.id ? html`<button class="btn" type="button" data-owner-clear=${key} disabled=${disabled} onClick=${() => save(key, null)}>${text("clear")}</button>` : null}</div>`;
+    })}${message ? html`<p class="sub" role="status">${message}</p>` : null}</section>`;
+}