@songsid/agend 2.3.0-beta.7 → 2.3.0-beta.9

package/dist/ui/panel-fleet.js

@@ -21,6 +21,7 @@ import { confirmedWrite } from "./settings-confirm.js";
 import { OrgCanvas } from "./fleet-canvas.js";
 import { labelOf } from "/assets/instance-nav.js";
 import { CacheReport } from "./fleet-cache.js";
+import { UsageTab } from "./fleet-usage.js";
 import { BackendSelect, ModelSelect } from "./settings-dialogs.js";
 
 /** #2015: one of the largest processes as text: "python3 18.1 GB (dev-a)". */
@@ -36,7 +37,7 @@ register("fleet", {
     hostMemory_elevated: "Host memory pressure: elevated — new agents start one at a time, at least 5 s apart",
     hostMemory_critical: "Host memory pressure: critical — new agents wait for memory to recover",
     hostMemory_top: "Largest: {0}", hostMemory_ownerFleet: "the fleet", hostMemory_ownerTmux: "tmux", hostMemory_ownerOther: "not an instance",
-    title: "Fleet", tasks: "Tasks", schedules: "Schedules", teams: "Teams", org: "Org chart", cache: "Cache", config: "Config",
+    title: "Fleet", tasks: "Tasks", schedules: "Schedules", teams: "Teams", org: "Org chart", cache: "Cache", usage: "Usage", config: "Config",
     docs: "Docs", docsNewTab: "Docs (opens in a new tab)",
     newTask: "New task", newSchedule: "New schedule", newTeam: "New team",
     noTasks: "No tasks yet", noTasksHint: "Create one to coordinate fleet work.", noSchedules: "No schedules yet", noSchedulesHint: "Automate recurring work with cron.",
@@ -68,7 +69,7 @@ register("fleet", {
     hostMemory_elevated: "主機記憶體壓力偏高：新的 agent 一次啟動一個，至少間隔 5 秒",
     hostMemory_critical: "主機記憶體壓力嚴重：新的 agent 會等記憶體恢復再啟動",
     hostMemory_top: "最大：{0}", hostMemory_ownerFleet: "fleet 本身", hostMemory_ownerTmux: "tmux", hostMemory_ownerOther: "不屬於任何 instance",
-    title: "Fleet", tasks: "Tasks", schedules: "排程", teams: "Teams", org: "組織圖", cache: "快取", config: "設定",
+    title: "Fleet", tasks: "Tasks", schedules: "排程", teams: "Teams", org: "組織圖", cache: "快取", usage: "用量", config: "設定",
     docs: "文件", docsNewTab: "文件（在新分頁開啟）",
     newTask: "新增 task", newSchedule: "新增排程", newTeam: "新增 team",
     noTasks: "還沒有 task", noTasksHint: "建立一個來協調 fleet 的工作。", noSchedules: "還沒有排程", noSchedulesHint: "用 cron 自動執行例行工作。",
@@ -102,7 +103,7 @@ const DOCS_SITE = "https://songsid.github.io/AgEnD";
 export function docsUrl(language = lang()) {
   return `${DOCS_SITE}${language === "zh-TW" ? "/zh-tw" : ""}/docs/web-guide/`;
 }
-const ICONS = { tasks: "tasks", schedules: "clock", teams: "team", org: "org", cache: "chart", config: "sliders" };
+const ICONS = { tasks: "tasks", schedules: "clock", teams: "team", org: "org", cache: "chart", usage: "chart", config: "sliders" };
 const BACKENDS = ["claude-code", "codex", "opencode", "kiro-cli", "antigravity", "grok", "muse"];
 
 async function api(method, path, body, lease) {
@@ -141,7 +142,7 @@ export function FleetPanel({ route, navKey }) {
   const lease = useLease(navKey);
   const tab = route.tab;
   useEffect(() => { setTitle(`${t("fleet.title")} · ${t(`fleet.${tab}`)}`); }, [tab, navKey]);
-  const Body = { tasks: Tasks, schedules: Schedules, teams: Teams, org: Org, cache: Cache, config: Config }[tab] || Tasks;
+  const Body = { tasks: Tasks, schedules: Schedules, teams: Teams, org: Org, cache: Cache, usage: UsageTab, config: Config }[tab] || Tasks;
   // #1685: host memory pressure slowing or holding new agents — shown here, where macOS's routine "elevated" is not a chat notice.
   const { hostMemory, hostMemoryTop } = useStore(appStore);
   // #2015: and which processes hold the most, and whose — text only (never chat, #1712).
@@ -151,7 +152,7 @@ export function FleetPanel({ route, navKey }) {
     <${PanelHeader} title=${t("fleet.title")} sub=${sub}><${DocsLink} /><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
     <nav data-trust="panel-navigation" class="seg" aria-label=${t("fleet.title")}>${FLEET_TABS.map(k => html`<a key=${k} href=${fleetPath(k)} class=${`seg-item${k === tab ? " active" : ""}`}
       aria-current=${k === tab ? "page" : undefined}><${Icon} name=${ICONS[k]} size=${16} /><span>${t(`fleet.${k}`)}</span></a>`)}</nav>
-    <div data-trust="panel-content" class="panel-body"><div class=${`col${tab === "org" || tab === "cache" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
+    <div data-trust="panel-content" class="panel-body"><div class=${`col${tab === "org" || tab === "cache" || tab === "usage" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
   </div>`;
 }
 

package/dist/ui/panel-settings.js

@@ -779,13 +779,14 @@ function WebSection({ ctx, staged }) {
   const original = useMemo(() => ({
     echo: web.echo_to_channel ?? true,
     log: web.log_tab === true,                                                  // #1218: off by default
+    usagePub: web.usage_report_on_public_link === true,                         // #2122: off by default
     pub: { allow_public: (web.public_link && web.public_link.allow_public) ?? true, ttl_minutes: (web.public_link && web.public_link.ttl_minutes) ?? 120, protocol: (web.public_link && web.public_link.protocol) ?? "http2" },
     session: { absolute_hours: local.absolute_hours ?? null, idle_hours: local.idle_hours ?? null },
     terminal: { enabled: term.enabled ?? null, ttl_minutes: term.ttl_minutes ?? null },
   }), []);
   const text = (v) => (v === null || v === undefined ? "" : String(v));
   const [f, setF] = useState(() => ({
-    echo: original.echo, log: original.log, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol,
+    echo: original.echo, log: original.log, usagePub: original.usagePub, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol,
     abs: text(original.session.absolute_hours), idle: text(original.session.idle_hours),
     termOn: original.terminal.enabled !== false, termTtl: text(original.terminal.ttl_minutes),
   }));
@@ -814,6 +815,7 @@ function WebSection({ ctx, staged }) {
     const body = {
       ...(f.echo !== original.echo ? { echo_to_channel: f.echo } : {}),
       ...(f.log !== original.log ? { log_tab: f.log } : {}),
+      ...(f.usagePub !== original.usagePub ? { usage_report_on_public_link: f.usagePub } : {}),
       ...(Object.keys(publicPatch).length ? { public_link: publicPatch } : {}),
       ...(Object.keys(sessionPatch).length ? { session: { local: sessionPatch } } : {}),
       ...(Object.keys(terminalPatch).length ? { web_terminal: terminalPatch } : {}),
@@ -821,6 +823,7 @@ function WebSection({ ctx, staged }) {
     const fields = [
       ...(body.echo_to_channel !== undefined ? ["web.echo_to_channel"] : []),
       ...(body.log_tab !== undefined ? ["web.log_tab"] : []),
+      ...(body.usage_report_on_public_link !== undefined ? ["web.usage_report_on_public_link"] : []),
       ...Object.keys(publicPatch).map((k) => `web.public_link.${k}`),
       ...Object.keys(sessionPatch).map((k) => `web.session.local.${k}`),
       ...Object.keys(terminalPatch).map((k) => `web_terminal.${k}`),
@@ -862,6 +865,8 @@ function WebSection({ ctx, staged }) {
       <p class="note">${tn("webEchoHint")}</p>
       <label class="check"><input id="webLogTab" type="checkbox" checked=${f.log} onChange=${(e) => set("log")(e.target.checked)} /><span>${tn("webLogTab")}</span><${Impact} schema=${schema} field="web.log_tab" /></label>
       <p class="note">${tn("webLogTabHint")}</p>
+      <label class="check"><input id="webUsagePublic" type="checkbox" checked=${f.usagePub} onChange=${(e) => set("usagePub")(e.target.checked)} /><span>${tn("webUsagePublic")}</span><${Impact} schema=${schema} field="web.usage_report_on_public_link" /></label>
+      <p class="note">${tn("webUsagePublicHint")}</p>
       <label class="check"><input id="publicWebLink" type="checkbox" checked=${f.pub} onChange=${(e) => set("pub")(e.target.checked)} /><span>${tn("publicLink")}</span><${Impact} schema=${schema} field="web.public_link.allow_public" /></label>
       <p class="note">${tn("publicLinkHint")}</p>
       <div class="grid2">

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

@@ -39,7 +39,7 @@ export function OwnerEffects({ catalog, busy = false }) {
   useEffect(() => { life.current.alive = true; const stop = watchOwnerEffects(); return () => { life.current.alive = false; life.current.seq++; stop(); }; }, []);
   useEffect(() => {
     let live = true; const entry = getAppEffects();
-    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 && !gates.saveData }); };
+    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();
     return () => { live = false; off?.(); end?.(); };
   }, []);

package/dist/ui/settings-strings.js

@@ -15,6 +15,7 @@ register("settings", {
     publicProtocol: "Tunnel protocol",
     webEcho: "Web echo",
     webEchoHint: "Copies web messages to the bound Telegram or Discord topic. ClassicBot rooms follow it unless a room sets its own.",
+    webUsagePublic: "Usage report over the public link", webUsagePublicHint: "Fleet → Usage (up to 400 days of each agent's tokens, requests, messages and API-equivalent amounts) is offered over the temporary public link too. Off by default; guests never see it. Applies at once.",
     webLogTab: "Log tab: each agent's steps", webLogTabHint: "Shows each instance's prompts, replies, tool calls and results, and fleet events in its Log tab, read from its own transcript only while the tab is open. Secret values are masked. Also over the public link. Turning it on waits for a fleet admin's confirmation.",
     general: "General Settings",
     advanced: "Advanced",
@@ -562,6 +563,7 @@ register("settings", {
     publicProtocol: "Tunnel 協定",
     webEcho: "Web 同步",
     webEchoHint: "將網頁訊息複製到綁定的 Telegram 或 Discord 主題。ClassicBot 聊天室也照這個設定，除非該聊天室另外設定。",
+    webUsagePublic: "透過公開連結提供用量報告", webUsagePublicHint: "Fleet → 用量（最多 400 天、每個 agent 的 token、請求、訊息與依牌價換算的 API 等值）也會透過臨時公開連結提供。預設關閉；訪客一律看不到。變更立即生效。",
     webLogTab: "紀錄分頁：每個 agent 的步驟", webLogTabHint: "在每個 instance 的「紀錄」分頁顯示提示、回覆、工具呼叫與結果，以及 fleet 事件；只在分頁開著時從它自己的對話紀錄讀取。機密值會遮蔽。公開連結也看得到。開啟需 fleet admin 確認。",
     general: "一般設定",
     advanced: "進階",

package/dist/ui/shared/agend-auth.js

@@ -67,7 +67,7 @@
     bar.setAttribute("role", "alert");
     bar.setAttribute("data-trust", "session-ended");
     bar.className = "agend-session-ended";
-    bar.style.cssText = "position:fixed;top:0;left:0;right:0;z-index:2147483647;padding:10px 16px;background:#f85149;color:#fff;font:14px system-ui,sans-serif;text-align:center";
+    bar.style.cssText = "position:fixed;top:0;left:0;right:0;z-index:2147483647;padding:10px 16px;background:#f85149;color:#fff;font:14px system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\",emoji;text-align:center";
     const zh = /^zh/i.test(navigator.language || "");
     bar.append(document.createTextNode(zh ? "登入已結束。" : "Your session has ended. "));
     const link = document.createElement("a");

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

@@ -1,7 +1,7 @@
 // #1408 §3: the app's routes on the client. The same table as the server's classifier (src/web-shell-routes.ts;
 // a test runs both over one list of cases). Pure: no DOM, no history.
 
-export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "config"];
+export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "usage", "config"];
 export const SETTINGS_SECTIONS = ["device", "appearance", "agents", "bots", "classic", "general", "web", "advanced"];   // #1604: device first
 const MAX_INSTANCE_NAME = 128;
 const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;

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

@@ -30,8 +30,9 @@
 // - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
 // #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
-// #1918: traffic — a message between instances moved (SSE only: the org canvas reads /ui/traffic when it has no stream).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic"];
+// #1918: traffic — a message between instances moved; delegation — a task opened, or its report closed it (SSE only: the
+// org canvas reads /ui/traffic when it has no stream).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed

package/dist/ui/shared/app.css

@@ -453,6 +453,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg.status-line .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
 .msg.status-line .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
+/* #2147: bounded stock toolbar paint, including fixed descendants. Padding preserves focus outlines. */
+.shell .thread .msg-tools { contain: paint; overflow: clip; overflow-clip-margin: 0px; padding: 4px; margin: 0 -4px -4px; }
+.shell .thread .codeblock > .cb-head { contain: paint; overflow: clip; overflow-clip-margin: 0px; }
 .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
 @media (hover: none) { .msg-tools { opacity: 1; } }
 /* Delivery ticks: always visible, in colour, with their label on hover and for screen readers (rough edge 10). */
@@ -559,7 +562,7 @@ html.lb-open .scroller { overflow: hidden; }
    these tokens. The surface paints its own background (the page's body is not its). */
 .p-chat.th { background: var(--bg); color: var(--text); }
 .p-chat.th .msg.user .body { border-radius: var(--bubble-radius, var(--r-xl)); }
-.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea { font-family: system-ui, -apple-system, "Segoe UI", sans-serif, var(--font-emoji); }
 .p-chat.th-font-mono .thread, .p-chat.th-font-mono .composer textarea { font-family: var(--font-mono); }
 .p-chat.th-bubble-thin .msg.user .body { box-shadow: inset 0 0 0 1px var(--border); }
 .p-chat.th-bubble-accent .msg.user .body { box-shadow: inset 0 0 0 1px var(--accent); }
@@ -1217,7 +1220,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-team-name { fill: var(--text); font-size: 13px; font-weight: 600; }
 .oc-team-meta { fill: var(--text-3); font-size: 11px; }
 .oc-team-sum { fill: var(--text-2); font-size: 11.5px; }
-.oc-team.dim { opacity: 0.55; }
+.oc-team.dim, .oc-team-head.dim { opacity: 0.55; }
 .oc-node.dim { opacity: 0.4; }
 .oc-node { cursor: pointer; }
 .oc-node[role="img"] { cursor: default; }
@@ -1263,7 +1266,11 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-flow.h-broadcast { stroke: var(--fx-broadcast); } .oc-flow.h-team { stroke: var(--fx-team); stroke-width: 3.5; }
 .oc-flow.ph-live { stroke-dasharray: 7 6; animation: oc-dash 0.9s linear infinite; }
 .oc-flow.ph-queued { stroke-dasharray: 2 5; opacity: 0.8; }
-.oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 3s ease-out forwards; }
+.oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 12s ease-out forwards; }
+/* #1918 review: the work — a delegation in progress (a slow dash, kept until its report), its report coming back, none. */
+.oc-flow.ph-work { stroke-dasharray: 10 7; stroke-width: 3; animation: oc-dash 2.4s linear infinite; }
+.oc-flow.ph-return { stroke-width: 3; animation: oc-fade 2.4s ease-out forwards; }
+.oc-flow.ph-stale { stroke: var(--text-3); stroke-dasharray: 3 6; animation: oc-fade 12s ease-out forwards; }
 .oc-ah.h-task { fill: var(--fx-task); } .oc-ah.h-send { fill: var(--fx-send); } .oc-ah.h-report { fill: var(--fx-report); }
 .oc-ah.h-broadcast { fill: var(--fx-broadcast); } .oc-ah.h-team { fill: var(--fx-team); } .oc-ah.h-fading { fill: var(--text-3); }
 .oc-pulse.h-task { fill: var(--fx-task); } .oc-pulse.h-send { fill: var(--fx-send); } .oc-pulse.h-report { fill: var(--fx-report); }
@@ -1272,16 +1279,19 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-badge rect { fill: var(--surface-2); stroke: var(--border); } .oc-badge text { fill: var(--text-2); font-size: 10.5px; }
 @keyframes oc-dash { to { stroke-dashoffset: -26; } }
 @keyframes oc-fade { from { opacity: 0.8; } to { opacity: 0.15; } }
-.oc-legend { position: absolute; left: var(--s-3); bottom: var(--s-3); max-width: calc(100% - 220px);
-  font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 10px; }
-.oc-legend summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text); }
-.oc-legend[open] summary { margin-bottom: 4px; }
+/* #2052: the key is a strip under the toolbar (its toggle is in the toolbar), never over the canvas. */
+.oc-legend { margin: 0 0 var(--s-2); font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-md); padding: 6px 10px; }
+.oc-key.on { border-color: var(--accent); }
 .oc-lg-rows { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
 .oc-lg { display: inline-flex; align-items: center; gap: 6px; }
 .oc-sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; background: var(--text-3); }
 .oc-sw.h-task { background: var(--fx-task); } .oc-sw.h-send { background: var(--fx-send); } .oc-sw.h-report { background: var(--fx-report); } .oc-sw.h-broadcast { background: var(--fx-broadcast); }
 .oc-sw.ph-queued { background: repeating-linear-gradient(90deg, var(--text-2) 0 3px, transparent 3px 7px); }
 .oc-sw.ph-fading { opacity: 0.5; }
+.oc-sw.ph-work { background: repeating-linear-gradient(90deg, var(--fx-task) 0 6px, transparent 6px 9px); height: 4px; }
+.oc-sw.ph-return { height: 4px; }
+.oc-sw.ph-stale { background: repeating-linear-gradient(90deg, var(--text-3) 0 2px, transparent 2px 6px); }
 .oc-live { gap: 6px; }
 .oc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
 .oc-live.on .oc-live-dot { background: var(--ok); }
@@ -1291,14 +1301,16 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 @media (prefers-reduced-motion: reduce) {
   .oc-flow.ph-live { animation: none; stroke-dasharray: none; }
   .oc-flow.ph-fading { animation: none; opacity: 0.4; }
+  .oc-flow.ph-work { animation: none; }
+  .oc-flow.ph-return, .oc-flow.ph-stale { animation: none; opacity: 0.5; }
   .oc-pulse { display: none; }
 }
 @media (max-width: 640px) {
   .oc-stage { height: calc(100dvh - 248px); min-height: 340px; }
   .oc-find { flex: 1 1 150px; }
-  .oc-tools { margin-left: 0; width: 100%; flex-wrap: nowrap; }
+  /* #2052: Find, Key, Live and Canvas/List are wider than a phone together: the row wraps (nothing is cut off). */
+  .oc-tools { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: var(--s-2); }
   .oc-mini { display: none; }
-  .oc-legend { max-width: calc(100% - 24px); gap: 2px var(--s-2); }
 }
 /* A phone: Fleet's five tabs fit when only the open one shows its label (the others keep theirs for screen readers). */
 @media (max-width: 479px) {
@@ -1341,6 +1353,73 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .ch-bar .btn { min-height: var(--tap); }
 }
 
+/* ── #2122: Fleet → Usage. A categorical palette kept apart from the state colours (Okabe–Ito hues, tuned per mode for
+   contrast); every series also has a text label, so colour is never the only cue. ── */
+.us { --us-0: #56b4e9; --us-1: #e69f00; --us-2: #2bc48a; --us-3: #f0e442; --us-4: #e78ac3; --us-5: #94a3b8; --us-heat: #56b4e9;
+  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .us { --us-0: #0072b2; --us-1: #c25400; --us-2: #007a5a; --us-3: #8a6d00; --us-4: #b0457a; --us-5: #64748b; --us-heat: #0072b2; } }
+:root[data-theme="light"] .us { --us-0: #0072b2; --us-1: #c25400; --us-2: #007a5a; --us-3: #8a6d00; --us-4: #b0457a; --us-5: #64748b; --us-heat: #0072b2; }
+.us-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
+.us-group { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
+.us-group select, .us-custom input { min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
+.us-group select:focus, .us-custom input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-dim); outline: none; }
+.us-csv { margin-left: auto; }
+.us-custom { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
+.us-custom label { display: inline-flex; flex-direction: column; gap: 2px; color: var(--text-2); }
+.us-basis { font-size: var(--fs-sm); color: var(--text); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--r-sm); }
+.us-fresh { font-size: var(--fs-xs); }
+.us-partial { font-size: var(--fs-sm); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
+.us-unpriced { font-size: var(--fs-xs); }
+.us-scan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.us-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
+.us-totals .ch-metric dd { font-size: var(--fs-lg); }
+.us-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
+.us-table th, .us-table td { padding: var(--s-2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
+.us-table thead th { font-size: 11px; font-weight: var(--fw-regular); color: var(--text-3); }
+.us-table .num { text-align: right; white-space: nowrap; }
+.us-name { min-width: 0; max-width: 360px; font-weight: var(--fw-regular); }
+.us-name .mono { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
+.us-bar { display: block; width: 100%; height: 6px; margin: 4px 0; }
+.us-bar-bg { fill: var(--surface-2); } .us-bar-fg { fill: var(--us-0); }
+.us-meta { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
+.us-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.us-trend, .us-heat { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
+.us-trend h3, .us-heat h3, .us-rest h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
+.us-scroll { overflow-x: auto; max-width: 100%; }
+.us-chart, .us-heatmap { display: block; }
+.us-axis { font-size: 9px; fill: var(--text-3); }
+.us-s0 { fill: var(--us-0); background: var(--us-0); } .us-s1 { fill: var(--us-1); background: var(--us-1); } .us-s2 { fill: var(--us-2); background: var(--us-2); }
+.us-s3 { fill: var(--us-3); background: var(--us-3); } .us-s4 { fill: var(--us-4); background: var(--us-4); } .us-s5 { fill: var(--us-5); background: var(--us-5); }
+.us-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); list-style: none; padding: 0; margin: 0; font-size: var(--fs-xs); }
+.us-legend li { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; overflow-wrap: anywhere; }
+.us-sw, .us-h-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
+.us-h { fill: var(--us-heat); }
+.us-h.l1, .us-h-sw.l1 { opacity: 0.45; } .us-h.l2 { opacity: 0.65; } .us-h.l3 { opacity: 0.85; } .us-h.l4, .us-h-sw.l4 { opacity: 1; }
+.us-h-sw.l4 { background: var(--us-heat); }
+/* Read with nothing used: a solid grey cell. Not collected: an empty dashed outline. */
+.us-h.idle { fill: var(--text-3); opacity: 0.35; }
+.us-h-sw.idle { background: var(--text-3); opacity: 0.35; }
+.us-h.gap { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 2; }
+.us-h-sw.gap { border: 1px dashed var(--text-3); }
+.us-grid, .us-base { stroke: var(--border); stroke-width: 1; }
+.us-grid { stroke-dasharray: 3 3; }
+.us-scale, .us-earlier { font-size: var(--fs-xs); }
+.us-heat-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); }
+.us-rest .row-item { font-size: var(--fs-xs); }
+.u-by-agent { margin-left: auto; }
+@media (max-width: 699px) {
+  .us-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .us-csv { margin-left: 0; }
+  .us-bar-top .btn { min-height: var(--tap); }
+  /* Rows become cards: each value with its label. */
+  .us-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .us-table, .us-table tbody, .us-table tr, .us-table th, .us-table td { display: block; width: 100%; }
+  .us-table tr { margin-bottom: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
+  .us-table th, .us-table td { border: 0; padding: 2px 0; max-width: none; }
+  .us-table td { display: flex; justify-content: space-between; gap: var(--s-3); }
+  .us-table td::before { content: attr(data-label); color: var(--text-3); text-align: left; }
+}
+
 /* ── Chat commands and quick actions (#1269) ── */
 .hd-chip { margin-left: var(--s-2); padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-full); background: transparent; color: var(--text-2);
   font-size: var(--fs-xs); line-height: 20px; cursor: pointer; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
@@ -1373,6 +1452,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* #1630: a Discord server emoji in a chat message, the size of the text around it. */
 .md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }
+.md .emoji-text { color: var(--text-2); }
 /* #1682: a mention, as Discord draws one — accent text on a tint of it; the id (or the Telegram handle) on hover. */
 .md .mention { display: inline; padding: 0 0.2em; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-dim);
   font-weight: var(--fw-medium); white-space: nowrap; }

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

@@ -31,7 +31,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
     const effects = s?.metadata?.effects ?? [], known = registry?.snapshot?.() ?? [];
     const rows = effects.map(p => {
       const b = s.bindings.get(p.id), row = known.find(r => b && r.key === b.key && r.id === p.id);
-      if (row && !s.error && !playbackUnavailable) return row.reason == null && row.phase == null ? { ...row, reason: "calibrating" } : row;
+      if (row && !s.error && !playbackUnavailable) return row.reason == null && row.phase == null ? { ...row, phase: "loading" } : row;
       return { id: p.id, key: b?.key ?? null, verdict: "off", phase: null, quality: null,
         reason: s.error ?? playbackUnavailable ?? effectPlaybackReason(lastContext) ?? (!p.manifest.regions.includes("chat") ? "region_unavailable" : "runtime_unavailable") };
     });
@@ -141,7 +141,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
     if (identity.scope === "owner") trial = make("trialSource", createEffectTrialSource)({ window: host, current: () => {
       if (!alive()) return false; const v = observe(), c = v.context;
       return alive() && c.enabled === true && c.show === true && c.transportReady === true
-        && c.safe === false && c.publicLink === false && c.reducedMotion === false && c.saveData === false && c.hidden === false;
+        && c.safe === false && c.publicLink === false && c.reducedMotion === false && c.hidden === false;
     }, ownerCurrent: (s, name) => sourceAlive(s) && s.name === name,
       stock: () => registry.frameRoot ? make("stock", stockEffectTrust)(host, { frameRoot: registry.frameRoot, ownerCss: observe().ownerCss }) : null,
       readResource: (spec, signal) => typeof loader.trialResourceSettled === "function" ? loader.trialResourceSettled(spec, signal) : Promise.resolve(null),
@@ -210,7 +210,7 @@ export function createAppEffectRuntime({ window: host, current, observe, onChang
       // Metadata describes placements, not executable resources. Its existing session/epoch/current and
       // shared settled-lane fences apply even when this viewer has declined playback. No code is fetched here.
       if (!pending) {
-        const ownerNeeds = identity.scope === "owner" && !c.publicLink && c.enabled && c.show && c.transportReady && !c.safe && !c.reducedMotion && !c.saveData && !c.hidden && personal?.needsMetadata() === true, chatNeeds = sourceAlive(s) && !s.error && !s.metadata;
+        const ownerNeeds = identity.scope === "owner" && !c.publicLink && c.enabled && c.show && c.transportReady && !c.safe && !c.reducedMotion && !c.hidden && personal?.needsMetadata() === true, chatNeeds = sourceAlive(s) && !s.error && !s.metadata;
         if (!alive() || revision !== before || s !== source) { if (alive()) queueSync(); return; }
         if (ownerNeeds && (!chatNeeds || lastMetadata !== "owner")) void readPersonal();
         else if (chatNeeds) void read(s);

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

@@ -138,7 +138,7 @@ export function createChatEffectRuntime({ window: host, name, element, current,
     const stamp = JSON.stringify(ctx);
     if (stamp !== lastContext) { lastContext = stamp; registry.update(descriptors(), ctx); }
     emit();
-    if (!metadata && !active && ctx.enabled && ctx.show && ctx.transportReady && !ctx.safe && !ctx.publicLink && !ctx.reducedMotion && !ctx.saveData && !ctx.hidden) void read();
+    if (!metadata && !active && ctx.enabled && ctx.show && ctx.transportReady && !ctx.safe && !ctx.publicLink && !ctx.reducedMotion && !ctx.hidden) void read();
   }
   async function read() {
     if (!alive() || error || active) return;

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

@@ -66,8 +66,8 @@ export const EFFECT_BLOCK_REASONS = Object.freeze([
 
 /** Diagnostic names only; the admission policy below still validates every required flag. */
 export function effectPlaybackReason(c) {
-  if (!c || ["safe", "publicLink", "reducedMotion", "saveData", "hidden", "enabled", "show", "transportReady"].some(k => typeof c[k] !== "boolean")) return "gates_unknown";
-  return c.safe ? "safe_mode" : c.reducedMotion ? "reduced_motion" : c.saveData ? "save_data"
+  if (!c || ["safe", "publicLink", "reducedMotion", "hidden", "enabled", "show", "transportReady"].some(k => typeof c[k] !== "boolean")) return "gates_unknown";
+  return c.safe ? "safe_mode" : c.reducedMotion ? "reduced_motion"
     : c.hidden ? "hidden" : !c.enabled ? "unsupported_host" : !c.show ? "disabled" : !c.transportReady ? "transport_unavailable" : null;
 }
 
@@ -77,13 +77,12 @@ export function allocateEffectFrames(descriptors, context) {
   if (!Array.isArray(descriptors) || descriptors.length > 128 || !plain(context)) return [];
   const keys = new Set(), duplicate = new Set();
   for (const d of descriptors) if (d && typeof d.key === "string") { if (keys.has(d.key)) duplicate.add(d.key); keys.add(d.key); }
-  const result = descriptors.map(d => ({ key: d?.key, verdict: "off", reason: "unknown", queuePos: null }));
-  const gates = ["safe", "publicLink", "reducedMotion", "saveData", "hidden", "enabled", "show", "transportReady", "constrained", "modal"];
-  if (gates.some(k => typeof context[k] !== "boolean") || context.openInstance !== null && !instanceName(context.openInstance)) return result;
+  const result = descriptors.map(d => ({ key: d?.key, verdict: "off", reason: "descriptor_invalid", queuePos: null }));
+  const gates = ["safe", "publicLink", "reducedMotion", "hidden", "enabled", "show", "transportReady", "constrained", "modal"];
+  if (gates.some(k => typeof context[k] !== "boolean") || context.openInstance !== null && !instanceName(context.openInstance)) return result.map(r => ({ ...r, reason: "gates_unknown" }));
   let global = null;
   if (context.safe === true) global = "safe_mode";
   else if (context.reducedMotion === true) global = "reduced_motion";
-  else if (context.saveData === true) global = "save_data";
   else if (context.hidden === true) global = "hidden";
   else if (context.enabled !== true) global = "unsupported_host";
   else if (context.show !== true) global = "disabled";

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

@@ -12,10 +12,14 @@ const id = v => typeof v === "string" && /^[0-9a-f]{32}$/.test(v);
 /** One host-owned mount. The registry must remove the frame when remove is true, never merely hide it. */
 export class EffectBudget {
   constructor({ device, baselineFps, clock = () => performance.now(), longTasksSupported = false } = {}) {
-    if (!deviceClass(device) || !finite(baselineFps) || baselineFps <= 0 || baselineFps > 1000 || typeof clock !== "function" || typeof longTasksSupported !== "boolean") throw new TypeError("effect budget options");
+    if (!deviceClass(device) || baselineFps !== undefined && (!finite(baselineFps) || baselineFps <= 0 || baselineFps > 1000) || typeof clock !== "function" || typeof longTasksSupported !== "boolean") throw new TypeError("effect budget options");
     this.device = device;
-    // Measured by the host while NO effects are mounted; never author-supplied or learned from a running effect.
-    this.fpsFloor = Math.min(EFFECT_BUDGETS[device].fps, baselineFps * 0.9);
+    // Legacy host measurements may still be supplied by pure probes. Product playback starts
+    // immediately and learns cadence concurrently from host rAF, never Worker timing.
+    // Freeze before the first report: a mount's profile floor must remain coherent.
+    this.fpsFloor = baselineFps === undefined ? null : Math.min(EFFECT_BUDGETS[device].fps, baselineFps * 0.9);
+    this.cadence = [];
+    this.cadenceAt = null;
     this.clock = clock;
     this.longTasksSupported = longTasksSupported;
     this.last = null;
@@ -58,7 +62,16 @@ export class EffectBudget {
   frame() {
     const now = this.time();
     if (now === null) return this.stop("clock_unavailable");
-    if (this.verdict === "paused" || this.hiddenAt !== null || now < this.epoch + 1000) return this.snapshot();
+    if (this.verdict === "paused" || this.hiddenAt !== null) return this.snapshot();
+    if (this.fpsFloor === null) {
+      const interval = this.cadenceAt === null ? null : now - this.cadenceAt;
+      this.cadenceAt = now;
+      if (interval !== null && interval >= 1 && interval <= 1000) {
+        if (this.cadence.length === 256) this.cadence.shift();
+        this.cadence.push(interval);
+      }
+    }
+    if (now < this.epoch + 1000) return this.snapshot();
     this.trim(now);
     if (this.frames.at(-1) !== now) {
       if (this.frames.length >= 2048) this.overflow = true;
@@ -88,10 +101,10 @@ export class EffectBudget {
     const now = this.time();
     if (now === null) return this.stop("clock_unavailable");
     if (!plain(raw)) return this.stop("gates_unknown");
-    const { hidden, reducedMotion, saveData, show } = raw;
-    if ([hidden, reducedMotion, saveData, show].some(v => typeof v !== "boolean")) return this.stop("gates_unknown");
+    const { hidden, reducedMotion, show } = raw;
+    if ([hidden, reducedMotion, show].some(v => typeof v !== "boolean")) return this.stop("gates_unknown");
     if (this.verdict === "paused") return this.snapshot();
-    if (reducedMotion || saveData || !show) return this.stop(reducedMotion ? "reduced_motion" : saveData ? "save_data" : "viewer_off");
+    if (reducedMotion || !show) return this.stop(reducedMotion ? "reduced_motion" : "viewer_off");
     if (hidden && this.hiddenAt === null) this.hiddenAt = now;
     if (hidden && now - this.hiddenAt >= 10000) return this.stop("hidden");
     if (!hidden && this.hiddenAt !== null) {
@@ -105,6 +118,7 @@ export class EffectBudget {
       this.overflow = false;
       this.badWindows = 0;
       this.metrics = null;
+      this.cadence = []; this.cadenceAt = null;
     }
     return this.snapshot();
   }
@@ -123,8 +137,16 @@ export class EffectBudget {
     const hostMs = this.longTasksSupported ? sum(null) : null;
     const ownMs = this.longTasksSupported && this.tasks.some(t => t.attributed) ? sum(true) : null;
     const limits = EFFECT_BUDGETS[this.device];
-    const bad = this.overflow || fps < this.fpsFloor || hostMs !== null && hostMs > limits.longTaskMsPerSecond;
-    this.metrics = { at: now, hostFps: fps, hostLongTaskMsPerSecond: hostMs, attributedLongTaskMsPerSecond: ownMs,
+    if (this.fpsFloor === null && this.cadence.length >= 3) {
+      // Faster observed intervals distinguish intermittent jank from a genuinely slower
+      // display. This is a live reference, not an empty-page health certification.
+      const sorted = [...this.cadence].sort((a, b) => a - b);
+      const interval = sorted[Math.ceil(sorted.length * (sorted.length < 8 ? 0.5 : 0.2)) - 1];
+      this.fpsFloor = Math.min(limits.fps, 900 / interval);
+      this.cadence = []; this.cadenceAt = null;
+    }
+    const bad = this.overflow || this.fpsFloor === null || fps < this.fpsFloor || hostMs !== null && hostMs > limits.longTaskMsPerSecond;
+    this.metrics = this.fpsFloor === null ? null : { at: now, hostFps: fps, hostLongTaskMsPerSecond: hostMs, attributedLongTaskMsPerSecond: ownMs,
       attribution: ownMs === null ? "unknown" : "observed", fpsFloor: this.fpsFloor, windowMs: 2000 };
     this.overflow = false;
     if (bad) {