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

package/dist/ui/fleet-usage.js

@@ -0,0 +1,401 @@
+// #2122: Fleet → Usage (/ui/fleet/usage) — each agent's tokens, requests, delivered messages and their API-equivalent
+// at list price over a range of days, ranked; a daily trend, a calendar heatmap and a CSV of the same answer. Behind the
+// session gate (/ui/js/), imported by the Fleet panel. Read-only: it changes nothing.
+//
+// One GET /ui/usage-report?… per opening and per choice of range or grouping (a person's navigation); no timer re-reads
+// it (#1374). Every amount says what it is: "API-equivalent at list price — not money spent" (design §3).
+import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
+import { Icon } from "/assets/ui-icons.js";
+import { money, tokens } from "./fleet-cache.js";
+
+register("fusage", {
+  en: {
+    range: "Range", today: "Today", r7d: "7 days", month: "This month", all: "All", custom: "Custom", from: "From", to: "To", apply: "Apply",
+    group: "Group by", g_instance: "Agent", g_backend: "Backend", g_model: "Model", g_profile: "Credential profile", g_team: "Team (as configured now)",
+    csv: "Download CSV", basis: "API-equivalent at list price (checked {0}) — not money spent. Subscriptions are not billed per token.",
+    amount: "API-equivalent", input: "Input", output: "Output", read: "Cache read", write: "Cache write", total: "Total tokens", requests: "Requests", messages: "Messages",
+    notPriced: "not priced", partial: "partial", noTeam: "(no team)", unknown: "unknown",
+    f_cache_write_not_reported: "cache writes not reported (Codex) — an estimate", f_not_priced: "not priced: {0}", f_source_unknown: "read before backend and profile were recorded",
+    scanning: "Scanning — totals may still grow.", updated: "Updated {0} · read every 10 min", since: "Collected since {0}", notYet: "Not collected yet",
+    refresh: "Refresh",
+    notMeasured: "Not measured", nm_credit_billed: "Kiro is credit-billed and records no tokens", nm_unsupported: "AgEnD can't read this CLI's usage yet", nm_no_data: "nothing read yet",
+    shared: "shares its working directory with {0}; their transcripts can't be told apart",
+    empty: "Nothing recorded yet", emptyHint: "Usage is read from Claude Code and Codex transcripts, from when the fleet started.",
+    blocked: "Not offered over the public link", blockedHint: "Usage is offered over the public link only when \"Usage report over the public link\" is on in Settings → Web — on the dashboard reached directly, on the computer running AgEnD.",
+    openSettings: "Open Settings → Web on that computer",
+    partialDays: "Daily detail from {0}: the earlier days in this range are too many rows to send. The rows and totals above cover the whole range; the trend, the heatmap and the CSV start at {0}.",
+    csvFrom: "Download CSV (from {0})",
+    noDaily: "No daily detail for this range: even its latest day has more rows than one answer carries, and a part of a day is never shown as the day. The rows and totals above are complete; the trend, the heatmap and the CSV need the daily detail and are not shown.",
+    zoneChanged: "The fleet's timezone changed: these days were made in {0}. A day keeps the zone it was made in, so a day made in two shows each part (see the heatmap). Days from now on are in {1}.",
+    dayTokens: "{0} tokens", partNotPriced: "part not priced",
+    trendUnpriced: "Not priced, so not in these bars: {0}. Their tokens are in the rows and the heatmap.",
+    off: "Usage is turned off", offHint: "web.usage_panel: false hides it.",
+    trend: "Daily trend", trendTokens: "tokens (nothing here is priced)", others: "Others", heatmap: "Daily totals",
+    h_idle: "{0}: read, nothing used", h_gap: "{0}: not collected", h_day: "{0}: {1}", keyGap: "not collected", keyIdle: "read, nothing used", keyUsed: "used (stronger: more tokens)", scale: "Tallest day: {0}", earlier: "← Scroll for earlier days",
+    trendLabel: "Daily {0} for the top {1} and others, {2} to {3}.", trendLabelAll: "Daily {0} for {1} agents, {2} to {3}.", heatLabel: "{0} days; {1} with usage, {2} not collected.",
+    zoneNote: "Days in {0}, whole hours.", teamsNote: "Teams as configured now.",
+    noRows: "Nothing in this range.",
+  },
+  "zh-TW": {
+    range: "期間", today: "今天", r7d: "7 天", month: "本月", all: "全部", custom: "自訂", from: "從", to: "到", apply: "套用",
+    group: "分組", g_instance: "Agent", g_backend: "Backend", g_model: "模型", g_profile: "憑證 profile", g_team: "Team（依目前設定）",
+    csv: "下載 CSV", basis: "依牌價換算的 API 等值（查證日期 {0}）——不是實際花費。訂閱方案不按 token 計費。",
+    amount: "API 等值", input: "輸入", output: "輸出", read: "快取讀取", write: "快取寫入", total: "token 總計", requests: "請求數", messages: "訊息數",
+    notPriced: "未定價", partial: "部分", noTeam: "（不屬於任何 team）", unknown: "未知",
+    f_cache_write_not_reported: "未回報快取寫入（Codex）——是估算", f_not_priced: "未定價：{0}", f_source_unknown: "讀取時尚未記錄 backend 與 profile",
+    scanning: "掃描中——總數可能還會增加。", updated: "更新於 {0} · 每 10 分鐘讀取一次", since: "自 {0} 起收集", notYet: "尚未收集",
+    refresh: "重新整理",
+    notMeasured: "未量測", nm_credit_billed: "Kiro 以 credit 計費，不記錄 token", nm_unsupported: "AgEnD 目前還讀不到這個 CLI 的用量", nm_no_data: "尚未讀到任何資料",
+    shared: "與 {0} 共用工作目錄，無法分辨各自的 transcript",
+    empty: "還沒有任何紀錄", emptyHint: "用量從 Claude Code 與 Codex 的 transcript 讀取，自 fleet 啟動起計。",
+    blocked: "公開連結上不提供", blockedHint: "只有在設定 → 網頁裡開啟「透過公開連結提供用量報告」時，公開連結才會提供用量；這個設定要在執行 AgEnD 的那台電腦上、直接開啟的儀表板裡變更。",
+    openSettings: "在那台電腦上開啟設定 → 網頁",
+    partialDays: "每日明細從 {0} 起：這段期間更早的日子資料列太多，無法一次送出。上方的各列與總計涵蓋整段期間；趨勢、熱度圖與 CSV 則從 {0} 開始。",
+    csvFrom: "下載 CSV（從 {0} 起）",
+    noDaily: "這段期間沒有每日明細：連最近的一天，資料列都超過一次回答能帶的數量，而不完整的一天絕不會被當成那一天顯示。上方的各列與總計是完整的；趨勢、熱度圖與 CSV 需要每日明細，所以不顯示。",
+    zoneChanged: "fleet 的時區曾經變更：這些日子分別依 {0} 計算。每一天保留它當初計算時的時區，所以跨兩個時區的日子會分別列出各部分（見熱度圖）。之後的日子依 {1} 計算。",
+    dayTokens: "{0} 個 token", partNotPriced: "部分未定價",
+    trendUnpriced: "未定價，所以不在這些長條裡：{0}。它們的 token 列在各列與熱度圖中。",
+    off: "用量已關閉", offHint: "已設定 web.usage_panel: false。",
+    trend: "每日趨勢", trendTokens: "token（這裡沒有任何已定價的用量）", others: "其他", heatmap: "每日總計",
+    h_idle: "{0}：已讀取，沒有用量", h_gap: "{0}：未收集", h_day: "{0}：{1}", keyGap: "未收集", keyIdle: "已讀取，沒有用量", keyUsed: "有用量（顏色越濃，token 越多）", scale: "最高的一天：{0}", earlier: "← 往左捲動可看較早的日子",
+    trendLabel: "前 {1} 名與其他的每日{0}，{2} 至 {3}。", trendLabelAll: "{1} 個 agent 的每日{0}，{2} 至 {3}。", heatLabel: "{0} 天；{1} 天有用量，{2} 天未收集。",
+    zoneNote: "日期依 {0}，以整點小時計。", teamsNote: "Team 依目前設定。",
+    noRows: "這段期間沒有任何紀錄。",
+  },
+});
+const tu = (k, ...v) => t(`fusage.${k}`, ...v);
+
+export const USAGE_RANGES = ["today", "7d", "month", "all", "custom"];
+export const USAGE_GROUPS = ["instance", "backend", "model", "profile", "team"];
+const TOP = 5;
+const DATE = /^\d{4}-\d{2}-\d{2}$/;
+const n = (v) => Number(v || 0).toLocaleString("en-US");
+
+/** The query for a choice of range and grouping. */
+export function usageQuery({ range, group, from, to }) {
+  const q = new URLSearchParams({ range, group });
+  if (range === "custom") { q.set("from", from); q.set("to", to); }
+  return `/ui/usage-report?${q}`;
+}
+
+/** A row's or a day's amount as shown: the API-equivalent, or why there is none. */
+export function amountText(r) {
+  if (r.amount === null || r.amount === undefined) return tu("notPriced");
+  return `${money(r.amount)}${r.priced === "partial" ? ` (${tu("partial")})` : ""}`;
+}
+/** A group key as shown: "" is no team, "unknown" says what it is. */
+export function keyText(group, key) {
+  if (group === "team" && key === "") return tu("noTeam");
+  if (key === "unknown") return tu("unknown");
+  return key;
+}
+const writes = (r) => (r.cacheWrite5m || 0) + (r.cacheWrite1h || 0) + (r.cacheWrite || 0);
+function flagText(f, r) {
+  if (f === "not_priced") return tu("f_not_priced", (r.unpriced || []).join(", "));
+  return ["cache_write_not_reported", "source_unknown"].includes(f) ? tu(`f_${f}`) : f;
+}
+
+// ── CSV (design §4): the daily rows of this same answer; messages on their own rows (they are per agent, not per model).
+const CSV_COLUMNS = ["date", "zone", "instance", "backend", "model", "tier", "profile", "input", "output", "cache_read", "cache_write_5m", "cache_write_1h", "cache_write", "requests", "messages", "amount", "basis", "flags"];
+/** One CSV field: quoted when it must be, and never read as a formula by a spreadsheet (=, +, -, @, tab, CR first). */
+export function csvField(v) {
+  let s = v === null || v === undefined ? "" : String(v);
+  if (/^[=+\-@\t\r]/.test(s)) s = `'${s}`;
+  return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+}
+export function usageCsv(report) {
+  const lines = [CSV_COLUMNS.join(",")];
+  for (const d of report.daily || []) {
+    lines.push([d.date, d.zone, d.instance, d.backend, d.model, d.tier, d.profile, d.input, d.output, d.cacheRead, d.cacheWrite5m, d.cacheWrite1h, d.cacheWrite,
+      d.requests, "", d.amount === null ? "" : d.amount.toFixed(6), report.basis, (d.flags || []).join(" ")].map(csvField).join(","));
+  }
+  for (const m of report.messagesDaily || []) {
+    lines.push([m.date, report.zone, m.instance, "", "", "", "", "", "", "", "", "", "", "", m.count, "", report.basis, ""].map(csvField).join(","));
+  }
+  return `${lines.join("\r\n")}\r\n`;
+}
+function download(text, name) {
+  const url = URL.createObjectURL(new Blob([text], { type: "text/csv;charset=utf-8" }));
+  const a = document.createElement("a"); a.href = url; a.download = name; a.className = "offscreen";
+  document.body.appendChild(a); a.click(); a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+// ── Days: the range's local dates, which of them were read (coverage, §5.5), and what each one holds.
+const shift = (date, k) => new Date(Date.UTC(+date.slice(0, 4), +date.slice(5, 7) - 1, +date.slice(8, 10) + k)).toISOString().slice(0, 10);
+/** The local dates from `from` to `to` (inclusive), at most `max`, the latest kept. */
+export function datesBetween(from, to, max = 400) {
+  if (!DATE.test(from) || !DATE.test(to) || from > to) return [];
+  const out = [];
+  for (let d = to; d >= from && out.length < max; d = shift(d, -1)) out.unshift(d);
+  return out;
+}
+/** The local dates in `zone` that some coverage interval reaches (hour by hour, as days are made, §5.3). */
+export function coveredDates(coverage, zone) {
+  let fmt;
+  try { fmt = new Intl.DateTimeFormat("en-CA", { timeZone: zone, year: "numeric", month: "2-digit", day: "2-digit" }); } catch { fmt = new Intl.DateTimeFormat("en-CA", { timeZone: "UTC", year: "numeric", month: "2-digit", day: "2-digit" }); }
+  const out = new Set();
+  for (const c of coverage || []) for (const [a, b] of c.intervals || []) {
+    for (let h = Math.floor(a / 3_600_000) * 3_600_000; h <= b; h += 3_600_000) out.add(fmt.format(new Date(h)));
+  }
+  return out;
+}
+/** Intensity 1–4 for a day's value against the range's non-zero days (quartiles, as tokscale's heatmap); 0 for none. */
+export function levels(values) {
+  const nz = values.filter((v) => v > 0).sort((a, b) => a - b);
+  const q = (p) => nz[Math.max(0, Math.ceil(p * nz.length) - 1)];
+  const cut = nz.length ? [q(0.25), q(0.5), q(0.75)] : [];
+  return (v) => (!(v > 0) ? 0 : v <= cut[0] ? 1 : v <= cut[1] ? 2 : v <= cut[2] ? 3 : 4);
+}
+
+const tokensOf = (d) => d.input + d.output + d.cacheRead + d.cacheWrite5m + d.cacheWrite1h + d.cacheWrite;
+/**
+ * Each day of the answer: its tokens (whether it was used at all), the priced part of its amount, whether part of it is
+ * not priced, and its parts by zone (a day folded before the fleet's timezone changed keeps its own zone, §5.3).
+ */
+export function dayTotals(report) {
+  const m = new Map();
+  for (const d of report.daily || []) {
+    let e = m.get(d.date);
+    if (!e) { e = { tokens: 0, amount: 0, unpriced: false, zones: new Map() }; m.set(d.date, e); }
+    const t = tokensOf(d);
+    e.tokens += t;
+    if (d.amount === null) e.unpriced = true; else e.amount += d.amount;
+    const z = e.zones.get(d.zone) || { tokens: 0, amount: 0 };
+    z.tokens += t; z.amount += d.amount || 0; e.zones.set(d.zone, z);
+  }
+  return m;
+}
+/** A day in words: its tokens, its API-equivalent where priced, what is not priced, and each zone's part. */
+export function dayText(date, e) {
+  const parts = [tu("dayTokens", tokens(e.tokens))];
+  if (e.amount > 0) parts.push(money(e.amount));
+  if (e.unpriced) parts.push(tu(e.amount > 0 ? "partNotPriced" : "notPriced"));
+  const zones = e.zones.size > 1 ? ` (${[...e.zones].map(([z, p]) => `${z}: ${tokens(p.tokens)}`).join(", ")})` : "";
+  return tu("h_day", date, parts.join(" · ") + zones);
+}
+/** The zones the answer's days were made in, when they are not all the fleet's current one (§5.3). */
+export function zonesChanged(report) {
+  const zones = [...new Set((report.daily || []).map((d) => d.zone))];
+  return zones.length > 1 || (zones.length === 1 && zones[0] !== report.zone) ? zones : null;
+}
+
+/** 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;
+  const measure = (d) => (priced ? d.amount || 0 : d.input + d.output + d.cacheRead + d.cacheWrite5m + d.cacheWrite1h + d.cacheWrite);
+  const byAgent = new Map();
+  for (const d of report.daily || []) byAgent.set(d.instance, (byAgent.get(d.instance) || 0) + measure(d));
+  const ranked = [...byAgent.entries()].filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+  const top = ranked.slice(0, TOP).map(([k]) => k);
+  const names = ranked.length > TOP ? [...top, tu("others")] : top;
+  const at = new Map(dates.map((d, i) => [d, i]));
+  const values = names.map(() => dates.map(() => 0));
+  for (const d of report.daily || []) {
+    const i = at.get(d.date);
+    if (i === undefined) continue;
+    const s = top.indexOf(d.instance);
+    values[s >= 0 ? s : names.length - 1][i] += measure(d);
+  }
+  return { priced, names, values, totals: names.map((_, s) => values[s].reduce((a, b) => a + b, 0)) };
+}
+const fmtMeasure = (priced, v) => (priced ? money(v) : tokens(v));
+
+/**
+ * A chart wider than its box opens at its latest days (the right end), as a person reads a trend, and says that the
+ * earlier days are a scroll away.
+ */
+function useLatestFirst(deps) {
+  const ref = useRef(null);
+  const [wide, setWide] = useState(false);
+  useLayoutEffect(() => {
+    const el = ref.current, over = !!el && el.scrollWidth > el.clientWidth;
+    if (over) el.scrollLeft = el.scrollWidth;
+    setWide(over);
+  }, deps);
+  return [ref, wide];
+}
+const EarlierHint = ({ wide }) => (wide ? html`<p class="note us-earlier">${tu("earlier")}</p>` : null);
+
+function Trend({ report, dates }) {
+  const s = useMemo(() => trendSeries(report, dates), [report, dates]);
+  const [scroller, wide] = useLatestFirst([report, dates]);
+  if (!s.names.length || !dates.length) return null;
+  // A value scale on the left (the day with the most, and zero), the bars after it.
+  const slot = 14, left = 52, right = 24, W = Math.max(320, left + dates.length * slot + right), H = 170, top = 16, base = 146;
+  const sums = dates.map((_, i) => s.values.reduce((a, v) => a + v[i], 0));
+  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]);
+  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>
+    <div class="us-scroll" ref=${scroller}><svg class="us-chart" viewBox=${`0 0 ${W} ${H}`} width=${W} height=${H} role="img" aria-label=${label}>
+      <line class="us-grid" x1=${left - 4} x2=${W} y1=${top} y2=${top} /><line class="us-base" x1=${left - 4} x2=${W} y1=${base} y2=${base} />
+      <text class="us-axis" x=${left - 8} y=${top + 3} text-anchor="end">${fmtMeasure(s.priced, max)}</text>
+      <text class="us-axis" x=${left - 8} y=${base + 3} text-anchor="end">0</text>
+      ${dates.map((date, i) => {
+        let y = base;
+        return html`<g key=${date}>${s.values.map((v, k) => {
+          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>`;
+      })}
+    </svg></div>
+    <${EarlierHint} wide=${wide} />
+    ${s.priced && (report.totals.unpriced || []).length ? html`<p class="note us-unpriced">${tu("trendUnpriced", report.totals.unpriced.join(", "))}</p>` : null}
+    <ul class="us-legend">${s.names.map((name, k) => html`<li key=${name}><span class=${`us-sw us-s${k}`} aria-hidden="true"></span><span class="mono">${name}</span> <span class="note">${fmtMeasure(s.priced, s.totals[k])}</span></li>`)}</ul>
+  </section>`;
+}
+
+function Heatmap({ report, dates }) {
+  const covered = useMemo(() => coveredDates(report.coverage, report.zone), [report]);
+  // Whether a day was used, and how much, is its tokens: a day used only by a model not in the price table is used,
+  // never "nothing used" (its title says it is not priced).
+  const byDate = useMemo(() => dayTotals(report), [report]);
+  const [scroller, wide] = useLatestFirst([report, dates]);
+  if (!dates.length) return null;
+  const level = levels(dates.map((d) => byDate.get(d)?.tokens || 0));
+  // Weeks as columns, Monday first (a date's weekday from its own Y-M-D: no zone involved).
+  const dow = (d) => (new Date(`${d}T00:00:00Z`).getUTCDay() + 6) % 7;
+  // Weeks as columns under a month row (its short name where a month begins).
+  const lead = dow(dates[0]), cell = 16, head = 14, W = (Math.ceil((lead + dates.length) / 7)) * cell + 2, H = head + 7 * cell + 2;
+  let used = 0, gaps = 0;
+  const months = [];
+  const cells = dates.map((d, i) => {
+    const e = byDate.get(d), v = e ? e.tokens : 0, k = lead + i, x = Math.floor(k / 7) * cell + 1, y = head + (k % 7) * cell + 1;
+    if (i === 0 || d.endsWith("-01")) months.push(html`<text key=${`m${d}`} class="us-axis" x=${x} y=${10}>${new Date(`${d}T12:00:00Z`).toLocaleDateString([], { month: "short", timeZone: "UTC" })}</text>`);
+    const state = v > 0 ? `l${level(v)}` : covered.has(d) ? "idle" : "gap";
+    if (v > 0) used++; else if (state === "gap") gaps++;
+    const title = v > 0 ? dayText(d, e) : state === "idle" ? tu("h_idle", d) : tu("h_gap", d);
+    return html`<rect key=${d} class=${`us-h ${state}`} x=${x} y=${y} width=${cell - 3} height=${cell - 3} rx="2"><title>${title}</title></rect>`;
+  });
+  return html`<section class="us-heat card" aria-labelledby="us-heat-h">
+    <h3 id="us-heat-h">${tu("heatmap")}</h3>
+    <div class="us-scroll" ref=${scroller}><svg class="us-heatmap" viewBox=${`0 0 ${W} ${H}`} width=${W} height=${H} role="img" aria-label=${tu("heatLabel", dates.length, used, gaps)}>${months}${cells}</svg></div>
+    <${EarlierHint} wide=${wide} />
+    <p class="note us-heat-key"><span class="us-h-sw gap" aria-hidden="true"></span>${tu("keyGap")} · <span class="us-h-sw idle" aria-hidden="true"></span>${tu("keyIdle")} · <span class="us-h-sw l4" aria-hidden="true"></span>${tu("keyUsed")}</p>
+  </section>`;
+}
+
+function Row({ r, group, max, measure }) {
+  const share = max > 0 ? Math.max(0.01, measure(r) / max) : 0;
+  const meta = [r.backends.join(", "), r.models.join(", "), r.profiles.join(", ")].filter(Boolean).join(" · ");
+  return html`<tr class="us-row">
+    <th scope="row" class="us-name"><span class="mono">${keyText(group, r.key)}</span>
+      <svg class="us-bar" viewBox="0 0 100 6" preserveAspectRatio="none" aria-hidden="true"><rect class="us-bar-bg" width="100" height="6" rx="3" /><rect class="us-bar-fg" width=${Math.round(share * 100)} height="6" rx="3" /></svg>
+      ${group !== "instance" || meta ? html`<span class="us-meta">${meta}</span>` : null}
+      ${r.flags.length ? html`<span class="us-flags">${r.flags.map((f) => html`<span key=${f} class="ch-tag">${flagText(f, r)}</span>`)}</span>` : null}</th>
+    <td data-label=${tu("amount")} class=${`num${r.amount === null ? " muted" : ""}`}>${amountText(r)}</td>
+    <td data-label=${tu("input")} class="num">${tokens(r.input)}</td>
+    <td data-label=${tu("output")} class="num">${tokens(r.output)}</td>
+    <td data-label=${tu("read")} class="num">${tokens(r.cacheRead)}</td>
+    <td data-label=${tu("write")} class="num">${r.flags.includes("cache_write_not_reported") && writes(r) === 0 ? "—" : tokens(writes(r))}</td>
+    <td data-label=${tu("total")} class="num">${tokens(r.total)}</td>
+    <td data-label=${tu("requests")} class="num">${n(r.requests)}</td>
+    <td data-label=${tu("messages")} class="num">${r.messages === null ? "—" : n(r.messages)}</td>
+  </tr>`;
+}
+
+/** The tab's body for one answer of GET /ui/usage-report. */
+export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
+  const group = report.group;                                // what this answer is grouped by (the choice may be on its way)
+  const [draft, setDraft] = useState({ from: choice.from || report.range.from, to: choice.to || report.range.to });
+  const dates = useMemo(() => {
+    const first = report.range.from === "0000-01-01"
+      ? [...(report.daily || []).map((d) => d.date), ...(report.messagesDaily || []).map((m) => m.date)].sort()[0] || report.range.to
+      : report.range.from;
+    // Daily detail cut to the latest whole days (too many rows): the charts start where it starts.
+    // No daily detail at all (not even the latest day fits): no dates — no chart drawn from a part of a day.
+    if (report.dailyTruncated && !report.dailyFrom) return [];
+    return datesBetween(report.dailyTruncated && report.dailyFrom > first ? report.dailyFrom : first, report.range.to);
+  }, [report]);
+  const noDaily = report.dailyTruncated && !report.dailyFrom;
+  const zones = zonesChanged(report);
+  const csvFrom = report.dailyTruncated ? report.dailyFrom : report.range.kind === "all" ? "all" : report.range.from;
+  const rows = report.rows.filter((r) => r.total > 0 || (r.messages || 0) > 0);
+  const anyAmount = rows.some((r) => r.amount !== null && r.amount > 0);
+  const measure = (r) => (anyAmount ? r.amount || 0 : r.total);
+  const max = Math.max(0, ...rows.map(measure));
+  const since = (report.coverage || []).flatMap((c) => c.intervals || []).reduce((m, [a]) => Math.min(m, a), Infinity);
+  // Nothing at all to show yet: never collected, or nothing in everything collected.
+  const empty = !rows.length && (report.range.kind === "all" || !Number.isFinite(since));
+  return html`<div class="us">
+    <div class="us-bar-top">
+      <div class="seg-inline" role="group" aria-label=${tu("range")}>${USAGE_RANGES.map((k) => html`<button key=${k} type="button"
+        class=${`btn btn-sm${k === choice.range ? " btn-primary" : ""}`} aria-pressed=${k === choice.range ? "true" : "false"}
+        onClick=${() => (k === "custom" ? setChoice({ ...choice, range: "custom", from: draft.from, to: draft.to }) : setChoice({ ...choice, range: k }))}>${tu(k === "7d" ? "r7d" : k)}</button>`)}</div>
+      <label class="us-group">${tu("group")} <select value=${choice.group} onChange=${(e) => setChoice({ ...choice, group: e.target.value })}>
+        ${USAGE_GROUPS.map((g) => html`<option key=${g} value=${g}>${tu(`g_${g}`)}</option>`)}</select></label>
+      <button type="button" class="btn btn-sm us-csv" disabled=${noDaily} title=${noDaily ? tu("noDaily") : undefined} onClick=${() => download(usageCsv(report), `agend-usage-${csvFrom}-${report.range.to}.csv`)}>
+        <${Icon} name="download" size=${14} />${report.dailyTruncated && !noDaily ? tu("csvFrom", report.dailyFrom) : tu("csv")}</button>
+    </div>
+    ${choice.range === "custom" ? html`<form class="us-custom" onSubmit=${(e) => { e.preventDefault(); if (DATE.test(draft.from) && DATE.test(draft.to) && draft.from <= draft.to) setChoice({ ...choice, ...draft }); }}>
+      <label>${tu("from")} <input type="date" value=${draft.from} max=${draft.to} onInput=${(e) => setDraft({ ...draft, from: e.target.value })} /></label>
+      <label>${tu("to")} <input type="date" value=${draft.to} min=${draft.from} onInput=${(e) => setDraft({ ...draft, to: e.target.value })} /></label>
+      <button type="submit" class="btn btn-sm">${tu("apply")}</button></form>` : null}
+    <p class="us-basis" role="note">${tu("basis", report.pricesChecked)}</p>
+    ${noDaily ? html`<p class="us-partial" role="status">${tu("noDaily")}</p>` : report.dailyTruncated ? html`<p class="us-partial" role="status">${tu("partialDays", report.dailyFrom)}</p>` : null}
+    ${zones ? html`<p class="us-partial" role="status">${tu("zoneChanged", zones.join(", "), report.zone)}</p>` : null}
+    <p class="note us-fresh">${tu("updated", new Date(fetchedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }))} · ${Number.isFinite(since) ? tu("since", new Date(since).toLocaleDateString()) : tu("notYet")} · ${tu("zoneNote", report.zone)}${group === "team" ? ` ${tu("teamsNote")}` : ""}
+      ${report.scanning.active && (!report.scanning.caughtUp || report.scanning.pendingBytes > 0) ? html` <span class="us-scan" role="status">${tu("scanning")} <button type="button" class="btn btn-sm" onClick=${refresh}>${tu("refresh")}</button></span>` : null}</p>
+    ${empty ? html`<${Empty} icon="chart" title=${tu("empty")} hint=${tu("emptyHint")} />` : html`
+      <dl class="us-totals card">
+        <div class="ch-metric"><dt>${tu("amount")}</dt><dd>${amountText(report.totals)}</dd></div>
+        <div class="ch-metric"><dt>${tu("total")}</dt><dd>${tokens(report.totals.total)}</dd></div>
+        <div class="ch-metric"><dt>${tu("requests")}</dt><dd>${n(report.totals.requests)}</dd></div>
+        <div class="ch-metric"><dt>${tu("messages")}</dt><dd>${report.totals.messages === null ? "—" : n(report.totals.messages)}</dd></div>
+      </dl>
+      ${rows.length ? html`<table class="us-table"><thead><tr><th scope="col">${tu(`g_${group}`)}</th><th scope="col" class="num">${tu("amount")}</th>
+        <th scope="col" class="num">${tu("input")}</th><th scope="col" class="num">${tu("output")}</th><th scope="col" class="num">${tu("read")}</th><th scope="col" class="num">${tu("write")}</th>
+        <th scope="col" class="num">${tu("total")}</th><th scope="col" class="num">${tu("requests")}</th><th scope="col" class="num">${tu("messages")}</th></tr></thead>
+        <tbody>${rows.map((r) => html`<${Row} key=${r.key} r=${r} group=${group} max=${max} measure=${measure} />`)}</tbody></table>`
+        : html`<p class="note">${tu("noRows")}</p>`}
+      <${Trend} report=${report} dates=${dates} />
+      <${Heatmap} report=${report} dates=${dates} />`}
+    ${report.notMeasured.length || report.shared.length ? html`<section class="us-rest" aria-labelledby="us-rest-h"><h3 id="us-rest-h">${tu("notMeasured")}</h3>
+      <ul class="rows">${report.notMeasured.map((m) => html`<li key=${m.name} class="row-item"><span class="grow strong mono">${m.name}</span><span class="muted">${m.backend} · ${tu(`nm_${m.reason}`)}</span></li>`)}
+      ${report.shared.map((m) => html`<li key=${m.name} class="row-item"><span class="grow strong mono">${m.name}</span><span class="muted">${m.backend} · ${tu("shared", m.with.join(", "))}</span></li>`)}</ul></section>` : null}
+  </div>`;
+}
+
+/**
+ * The tab: its own read (a refusal is a state the page explains, not an error): 403 over the public link without the
+ * key, 404 with web.usage_panel: false.
+ */
+export function UsageTab({ lease }) {
+  const [choice, setChoice] = useState({ range: "7d", group: "instance", from: "", to: "" });
+  const [version, setVersion] = useState(0);
+  const [state, setState] = useState(null);
+  const seq = useRef(0);
+  const path = choice.range === "custom" && !(DATE.test(choice.from) && DATE.test(choice.to)) ? null : usageQuery(choice);
+  useEffect(() => {
+    if (!path) return;
+    const mine = ++seq.current;
+    (async () => {
+      try {
+        const r = await lease.fetch(path, { method: "GET", headers: { "Content-Type": "application/json" } });
+        if (!lease.current() || mine !== seq.current) return;
+        if (r.status === 403 || r.status === 404) {
+          const body = await r.json().catch(() => null);
+          if (!lease.current() || mine !== seq.current) return;              // a newer read (or another page) owns the view
+          // Over the public link: where it is turned on — Settings → Web on the dashboard reached directly.
+          setState({ blocked: r.status === 403 ? "blocked" : "off", settings: body && typeof body.settings === "string" && /^http:\/\/localhost:\d+\/settings\/web$/.test(body.settings) ? body.settings : null });
+          return;
+        }
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        const d = await r.json();
+        if (lease.current() && mine === seq.current) setState(d && Array.isArray(d.rows) ? { data: d, at: Date.now() } : { error: true });
+      } catch { if (lease.current() && mine === seq.current) setState({ error: true }); }
+    })();
+  }, [lease, path, version]);
+  if (!state) return html`<${Skeleton} lines=${5} />`;
+  if (state.blocked) return html`<${Empty} icon=${state.blocked === "blocked" ? "globe" : "chart"} title=${tu(state.blocked)} hint=${tu(`${state.blocked}Hint`)}
+    action=${state.settings ? html`<a class="btn btn-primary us-fix" href=${state.settings}>${tu("openSettings")}</a>` : null} />`;
+  if (state.error) return html`<${ErrorState} onRetry=${() => setVersion((v) => v + 1)} />`;
+  return html`<${UsageReport} report=${state.data} fetchedAt=${state.at} choice=${choice} setChoice=${setChoice} refresh=${() => setVersion((v) => v + 1)} />`;
+}

package/dist/ui/panel-chat.js

@@ -6,7 +6,7 @@
 // right, the agent's at full width, and one rounded composer pinned below with attach, Stop reply and Send inside it.
 // The instance's own actions (details, start, stop, restart, delete) are in the header's ⋯ menu, and only the ones
 // that apply to its state are offered (#1408 rough edges 4 and 7).
-import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+import { html, useCallback, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
 import { appStore, guestPage, useStore } from "/assets/app-store.js";
 import { AuthorizeChip } from "/assets/web-authorize.js";
@@ -57,6 +57,7 @@ import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { LightboxHost, openLightbox } from "./image-lightbox.js";
 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";
 
@@ -225,6 +226,9 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   const themeKey = JSON.stringify(theme);
   const card = useCard(name, inst.card_v);
   const [dialog, setDialog] = useState(null);       // "delete" | null
+  const [canvasPlayback, setCanvasPlayback] = useState(null);
+  const publishCanvasPlayback = useCallback(value => setCanvasPlayback(previous =>
+    !previous && !value.playing || previous?.name === value.name && previous.playing === value.playing ? previous : value), []);
   const [wrap, setWrap] = useState(codeWrap);
   const view = useRef(null), split = useRef(null), thread = useRef(null), bg = useRef(null), effectSurface = useRef(null);
   useLayoutEffect(() => { applyTheme(view.current, theme, mode); }, [themeKey, mode]);
@@ -292,14 +296,14 @@ 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"} 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)} />`}><${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} /><${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}>
       <div ref=${effectSurface} class=${`chat-main${theme && theme.background ? " has-th-bg" : ""}`}>
         ${theme && theme.background ? html`<img ref=${bg} class=${`th-bg th-bg-${theme.background.fit}`} src=${themeImageUrl(name, theme.background.image)} alt="" aria-hidden="true" decoding="async" />` : null}
         <${ChatAmbient} name=${name} surface=${effectSurface} part="layer" />
-        <${AmbientMotionNote} name=${name} />
+        <${AmbientMotionNote} name=${name} canvasPlaying=${canvasPlayback?.name === name && canvasPlayback.playing} />
         <${Thread} name=${name} th=${thread} />
         <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} workingLabel=${theme ? theme.workingLabel : undefined} />
         <${ChatAmbient} name=${name} surface=${effectSurface} part="front" />
@@ -325,7 +329,8 @@ function Thread({ name, th }) {
       setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
       effectTrialStatus: x => getAppEffects()?.trialStatus(x) ?? "localAdmin",
       fixEffectTrial: (x, reason) => {
-        if (reason === "busy") getAppEffects()?.stopTrial();
+        if (reason === "reducedMotion") setFollowsReducedMotion(false);
+        else if (reason === "busy") getAppEffects()?.stopTrial();
         else if (reason === "transport") location.reload();
         else if (reason === "localAdmin") location.href = "/signin?next=" + encodeURIComponent(location.pathname + location.search);
         else navigate("/settings/appearance");

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/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]/;