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

package/dist/ui/panel-fleet.js

@@ -276,6 +276,10 @@ function Config({ lease }) {
   // Each save owns the form's busy state only while it is the latest: an older save that is decided later (it waited
   // for an admin's confirmation) never unlocks the form under a newer one still on its way (#1453 review).
   const saves = useRef(0);
+  // #2342: each project root's row keeps its own key — keyed by position, removing one shifted the texts below into
+  // the boxes above (each box's text rewritten, its undo history lost).
+  const rootKeys = useRef({ n: 0, list: [] });
+  const rootKey = (i) => { const k = rootKeys.current; while (k.list.length <= i) k.list.push(++k.n); return k.list[i]; };
   useEffect(() => {
     if (!state || !state.data) return;
     const c = state.data, ch = c.channel || {}, acc = ch.access || {};
@@ -314,9 +318,9 @@ function Config({ lease }) {
     <section class="card"><h3>${t("fleet.defaults")}</h3>
       <div class="field"><label for="cfg-be">${t("fleet.backend")}</label><${BackendSelect} id="cfg-be" value=${form.backend} onChange=${(v) => setForm({ ...form, backend: v })} /></div></section>
     <section class="card"><h3>${t("fleet.roots")}</h3>
-      ${form.roots.map((r, i) => html`<div key=${i} class="field-row"><input value=${r} placeholder="/path/to/projects" aria-label=${t("fleet.roots")}
+      ${form.roots.map((r, i) => html`<div key=${rootKey(i)} class="field-row"><input value=${r} placeholder="/path/to/projects" aria-label=${t("fleet.roots")}
         onInput=${(e) => { const roots = [...form.roots]; roots[i] = e.target.value; setForm({ ...form, roots }); }} />
-        <button type="button" class="icon-btn" aria-label=${t("fleet.removeRoot")} title=${t("fleet.removeRoot")} onClick=${() => setForm({ ...form, roots: form.roots.filter((_, j) => j !== i) })}><${Icon} name="close" size=${16} /></button></div>`)}
+        <button type="button" class="icon-btn" aria-label=${t("fleet.removeRoot")} title=${t("fleet.removeRoot")} onClick=${() => { rootKeys.current.list.splice(i, 1); setForm({ ...form, roots: form.roots.filter((_, j) => j !== i) }); }}><${Icon} name="close" size=${16} /></button></div>`)}
       <button type="button" class="btn btn-ghost" onClick=${() => setForm({ ...form, roots: [...form.roots, ""] })}><${Icon} name="plus" size=${16} />${t("fleet.addRoot")}</button></section>
     <div class="save-row"><button type="button" class="btn btn-primary" disabled=${saving} onClick=${save}>${t("fleet.save")}</button><span class="note">${t("fleet.saveNote")}</span></div>`}</${Loaded}>`;
 }

package/dist/ui/panel-needs.js

@@ -25,7 +25,8 @@ import { openSignIn, signInOffered } from "./backend-signin.js";
 register("needs", {
   en: {
     title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in your chat app's General.", emptyHintWeb: "When an agent waits for you, it shows here.",
-    open: "Open chat", signIn: "Sign in", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
+    open: "Open chat", openCard: "Open the card", noAssignee: "Task board (nobody assigned)", signIn: "Sign in",
+    gap: "not wrapped up: {0}", gapUnchecked: "{0} checklist item(s) unchecked", gapNoResult: "no result", gapJoin: ", ", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
     ageNow: "just now", ageMin: "{0} min", ageHour: "{0} h", ageDay: "{0} d",
     notifyTitle: "Notify me on this device", notifyOn: "Notifications are on for this browser while a tab is open.",
     notifyOff: "Get a desktop notification when something new needs you while this tab is in the background.",
@@ -37,7 +38,8 @@ register("needs", {
   },
   "zh-TW": {
     title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在聊天 app 的 General。", emptyHintWeb: "agent 在等你時，會出現在這裡。",
-    open: "開啟聊天", signIn: "登入", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
+    open: "開啟聊天", openCard: "打開卡片", noAssignee: "任務看板（沒有負責人）", signIn: "登入",
+    gap: "還沒補齊：{0}", gapUnchecked: "還有 {0} 項沒勾", gapNoResult: "沒有產出總結", gapJoin: "、", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
     ageNow: "剛剛", ageMin: "{0} 分鐘", ageHour: "{0} 小時", ageDay: "{0} 天",
     notifyTitle: "在這台裝置通知我", notifyOn: "這個瀏覽器的通知已開啟（需要開著分頁）。",
     notifyOff: "分頁在背景時，有新的事等你處理就跳出桌面通知。",
@@ -84,9 +86,21 @@ const setClaim = (kind, key, value) => claims.set((c) => {
   return { ...c, [kind]: next };
 });
 
-const ICON = { prompt: "chat", awaiting_input: "clock", instance: "alert", delivery: "send" };
+const ICON = { prompt: "chat", awaiting_input: "clock", instance: "alert", delivery: "send", task: "tasks" };
 const BAD = new Set(["crashed", "delivery_failed", "hang", "exited"]);
 
+/**
+ * An item's line. A task board card's is said here, in the page's language (#2246 step 3): its number and title, then
+ * its question or what it lacks; anything else is the server's own words.
+ */
+function detailOf(item) {
+  const c = item.type === "task" ? item.card : null;
+  if (!c || !c.title) return item.detail;
+  const lacks = c.gap ? [c.gap.unchecked ? tn("gapUnchecked", c.gap.unchecked) : "", c.gap.noResult ? tn("gapNoResult") : ""].filter(Boolean).join(tn("gapJoin")) : "";
+  const tail = c.question || (lacks ? tn("gap", lacks) : "");
+  return `${c.code} ${c.title}${tail ? ` — ${tail}` : ""}`;
+}
+
 /** "3 min", "2 h": the age shown beside an item (refreshed by a display timer, never by a read). */
 export function age(since, nowMs) {
   const minutes = Math.max(0, Math.floor((nowMs - since) / 60_000));
@@ -129,7 +143,7 @@ export function NeedsPanel({ navKey }) {
     <div data-trust="panel-content" class="panel-body"><div class="col">
       ${!items.length ? html`<${Empty} icon="check" title=${tn("empty")} hint=${tn(chatApp ? "emptyHint" : "emptyHintWeb")} />`
         : groups.map((g) => html`<section key=${g.instance} class="n-group" aria-label=${g.instance}>
-          <h2 class="n-group-head"><a href=${chatPath(g.instance)} title=${g.instance}>${nameFor(g.instance)}</a></h2>
+          <h2 class="n-group-head">${g.instance ? html`<a href=${chatPath(g.instance)} title=${g.instance}>${nameFor(g.instance)}</a>` : tn("noAssignee")}</h2>
           ${g.items.map((item) => html`<${NeedsItem} key=${item.id} item=${item} nowMs=${nowMs} owner=${owner} />`)}
         </section>`)}
       <${NotifyToggle} />
@@ -180,14 +194,15 @@ function NeedsItem({ item, nowMs, owner }) {
     <span class="n-icon"><${Icon} name=${ICON[item.type] || "alert"} size=${18} /></span>
     <div class="n-body">
       <div class="n-title"><strong>${reasonText(item)}</strong><span class="n-age">${age(item.since, nowMs)}</span></div>
-      ${item.detail ? html`<p class="n-detail">${item.detail}</p>` : null}
+      ${detailOf(item) ? html`<p class="n-detail">${detailOf(item)}</p>` : null}
       <div class="n-actions">
         ${item.type === "prompt" && Array.isArray(item.actions) ? item.actions.map((a) => html`<button key=${a.id} type="button" class="btn btn-sm"
             disabled=${promptBusy} onClick=${() => answer(a.id)}>${(p ? p.busy : fallback === "busy") ? tn("answering") : a.label}</button>`) : null}
         ${item.type === "delivery" ? html`<button type="button" class="btn btn-sm" disabled=${!!ack} onClick=${acknowledge}>
             <${Icon} name="check" size=${14} />${ack === "busy" ? tn("acknowledging") : tn("acknowledge")}</button>` : null}
         ${item.reason === "auth_paused" && item.signIn && signInOffered() ? html`<button type="button" class="btn btn-sm btn-primary" onClick=${() => openSignIn(item.signIn)}>${tn("signIn")}</button>` : null}
-        <a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn("open")}</a>
+        ${item.type === "task" && item.card ? html`<a class="btn btn-sm" href=${`/ui/fleet?card=${encodeURIComponent(item.card.code)}`}>${tn("openCard")}</a>` : null}
+        ${item.instance ? html`<a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn("open")}</a>` : null}
       </div>
     </div>
   </article>`;

package/dist/ui/panel-settings.js

@@ -175,7 +175,7 @@ export function SettingsPanel({ route, navKey }) {
   const applied = (pendingChanges || []).filter((p) => p.state === "applied").map((p) => p.id).join(",");
   useEffect(() => { if (applied) reload(); }, [applied]);
 
-  const stage = (key, change) => {
+  const stage = (key, change, quiet = false) => {
     setStaged((s) => {
       const m = new Map(s);
       const prev = m.get(key);
@@ -186,7 +186,7 @@ export function SettingsPanel({ route, navKey }) {
       m.set(key, { ...change, stageKey: key });
       return m;
     });
-    toast(tn("queued", change.label));
+    if (!quiet) toast(tn("queued", change.label));
   };
   const unstage = (key) => setStaged((s) => { if (!s.has(key)) return s; const m = new Map(s); m.delete(key); return m; });
   const discard = () => { dropSecrets(staged); setStaged(new Map()); reload(); };
@@ -818,11 +818,21 @@ function WebSection({ ctx, staged }) {
     terminal: { enabled: term.enabled ?? null, ttl_minutes: term.ttl_minutes ?? null },
   }), []);
   const text = (v) => (v === null || v === undefined ? "" : String(v));
-  const [f, setF] = useState(() => ({
-    echo: original.echo, log: original.log, usagePub: original.usagePub, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol, hostname: original.pub.hostname, originPort: String(original.pub.origin_port),
-    abs: text(original.session.absolute_hours), idle: text(original.session.idle_hours),
-    termOn: original.terminal.enabled !== false, termTtl: text(original.terminal.ttl_minutes),
-  }));
+  const [f, setF] = useState(() => {
+    // Settings sections share one draft. Reopening Web must show it as well as preserve it in the Apply bar, so a
+    // subsequent field edit keeps earlier edits. The original disk values remain the diff/confirmation baseline.
+    const request = staged.get("web")?.request;
+    const pending = request?.method === "PUT" && request.url === "/api/settings/fleet/web" ? request.body || {} : {};
+    const pub = pending.public_link || {}, session = pending.session?.local || {}, terminal = pending.web_terminal || {};
+    const pick = (obj, key, fallback) => Object.prototype.hasOwnProperty.call(obj, key) ? obj[key] : fallback;
+    return {
+      echo: pick(pending, "echo_to_channel", original.echo), log: pick(pending, "log_tab", original.log), usagePub: pick(pending, "usage_report_on_public_link", original.usagePub),
+      pub: pick(pub, "allow_public", original.pub.allow_public), ttl: String(pick(pub, "ttl_minutes", original.pub.ttl_minutes)), protocol: pick(pub, "protocol", original.pub.protocol),
+      hostname: pick(pub, "hostname", original.pub.hostname), originPort: String(pick(pub, "origin_port", original.pub.origin_port)),
+      abs: text(pick(session, "absolute_hours", original.session.absolute_hours)), idle: text(pick(session, "idle_hours", original.session.idle_hours)),
+      termOn: pick(terminal, "enabled", original.terminal.enabled) !== false, termTtl: text(pick(terminal, "ttl_minutes", original.terminal.ttl_minutes)),
+    };
+  });
   const [msg, setMsg] = useState(null);
   const set = (k) => (v) => setF((x) => ({ ...x, [k]: v }));
   // Empty = the default (null in the write: the key is removed from fleet.yaml).
@@ -840,9 +850,14 @@ function WebSection({ ctx, staged }) {
     termTtl: value(f.termTtl) !== null && (!Number.isInteger(value(f.termTtl)) || value(f.termTtl) < 1 || value(f.termTtl) > 20) ? "webTerminalTtlRange" : "",
   };
   const ready = !overPublicLink && !Object.values(errors).some(Boolean);
-  const review = () => {
-    if (!ready) return;
-    const publicPatch = changedFields({ allow_public: f.pub, ttl_minutes: Number(f.ttl), protocol: f.protocol, hostname: f.hostname, tunnel_token_env: f.hostname ? "AGEND_CLOUDFLARE_TUNNEL_TOKEN" : "", origin_port: Number(f.originPort) }, original.pub);
+  const review = (quiet = false) => {
+    // Invalid intermediate text must not leave an older valid draft available to Apply.
+    if (!ready) { if (staged.has("web")) ctx.unstage("web"); setMsg(null); return; }
+    // Keep an existing secret reference, including a custom one. Only a newly supplied hostname without any
+    // reference adopts the standard env key; mounting or editing an unrelated field never rewrites credentials.
+    const tokenEnv = f.hostname === original.pub.hostname ? original.pub.tunnel_token_env
+      : f.hostname ? original.pub.tunnel_token_env || "AGEND_CLOUDFLARE_TUNNEL_TOKEN" : "";
+    const publicPatch = changedFields({ allow_public: f.pub, ttl_minutes: Number(f.ttl), protocol: f.protocol, hostname: f.hostname, tunnel_token_env: tokenEnv, origin_port: Number(f.originPort) }, original.pub);
     const sessionPatch = changedFields({ absolute_hours: value(f.abs), idle_hours: value(f.idle) }, original.session);
     // The checkbox shows the default (on) for an unset key: only a real toggle is written; on again = back to the default.
     const terminalPatch = changedFields({ enabled: f.termOn === (original.terminal.enabled !== false) ? original.terminal.enabled : f.termOn ? null : false,
@@ -865,10 +880,16 @@ function WebSection({ ctx, staged }) {
     ];
     if (fields.length) {
       ctx.stage("web", { label: tn("sec_web"), impact: batchImpact(schema, fields, (k) => impactOf(schema, k)),
-        request: { method: "PUT", url: "/api/settings/fleet/web", body } });
+        request: { method: "PUT", url: "/api/settings/fleet/web", body } }, quiet);
     } else if (staged.has("web")) ctx.unstage("web");
-    setMsg(tn("readyApply"));
+    setMsg(fields.length ? tn("readyApply") : null);
   };
+  // This form already has validation and a single shared Web draft. Valid edits join that draft immediately;
+  // Apply, its confirmations and the leave guard still own all HTTP writes. Quiet staging avoids a toast per key.
+  // Returning from another Settings section remounts this form: its unchanged initial fields must not erase the
+  // parent's already-staged Web draft. Only an actual field edit replaces or removes that draft.
+  const formMounted = useRef(false);
+  useEffect(() => { if (!formMounted.current) { formMounted.current = true; return; } review(true); }, [f]);
   const shown = (path) => {
     const [top, key] = path.split(".");
     const v = (top === "web" ? web : term)[key];
@@ -920,7 +941,7 @@ function WebSection({ ctx, staged }) {
       <p class="note">${tn("webReadOnlyLead")}</p>
       <dl class="s-web-ro">${WEB_READ_ONLY.map((k) => html`<div key=${k}><dt><code>${k}</code></dt><dd>${shown(k)}</dd></div>`)}</dl>
     </section>
-    <div class="save-row"><button type="button" class="btn btn-primary" disabled=${!ready} onClick=${review}>${tn("reviewChanges")}</button>
+    <div class="save-row"><button type="button" class="btn btn-primary" disabled=${!ready} onClick=${() => review()}>${tn("reviewChanges")}</button>
       ${msg ? html`<span class="note" role="status">${msg}</span>` : null}</div>
   </div>`;
 }
@@ -1062,6 +1083,7 @@ function PublicTunnelToken() {
     try {
       const prepared = await api(`${base}/verify`, { method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify(clear ? { clear: true } : { secret: value }) });
       if (!lease.current()) return;
+      if (!prepared.ok && prepared.body?.error_code === "invalid_tunnel_token") { setMessage(tn("namedTokenInvalid")); return; }
       if (!prepared.ok) throw Error("refused");
       const applied = await confirmedWrite(`${base}/apply`, { method: "POST", key, label: tn(clear ? "namedTokenClear" : "namedTokenSet"), body: { verification_id: prepared.body?.verification_id, idempotency_key: key } });
       let body = applied.body || {};

package/dist/ui/preview-panel.js

@@ -16,7 +16,8 @@ import { Icon } from "/assets/ui-icons.js";
 import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
-import { EffectTrialPanel } from "./effect-trial-panel.js";
+import { experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
+const EffectTrialPanel = experimentalComponent(() => import("./effect-trial-panel.js"), m => m.EffectTrialPanel);
 import { chatTime, onDayChange } from "./chat-time.js";
 
 const R = () => globalThis.AgendChatRender;

package/dist/ui/search-dialog.js

@@ -5,6 +5,7 @@
 // agents, a task — opens here as the index's copy (GET /ui/search/context). Text only: no innerHTML, no style attribute.
 import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "/assets/app-html.js";
 import { t, register } from "/assets/app-i18n.js";
+import { recordEdit } from "/assets/text-undo.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { navigate } from "/assets/app-nav.js";
 import { chatPath, fleetPath } from "/assets/app-route.js";
@@ -286,7 +287,7 @@ export function SearchDialog({ preset = {}, onClose }) {
       <div class="search-body" ref=${list}>
         ${detail ? html`<${Detail} detail=${detail} q=${q} label=${label} onBack=${() => { setDetail(null); input.current && input.current.focus(); }} onClose=${onClose} />`
           : html`<${Results} q=${q} res=${res} groups=${groups} active=${active} setActive=${setActive} open=${open} label=${label} filtered=${activeFilters > 0}
-              recent=${recent} pick=${(s) => { setQ(s); input.current && input.current.focus(); }} clearRecent=${() => { forgetRecent(); setRecent([]); }} />`}
+              recent=${recent} pick=${(s) => { recordEdit(input.current); setQ(s); input.current && input.current.focus(); }} clearRecent=${() => { forgetRecent(); setRecent([]); }} />`}
       </div>
       <div class="search-foot" aria-hidden="true">${t("search.keys")}</div>
     </div></dialog>`;

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";
@@ -49,7 +51,26 @@ export function AppearanceSection() {
     ${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. */
@@ -347,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()) {
@@ -359,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>`;
@@ -378,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);
@@ -386,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(); }, []);
@@ -409,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];
@@ -440,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-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" : "");