@songsid/agend 2.3.0-beta.6 → 2.3.0-beta.8

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

@@ -1,7 +1,6 @@
 /** #1629 B2: one host-owned Canvas Worker pool. Product adapters are deliberately separate. */
-import { allocateEffectFrames, effectEvent } from "./effect-policy.js";
-import { captureEffectBaseline } from "./effect-baseline.js";
-import { createEffectFrame } from "./effect-frame.js";
+import { allocateEffectFrames, effectEvent, effectPlaybackReason } from "./effect-policy.js";
+import { createOpaqueEffectFrame } from "./effect-frame.js";
 import { createEffectGeometry, hostEffectRect } from "./effect-geometry.js";
 import { effectStockSnapshot, effectStockAllows } from "./effect-stock-snapshot.js";
 import { effectTrialStage, effectTrialStageIdentity, watchEffectTrialStage } from "./effect-trial-stage.js";
@@ -10,7 +9,7 @@ import { EffectBudget } from "./effect-profiler.js";
 const registries = new WeakMap();
 const plain = o => !!o && (Object.getPrototypeOf(o) === Object.prototype || Object.getPrototypeOf(o) === null);
 const finite = v => typeof v === "number" && Number.isFinite(v);
-const FLAGS = ["safe", "publicLink", "reducedMotion", "saveData", "hidden", "enabled", "show", "previewReady", "optIn", "constrained", "modal"];
+const FLAGS = ["safe", "publicLink", "reducedMotion", "hidden", "enabled", "show", "transportReady", "constrained", "modal"];
 const TYPES = ["state", "reply", "theme"];
 function unsafeSnapshotDescriptor(d) {
   if (!plain(d) || !plain(d.params ?? {})) return null;
@@ -41,7 +40,7 @@ function snapshotDescriptor(d) { try { return unsafeSnapshotDescriptor(d); } cat
  */
 export function createEffectRegistry({ window: host, origin, boot, load, safety, stockSnapshot, onChange = () => {}, onProfile = () => {}, onMount = () => {}, onRetire = () => {}, clock = () => host.performance.now() } = {}) {
   try { if (!host?.document || !host.document.body || registries.has(host) || typeof load !== "function" || typeof stockSnapshot !== "function" || typeof onChange !== "function" || typeof onProfile !== "function" || typeof onMount !== "function" || typeof onRetire !== "function" || typeof clock !== "function" || !safety || ["allowed", "begin", "finish", "pause", "resume"].some(k => typeof safety[k] !== "function") || ["requestAnimationFrame", "cancelAnimationFrame", "setTimeout", "clearTimeout", "MutationObserver", "ResizeObserver", "AbortController"].some(k => typeof host[k] !== "function")) return { ok: false, reason: "registry_unsupported" }; } catch { return { ok: false, reason: "registry_unsupported" }; }
-  let dead = false, blocked = null, revision = 0, last = null, lastView = null, frameSerial = 0, context = null, descriptors = [], calibration = null, baseline = null, baselineDevice = null, serial = 0, raf = null, timer = null;
+  let dead = false, blocked = null, revision = 0, last = null, lastView = null, frameSerial = 0, context = null, descriptors = [], raf = null, timer = null;
   const slots = new Map(), loads = new Set(), paused = new Map(), offs = [], observed = new Set(), failures = new Map(), results = new Map();
   let readingStock = false;
   let root, geometry, observer, resize, longTasks = null, longTasksSupported = false;
@@ -105,12 +104,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     return true;
   };
   // Display only: the closed global gate a row is waiting on, when the host knows it (else the caller's unknown).
-  const gateReason = () => {
-    if (!gatesKnown()) return null;
-    const c = context;
-    return c.safe ? "safe_mode" : c.publicLink ? "public_link" : c.reducedMotion ? "reduced_motion" : c.saveData ? "save_data"
-      : !(c.enabled && c.show) ? "disabled" : !(c.previewReady && c.optIn) ? "preview_unavailable" : null;
-  };
+  const gateReason = () => effectPlaybackReason(context);
   const clearMarker = (s, why) => {
     if (!s.token) return true;
     const token = s.token; s.token = null;
@@ -122,7 +116,9 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     s.live = false;
     if (slots.get(s.d.key) === s) slots.delete(s.d.key);
     if (s.request) { s.request.controller.abort(); if (s.request.timer !== null) host.clearTimeout(s.request.timer); }
-    if (!["disposed", "superseded", "hidden", "human_resume", "calibrating", "geometry_changed"].includes(why)) failures.set(s.d.key, { identity: signature(s.d), reason: why });
+    // A closed/unknown viewer gate revokes paint, not the effect identity. Fresh known gates
+    // may admit it again; resource failures and actual safety pauses retain their latches.
+    if (!["disposed", "superseded", "hidden", "human_resume", "geometry_changed", "gates_unknown"].includes(why)) failures.set(s.d.key, { identity: signature(s.d), reason: why });
     s.stageOff?.(); s.stageOff = null;
     s.frame?.remove(why); s.geometry?.remove();
     if (s.loadOff) s.loadOff();
@@ -141,17 +137,12 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       retire(s, why);
       if (revision !== proposed || dead !== wasDead) return false;
     }
-    if (calibration) { calibration.cancel(); calibration = null; }
     return true;
   }
   function gatesKnown() { return context && FLAGS.every(k => typeof context[k] === "boolean") && (context.openInstance === null || typeof context.openInstance === "string" && context.openInstance.length >= 1 && context.openInstance.length <= 128); }
-  function consent(d) {
-    const trial = d?.trialStage && effectTrialStageIdentity(d.trialStage);
-    return trial ? context.trialReady === true : context.previewReady === true && context.optIn === true;
-  }
   function eligible(d = null) {
-    return gatesKnown() && !context.safe && !context.publicLink && !context.reducedMotion && !context.saveData && context.enabled && context.show
-      && (d ? consent(d) : context.previewReady && context.optIn || descriptors.some(x => x.trialStage && consent(x)));
+    return gatesKnown() && !context.safe && !context.reducedMotion && context.enabled && context.show && context.transportReady
+      && (!d || !context.publicLink || d.region === "chat" && !d.trialStage);
   }
   const globalAllowed = (d = null) => eligible(d) && host.document.visibilityState === "visible";
   const signature = d => d.identity;
@@ -228,10 +219,9 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       if (!chosen.has(s.d.key) || !d || signature(d) !== signature(s.d) || d.element !== s.d.element || s.device !== device()) retire(s, "superseded");
       if (dead || proposal !== revision) return;
     }
