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

package/dist/ui/settings-appearance.js

@@ -0,0 +1,325 @@
+// #1629 r4 §3: Settings → Appearance — the person's own custom CSS (owner CSS): the editor, keep-or-revert, earlier
+// versions, the pictures and fonts it may name, and this device's off switch. Settings itself is always drawn stock
+// (owner-css.js removes the link here), so a stylesheet that hides things can always be fixed from this page.
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { ModsCard } from "./settings-mods.js";
+import { EffectsCard } from "./settings-effects.js";
+import { Icon } from "/assets/ui-icons.js";
+import { toast } from "/assets/ui-toast.js";
+import { ownerCssOffHere, ownerCssTrial, safeMode, setOwnerCssActive, setOwnerCssOffHere, startOwnerCssTrial } from "/assets/owner-css.js";
+import { setThemesShown, themesStore } from "/assets/app-themes.js";
+import { CARD_SIZES, cardSizeDefault, cardSizeStore, setCardSizeDefault } from "/assets/identity-card.js";
+import { AgentWidget, checkWidget, fleetBinds, setSidebarWidget, sidebarWidgetRaw, sidebarWidgetStore, widgetProblem } from "/assets/agent-widget.js";
+import { confirmedWrite } from "./settings-confirm.js";
+import { savePref } from "/assets/app-prefs.js";
+import { confirmDialog } from "/assets/ui-confirm.js";
+import { colorsOff, defaultPlaces, PLACEMENTS, setColorsOff, setDefaultPlaces, useIdentityColors } from "/assets/identity-color.js";
+import "./settings-strings.js";
+
+const tn = (k, ...v) => t(`settings.${k}`, ...v);
+const short = (sha) => (sha ? sha.slice(0, 8) : "");
+const kib = (n) => `${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 };
+}
+const postJson = (path, body) => call(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+
+/** Why the host refused a text, in the person's words. */
+function refusal(body) {
+  const problem = body && body.error, detail = body && body.detail;
+  const known = ["at_rule", "url", "unknown_asset", "function", "property", "script_scheme", "too_large", "malformed", "nul", "unserialisable",
+    "asset_type", "asset_unreadable", "asset_quota", "asset_in_use", "owner_css_read_only", "owner_css_needs_a_signed_in_person"];
+  return known.includes(problem) ? tn(`cssError_${problem}`, detail || "") : tn("cssError_other", problem || "?");
+}
+
+export function AppearanceSection() {
+  const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
+  if (publicLink) return html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>`;
+  return html`<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} /><${SidebarWidgetCard} /><${OwnerCssCard} /><${ModsCard} /><${EffectsCard} /><${DeviceCard} /><${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+}
+
+/**
+ * #1958: identity colours on this host — where they show for an instance nobody chose for (ring and bar unless
+ * changed), and a switch that turns them off everywhere while every pick is kept.
+ */
+function IdentityColorCard() {
+  useIdentityColors();
+  const places = defaultPlaces(), off = colorsOff();
+  const toggle = (p) => setDefaultPlaces(places.includes(p) ? places.filter((x) => x !== p) : [...places, p]);
+  return html`<section class="card s-appearance s-synced s-colors"><h3>${tn("colorTitle")}</h3>
+    <p class="sub">${tn("colorLead")}</p>
+    <fieldset class="idc-places" disabled=${off}><legend>${tn("colorPlaces")}</legend>
+      ${PLACEMENTS.map((p) => html`<label key=${p} class="check"><input type="checkbox" checked=${places.includes(p)} onChange=${() => toggle(p)} /> ${t(`color.place_${p}`)}</label>`)}
+    </fieldset>
+    <label class="check"><input type="checkbox" class="s-colors-off" checked=${off} onChange=${(e) => setColorsOff(e.target.checked)} /> <span>${tn("colorOff")}</span></label>
+    <p class="sub">${tn("colorOffLead")}</p>
+  </section>`;
+}
+
+/**
+ * #1958 decision 5: Restore defaults — the host's appearance settings back to their defaults after a confirm that says
+ * what it resets; this person's custom CSS turned off (its versions stay). Not settings, so never touched: the colours
+ * people picked per instance, installed mods, uploaded effects and the fleet's card limits.
+ */
+export async function restoreAppearanceDefaults() {
+  setThemesShown(true);
+  setCardSizeDefault("m");
+  savePref("card.sizeByInstance", null);
+  setSidebarWidget(null);
+  setDefaultPlaces(null);
+  setColorsOff(false);
+  setOwnerCssOffHere(false);
+  const r = await postJson("/ui/owner-css/restore", { sha: null });
+  return r && r.error ? { ok: false, error: r.error } : { ok: true };
+}
+function RestoreDefaultsCard() {
+  const [busy, setBusy] = useState(false);
+  async function go() {
+    if (!(await confirmDialog({ title: tn("restoreTitle"), message: tn("restoreConfirm"), confirmLabel: tn("restoreGo"), danger: true }))) return;
+    setBusy(true);
+    const r = await restoreAppearanceDefaults();
+    setBusy(false);
+    if (r.ok) toast(tn("restoreDone")); else toast(tn("restoreCssFailed", r.error), false);
+  }
+  return html`<section class="card s-appearance s-restore"><h3>${tn("restoreTitle")}</h3>
+    <p class="sub">${tn("restoreLead")}</p>
+    <button type="button" class="btn" disabled=${busy} onClick=${go}>${tn("restoreTitle")}</button>
+  </section>`;
+}
+
+/** #1629 r4.1 Q3 (a): every identity card's size on this person's screens (a card's own control sets it apart). */
+function CardSizeCard() {
+  useStore(cardSizeStore);
+  const size = cardSizeDefault();
+  return html`<section class="card s-appearance s-synced"><h3>${tn("cardSizeTitle")}</h3>
+    <div class="card-size" role="group" aria-label=${tn("cardSizeTitle")}>
+      ${CARD_SIZES.map((s) => html`<button key=${s} type="button" class=${`seg-item${s === size ? " active" : ""}`} aria-pressed=${s === size ? "true" : "false"}
+        onClick=${() => setCardSizeDefault(s)}>${t(`card.size${s.toUpperCase()}Name`)}</button>`)}
+    </div>
+    <p class="sub">${tn("cardSizeLead")}</p>
+  </section>`;
+}
+
+const LIMIT_FIELDS = [["portrait", "max_width"], ["portrait", "max_height"], ["portrait", "max_kib"], ["banner", "max_width"], ["banner", "max_height"], ["banner", "max_kib"],
+  ["instance_quota", "files"], ["instance_quota", "mib"]];
+/**
+ * #1629 r4.1 Q3 (b): the identity card's upload limits (fleet.yaml web.appearance). Each field shows what is in force
+ * when it differs from what is written (a value beyond its bound is clamped). A lower limit applies at once; a higher
+ * one waits for a fleet admin's confirmation (the server decides). Stored pictures are never touched.
+ */
+function CardLimitsCard() {
+  const [view, setView] = useState(null);
+  const [draft, setDraft] = useState({});
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState(null);
+  const load = async () => {
+    const r = await call("/api/settings/fleet/appearance");
+    // Only an answer of the expected shape is drawn: every group's in-force values, defaults and bounds.
+    const ok = r.ok && r.body && ["portrait", "banner", "instance_quota"].every((g) => r.body.effective && r.body.effective[g] && r.body.defaults && r.body.defaults[g] && r.body.bounds && r.body.bounds[g]);
+    if (!ok) { setView({ error: true }); return; }
+    setView(r.body);
+    const d = {};
+    for (const [g, k] of LIMIT_FIELDS) { const v = r.body.configured && r.body.configured[g] && r.body.configured[g][k]; d[`${g}.${k}`] = typeof v === "number" ? String(v) : ""; }
+    setDraft(d);
+  };
+  useEffect(() => { load(); }, []);
+  if (!view) return null;
+  if (view.error) return html`<section class="card s-appearance"><h3>${tn("cardLimitsTitle")}</h3><p class="sub">${tn("cardLimitsUnavailable")}</p></section>`;
+  const configured = (g, k) => (view.configured && view.configured[g] && typeof view.configured[g][k] === "number" ? view.configured[g][k] : null);
+  const save = async () => {
+    const body = {};
+    for (const [g, k] of LIMIT_FIELDS) {
+      const raw = (draft[`${g}.${k}`] || "").trim();
+      const next = raw === "" ? null : Number(raw);
+      if (next !== null && !(Number.isInteger(next) && next > 0)) { setMsg(tn("cardLimitsWhole")); return; }
+      if (next !== configured(g, k)) (body[g] ??= {})[k] = next;
+    }
+    if (!Object.keys(body).length) { setMsg(tn("cardLimitsNoChange")); return; }
+    setBusy(true); setMsg(null);
+    const r = await confirmedWrite("/api/settings/fleet/appearance", { method: "PUT", body, label: tn("cardLimitsTitle") });
+    setBusy(false);
+    if (r.ok) { setMsg(tn("cardLimitsSaved")); load(); } else setMsg(tn("cardLimitsFailed", (r.body && r.body.error) || r.status));
+  };
+  const warnings = Array.isArray(view.warnings) ? view.warnings : [];
+  return html`<section class="card s-appearance"><h3>${tn("cardLimitsTitle")}</h3>
+    <p class="sub">${tn("cardLimitsLead")}</p>
+    <fieldset class="form" disabled=${busy}>
+      ${["portrait", "banner", "instance_quota"].map((g) => html`<div key=${g} class="grid3">
+        ${LIMIT_FIELDS.filter(([gg]) => gg === g).map(([, k]) => {
+          const id = `cardLimit-${g}-${k}`, eff = view.effective[g][k], conf = configured(g, k);
+          return html`<div key=${k} class="field"><label for=${id}>${tn(`cardLimit_${g}_${k}`)}</label>
+            <input id=${id} type="number" min="1" step="1" placeholder=${String(view.defaults[g][k])} value=${draft[`${g}.${k}`] || ""}
+              onInput=${(e) => setDraft({ ...draft, [`${g}.${k}`]: e.target.value })} />
+            ${conf !== null && conf !== eff ? html`<span class="note">${tn("cardLimitInForce", eff, view.bounds[g][k][0], view.bounds[g][k][1])}</span>` : null}</div>`;
+        })}
+      </div>`)}
+    </fieldset>
+    ${warnings.length ? html`<ul class="note s-limit-warnings">${warnings.map((w, i) => html`<li key=${i}><code>${w.path}</code>: ${w.message}</li>`)}</ul>` : null}
+    <div class="save-row"><button type="button" class="btn btn-primary" disabled=${busy} onClick=${save}>${tn("cardLimitsSave")}</button>
+      ${msg ? html`<span class="note" role="status">${msg}</span>` : null}</div>
+  </section>`;
+}
+
+/** #1629 r2 (d): whether this person's screens show agents' themes (and, as they come, effects) — synced. */
+function ThemesCard() {
+  const s = useStore(themesStore);
+  return html`<section class="card s-appearance s-synced"><h3>${tn("themesTitle")}</h3>
+    <label class="check"><input type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
+      <span>${tn("themesShow")}</span></label>
+    <p class="sub">${safeMode() ? tn("themesSafeMode") : tn("themesShowLead")}</p>
+  </section>`;
+}
+
+/** An example to start from: the fleet's counts, as a person's sidebar widget may show them. */
+export const SIDEBAR_WIDGET_EXAMPLE = {
+  spec: { v: 1, title: "Fleet", items: [
+    { type: "stat", label: "Working", bind: "fleet.working" },
+    { type: "stat", label: "Needs you", bind: "fleet.needs_you" },
+    { type: "stat", label: "Idle", bind: "fleet.idle" },
+    { type: "stat", label: "Stopped", bind: "fleet.stopped" },
+  ] },
+  data: {},
+};
+/**
+ * #1629 r4-4: the person's own sidebar widget — a declarative spec and its values, as JSON; drawn under the instance
+ * list by the page's own components, with the fleet's counts as the only live values. Synced like the other choices.
+ */
+function SidebarWidgetCard() {
+  useStore(sidebarWidgetStore);
+  const app = useStore(appStore);
+  const saved = sidebarWidgetRaw();
+  const [text, setText] = useState(() => (saved ? JSON.stringify(saved, null, 2) : ""));
+  const [error, setError] = useState("");
+  let parsed = null, problem = "";
+  if (text.trim()) {
+    try { parsed = JSON.parse(text); problem = widgetProblem("sidebar", parsed) || ""; } catch { problem = tn("widgetNotJson"); }
+  }
+  const preview = parsed && !problem ? checkWidget("sidebar", parsed) : null;
+  const save = () => {
+    if (!parsed || problem) { setError(problem || tn("widgetNotJson")); return; }
+    setError("");
+    setSidebarWidget(parsed);
+    toast(tn("widgetSaved"));
+  };
+  const remove = () => { setSidebarWidget(null); setText(""); setError(""); toast(tn("widgetRemoved")); };
+  return html`<section class="card s-appearance s-synced s-widget"><h3>${tn("widgetTitle")}</h3>
+    <p class="sub">${tn("widgetLead")}</p>
+    <label class="field"><span class="sr-only">${tn("widgetTitle")}</span>
+      <textarea class="s-widget-text" rows="10" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text}
+        onInput=${(e) => { setText(e.target.value); setError(""); }}></textarea></label>
+    ${error || problem ? html`<p class="err" role="alert">${error || problem}</p>` : null}
+    ${preview ? html`<div class="s-widget-preview"><${AgentWidget} slot="sidebar" widget=${preview} binds=${fleetBinds(app.instances, app.exec, app.awaiting)} /></div>` : null}
+    <div class="s-widget-actions">
+      <button type="button" class="btn btn-primary" disabled=${!parsed || !!problem} onClick=${save}><${Icon} name="check" size=${16} />${tn("widgetSave")}</button>
+      ${!text.trim() ? html`<button type="button" class="btn" onClick=${() => setText(JSON.stringify(SIDEBAR_WIDGET_EXAMPLE, null, 2))}>${tn("widgetExample")}</button>` : null}
+      ${saved ? html`<button type="button" class="btn" onClick=${remove}>${tn("widgetRemove")}</button>` : null}
+    </div>
+  </section>`;
+}
+
+function OwnerCssCard() {
+  const [state, setState] = useState(null);
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const trial = useStore(ownerCssTrial);
+  const file = useRef(null);
+  const load = async (opts = {}) => {
+    const r = await call("/ui/owner-css/state");
+    if (!r.ok || !r.body) { setState({ failed: true }); return; }
+    setState(r.body);
+    if (opts.text !== false) setText(r.body.text || "");
+  };
+  useEffect(() => { load(); }, []);
+  // A trial answered (kept or reverted) changes what is in force: read it again, keeping the editor's text.
+  useEffect(() => { if (state) load({ text: false }); }, [trial && trial.sha]);
+  if (!state) return html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">…</p></section>`;
+  if (state.failed) return html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="err">${tn("cssLoadFailed")}</p></section>`;
+
+  const save = async () => {
+    setBusy(true); setError("");
+    const r = await postJson("/ui/owner-css", { text });
+    setBusy(false);
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    startOwnerCssTrial(r.body.trial, r.body.sha, r.body.previous);
+    toast(tn("cssTrying"));
+    load({ text: false });
+  };
+  const restore = async (sha) => {
+    setBusy(true); setError("");
+    const r = await postJson("/ui/owner-css/restore", { sha });
+    setBusy(false);
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    setOwnerCssActive(r.body.active);
+    load();
+  };
+  const addAsset = async () => {
+    const f = file.current && file.current.files && file.current.files[0];
+    if (!f) return;
+    setBusy(true); setError("");
+    const r = await call("/ui/owner-css/asset", { method: "POST", headers: { "Content-Type": "application/octet-stream" }, body: f });
+    setBusy(false);
+    if (file.current) file.current.value = "";
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    load({ text: false });
+  };
+  const removeAsset = async (id) => {
+    setBusy(true); setError("");
+    const r = await call(`/ui/owner-css/asset/${id}`, { method: "DELETE" });
+    setBusy(false);
+    if (!r.ok) { setError(refusal(r.body)); return; }
+    load({ text: false });
+  };
+  const copyRef = (id) => {
+    const ref = `url("asset:${id}")`;
+    try { navigator.clipboard.writeText(ref).then(() => toast(tn("cssCopied", ref)), () => toast(ref)); } catch { toast(ref); }
+  };
+  const inForce = state.active
+    ? (state.pending ? tn("cssOnTrial", short(state.active)) : tn("cssInForce", short(state.active)))
+    : tn("cssNone");
+  const assetBytes = state.assets.reduce((n, a) => n + a.bytes, 0);
+  return html`<section class="card s-appearance s-owner-css"><h3>${tn("cssTitle")}</h3>
+    <p class="sub">${tn("cssLead")}</p>
+    <p class="s-css-status" role="status">${inForce}</p>
+    <label class="field"><span class="sr-only">${tn("cssTitle")}</span>
+      <textarea class="s-css-text" rows="14" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text} disabled=${busy}
+        onInput=${(e) => setText(e.target.value)}></textarea></label>
+    ${error ? html`<p class="err" role="alert">${error}</p>` : null}
+    <div class="s-css-actions">
+      <button type="button" class="btn btn-primary" disabled=${busy || !text.trim()} onClick=${save}><${Icon} name="check" size=${16} />${tn("cssSave")}</button>
+      ${state.active ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => restore(null)}>${tn("cssOff")}</button>` : null}
+    </div>
+    ${state.versions.length ? html`<details class="s-css-versions"><summary>${tn("cssVersions", state.versions.length)}</summary>
+      <ul class="s-css-list">${state.versions.map((v) => html`<li key=${v.sha}>
+        <code>${short(v.sha)}</code><span class="muted">${new Date(v.at).toLocaleString()} · ${kib(v.bytes)}</span>
+        ${v.sha === state.active ? html`<span class="pill">${tn("cssCurrent")}</span>`
+          : html`<button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => restore(v.sha)}>${tn("cssRestore")}</button>`}
+      </li>`)}</ul></details>` : null}
+    <h4>${tn("cssAssets")}</h4>
+    <p class="sub">${tn("cssAssetsLead", state.assets.length, state.limits.maxAssets, kib(assetBytes))}</p>
+    ${state.assets.length ? html`<ul class="s-css-list">${state.assets.map((a) => html`<li key=${a.id}>
+      <code>${a.id}</code><span class="muted">${a.kind} · ${kib(a.bytes)}</span>
+      <button type="button" class="btn btn-sm" onClick=${() => copyRef(a.id)}>${tn("cssAssetCopy")}</button>
+      <button type="button" class="btn btn-sm btn-ghost" disabled=${busy} onClick=${() => removeAsset(a.id)}>${tn("cssAssetRemove")}</button>
+    </li>`)}</ul>` : null}
+    <label class="field"><span>${tn("cssAssetAdd")}</span>
+      <input ref=${file} type="file" accept="image/png,image/webp,image/jpeg,image/gif,font/woff2,.woff2" disabled=${busy} onChange=${addAsset} /></label>
+  </section>`;
+}
+
+function DeviceCard() {
+  const [off, setOff] = useState(ownerCssOffHere());
+  return html`<section class="card s-appearance s-local"><h3>${tn("cssDeviceTitle")}</h3>
+    <label class="check"><input type="checkbox" checked=${off} onChange=${(e) => { setOwnerCssOffHere(e.target.checked); setOff(ownerCssOffHere()); }} />
+      <span>${tn("cssDeviceOff")}</span></label>
+    <p class="sub">${tn("cssDeviceOffLead")}</p>
+    <p class="sub">${tn("cssSafe")}</p>
+  </section>`;
+}

