@songsid/agend 2.3.0-beta.12 → 2.3.0-beta.14

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";
@@ -26,26 +26,44 @@ import { confirmDialog } from "/assets/ui-confirm.js";
 import { savePref } from "/assets/app-prefs.js";
 import { applyTheme, clearAmbient, resolvedMode, themeFor, themeImageUrl, themeMenuItems, themesStore } from "/assets/app-themes.js";
 import { colorMenuItem } from "/assets/identity-color.js";
-import { IdentityCard, useCard } from "/assets/identity-card.js";
+import { brokenPictures, cardFoldable, 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; its picture and bio can be folded away (the banner stays) — this
+// device's choice too, kept the same way. The user (2026-10-20): no control on the card — one card button in the header
+// (a guest's and the public link's header too: they have no ⋯ menu), pressed-looking while the card is shown, opens a
+// small menu of two checkboxes: Show card, and Show picture and bio (disabled while the card is hidden, or when it cannot
+// fold: no banner, or nothing on its row).
 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} rowHidden=${prefs.rowHidden} />
   </div>`;
 }
+/** The header's card menu: ☑ Show card, ☑ Show picture and bio. */
+function CardMenu({ card }) {
+  const prefs = useStore(chatCardPrefs);
+  useStore(brokenPictures);                        // a banner that failed to load: the card cannot fold, the item greys out
+  if (!card) return null;
+  const items = [
+    { key: "card", checkbox: true, checked: prefs.open, label: t("card.show"), onSelect: () => setChatCardOpen(!prefs.open) },
+    { key: "row", checkbox: true, checked: !prefs.rowHidden && cardFoldable(card), disabled: !prefs.open || !cardFoldable(card), label: t("card.showRow"),
+      onSelect: () => setChatCardRowHidden(!prefs.rowHidden) },
+  ];
+  return html`<${Menu} items=${items} label=${t("card.menu")} icon="idcard" cls="chat-card-menu" active=${prefs.open} />`;
+}
 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 +77,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 +137,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;
 }
 
@@ -276,6 +295,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)) },
@@ -301,7 +322,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}<${CardMenu} 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}>
@@ -385,7 +406,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);
@@ -423,7 +445,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(); };
 }
@@ -493,8 +520,8 @@ function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
     ${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>`;
 }
 
@@ -679,7 +706,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/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/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>

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

@@ -1,9 +1,12 @@
 // #1629 (first design §5, r2 (b)(d)): agents' web themes on the page. Each applies to THAT agent's own chat surface
-// (and its avatar ring) only — never the shell, the sidebar chrome or another instance. What the host sends is
+// (and its avatar ring) — and, #2196, when the agent (theme.page.on) or a person (theme.pageByInstance) says so, its
+// colours on the whole page while that agent's Chat, View, Log or Details is open: colour tokens only, on the shell
+// (applyPageTheme); AgEnD's status colours, fonts, pictures and layout stay the page's own. What the host sends is
 // canonical already; this checks it again (a value that fails is dropped, never passed on) and applies it through the
 // CSSOM (custom properties) and fixed class tokens. No style attribute, no CSS text, no url() built in CSS.
 // Not shown: with "Show agents' themes, effects and widgets" off (fx.show, synced), and in safe mode (?safe=1).
 import { appStore, createStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import { safeMode } from "./owner-css.js";
 import { t } from "./app-i18n.js";
@@ -86,9 +89,110 @@ export function themeFor(name) {
     out.background = { image: bg.image, fit: bg.fit, opacity: bg.opacity };
   }
   if (labelOk(t.workingLabel)) out.workingLabel = t.workingLabel;
+  if (t.page && typeof t.page === "object") {
+    const sb = {};
+    if (t.page.sidebar && typeof t.page.sidebar === "object") for (const m of ["light", "dark"]) if (typeof t.page.sidebar[m] === "string" && COLOR.test(t.page.sidebar[m])) sb[m] = t.page.sidebar[m];
+    out.page = { on: t.page.on === true, sidebar: sb };
+  }
   return out;
 }
 
