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

package/dist/ui/shared/app.js

@@ -8,8 +8,9 @@
 // #1665 first: the host's preferences go into this browser's cache before any module below reads its key.
 import { bootPrefs } from "./app-prefs.js";
 import { html, render } from "./app-html.js";
-import { Shell, handleKey, handleSearchKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener } from "./app-shell.js";
+import { Shell, handleKey, handleSearchKey, showDialog, closeDrawer, openDrawer, shellStore, retryable, setNewInstanceOpener, isMacLike } from "./app-shell.js";
 import { installSwipe } from "./app-swipe.js";
+import { installTextUndo } from "./text-undo.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
 import { appStore, applyStatus, applyActivity, guestPage } from "./app-store.js";
@@ -125,6 +126,9 @@ if (!guest) installOwnerCss();
 document.addEventListener("keydown", handleKey);
 // #2293: Ctrl+K / ⌘K (and Ctrl+F in a chat) — an admin's full app only; the server refuses a guest's search anyway.
 if (mode === "full" && !guest) document.addEventListener("keydown", handleSearchKey);
+// #2342: Ctrl/⌘+Z and Ctrl+Shift+Z / Ctrl+Y / ⌘⇧Z in every text field, one history per field (the browser's is one
+// for the whole page, and any script write wipes it).
+installTextUndo({ mac: isMacLike() });
 // #1605: on a phone (the sidebar is a drawer), swipe right in the main area to open it, left to close it — the same
 // open/close as ☰ and the scrim. Nothing that owns a sideways drag (code, tables, the terminal, inputs, dialogs) and
 // never the left edge (iOS: "back").

package/dist/ui/shared/effect-app-runtime.js

@@ -13,7 +13,7 @@ const episodes = new WeakSet();
 
 /** `current` belongs to the page/session episode. Route cleanup only releases its contribution. */
 export function createAppEffectRuntime({ window: host, current, observe, onChange = () => {}, onDispose = () => {}, resolveOwnerTarget = null, onOwnerUnavailable = () => {}, factories = {} }) {
-  let dead = false, error = null, loader = null, registry = null, writer = null, source = null, personal = null, trial = null, pending = null, lastMetadata = null, serial = 0, revision = 0, stamp = null, syncing = false, queued = false;
+  let dead = false, claimed = false, error = null, loader = null, registry = null, writer = null, source = null, personal = null, trial = null, pending = null, lastMetadata = null, serial = 0, revision = 0, stamp = null, syncing = false, queued = false;
   const bindings = new Map(), profiles = new Map();
   let lastContext = null, playbackUnavailable = null;
   const identity = effectPlaybackIdentity(host), auth = host?.AgendAuth;
@@ -26,7 +26,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
   };
   const placementIdentity = p => JSON.stringify([p.by, p.manifest.layer, p.params]);
   const clock = () => host.performance.now();
