@songsid/agend 2.3.0-beta.11 → 2.3.0-beta.13

package/dist/ui/panel-chat.js

@@ -8,8 +8,8 @@
 // that apply to its state are offered (#1408 rough edges 4 and 7).
 import { html, useCallback, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { lang, t } from "/assets/app-i18n.js";
-import { appStore, guestPage, useStore } from "/assets/app-store.js";
-import { AuthorizeChip } from "/assets/web-authorize.js";
+import { appStore, createStore, guestPage, useStore } from "/assets/app-store.js";
+import { ComposerAuth } from "/assets/web-authorize.js";
 import { useLease } from "/assets/app-ctx.js";
 import { modelText, namesOf, namesStore, navStore as instanceNavStore } from "/assets/instance-nav.js";
 import { PanelHeader, onPanelKey, setTitle, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
@@ -29,23 +29,34 @@ import { colorMenuItem } from "/assets/identity-color.js";
 import { IdentityCard, useCard } from "/assets/identity-card.js";
 import { AgentWidget, instanceBinds, widgetFor } from "/assets/agent-widget.js";
 
-// #1629 r4 §1: the identity card folded into the chat's header — folded by default; open or not is this device's choice.
+// #1629 r4 §1: the identity card under the chat's header — hidden by default; shown or not is this device's choice.
+// #2217 (the user, 2026-10-19): no row of its own. Shown, its banner sits right under the header with Hide card on it, and its
+// picture and bio can be folded away (the banner stays) — this device's choice too, kept the same way. Hidden, a card
+// button in the header brings it back (a guest's header too: it has no ⋯ menu).
 const CHAT_CARD_KEY = "agend_chat_card";
-const chatCardOpen = () => { try { return localStorage.getItem(CHAT_CARD_KEY) === "open"; } catch { return false; } };
+const CHAT_CARD_ROW_KEY = "agend_chat_card_row";
+const readKey = (k, v) => { try { return localStorage.getItem(k) === v; } catch { return false; } };
+const writeKey = (k, v) => { try { if (v) localStorage.setItem(k, v); else localStorage.removeItem(k); } catch { /* this page only */ } };
+/** Shared by the header's Show card and the card itself, so the two never disagree. */
+export const chatCardPrefs = createStore({ open: readKey(CHAT_CARD_KEY, "open"), rowHidden: readKey(CHAT_CARD_ROW_KEY, "hidden") });
+export const setChatCardOpen = (open) => { writeKey(CHAT_CARD_KEY, open ? "open" : null); chatCardPrefs.set((s) => ({ ...s, open })); };
+export const setChatCardRowHidden = (rowHidden) => { writeKey(CHAT_CARD_ROW_KEY, rowHidden ? "hidden" : null); chatCardPrefs.set((s) => ({ ...s, rowHidden })); };
 function ChatCard({ name, card }) {
-  const [open, setOpen] = useState(chatCardOpen);
-  if (!card) return null;
-  const toggle = () => { const next = !open; setOpen(next); try { if (next) localStorage.setItem(CHAT_CARD_KEY, "open"); else localStorage.removeItem(CHAT_CARD_KEY); } catch { /* this page only */ } };
-  return html`<div data-trust="card" class=${`chat-card${open ? " open" : ""}`}>
-    <button type="button" class="chat-card-toggle" aria-expanded=${open ? "true" : "false"} onClick=${toggle}>
-      <${Icon} name="chevron" size=${14} cls=${open ? "caret" : "caret flipped"} /><span>${t(open ? "card.hide" : "card.show")}</span>
-      ${!open && card.tagline ? html`<span class="chat-card-peek">${card.tagline.text}</span>` : null}
-    </button>
-    ${open ? html`<${IdentityCard} name=${name} card=${card} compact=${true} />` : null}
+  const prefs = useStore(chatCardPrefs);
+  if (!card || !prefs.open) return null;
+  return html`<div data-trust="card" class="chat-card open">
+    <${IdentityCard} name=${name} card=${card} compact=${true} onHide=${() => setChatCardOpen(false)}
+      rowHidden=${prefs.rowHidden} onToggleRow=${() => setChatCardRowHidden(!prefs.rowHidden)} />
   </div>`;
 }
+/** The header's way back to a hidden card. */
+function ShowCardButton({ card }) {
+  const prefs = useStore(chatCardPrefs);
+  if (!card || prefs.open) return null;
+  return html`<button type="button" class="icon-btn chat-card-show" aria-label=${t("card.show")} title=${t("card.show")} onClick=${() => setChatCardOpen(true)}><${Icon} name="idcard" /></button>`;
+}
 import "./chat-strings.js";
-import { confirmedWrite } from "./settings-confirm.js";
+import { confirmedWrite, selfConfirmed } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
 import { createThread, msgKey } from "./chat-thread.js";
 import { createEmojiIndex } from "./chat-emojis.js";
@@ -59,7 +70,7 @@ import { ChatEffectPosters } from "/ui/js/chat-effect-posters.js";
 import { ChatEffects, chatEffectsMenuAvailable } from "./chat-effects.js";
 import { setFollowsReducedMotion } from "/assets/fx-motion.js";
 import { AmbientMotionNote, ChatAmbient, ambientMenuItems } from "./chat-ambient.js";
-import { startAppEffects, getAppEffects } from "./app-effects.js";
+import { startEffectsWaker, getAppEffects, wakeEffects, effectsLoaded, onEffectsAwake, chatHasEffects } from "./effects-waker.js";
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
@@ -119,8 +130,9 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   }
   // #1604: the preview opt-in and Tour live in Settings → This device now (and on each preview card's menu).
   installTour();
-  // #2118: viewing current in-scope Chat effects needs no management or personal-slot authority.
-  startAppEffects({ store });
+  // #2118: viewing current in-scope Chat effects needs no management or personal-slot authority. #2193: the runtime
+  // itself loads only when there is something to play (effects-waker.js).
+  startEffectsWaker({ store });
   return store;
 }
 
@@ -238,7 +250,12 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   }, [themeKey]);
   useEffect(() => { wrapListeners.add(setWrap); return () => wrapListeners.delete(setWrap); }, []);
   // First visit to this instance's chat on this page: its history (a navigation — it counts as use). Back again: nothing.
-  useEffect(() => { store.openHistory(name, lease); }, [name]);
+  // #2188: left before it answered (passing through on the way to another chat) — the read is aborted.
+  useEffect(() => {
+    const ac = typeof AbortController === "function" ? new AbortController() : null;
+    store.openHistory(name, lease, ac?.signal);
+    return () => ac?.abort();
+  }, [name]);
   useEffect(() => { try { localStorage.setItem("agend_last_instance", name); } catch { /* none */ } }, [name]);
   // Files dragged over the chat show where they go; a drop attaches them (counted, so moving over messages does not flicker).
   useEffect(() => {
@@ -271,6 +288,8 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     else if (r && r.held) toast(r.message);
     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 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)) },
@@ -296,7 +315,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", modelText(inst))} aria-label=${t("chat.chipModel", modelText(inst))} onClick=${() => pick("model")}>${modelText(inst)}</button>` : null}
     ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} ref=${view}>
-    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? null : html`<${InstanceSwitch} name=${name} current="chat" />`} notice=${html`<${ChatEffects} name=${name} lease=${lease} element=${effectSurface} store=${store} open=${dialog === "effects"} onPlayback=${publishCanvasPlayback} onClose=${() => setDialog(null)} />`}><${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
+    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? null : html`<${InstanceSwitch} name=${name} current="chat" />`} notice=${html`<${ChatEffects} name=${name} lease=${lease} element=${effectSurface} store=${store} open=${dialog === "effects"} onPlayback=${publishCanvasPlayback} onClose=${() => setDialog(null)} active=${fxHere} />`}>${fxHere ? html`<${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} />` : null}<${ShowCardButton} card=${card} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
     <${ChatCard} key=${name} name=${name} card=${card} />
     <${AgentWidget} slot="chat_header" widget=${widgetFor(name, "chat_header")} binds=${instanceBinds(inst, exec, awaiting)} />
     <div class="chat-split" ref=${split}>