+// ── #2196: an agent's colours on the whole page ──
+
+/** The token defaults (tokens.css; web-theme.ts THEME_DEFAULTS, pinned by a test) a theme's palette goes over. */
+const PAGE_DEFAULTS = {
+  dark: { bg: "#212121", surface: "#2f2f2f", text: "#ececec", text2: "#b4b4b4", accent: "#7ab7ff" },
+  light: { bg: "#ffffff", surface: "#f4f4f4", text: "#0d0d0d", text2: "#5d5d5d", accent: "#0a62c2" },
+};
+/** AgEnD's status colours (tokens.css; web-theme.ts STATUS_COLORS, pinned by a test): never themed, always readable. */
+export const STATUS_COLORS = {
+  dark: { ok: "#4cc38a", warn: "#e3b341", danger: "#ff8a80", dangerFill: "#c9372c", focus: "#7ab7ff" },
+  light: { ok: "#1a7f37", warn: "#8a5a00", danger: "#c4222b", dangerFill: "#c4222b", focus: "#0a62c2" },
+};
+const PAGE_PROPS = { bg: "--bg", sidebar: "--bg-sidebar", surface: "--surface", text: "--text", text2: "--text-2", accent: "--accent" };
+const DERIVED_PROPS = ["--text-3", "--surface-2", "--border", "--border-strong", "--accent-dim", "--on-accent"];
+function lum(hex) {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+}
+const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
+const mix = (a, b, f) => `#${[1, 3, 5].map((i) => Math.round(parseInt(a.slice(i, i + 2), 16) * (1 - f) + parseInt(b.slice(i, i + 2), 16) * f).toString(16).padStart(2, "0")).join("")}`;
+
+/** The instance a page is about — Chat, View, Log or Details of it (app-shell.js openInstanceOf) — or null. */
+function openOf(route) {
+  return route && ["chat", "view", "log", "details"].includes(route.panel) && typeof route.instance === "string" ? route.instance : null;
+}
+/** A person's choice for `name`: "page" (the whole page), "chat" (only its chat) or null (the agent's own). */
+export function pageChoice(name) {
+  const f = prefInForce("theme.pageByInstance");
+  const m = f && f.value;
+  return m && typeof m === "object" && own(m, name) && (m[name] === "page" || m[name] === "chat") ? m[name] : null;
+}
+/** Set it ("agent" clears it), kept with the host's preferences like the identity colour a person picks. */
+export function setPageChoice(name, choice) {
+  const f = prefInForce("theme.pageByInstance");
+  const cur = f && f.value && typeof f.value === "object" ? f.value : {};
+  const keep = Object.keys(cur).filter((k) => own(cur, k) && k !== name && (cur[k] === "page" || cur[k] === "chat")).map((k) => [k, cur[k]]);
+  if (choice === "page" || choice === "chat") keep.push([name, choice]);
+  savePref("theme.pageByInstance", keep.length ? Object.fromEntries(keep) : null);
+  // In force on this page at once: what draws a theme follows this store (another device's change: onPrefsChanged).
+  themesStore.set({ pageRev: (themesStore.get().pageRev || 0) + 1 });
+}
+/** `name`'s theme when its colours go on the whole page (the person's choice, else the agent's), else null. */
+export function pageThemeFor(name) {
+  if (!name) return null;
+  const theme = themeFor(name);
+  if (!theme) return null;
+  const choice = pageChoice(name);
+  return choice === "page" || (choice !== "chat" && theme.page && theme.page.on) ? theme : null;
+}
+/** The page's colours for `mode`: the theme's palette over the defaults, and its sidebar (else its background). */
+export function pagePalette(theme, mode) {
+  const p = { ...PAGE_DEFAULTS[mode], ...(theme.accent ? { accent: theme.accent } : {}), ...((theme.colors && theme.colors[mode]) || {}) };
+  const out = {};
+  for (const k of Object.keys(PAGE_DEFAULTS[mode])) out[k] = p[k];
+  out.sidebar = (theme.page && theme.page.sidebar && theme.page.sidebar[mode]) || out.bg;
+  return out;
+}
+/**
+ * Whether a page palette reads (web-theme.ts's checks, again here: a person may put an agent's colours on the page
+ * though the agent never asked): text and secondary text 4.5:1 and the accent 3:1 on the background, surface and
+ * sidebar; every status colour 3:1 on the sidebar and the background.
+ */
+export function pageReadable(p, mode) {
+  if (!p || !Object.values(p).every((c) => typeof c === "string" && COLOR.test(c))) return false;
+  for (const bg of [p.bg, p.surface, p.sidebar]) {
+    if (ratio(p.text, bg) < 4.5 - 1e-9 || ratio(p.text2, bg) < 4.5 - 1e-9) return false;
+  }
+  if (ratio(p.accent, p.bg) < 3 - 1e-9 || ratio(p.accent, p.sidebar) < 3 - 1e-9) return false;
+  return Object.values(STATUS_COLORS[mode]).every((c) => ratio(c, p.sidebar) >= 3 - 1e-9 && ratio(c, p.bg) >= 3 - 1e-9);
+}
+/** The page colours in force now for `mode` (the instance the route is about), or null: the page's own. */
+export function pageNow(mode, route = navStore.get().route) {
+  const theme = pageThemeFor(openOf(route));
+  const p = theme && pagePalette(theme, mode);
+  return p && pageReadable(p, mode) ? p : null;
+}
+/**
+ * Draw page colours `p` (pageNow) on the shell `el`, or clear them (null): the palette's tokens and the few derived
+ * from it (borders, raised rows, the accent's tint and the colour on it), through the CSSOM; class th-page.
+ */
+export function applyPageTheme(el, p, mode) {
+  if (!el || !el.style) return;
+  for (const prop of [...Object.values(PAGE_PROPS), ...DERIVED_PROPS]) el.style.removeProperty(prop);
+  el.classList.remove("th-page");
+  if (!p) return;
+  for (const [k, prop] of Object.entries(PAGE_PROPS)) el.style.setProperty(prop, p[k]);
+  el.style.setProperty("--text-3", p.text2);
+  el.style.setProperty("--surface-2", mix(p.surface, p.text, 0.08));
+  el.style.setProperty("--border", mix(p.bg, p.text, 0.14));
+  el.style.setProperty("--border-strong", mix(p.bg, p.text, 0.45));
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(p.accent.slice(i, i + 2), 16));
+  el.style.setProperty("--accent-dim", `rgba(${r}, ${g}, ${b}, ${mode === "dark" ? 0.14 : 0.08})`);
+  el.style.setProperty("--on-accent", ratio("#ffffff", p.accent) >= ratio("#0d0d0d", p.accent) ? "#ffffff" : "#0d0d0d");
+  el.classList.add("th-page");
+}
+
 export function isThemeLocked(name) { return (themesStore.get().locked || []).includes(name); }
 
 const TOKENS = ["th", "th-font-inter", "th-font-system", "th-font-mono", "th-bubble-none", "th-bubble-thin", "th-bubble-accent", "th-agent-bubble"];
