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

package/dist/ui/fleet-traffic.js

@@ -179,7 +179,9 @@ function endOf(L, name) {
 // ── Routing: lanes the layout keeps empty ──
 
 /** A side lane's offset from the middle of the box's padding: at least 6 px from the box's border and from its cards. */
-const laneOffset = (o) => Math.max(-OC.PAD / 2 + 6, Math.min(OC.PAD / 2 - 6, o * 0.5));
+const laneOffset = (o, PAD = OC.PAD) => Math.max(-PAD / 2 + 6, Math.min(PAD / 2 - 6, o * 0.5));
+/** The layout's own box padding and gutter (a phone's are narrower). */
+const spacing = (L) => ({ PAD: L.pad ?? OC.PAD, GAP: L.gap ?? OC.GAP });
 
 const firstBusOf = (L) => Math.min(...L.boxes.map((b) => b.busY));
 /** From an end up to its row's bus lane: the points, and the lane's y. `o` spreads lines sharing a lane. */
@@ -194,9 +196,9 @@ function outward(L, end, o) {
     const x = b.x + b.w / 2 + o * 1.5;
     return { pts: [{ x, y: b.y }, { x, y: b.busY + o }], bus: b.busY + o };
   }
-  const { PAD, GAP, NW, NH } = OC;
+  const { NW, NH } = OC, { PAD, GAP } = spacing(L);
   const card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
-  const io = laneOffset(o);
+  const io = laneOffset(o, PAD);
   const leftLane = b.x + PAD / 2 + io, rightLane = b.x + b.w - PAD / 2 + io;
   let pts;
   if (col === 0 || col === b.cols - 1) {
@@ -217,9 +219,9 @@ function outward(L, end, o) {
  * else down into the gutter under its row (no card is there) and across. The last point is on the lane.
  */
 function toLane(L, end, lane, o) {
-  const { PAD, GAP, NW, NH } = OC;
+  const { NW, NH } = OC, { PAD, GAP } = spacing(L);
   const b = end.b, card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
-  const io = laneOffset(o);
+  const io = laneOffset(o, PAD);
   const left = lane < b.x + b.w / 2;
   if ((left && col === 0) || (!left && col === b.cols - 1)) {
     const cy = card.y + NH / 2 + io;
@@ -230,8 +232,8 @@ function toLane(L, end, lane, o) {
 }
 /** Two cards in one open box: joined inside it, through the side lane nearer to them both (never out to the bus). */
 function inBox(L, a, z, o) {
-  const b = a.b, { PAD } = OC;
-  const io = laneOffset(o);
+  const b = a.b, { PAD } = spacing(L);
+  const io = laneOffset(o, PAD);
   const mid = ((a.i % b.cols) + (z.i % b.cols)) / 2;
   const lane = mid <= (b.cols - 1) / 2 ? b.x + PAD / 2 + io : b.x + b.w - PAD / 2 + io;
   return [...toLane(L, a, lane, o), ...toLane(L, z, lane, o).reverse()];
@@ -289,9 +291,12 @@ const settled = (phase) => (phase === "fading" || phase === "stale" ? "fading" :
 
 /**
  * The lines to draw from the store's items on layout `L`. `far`: zoomed out (one line per team pair). Each edge:
- * { key, hue, phase, n, from, to, d, pts, badge } — `from`/`to` the instance (or team) names it joins, for search.
+ * { key, hue, phase, n, from, to, d, pts, badge, a, z, routed } — `from`/`to` the instance (or team) names it joins, for
+ * search; `a`/`z` its two ends (fleet-route-scene.js routes the ones on cards). `routed` (#2182): the router's points by
+ * line key (fleet-route.js); a line it has none for keeps its lane route — or, while a new answer is on its way, the
+ * points the same two ends and kind had in the last one (a line changing phase keeps its place).
  */
-export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
+export function trafficEdges(items, L, { far = false, max = MAX_EDGES, routed = null } = {}) {
   if (!L.boxes.length && L.tops.length < 2) return [];
   // A top's way out is the first row's bus: with no box there is none, so only top ↔ top lines (betweenTops) are drawn.
   const groups = new Map();
@@ -321,10 +326,21 @@ export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
     add(`${a.key}>${z.key}|${hue(it.kind)}|${phase}`, { a, z, hue: hue(it.kind), phase, n: 1, names });
   }
   const list = [...groups.entries()].sort((x, y) => RANK[x[1].phase] - RANK[y[1].phase]).slice(0, max);
+  const lent = new Set();
+  const routedBy = (key) => {
+    if (!routed || far) return null;
+    const exact = routed.get(key);
+    if (exact) return exact;
+    const kin = key.slice(0, key.lastIndexOf("|") + 1);
+    for (const [k, pts] of routed) if (k.startsWith(kin) && !groups.has(k) && !lent.has(k)) { lent.add(k); return pts; }
+    return null;
+  };
   return list.map(([key, g], i) => {
     const o = ((i % 7) - 3) * 7;                                                    // neighbours 7 px apart (within the ±22 px bus lane)
-    const pts = route(L, g.a, g.z, o);
-    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d: pathOf(pts), pts, badge: g.n > 1 ? badgeAt(pts) : null };
+    const viaRouter = routedBy(key);
+    const pts = viaRouter ?? route(L, g.a, g.z, o);
+    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d: pathOf(pts), pts, badge: g.n > 1 ? badgeAt(pts) : null,
+      a: g.a, z: g.z, routed: !!viaRouter };
   });
 }
 

package/dist/ui/fleet-usage.js

@@ -183,6 +183,38 @@ export function zonesChanged(report) {
   return zones.length > 1 || (zones.length === 1 && zones[0] !== report.zone) ? zones : null;
 }
 
+/** Estimated pixel width of one character in the 9 px `.us-axis` label. */
+const LABEL_CHAR_W = 5.5;
+
+/**
+ * The 0-based indices of dates that should receive an x-axis label.
+ * Keeps the first (0) and last (n-1) when they are far enough apart not to
+ * overlap. When first and last are too close (n-1 < step), only the last
+ * (most recent) is shown — overlap-free takes precedence over keeping both
+ * ends. Intermediate labels are thinned so that no two consecutive shown
+ * labels are closer than `labelWidthPx` pixels apart.
+ *
+ * @param {number} n            Number of data points (dates).
+ * @param {number} slotPx       Pixels per slot (bar + gap).
+ * @param {number} labelWidthPx Estimated rendered width of one label.
+ * @returns {Set<number>}
+ */
+export function thinXLabels(n, slotPx, labelWidthPx) {
+  if (n <= 0) return new Set();
+  if (n === 1) return new Set([0]);
+  // Minimum slot steps between label centres (+ 2 px breathing room).
+  const step = Math.max(1, Math.ceil((labelWidthPx + 2) / slotPx));
+  // If first and last are too close to both be shown without overlap, keep
+  // only the last (most recent). The caller's "always first+last" contract
+  // is relaxed here: overlap-free takes precedence.
+  if (n - 1 < step) return new Set([n - 1]);
+  const idx = [0];
+  // Add intermediates that are at least `step` slots away from n-1.
+  for (let i = step; i < n - step; i += step) idx.push(i);
+  idx.push(n - 1); // always include last
+  return new Set(idx);
+}
+
 /** The trend's series: the top `TOP` agents by the measure over the range, then "others"; one value per date. */
 export function trendSeries(report, dates) {
   const priced = report.totals && report.totals.amount !== null && report.totals.amount > 0;
@@ -230,6 +262,8 @@ function Trend({ report, dates }) {
   const max = Math.max(...sums, 0) || 1;
   const what = s.priced ? tu("amount") : tu("trendTokens"), others = s.names.length > TOP;
   const label = others ? tu("trendLabel", what, TOP, dates[0], dates[dates.length - 1]) : tu("trendLabelAll", what, s.names.length, dates[0], dates[dates.length - 1]);
+  // Thin x-axis labels: "MM-DD" (5 chars) × LABEL_CHAR_W ≈ 27.5 px at 9 px sans-serif.
+  const shownLabels = thinXLabels(dates.length, slot, 5 * LABEL_CHAR_W);
   return html`<section class="us-trend card" aria-labelledby="us-trend-h">
     <h3 id="us-trend-h">${tu("trend")} <span class="note">· ${s.priced ? tu("amount") : tu("trendTokens")}</span></h3>
     <p class="note us-scale">${tu("scale", fmtMeasure(s.priced, max))}</p>
@@ -243,7 +277,7 @@ function Trend({ report, dates }) {
           const h = v[i] > 0 ? Math.max(1, ((base - top) * v[i]) / max) : 0;
           y -= h;
           return h ? html`<rect key=${k} class=${`us-s${k}`} x=${left + i * slot + 2} y=${y} width=${slot - 4} height=${h}><title>${`${date} · ${s.names[k]}: ${fmtMeasure(s.priced, v[i])}`}</title></rect>` : null;
-        })}${(dates.length - 1 - i) % 7 === 0 || dates.length <= 8 ? html`<text class="us-axis" x=${left + i * slot + slot / 2} y=${H - 6} text-anchor="middle">${date.slice(5)}</text>` : null}</g>`;
+        })}${shownLabels.has(i) ? html`<text class="us-axis us-xlabel" x=${left + i * slot + slot / 2} y=${H - 6} text-anchor="middle">${date.slice(5)}</text>` : null}</g>`;
       })}
     </svg></div>
     <${EarlierHint} wide=${wide} />

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;
 }
 
@@ -276,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)) },
@@ -301,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}>
@@ -385,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);
@@ -423,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(); };
 }
@@ -493,8 +513,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 +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/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>