@@ -332,6 +351,15 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
 export const THREAD_KEEP = 12;
 export const THREAD_KEEP_NARROW = 6;
 export const THREAD_KEEP_NODES = 2400;
+/**
+ * #2188: a chat shown for less than this, on the way to another (clicking down the sidebar), is not kept: it is let go
+ * as it leaves, so passing through chats never evicts the ones in use. One that was already kept stays kept.
+ */
+export const THREAD_PASS_MS = 1000;
+const monotonic = () => (typeof performance === "object" && typeof performance.now === "function" ? performance.now() : Date.now());
+let now = monotonic;
+/** Tests only: the clock THREAD_PASS_MS is measured on (null: the page's monotonic clock). */
+export function setThreadClock(fn) { now = typeof fn === "function" ? fn : monotonic; }
 /**
  * The kept threads to let go, in order. `kept`: [name, drawn messages], least recently shown first; `current`: the
  * one on screen (never let go).
@@ -371,7 +399,8 @@ function threadEntry(name, doc) {
   const thread = createThread(list, doc.createElement("div"), {
     t, tf: t, isUser: (x) => store.isUser(x, name), onJump: (j) => e.sink?.setJump(j), onEmpty: (v) => e.sink?.setEmpty(v),
     setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
-    effectTrialStatus: x => getAppEffects()?.trialStatus(x) ?? "localAdmin",
+    // #2193: an offer shown while the effects runtime sleeps wakes it; until it answers, the offer is being checked.
+    effectTrialStatus: x => { const fx = getAppEffects(); if (fx) return fx.trialStatus(x); if (!effectsLoaded()) { void wakeEffects(); return "checking"; } return "localAdmin"; },
     effectTrialFailure: x => getAppEffects()?.trialFailure(x),
     fixEffectTrial: (x, reason) => {
       if (reason === "reducedMotion") setFollowsReducedMotion(false);
@@ -409,7 +438,12 @@ function follow(name, thread) {
     else if (kind === "sent") thread.jumpLatest();
   }));
   offs.push(P() ? P().onChange(() => thread.refreshCards()) : () => {});
-  offs.push(getAppEffects()?.subscribeTrial(() => thread.render(store.state.msgs[name] || [])) ?? (() => {}));
+  // #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; };
+  watchTrial();
+  if (!trialOff) offs.push(onEffectsAwake(() => { watchTrial(); thread.render(store.state.msgs[name] || []); }));
+  offs.push(() => trialOff?.());
   offs.push(panelStore.subscribe(() => thread.refreshCards()));   // a card shows whether the panel has its block
   return () => { for (const off of offs) off(); };
 }
@@ -428,7 +462,9 @@ function Thread({ name, th }) {
     if (e) keptThreads.delete(name);
     else e = threadEntry(name, doc);
     keptThreads.set(name, e);                                              // the most recent last
-    trimKept(name);
+    // A thread already kept is trimmed against at once; a new one first has to stay (see THREAD_PASS_MS).
+    if (kept) trimKept(name);
+    const shownAt = now();
     const thread = e.thread, sc = scroller.current, ls = e.list;
     e.sink = { setJump, setEmpty };
     host.current.append(ls);
@@ -447,7 +483,9 @@ function Thread({ name, th }) {
       ls.removeEventListener("click", thread.onClick);
       e.sink = null;
       th.current = null;
-      if (keptThreads.get(name) === e) { thread.park(); ls.remove(); }   // kept for a later visit: the chat left
+      // Passed through (new, and shown under THREAD_PASS_MS): let go. Otherwise kept for a later visit, within the budget.
+      if (keptThreads.get(name) === e && !kept && now() - shownAt < THREAD_PASS_MS) { keptThreads.delete(name); letGo(e, false); }
+      else if (keptThreads.get(name) === e) { thread.park(); ls.remove(); trimKept(null); }   // kept for a later visit: the chat left
       else letGo(e, false);                                                // let go meanwhile (a new language)
     };
   }, [name]);
@@ -471,9 +509,12 @@ function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
     ${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-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>
+      <button type="button" class="btn btn-sm" disabled=${!store.canRetrySend(name)} onClick=${() => store.retrySend(name)}>${t("chat.retrySend")}</button></div>` : null}
     <${Composer} name=${name} lease=${lease} busy=${R().isBusy(exec)} />
-    <p class="hint" title=${t(guestPage() ? "chat.guestMore" : "chat.composerMore")}>${t("chat.composerHint")}</p>
-    ${guestPage() ? html`<p class="guest-note">${t("chat.guestNote")}</p>` : html`<${AuthorizeChip} />`}
+    <div class="composer-row">${guestPage() ? html`<span class="guest-note" title=${t("chat.guestNote")}>${t("chat.guestNote")}</span>` : html`<${ComposerAuth} />`}<span
+      class="hint" title=${t(guestPage() ? "chat.guestMore" : "chat.composerMore")}>${t("chat.composerHint")}</span></div>
   </div></div>`;
 }
 
@@ -658,7 +699,7 @@ function DeleteDialog({ name, onClose }) {
     // navigates anything (the person may be anywhere by then).
     try {
       const res = await confirmedWrite(`/ui/instances/${encodeURIComponent(name)}/delete`, { method: "POST", body: { confirm: typed }, label: t("chat.deleteTitle", name),
-        onPending: () => { handedOver = true; toast(t("app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
+        onPending: (_id, view) => { handedOver = true; toast(t(selfConfirmed(view) ? "app.pendingSelfSent" : "app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
       r = res.ok ? res.body || {} : { error: (res.body && res.body.error) || `HTTP ${res.status}` };
     } catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) { toast(r.error, false); if (!handedOver && lease.current()) setBusy(false); return; }

package/dist/ui/panel-fleet.js

@@ -17,7 +17,7 @@ import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
-import { confirmedWrite } from "./settings-confirm.js";
+import { confirmedWrite, selfConfirmed } from "./settings-confirm.js";
 import { OrgCanvas } from "./fleet-canvas.js";
 import { labelOf } from "/assets/instance-nav.js";
 import { CacheReport } from "./fleet-cache.js";
@@ -320,7 +320,7 @@ function Config({ lease }) {
     // A change to access or the connection may need a fleet admin's confirmation (#1423): the shell follows it.
     try {
       const res = await confirmedWrite("/ui/config", { method: "POST", body, label: t("fleet.config"),
-        onPending: () => { toast(t("app.pendingSent")); done(); } });
+        onPending: (_id, view) => { toast(t(selfConfirmed(view) ? "app.pendingSelfSent" : "app.pendingSent")); done(); } });
       r = res.ok ? res.body || {} : { error: (res.body && res.body.error) || `HTTP ${res.status}` };
     } catch (err) { r = { error: err.message }; }
     done();
@@ -367,7 +367,7 @@ export function FormDialog({ title, onClose, submit, children, ready = true }) {
     // said in a toast, and nothing here closes, refreshes or acts again.
     try {
       const res = await confirmedWrite(submit.path, { method: submit.method || "POST", body, label: title,
-        onPending: () => { handedOver = true; toast(t("app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
+        onPending: (_id, view) => { handedOver = true; toast(t(selfConfirmed(view) ? "app.pendingSelfSent" : "app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
       r = res.ok ? res.body || {} : { error: (res.body && res.body.error) || `HTTP ${res.status}` };
     } catch (err) { r = { error: err.message }; }
     if (r.error) { toast(r.error, false); if (!handedOver && lease.current()) setBusy(false); return; }

package/dist/ui/panel-settings.js

@@ -511,7 +511,30 @@ function Agents({ ctx, search, openDialog }) {
   })}</div>`;
 }
 
+function ConnectionRetry({ id, ctx }) {
+  const lease = useLease(`connection-retry:${id}`);
+  const claimed = useRef(false);
+  const [busy, setBusy] = useState(false);
+  const retry = async () => {
+    if (claimed.current) return;
+    claimed.current = true; setBusy(true);
+    try {
+      const response = await lease.fetch(`/api/settings/connections/${encodeURIComponent(id)}/retry`, { method: "POST" });
+      if (!lease.current()) return;
+      toast(response.ok ? tn("connRetryQueued") : tn("connRetryFailed"));
+      await ctx.reload();
+    } catch {
+      if (lease.current()) toast(tn("connRetryFailed"));
+    } finally {
+      claimed.current = false;
+      if (lease.current()) setBusy(false);
+    }
+  };
+  return html`<button type="button" class="btn btn-sm" disabled=${busy} onClick=${retry}>${tn("connRetryNow")}</button>`;
+}
+
 function Bots({ ctx, search, openDialog }) {
+  const overPublicLink = globalThis.document?.body?.dataset?.publicLink === "1";
   const all = channelsOf(ctx.fleet);
   const needle = search.trim().toLowerCase();
   const rows = all.map((ch, i) => ({ ch, i })).filter(({ ch }) => !needle || [ch.id, ch.type, ch.group_id, ch.bot_token_env].some((v) => String(v ?? "").toLowerCase().includes(needle)));
@@ -540,6 +563,7 @@ function Bots({ ctx, search, openDialog }) {
         <span class="s-actions">
           <span class=${`tag${token ? "" : " warn"}`}>${token ? tn("tokenConfigured") : tn("tokenMissing")}</span>
           <span class=${`s-state ${state.cls}`} title=${stateText}>${stateText}</span>
+          ${!overPublicLink && ctx.fleetUp && meta.status !== "connected" ? html`<${ConnectionRetry} id=${channelId(ch, i)} ctx=${ctx} />` : null}
           <button type="button" class="btn btn-sm" onClick=${() => openDialog({ kind: "bot", id: channelId(ch, i) })}>${tn("settingsButton")}</button></span>
       </div>`;
     })}</div>`}

package/dist/ui/settings-appearance.js

@@ -84,7 +84,8 @@ function IdentityColorCard() {
 /**
  * #1958 decision 5: Restore defaults — the host's appearance settings back to their defaults after a confirm that says
  * what it resets; this person's custom CSS turned off (its versions stay). Not settings, so never touched: the colours
- * people picked per instance, installed mods, uploaded effects and the fleet's card limits.
+ * people picked per instance (and where each agent's colours go, #2196), installed mods, uploaded effects and the
+ * fleet's card limits.
  */
 export async function restoreAppearanceDefaults() {
   setThemesShown(true);

package/dist/ui/settings-apply.js

@@ -11,7 +11,7 @@ import { appStore } from "/assets/app-store.js";
 import { t } from "/assets/app-i18n.js";
 import { toast } from "/assets/ui-toast.js";
 import "./settings-strings.js";
-import { api, confirmedWrite, newKey } from "./settings-confirm.js";
+import { api, confirmedWrite, newKey, selfConfirmed } from "./settings-confirm.js";
 
 const WATCH_LIMIT_MS = 10 * 60_000;
 const POST_RETRIES = [1000, 2000, 4000];
@@ -114,7 +114,7 @@ async function perform(step, o) {
   if (step.request) {
     const { method, url, body } = step.request;
     return confirmedWrite(url, { method, body, key: step.key, label: step.label,
-      onPending: (id) => { if (mine(o)) { step.pendingId = id; step.status = "waiting"; publish(); } } });
+      onPending: (id, view) => { if (mine(o)) { step.pendingId = id; step.status = selfConfirmed(view) ? "running" : "waiting"; publish(); } } });
   }
   if (step.connectionSecret) return rotateConnectionSecret(step, o);
   return { ok: false, body: { error: "unknown change" } };
