@songsid/agend 2.3.0-beta.21 → 2.3.0-beta.23

package/dist/ui/settings-appearance.js

@@ -2,10 +2,12 @@
 // 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 { register, t } from "/assets/app-i18n.js";
+import { recordEdit } from "/assets/text-undo.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { ModsCard } from "./settings-mods.js";
-import { EffectsCard } from "./settings-effects.js";
+import { experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
+const EffectsCard = experimentalComponent(() => import("./settings-effects.js"), m => m.EffectsCard);
 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";
@@ -45,11 +47,30 @@ 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>`;
   const group = (key) => html`<h2 class="s-ap-group">${tn(key)}</h2>`;
-  return html`${group("groupLook")}<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} />
+  return html`${group("groupLook")}<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} /><${AppIconCard} />
     ${group("groupLayout")}<${SidebarWidgetCard} />
     ${group("groupCss")}<${OwnerCssCard} /><${DeviceCard} />
     ${group("groupMods")}<${ModsCard} /><${EffectsCard} />
-    ${group("groupAdvanced")}<${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+    ${group("groupAdvanced")}<${ExperimentalEffectsCard} /><${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+}
+
+register("experimentalEffects", {
+  en: { title: "Experimental: Canvas Worker effects", help: "Enable uploaded Canvas Worker effects. Ambient effects are always available. Saved effects stay intact when this is off.", failed: "Could not change this setting. Try again." },
+  "zh-TW": { title: "實驗功能：Canvas Worker 特效", help: "啟用上傳的 Canvas Worker 特效。氛圍特效不受影響；關閉時保留已儲存的特效。", failed: "無法變更此設定，請重試。" },
+});
+function ExperimentalEffectsCard() {
+  const enabled = useCanvasWorker(), [writable, setWritable] = useState(false), [busy, setBusy] = useState(false), [failed, setFailed] = useState(false);
+  useEffect(() => { let live = true; Promise.resolve(globalThis.AgendAuth?.trialSession?.()).then(value => { if (live) setWritable(value?.localAdmin === true); }, () => {}); return () => { live = false; }; }, []);
+  if (!writable) return null;
+  const change = async value => {
+    setBusy(true); setFailed(false);
+    try {
+      const result = await confirmedWrite("/api/settings/fleet/web", { method: "PUT", body: { experimental: { canvas_worker: value } }, label: t("experimentalEffects.title") });
+      if (result.ok) appStore.set({ canvasWorker: value }); else setFailed(true);
+    } catch { setFailed(true); }
+    finally { setBusy(false); }
+  };
+  return html`<section class="card s-appearance s-experimental-effects"><label class="check"><input type="checkbox" checked=${enabled} disabled=${busy} onChange=${event => change(event.target.checked)} /><span>${t("experimentalEffects.title")}</span></label><p class="sub">${t("experimentalEffects.help")}</p>${failed ? html`<p role="alert">${t("experimentalEffects.failed")}</p>` : null}</section>`;
 }
 
 /** #2056 B: a sample sidebar row in the host's default colour places, so the choice is seen rather than described. */
@@ -127,6 +148,131 @@ function CardSizeCard() {
   </section>`;
 }
 