-  let offAuth = null;
+  let offAuth = null, disposed = null;
   const snapshot = s => {
     const effects = s?.metadata?.effects ?? [], known = registry?.snapshot?.() ?? [];
     const rows = effects.map(p => {
@@ -76,16 +76,18 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
     if (pending?.source === s) safe(() => pending.controller.abort());
     revision++; stamp = null;
   }
-  function dispose() {
-    if (dead) return; dead = true; discard(source);
+  function dispose(restartable = false) {
+    if (dead) return disposed; dead = true; discard(source);
     safe(() => trial?.dispose()); safe(() => pending?.controller.abort()); safe(() => registry?.dispose?.()); safe(() => loader?.dispose?.()); safe(() => personal?.dispose()); safe(() => writer?.dispose()); safe(() => offAuth?.());
     safe(() => host?.removeEventListener?.("pagehide", dispose));
     for (const row of profiles.values()) safe(() => row.collector.dispose()); profiles.clear(); bindings.clear(); safe(() => onDispose({ error }));
+    disposed = Promise.all([safe(() => loader?.whenDisposed?.()), safe(() => registry?.whenDisposed?.())]).then(() => { if (restartable === true && claimed) episodes.delete(host); });
+    return disposed;
   }
   function fail(reason) { if (dead) return; error = reason; dispose(); safe(() => onChange({ error, rows: [], effects: [], loading: false })); }
   const unavailable = { ok: false, sync() {}, changedChat() {}, reply() {}, detachChat() {}, attachChat() { return null; }, attachTrial() { return null; }, stopTrial() {}, trialSnapshot: () => ({ rows: [] }), snapshot: () => snapshot(null), dispose };
   if (!host || typeof host !== "object" || episodes.has(host) || !identity || typeof current !== "function" || typeof observe !== "function" || typeof auth?.onSessionEnd !== "function" || typeof auth?.sessionEnded !== "function") return unavailable;
-  episodes.add(host); // Claim before invoking current/auth callbacks: one attempt per Window episode.
+  episodes.add(host); claimed = true; // Claim before invoking current/auth callbacks: one attempt per Window episode.
   if (!alive()) { dispose(); return unavailable; }
   try {
     offAuth = auth.onSessionEnd(dispose);

package/dist/ui/shared/effect-chat-runtime.js

@@ -1,3 +1,4 @@
+import { chatEffectIdentity } from "./effect-display-metadata.js";
 /** #1629: one committed local Chat lease joins the reviewed host-only effect primitives. */
 import { createEffectRuntimeLoader } from "./effect-runtime-loader.js";
 import { createEffectRegistry } from "./effect-registry.js";
@@ -43,13 +44,7 @@ export function createEffectWriter(host, current) {
 }
 
 /** Frozen, server-rendered session identity only. A header-token/public/View load has no identity. */
-export function chatEffectIdentity(host) {
-  try {
-    const b = host.document.body.dataset, x = JSON.parse(host.document.documentElement.getAttribute("data-prefs") || "null");
-    if (b.mode !== "full" || b.tier === "guest" || b.publicLink === "1" || b.webTransport === "poll" || !["person", "operator"].includes(x?.ownerScope) || x.unreadable === true || typeof x.ownerEpoch !== "string" || !/^[a-f0-9]{16}$/.test(x.ownerEpoch)) return null;
-    return Object.freeze({ epoch: x.ownerEpoch, scope: x.ownerScope });
-  } catch { return null; }
-}
+export { chatEffectIdentity } from "./effect-display-metadata.js";
 /** Chat-only public/guest capability stays separate from personal preferences and management. */
 export function effectPlaybackIdentity(host) {
   try {

package/dist/ui/shared/effect-cursor.js

@@ -25,9 +25,10 @@ export function createEffectCursor({ window: host, current, readImage, onChange
   const unavailable = { ok: false, update() {}, snapshot: () => ({ status: "unavailable", id: null }), dispose() {} };
   if (!host?.document || owners.has(host) || ![current, readImage, onChange, host.getComputedStyle, host.Blob, host.URL?.createObjectURL, host.URL?.revokeObjectURL, host.AbortController, host.setTimeout, host.clearTimeout, host.performance?.now].every(x => typeof x === "function")) return unavailable;
   const token = {}; owners.set(host, token);
+  let finishDisposed; const disposed = new Promise(resolve => { finishDisposed = resolve; });
   const doc = host.document; let dead = false, previous = null, wanted = null, pending = null, active = null, blocked = null, generation = 0, checking = false, notifying = false, status = "off";
   const safe = fn => { try { return fn(); } catch { return null; } };
-  const release = () => { if (dead && !pending && owners.get(host) === token) owners.delete(host); };
+  const release = () => { if (dead && !pending) { if (owners.get(host) === token) owners.delete(host); finishDisposed(); } };
   function alive() {
     if (dead || checking) return false;
     checking = true; const value = safe(() => current() === true && host.document === doc); checking = false;
@@ -121,5 +122,5 @@ export function createEffectCursor({ window: host, current, readImage, onChange
     }
     start(); tell();
   }
-  return { ok: true, update, snapshot, dispose };
+  return { ok: true, update, snapshot, dispose, whenDisposed: () => disposed };
 }

package/dist/ui/shared/effect-display-metadata.js

@@ -0,0 +1,39 @@
+/** #1629: closed host display metadata. Neither this object nor its token grants a trial read. */
+const KEYS = ["v", "offer", "id", "title", "expiresAt"], ID = /^[0-9a-f]{32}$/;
+const FORBIDDEN = /(?!\u200d)[\p{Cc}\p{Cf}\p{Zl}\p{Zp}]/u;
+const VISIBLE = /[^\p{M}\p{C}\p{Z}\u115f\u1160\u3164\uffa0\u2800]/u;
+let graphemes = null;
+export function checkEffectTrialOffer(value) {
+  try {
+    if (!value || ![Object.prototype, null].includes(Object.getPrototypeOf(value))) return null;
+    const keys = Reflect.ownKeys(value);
+    if (keys.length !== KEYS.length || keys.some(k => typeof k !== "string" || !KEYS.includes(k))) return null;
+    const x = Object.create(null);
+    for (const key of KEYS) {
+      const d = Object.getOwnPropertyDescriptor(value, key);
+      if (!d || !("value" in d) || !d.enumerable) return null;
+      x[key] = d.value;
+    }
+    if (x.v !== 1 || typeof x.offer !== "string" || !ID.test(x.offer) || typeof x.id !== "string" || !ID.test(x.id)
+      || typeof x.title !== "string" || x.title.length > 400 || x.title.normalize("NFC") !== x.title || x.title.trim() !== x.title
+      || FORBIDDEN.test(x.title) || !VISIBLE.test(x.title) || !Number.isSafeInteger(x.expiresAt) || x.expiresAt < 0) return null;
+    graphemes ??= new Intl.Segmenter(undefined, { granularity: "grapheme" });
+    let count = 0; for (const _part of graphemes.segment(x.title)) if (++count > 40) return null;
+    if (count < 1) return null;
+    return Object.freeze({ v: 1, offer: x.offer, id: x.id, title: x.title, expiresAt: x.expiresAt });
+  } catch { return null; }
+}
+/** Role and sender are host fields, never inferred from a message's text. Start must separately authorize. */
+export function effectTrialMessage(message) {
+  if (!message || message.role !== "status" || message.sender !== "agend" || typeof message.instance !== "string"
+    || message.instance.length < 1 || message.instance.length > 128) return null;
+  return checkEffectTrialOffer(message.effectTrial);
+}
+
+export function chatEffectIdentity(host) {
+  try {
+    const b = host.document.body.dataset, x = JSON.parse(host.document.documentElement.getAttribute("data-prefs") || "null");
+    if (b.mode !== "full" || b.tier === "guest" || b.publicLink === "1" || b.webTransport === "poll" || !["person", "operator"].includes(x?.ownerScope) || x.unreadable === true || typeof x.ownerEpoch !== "string" || !/^[a-f0-9]{16}$/.test(x.ownerEpoch)) return null;
+    return Object.freeze({ epoch: x.ownerEpoch, scope: x.ownerScope });
+  } catch { return null; }
+}

package/dist/ui/shared/effect-registry.js

@@ -42,6 +42,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
   try { if (!host?.document || !host.document.body || registries.has(host) || typeof load !== "function" || typeof stockSnapshot !== "function" || typeof onChange !== "function" || typeof onProfile !== "function" || typeof onMount !== "function" || typeof onRetire !== "function" || typeof clock !== "function" || !safety || ["allowed", "begin", "finish", "pause", "resume"].some(k => typeof safety[k] !== "function") || ["requestAnimationFrame", "cancelAnimationFrame", "setTimeout", "clearTimeout", "MutationObserver", "ResizeObserver", "AbortController"].some(k => typeof host[k] !== "function")) return { ok: false, reason: "registry_unsupported" }; } catch { return { ok: false, reason: "registry_unsupported" }; }
   let dead = false, blocked = null, revision = 0, last = null, lastView = null, frameSerial = 0, context = null, descriptors = [], raf = null, timer = null;
   const slots = new Map(), loads = new Set(), paused = new Map(), offs = [], observed = new Set(), failures = new Map(), results = new Map();
+  let finishDisposed; const disposed = new Promise(resolve => { finishDisposed = resolve; });
   let readingStock = false, stockFailure = "stock_evidence_invalid", warned = null;
   let root, geometry, observer, resize, longTasks = null, longTasksSupported = false;
   const time = () => {
@@ -342,7 +343,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       }).catch(() => { if (current(s)) retire(s, "resource_unavailable"); }).finally(() => {
         if (request.timer !== null) host.clearTimeout(request.timer);
         loads.delete(request); if (s.request === request) s.request = null;
-        if (!dead) reconcile(); else if (loads.size === 0 && registries.get(host) === api) registries.delete(host);
+        if (!dead) reconcile(); else if (loads.size === 0) { if (registries.get(host) === api) registries.delete(host); finishDisposed(); }
       });
     }
     schedule(); tell();
@@ -530,11 +531,12 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       }
       return sent;
     },
+    whenDisposed: () => disposed,
     dispose() {
       if (dead) return; dead = true; revision++; stopAll("disposed");
       if (raf !== null) host.cancelAnimationFrame(raf); if (timer !== null) host.clearTimeout(timer);
       observer.disconnect(); resize.disconnect(); longTasks?.disconnect(); for (const off of offs) off();
-      geometry.dispose(); root.remove(); observed.clear(); if (loads.size === 0 && registries.get(host) === api) registries.delete(host);
+      geometry.dispose(); root.remove(); observed.clear(); if (loads.size === 0) { if (registries.get(host) === api) registries.delete(host); finishDisposed(); }
     },
   };
   // Read-only host geometry seam; no selector guessing among poster and live roots.

package/dist/ui/shared/effect-runtime-loader.js

@@ -143,7 +143,8 @@ export function createEffectRuntimeLoader({ window: host, ownerEpoch, current, o
   if (!host || typeof host !== "object" || loaders.has(host) || typeof host.fetch !== "function" || typeof host.AbortController !== "function" || typeof host.setTimeout !== "function" || typeof host.clearTimeout !== "function" || typeof ownerEpoch !== "string" || !EPOCH.test(ownerEpoch) || typeof current !== "function" || typeof onRevoke !== "function") return { ok: false };
   const reservation = {}; loaders.set(host, reservation);
   let dead = false, revoked = false, previous = null; const pending = new Set();
-  const releaseWindow = () => { if (dead && pending.size === 0 && loaders.get(host) === reservation) loaders.delete(host); };
+  let finishDisposed; const disposed = new Promise(resolve => { finishDisposed = resolve; });
+  const releaseWindow = () => { if (dead && pending.size === 0) { if (loaders.get(host) === reservation) loaders.delete(host); finishDisposed(); } };
   // Terminal state is latched before callbacks. Abort releases logical callers, never physical reservations.
   function revoke(reason) {
     if (dead || revoked) return;
@@ -215,6 +216,7 @@ export function createEffectRuntimeLoader({ window: host, ownerEpoch, current, o
   }
   const ownerRead = (signal, settled = false) => run("placements", `/ui/effects/owner?ownerEpoch=${ownerEpoch}`, checkEffectOwnerSlots, signal, settled);
   return { ok: true,
+    whenDisposed: () => disposed,
     owner(signal) { return ownerRead(signal); },
     placements(instance, signal) { return placementRead(instance, signal); },
     resource(input, signal) { return resourceRead(input, signal); },

package/dist/ui/shared/effect-stock-trust.js

@@ -11,7 +11,7 @@ const SPECS = [
   ["confirmation", ".shell > .pending-stack, .shell .p-settings > .panel-body > .col > .pending-stack.inline"], ["preview", ".shell .chat-split > .pv-panel, .shell .chat-split > .pv-divider"],
   ["preview-menu", ".shell .thread details.pv-menu"], ["palette", ".shell .dock .cmd-palette"],
   ["drop", ".shell .p-chat > .drop-overlay"],
-  ["thread-control", ".shell .chat-main > .amb-note, .shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
+  ["thread-control", ".shell .chat-main > .amb-note, .shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .msg > div.msg-actions, .shell .thread .msg > button.msg-quote, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
   ["link", ".shell .thread .md a, .shell .thread .st-text > a.st-link, .shell .dock .prompts .txt > a.st-link"], ["attachment", ".shell .thread .atts"], ["media", ".shell .thread .att-media"],
   ["panel-navigation", ".shell .p-fleet > .seg, .shell .p-settings > .seg"],
   ["panel-content", ".shell .p-fleet > .panel-body, .shell .p-needs > .panel-body, .shell .p-settings > .panel-body, .shell .p-log > .panel-body, .shell .p-details > .panel-body, .shell .p-view > .panel-body, .shell .p-view > .v-term, .shell .p-view > .v-id, .shell .p-view > .v-card"],

package/dist/ui/shared/feature-flags.js

@@ -0,0 +1,127 @@
+// Product feature policy only: this module imports no experimental runtime.
+import { appStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
+import { ownerEffectsChosen, onOwnerEffectsChanged } from "./app-prefs.js";
+import { register } from "./app-i18n.js";
+import { html, useEffect, useState } from "./app-html.js";
+register("cwControls", { en: { title: "Effects" }, "zh-TW": { title: "效果" } });
+export function canvasWorkerEnabled() { return appStore.get().canvasWorker === true; }
+export function onCanvasWorkerChange(fn) {
+  let value = canvasWorkerEnabled();
+  return appStore.subscribe(() => { const next = canvasWorkerEnabled(); if (next !== value) { value = next; fn(next); } });
+}
+export function useCanvasWorker() {
+  const [value, setValue] = useState(canvasWorkerEnabled);
+  useEffect(() => { setValue(canvasWorkerEnabled()); return onCanvasWorkerChange(setValue); }, []);
+  return value;
+}
+// Never evaluate the optional module before admission. An obsolete import may finish, but cannot mount.
+export function experimentalComponent(load, select) {
+  return function ExperimentalComponent(props) {
+    const enabled = useCanvasWorker(), [component, setComponent] = useState(null);
+    useEffect(() => {
+      let current = true;
+      if (enabled) load().then(module => { if (current && canvasWorkerEnabled()) setComponent(() => select(module)); }, () => {});
+      return () => { current = false; };
+    }, [enabled]);
+    return enabled && component ? html`<${component} ...${props} />` : null;
+  };
+}
+
+/** effect_chat_v of a chat with no placements: sha256(JSON.stringify([])), first 32 hex (fleet-manager's status row). */
+export const EMPTY_CHAT_EFFECTS = "4f53cda18c2baa0c0354bb5f9a3ecbe5";
+
+let mod = null, waking = null, chatStore = null, started = false, generation = 0, awakeGeneration = -1, retiring = Promise.resolve();
+const awakeListeners = new Set();
+
+/** Whether `name`'s chat has Canvas Worker placements (as the status rows say). */
+export function chatHasEffects(name, app = appStore.get()) {
+  const v = name ? app.instances?.find(i => i.name === name)?.effect_chat_v : undefined;
+  return canvasWorkerEnabled() && typeof v === "string" && /^[a-f0-9]{32}$/.test(v) && v !== EMPTY_CHAT_EFFECTS;
+}
+
+/** The running effects owner, or null while dormant (or when it could not start: as getAppEffects always was). */
+export function getAppEffects(host) { return canvasWorkerEnabled() && mod ? mod.getAppEffects(host) : null; }
+
+/** Whether the runtime has been asked to start on this page. */
+export function effectsAwake() { return waking !== null; }
+/** Whether its module has loaded (started, or found it could not: getAppEffects() then says which). */
+export function effectsLoaded() { return mod !== null && awakeGeneration === generation; }
+
+/** Follow every completed runtime episode, including a replacement after an experimental off/on. */
+export function onEffectsAwake(fn) {
+  if (typeof fn !== "function") return () => {};
+  awakeListeners.add(fn);
+  if (effectsLoaded()) { try { fn(); } catch { /* a listener's error is its own */ } }
+  return () => awakeListeners.delete(fn);
+}
+
+/** Load lazily; each explicitly enabled episode owns its startup and cancellation. */
+export function wakeEffects() {
+  if (!canvasWorkerEnabled()) return Promise.resolve(null);
+  if (waking) return waking;
+  const episode = generation;
+  waking = (mod ? Promise.resolve(mod) : import("/ui/js/app-effects.js")).then(async m => {
+    mod = m;
+    await retiring;
+    if (episode !== generation || !canvasWorkerEnabled()) return null;
+    const owner = chatStore ? m.startAppEffects({ store: chatStore }) : null;
+    awakeGeneration = episode;
+    for (const fn of [...awakeListeners]) { try { fn(); } catch { /* the rest still hear */ } }
+    return owner;
+  }, () => null);
+  return waking;
+}
+
+/** Wake when the open chat has placements or the person has a personal effect. */
+function check() {
+  if (!canvasWorkerEnabled()) {
+    generation++;
+    const owner = mod?.getAppEffects();
+    if (owner) retiring = Promise.resolve(owner.dispose?.(true));
+    waking = null;
+    return;
+  }
+  if (waking) return;
+  const route = navStore.get().route;
+  if ((route?.panel === "chat" && chatHasEffects(route.instance)) || ownerEffectsChosen()) void wakeEffects();
+}
+
+/** Boot (once per page, with the Chat store the runtime binds to). Starts nothing but the watch. */
+export function startEffectsWaker({ store }) {
+  chatStore = store;
+  if (started) return;
+  started = true;
+  appStore.subscribe(check); navStore.subscribe(check); onOwnerEffectsChanged(check);
+  check();
+}
+
+// Full Canvas Worker metadata stays in the experimental graph, never in ordinary chat boot.
+let metadata = null, metadataPending = null;
+const metadataListeners = new Set();
+export function onCanvasMetadataChange(fn) { metadataListeners.add(fn); return () => metadataListeners.delete(fn); }
+export function loadCanvasWorkerMetadata() {
+  if (!canvasWorkerEnabled()) return Promise.resolve(null);
+  if (metadata) return Promise.resolve(metadata);
+  if (metadataPending?.episode === generation) return metadataPending.promise;
+  const episode = generation, op = { episode, promise: null };
+  metadataPending = op;
+  op.promise = import("./effect-display-metadata.js").then(value => {
+    if (episode !== generation || !canvasWorkerEnabled()) return null;
+    metadata = value;
+    for (const fn of [...metadataListeners]) { try { fn(); } catch { /* independent viewers */ } }
+    appStore.set({ canvasMetadataEpoch: episode });
+    return metadata;
+  }, () => null).finally(() => { if (metadataPending === op) metadataPending = null; });
+  return op.promise;
+}
+export function readCanvasTrialMessage(message) {
+  if (!canvasWorkerEnabled()) return null;
+  if (!metadata) { void loadCanvasWorkerMetadata(); return undefined; }
+  return metadata.effectTrialMessage(message);
+}
+export function canvasWorkerMenuAvailable(host) {
+  if (!canvasWorkerEnabled()) return false;
+  if (!metadata) { void loadCanvasWorkerMetadata(); return false; }
+  return metadata.chatEffectIdentity(host) !== null;
+}

package/dist/ui/shared/identity-color.js

@@ -196,6 +196,8 @@ function ColorDialog({ name, it, onClose }) {
   }, [name]);
   // The preview: the instance as it would be drawn with the choice here.
   const preview = identityOf({ ...(it || {}), color: { ...((it && it.color) || {}), person: color || undefined }, color_show: { ...((it && it.color_show) || {}), person: places || undefined } }, { off: false });
+  // #2342: a swatch (or "no pick") is a choice, not text: it starts the hex field's undo history afresh (undoing the
+  // text back to a typed colour would leave the box and the chosen colour apart — Save would send the other one).
   const pick = (c) => { setColor(c); setHex(c && HEX.test(c) ? c : ""); setError(""); };
   const togglePlace = (p) => {
     const base = places || preview.show;
@@ -211,7 +213,8 @@ function ColorDialog({ name, it, onClose }) {
       onClose();
     } catch (err) { setError(t("color.failed", (err && err.message) || "network")); setBusy(false); }
   }
-  const onHex = (v) => { setHex(v); const c = /^#[0-9a-fA-F]{6}$/.test(v) ? v.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
+  // The text as typed (#2342: trimming it in the box would rewrite it, losing its undo); spaces around it are ignored.
+  const onHex = (v) => { setHex(v); const w = v.trim(), c = /^#[0-9a-fA-F]{6}$/.test(w) ? w.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
   const off = colorsOff();
   return html`<${Dialog} title=${t("color.title", name)} onClose=${onClose} busy=${busy}
       actions=${html`<button type="button" class="btn" disabled=${busy || !loaded} onClick=${() => save({ color: null, color_show: null })}>${t("color.reset")}</button>
@@ -226,8 +229,8 @@ function ColorDialog({ name, it, onClose }) {
         ref=${(el) => { if (el && el.style) { el.style.setProperty("--sw-light", p.light); el.style.setProperty("--sw-dark", p.dark); } }}
         onClick=${() => pick(`preset:${p.id}`)}></button>`)}
       <label class="idc-custom">${t("color.custom")}
-        <input type="color" value=${HEX.test(hex) ? hex : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
-        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value.trim())} aria-label=${t("color.hex")} /></label>
+        <input type="color" value=${HEX.test(hex.trim()) ? hex.trim() : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
+        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.hex")} /></label>
       <button type="button" class="btn btn-sm" disabled=${!color} onClick=${() => pick(null)}>${t("color.noPick")}</button>
     </fieldset>
     <fieldset class="idc-places"><legend>${t("color.places")}</legend>

package/dist/ui/shared/instance-nav.js

@@ -9,6 +9,7 @@
 // Public (/assets/): an anonymous View reader gets the same list, fed by View's roster read instead of status frames.
 import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
+import { recordEdit } from "./text-undo.js";
 import { appStore, createStore, guestPage, useStore } from "./app-store.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
@@ -648,9 +649,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       <label class="v-filter-box"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("filterPh")}</span>
         <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck=${false} placeholder=${tn("filterPh")} value=${f.q}
           onInput=${(e) => setNavFilter({ q: e.target.value })}
-          onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); setNavFilter({ q: "" }); } }} />
+          onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); recordEdit(e.target); setNavFilter({ q: "" }); } }} />
         ${f.q ? html`<button type="button" class="icon-btn v-filter-clear" aria-label=${tn("filterClear")} title=${tn("filterClear")}
-          onClick=${() => { setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
+          onClick=${() => { recordEdit(filterRef.current); setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
       </label>
       <div class="nav-facets">
         <div class="nav-facet-groups">

package/dist/ui/shared/text-undo.js

@@ -0,0 +1,210 @@
+// #2342: undo and redo in every text field — one history per field, kept here instead of the browser's.
+//
+// The browser's own undo is one stack for the whole page (Chromium and WebKit alike): Ctrl+Z in one box undoes the
+// last edit in whichever box had it, and any script write to a field's value (a completion, a clear, a re-render
+// that differs from the box) wipes the stack. So the keys are taken here, but only in a text field:
+// - undo: Ctrl+Z (⌘Z on a Mac); redo: Ctrl+Shift+Z or Ctrl+Y (⌘⇧Z on a Mac, where Ctrl+Y is not redo). Anywhere else
+//   (a button, the page, a select) nothing is taken; a key with Alt, or mid-IME-composition, is left alone too.
+// - a field's steps are recorded from its edits (beforeinput, input): typing is grouped into one step until a pause
+//   (UNDO.PAUSE_MS), a space, a different kind of edit (typing ↔ deleting), a paste, a line break or the caret moving
+//   elsewhere; an IME composition is one step, recorded when it ends.
+// - the browser's own Undo and Redo commands (its Edit menu, a context menu: a trusted beforeinput historyUndo /
+//   historyRedo) go through the same history: cancelled and done here. Where a browser cannot cancel them (or a script
+//   runs execCommand("undo"), with no beforeinput at all), its own undo goes ahead and what it leaves resets the field's
+//   history (never a step that would undo the undo).
+// - a script's change to a field's value the person should be able to undo (a completion, a pick, putting text back)
+//   calls recordEdit(field) first: the change becomes a step. Any other change (a clear after send, a reload after
+//   save) resets the field's history, as the browser's own undo does — a sent message is never undone back into the box.
+// - undo and redo write the value and the caret back and dispatch `input`, so the page's state (Preact) follows.
+// - password fields are left to the browser: no secret is kept here.
+
+import { useState } from "./app-html.js";
+
+export const UNDO = { PAUSE_MS: 1000, MAX_STEPS: 100 };
+
+const TEXT_TYPES = new Set(["text", "search", "url", "email", "tel", "number", ""]);
+/** A field this keeps a history for: a textarea, or a text-like input (never a password) that is not read-only or disabled. */
+export function isTextField(el) {
+  if (!el || el.readOnly || el.disabled) return false;
+  const tag = (el.tagName || "").toLowerCase();
+  if (tag === "textarea") return true;
+  return tag === "input" && TEXT_TYPES.has((el.getAttribute && el.getAttribute("type") || el.type || "").toLowerCase());
+}
+
+const histories = new WeakMap();
+/** The value and the caret of `el`. A number input has no selection: its caret is null. */
+function snap(el) {
+  let s = null, e = null;
+  try { s = el.selectionStart; e = el.selectionEnd; } catch { /* a number input */ }
+  return { v: String(el.value ?? ""), s: s ?? null, e: e ?? null };
+}
+function historyFor(el) {
+  let h = histories.get(el);
+  if (!h) { h = { undo: [], redo: [], last: snap(el), kind: null, at: 0, marked: null, composing: false }; histories.set(el, h); }
+  return h;
+}
+/**
+ * Bring the history up to the field's value: a change made by a script since the last edit is a step when recordEdit
+ * marked it, and otherwise resets the history (what the browser does too).
+ */
+function sync(el, h) {
+  const now = String(el.value ?? "");
+  if (now === h.last.v) { h.marked = null; return; }
+  if (h.marked) { push(h.undo, h.marked); h.redo = []; }
+  else { h.undo = []; h.redo = []; }
+  h.marked = null;
+  h.last = snap(el);
+  h.kind = null;
+}
+function push(list, s) {
+  list.push(s);
+  if (list.length > UNDO.MAX_STEPS) list.shift();
+}
+
+/** The kind of an edit, for grouping: consecutive typing (or deleting) of one kind is one step. */
+function kindOf(e) {
+  const t = e.inputType || "";
+  if (t === "insertText") return e.data && /\s/.test(e.data) ? "space" : "type";
+  if (t === "deleteContentBackward" || t === "deleteContentForward") return "delete";
+  return "other";                                   // a paste, a drop, a cut, a line break, a word delete: its own step
+}
+
+/** Called before a script changes `el`'s value in a way the person may undo: the value now is the step to go back to. */
+export function recordEdit(el) {
+  if (!isTextField(el)) return;
+  const h = historyFor(el);
+  sync(el, h);
+  h.marked = snap(el);
+  h.kind = null;
+}
+
+/** The history kept for `el` (tests). */
+export function historyOf(el) {
+  const h = histories.get(el);
+  return h ? { undo: h.undo.map((s) => s.v), redo: h.redo.map((s) => s.v), last: h.last.v } : null;
+}
+
+/** Put snapshot `s` into `el` and tell the page (an `input` event, as an edit would). */
+function apply(el, s, type, win) {
+  el.value = s.v;
+  if (s.s != null) { try { el.setSelectionRange(s.s, s.e ?? s.s); } catch { /* a number input */ } }
+  const Ev = win && typeof win.InputEvent === "function" ? win.InputEvent : win && win.Event;
+  if (Ev) el.dispatchEvent(new Ev("input", { bubbles: true, ...(Ev === win.InputEvent ? { inputType: type } : {}) }));
+}
+
+/**
+ * Undo (or redo) on `el`. False when there is nothing to do.
+ */
+export function step(el, redo, win = typeof window !== "undefined" ? window : null) {
+  if (!isTextField(el)) return false;
+  const h = historyFor(el);
+  sync(el, h);
+  const from = redo ? h.redo : h.undo, to = redo ? h.undo : h.redo;
+  if (!from.length) return false;
+  to.push(h.last);
+  h.last = from.pop();
+  h.kind = null;
+  h.applying = true;
+  try { apply(el, h.last, redo ? "historyRedo" : "historyUndo", win); } finally { h.applying = false; }
+  h.last = snap(el);
+  return true;
+}
+
+/** Which history key `e` is, or null: "undo", "redo". `mac`: ⌘ is the modifier and Ctrl+Y is not redo. */
+export function historyKey(e, mac) {
+  if (e.altKey || e.isComposing || e.keyCode === 229) return null;
+  const mod = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+  if (!mod) return null;
+  const k = (e.key || "").toLowerCase();
+  if (k === "z") return e.shiftKey ? "redo" : "undo";
+  if (k === "y" && !e.shiftKey && !mac) return "redo";
+  return null;
+}
+
+/**
+ * Keep a history for every text field under `doc` and take the undo/redo keys in them. Returns an uninstall function.
+ */
+export function installTextUndo({ doc = document, win = typeof window !== "undefined" ? window : null, mac = false } = {}) {
+  const field = (e) => (isTextField(e.target) ? e.target : null);
+  const onBefore = (e) => {
+    const el = field(e);
+    // WebKit commits a composition after compositionend (deleteCompositionText, insertFromComposition): its step is
+    // the one compositionstart began.
+    if (!el || e.isComposing || /Composition/.test(e.inputType || "")) return;
+    const h = historyFor(el);
+    if (h.applying || h.composing) return;          // a browser that does not flag its composition events
+    if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+      if (e.cancelable) { e.preventDefault(); step(el, e.inputType === "historyRedo", win); }
+      else h.native = true;
+      return;
+    }
+    sync(el, h);
+    const kind = kindOf(e), now = Date.now(), at = snap(el);
+    // The same run of typing (or deleting) goes on: one step. A space ends a word's step (the next word is a new one).
+    // Anything else starts a new step from the value now.
+    const same = kind === "space" ? h.kind === "type" : kind !== "other" && kind === h.kind;
+    const goesOn = same && now - h.at < UNDO.PAUSE_MS && at.s === h.last.s && at.e === h.last.e;
+    if (!goesOn) { push(h.undo, at); h.redo = []; }
+    h.kind = kind;
+    h.at = now;
+  };
+  const onInput = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    if (h.applying) return;
+    // The browser's own undo or redo went ahead (one it could not cancel, or a script's execCommand("undo"), which has no
+    // beforeinput): what it left is a change of its own — the history starts afresh.
+    if (h.native || e.inputType === "historyUndo" || e.inputType === "historyRedo") { h.native = false; h.undo = []; h.redo = []; h.kind = null; }
+    h.last = snap(el);                              // mid-composition too: the value the next edit starts from
+  };
+  const onCompStart = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    sync(el, h);
+    push(h.undo, snap(el)); h.redo = [];
+    h.composing = true; h.kind = null;
+  };
+  const onCompEnd = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    h.composing = false;
+    h.last = snap(el);                              // WebKit's last input comes after compositionend: onInput updates it again
+  };
+  const onKey = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const which = historyKey(e, mac);
+    if (!which || historyFor(el).composing) return;
+    e.preventDefault();                             // never the browser's page-wide stack, even when this field has no step
+    step(el, which === "redo", win);
+  };
+  doc.addEventListener("beforeinput", onBefore, true);
+  doc.addEventListener("input", onInput, true);
+  doc.addEventListener("compositionstart", onCompStart, true);
+  doc.addEventListener("compositionend", onCompEnd, true);
+  doc.addEventListener("keydown", onKey, true);
+  return () => {
+    doc.removeEventListener("beforeinput", onBefore, true);
+    doc.removeEventListener("input", onInput, true);
+    doc.removeEventListener("compositionstart", onCompStart, true);
+    doc.removeEventListener("compositionend", onCompEnd, true);
+    doc.removeEventListener("keydown", onKey, true);
+  };
+}
+
+const trimmed = (v) => v.trim();
+/**
+ * A field whose owner keeps its value normalized (trimmed, or a number): the box shows the text as typed and the owner
+ * gets `norm(text)`. Binding the box to the normalized value would rewrite it while the person types (a space vanishes,
+ * "1.50" turns into "1.5") and lose the field's undo history. When the owner's value becomes something the text does not
+ * normalize to (a clear, a load), the box shows `show(value)`.
+ * Returns [text for the box, onText(typed) → the normalized value].
+ */
+export function useTypedText(value, norm = trimmed, show = (v) => (v == null ? "" : String(v))) {
+  const [raw, setRaw] = useState(null);
+  const text = raw !== null && Object.is(norm(raw), value) ? raw : show(value);
+  return [text, (typed) => { setRaw(typed); return norm(typed); }];
+}

package/dist/ui/shared/ui-dialog.js

@@ -1,6 +1,7 @@
 // #1408 §7: one dialog for the whole app — the native <dialog> opened with showModal(), so the browser traps focus,
 // makes the rest inert and closes it on Esc. Focus goes back to whatever opened it. On a phone it is a bottom sheet
-// with its own × (app.css). Text and buttons only; no style attribute (#1300).
+// with its own × (app.css). Text and buttons only; no style attribute (#1300). `drawer`: on a desk it comes in from the
+// right edge at full height, the page still in view beside it (the task board's card); a phone keeps the bottom sheet.
 import { html, useEffect, useLayoutEffect, useRef } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t } from "./app-i18n.js";
@@ -9,7 +10,7 @@ import { t } from "./app-i18n.js";
  * <${Dialog} title="Create task" onClose=${…} actions=${html`…`}>…body…</${Dialog}>
  * Rendered = open; the parent unmounts it to close. `busy` keeps Esc and the backdrop from closing it mid-request.
  */
-export function Dialog({ title, onClose, actions, children, busy = false, wide = false, label }) {
+export function Dialog({ title, onClose, actions, children, busy = false, wide = false, drawer = false, label }) {
   const ref = useRef(null);
   const opener = useRef(null);
   const busyRef = useRef(busy);
@@ -35,7 +36,7 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     d.addEventListener("click", onClick);
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
   }, [onClose]);
-  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}`} aria-label=${label || title}>
+  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}${drawer ? " dlg-drawer" : ""}`} aria-label=${label || title}>
     <div class="dlg-box">
       <div class="dlg-head"><h2 class="dlg-title">${title}</h2>
         <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${() => { if (!busyRef.current) onClose(); }}><${Icon} name="close" /></button></div>