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

package/dist/ui/panel-chat.js

@@ -21,6 +21,7 @@ import { Menu } from "/assets/ui-menu.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Empty, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
+import { recordEdit } from "/assets/text-undo.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { savePref } from "/assets/app-prefs.js";
@@ -74,11 +75,14 @@ import { PreviewPanel, claimPanel, openPanel, panelClaims, panelStore, panelVers
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { LightboxHost, openLightbox } from "./image-lightbox.js";
-import { ChatEffectPosters } from "/ui/js/chat-effect-posters.js";
-import { ChatEffects, chatEffectsMenuAvailable } from "./chat-effects.js";
+import { canvasWorkerMenuAvailable, experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
+const ChatEffectPosters = experimentalComponent(() => import("./chat-effect-posters.js"), m => m.ChatEffectPosters);
+const ChatEffects = experimentalComponent(() => import("./chat-effects.js"), m => m.ChatEffects);
 import { setFollowsReducedMotion } from "/assets/fx-motion.js";
 import { AmbientMotionNote, ChatAmbient, ambientMenuItems } from "./chat-ambient.js";
-import { startEffectsWaker, getAppEffects, wakeEffects, effectsLoaded, onEffectsAwake, chatHasEffects } from "./effects-waker.js";
+import { startEffectsWaker, getAppEffects, wakeEffects, effectsLoaded, onEffectsAwake, chatHasEffects } from "/assets/feature-flags.js";
+/** The composer's textarea (#2342: text put back into it is a step Ctrl+Z goes back from). */
+const composerField = () => (typeof document !== "undefined" ? document.getElementById("msgIn") : null);
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
@@ -297,7 +301,8 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   };
   // #2193: this chat's Canvas Worker placements (its status row's effect_chat_v): none, no effects code runs for it.
-  const fxHere = chatHasEffects(name);
+  const cwEnabled = useCanvasWorker();
+  const fxHere = cwEnabled && chatHasEffects(name);
   const items = [
     // #1523 N2: Details is a page now (the Fleet side of this instance), not a dialog.
     { key: "details", label: t("chat.details"), icon: "info", onSelect: () => navigate(detailsPath(name)) },
@@ -310,7 +315,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ...themeMenuItems(name),
     // #2117: its ambient — why it is not showing here (with the way to change that), and a person's Clear.
     ...ambientMenuItems(name, { publicLink: document.body.dataset.publicLink === "1", clear: clearAmbient }),
-    chatEffectsMenuAvailable() ? { key: "effects", label: t("chatFx.title"), onSelect: () => setDialog("effects") } : null,
+    cwEnabled && canvasWorkerMenuAvailable(window) ? { key: "effects", label: t("cwControls.title"), onSelect: () => setDialog("effects") } : null,
     { key: "delete", label: t("chat.delete"), icon: "trash", danger: true, onSelect: () => setDialog("delete") },
   ];
   const cls = statusClass(inst, exec, awaiting);
@@ -451,11 +456,16 @@ function follow(name, thread) {
   }));
   offs.push(P() ? P().onChange(() => thread.refreshCards()) : () => {});
   // #2193: the runtime may start later (an offer shown wakes it): its trial updates are followed from then.
-  let trialOff = null;
-  const watchTrial = () => { trialOff = getAppEffects()?.subscribeTrial(() => thread.render(store.state.msgs[name] || [])) ?? null; };
+  let trialOff = null, trialOwner = null;
+  const watchTrial = () => {
+    const next = getAppEffects();
+    if (next === trialOwner) return;
+    trialOff?.(); trialOff = null; trialOwner = next;
+    trialOff = next?.subscribeTrial(() => thread.render(store.state.msgs[name] || [])) ?? null;
+  };
   watchTrial();
-  if (!trialOff) offs.push(onEffectsAwake(() => { watchTrial(); thread.render(store.state.msgs[name] || []); }));
-  offs.push(() => trialOff?.());
+  offs.push(onEffectsAwake(() => { watchTrial(); thread.render(store.state.msgs[name] || []); }));
+  offs.push(() => { trialOff?.(); trialOff = null; trialOwner = null; });
   offs.push(panelStore.subscribe(() => thread.refreshCards()));   // a card shows whether the panel has its block
   return () => { for (const off of offs) off(); };
 }