+/**
+ * #2308: the image as one square PNG the host makes the icon sizes from — centre-cropped, drawn at 512 px if smaller
+ * (marked low-resolution), as it is up to 1024 px, else 1024. The browser decodes whatever it can show (PNG, JPG, WebP);
+ * the host takes only that PNG.
+ */
+export async function appIconPng(file) {
+  const bmp = await createImageBitmap(file);
+  try {
+    const side = Math.min(bmp.width, bmp.height);
+    const out = Math.min(1024, Math.max(512, side));
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = out;
+    const g = canvas.getContext("2d");
+    g.imageSmoothingQuality = "high";
+    g.drawImage(bmp, (bmp.width - side) / 2, (bmp.height - side) / 2, side, side, 0, 0, out, out);
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+    if (!blob) throw new Error("no PNG");
+    return { blob, low: side < 512 };
+  } finally {
+    if (bmp.close) bmp.close();
+  }
+}
+
+/** #2308: this page's icon links follow a change at once (the next pages carry the version from the host). */
+export function refreshAppIconLinks(version, custom) {
+  if (typeof document === "undefined") return;
+  const v = encodeURIComponent(version);
+  const head = document.head;
+  const links = [...head.querySelectorAll("link")];
+  const byPath = (path) => links.find((l) => (l.getAttribute("href") || "").split("?")[0] === path);
+  for (const [path, rel] of [["/favicon.ico", "icon"], ["/apple-touch-icon.png", "apple-touch-icon"], ["/manifest.webmanifest", "manifest"]]) {
+    const el = byPath(path);
+    if (el && el.getAttribute("rel") === rel) el.setAttribute("href", `${path}?v=${v}`);
+  }
+  const svg = byPath("/favicon.svg");
+  if (custom && svg) svg.remove();
+  else if (!custom && !svg) {
+    const link = document.createElement("link");
+    for (const [k, val] of [["rel", "icon"], ["href", `/favicon.svg?v=${v}`], ["type", "image/svg+xml"], ["sizes", "any"]]) link.setAttribute(k, val);
+    head.appendChild(link);
+  }
+}
+
+/**
+ * #2308: the app icon — what a browser tab and a home screen show. One picture for every page (sign-in and the public
+ * link too); an admin changes it, everyone else sees it.
+ */
+function AppIconCard() {
+  const [state, setState] = useState(null);
+  const [canWrite, setCanWrite] = useState(false);
+  const [picked, setPicked] = useState(null);           // { blob, url, low }
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const file = useRef(null);
+  const load = async () => {
+    const r = await call("/ui/app-icon");
+    setState(r.ok && r.body && typeof r.body.version === "string" ? r.body : { failed: true });
+  };
+  useEffect(() => {
+    load();
+    const auth = typeof window !== "undefined" ? window.AgendAuth : null;
+    if (auth && auth.canWrite) Promise.resolve(auth.canWrite()).then((v) => setCanWrite(v === true), () => {});
+  }, []);
+  useEffect(() => () => { if (picked) URL.revokeObjectURL(picked.url); }, [picked]);
+  const title = html`<${CardTitle} title=${tn("appIconTitle")} topic="app-icon" />`;
+  if (!state) return html`<section class="card s-appearance s-app-icon">${title}<p class="sub">…</p></section>`;
+  if (state.failed) return html`<section class="card s-appearance s-app-icon">${title}<p class="err">${tn("appIconLoadFailed")}</p></section>`;
+
+  const choose = async () => {
+    const f = file.current && file.current.files && file.current.files[0];
+    if (file.current) file.current.value = "";
+    if (!f) return;
+    setError("");
+    try {
+      const made = await appIconPng(f);
+      setPicked({ ...made, url: URL.createObjectURL(made.blob) });
+    } catch {
+      setError(tn("appIconNotAnImage"));
+    }
+  };
+  const answered = (r, done) => {
+    setBusy(false);
+    if (!r.ok) {
+      const known = ["app_icon_too_large", "app_icon_not_png", "app_icon_unreadable", "app_icon_admin_only", "app_icon_needs_a_signed_in_person", "app_icon_busy", "app_icon_superseded", "app_icon_not_reset"];
+      setError(known.includes(r.body && r.body.error) ? tn(`appIconError_${r.body.error}`, (r.body && r.body.detail) || "") : tn("appIconError_other", (r.body && r.body.error) || String(r.status)));
+      return;
+    }
+    setState(r.body);
+    setPicked(null);
+    refreshAppIconLinks(r.body.version, r.body.custom);
+    toast(done);
+  };
+  const use = async () => {
+    setBusy(true); setError("");
+    answered(await call("/ui/app-icon", { method: "PUT", headers: { "Content-Type": "image/png" }, body: picked.blob }), tn("appIconSaved"));
+  };
+  const reset = async () => {
+    setBusy(true); setError("");
+    answered(await call("/ui/app-icon", { method: "DELETE" }), tn("appIconResetDone"));
+  };
+  const v = encodeURIComponent(state.version);
+  return html`<section class="card s-appearance s-app-icon">${title}
+    <p class="sub">${tn("appIconLead")}</p>
+    <div class="s-app-icon-row">
+      <figure class="s-app-icon-now"><img class="s-app-icon-big" src=${`/apple-touch-icon.png?v=${v}`} width="96" height="96" alt=${tn("appIconCurrent")} />
+        <img class="s-app-icon-small" src=${`/icon-192.png?v=${v}`} width="32" height="32" alt="" />
+        <figcaption>${state.custom ? tn("appIconCustom") : tn("appIconDefault")}</figcaption></figure>
+      ${picked ? html`<figure class="s-app-icon-new"><img class="s-app-icon-big" src=${picked.url} width="96" height="96" alt=${tn("appIconPreview")} />
+        <figcaption>${tn("appIconPreview")}</figcaption></figure>` : null}
+    </div>
+    ${picked && picked.low ? html`<p class="sub s-app-icon-low">${tn("appIconLow")}</p>` : null}
+    ${error ? html`<p class="err" role="alert">${error}</p>` : null}
+    ${canWrite ? html`<div class="s-css-actions">
+      <input ref=${file} type="file" class="sr-only" id="s-app-icon-file" accept="image/png,image/jpeg,image/webp" onChange=${choose} />
+      ${picked ? html`
+        <button type="button" class="btn btn-primary" disabled=${busy} onClick=${use}><${Icon} name="check" size=${16} />${tn("appIconUse")}</button>
+        <button type="button" class="btn" disabled=${busy} onClick=${() => setPicked(null)}>${tn("appIconCancel")}</button>`
+      : html`<button type="button" class="btn" disabled=${busy} onClick=${() => file.current && file.current.click()}>${tn("appIconChoose")}</button>`}
+      ${state.custom && !picked ? html`<button type="button" class="btn" disabled=${busy} onClick=${reset}>${tn("appIconReset")}</button>` : null}
+    </div>` : html`<p class="sub">${tn("appIconReadOnly")}</p>`}
+    <p class="sub">${tn("appIconWho")}</p>
+    <p class="sub">${tn("appIconIos")}</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"]];
 /**
@@ -222,6 +368,7 @@ function SidebarWidgetCard() {
   const app = useStore(appStore);
   const saved = sidebarWidgetRaw();
   const [text, setText] = useState(() => (saved ? JSON.stringify(saved, null, 2) : ""));
+  const area = useRef(null);
   const [error, setError] = useState("");
   let parsed = null, problem = "";
   if (text.trim()) {
@@ -234,17 +381,17 @@ function SidebarWidgetCard() {
     setSidebarWidget(parsed);
     toast(tn("widgetSaved"));
   };
-  const remove = () => { setSidebarWidget(null); setText(""); setError(""); toast(tn("widgetRemoved")); };
+  const remove = () => { setSidebarWidget(null); recordEdit(area.current); setText(""); setError(""); toast(tn("widgetRemoved")); };
   return html`<section class="card s-appearance s-synced s-widget"><${CardTitle} title=${tn("widgetTitle")} topic="widgets" />
     <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}