@@ -129,7 +129,7 @@ async function rotateConnectionSecret(step, o) {
   if (!verified.ok) return verified;
   const applied = await confirmedWrite(`${base}/apply`, { method: "POST", key: step.key, label: step.label,
     body: { verification_id: verified.body && verified.body.verification_id, idempotency_key: step.key },
-    onPending: (pid) => { if (mine(o)) { step.pendingId = pid; step.status = "waiting"; publish(); } } });
+    onPending: (pid, view) => { if (mine(o)) { step.pendingId = pid; step.status = selfConfirmed(view) ? "running" : "waiting"; publish(); } } });
   if (!applied.ok && applied.status !== 409) return applied;
   let result = applied.body || {};
   for (let n = 0; result.job_id && result.result === "applying" && n < 60; n++) {

package/dist/ui/settings-confirm.js

@@ -33,6 +33,10 @@ export async function api(path, opts = {}) {
 
 /** A request id we can follow: a non-empty string (the server's are 32 hex characters). */
 const usableId = (v) => typeof v === "string" && v.length > 0;
+/** #2170: a held request its own web-verified account confirmed (the server's answer says so): applying, no wait for chat. */
+export function selfConfirmed(view) {
+  return !!view && !!view.confirmation && view.confirmation.kind === "web";
+}
 /** The 202 that means "waiting for an admin", not "done". */
 export function isPendingResponse(res) {
   return !!res && res.status === 202 && !!res.body && res.body.result === "pending_confirmation" && !!res.body.pending_change
@@ -159,13 +163,14 @@ export async function attach() {
  * itself would have been: applied → { ok: true, body: what the write answered }, anything else → { ok: false } with
  * the reason. An accepted answer that cannot be read is { ok: false, ambiguous: true } (see isUnreadableAccept); a
  * network failure throws. Every other answer is returned as it is. `key` is the request's Idempotency-Key: pass the same one to
- * retry the same request. `onPending(id)` is told when it starts waiting.
+ * retry the same request. `onPending(id, view)` is told when it starts waiting — or, held and confirmed by its own
+ * web-verified account (selfConfirmed(view), #2170), applying.
  */
 export async function confirmedWrite(path, { method = "POST", body, key = newKey("w"), label, headers, onPending } = {}) {
   const res = await api(path, { method, headers: { ...(headers || {}), "Idempotency-Key": key }, body: body === undefined ? undefined : JSON.stringify(body) });
   if (isUnreadableAccept(res)) return { ok: false, status: 202, ambiguous: true, body: { error: "unreadable_confirmation_response" } };
   if (!isPendingResponse(res)) return res;
-  if (onPending) onPending(res.body.pending_change.id);
+  if (onPending) onPending(res.body.pending_change.id, res.body.pending_change);
   const final = await track(res.body.pending_change, label);
   return outcomeResponse(final);
 }

package/dist/ui/settings-owner-effects.js

@@ -3,7 +3,7 @@ import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { register, t } from "/assets/app-i18n.js";
 import { useStore } from "/assets/app-store.js";
 import { OWNER_EFFECT_PREF_KEYS } from "/assets/app-prefs.js";
-import { getAppEffects } from "./app-effects.js";
+import { getAppEffects, wakeEffects } from "./effects-waker.js";
 import { ownerEffectsStore, watchOwnerEffects, refreshOwnerEffects, saveOwnerEffects } from "/assets/owner-effect-prefs.js";
 register("ownerEffects", {
   en: {
@@ -38,9 +38,11 @@ export function OwnerEffects({ catalog, busy = false }) {
   const state = useStore(ownerEffectsStore), [message, setMessage] = useState(null), life = useRef({ alive: false, seq: 0 }), [runtime, setRuntime] = useState(null);
   useEffect(() => { life.current.alive = true; const stop = watchOwnerEffects(); return () => { life.current.alive = false; life.current.seq++; stop(); }; }, []);
   useEffect(() => {
-    let live = true; const entry = getAppEffects();
+    // #2193: managing personal effects needs the runtime's view of them: it is woken here (it may still be asleep).
+    let live = true, entry = getAppEffects(), off = null, end = null;
     const pull = () => { if (!live) return; const gates = entry?.gates(); setRuntime({ entry, snapshot: entry?.api?.ownerSnapshot?.(), cursor: entry?.cursorSnapshot?.(), available: !!entry && !entry.dead && gates.enabled && gates.show && gates.transportReady && !gates.safe && !gates.publicLink && !gates.reducedMotion }); };
-    const off = entry?.subscribe(pull), end = entry?.onEnd(pull); pull();
+    const bind = () => { off = entry?.subscribe(pull) ?? null; end = entry?.onEnd(pull) ?? null; pull(); };
+    if (entry) bind(); else { pull(); void wakeEffects().then(() => { if (!live) return; entry = getAppEffects(); bind(); }); }
     return () => { live = false; off?.(); end?.(); };
   }, []);
   const reload = () => { getAppEffects()?.api?.changedOwner?.(); return refreshOwnerEffects(); };
@@ -54,7 +56,7 @@ export function OwnerEffects({ catalog, busy = false }) {
     const seq = ++life.current.seq; setMessage(null);
     const result = await saveOwnerEffects({ [key]: id });
     if (!life.current.alive || seq !== life.current.seq) return;
-    if (result.ok || result.saved) getAppEffects()?.api?.changedOwner?.();
+    if (result.ok || result.saved) getAppEffects()?.api?.changedOwner?.();   // #2193: asleep, the saved slot wakes it (app-prefs)
     setMessage(text(result.ok ? "saved" : result.saved ? "savedRefresh" : "failed"));
   };
   return html`<section class="s-fx-owner" aria-label=${text(state.scope === "operator" ? "operatorTitle" : "title")}><h4>${text(state.scope === "operator" ? "operatorTitle" : "title")}</h4><p class="sub">${text(state.scope === "operator" ? "operator" : "person")}</p>

package/dist/ui/settings-strings.js

@@ -131,6 +131,7 @@ register("settings", {
     applyPartial: "Some changes failed",
     applyClose: "Close",
     settingsButton: "Settings",
+    connRetryNow: "Retry now", connRetryQueued: "Connection retry requested.", connRetryFailed: "Could not retry this connection. Check its status and try again.",
     modalDone: "Stage change",
     wizardButton: "Setup wizard",
     wizardTitle: "Set up AgEnD",
@@ -666,6 +667,7 @@ register("settings", {
     applyPartial: "有部分變更失敗",
     applyClose: "關閉",
     settingsButton: "設定",
+    connRetryNow: "立即重試", connRetryQueued: "已要求重新連線。", connRetryFailed: "無法重試此連線，請檢查狀態後再試。",
     modalDone: "加入待套用",
     wizardButton: "設定精靈",
     wizardTitle: "設定 AgEnD",

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

@@ -80,6 +80,7 @@ register("app", {
     signOutAll: "Sign out everywhere", devices: "Signed-in devices", expires: "Ends by {0} at the latest, or after {1} unused",
     failed: "That did not work — try again.", close: "Close", more: "More actions", menu: "Menu",
     pendingTitle: "Changes waiting for confirmation", pending_pending: "Waiting for confirmation", pending_applying: "Confirmed — applying…",
+    pendingWeb: "Confirmed by your account (this browser is web-verified). General is told.",
     pending_applied: "Confirmed and applied", pending_rejected: "Not applied", pending_expired: "Expired — nothing was changed",
     pending_stale: "Not applied — settings changed meanwhile", pending_failed: "Confirmed, but applying it failed",
     pendingChat: "A fleet admin confirms this in chat (General topic).", pendingHost: "Confirm it on the host: {0}", pendingLeft: "{0} left", withdraw: "Withdraw",
@@ -87,6 +88,7 @@ register("app", {
     opDone: "Settings applied", opRestart: "Settings saved — AgEnD needs a restart to use them", opPartial: "Some settings were not applied",
     opFailed: "Settings were not applied", openSettings: "Open Settings",
     pendingSent: "Sent for confirmation — a fleet admin confirms it in chat.",
+    pendingSelfSent: "Confirmed by your account (this browser is web-verified) — applying.",
     needsNav: "Needs you", needsTab: "Needs you", needsCount: "{0} waiting",
     confirmTitle: "Please confirm", confirmOk: "Continue", cancel: "Cancel",
     // The server's own wording (src/locale.ts needs.reason.*), so the web says what Discord says.
@@ -113,6 +115,7 @@ register("app", {
     signOutAll: "全部登出", devices: "已登入的裝置", expires: "最晚 {0} 結束；閒置 {1} 也會結束",
     failed: "沒有成功，請再試一次。", close: "關閉", more: "更多動作", menu: "選單",
     pendingTitle: "等待確認的變更", pending_pending: "等待確認", pending_applying: "已確認——套用中…",
+    pendingWeb: "由你的帳號確認（這個瀏覽器已通過網頁驗證），也會通知 General。",
     pending_applied: "已確認並套用", pending_rejected: "未套用", pending_expired: "已逾時——沒有任何變更",
     pending_stale: "未套用——設定在這期間已變動", pending_failed: "已確認，但套用失敗",
     pendingChat: "由 fleet 管理員在聊天（General topic）中確認。", pendingHost: "請在主機上確認：{0}", pendingLeft: "剩 {0}", withdraw: "撤回",
@@ -120,6 +123,7 @@ register("app", {
     opDone: "設定已套用", opRestart: "設定已儲存——需要重新啟動 AgEnD 才會生效", opPartial: "部分設定沒有套用",
     opFailed: "設定沒有套用", openSettings: "開啟設定",
     pendingSent: "已送出確認——由 fleet 管理員在聊天中確認。",
+    pendingSelfSent: "已由你的帳號確認（這個瀏覽器已通過網頁驗證）——套用中。",
     needsNav: "等你處理", needsTab: "待處理", needsCount: "{0} 件待處理",
     confirmTitle: "請確認", confirmOk: "繼續", cancel: "取消",
     needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗",

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

@@ -43,6 +43,7 @@ export const SYNCED = {
   "widget.sidebar": { ls: "agend_widget_sidebar", ...json },
   // #1958: where identity colours show by default (#2056: name, bar and ring unless chosen), and the host's switch to turn them off.
   "color.show": { ls: "agend_color_show", ...json },
+  "theme.pageByInstance": { ls: "agend_theme_page", ...json },   // #2196
   "color.off": { ls: "agend_color_off", toLocal: (v) => (v === true ? "on" : null), fromLocal: (s) => (s === "on" ? true : undefined) },
 };
 // #1629: fixed personal scope. A separate session-bound owner-effect store synchronizes these, never this host cache.
@@ -78,6 +79,15 @@ const inflight = new Map();    // key → writes sent and not answered yet
 let flushTimer = null;
 let writes = Promise.resolve();   // one write at a time, in the order they were made
 const listeners = new Set();
+// #2193: whether the signed-in person has a personal effect slot chosen (their fx.* keys: in the page's data-prefs and
+// in every host read, never in this host cache). The effects runtime is loaded only when there is something to play.
+const ownerEffectsIn = (values) => !!values && OWNER_EFFECT_PREF_KEYS.some((k) => own(values, k) && values[k] != null && values[k] !== "");
+let ownerFx = initial ? ownerEffectsIn(initial.values) : false;
+const ownerFxListeners = new Set();
+/** Whether the person has any personal effect (fx.page/header/sidebar/box/cursor) chosen, as this page last read. */
+export function ownerEffectsChosen() { return ownerFx; }
+/** Called when that changes. Returns the unsubscribe. */
+export function onOwnerEffectsChanged(fn) { ownerFxListeners.add(fn); return () => ownerFxListeners.delete(fn); }
 
 // The host's values into the cache, now — before the sidebar, the tour or the first-run card read their keys. A key
 // the host does not have: the default, on a device in step with the host; this device's own (to upload) otherwise.
@@ -118,6 +128,8 @@ function take(body) {
   if (!isView(body) || (rev !== null && body.rev < rev)) return false;
   rev = body.rev;
   host = hostValues(body.values);
+  const fx = ownerEffectsIn(body.values);
+  if (fx !== ownerFx) { ownerFx = fx; for (const fn of [...ownerFxListeners]) { try { fn(fx); } catch { /* the rest still hear */ } } }
   return true;
 }
 

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

@@ -11,7 +11,8 @@ import { appStore, createStore, guestBadge, guestPage, useStore } from "./app-st
 import { navStore } from "./app-nav.js";
 import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, fleetEntryPath } from "./app-route.js";
 import { SessionMenu } from "./app-session.js";
-import { savePref } from "./app-prefs.js";
+import { onPrefsChanged, savePref } from "./app-prefs.js";
+import { applyPageTheme, pageNow, resolvedMode, themesStore } from "./app-themes.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
 import { InstanceNav, RosterNav, namesStore, setNamesPrimary } from "./instance-nav.js";
 import { UsageRail, usageRailStore } from "./header-tools.js";
@@ -508,6 +509,7 @@ export function PendingChanges({ inline = false } = {}) {
     ${p.label ? html`<div class="pending-label">${p.label}</div>` : null}
     ${Array.isArray(p.summary) && p.summary.length ? html`<ul class="pending-summary">${p.summary.map((line, i) => html`<li key=${i}>${line}</li>`)}</ul>` : null}
     ${p.state === "pending" ? html`<p class="note">${p.confirmation && p.confirmation.kind === "host_cli" ? t("app.pendingHost", `agend settings confirm ${p.id}`) : t("app.pendingChat")}</p>` : null}
+    ${(p.state === "applying" || p.state === "applied") && p.confirmation && p.confirmation.kind === "web" ? html`<p class="note">${t("app.pendingWeb")}</p>` : null}
     ${p.state !== "pending" && p.state !== "applying" && p.state !== "applied" && p.outcome && p.outcome.message ? html`<p class="note">${p.outcome.message}</p>` : null}
     ${p.withdraw ? html`<div class="pending-actions"><button type="button" class="btn btn-sm" onClick=${p.withdraw}>${t("app.withdraw")}</button></div>` : null}
   </section>`)}</div>`;
@@ -557,9 +559,43 @@ function Outlet({ route, seq, panels }) {
   return html`<${C} route=${route} navKey=${`${routeKey(route)}|${seq}|${lang()}`} />`;
 }
 
+/**
+ * #2196: the open agent's colours on the whole page (its theme's page section, or a person's choice), drawn on the
+ * shell in the same render that opens it — no fetch (the themes are on the page already), no flash, colours only, so
+ * no layout moves. Redrawn when the themes, the person's choices, the viewer's switch or the light/dark mode move.
+ */
+function usePageTheme(ref, route) {
+  useStore(themesStore);
+  const [, bump] = useState(0);
+  useEffect(() => onPrefsChanged((changed) => { if (changed.has("theme.pageByInstance") || changed.has("fx.show")) bump((n) => n + 1); }), []);
+  useEffect(() => {
+    const T = globalThis.AgendTheme;
+    const off = T && typeof T.onChange === "function" ? T.onChange(() => bump((n) => n + 1)) : null;
+    let mq = null;
+    try { mq = globalThis.matchMedia ? globalThis.matchMedia("(prefers-color-scheme: light)") : null; } catch { mq = null; }
+    const onMq = () => bump((n) => n + 1);
+    if (mq && typeof mq.addEventListener === "function") mq.addEventListener("change", onMq);
+    return () => { if (typeof off === "function") off(); if (mq && typeof mq.removeEventListener === "function") mq.removeEventListener("change", onMq); };
+  }, []);
+  const mode = resolvedMode();
+  const p = pageNow(mode, route);
+  const key = p ? `${mode}|${JSON.stringify(p)}` : "";
+  useLayoutEffect(() => { applyPageTheme(ref.current, p, mode); }, [key]);
+  // #2199: the agent open now, as body[data-agent] — for a person's own custom CSS to follow (body[data-agent="x"]
+  // { --bg-sidebar: … }); set and cleared in the same render as the page colours, whatever the themes switch says.
+  const agent = openInstanceOf(route);
+  useLayoutEffect(() => {
+    const body = typeof document !== "undefined" ? document.body : null;
+    if (!body || !body.dataset) return;
+    if (agent) body.dataset.agent = agent; else delete body.dataset.agent;
+  }, [agent]);
+}
+
 export function Shell({ panels, onNewInstance, viewOnly = false }) {
   const nav = useStore(navStore);
   const shell = useStore(shellStore);
+  const root = useRef(null);
+  usePageTheme(root, nav.route);
   const [, relang] = useState(0);
   // A language switch re-renders everything and gives the panel a new lease (its key includes the language).
   useEffect(() => onLang(() => relang(n => n + 1)), []);
@@ -574,7 +610,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
   }, []);
   const guest = guestPage();             // #1920: a guest's page — no operations, usage, pending changes or owner CSS
   const cls = ["shell", shell.collapsed ? "sb-collapsed" : "", shell.drawer ? "sb-open" : "", shell.keyboard ? "kb-open" : "", guest ? "guest" : ""].filter(Boolean).join(" ");
-  return html`<div class=${cls}>
+  return html`<div ref=${root} class=${cls}>
     <a data-trust="navigation" class="skip" href="#main">${t("app.skip")}</a>
     <${Sidebar} route=${nav.route} onNewInstance=${onNewInstance} viewOnly=${viewOnly} />
     <div class="scrim" onClick=${closeDrawer} aria-hidden="true"></div>