-    if (chosen.size === 0) { if (calibration) { calibration.cancel(); calibration = null; } baseline = null; baselineDevice = null; tell(); return; }
+    if (chosen.size === 0) { tell(); return; }
     if (hidden) {
       hideGeometry();
-      if (calibration) { calibration.cancel(); calibration = null; }
       for (const s of [...slots.values()]) {
         if (!s.frame) retire(s, "hidden");
         else { if (s.hiddenSince === null) { s.hiddenSince = last; s.healthySince = null; } if (s.budget.gates({ hidden: true, reducedMotion: false, saveData: false, show: true }).remove) retire(s, "hidden"); }
@@ -245,20 +235,6 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       if (dead || proposal !== revision) return;
     }
     try { observe(); } catch { stopAll("trust_geometry_unknown"); tell(); return; }
-    if (baseline === null || baselineDevice !== device()) {
-      if (calibration && baselineDevice === device()) { tell(); return; }
-      if (!stopAll("calibrating") || dead || proposal !== revision) return;
-      const epoch = ++serial;
-      const job = captureEffectBaseline({ window: host, empty: () => !dead && slots.size === 0 && host.document.querySelectorAll("iframe.agend-effect-frame").length === 0 && globalAllowed() && !context.hidden && !!coverage(), clock: nativeClock });
-      calibration = job; baselineDevice = device();
-      job.promise.then(r => {
-        if (dead || calibration !== job || epoch !== serial) return;
-        calibration = null;
-        if (!r.ok) { blocked = r.reason; tell(); return; }
-        baseline = r.baselineFps; reconcile();
-      });
-      tell(); return;
-    }
     const max = context.constrained ? 1 : 3;
     for (const d of descriptors) {
       if (!chosen.has(d.key) || slots.has(d.key)) continue;
@@ -328,8 +304,8 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
         if (d.trialStage && !local || !current(s)) { if (current(s)) retire(s, "admission_revoked"); return; }
         if (local) fresh = local.rect;
         s.rect = fresh;
-        s.budget = new EffectBudget({ device: s.device, baselineFps: baseline, clock: nativeClock, longTasksSupported });
-        const frame = createEffectFrame({ window: host, root: local?.root ?? root, origin, boot, clock: nativeClock,
+        s.budget = new EffectBudget({ device: s.device, clock: nativeClock, longTasksSupported });
+        const frame = createOpaqueEffectFrame({ window: host, root: local?.root ?? root, origin, boot, clock: nativeClock,
           render: { code: resource.code, params: resource.params, assets: resource.assets, wants: resource.wants, instance: d.instance, width: fresh.width, height: fresh.height, dpr: dpr(s.device) },
           onReady() { if (!current(s)) return; if (!globalAllowed(d) || context.hidden || !coverage(d)) { retire(s, "hidden"); tell(); return; } const n = time(); if (n === null) { blocked = "clock_unavailable"; stopAll(blocked); tell(); return; } s.ready = true; s.readyAt = n; s.healthySince = n; publishEnv(s); schedule(); tell(); },
           onRemove(why) { if (current(s)) { retire(s, why); tell(); } },
@@ -510,7 +486,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       descriptors = ds.map(snapshotDescriptor).filter(Boolean);
       for (const [key, identity] of paused) if (!descriptors.some(d => d.key === key && signature(d) === identity)) paused.delete(key);
       for (const [key, f] of failures) if (!descriptors.some(d => d.key === key && signature(d) === f.identity)) failures.delete(key);
-      context = Object.fromEntries([...FLAGS, "trialReady", "openInstance"].map(k => [k, ctx[k]]));
+      context = Object.fromEntries([...FLAGS, "openInstance"].map(k => [k, ctx[k]]));
       reconcile(); return view();
     },
     snapshot: view,
@@ -518,11 +494,11 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
     revalidateSafety,
     /** Called only by the host's explicit human Resume UI. A descriptor update never clears this latch. */
     resume(key) {
-      if (dead || reentrantStock() || blocked && !blocked.startsWith("baseline_") || typeof key !== "string") return false;
+      if (dead || reentrantStock() || blocked || typeof key !== "string") return false;
       const proposed = revision, d = descriptors.find(d => d.key === key); if (!d || d.trialStage && !coverage(d) || revision !== proposed || receipt(safety.resume, d.id, device()) !== true || revision !== proposed) return false;
       revision++;
       if (!stopAll("human_resume")) return false;
-      if (blocked && !blocked.startsWith("baseline_")) return false; blocked = null; paused.delete(key); failures.delete(key); baseline = null; serial++; reconcile(); return true;
+      if (blocked) return false; paused.delete(key); failures.delete(key); reconcile(); return true;
     },
     /** Host-only content-free signal API. Raw pointer publishing is refused; native pointer metadata is coalesced here. */
     publish(type, fields, instance = null) {
@@ -538,7 +514,7 @@ export function createEffectRegistry({ window: host, origin, boot, load, safety,
       return sent;
     },
     dispose() {
-      if (dead) return; dead = true; revision++; serial++; stopAll("disposed");
+      if (dead) return; dead = true; revision++; stopAll("disposed");
       if (raf !== null) host.cancelAnimationFrame(raf); if (timer !== null) host.clearTimeout(timer);
       observer.disconnect(); resize.disconnect(); longTasks?.disconnect(); for (const off of offs) off();
       geometry.dispose(); root.remove(); observed.clear(); if (loads.size === 0 && registries.get(host) === api) registries.delete(host);

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

@@ -11,7 +11,7 @@ const SPECS = [
   ["confirmation", ".shell > .pending-stack, .shell .p-settings > .panel-body > .col > .pending-stack.inline"], ["preview", ".shell .chat-split > .pv-panel, .shell .chat-split > .pv-divider"],
   ["preview-menu", ".shell .thread details.pv-menu"], ["palette", ".shell .dock .cmd-palette"],
   ["drop", ".shell .p-chat > .drop-overlay"],
-  ["thread-control", ".shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
+  ["thread-control", ".shell .chat-main > .amb-note, .shell .p-chat .jump-latest, .shell .thread .msg-tools, .shell .thread .st-more, .shell .thread .cb-head, .shell .thread .cb-more, .shell .thread .tc-head, .shell .thread .tc-more, .shell .thread .pv-head, .shell .thread .pv-note, .shell .thread .pv-banner, .shell .thread .effect-trial-offer, .shell .thread .click-chip"],
   ["link", ".shell .thread .md a, .shell .thread .st-text > a.st-link, .shell .dock .prompts .txt > a.st-link"], ["attachment", ".shell .thread .atts"], ["media", ".shell .thread .att-media"],
   ["panel-navigation", ".shell .p-fleet > .seg, .shell .p-settings > .seg"],
   ["panel-content", ".shell .p-fleet > .panel-body, .shell .p-needs > .panel-body, .shell .p-settings > .panel-body, .shell .p-log > .panel-body, .shell .p-details > .panel-body, .shell .p-view > .panel-body, .shell .p-view > .v-term, .shell .p-view > .v-id, .shell .p-view > .v-card"],
@@ -20,7 +20,7 @@ const SPECS = [
 ];
 export const STOCK_TRUST_INVENTORY = Object.freeze(SPECS.map(([kind, selector]) => Object.freeze({ kind, selector })));
 const STRUCTURAL = ["html", "body", "#app", "#app > .shell", ".shell > .main", ".main > .p-chat", ".p-chat > .chat-split", ".chat-split > .chat-main"];
-const CONTENT = [".main > .conn", ".p-chat > .panel-head", ".p-chat > .chat-card", ".p-chat > .aw-chat_header", ".chat-main > .scroller", ".chat-main > .dock", ".sidebar > .side-head", ".sidebar > .side-nav", ".sidebar > .side-section", ".sidebar > .side-widget", ".sidebar > .side-foot", ".u-rail > .u-rail-head", ".u-rail > .u-rail-body"];
+const CONTENT = [".main > .conn", ".p-chat > .panel-head", ".p-chat > .chat-card", ".p-chat > .aw-chat_header", ".chat-main > .amb-note", ".chat-main > .scroller", ".chat-main > .dock", ".sidebar > .side-head", ".sidebar > .side-nav", ".sidebar > .side-section", ".sidebar > .side-widget", ".sidebar > .side-foot", ".u-rail > .u-rail-head", ".u-rail > .u-rail-body"];
 // Closed producer/topology inventory. Bare Outlet loading/error panels never become an effect surface.
 const PANELS = Object.freeze({
   fleet: { required: [".panel-head", ".seg", ".panel-body"], optional: [] },
@@ -178,9 +178,9 @@ export function stockEffectTrust(host, { frameRoot = null, ownerCss = "unknown"
     if (doc.querySelector(".agend-session-ended")) return fail("session_ended");
     let barrier = [...doc.querySelectorAll(BARRIERS)].some(el => visible(host, el));
     if (host.innerWidth < 900 && [...doc.querySelectorAll(".pv-panel")].some(el => visible(host, el))) barrier = true;
-    const active = doc.activeElement;
     if (doc.fullscreenElement || doc.pictureInPictureElement) barrier = true;
-    if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) barrier = true;
+    // Focus alone does not change protected paint bounds. Composer/controls stay clipped; editable focus
+    // separately suppresses pointer delivery in the registry, and keyboard events never enter a Worker.
     return { ok: true, rects, front: !barrier, reason: barrier ? "stock_overlay" : "stock", agentFront: !barrier && ownerCss === "off", agentReason: barrier ? "stock_overlay" : ownerCss === "off" ? "stock" : "owner_css", settingsHref: "/settings/appearance" };
   } catch { return fail("stock_trust_unknown"); }
 }

package/dist/ui/shared/effect-trial-stage.js

@@ -120,21 +120,32 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
   function bind(frame, { layer } = {}, stock) {
     if (frames.size || !["front", "behind"].includes(layer) || frame?.ownerDocument !== host.document || frame.parentElement !== stage || frame.tagName !== "IFRAME") { frame?.remove?.(); return { ok: false }; }
     // The new frame is temporarily known to this owner before the topology check; it remains hidden until sync.
-    const token = `agend-effect-trial-${identity.serial}`; let rule, removed = false;
+    const token = `agend-effect-trial-${identity.serial}`; let rule, removed = false, shown = false;
     const remove = () => {
       if (removed) return; removed = true; frame.remove(); frames.delete(handle);
       try { frame.classList.remove(token); const i = [...sheet.cssRules].indexOf(rule); if (i >= 0) sheet.deleteRule(i); } catch { /* physically removed first */ }
     };
-    const hide = () => { try { rule.style.setProperty("visibility", "hidden", "important"); if (frame.isConnected && host.getComputedStyle(frame).visibility !== "hidden") remove(); } catch { remove(); } };
+    const hide = () => {
+      shown = false;
+      try { rule.style.setProperty("visibility", "hidden", "important"); if (frame.isConnected && host.getComputedStyle(frame).visibility !== "hidden") { remove(); return false; } return !removed; } catch { remove(); return false; }
+    };
     const handle = { ok: true, element: frame, remove, hide,
       sync(proof) {
-        hide(); const r = check(proof); if (!r || removed) { invalidate("stage_unavailable"); return false; }
+        const r = check(proof); if (!r || removed) { invalidate("stage_unavailable"); return false; }
         try {
+          const matches = visibility => {
+            const s = host.getComputedStyle(frame), actual = rect(frame);
+            return !!actual && s.position === "absolute" && s.visibility === visibility && s.pointerEvents === "none" && s.zIndex === "0" && s.opacity === (layer === "front" ? "0.85" : "1") && neutral(s)
+              && ["x", "y", "width", "height"].every(k => Math.abs(actual[k] - r[k]) < 0.02) && actual.x >= r.x && actual.y >= r.y && actual.x + actual.width <= r.x + r.width && actual.y + actual.height <= r.y + r.height
+              && frame.isConnected === true && frame.ownerDocument === host.document && frame.parentElement === stage && !dead && !removed && owners.get(stage) === receipt;
+          };
+          // Reprove the current stage, clipping and actual frame every tick. Hiding/revealing an
+          // unchanged iframe each rAF can starve Firefox's OffscreenCanvas presentation.
+          if (shown && matches("visible")) return true;
+          if (!hide()) throw Error("local hiding lost");
           for (const [k, v] of Object.entries({ left: "0px", top: "0px", width: `${r.width}px`, height: `${r.height}px` })) rule.style.setProperty(k, v, "important");
-          const s = host.getComputedStyle(frame), actual = rect(frame);
-          if (!actual || s.position !== "absolute" || s.visibility !== "hidden" || s.pointerEvents !== "none" || s.zIndex !== "0" || s.opacity !== (layer === "front" ? "0.85" : "1") || !neutral(s)
-            || !["x", "y", "width", "height"].every(k => Math.abs(actual[k] - r[k]) < 0.02) || actual.x < r.x || actual.y < r.y || actual.x + actual.width > r.x + r.width || actual.y + actual.height > r.y + r.height) throw Error("local geometry lost");
-          rule.style.setProperty("visibility", "visible", "important"); return true;
+          if (!matches("hidden")) throw Error("local geometry lost");
+          rule.style.setProperty("visibility", "visible", "important"); shown = true; return true;
         } catch { invalidate("stage_unavailable"); return false; }
       },
     };

package/dist/ui/shared/fx-motion.js

@@ -0,0 +1,67 @@
+// #2117 (the user's direction, hmsg-3c166c26): agents' effects play whatever the system's reduced-motion setting says,
+// unless this device chose "Effects: follow the system's reduced-motion setting". One per-device switch (not synced:
+// it is about this screen), shared by ambient effects and Canvas Worker effects; it also works on the public link.
+export const FX_FOLLOW_REDUCED_MOTION_KEY = "agend_fx_follow_reduced_motion";
+/** The one-time chat note "your system asks for reduced motion; effects are on" was shown on this device. */
+export const FX_MOTION_NOTE_KEY = "agend_fx_motion_note_seen";
+const listeners = new Set();
+let pageChoice = null, noteShown = false;
+
+/** Whether this device asked effects to follow the system's reduced-motion setting (default: no). */
+export function followsReducedMotion() {
+  if (pageChoice !== null) return pageChoice;
+  try { return globalThis.localStorage.getItem(FX_FOLLOW_REDUCED_MOTION_KEY) === "1"; } catch { return false; }
+}
+export function setFollowsReducedMotion(on) {
+  pageChoice = !!on;
+  try { if (on) globalThis.localStorage.setItem(FX_FOLLOW_REDUCED_MOTION_KEY, "1"); else globalThis.localStorage.removeItem(FX_FOLLOW_REDUCED_MOTION_KEY); } catch { /* this page only */ }
+  for (const fn of [...listeners]) { try { fn(); } catch { /* a listener's own */ } }
+}
+/** `fn()` when the switch or the system's answer moves (this tab, another tab, the OS). Returns the unsubscribe. */
+export function onMotionChange(fn) {
+  listeners.add(fn);
+  const onStorage = (e) => {
+    if (!e || e.key === FX_FOLLOW_REDUCED_MOTION_KEY || e.key === null) {
+      pageChoice = e?.key === FX_FOLLOW_REDUCED_MOTION_KEY ? e.newValue === "1" : null;
+      fn();
+    }
+  };
+  let q = null;
+  try { q = typeof globalThis.matchMedia === "function" ? globalThis.matchMedia("(prefers-reduced-motion: reduce)") : null; } catch { q = null; }
+  try { globalThis.addEventListener && globalThis.addEventListener("storage", onStorage); } catch { /* none */ }
+  try { if (q && q.addEventListener) q.addEventListener("change", fn); } catch { /* read again on the next render */ }
+  return () => {
+    listeners.delete(fn);
+    try { globalThis.removeEventListener && globalThis.removeEventListener("storage", onStorage); } catch { /* gone */ }
+    try { if (q && q.removeEventListener) q.removeEventListener("change", fn); } catch { /* gone */ }
+  };
+}
+/** Whether the system asks for reduced motion (false when it can't say: the note is only for a clear yes). */
+export function systemReducesMotion(win = globalThis) {
+  try { return typeof win.matchMedia === "function" && win.matchMedia("(prefers-reduced-motion: reduce)").matches === true; } catch { return false; }
+}
+/**
+ * The one-time note (the user's direction): the system asks for reduced motion, this device does not follow it, and the
+ * note was not shown here before. Showing it marks it shown.
+ */
+export function motionNoteDue(win = globalThis) {
+  if (noteShown || followsReducedMotion() || !systemReducesMotion(win)) return false;
+  try { return globalThis.localStorage.getItem(FX_MOTION_NOTE_KEY) !== "1"; } catch { return true; }
+}
+export function markMotionNoteShown() {
+  noteShown = true;
+  try { globalThis.localStorage.setItem(FX_MOTION_NOTE_KEY, "1"); } catch { /* shown again next time: harmless */ }
+}
+
+/**
+ * True when effects stay still here: this device follows the system's setting and the system asks for reduced motion
+ * (or cannot say — then still, as asked for). With the switch off (the default), never.
+ */
+export function motionBlocked(win = globalThis) {
+  if (!followsReducedMotion()) return false;
+  try {
+    if (typeof win.matchMedia !== "function") return true;
+    const q = win.matchMedia("(prefers-reduced-motion: reduce)");
+    return !q || typeof q.matches !== "boolean" || q.matches;
+  } catch { return true; }
+}

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

@@ -4,6 +4,7 @@
 import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { useLease } from "./app-ctx.js";
+import { guestPage } from "./app-store.js";
 import { readStream } from "./read-stream.js";
 import { Dialog } from "./ui-dialog.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
@@ -159,11 +160,18 @@ export function UsageBody({ owner }) {
             ${!p.stale && p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : !(p.metrics || []).length ? html`<p class="note">${tn("usage.no_data")}</p>` : null}`}
       </section>`)}
       <div class="u-foot"><span class="note" title=${new Date(data.fetchedAt).toLocaleString()}>${updatedAgo(data.fetchedAt)}${data.refreshing ? html` · <span class="u-refreshing">${tn("usageRefreshing")}</span>` : null}</span>
+        ${byAgent() ? html`<a class="btn btn-ghost btn-sm u-by-agent" href="/ui/fleet/usage" title=${tn("usageByAgentTitle")}>${tn("usageByAgent")}</a>` : null}
         <button type="button" class="btn btn-sm" onClick=${() => load(true)}>${tn("usageRefresh")}</button></div>`;
   }
   return content;
 }
 
+/**
+ * #2122: the plans above are per login; each agent's own tokens and API-equivalent are Fleet → Usage — linked from the
+ * app (not View's anonymous reader, not a guest, who has no Fleet).
+ */
+const byAgent = () => !guestPage() && typeof location !== "undefined" && location.pathname.startsWith("/ui");
+
 /** `owner`: the navigation that opened it — its reads and the minute's timer live and end with it. */
 export function UsageDialog({ onClose, owner = "" }) {
   return html`<${Dialog} title=${tn("usage.title")} onClose=${onClose} wide=${true}><${UsageBody} owner=${`usage-dialog:${owner}`} /></${Dialog}>`;

package/dist/ui/shared/view-strings.js

@@ -40,6 +40,8 @@ register("view", {
   "usageMinutes": "{n} min",
   "usageHours": "{n} h",
   "usageRefresh": "Refresh",
+  "usageByAgent": "By agent →",
+  "usageByAgentTitle": "Each agent's tokens and API-equivalent (Fleet → Usage)",
   "usageHigh": "high",
   "usageNear": "near limit",
   "usageMoveUp": "Move up",
@@ -248,6 +250,8 @@ register("view", {
   "usageMinutes": "{n} 分鐘",
   "usageHours": "{n} 小時",
   "usageRefresh": "重新整理",
+  "usageByAgent": "依 agent →",
+  "usageByAgentTitle": "每個 agent 的 token 與 API 等值（Fleet → 用量）",
   "usageHigh": "偏高",
   "usageNear": "接近上限",
   "usageMoveUp": "上移",

package/dist/ui/shared/web-authorize.js

@@ -0,0 +1,151 @@
+// #1939 S2b (design §0.1): "Authorize this browser". The app shows this browser's state — verified (until when), a
+// Confirm card waiting in the account's Discord or Telegram DM (with its countdown), or why it can't be authorized here —
+// and asks for the card. The card itself is the gate: nothing here can authorize anything.
+import { html, useEffect, useRef, useState } from "./app-html.js";
+import { register, t } from "./app-i18n.js";
+import { guestPage } from "./app-store.js";
+
+register("webauth", {
+  en: {
+    verified: "Verified · speaks as you until {0}",
+    notVerified: "Not verified",
+    authorize: "Authorize this browser",
+    waiting: "Waiting for your Confirm in Discord or Telegram ({0})",
+    sent: "Sent — confirm it in your DM within 5 minutes.",
+    publicLink: "Not on the temporary public link: open the dashboard directly to authorize.",
+    reason_disabled: "Web authority is turned off.",
+    reason_loopback_only: "Only this computer can authorize, and this browser is not on it.",
+    reason_no_account: "This browser was not signed in as an account (agend web): sign in with /web to authorize.",
+    reason_not_admin: "Your account is not a fleet admin here.",
+    reason_not_admin_session: "Guests can't authorize.",
+    reason_token_rotated: "The dashboard's token changed: sign in again.",
+    reason_public_link: "Not on the temporary public link.",
+    reason_not_session: "Sign in to authorize.",
+    reason_other: "This browser can't be authorized here.",
+    refusal_pending: "A request is already waiting in your DM.",
+    refusal_rate_limited: "Three requests this hour — try again in {0} min.",
+    refusal_dm_unavailable: "Couldn't send you a DM. Open your DMs with the bot, then try again.",
+    refusal_other: "That didn't work: {0}",
+    settings: "Settings",
+  },
+  "zh-TW": {
+    verified: "已驗證 · 以你的身分發言到 {0}",
+    notVerified: "未驗證",
+    authorize: "授權這個瀏覽器",
+    waiting: "等你在 Discord 或 Telegram 按下確認（{0}）",
+    sent: "已送出——請在 5 分鐘內到私訊確認。",
+    publicLink: "臨時公開連結上無法授權：請直接開啟儀表板再授權。",
+    reason_disabled: "網頁授權已關閉。",
+    reason_loopback_only: "只有這台電腦可以授權，而這個瀏覽器不在這台電腦上。",
+    reason_no_account: "這個瀏覽器不是用帳號登入的（agend web）：請用 /web 登入後再授權。",
+    reason_not_admin: "你的帳號在這裡不是 fleet 管理者。",
+    reason_not_admin_session: "訪客無法授權。",
+    reason_token_rotated: "儀表板的 token 已變更：請重新登入。",
+    reason_public_link: "臨時公開連結上無法授權。",
+    reason_not_session: "登入後才能授權。",
+    reason_other: "這個瀏覽器在這裡無法授權。",
+    refusal_pending: "已經有一個請求在你的私訊中等待。",
+    refusal_rate_limited: "這一小時已請求三次——請 {0} 分鐘後再試。",
+    refusal_dm_unavailable: "無法私訊給你。請開放與 bot 的私訊後再試一次。",
+    refusal_other: "沒有成功：{0}",
+    settings: "設定",
+  },
+});
+const tn = (k, ...v) => t(`webauth.${k}`, ...v);
+const REASONS = ["disabled", "loopback_only", "no_account", "not_admin", "not_admin_session", "token_rotated", "public_link", "not_session"];
+// Until when: the time, with the day when it isn't today (an authorization lasts up to 48 h).
+const clock = (ms) => {
+  const d = new Date(ms), today = new Date().toDateString() === d.toDateString();
+  return today ? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    : d.toLocaleString([], { weekday: "short", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+};
+const mmss = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
+const publicLink = () => globalThis.document?.body?.dataset?.publicLink === "1";
+
+// One read per page load, shared by every line that shows it (the composer's, the session menu's): coming back to a chat
+// reads nothing (#1374). It is read again only after an ask, and while a card is pending.
+// An answer of any kind counts as this page's read (one that isn't a state hides the line); only a network failure lets a
+// later mount try again. Signed out (401: the session ended, e.g. Not me), the line goes.
+let shared = null, answered = false, inflight = null, signedOut = false;
+async function readStatus() {
+  inflight ??= (async () => {
+    try {
+      const r = await fetch("/ui/authorization", { credentials: "same-origin" });
+      answered = true;
+      if (r.status === 401) { signedOut = true; shared = null; }
+      const body = r.ok ? await r.json().catch(() => null) : null;
+      if (body && typeof body.state === "string") shared = body;
+    } catch { /* the line stays as it was; a later mount may try again */ }
+    finally { inflight = null; }
+    return shared;
+  })();
+  return inflight;
+}
+
+/** This browser's authorization, kept fresh while a card is pending (every 3 s, until it is decided or expires). */
+export function useWebAuthorization() {
+  const [st, setSt] = useState(shared), [notice, setNotice] = useState(null);
+  const [deadline, setDeadline] = useState(0), [now, setNow] = useState(() => Date.now());
+  const alive = useRef(true);
+  const load = async () => {
+    if (publicLink() || guestPage()) return;
+    const body = await readStatus();
+    if (!alive.current) return;
+    if (signedOut) { setSt(null); setNotice(null); return; }
+    if (!body) return;
+    setSt(body);
+    if (body.state !== "pending") setNotice((n) => (n === tn("sent") ? null : n));           // "Sent —" was about the card
+    if (body.state === "pending" && typeof body.expiresInMs === "number") setDeadline(Date.now() + body.expiresInMs);
+  };
+  useEffect(() => { alive.current = true; if (!answered) load(); return () => { alive.current = false; }; }, []);
+  useEffect(() => {
+    if (!st || st.state !== "pending") return undefined;
+    const tick = setInterval(() => setNow(Date.now()), 1000), poll = setInterval(load, 3000);
+    return () => { clearInterval(tick); clearInterval(poll); };
+  }, [st && st.state]);
+  // "Verified · until X" is read again at X (a page left open must not keep saying verified after it ends).
+  useEffect(() => {
+    if (!st || st.state !== "verified" || typeof st.until !== "number") return undefined;
+    const at = setTimeout(() => { resetWebAuthorization(); load(); }, Math.max(0, Math.min(st.until - Date.now() + 1000, 2 ** 31 - 1)));
+    return () => clearTimeout(at);
+  }, [st && st.state, st && st.until]);
+  const ask = async () => {
+    setNotice(null);
+    let r = null, body = null;
+    try { r = await fetch("/ui/authorization", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: "{}" }); body = await r.json(); } catch { body = null; }
+    if (r && r.ok && body && body.ok) { setNotice(tn("sent")); setSt(shared = { state: "pending", expiresInMs: body.expiresInMs }); setDeadline(Date.now() + body.expiresInMs); return; }
+    const refusal = body && body.refusal;
+    if (refusal === "rate_limited") setNotice(tn("refusal_rate_limited", Math.max(1, Math.ceil((body.retryAfterMs || 0) / 60_000))));
+    else if (refusal === "pending" || refusal === "dm_unavailable") setNotice(tn(`refusal_${refusal}`));
+    else if (REASONS.includes(refusal)) setNotice(tn(`reason_${refusal}`));
+    else setNotice(tn("refusal_other", String(refusal || (r && r.status) || "?")));
+    load();
+  };
+  return { st, notice, ask, left: deadline - now };
+}
+
+/**
+ * Forget the page's one read, so the next line that mounts reads again: Settings → Web calls it when it shows (a revoke
+ * or a changed switch there changes what the line should say). Tests use it too: each case is its own page load.
+ */
+export function resetWebAuthorization() { shared = null; answered = false; inflight = null; signedOut = false; }
+
+/** The line under the composer: verified, waiting, or "Not verified" with the button (or why not, with the fix). */
+export function AuthorizeChip() {
+  const a = useWebAuthorization();
+  if (guestPage()) return null;
+  if (publicLink()) return html`<p class="webauth-chip note" data-state="public">${tn("publicLink")}</p>`;
+  if (!a.st) return null;
+  return html`<div class="webauth-chip" data-state=${a.st.state}>${body(a)}${a.notice ? html` <span class="note" role="status">${a.notice}</span>` : null}</div>`;
+}
+
+function body(a) {
+  const st = a.st;
+  if (st.state === "verified") return html`<span class="webauth-ok">✓ ${tn("verified", clock(st.until))}</span>`;
+  if (st.state === "pending") return html`<span class="note">${tn("waiting", mmss(a.left))}</span>`;
+  if (st.reason === "not_authorized" || st.reason === "authorization_expired")
+    return html`<span class="note">${tn("notVerified")} ·</span> <button type="button" class="btn btn-sm" onClick=${a.ask}>${tn("authorize")}</button>`;
+  const why = REASONS.includes(st.reason) ? tn(`reason_${st.reason}`) : tn("reason_other");
+  // The fix, where there is one the person can take here: the switch lives in Settings → Web.
+  return html`<span class="note">${tn("notVerified")}: ${why}</span>${st.reason === "disabled" || st.reason === "loopback_only" ? html` <a href="/settings/web">${tn("settings")}</a>` : null}`;
+}