@songsid/agend 2.2.0-beta.9 → 2.3.0-beta.1

package/dist/ui/settings-model.js

@@ -2,6 +2,8 @@
 // Ported from settings.html with their reasons: every rule here was a fix (the review or issue named beside it).
 // No DOM, no fetch; the panel (panel-settings.js) and the tests call these directly.
 
+/** #1854: the stuck timeout when none is set — the daemon's DEFAULT_STUCK_TIMEOUT_MS (src/daemon.ts), in minutes. */
+export const HANG_TIMEOUT_DEFAULT_MINUTES = 10;
 export const BACKENDS = ["claude-code", "kiro-cli", "codex", "opencode", "antigravity", "grok", "muse"];
 export const CH_TYPES = ["discord", "telegram"];
 export const LOCALES = [["en", "English"], ["zh-TW", "繁體中文 (zh-TW)"]];
@@ -166,7 +168,7 @@ export function agentForm(inst, defaults) {
     description: inst.description || "", systemPrompt: inst.systemPrompt || "", tags: [...(inst.tags || [])],
     general_topic: !!inst.general_topic,
     auto_pause_after: String(inst.auto_pause_after ?? defaults.auto_pause_after ?? 0),
-    hang: String(hang.timeout_minutes ?? (defaults.hang_detector && defaults.hang_detector.timeout_minutes) ?? 15),
+    hang: String(hang.timeout_minutes ?? (defaults.hang_detector && defaults.hang_detector.timeout_minutes) ?? HANG_TIMEOUT_DEFAULT_MINUTES),
     agent_mode: inst.agent_mode || defaults.agent_mode || "mcp",
     tool_set: inst.tool_set || defaults.tool_set || "full",
     tool_progress: inst.tool_progress ?? defaults.tool_progress ?? "off",

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