package/dist/ui/settings-dialogs.js

@@ -10,11 +10,11 @@ import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { api, confirmedWrite, newKey } from "./settings-confirm.js";
-import { botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
+import { adminUserIdError, adminUserIdPattern, botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
 import { DiscordServerPicker } from "./settings-discord.js";
 import { startOperation } from "./settings-apply.js";
 import {
-  ACCESS_MODES, AGENT_FIELDS, AGENT_MODES, BOT_FIELDS, CH_TYPES, CLASSIC_FIELDS, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS,
+  ACCESS_MODES, AGENT_FIELDS, AGENT_MODES, BOT_FIELDS, CH_TYPES, CLASSIC_FIELDS, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS,
   VISIBILITY_MODES, accessConfirmations, agentForm, agentPatch, backendOptions, changedFields, channelId, channelsOf,
   chLabel, hasOwn, impactOf, nonNegative, nonNegativeInteger, positive, replyGuardSupported, sameValue, visibilityDefault,
   webEchoIsGroup, worstImpact,
@@ -242,7 +242,7 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
         <div class="field">${L(`${tn("hangTimeout")} (${tn("minutes")})`, "instance.hang_detector", "ag-hang")}
           <${Override} inherit=${f.inherit.hang} onInherit=${setInherit("hang")}>
             <input id="ag-hang" type="number" min="0.1" step="0.5" class=${errors.hang ? "invalid" : ""} disabled=${f.inherit.hang}
-              value=${shown("hang", f.hang, String((defaults.hang_detector && defaults.hang_detector.timeout_minutes) ?? 15))} onInput=${(e) => set("hang")(e.target.value)} /></${Override}>
+              value=${shown("hang", f.hang, String((defaults.hang_detector && defaults.hang_detector.timeout_minutes) ?? HANG_TIMEOUT_DEFAULT_MINUTES))} onInput=${(e) => set("hang")(e.target.value)} /></${Override}>
           <${Feedback} error=${errors.hang} /></div>
         ${[["agent_mode", "agentMode", AGENT_MODES, defaults.agent_mode || "mcp"], ["tool_set", "toolSet", TOOL_SETS, defaults.tool_set || "full"],
           ["tool_progress", "toolProgress", TOOL_PROGRESS, defaults.tool_progress ?? "off"],
@@ -466,17 +466,18 @@ export function BotDialog({ id, ctx, onClose }) {
  */
 export function NewBotDialog({ ctx, onClose }) {
   const lease = useLease("new-bot");
-  const [f, setF] = useState({ type: "discord", id: "", token: "", identity: null, guilds: [], group: "", general: "" });
+  const [f, setF] = useState({ type: "discord", id: "", token: "", identity: null, guilds: [], group: "", general: "", admin: "" });
   const [plan, setPlan] = useState(null);
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState("");
   // The form's revision (#1529 review): any change to the token, platform, id or group moves it; a Verify or a plan
   // that began before is dropped when it lands — never restoring an old token, naming it, or planning for it.
   const rev = useRef(0);
-  const body = (x) => ({ platform: x.type, connection_only: true, ...(x.id.trim() ? { channel_id: x.id.trim() } : {}),
+  const body = (x) => ({ platform: x.type, connection_only: true, admin_user_id: x.admin.trim(), ...(x.id.trim() ? { channel_id: x.id.trim() } : {}),
     ...(x.group.trim() ? (x.type === "discord" ? { guild_id: x.group.trim() } : { group_id: x.group.trim() }) : {}),
     ...(x.type === "discord" && x.general.trim() ? { general_channel_id: x.general.trim() } : {}) });
   const planFor = async (x) => {
+    if (adminUserIdError(x.type, x.admin.trim())) { setPlan(null); return null; }
     const at = rev.current;
     const res = await api("/api/settings/quickstart/plan", { method: "POST", body: JSON.stringify(body(x)) }).catch(() => ({ ok: false, body: {} }));
     if (!lease.current() || rev.current !== at) return null;
@@ -501,6 +502,8 @@ export function NewBotDialog({ ctx, onClose }) {
   };
   const save = async () => {
     if (!f.identity || !f.identity.valid) { setErr(tn("wizardNeedVerify")); return; }
+    const adminError = adminUserIdError(f.type, f.admin.trim());
+    if (adminError) { setErr(adminError); return; }
     const x = f;
     setBusy(true);
     const p = await planFor(x);
@@ -514,7 +517,7 @@ export function NewBotDialog({ ctx, onClose }) {
   };
   // A change of platform or id is another connection: what was verified and planned no longer applies. The server or
   // group does not change the id or the token's name, so the plan (and its name under Advanced) stays.
-  const set = (k) => (v) => { rev.current++; setF((x) => ({ ...x, [k]: v, ...(k === "type" ? { identity: null, guilds: [], group: "", general: "" } : {}) })); if (k !== "group" && k !== "general") setPlan(null); };
+  const set = (k) => (v) => { rev.current++; setF((x) => ({ ...x, [k]: v, ...(k === "type" ? { identity: null, guilds: [], group: "", general: "", admin: "" } : {}) })); if (k !== "group" && k !== "general") setPlan(null); };
   return html`<${Dialog} title=${tn("newBot")} onClose=${onClose} busy=${busy}
     actions=${html`<button type="button" class="btn" disabled=${busy} onClick=${onClose}>${tn("cancel")}</button>
       <button type="button" class="btn btn-primary" disabled=${busy || !f.identity || !f.identity.valid} onClick=${save}>${tn("save")}</button>`}>
@@ -528,6 +531,8 @@ export function NewBotDialog({ ctx, onClose }) {
             guild=${f.group} onGuild=${set("group")} channel=${f.general} onChannel=${set("general")} />`
         : html`<div class="field"><label for="nb-group">${tn("groupIdField")}</label>
             <input id="nb-group" type="text" value=${f.group} onInput=${(e) => set("group")(e.target.value.trim())} /></div>`}
+      <div class="field"><label for="nb-user">${tn("wizardAdminUser")}</label>
+        <input id="nb-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(f.type)} value=${f.admin} onInput=${(e) => set("admin")(e.target.value.trim())} /></div>
       <${Drawer} title=${tn("advancedSection")}>
         <div class="field"><label for="nb-id">${tn("connectionIdOptional")}</label><input id="nb-id" type="text" placeholder=${plan ? plan.channel_id : f.type}
           value=${f.id} onInput=${(e) => set("id")(e.target.value)} onBlur=${() => { if (f.identity && f.identity.valid) planFor(f); }} /></div>

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