+      <textarea ref=${area} 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}
+      ${!text.trim() ? html`<button type="button" class="btn" onClick=${() => { recordEdit(area.current); 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>`;
@@ -253,6 +400,7 @@ function SidebarWidgetCard() {
 function OwnerCssCard() {
   const [state, setState] = useState(null);
   const [text, setText] = useState("");
+  const area = useRef(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
   const trial = useStore(ownerCssTrial);
@@ -261,6 +409,8 @@ function OwnerCssCard() {
     const r = await call("/ui/owner-css/state");
     if (!r.ok || !r.body) { setState({ failed: true }); return; }
     setState(r.body);
+    // #2342: a restored version replaces the editor's text as a step Ctrl+Z goes back from.
+    if (opts.undoable) recordEdit(area.current);
     if (opts.text !== false) setText(r.body.text || "");
   };
   useEffect(() => { load(); }, []);
@@ -284,7 +434,7 @@ function OwnerCssCard() {
     setBusy(false);
     if (!r.ok) { setError(refusal(r.body)); return; }
     setOwnerCssActive(r.body.active);
-    load();
+    load({ undoable: true });
   };
   const addAsset = async () => {
     const f = file.current && file.current.files && file.current.files[0];
@@ -315,7 +465,7 @@ function OwnerCssCard() {
     <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}
+      <textarea ref=${area} 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">

package/dist/ui/settings-dialogs.js

@@ -4,6 +4,7 @@
 // provider key): each goes through confirmedWrite, so a change an admin must confirm waits for it (#1423).
 import { html, useEffect, useMemo, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
+import { recordEdit } from "/assets/text-undo.js";
 import { useLease } from "/assets/app-ctx.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Icon } from "/assets/ui-icons.js";
@@ -16,11 +17,13 @@ import { startOperation } from "./settings-apply.js";
 import "./settings-strings.js";   // its words, wherever a picker of this file is used (#2072: Fleet's create dialog too)
 import { backendChoices, modelChoices, OTHER_MODEL, useBackendRows, useModelCatalog } from "./settings-catalog.js";
 import {
-  ACCESS_MODES, AGENT_FIELDS, AGENT_MODES, BOT_FIELDS, CH_TYPES, CLASSIC_FIELDS, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS,
+  ACCESS_MODES, AGENT_MODES, CH_TYPES, 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,
+  chLabel, hasOwn, impactOf, newConnectionImpact, nonNegative, nonNegativeInteger, positive, replyGuardSupported, sameValue, visibilityDefault,
   classicWebEchoEffective, worstImpact,
 } from "./settings-model.js";
+/** #2342: a field by id, for recordEdit before a pick or a reset writes it. */
+const byId = (id) => (typeof document !== "undefined" ? document.getElementById(id) : null);
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 export const impactText = (kind) => tn(kind === "now" ? "impactNow" : kind === "fleet" ? "impactFleet" : "impactAgent");
@@ -103,7 +106,7 @@ export function ChipList({ items, onChange, placeholder, label }) {
 
 const replyHint = (backend, mode, kiroUi) => (replyGuardSupported(backend, mode, kiroUi) ? tn("replyGuardSupported") : tn("replyGuardUnsupported", backend, mode));
 
-/** The dialog every editor uses: Cancel / Stage change; the footer says what the whole dialog will cost. */
+/** The dialog every editor uses: Cancel / Stage change; the footer says what the changes made so far will cost (#2346: only the fields that changed). */
 function EditDialog({ title, subtitle, onClose, onStage, impacts, schema, children, ready = true, wide = true }) {
   const kinds = [...new Set((impacts || []).map((f) => impactOf(schema, f)))];
   return html`<${Dialog} title=${title} label=${subtitle ? `${title} — ${subtitle}` : title} onClose=${onClose} wide=${wide}
@@ -184,9 +187,9 @@ export function StatusEmojiEditor({ own, platform, channel, previewBody, onChang
       <label for=${`se-${key}`}>${tn(`se_${key}`)}</label>
       <input id=${`se-${key}`} type="text" autocomplete="off" value=${values[key] || ""} placeholder=${builtins[key] || ""} onInput=${(e) => set(key, e.target.value)} />
       <button type="button" class="btn btn-sm" onClick=${() => setPicker(picker === key ? null : key)} aria-expanded=${picker === key ? "true" : "false"}>${tn("se_pick")}</button>
-      <button type="button" class="icon-btn" aria-label=${tn("se_useDefault")} title=${tn("se_useDefault")} onClick=${() => set(key, "")}><${Icon} name="close" size=${14} /></button>
+      <button type="button" class="icon-btn" aria-label=${tn("se_useDefault")} title=${tn("se_useDefault")} onClick=${() => { recordEdit(byId(`se-${key}`)); set(key, ""); }}><${Icon} name="close" size=${14} /></button>
       ${picker === key ? html`<${EmojiPicker} cat=${cat} keyName=${key} platform=${platform} channel=${channel}
-        onPick=${(v) => { set(key, v); setPicker(null); }} onClose=${() => setPicker(null)} />` : null}
+        onPick=${(v) => { recordEdit(byId(`se-${key}`)); set(key, v); setPicker(null); }} onClose=${() => setPicker(null)} />` : null}
     </div>`)}</div>
     <p class="note">${tn("se_hint")}</p>
   </div>`;
@@ -241,16 +244,17 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
   };
   const failoverWarn = !f.inherit.model_failover && !f.model_failover.trim() ? "failoverEmpty" : "";
   const ready = !errors.auto && !errors.hang;
+  const pending = () => agentPatch({ ...f, status_emojis: emojis.value }, inst, defaults, visibilityBaseline, emojis.baseline);
   const stage = () => {
     if (!ready) return;
-    const patch = agentPatch({ ...f, status_emojis: emojis.value }, inst, defaults, visibilityBaseline, emojis.baseline);
+    const patch = pending();
     if (Object.keys(patch).length) ctx.stageAgent(name, inst, patch);
     onClose();
   };
   // What an override shows while it inherits: the default.
   const shown = (k, own, dflt) => (f.inherit[k] ? dflt : own);
   const L = (text, field, id) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${id} />`;
-  return html`<${EditDialog} title=${ctx.shortName(name, inst)} subtitle=${`ID: ${name}`} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${AGENT_FIELDS} schema=${schema}>
+  return html`<${EditDialog} title=${ctx.shortName(name, inst)} subtitle=${`ID: ${name}`} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${Object.keys(pending()).map((k) => `instance.${k}`)} schema=${schema}>
     <div class="grid2">
       <div class="field">${L(tn("displayName"), "instance.display_name", "ag-dn")}
         <${Override} inherit=${f.inherit.display_name} onInherit=${setInherit("display_name")}>
@@ -406,8 +410,8 @@ export function BotDialog({ id, ctx, onClose }) {
     setToken(""); setTokenId(null); setReplacing(false);
     setTokenNote({ text: tn("tokenQueued") });
   };
-  const stage = () => {
-    if (!ch) return;
+  /** The connections with this dialog's edits, and which parts changed. */
+  const pending = () => {
     const original = structuredClone(chs);
     const next = structuredClone(original);
     next[index] = { ...next[index], access: { ...(next[index].access || {}), mode, allowed_users: [...users] } };
@@ -418,6 +422,16 @@ export function BotDialog({ id, ctx, onClose }) {
       if (emojis.value) options.status_emojis = emojis.value; else delete options.status_emojis;
       next[index] = { ...next[index], options };
     }
+    return { next, accessChanged, emojisChanged };
+  };
+  const pendingImpacts = () => {
+    if (!ch) return [];
+    const p = pending();
+    return [...(p.accessChanged ? ["fleet.channels"] : []), ...(p.emojisChanged ? ["fleet.channel.options.status_emojis"] : [])];
+  };
+  const stage = () => {
+    if (!ch) return;
+    const { next, accessChanged, emojisChanged } = pending();
     if (accessChanged || emojisChanged) {
       ctx.stageChannels(`connections:${ch.id || chLabel(index)}`, next, {
         label: tn(accessChanged && emojisChanged ? "updateAccessEmojis" : accessChanged ? "updateAccess" : "updateEmojis", ch.id || chLabel(index)),
@@ -445,7 +459,7 @@ export function BotDialog({ id, ctx, onClose }) {
   };
   const L = (text, field, htmlFor) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${htmlFor} />`;
   if (!ch) return null;
-  return html`<${EditDialog} title=${type === "telegram" ? "Telegram" : "Discord"} subtitle=${id} onClose=${onClose} onStage=${stage} impacts=${BOT_FIELDS} schema=${schema}>
+  return html`<${EditDialog} title=${type === "telegram" ? "Telegram" : "Discord"} subtitle=${id} onClose=${onClose} onStage=${stage} impacts=${pendingImpacts()} schema=${schema}>
     <div class="grid2">
       <div class="field">${L(tn("accessMode"), "fleet.channel.access.mode", "bot-mode")}<${Select} id="bot-mode" value=${mode} onChange=${setMode} options=${ACCESS_MODES} />
         <${Feedback} warning=${accessWarn} /></div>
@@ -503,6 +517,7 @@ export function NewBotDialog({ ctx, onClose }) {
   // 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);
+  // The fields keep what was typed (#2342: trimming the box would rewrite it, losing its undo); trimmed here.
   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() } : {}) });
@@ -538,7 +553,7 @@ export function NewBotDialog({ ctx, onClose }) {
     setBusy(true);
     const p = await planFor(x);
     if (!p) { if (lease.current()) setBusy(false); return; }
-    const handed = startOperation([{ label: tn("addBotLabel", p.channel_id), impact: impactOf(ctx.schema, "fleet.channels"),
+    const handed = startOperation([{ label: tn("addBotLabel", p.channel_id), impact: newConnectionImpact(ctx.schema),
       request: { method: "POST", url: "/api/settings/quickstart/commit",
         body: { ...body(x), channel_id: p.channel_id, token_env: p.token_env, token_env_generated: true, token: x.token }, sensitive: true } }]);
     if (!handed) { setErr(tn("applyBusyLocal")); setBusy(false); return; }
@@ -560,9 +575,9 @@ export function NewBotDialog({ ctx, onClose }) {
             invite=${f.identity && f.identity.invite} portal=${f.identity && f.identity.portal} guilds=${f.guilds} onGuilds=${(g) => setF((x) => ({ ...x, guilds: g }))}
             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>`}
+            <input id="nb-group" type="text" value=${f.group} onInput=${(e) => set("group")(e.target.value)} /></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>
+        <input id="nb-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(f.type)} value=${f.admin} onInput=${(e) => set("admin")(e.target.value)} /></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>
@@ -597,9 +612,7 @@ export function ClassicDialog({ room, ctx, onClose }) {
   const runtime = ctx.classicRuntime(c.instanceName);
   const classicMode = fd.agent_mode ?? "mcp";
   const lease = useLease("classic-dialog");
-  const stage = async () => {
-    if (!ready) return;
-    const patch = changedFields({
+  const pending = () => changedFields({
       backend: f.backend, model: f.model.trim() || null,
       auto_pause_after: f.inherit.auto_pause_after ? null : Number(f.auto_pause_after),
       tool_progress: f.inherit.tool_progress ? null : f.tool_progress,
@@ -612,13 +625,16 @@ export function ClassicDialog({ room, ctx, onClose }) {
       reply_completion_guard: hasOwn(c, "reply_completion_guard") ? c.reply_completion_guard : null,
       collab: !!c.collab, context_lines: c.context_lines ?? cd.context_lines ?? 5, web_echo: classicWebEchoEffective(c, fleet),
     });
+  const stage = async () => {
+    if (!ready) return;
+    const patch = pending();
     if (!Object.keys(patch).length) { onClose(); return; }
     if (!lease.current()) return;
     ctx.stageClassic(c, patch);
     onClose();
   };
   const L = (text, field, id) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${id} />`;
-  return html`<${EditDialog} title=${c.name || c.instanceName} subtitle=${`ID: ${c.instanceName} · ${tn(`exec_${runtime.execution}`)}`} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${CLASSIC_FIELDS} schema=${schema}>
+  return html`<${EditDialog} title=${c.name || c.instanceName} subtitle=${`ID: ${c.instanceName} · ${tn(`exec_${runtime.execution}`)}`} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${Object.keys(pending()).map((k) => `classic.${k}`)} schema=${schema}>
     <div class="grid2">
       <div class="field">${L(tn("backend"), "classic.backend", "cl-be")}<${BackendSelect} id="cl-be" value=${f.backend} onChange=${set("backend")} /></div>
       <div class="field">${L(tn("model"), "classic.model", "cl-model")}<${ModelSelect} id="cl-model" value=${f.model} onChange=${set("model")}

package/dist/ui/settings-discord.js

@@ -9,6 +9,7 @@
 // B, nor after A again (an older A), nor once the page is gone.
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
+import { useTypedText } from "/assets/text-undo.js";
 import { api } from "./settings-confirm.js";
 import { Select } from "./settings-dialogs.js";
 
@@ -23,6 +24,9 @@ const probe = (body) => api("/api/settings/quickstart/probe", { method: "POST",
  */
 export function DiscordServerPicker({ idPrefix, token, bot, invite, portal, guilds, onGuilds, guild, onGuild, channel, onChannel }) {
   const [polling, setPolling] = useState(null);            // { timedOut } while waiting for the bot to join
+  // #2342: the typed IDs keep what was typed (a space, the undo history); the picks get them trimmed.
+  const [guildText, onGuildText] = useTypedText(guild);
+  const [channelText, onChannelText] = useTypedText(channel);
   const [channels, setChannels] = useState(null);          // null: not asked; { list } | { error }
   const live = useRef(true);
   const now = useRef({ token, guild, channel });
@@ -120,11 +124,11 @@ export function DiscordServerPicker({ idPrefix, token, bot, invite, portal, guil
     <div class="field"><label for=${`${idPrefix}-guild`}>${tn("guildIdField")}</label>
       ${guilds && guilds.length
         ? html`<${Select} id=${`${idPrefix}-guild`} value=${guild} onChange=${(v) => pickGuild(v, true)} options=${["", ...guilds.map((g) => ({ value: g.id, label: `${g.name} (${g.id})` }))]} />`
-        : html`<input id=${`${idPrefix}-guild`} type="text" value=${guild} placeholder=${tn("discordNoServerYet")} onInput=${(e) => pickGuild(e.target.value.trim(), true)} />`}</div>
+        : html`<input id=${`${idPrefix}-guild`} type="text" value=${guildText} placeholder=${tn("discordNoServerYet")} onInput=${(e) => pickGuild(onGuildText(e.target.value), true)} />`}</div>
     <div class="field"><label for=${`${idPrefix}-gen`}>${tn("wizardGeneralChannel")}</label>
       ${channels && channels.list && channels.list.length
         ? html`<${Select} id=${`${idPrefix}-gen`} value=${channel} onChange=${pickChannel} options=${["", ...channels.list.map((c) => ({ value: c.id, label: `#${c.name}` }))]} />`
-        : html`<input id=${`${idPrefix}-gen`} type="text" value=${channel} onInput=${(e) => pickChannel(e.target.value.trim())} />`}
+        : html`<input id=${`${idPrefix}-gen`} type="text" value=${channelText} onInput=${(e) => pickChannel(onChannelText(e.target.value))} />`}
       ${channels && channels.error ? html`<p class="feedback warning">${channels.error}</p>` : null}</div>
   </div>`;
 }

package/dist/ui/settings-guests.js

@@ -8,6 +8,7 @@ import { t } from "/assets/app-i18n.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { api } from "./settings-confirm.js";
+import { DEFAULT_SCHEMA, impactOf } from "./settings-model.js";
 import "./settings-strings.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
@@ -59,7 +60,7 @@ export function GuestsCard({ ctx, staged, disabled = false }) {
   const setList = (key, k, list) => setF((x) => { const m = { ...x[key] }; if (list === undefined) delete m[k]; else m[k] = list; return { ...x, [key]: m }; });
   const review = () => {
     const body = guestsBody(original, f);
-    if (body) ctx.stage("guests", { label: tn("guestsTitle"), impact: "now", request: { method: "PUT", url: "/api/settings/fleet/web", body: { guests: body } } });
+    if (body) ctx.stage("guests", { label: tn("guestsTitle"), impact: impactOf(ctx.schema || DEFAULT_SCHEMA, "web.guests"), request: { method: "PUT", url: "/api/settings/fleet/web", body: { guests: body } } });
     else if (staged.has("guests")) ctx.unstage("guests");
     setMsg(tn("readyApply"));
   };

package/dist/ui/settings-learn.js

@@ -13,6 +13,7 @@ export const LEARN_ANCHORS = {
   colors: ["identity-colours", "識別色"], css: ["custom-css-settings--web-appearance", "自訂-css設定--網頁外觀"], themes: ["agents-themes", "agent-的主題"],
   cards: ["identity-cards", "身分卡"], limits: ["card-upload-limits", "身分卡上傳限制"], widgets: ["widgets", "小工具"], mods: ["mods", "mod"],
   effects: ["effects", "效果"], restore: ["restore-defaults", "還原預設值"],
+  "app-icon": ["app-icon", "app-圖示"],
 };
 export function learnHref(topic, language = lang()) {
   const zh = language === "zh-TW";

package/dist/ui/settings-model.js

@@ -56,6 +56,8 @@ export const chLabel = (i) => (i === 0 ? "primary" : "persona");
 // ── Impacts: the server's (/api/settings/schema, derived from HOT_INSTANCE_CONFIG_KEYS); this page never decides one ──
 export const DEFAULT_SCHEMA = { impacts: {}, order: ["now", "instance", "fleet"] };
 export const impactOf = (schema, field) => (schema.impacts && schema.impacts[field]) || "instance";
+/** #2346: a new connection starts at once while another one runs (the schema says so); the first one needs AgEnD restarted. */
+export const newConnectionImpact = (schema) => (schema && schema.connections_start_live === true ? "now" : impactOf(schema || DEFAULT_SCHEMA, "fleet.channels"));
 /** A batch costs as much as its worst member, in the order the server ships. */
 export function batchImpact(schema, keys, impactFor) {
   const order = schema.order;
@@ -197,17 +199,6 @@ export function agentForm(inst, defaults) {
   };
 }
 
-/** Every field the agent dialog shows, for its footer's impact summary. */
-export const AGENT_FIELDS = [
-  "instance.display_name", "instance.description", "instance.backend", "instance.model", "instance.working_directory",
-  "instance.auto_pause_after", "instance.topic_id", "instance.hang_detector", "instance.agent_mode", "instance.tool_set",
-  "instance.tool_progress", "instance.cross_instance_visibility", "instance.reply_completion_guard", "instance.log_level",
-  "instance.lightweight", "instance.model_failover", "instance.systemPrompt", "instance.tags", "instance.general_topic",
-  "instance.status_emojis",
-];
-export const CLASSIC_FIELDS = ["classic.backend", "classic.model", "classic.auto_pause_after", "classic.tool_progress",
-  "classic.reply_completion_guard", "classic.collab", "classic.context_lines", "classic.web_echo"];
-export const BOT_FIELDS = ["fleet.channel.access.mode", "fleet.channel.access.allowed_users", "fleet.channels", "fleet.channel.options.status_emojis"];
 
 /** Validation messages (keys of the settings namespace), or "" when the value is fine. */
 export const nonNegative = (v) => (!Number.isFinite(Number(v)) || String(v).trim() === "" || Number(v) < 0 ? "mustNonNegative" : "");

package/dist/ui/settings-mods.js

@@ -4,6 +4,7 @@
 // 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 { canvasWorkerEnabled, useCanvasWorker } from "/assets/feature-flags.js";
 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";
@@ -45,7 +46,7 @@ export function defaultChoice(plan) {
   for (const it of plan.items) {
     if (it.part === "theme" || it.part === "identity" || it.part === "ambient") c[it.part] = true;
     else if (it.part === "widget") c.widgets[it.slot] = true;
-    else if (it.part === "effect") c.effects = true;
+    else if (it.part === "effect" && canvasWorkerEnabled()) c.effects = true;
     // ownerCss stays false: "read it before turning it on" (r4 §4).
   }
   return c;
@@ -80,7 +81,7 @@ export function ThemeDetail({ theme, pictures, effects }) {
     ${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>`)}
+    ${(canvasWorkerEnabled() ? 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>`;
 }
@@ -114,6 +115,7 @@ function PlanItem({ it, choice, setChoice, binds, fleet }) {
         <details class="s-mod-raw"><summary>${tn("modAllFields")}</summary><pre class="s-mod-css-text">${JSON.stringify({ loop: it.loop, click: it.click }, null, 2)}</pre></details></div></li>`;
   }
   if (it.part === "effect") {
+    if (!canvasWorkerEnabled()) return null;
     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>`;
   }
@@ -137,7 +139,7 @@ function Plan({ staged, onDone }) {
   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 } : {}) });
+    const r = await postJson("/ui/mods/commit", { stage: staged.stage, plan_hash: staged.plan_hash, include: { ...choice, effects: canvasWorkerEnabled() && choice.effects }, ...(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).
@@ -205,6 +207,7 @@ function ExportForm() {
 }
 
 export function ModsCard() {
+  useCanvasWorker();
   const [state, setState] = useState(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");