@songsid/agend 2.2.0 → 2.3.0-beta.2

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

package/dist/ui/settings-strings.js

@@ -288,6 +288,129 @@ register("settings", {
     accessTitle: "Access",
     webChat: "Web chat",
     sec_web: "Web",
+    // #1629 r4 §3: Settings → Appearance (owner CSS).
+    sec_appearance: "Web appearance",
+    colorTitle: "Identity colours", colorLead: "Each agent's colour in the sidebar: a person's pick, the agent's own, its bot's Discord role colour, or an automatic soft colour. Change one agent's from its ⋯ menu → Colour….",
+    colorPlaces: "Where colours show, unless an agent's own setting says otherwise", colorOff: "Turn off colours",
+    colorOffLead: "Hides every identity colour on this host. The colours people picked are kept, and come back when you turn colours on again.",
+    restoreTitle: "Restore defaults", restoreLead: "Puts this host's appearance settings back to their defaults. It asks first and says what it resets.",
+    restoreConfirm: "This resets, for this host: showing agents' themes and effects, the card size and each card's own size, your sidebar widget, where colours show, and whether colours are off. It also turns your custom CSS off (its versions are kept) and its switch on this device. The colours people picked for agents, installed mods, uploaded effects and the card limits stay as they are.",
+    restoreGo: "Restore defaults", restoreDone: "Appearance settings are back to their defaults.", restoreCssFailed: "The settings are back to their defaults, but your custom CSS could not be turned off: {0}",
+    cardSizeTitle: "Identity cards",
+    cardSizeLead: "How large identity cards are drawn on all your devices. A card's own S / M / L sets that card apart.",
+    cardLimitsTitle: "Identity card upload limits",
+    cardLimitsLead: "The largest portrait and banner anyone may upload, and how many pictures each agent may keep. Empty = the default (shown greyed). A lower limit applies at once; a higher one waits for a fleet admin's confirmation. Pictures already stored stay.",
+    cardLimitsUnavailable: "Only a signed-in admin can see and change these here (or edit web.appearance in fleet.yaml).",
+    cardLimit_portrait_max_width: "Portrait width (px)", cardLimit_portrait_max_height: "Portrait height (px)", cardLimit_portrait_max_kib: "Portrait size (KiB)",
+    cardLimit_banner_max_width: "Banner width (px)", cardLimit_banner_max_height: "Banner height (px)", cardLimit_banner_max_kib: "Banner size (KiB)",
+    cardLimit_instance_quota_files: "Pictures per agent", cardLimit_instance_quota_mib: "Picture space per agent (MiB)",
+    cardLimitInForce: "In force: {0} (allowed {1}–{2})",
+    cardLimitsWhole: "Each limit is a whole number, or empty for the default.",
+    cardLimitsNoChange: "Nothing changed.",
+    cardLimitsSave: "Save limits",
+    cardLimitsSaved: "Saved.",
+    cardLimitsFailed: "Not saved: {0}",
+    themesTitle: "Agents' themes",
+    themesShow: "Show agents' themes, effects and widgets",
+    themesShowLead: "On all your devices. When it's off, every chat looks the same, and agents' pictures and ring colours are their bots' again.",
+    themesSafeMode: "This page was opened with ?safe=1: agents' themes are not shown on it.",
+    widgetTitle: "Your sidebar widget",
+    widgetLead: "A small panel under the instance list, on all your devices: the dashboard draws it from a spec and values you write here as JSON — no HTML, script or CSS. Its live values are your fleet's counts (fleet.working, fleet.needs_you, fleet.idle, fleet.stopped). Agents can't change it.",
+    widgetNotJson: "Not JSON.",
+    widgetSave: "Save widget",
+    widgetSaved: "Sidebar widget saved.",
+    widgetExample: "Start from an example",
+    widgetRemove: "Remove widget",
+    widgetRemoved: "Sidebar widget removed.",
+    modsTitle: "Mods",
+    modsLead: "A mod is one file (.agendmod.json) that carries a look: an agent's theme and pictures, its card text, widgets, effects, and custom CSS. Importing shows everything in it first; only what you tick is applied, all at once. Uninstalling removes the mod from this list; what it applied stays until you reset it.",
+    modsLoadFailed: "Couldn't load the installed mods. Reload the page to try again.",
+    modsNone: "No mods installed.",
+    modChoose: "Import a mod file…",
+    modPlan: "What this mod would change",
+    modAuthor: "By {0} (unverified)",
+    modSizeId: "{0} · id {1}",
+    modAlready: "already installed",
+    modReplace: "Replace the installed version {0}",
+    modPartTheme: "Theme (colours, font, pictures)",
+    modPartIdentity: "Card text (tagline and bio)",
+    modPartWidget_chat_header: "Chat header widget",
+    modPartWidget_details: "Details page widget",
+    modPartWidget_sidebar: "Your sidebar widget",
+    modPartEffect: "Effect: {0}",
+    modPartCss: "Custom CSS (on your screens only)",
+    modCssWarn: "Custom CSS from this file — read it before turning it on.",
+    modCssAssets: "{0} files for it ({1})",
+    modAccent: "Accent", modFont: "Font", modPictures: "{0} pictures ({1})", modPlaces: "places {0} effects",
+    modColorsLight: "Light colours", modColorsDark: "Dark colours", modBubble: "Bubbles", modWorkingLabel: "Working label",
+    modBackground: "Background picture", modBackgroundFit: "Background fit and opacity", modAvatar: "Picture (face)",
+    modPlacesEffect: "Places effect", modAllFields: "Every field, as it will be applied",
+    modStageGone: "That import was replaced or ran out of time. Showing what is staged now.",
+    modRegions: "draws on: {0}", modWants: "hears: {0}",
+    modTarget: "Apply to",
+    modTargetPick: "Choose an agent…",
+    modTargetNeeded: "Choose the agent this look goes to.",
+    modAppliedTo: "applied to {0}",
+    modInstall: "Install",
+    modCancel: "Cancel",
+    modInstalled: "Installed {0}.",
+    modFailed: "Not done: {0}",
+    modDownload: "Download",
+    modUninstall: "Uninstall",
+    modUninstallConfirm: "Uninstall {0}? Its effects leave your library unless something still uses them. What it applied stays.",
+    modUninstalled: "Uninstalled {0}.",
+    modExport: "Export a mod",
+    modExportLead: "Make a mod file from what is in force now: an agent's theme, card text and widgets, your sidebar widget, your custom CSS.",
+    modExportInstance: "Agent",
+    modExportName: "Name (a-z, 0-9, -)",
+    modExportVersion: "Version",
+    modExportTitle: "Title",
+    modExportGo: "Download the file",
+    modExportOmitted: "{0} effect(s) placed there are someone else's and were left out: only your own and shared effects travel.",
+    modProposals: "Proposed by agents",
+    modProposedBy: "{0} proposes",
+    modReview: "Review",
+    modDismiss: "Dismiss",
+    cssTitle: "Custom CSS (yours only)",
+    cssLead: "Your own stylesheet, applied to your screens only: every device where you are signed in, never anyone else's, and never on Settings. It can't load anything from the internet. Put pictures and fonts under Assets below and name them url(\"asset:<id>\").",
+    cssLoadFailed: "Couldn't load your custom CSS. Reload the page to try again.",
+    cssPublicLink: "Custom CSS isn't available on a temporary public link.",
+    cssInForce: "In force: {0}",
+    cssOnTrial: "On trial: {0}. Choose Keep, or it reverts.",
+    cssNone: "No custom CSS in force.",
+    cssSave: "Save and try",
+    cssTrying: "Custom CSS saved. Look around, then choose Keep within 15 seconds.",
+    cssOff: "Turn off (all devices)",
+    cssVersions: "Earlier versions ({0})",
+    cssCurrent: "in force",
+    cssRestore: "Use this",
+    cssAssets: "Assets",
+    cssAssetsLead: "PNG, WebP, JPEG, GIF or WOFF2. {0} of {1} files, {2} in total (at most 1 MiB). Metadata such as GPS is removed.",
+    cssAssetAdd: "Add a picture or font",
+    cssAssetCopy: "Copy reference",
+    cssCopied: "Copied {0}",
+    cssAssetRemove: "Remove",
+    cssDeviceTitle: "On this device",
+    cssDeviceOff: "Turn off custom CSS on this device",
+    cssDeviceOffLead: "Only this browser. Your other devices keep it.",
+    cssSafe: "Is something hidden or broken? Add ?safe=1 to the end of any page's address and it loads without custom CSS.",
+    cssError_at_rule: "Not saved: {0} isn't allowed.",
+    cssError_url: "Not saved: the only url() allowed is url(\"asset:<id>\") for a file in Assets.",
+    cssError_unknown_asset: "Not saved: there's no asset {0}. Add it under Assets first.",
+    cssError_function: "Not saved: {0} isn't allowed.",
+    cssError_property: "Not saved: {0} isn't allowed.",
+    cssError_script_scheme: "Not saved: javascript: and vbscript: aren't allowed.",
+    cssError_too_large: "Not saved: custom CSS can be at most 64 KiB.",
+    cssError_malformed: "Not saved: a string or url() isn't closed.",
+    cssError_nul: "Not saved: the text contains a NUL character.",
+    cssError_unserialisable: "Not saved: the CSS couldn't be read back safely.",
+    cssError_asset_type: "Not added: only PNG, WebP, JPEG, GIF or WOFF2 files are allowed.",
+    cssError_asset_unreadable: "Not added: the file couldn't be read.",
+    cssError_asset_quota: "Not added: Assets hold at most 16 files and 1 MiB in total.",
+    cssError_asset_in_use: "Not removed: a saved version still uses it.",
+    cssError_owner_css_read_only: "This sign-in can view but not change custom CSS.",
+    cssError_owner_css_needs_a_signed_in_person: "Sign in in the browser to change custom CSS.",
+    cssError_other: "Not saved ({0}).",
     webLead: "How the web dashboard behaves. A change that loosens access (longer sessions, the browser terminal back on or for longer, the public link) waits for a fleet admin to confirm it in chat (General topic) or on the host; one that tightens it applies at once.",
     webPublicRefused: "Web settings can't be changed over a temporary public link. Open the dashboard at its own address to change them.",
     webSessionTitle: "Sign-in sessions",
@@ -661,6 +784,128 @@ register("settings", {
     accessTitle: "存取",
     webChat: "網頁聊天",
     sec_web: "網頁",
+    sec_appearance: "網頁外觀",
+    colorTitle: "識別色", colorLead: "每個 agent 在側欄的顏色：有人挑選的、agent 自己的、它的 bot 在 Discord 身分組的顏色，或自動配的柔和色。要改某個 agent 的顏色，從它的 ⋯ 選單 → 顏色…。",
+    colorPlaces: "顏色顯示的位置（agent 自己另有設定時除外）", colorOff: "關閉顏色",
+    colorOffLead: "在這台主機隱藏所有識別色。有人挑過的顏色會保留，重新開啟顏色後就會回來。",
+    restoreTitle: "還原預設值", restoreLead: "把這台主機的外觀設定改回預設值。執行前會先詢問，並說明會重設哪些項目。",
+    restoreConfirm: "會重設這台主機的：是否顯示 agent 的主題與效果、卡片大小與各張卡片自己的大小、你的側欄小工具、顏色顯示的位置，以及是否關閉顏色；也會關閉你的自訂 CSS（版本會保留）以及這台裝置上的 CSS 開關。有人替 agent 挑的顏色、已安裝的 mod、上傳的效果與卡片上限都不會變。",
+    restoreGo: "還原預設值", restoreDone: "外觀設定已改回預設值。", restoreCssFailed: "設定已改回預設值，但無法關閉你的自訂 CSS：{0}",
+    cardSizeTitle: "身分卡",
+    cardSizeLead: "身分卡在你所有裝置上的顯示大小。卡片上自己的 小／中／大 可以單獨設定那張卡片。",
+    cardLimitsTitle: "身分卡上傳限制",
+    cardLimitsLead: "任何人可上傳的肖像與橫幅上限，以及每個 agent 可保留的圖片數量。留空＝預設值（以灰字顯示）。調低立即生效；調高需 fleet admin 確認。已存的圖片不受影響。",
+    cardLimitsUnavailable: "只有已登入的管理者能在這裡查看與修改（或在 fleet.yaml 編輯 web.appearance）。",
+    cardLimit_portrait_max_width: "肖像寬度（px）", cardLimit_portrait_max_height: "肖像高度（px）", cardLimit_portrait_max_kib: "肖像大小（KiB）",
+    cardLimit_banner_max_width: "橫幅寬度（px）", cardLimit_banner_max_height: "橫幅高度（px）", cardLimit_banner_max_kib: "橫幅大小（KiB）",
+    cardLimit_instance_quota_files: "每個 agent 的圖片數", cardLimit_instance_quota_mib: "每個 agent 的圖片空間（MiB）",
+    cardLimitInForce: "實際生效：{0}（允許 {1}–{2}）",
+    cardLimitsWhole: "每個限制須為整數，或留空使用預設值。",
+    cardLimitsNoChange: "沒有變更。",
+    cardLimitsSave: "儲存限制",
+    cardLimitsSaved: "已儲存。",
+    cardLimitsFailed: "未儲存：{0}",
+    themesTitle: "Agent 的主題",
+    themesShow: "顯示 agent 的主題、效果與小工具",
+    themesShowLead: "套用到你所有的裝置。關閉時每個聊天看起來都一樣，agent 的圖片與外框顏色也會換回各自 bot 的。",
+    themesSafeMode: "這個頁面是用 ?safe=1 開啟的：不顯示 agent 的主題。",
+    widgetTitle: "你的側邊欄小工具",
+    widgetLead: "實例清單下方的一個小面板，套用到你所有的裝置：儀表板依你在這裡用 JSON 寫的規格與數值繪製——沒有 HTML、腳本或 CSS。即時數值是你 fleet 的計數（fleet.working、fleet.needs_you、fleet.idle、fleet.stopped）。agent 無法變更它。",
+    widgetNotJson: "不是 JSON。",
+    widgetSave: "儲存小工具",
+    widgetSaved: "已儲存側邊欄小工具。",
+    widgetExample: "從範例開始",
+    widgetRemove: "移除小工具",
+    widgetRemoved: "已移除側邊欄小工具。",
+    modsTitle: "Mod",
+    modsLead: "Mod 是一個檔案（.agendmod.json），帶著一套外觀：agent 的主題與圖片、身分卡文字、小工具、效果，以及自訂 CSS。匯入時會先完整列出內容，只有你勾選的部分會一次套用。解除安裝會把 mod 從這個清單移除；它已套用的外觀會保留，直到你重設。",
+    modsLoadFailed: "無法載入已安裝的 mod。請重新載入頁面再試一次。",
+    modsNone: "尚未安裝任何 mod。",
+    modChoose: "匯入 mod 檔案…",
+    modPlan: "這個 mod 會變更的內容",
+    modAuthor: "作者：{0}（未經驗證）",
+    modSizeId: "{0} · id {1}",
+    modAlready: "已安裝",
+    modReplace: "取代已安裝的 {0} 版",
+    modPartTheme: "主題（顏色、字型、圖片）",
+    modPartIdentity: "身分卡文字（標語與簡介）",
+    modPartWidget_chat_header: "聊天標頭小工具",
+    modPartWidget_details: "詳細資料頁小工具",
+    modPartWidget_sidebar: "你的側邊欄小工具",
+    modPartEffect: "效果：{0}",
+    modPartCss: "自訂 CSS（只套用在你的畫面）",
+    modCssWarn: "這是檔案裡的自訂 CSS——開啟前請先讀過。",
+    modCssAssets: "附帶 {0} 個檔案（{1}）",
+    modAccent: "強調色", modFont: "字型", modPictures: "{0} 張圖片（{1}）", modPlaces: "放置 {0} 個效果",
+    modColorsLight: "淺色模式顏色", modColorsDark: "深色模式顏色", modBubble: "對話泡泡", modWorkingLabel: "工作中文字",
+    modBackground: "背景圖片", modBackgroundFit: "背景填滿方式與不透明度", modAvatar: "圖片（頭像）",
+    modPlacesEffect: "放置效果", modAllFields: "所有欄位（套用時的樣子）",
+    modStageGone: "那次匯入已被取代或已逾時。以下顯示目前暫存的內容。",
+    modRegions: "繪製於：{0}", modWants: "接收：{0}",
+    modTarget: "套用到",
+    modTargetPick: "選擇一個 agent…",
+    modTargetNeeded: "請選擇這套外觀要套用到哪個 agent。",
+    modAppliedTo: "套用於 {0}",
+    modInstall: "安裝",
+    modCancel: "取消",
+    modInstalled: "已安裝 {0}。",
+    modFailed: "未完成：{0}",
+    modDownload: "下載",
+    modUninstall: "解除安裝",
+    modUninstallConfirm: "要解除安裝 {0} 嗎？它的效果會離開你的效果庫，除非還有東西在使用。它已套用的外觀會保留。",
+    modUninstalled: "已解除安裝 {0}。",
+    modExport: "匯出 mod",
+    modExportLead: "用目前生效的外觀做成 mod 檔案：某個 agent 的主題、身分卡文字與小工具、你的側邊欄小工具、你的自訂 CSS。",
+    modExportInstance: "Agent",
+    modExportName: "名稱（a-z、0-9、-）",
+    modExportVersion: "版本",
+    modExportTitle: "標題",
+    modExportGo: "下載檔案",
+    modExportOmitted: "有 {0} 個放在那裡的效果屬於別人，已略過：只有你自己的和共用的效果會被帶走。",
+    modProposals: "Agent 提議的 mod",
+    modProposedBy: "{0} 提議",
+    modReview: "檢視",
+    modDismiss: "略過",
+    cssTitle: "自訂 CSS（只套用在你自己）",
+    cssLead: "你自己的樣式表，只套用在你自己的畫面：你登入的每一台裝置都會套用，不會影響別人，也不會套用在設定頁。它無法從網路載入任何東西；圖片和字型請放在下方的「資源」，再用 url(\"asset:<id>\") 引用。",
+    cssLoadFailed: "無法載入你的自訂 CSS。請重新整理頁面再試一次。",
+    cssPublicLink: "臨時公開連結無法使用自訂 CSS。",
+    cssInForce: "使用中：{0}",
+    cssOnTrial: "試用中：{0}。請按「保留」，否則會還原。",
+    cssNone: "目前沒有使用自訂 CSS。",
+    cssSave: "儲存並試用",
+    cssTrying: "已儲存自訂 CSS。請到各頁看看，15 秒內按「保留」。",
+    cssOff: "關閉（所有裝置）",
+    cssVersions: "先前的版本（{0}）",
+    cssCurrent: "使用中",
+    cssRestore: "改用這版",
+    cssAssets: "資源",
+    cssAssetsLead: "PNG、WebP、JPEG、GIF 或 WOFF2。目前 {0} / {1} 個檔案，共 {2}（上限 1 MiB）。會移除 GPS 等中繼資料。",
+    cssAssetAdd: "加入圖片或字型",
+    cssAssetCopy: "複製引用",
+    cssCopied: "已複製 {0}",
+    cssAssetRemove: "移除",
+    cssDeviceTitle: "這台裝置",
+    cssDeviceOff: "在這台裝置關閉自訂 CSS",
+    cssDeviceOffLead: "只影響這個瀏覽器，你的其他裝置照常套用。",
+    cssSafe: "畫面被藏起來或壞掉了嗎？在任何頁面網址的最後加上 ?safe=1，就會不套用自訂 CSS 地載入。",
+    cssError_at_rule: "未儲存：不允許使用 {0}。",
+    cssError_url: "未儲存：url() 只能用 url(\"asset:<id>\") 引用「資源」裡的檔案。",
+    cssError_unknown_asset: "未儲存：找不到資源 {0}。請先在「資源」加入它。",
+    cssError_function: "未儲存：不允許使用 {0}。",
+    cssError_property: "未儲存：不允許使用 {0}。",
+    cssError_script_scheme: "未儲存：不允許使用 javascript: 和 vbscript:。",
+    cssError_too_large: "未儲存：自訂 CSS 最多 64 KiB。",
+    cssError_malformed: "未儲存：有字串或 url() 沒有結束。",
+    cssError_nul: "未儲存：內容含有 NUL 字元。",
+    cssError_unserialisable: "未儲存：這份 CSS 無法安全地重新輸出。",
+    cssError_asset_type: "未加入：只接受 PNG、WebP、JPEG、GIF 或 WOFF2 檔案。",
+    cssError_asset_unreadable: "未加入：無法讀取這個檔案。",
+    cssError_asset_quota: "未加入：資源最多 16 個檔案、合計 1 MiB。",
+    cssError_asset_in_use: "未移除：仍有已儲存的版本在使用它。",
+    cssError_owner_css_read_only: "這個登入只能檢視、不能變更自訂 CSS。",
+    cssError_owner_css_needs_a_signed_in_person: "請在瀏覽器登入後再變更自訂 CSS。",
+    cssError_other: "未儲存（{0}）。",
     webLead: "網頁儀表板的行為。放寬存取的變更（延長 session、重新開啟或延長瀏覽器終端機、公開連結）需要 fleet admin 在聊天（General topic）或主機上確認；收緊的變更會立即套用。",
     webPublicRefused: "無法透過臨時公開連結變更網頁設定。請從儀表板本身的網址開啟後再變更。",
     webSessionTitle: "登入 session",