@@ -537,7 +547,7 @@ function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
     <${CommandCard} name=${name} lease=${lease} />
     <${QuickActions} name=${name} inst=${inst} lease=${lease} />
     ${s.failedSends[name] ? html`<div class="failed-send" role="alert"><span>${t("chat.notSent")}</span><span class="txt">${s.failedSends[name]}</span>
-      <button type="button" class="btn btn-primary btn-sm" onClick=${() => store.putBack(name)}>${t("chat.putBack")}</button>
+      <button type="button" class="btn btn-primary btn-sm" onClick=${() => { recordEdit(composerField()); store.putBack(name); }}>${t("chat.putBack")}</button>
       <button type="button" class="btn btn-sm" onClick=${() => store.discardFailed(name)}>${t("chat.discard")}</button></div>` : null}
     ${s.waking[name] ? html`<p class="send-waking" role="status">${t("chat.waking", name)}</p>` : null}
     ${s.sendFailures[name] ? html`<div class="failed-send send-failure" role="alert"><span>${s.sendFailures[name].error}</span>
@@ -654,7 +664,8 @@ function Composer({ name, lease, busy }) {
     setValue("");
     store.runCommand(name, cmd.command, cmd.args, { alive: () => lease.current() });
   };
-  const complete = (c) => setValue(`/${c.name}${c.arg ? " " : ""}`);
+  // #2342: a completion is a step Ctrl+Z goes back from (to what was typed); a command that runs consumes the line.
+  const complete = (c) => { recordEdit(input.current); setValue(`/${c.name}${c.arg ? " " : ""}`); };
   const submit = () => {
     if (pick) {
       if (value === `/${pick.name}` && !needsArgument(pick.name)) runLine({ command: pick.name, args: "" });
@@ -664,7 +675,7 @@ function Composer({ name, lease, busy }) {
     // #1920: a guest's "/…" would be refused as a command — said here, the draft kept to edit.
     if (guest && /^\s*\//.test(value)) { toast(t("chat.guestNoCommands"), false); return; }
     const cmd = files.length ? null : parseCommandLine(value);
-    if (cmd && needsArgument(cmd.command) && !cmd.args) { setValue(`/${cmd.command} `); return; }
+    if (cmd && needsArgument(cmd.command) && !cmd.args) { recordEdit(input.current); setValue(`/${cmd.command} `); return; }
     if (cmd) { runLine(cmd); return; }
     store.send(name);
   };
@@ -728,7 +739,7 @@ function FileChip({ f, i, name }) {
   return html`<span class="file-chip">
     ${isImage ? html`<img ref=${img} alt="" />` : html`<span class="ic"><${Icon} name="file" size=${16} /></span>`}
     <span class="nm">${f.name}</span><span class="sz">${R().formatSize(f.size)}</span>
-    ${store.isPasted(f) ? html`<button type="button" class="as-text" onClick=${() => store.fileBackAsText(name, i)}>${t("chat.asText")}</button>` : null}
+    ${store.isPasted(f) ? html`<button type="button" class="as-text" onClick=${() => { recordEdit(composerField()); store.fileBackAsText(name, i); }}>${t("chat.asText")}</button>` : null}
     <button type="button" class="chip-x" title=${t("chat.removeFile")} aria-label=${`${t("chat.removeFile")} ${f.name}`} onClick=${() => store.removeFile(name, i)}><${Icon} name="close" size=${14} /></button></span>`;
 }
 

package/dist/ui/panel-details.js

@@ -25,6 +25,7 @@ import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { toast } from "/assets/ui-toast.js";
 import "./chat-strings.js";
 import { api } from "./settings-confirm.js";
+import { InstanceBoardWork } from "./fleet-task-work.js";
 import { requestAgentSettings } from "./settings-request.js";
 
 export function DetailsPanel({ route, navKey }) {
@@ -150,6 +151,7 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
         ${row(t("chat.dContext"), html`<span class="pct">${ctx != null ? `${Math.round(ctx)}%` : "--"}</span>${ctx != null ? bar(ctx, ctx > 80 ? "warn" : "") : null}`)}
         ${row(t("chat.dRate5"), html`<span class="pct">${Math.round(rl5)}%</span>${bar(rl5, rl5 > 90 ? "error" : rl5 > 70 ? "warn" : "")}`)}
         ${row(t("chat.dRate7"), html`<span class="pct">${Math.round(rl7)}%</span>${bar(rl7, rl7 > 90 ? "error" : rl7 > 70 ? "warn" : "")}`)}</section>
+      <${InstanceBoardWork} name=${name} onOpen=${(id) => navigate(`/ui/fleet?card=${encodeURIComponent(id)}`)} />
       <section class="card"><h3>${t("chat.dActivity")}</h3>${d.recent_activity?.length ? d.recent_activity.map((a, i) => html`<div key=${i} class="activity">
         <span class="mono muted">${a.timestamp ? new Date(`${a.timestamp.replace(" ", "T")}Z`).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}</span>
         <span class="ev">${a.event}</span> ${a.summary || ""}</div>`) : html`<p class="note">${t("chat.dNoActivity")}</p>`}</section>`;

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";
@@ -21,6 +23,15 @@ import { CardTitle } from "./settings-learn.js";
 import "./settings-strings.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
+/** #2390: a refusal's detail in the page's language when the host named it (detail_key), else its English as sent. */
+export function appIconDetail(body) {
+  const key = body && typeof body.detail_key === "string" ? `appIconDetail_${body.detail_key}` : null;
+  const english = (body && body.detail) || "";
+  if (!key) return english;
+  const args = Array.isArray(body.detail_args) ? body.detail_args : [];
+  const said = tn(key, ...(body.detail_key === "corrupt" ? [english] : args));
+  return said === `settings.${key}` ? english : said;
+}
 const short = (sha) => (sha ? sha.slice(0, 8) : "");
 const kib = (n) => `${Math.max(1, Math.round(n / 1024))} KiB`;
 
@@ -49,7 +60,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. */
@@ -210,8 +240,8 @@ function AppIconCard() {
   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)));
+      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", "app_icon_not_kept", "app_icon_failed"];
+      setError(known.includes(r.body && r.body.error) ? tn(`appIconError_${r.body.error}`, appIconDetail(r.body)) : tn("appIconError_other", (r.body && r.body.error) || String(r.status)));
       return;
     }
     setState(r.body);
@@ -347,6 +377,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 +390,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 +409,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 +418,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 +443,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 +474,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">