@@ -193,7 +297,18 @@ export function themeMenuItems(name) {
   const locked = isThemeLocked(name);
   const w = themesStore.get().widgets;
   const placed = w && own(w, name) && w[name] && typeof w[name] === "object" ? w[name] : {};
+  // #2196: where this agent's colours go — its own choice, the whole page, or only its chat (the person's wins).
+  const choice = pageChoice(name), theme = themeFor(name), mode = resolvedMode();
+  const agentsOwn = theme && theme.page && theme.page.on ? "chat.pageAgentOn" : "chat.pageAgentOff";
+  const readable = !!theme && pageReadable(pagePalette(theme, mode), mode);
+  const page = theme ? [
+    { key: "page-heading", heading: true, label: t("chat.pageColours") },
+    { key: "page-agent", checked: choice === null, label: t(agentsOwn), onSelect: () => setPageChoice(name, "agent") },
+    { key: "page-page", checked: choice === "page", label: t("chat.pageWhole"), disabled: !readable && choice !== "page", onSelect: () => setPageChoice(name, "page") },
+    { key: "page-chat", checked: choice === "chat", label: t("chat.pageChatOnly"), onSelect: () => setPageChoice(name, "chat") },
+  ] : [];
   return [
+    ...page,
     ...["chat_header", "details"].filter((slot) => own(placed, slot)).map((slot) => ({
       key: `widget-remove-${slot}`, label: t(slot === "chat_header" ? "chat.widgetRemoveHeader" : "chat.widgetRemoveDetails"), icon: "trash",
       onSelect: () => removeWidget(name, slot),