@songsid/agend 2.3.0-beta.22 → 2.3.0-beta.24

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=${tn("idLine", 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=${`${tn("idLine", 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-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";
@@ -36,6 +37,8 @@ function download(text, name) {
 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");
+  // #2390: a refusal the page has words for, in its language (the host's detail is English).
+  if (body.error === "canvas_worker_experimental") return tn("modCanvasWorkerOff");
   return tn("modFailed", body.detail ? `${body.error}: ${body.detail}` : body.error || "?");
 }
 
@@ -45,7 +48,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 +83,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 +117,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 +141,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 +209,7 @@ function ExportForm() {
 }
 
 export function ModsCard() {
+  useCanvasWorker();
   const [state, setState] = useState(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");

package/dist/ui/settings-strings.js

@@ -21,6 +21,7 @@ register("settings", {
     namedTunnelSetup: "How to set this up",
     namedToken: "Cloudflare connector token",
     namedTokenHint: "Stored privately, never shown again. Format checked locally; Cloudflare credentials and routing are checked when opening. Saving or clearing closes the current public link.",
+    namedTokenInvalid: "Paste only the long string that starts with eyJ.",
     namedTokenSet: "Set token",
     namedTokenClear: "Clear token",
     awaitingConfirmation: "Waiting for confirmation.",
@@ -375,6 +376,8 @@ register("settings", {
     modCancel: "Cancel",
     modInstalled: "Installed {0}.",
     modFailed: "Not done: {0}",
+    idLine: "ID: {0}",
+    modCanvasWorkerOff: "Not done: this mod has Canvas Worker effects, an experimental feature. Turn it on in Settings → Web appearance first.",
     modDownload: "Download",
     modUninstall: "Uninstall",
     modUninstallConfirm: "Uninstall {0}? Its effects leave your library unless something still uses them. What it applied stays.",
@@ -418,6 +421,19 @@ register("settings", {
     appIconError_app_icon_superseded: "The icon was reset meanwhile; choose the picture again.",
     appIconError_app_icon_not_reset: "The default could not be restored ({0}).",
     appIconError_other: "The app icon was not changed ({0}).",
+    appIconError_app_icon_not_kept: "This fleet does not keep an app icon.",
+    appIconError_app_icon_failed: "The app icon request failed; try again.",
+    appIconDetail_max_size: "at most {0} MiB",
+    appIconDetail_png_only: "a PNG image; the page converts JPG and WebP",
+    appIconDetail_busy: "another icon is being made",
+    appIconDetail_reset_meanwhile: "the icon was reset meanwhile",
+    appIconDetail_too_slow: "it took too long to read",
+    appIconDetail_unreadable: "the image could not be read",
+    appIconDetail_corrupt: "the PNG file could not be read ({0})",
+    appIconDetail_not_square: "it is not square ({0}×{1})",
+    appIconDetail_too_small: "it is smaller than {0}×{0}",
+    appIconDetail_too_big: "it is larger than {0}×{0}",
+    appIconDetail_interlaced: "interlaced PNGs are not supported",
     cssTitle: "Custom CSS (yours only)",
     cssLead: "Applies to your screens only.",
     cssLoadFailed: "Couldn't load your custom CSS. Reload the page to try again.",
@@ -621,6 +637,7 @@ register("settings", {
     namedTunnelSetup: "設定教學",
     namedToken: "Cloudflare 連接器 token",
     namedTokenHint: "私密儲存，不會讀回。儲存時只檢查格式，開啟時才確認憑證與路由。設定或清除會關閉目前的公開連結。",
+    namedTokenInvalid: "請只貼上以 eyJ 開頭的長字串。",
     namedTokenSet: "設定 token",
     namedTokenClear: "清除 token",
     awaitingConfirmation: "等待確認中。",
@@ -949,6 +966,8 @@ register("settings", {
     modCancel: "取消",
     modInstalled: "已安裝 {0}。",
     modFailed: "未完成：{0}",
+    idLine: "ID：{0}",
+    modCanvasWorkerOff: "未完成：這個 mod 含有 Canvas Worker 效果，這是實驗性功能。請先到「設定 → 網頁外觀」開啟。",
     modDownload: "下載",
     modUninstall: "解除安裝",
     modUninstallConfirm: "要解除安裝 {0} 嗎？它的效果會離開你的效果庫，除非還有東西在使用。它已套用的外觀會保留。",
@@ -992,6 +1011,19 @@ register("settings", {
     appIconError_app_icon_superseded: "圖示剛被恢復成預設，請重新選擇圖片。",
     appIconError_app_icon_not_reset: "無法恢復預設（{0}）。",
     appIconError_other: "App 圖示沒有更換（{0}）。",
+    appIconError_app_icon_not_kept: "這個 fleet 沒有保存 App 圖示。",
+    appIconError_app_icon_failed: "App 圖示的請求失敗，請再試一次。",
+    appIconDetail_max_size: "最多 {0} MiB",
+    appIconDetail_png_only: "需要 PNG 圖片；頁面會自動轉換 JPG 與 WebP",
+    appIconDetail_busy: "另一張圖示正在處理中",
+    appIconDetail_reset_meanwhile: "圖示剛被恢復成預設",
+    appIconDetail_too_slow: "讀取時間過長",
+    appIconDetail_unreadable: "無法讀取這張圖片",
+    appIconDetail_corrupt: "無法解讀這個 PNG 檔案（{0}）",
+    appIconDetail_not_square: "不是正方形（{0}×{1}）",
+    appIconDetail_too_small: "小於 {0}×{0}",
+    appIconDetail_too_big: "大於 {0}×{0}",
+    appIconDetail_interlaced: "不支援交錯式（interlaced）PNG",
     cssTitle: "自訂 CSS（只套用在你自己）",
     cssLead: "只套用在你的畫面。",
     cssLoadFailed: "無法載入你的自訂 CSS。請重新整理頁面再試一次。",

package/dist/ui/settings-token.js

@@ -5,6 +5,7 @@
 // hands it back — afterwards a connection shows "Token set · @bot".
 import { html, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
+import { useTypedText } from "/assets/text-undo.js";
 import { Icon } from "/assets/ui-icons.js";
 import { api } from "./settings-confirm.js";
 
@@ -36,10 +37,11 @@ export const botHandle = (username) => (username ? `@${String(username).replace(
  */
 export function TokenField({ id, platform, value, onInput, identity, busy, onVerify, hint }) {
   const [shown, setShown] = useState(false);
+  const [text, onText] = useTypedText(value);            // #2342: the box keeps what was typed; the parent gets it trimmed
   return html`<div class="field token-field"><label for=${id}>${tn("wizardToken")}</label>
     <div class="token-row">
       <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck=${false} disabled=${!!busy}
-        placeholder=${platform === "discord" ? "MTA…" : "123456:ABC-DEF…"} value=${value} onInput=${(e) => onInput(e.target.value.trim())} />
+        placeholder=${platform === "discord" ? "MTA…" : "123456:ABC-DEF…"} value=${text} onInput=${(e) => onInput(onText(e.target.value))} />
       <button type="button" class="icon-btn" aria-pressed=${shown ? "true" : "false"} title=${shown ? tn("tokenHide") : tn("tokenShow")}
         aria-label=${shown ? tn("tokenHide") : tn("tokenShow")} onClick=${() => setShown(!shown)}><${Icon} name="eye" size=${16} /></button>
     </div>

package/dist/ui/settings-web-authority.js

@@ -5,10 +5,12 @@
 // them grants anything by itself — a session still needs its account's Confirm in Discord or Telegram).
 import { html, useEffect, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
+import { useTypedText } from "/assets/text-undo.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { api } from "./settings-confirm.js";
 import { Feedback } from "./settings-dialogs.js";
+import { DEFAULT_SCHEMA, impactOf } from "./settings-model.js";
 import { resetWebAuthorization } from "/assets/web-authorize.js";
 import "./settings-strings.js";
 
@@ -26,6 +28,8 @@ export function verifiedAuthorityBody(original, f) {
 export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   const [overview, setOverview] = useState(null), [failed, setFailed] = useState(false);
   const [original, setOriginal] = useState(null), [f, setF] = useState(null), [msg, setMsg] = useState(null);
+  // #2342: the hours box keeps what was typed ("01", "1.50"; its undo history); the form gets the number.
+  const [hoursText, onHoursText] = useTypedText(f ? f.hours : null, (v) => (v.trim() === "" ? null : Number(v)));
   const load = async () => {
     // What changes here (a revoke, the switch) changes this browser's own line: the chat reads it again when it shows.
     resetWebAuthorization();
@@ -46,7 +50,6 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   if (!overview || !f) return card(html`<p class="note">${t("app.loading")}</p>`);
 
   const set = (patch) => setF((x) => ({ ...x, ...patch }));
-  const hoursText = f.hours === null ? "" : String(f.hours);
   const hoursError = f.hours !== null && (!Number.isFinite(f.hours) || f.hours < overview.hours.min || f.hours > overview.hours.max) ? "vaHoursRange" : "";
   const stuckOff = f.enabled && original.enabled && !overview.state.enabled;
   const warnHosts = !f.loopbackOnly && overview.lanHosts.length > 0;
@@ -55,7 +58,7 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   const review = () => {
     if (hoursError) return;
     const body = verifiedAuthorityBody(original, f);
-    if (body) ctx.stage("verified_authority", { label: tn("vaTitle"), impact: "now", request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } });
+    if (body) ctx.stage("verified_authority", { label: tn("vaTitle"), impact: impactOf(ctx.schema || DEFAULT_SCHEMA, "web.verified_authority"), request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } });
     else if (staged.has("verified_authority")) ctx.unstage("verified_authority");
     setMsg(tn("readyApply"));
   };
@@ -77,7 +80,7 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
       ${warnHosts ? html`<p class="note s-va-warn" role="status" id="vaLanWarning">${tn("vaLanWarning", overview.lanHosts.join(", "))}</p>` : null}
       <div class="field"><label for="vaHours">${tn("vaHours", overview.hours.min, overview.hours.max)}</label>
         <input id="vaHours" type="number" min=${overview.hours.min} max=${overview.hours.max} step="any" placeholder=${tn("defaultHours", overview.hours.default)}
-          class=${hoursError ? "invalid" : ""} value=${hoursText} onInput=${(e) => set({ hours: e.target.value.trim() === "" ? null : Number(e.target.value) })} />
+          class=${hoursError ? "invalid" : ""} value=${hoursText} onInput=${(e) => set({ hours: onHoursText(e.target.value) })} />
         <${Feedback} error=${hoursError} /></div>
       <h4>${tn("vaSessionsTitle")}</h4>
       ${overview.authorized.length

package/dist/ui/settings-wizard.js

@@ -4,11 +4,12 @@
 // progress, deadline and restart recovery as every other change.
 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 { useLease } from "/assets/app-ctx.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { api } from "./settings-confirm.js";
 import { startOperation } from "./settings-apply.js";
-import { BACKENDS, DEFAULT_SCHEMA, impactOf, toYaml } from "./settings-model.js";
+import { BACKENDS, newConnectionImpact, toYaml } from "./settings-model.js";
 import { Drawer, Select } from "./settings-dialogs.js";
 import { adminUserIdError, adminUserIdPattern, botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
 import { DiscordServerPicker } from "./settings-discord.js";
@@ -26,6 +27,11 @@ export function SetupWizard({ ctx, onClose }) {
   const bump = () => { rev.current++; };
   const [busy, setBusy] = useState("");
   const [err, setErr] = useState("");
+  // #2342: the typed fields keep what was typed (a space in a path, the undo history); the form gets them trimmed.
+  const [dirText, onDirText] = useTypedText(w ? w.working_directory : "");
+  const [nameText, onNameText] = useTypedText(w ? w.instance_name : "");
+  const [userText, onUserText] = useTypedText(w ? w.admin_user_id : "");
+  const [groupText, onGroupText] = useTypedText(w ? w.group_id : "");
   useEffect(() => {
     (async () => {
       const env = await api("/api/settings/quickstart/environment").catch(() => null);
@@ -115,7 +121,7 @@ export function SetupWizard({ ctx, onClose }) {
     // either if it was taken since, instead of quietly picking another.
     const body = { ...input(), channel_id: w.plan.channel_id, token_env: w.plan.token_env, token_env_generated: true, token: w.token };
     // It writes the connection and the first agent: it costs what a connection change does (the server's schema).
-    const handed = startOperation([{ label: tn("wizardTitle"), impact: impactOf((ctx && ctx.schema) || DEFAULT_SCHEMA, "fleet.channels"),
+    const handed = startOperation([{ label: tn("wizardTitle"), impact: newConnectionImpact(ctx && ctx.schema),
       request: { method: "POST", url: "/api/settings/quickstart/commit", body, sensitive: true } }]);
     if (!handed) { setErr(tn("applyBusyLocal")); return; }
     setW((x) => ({ ...x, token: "" }));
@@ -134,8 +140,8 @@ export function SetupWizard({ ctx, onClose }) {
         <p class="note">${tn("wizardAgentExistingNote")}</p></div>` : html`${which}<div class="field"><label for="wz-be">${tn("wizardBackend")}</label>
         <${Select} id="wz-be" value=${w.backend} onChange=${set("backend")} options=${w.env.backends && w.env.backends.length ? w.env.backends : BACKENDS} />
         <p class="note">${w.env.backends && w.env.backends.length ? tn("wizardBackendFound", w.env.backends.join(", ")) : tn("wizardBackendNone")}</p></div>
-      <div class="field"><label for="wz-wd">${tn("workingDir")}</label><input id="wz-wd" type="text" placeholder="/home/you/projects/app" value=${w.working_directory} onInput=${(e) => set("working_directory")(e.target.value.trim())} /></div>
-      <div class="field"><label for="wz-name">${agents.length ? tn("wizardAgentNewName") : tn("wizardAgentName")}</label><input id="wz-name" type="text" value=${w.instance_name} onInput=${(e) => set("instance_name")(e.target.value.trim())} /></div>`;
+      <div class="field"><label for="wz-wd">${tn("workingDir")}</label><input id="wz-wd" type="text" placeholder="/home/you/projects/app" value=${dirText} onInput=${(e) => set("working_directory")(onDirText(e.target.value))} /></div>
+      <div class="field"><label for="wz-name">${agents.length ? tn("wizardAgentNewName") : tn("wizardAgentName")}</label><input id="wz-name" type="text" value=${nameText} onInput=${(e) => set("instance_name")(onNameText(e.target.value))} /></div>`;
   } else if (w.step === 2) {
     body = html`<div class="seg-inline" role="group" aria-label=${tn("wizardPlatform")}>
         ${["telegram", "discord"].map((p) => html`<button key=${p} type="button" class=${`btn${w.platform === p ? " btn-primary" : ""}`} aria-pressed=${w.platform === p ? "true" : "false"}
@@ -148,12 +154,12 @@ export function SetupWizard({ ctx, onClose }) {
         <${DiscordServerPicker} idPrefix="wz" token=${w.identity && w.identity.valid ? w.token : ""} bot=${w.identity && botHandle(w.identity.username)}
           invite=${w.identity && w.identity.invite} portal=${w.identity && w.identity.portal} guilds=${w.guilds} onGuilds=${(g) => setW((x) => ({ ...x, guilds: g }))}
           guild=${w.guild_id} onGuild=${set("guild_id")} channel=${w.general_channel_id} onChannel=${set("general_channel_id")} />
-        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("discordUserPlaceholder")} value=${w.admin_user_id} onInput=${(e) => set("admin_user_id")(e.target.value.trim())} /></div>`
+        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("discordUserPlaceholder")} value=${userText} onInput=${(e) => set("admin_user_id")(onUserText(e.target.value))} /></div>`
       : html`
-        <div class="field"><label for="wz-group">${tn("groupIdField")}</label><input id="wz-group" type="text" placeholder="-1001234567890" value=${w.group_id} onInput=${(e) => set("group_id")(e.target.value.trim())} />
+        <div class="field"><label for="wz-group">${tn("groupIdField")}</label><input id="wz-group" type="text" placeholder="-1001234567890" value=${groupText} onInput=${(e) => set("group_id")(onGroupText(e.target.value))} />
           <p class="note">${tn("wizardDetectHint")}</p></div>
         <div class="dlg-inline-actions"><button type="button" class="btn btn-sm" disabled=${!!busy} onClick=${detect}>${tn("wizardDetect")}</button></div>
-        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("telegramUserPlaceholder")} value=${w.admin_user_id} onInput=${(e) => set("admin_user_id")(e.target.value.trim())} /></div>`}`;
+        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("telegramUserPlaceholder")} value=${userText} onInput=${(e) => set("admin_user_id")(onUserText(e.target.value))} /></div>`}`;
   } else {
     body = !w.plan ? html`<p class="note">${tn("wizardPlanLoading")}</p>` : html`
       <p><strong>${tn("wizardWillWrite")}</strong></p>

package/dist/ui/shared/app-i18n.js

@@ -94,7 +94,7 @@ register("app", {
     search: "Search", searchTitle: "Search chats, messages between agents and tasks ({0})",
     confirmTitle: "Please confirm", confirmOk: "Continue", cancel: "Cancel",
     // The server's own wording (src/locale.ts needs.reason.*), so the web says what Discord says.
-    needs_reason_hang: "Not responding", needs_reason_exited: "Exited", needs_reason_assist: "Waiting at its terminal", needs_reason_permission: "Permission needed", needs_reason_dangerous_command: "Dangerous command waiting", needs_reason_login: "Sign-in needed", needs_reason_dialog: "Waiting at a dialog", needs_reason_terminal_input: "May be waiting for input", needs_reason_auth_paused: "Paused: sign-in needed", needs_reason_crashed: "Crashed", needs_reason_delivery_uncertain: "Could not confirm delivery", needs_reason_delivery_failed: "Delivery failed",
+    needs_reason_hang: "Not responding", needs_reason_exited: "Exited", needs_reason_assist: "Waiting at its terminal", needs_reason_permission: "Permission needed", needs_reason_dangerous_command: "Dangerous command waiting", needs_reason_login: "Sign-in needed", needs_reason_dialog: "Waiting at a dialog", needs_reason_terminal_input: "May be waiting for input", needs_reason_auth_paused: "Paused: sign-in needed", needs_reason_crashed: "Crashed", needs_reason_delivery_uncertain: "Could not confirm delivery", needs_reason_delivery_failed: "Delivery failed", needs_reason_task_review: "Waiting for your confirmation", needs_reason_task_blocked: "Blocked: asks you",
   },
   "zh-TW": {
     brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance", newAgent: "新增 Agent",
@@ -129,6 +129,6 @@ register("app", {
     needsNav: "等你處理", needsTab: "待處理", needsCount: "{0} 件待處理",
     search: "搜尋", searchTitle: "搜尋聊天、agent 之間的訊息與任務（{0}）",
     confirmTitle: "請確認", confirmOk: "繼續", cancel: "取消",
-    needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗",
+    needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗", needs_reason_task_review: "等你確認", needs_reason_task_blocked: "卡住，在問你",
   },
 });

package/dist/ui/shared/app-needs.js

@@ -77,8 +77,8 @@ export function startNeedsNotifier({ open, env = globalThis } = {}) {
     seen.add(item.id);
     if (!notifyOn(env)) return;
     try {
-      const n = new env.Notification(item.instance, { body: item.detail ? `${reasonText(item)}: ${item.detail}` : reasonText(item), tag: item.id });
-      n.onclick = () => { try { env.focus && env.focus(); } catch { /* ignore */ } if (open) open(item.instance); n.close(); };
+      const n = new env.Notification(item.instance || reasonText(item), { body: item.detail ? `${reasonText(item)}: ${item.detail}` : reasonText(item), tag: item.id });
+      n.onclick = () => { try { env.focus && env.focus(); } catch { /* ignore */ } if (open && item.instance) open(item.instance); n.close(); };
     } catch { /* a browser that refuses at the last moment: the list still shows it */ }
   };
   const consider = (items) => {

package/dist/ui/shared/app-store.js

@@ -24,7 +24,7 @@ export function createStore(initial) {
  *  (app-stream.js catchUp) — "catching" / "retrying" / "failed" / "ok"; `retryHydration` asks for it again.
  *  `connections`: how many chat connections the fleet has (#1519 P7: 0 is web-only — the first-run card); null until known. */
 export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [], connections: null,
-  hydration: "none", retryHydration: null });
+  hydration: "none", retryHydration: null, canvasWorker: typeof document !== "undefined" && document.body?.dataset.canvasWorker === "1" });
 
 /**
  * #1920 phase 3: this page is a guest's — the server says so on <body> (data-tier="guest"). A guest sees only its own
@@ -49,7 +49,7 @@ export function applyStatus(d) {
     exec[i.name] = (i.execution_state !== undefined ? i.execution_state : i.state) ?? null;
     if (i.state === "awaiting_input") awaiting[i.name] = typeof i.interaction_summary === "string" ? i.interaction_summary : "";
   }
-  appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
+  appStore.set({ canvasWorker: d.canvas_worker === true, ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
     connections: typeof d.connections === "number" ? d.connections : null,
     // #1665: the host preferences' revision (app-prefs.js re-reads them when it moves).
     prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null,