@songsid/agend 2.3.0-beta.9 → 2.3.1

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

@@ -4,7 +4,8 @@
 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 { createStore, guestPage, useStore } from "./app-store.js";
+import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import { readStream } from "./read-stream.js";
 import { Dialog } from "./ui-dialog.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
@@ -39,6 +40,24 @@ function resetText(iso) {
   if (ms <= 0) return tn("usage.reset.soon");
   return usageText("", { key: "usage.reset.in", args: [usageDuration(ms)] });
 }
+/** "14:05" today, "10/19 14:05" another day, in this browser's time: when last known numbers were read, a window reset. */
+export function usageClock(iso, now = Date.now()) {
+  const at = new Date(iso || "");
+  if (Number.isNaN(at.getTime())) return "";
+  const hm = `${String(at.getHours()).padStart(2, "0")}:${String(at.getMinutes()).padStart(2, "0")}`;
+  return new Date(now).toDateString() === at.toDateString() ? hm : `${at.getMonth() + 1}/${at.getDate()} ${hm}`;
+}
+/**
+ * A row showing its last known numbers (the live read failed; #2236 follow-up): "已過期 · 快取於 14:05" and, for an expiry
+ * or another failure, what to do on a second line (its full text is the mark's tooltip too). A row from an older
+ * server (no `cachedAt`) says its hint, as before.
+ */
+export function staleNote(p) {
+  if (!p.stale) return null;
+  if (!p.cachedAt || !p.staleCause) return { mark: usageText(p.hint || "", p.hintI18n), detail: "" };
+  const detail = p.staleCause !== "transient" && (p.hint || p.hintI18n) ? usageText(p.hint || "", p.hintI18n) : "";
+  return { mark: usageText("", { key: `usage.stale.${p.staleCause}`, args: [usageClock(p.cachedAt)] }), detail };
+}
 function expiryText(iso) {
   if (!iso) return "";
   const at = new Date(iso), ms = at.getTime() - Date.now();
@@ -48,6 +67,8 @@ function expiryText(iso) {
 export function UsageMetric({ m }) {
   const bar = useRef(null);
   const label = usageText(m.label, m.labelI18n);
+  // Its window has reset since these numbers were read: no number and no bar — an old one is never shown as current.
+  if (m.resetPassed) return html`<div class="u-metric u-reset-since"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${usageText("", { key: "usage.metric.reset_since", args: [usageClock(m.resetsAt)] })}</span></div></div>`;
   const note = m.note ? usageText(m.note, m.noteI18n) : "";
   const pct = m.type === "percent" ? Math.min(100, Math.max(0, m.used ?? 0)) : 0;
   useLayoutEffect(() => { if (bar.current) bar.current.style.width = `${pct}%`; }, [pct]);   // CSSOM (#1300)
@@ -70,10 +91,13 @@ export function UsageMetric({ m }) {
 /**
  * #2014: a row's title. A credential profile's row (`profile`; its API `name` is "Claude (<profile>)") shows the
  * provider name on the title line beside the plan badge, and the profile on its own full-width muted line under it;
- * the full name is the tooltip, and the dialog shows the profile unclipped. Any other row: its name.
+ * the full name is the tooltip, and the dialog shows the profile unclipped. The default login's row beside profiles
+ * (`defaultLogin`; "Claude (default)", #2236) does the same with "default" in the page's language, never a clipped
+ * "Claude (d…". Any other row: its name.
  */
 export function providerTitle(p) {
   const name = String((p && p.name) || ""), profile = p && typeof p.profile === "string" && p.profile ? p.profile : "";
+  if (!profile && p && p.defaultLogin === true && name.endsWith(" (default)")) return { base: name.slice(0, -" (default)".length), profile: tn("usage.default_login") };
   const suffix = ` (${profile})`;
   return profile && name.endsWith(suffix) ? { base: name.slice(0, -suffix.length), profile } : { base: name, profile };
 }
@@ -84,9 +108,20 @@ export function providerTitle(p) {
  * tooltip and for a screen reader.
  */
 export function planBadge(plan) {
-  const m = /^(\S+)(?: [^()]+)? \((\d+(?:\.\d+)?)x\)$/i.exec(String(plan || "").trim());
-  return m ? `${m[1]} ×${m[2]}` : String(plan || "");
+  const text = String(plan || "").trim();
+  const m = /^(\S+)(?: [^()]+)? \((\d+(?:\.\d+)?)x\)$/i.exec(text);
+  if (m) return `${m[1]} ×${m[2]}`;
+  // #2412: a long name ("Self Serve Business Usage Based", Codex's plan_type spelled out) says only its kind, so the badge
+  // never takes the row from the provider's name; the full name is the badge's tooltip.
+  if (text.length > PLAN_BADGE_MAX) {
+    for (const [word, short] of PLAN_KINDS) if (word.test(text)) return short;
+  }
+  return text;
 }
+const PLAN_BADGE_MAX = 14;
+/** The kinds a long plan name is shortened to, the most specific first. */
+const PLAN_KINDS = [[/\benterprise\b/i, "Enterprise"], [/\bbusiness\b/i, "Business"], [/\bteam\b/i, "Team"], [/\bedu(?:cation)?\b/i, "Edu"],
+  [/\bpro\+/i, "Pro+"], [/\bpro\b/i, "Pro"], [/\bplus\b/i, "Plus"], [/\bmax\b/i, "Max"], [/\bfree\b/i, "Free"]];
 /** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
 export function updatedAgo(fetchedAt, now = Date.now()) {
   const ms = now - new Date(fetchedAt).getTime();
@@ -95,15 +130,169 @@ export function updatedAgo(fetchedAt, now = Date.now()) {
   return tn("usageUpdatedAgo", { age: min < 60 ? tn("usageMinutes", { n: min }) : tn("usageHours", { n: Math.floor(min / 60) }) });
 }
 
+// ── Compact: one line per login (a synced preference, "usage.compact"; the dialog and the rail alike) ──
+const COMPACT_KEY = "agend_usage_compact";
+function readCompact() {
+  const p = prefInForce("usage.compact");
+  return (p ? p.value : stored(COMPACT_KEY) === "on" ? true : undefined) === true;
+}
+export const usageViewStore = createStore({ compact: readCompact() });
+export function setUsageCompact(on) {
+  usageViewStore.set({ compact: !!on });
+  savePref("usage.compact", on ? true : null);   // the full cards are the default: switching back clears it
+}
+onPrefsChanged((keys) => { if (keys.has("usage.compact")) usageViewStore.set({ compact: readCompact() }); });
+/** The header's switch between one line per login and the full cards (beside the title: the dialog's and the rail's). */
+export function UsageCompactToggle() {
+  const { compact } = useStore(usageViewStore);
+  const [label, title] = compact ? [tn("usageFull"), tn("usageFullTitle")] : [tn("usageCompact"), tn("usageCompactTitle")];
+  return html`<button type="button" class="btn btn-ghost btn-sm u-compact-toggle" aria-pressed=${compact ? "true" : "false"} title=${title}
+    onClick=${() => setUsageCompact(!compact)}>${label}</button>`;
+}
+const TWO_DAYS = 48 * 3_600_000;
+/**
+ * A login's two columns on its compact line: `short`, its shortest percent window under two days (the session), and
+ * `long`, its longest of two days or more (the week, the month) — null when it has none (a dash in that column). A window
+ * that reset since the numbers were read is left out (its full card shows no number); one of unknown length is a long one.
+ */
+export function compactSlots(p) {
+  const pct = ((p && p.metrics) || []).filter((m) => m && m.type === "percent" && !m.resetPassed);
+  const isShort = (m) => Number(m.windowMs) > 0 && m.windowMs < TWO_DAYS;
+  const short = pct.filter(isShort).sort((a, b) => a.windowMs - b.windowMs)[0] || null;
+  const long = pct.filter((m) => !isShort(m)).map((m, i) => ({ m, i }))
+    .sort((a, b) => ((Number(b.m.windowMs) || -1) - (Number(a.m.windowMs) || -1)) || a.i - b.i)[0]?.m || null;
+  return { short, long };
+}
+/** The windows a compact line shows, short first. */
+export const compactMetrics = (p) => { const { short, long } = compactSlots(p); return [short, long].filter(Boolean); };
+/** A window as a few characters ("5h", "7d"); one whose length is not known says its label. */
+export function windowTag(m) {
+  const ms = Number(m && m.windowMs);
+  if (!(ms > 0)) return usageText(m.label, m.labelI18n);
+  const h = ms / 3_600_000;
+  return h < 48 ? tn("usageWindowHours", { n: Math.round(h) }) : tn("usageWindowDays", { n: Math.round(h / 24) });
+}
+/** A time ahead in one unit, for the narrow column: "45m", "3h", "4d" (rounded down past an hour; the tooltip is exact). */
+function coarseDuration(ms) {
+  const min = Math.max(1, Math.ceil(ms / 60_000));
+  if (min < 60) return tn("usageWindowMinutes", { n: min });
+  const h = Math.floor(min / 60);
+  return h < 48 ? tn("usageWindowHours", { n: h }) : tn("usageWindowDays", { n: Math.floor(h / 24) });
+}
+/** The soonest reset still ahead among `metrics`: { short: "↻ 2h", full: "resets in 2h 5m" }, or null when none is known. */
+export function soonestReset(metrics, now = Date.now()) {
+  const at = metrics.map((m) => new Date(m.resetsAt || "").getTime()).filter((t) => Number.isFinite(t) && t > now).sort((a, b) => a - b)[0];
+  return at === undefined ? null : { short: `↻ ${coarseDuration(at - now)}`, full: resetText(new Date(at).toISOString()) };
+}
+/**
+ * The logins grouped by provider for the compact view (nine logins, five of them Claude's: the provider once, then a
+ * line per login), in the order the person set (↑↓): a group where its first login is, its logins in their order.
+ */
+export function compactGroups(providers) {
+  const groups = new Map();
+  providers.forEach((p, i) => {
+    const base = providerTitle(p).base;
+    if (!groups.has(base)) groups.set(base, { base, items: [] });
+    groups.get(base).items.push({ p, i });
+  });
+  return [...groups.values()];
+}
+const level = (pct) => (pct >= 90 ? "crit" : pct >= 70 ? "warn" : "");
+/**
+ * #2240: an account whose percent windows come from several pools (agy: Gemini, Claude & others, Gemini 4 Argon) — each
+ * pool with its windows and the tighter one (the most used); null for an account of one pool (its 5h / 7d lines).
+ */
+export function compactPools(p) {
+  const pct = ((p && p.metrics) || []).filter((m) => m && m.type === "percent" && !m.resetPassed);
+  const pools = new Map();
+  for (const m of pct) {
+    if (!m.pool || typeof m.pool.label !== "string") return null;
+    if (!pools.has(m.pool.label)) pools.set(m.pool.label, { pool: m.pool, metrics: [] });
+    pools.get(m.pool.label).metrics.push(m);
+  }
+  if (pools.size < 2) return null;
+  return [...pools.values()].map((x) => ({ ...x, worst: x.metrics.reduce((a, b) => ((b.used ?? 0) > (a.used ?? 0) ? b : a)) }));
+}
+const pctOf = (m) => Math.min(100, Math.max(0, m.used ?? 0));
+/** When a window resets, at the clock ("14:05", "10/19 14:05"), for a tooltip; "" when unknown or already past. */
+function resetClock(m, now = Date.now()) {
+  const at = new Date((m && m.resetsAt) || "").getTime();
+  return Number.isFinite(at) && at > now ? `↻ ${usageClock(m.resetsAt, now)}` : "";
+}
+/**
+ * One window on its own line: its few characters ("5h"), a full-width bar, the percent coloured as the full card, and
+ * when this window resets ("↻ 8m"; the user's ask, 2026-10-23: a week's reset was hidden behind the 5 h one's). A pool's
+ * line (#2240): the pool's name in place of the window, the reset of the window its percent is, every window (with its
+ * reset time) in the tooltip.
+ */
+function CompactMeter({ m, tag, title }) {
+  const bar = useRef(null);
+  const pct = Math.min(100, Math.max(0, m.used ?? 0)), cls = level(pct);
+  useLayoutEffect(() => { if (bar.current) bar.current.style.width = `${pct}%`; }, [pct]);   // CSSOM (#1300)
+  const word = cls === "crit" ? tn("usageNear") : cls === "warn" ? tn("usageHigh") : "";
+  const reset = soonestReset([m]), clock = resetClock(m);
+  return html`<span class="u-cm" title=${title || `${usageText(m.label, m.labelI18n)}: ${pct.toFixed(0)}%${word ? ` (${word})` : ""}${clock ? ` · ${clock}` : ""}`}>
+    <span class="u-cm-tag">${tag || windowTag(m)}</span><span class="u-cm-bar"><span ref=${bar} class=${`u-cm-fill ${cls}`}></span></span>
+    <span class=${`u-cm-pct ${cls}`}>${pct.toFixed(0)}%</span>
+    <span class="u-cm-reset">${reset ? html`${reset.short}<span class="sr-only"> (${reset.full})</span>` : null}</span></span>`;
+}
+/** What a login says instead of numbers (not logged in, an error), or "" when it has numbers. */
+function rowNote(p) {
+  if (p.status === "error") return usageText(p.error || tn("usage.error_fallback"), p.errorI18n);
+  if (p.status === "no-credentials") return tn("usage.not_logged_in");
+  return "";
+}
+/**
+ * A login in three short lines, under its provider's name (the user's pick, 2026-10-22): its name and plan; then its
+ * short window and its long one, each a labelled full-width bar, the percent and that window's own reset.
+ * Numbers not current, a failed read or no login: one muted line in place of the bars, what is wrong as its tooltip.
+ * Pressed, it opens its full card.
+ */
+export function CompactRow({ p, onExpand }) {
+  const title = providerTitle(p), failed = p.status === "error" || p.status === "no-credentials";
+  // Last known numbers (stale, e.g. an expired token) show as the others do (the user, 2026-10-23; the full card has since
+  // #2386), with a small "cached at 07:47" on the name line; a window that reset since is left out (compactSlots).
+  const pools = failed ? null : compactPools(p);
+  const metrics = failed ? [] : pools ? pools.flatMap((x) => x.metrics) : compactMetrics(p);
+  const note = rowNote(p), stale = p.stale ? staleNote(p) : null;
+  const say = stale ? stale.mark : note || tn("usage.no_data");
+  const detail = stale ? [stale.mark, stale.detail].filter(Boolean).join(" — ") : say;
+  const name = title.profile || title.base;
+  return html`<button type="button" class=${`u-crow${p.stale ? " is-stale" : ""}${pools ? " is-pooled" : ""}`} aria-expanded="false" title=${`${p.name} — ${tn("usageExpand")}`} onClick=${onExpand}>
+    <span class="u-crow-head"><span class="u-crow-name">${name}</span>
+      ${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
+      ${stale && metrics.length ? html`<span class="u-crow-stale" title=${detail}>${p.cachedAt ? tn("usageCachedAt", { at: usageClock(p.cachedAt) }) : stale.mark}<span class="sr-only"> (${detail})</span></span>` : null}</span>
+    ${pools ? pools.map((x) => html`<${CompactMeter} key=${x.pool.label} m=${x.worst} tag=${usageText(x.pool.label, x.pool.labelI18n)}
+        title=${x.metrics.map((m) => { const c = resetClock(m); return `${usageText(m.label, m.labelI18n)}: ${pctOf(m).toFixed(0)}%${c ? ` (${c})` : ""}`; }).join(" · ")} />`)
+      : metrics.length ? metrics.map((m, j) => html`<${CompactMeter} key=${j} m=${m} />`)
+      : html`<span class=${`u-crow-note${(stale || (p.status === "error" && !p.transient)) ? " is-alert" : ""}`} title=${detail}>${say}</span>`}
+  </button>`;
+}
+/** A provider's logins: its name once (×N), in small capitals, then each login (or the full card of one opened). */
+export function CompactGroup({ group, line }) {
+  return html`<section class="u-cgroup">
+    <div class="u-cg-head"><span class="u-cg-name" title=${group.base}>${group.base}</span>${group.items.length > 1 ? html`<span class="u-cg-count">×${group.items.length}</span>` : null}</div>
+    ${group.items.map(line)}
+  </section>`;
+}
+
 /**
  * The usage read and its rows: the dialog's body and the rail's (#1673). `owner`: its lease's key — the reads and the
  * minute's timer live and end with it.
  */
 export function UsageBody({ owner }) {
   const lease = useLease(owner);
-  const [data, setData] = useState(undefined);       // undefined: loading; null: failed
+  const [data, setData] = useState(undefined);       // undefined: loading; null: failed, with nothing read before
+  // The last read failed while numbers were already shown: they stay, with a quiet note (#2236/#2289 for the server's
+  // rows; here for the read itself — a dropped or failed read must not flash the error over numbers already on screen).
+  const [failed, setFailed] = useState(false);
   const [order, setOrder] = useState(() => { try { const a = JSON.parse(stored(USAGE_ORDER_KEY) || "[]"); return Array.isArray(a) ? a.filter((x) => typeof x === "string") : []; } catch { return []; } });
   const reads = useMemo(() => readStream(lease), [lease]);
+  // Compact (one line per login): a line pressed opens its full card here, until folded or the mode changes.
+  const { compact } = useStore(usageViewStore);
+  const [expanded, setExpanded] = useState(() => new Set());
+  useEffect(() => { setExpanded(new Set()); }, [compact]);
+  const toggleOne = (id) => setExpanded((was) => { const next = new Set(was); if (next.has(id)) next.delete(id); else next.add(id); return next; });
   // Refresh (force) supersedes a read on its way; the minute's tick waits for it.
   const load = async (force) => {
     const token = reads.begin(force);
@@ -111,19 +300,26 @@ export function UsageBody({ owner }) {
     try {
       const r = await lease.fetch(`/api/ai-usage${force ? "?force=1" : ""}`);
       if (!reads.live(token)) return;
+      // A refused or failed answer (a 500, a proxy's 502 page, a session that lapsed) is a failed read, not numbers.
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
       const d = await r.json();
-      if (reads.live(token)) setData(d);
-    } catch { if (reads.live(token)) setData(null); }
+      if (!d || !Array.isArray(d.providers)) throw new Error("no providers");
+      if (reads.live(token)) { setData(d); setFailed(false); }
+    } catch {
+      if (!reads.live(token)) return;
+      setData((had) => (had && Array.isArray(had.providers) ? had : null));   // the last numbers stay; none: the error
+      setFailed(true);
+    }
     finally { reads.end(token); }
   };
   useEffect(() => { load(false); lease.interval(() => load(false), 60_000); }, [lease]);
   // #1585: the server answered with the last snapshot while it fetches a fresh one — read again shortly (the same
   // cache: no vendor call of its own) so the fresh numbers replace it without waiting for the minute's tick.
   useEffect(() => {
-    if (!data || !data.refreshing) return undefined;
+    if (!data || !data.refreshing || failed) return undefined;
     const timer = setTimeout(() => load(false), 4_000);
     return () => clearTimeout(timer);
-  }, [data]);
+  }, [data, failed]);
   const key = (p) => String(p.id || p.name || "");
   const ordered = (providers) => {
     const rank = new Map(order.map((id, i) => [id, i]));
@@ -144,22 +340,26 @@ export function UsageBody({ owner }) {
   else if (!data || !Array.isArray(data.providers)) content = html`<${ErrorState} message=${tn("usageFail")} onRetry=${() => load(true)} />`;
   else {
     const providers = ordered(data.providers);
-    content = html`${!providers.length ? html`<p class="note">${tn("usage.empty_active")}</p>` : null}
-      ${providers.map((p, i) => html`<section key=${key(p)} class="u-provider">
+    const card = (p, i) => html`<section key=${key(p)} class=${p.stale ? "u-provider is-stale" : "u-provider"}>
         <div class="u-head"><strong title=${p.name}>${providerTitle(p).base}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
-          <span class="u-order">
+          <span class="u-order">${compact ? html`<button type="button" class="icon-btn u-collapse" aria-expanded="true" aria-label=${tn("usageCollapse")} title=${tn("usageCollapse")}
+              onClick=${() => toggleOne(key(p))}><${Icon} name="minus" size=${14} /></button>` : null}
             <button type="button" class="icon-btn" disabled=${i === 0} aria-label=${tn("usageMoveUp")} title=${tn("usageMoveUp")} onClick=${() => move(key(p), -1, data.providers)}><${Icon} name="up" size=${14} /></button>
             <button type="button" class="icon-btn" disabled=${i === providers.length - 1} aria-label=${tn("usageMoveDown")} title=${tn("usageMoveDown")} onClick=${() => move(key(p), 1, data.providers)}><${Icon} name="down" size=${14} /></button>
           </span></div>
         ${providerTitle(p).profile ? html`<div class="u-profile" title=${p.name}>${providerTitle(p).profile}</div>` : null}
-        ${p.stale ? html`<p class="note">${usageText(p.hint || "", p.hintI18n)}</p>` : null}
+        ${p.stale ? html`<p class="note u-stale" title=${staleNote(p).detail || null}>${staleNote(p).mark}</p>${staleNote(p).detail ? html`<p class="note u-stale-detail">${staleNote(p).detail}</p>` : null}` : null}
         ${p.status === "error" && !p.transient ? html`<p class="u-err">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
           : p.status === "error" && p.transient ? html`<p class="note">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
           : p.status === "no-credentials" ? html`<p class="note">${tn("usage.not_logged_in")}</p>${p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : null}`
           : html`${(p.metrics || []).map((m, j) => html`<${UsageMetric} key=${j} m=${m} />`)}
             ${!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>
+      </section>`;
+    content = html`${!providers.length ? html`<p class="note">${tn("usage.empty_active")}</p>` : null}
+      ${compact ? compactGroups(providers).map((g) => html`<${CompactGroup} key=${g.base} group=${g}
+          line=${({ p, i }) => (expanded.has(key(p)) ? card(p, i) : html`<${CompactRow} key=${key(p)} p=${p} onExpand=${() => toggleOne(key(p))} />`)} />`)
+        : providers.map((p, i) => card(p, i))}
+      <div class="u-foot"><span class="note" title=${new Date(data.fetchedAt).toLocaleString()}>${updatedAgo(data.fetchedAt)}${failed ? html` · <span class="u-refresh-failed" role="status">${tn("usageRefreshFailed")}</span>` : 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>`;
   }
@@ -174,5 +374,5 @@ const byAgent = () => !guestPage() && typeof location !== "undefined" && locatio
 
 /** `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}>`;
+  return html`<${Dialog} title=${tn("usage.title")} tools=${html`<${UsageCompactToggle} />`} onClose=${onClose} wide=${true}><${UsageBody} owner=${`usage-dialog:${owner}`} /></${Dialog}>`;
 }

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

@@ -37,6 +37,7 @@ register("view", {
   "usageUpdatedAgo": "Updated {age} ago",
   "usageUpdatedJustNow": "Updated just now",
   "usageRefreshing": "Refreshing…",
+  "usageRefreshFailed": "Couldn't refresh — showing the last numbers",
   "usageMinutes": "{n} min",
   "usageHours": "{n} h",
   "usageRefresh": "Refresh",
@@ -46,6 +47,17 @@ register("view", {
   "usageNear": "near limit",
   "usageMoveUp": "Move up",
   "usageMoveDown": "Move down",
+  "usageCompact": "Compact",
+  "usageCompactTitle": "One line per login",
+  "usageFull": "Full",
+  "usageFullTitle": "The full card for each login",
+  "usageExpand": "Show the full card",
+  "usageCachedAt": "cached at {at}",
+  "usageCollapse": "Back to one line",
+  "usageWindowHours": "{n}h",
+  "usageWindowDays": "{n}d",
+  "usageWindowMinutes": "{n}m",
+  "usageStaleMark": "Not current",
   "tooltipBackend": "Backend: {value}",
   "tooltipStatus": "Status: {value}",
   "tooltipContext": "Context: {value}",
@@ -61,6 +73,8 @@ register("view", {
   "modelWhyStart": "detected when it starts",
   "modelWhyCli": "this CLI does not report a default",
   "groupOther": "Other",
+  "groupTeam": "Team",
+  "groupTag": "Tag",
   "statusRunning": "Running",
   "statusPaused": "Paused",
   "statusStopped": "Stopped",
@@ -73,6 +87,7 @@ register("view", {
   "usage.title_plain": "AI subscription usage",
   "usage.empty_active": "No active backends with usage tracking",
   "usage.not_logged_in": "not logged in",
+  "usage.default_login": "default",
   "usage.error_fallback": "error",
   "usage.no_data": "no data",
   "usage.reset.in": "resets in {0}",
@@ -135,6 +150,10 @@ register("view", {
   "usage.error.rate_limited": "Rate limited by {0} — try again later.",
   "usage.error.rate_limited_transient": "{0}: can't fetch usage right now (rate limited). This does not affect your agents.",
   "usage.stale_rate_limited": "data from {0} min ago — can't refresh right now",
+  "usage.stale.expired": "expired · cached at {0}",
+  "usage.stale.transient": "not updated · cached at {0}",
+  "usage.stale.error": "couldn't read · cached at {0}",
+  "usage.metric.reset_since": "reset since {0}",
   "usage.error.http": "Usage request failed (HTTP {0}).",
   "usage.error.billing_http": "Billing request failed (HTTP {0}).",
   "usage.error.invalid_response": "Invalid response from usage endpoint.",
@@ -157,7 +176,6 @@ register("view", {
   "usageButton": "Usage",
   "helpButton": "Help",
   "close": "Close",
-  "expandProfile": "Show the profile",
   "rosterFailed": "Failed to load roster: {error}\n(Is the fleet running?)",
   "paneFailed": "⚠ Could not load pane for {name} (HTTP {status}).",
   "signInToSave": "Sign in to save — your session may have ended.",
@@ -200,7 +218,6 @@ register("view", {
   "textSize": "Text size: {size}",
   "profileTitle": "Edit {name}'s profile",
   "avatar": "Avatar",
-  "collapseProfile": "Hide the profile",
   "instancesLabel": "Instances",
   "favorites": "Favorites",
   "favAdd": "Add {name} to favorites",
@@ -211,6 +228,22 @@ register("view", {
   "favDown": "Move {name} down",
   "favFull": "Favorites are full ({max})",
   "favFiltered": "Clear the filter to reorder favorites",
+  "favSorted": "Favorites are sorted by last reply — set them back to your order to move them",
+  "replyJustNow": "just now",
+  "replyMinutes": "{n} min ago",
+  "replyHours": "{n} h ago",
+  "replyYesterday": "yesterday",
+  "replyDays": "{n} d ago",
+  "replyTitle": "Last replied: {time}",
+  "sortTitle": "Sort the list",
+  "sortCustom": "Custom",
+  "sortCustomHint": "Your own order (drag rows); replies never move them",
+  "sortRecent": "Recent replies",
+  "sortRecentHint": "No groups: the last reply first",
+  "sortFavs": "Favorites, in Recent replies",
+  "sortFavsFixed": "Pinned on top, in your order",
+  "sortFavsRecent": "Sorted by last reply too",
+  "recentOthers": "Recent replies first",
   "pinnedCurrent": "Current",
   "pinnedLabel": "The instance you have open"
  },
@@ -247,6 +280,7 @@ register("view", {
   "usageUpdatedAgo": "{age}前更新",
   "usageUpdatedJustNow": "剛剛更新",
   "usageRefreshing": "更新中…",
+  "usageRefreshFailed": "無法更新，顯示上次的數據",
   "usageMinutes": "{n} 分鐘",
   "usageHours": "{n} 小時",
   "usageRefresh": "重新整理",
@@ -256,6 +290,17 @@ register("view", {
   "usageNear": "接近上限",
   "usageMoveUp": "上移",
   "usageMoveDown": "下移",
+  "usageCompact": "精簡",
+  "usageCompactTitle": "每個登入一行",
+  "usageFull": "完整",
+  "usageFullTitle": "每個登入顯示完整卡片",
+  "usageExpand": "顯示完整卡片",
+  "usageCachedAt": "快取於 {at}",
+  "usageCollapse": "收回成一行",
+  "usageWindowHours": "{n}小時",
+  "usageWindowDays": "{n}天",
+  "usageWindowMinutes": "{n}分",
+  "usageStaleMark": "不是最新",
   "tooltipBackend": "後端：{value}",
   "tooltipStatus": "狀態：{value}",
   "tooltipContext": "上下文：{value}",
@@ -271,6 +316,8 @@ register("view", {
   "modelWhyStart": "啟動時偵測",
   "modelWhyCli": "這個 CLI 不提供預設值",
   "groupOther": "其他",
+  "groupTeam": "團隊",
+  "groupTag": "標籤",
   "statusRunning": "運行中",
   "statusPaused": "已暫停",
   "statusStopped": "已停止",
@@ -283,6 +330,7 @@ register("view", {
   "usage.title_plain": "AI 訂閱用量",
   "usage.empty_active": "沒有使用中且支援用量追蹤的 Backend",
   "usage.not_logged_in": "未登入",
+  "usage.default_login": "預設",
   "usage.error_fallback": "錯誤",
   "usage.no_data": "無資料",
   "usage.reset.in": "{0} 後重置",
@@ -345,6 +393,10 @@ register("view", {
   "usage.error.rate_limited": "{0} 暫時限制請求速率，請稍後再試。",
   "usage.error.rate_limited_transient": "暫時查不到 {0} 用量（{0} 限制查詢頻率），不影響你的 agent。",
   "usage.stale_rate_limited": "{0} 分鐘前的資料，暫時無法更新",
+  "usage.stale.expired": "已過期 · 快取於 {0}",
+  "usage.stale.transient": "暫時無法更新 · 快取於 {0}",
+  "usage.stale.error": "讀取失敗 · 快取於 {0}",
+  "usage.metric.reset_since": "已於 {0} 重置",
   "usage.error.http": "用量請求失敗（HTTP {0}）。",
   "usage.error.billing_http": "計費請求失敗（HTTP {0}）。",
   "usage.error.invalid_response": "用量端點回傳了無效資料。",
@@ -367,7 +419,6 @@ register("view", {
   "usageButton": "用量",
   "helpButton": "說明",
   "close": "關閉",
-  "expandProfile": "顯示個人資料",
   "rosterFailed": "載入 instance 清單失敗：{error}\n（Fleet 是否正在執行？）",
   "paneFailed": "⚠ 無法載入 {name} 的 pane（HTTP {status}）。",
   "signInToSave": "請先登入才能儲存：你的 session 可能已結束。",
@@ -410,7 +461,6 @@ register("view", {
   "textSize": "字級：{size}",
   "profileTitle": "編輯 {name} 的個人資料",
   "avatar": "頭像",
-  "collapseProfile": "隱藏個人資料",
   "instancesLabel": "Instances",
   "favorites": "最愛",
   "favAdd": "把 {name} 加入最愛",
@@ -421,6 +471,22 @@ register("view", {
   "favDown": "把 {name} 下移",
   "favFull": "最愛已滿（{max} 個）",
   "favFiltered": "清除篩選後才能調整最愛順序",
+  "favSorted": "最愛目前依最近回覆排序；改回「照你的順序」才能移動",
+  "replyJustNow": "剛剛",
+  "replyMinutes": "{n} 分鐘前",
+  "replyHours": "{n} 小時前",
+  "replyYesterday": "昨天",
+  "replyDays": "{n} 天前",
+  "replyTitle": "最後回覆：{time}",
+  "sortTitle": "排序方式",
+  "sortCustom": "自訂",
+  "sortCustomHint": "你拖曳排好的順序，有回覆也不會跳動",
+  "sortRecent": "最近回覆",
+  "sortRecentHint": "不分組，最後回覆的在上面",
+  "sortFavs": "最愛（最近回覆模式時）",
+  "sortFavsFixed": "固定在最上面，照你的順序",
+  "sortFavsRecent": "也依最近回覆排序",
+  "recentOthers": "最近回覆在上",
   "pinnedCurrent": "目前",
   "pinnedLabel": "你目前開著的 instance"
  }

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

@@ -20,6 +20,7 @@ register("webauth", {
     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_named_link_off: "Over your named link: turn on \"Also over my named link\" in Settings → Web on this computer.",
     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.",
@@ -27,6 +28,10 @@ register("webauth", {
     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",
+    verifiedShort: "Verified",
+    authorizeShort: "Authorize",
+    authorizeWhy: "Not verified: authorize this browser to speak as you",
+    waitingShort: "Waiting for your Confirm ({0})",
   },
   "zh-TW": {
     verified: "已驗證 · 以你的身分發言到 {0}",
@@ -42,6 +47,7 @@ register("webauth", {
     reason_not_admin_session: "訪客無法授權。",
     reason_token_rotated: "儀表板的 token 已變更：請重新登入。",
     reason_public_link: "臨時公開連結上無法授權。",
+    reason_named_link_off: "透過固定網域：請在這台電腦的 設定 → 網頁 開啟「也允許透過我的固定網域」。",
     reason_not_session: "登入後才能授權。",
     reason_other: "這個瀏覽器在這裡無法授權。",
     refusal_pending: "已經有一個請求在你的私訊中等待。",
@@ -49,10 +55,14 @@ register("webauth", {
     refusal_dm_unavailable: "無法私訊給你。請開放與 bot 的私訊後再試一次。",
     refusal_other: "沒有成功：{0}",
     settings: "設定",
+    verifiedShort: "已驗證",
+    authorizeShort: "授權",
+    authorizeWhy: "未驗證：授權這個瀏覽器以你的身分發言",
+    waitingShort: "等待確認（{0}）",
   },
 });
 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"];
+const REASONS = ["disabled", "loopback_only", "no_account", "not_admin", "not_admin_session", "token_rotated", "public_link", "named_link_off", "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();
@@ -139,6 +149,45 @@ export function AuthorizeChip() {
   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>`;
 }
 
+/**
+ * The composer's row (#2215, the user's request, 2026-10-19): the same states as AuthorizeChip, each kept to a few words so
+ * they share one row with the key hint. What a state would have said at length is in its tooltip and its accessible
+ * name: when "Verified" ends, why it can't be authorized, the countdown's ask. A tap on "✓ Verified" shows when it
+ * ends (touch has no hover) in a bubble above the row, until the next tap, a tap elsewhere or Escape. What pressing
+ * Authorize answered (sent, refused) is said in the row itself, in the hint's place (#2216 review: a bubble left over the
+ * composer covered Attach and what was being typed, with nothing to close it).
+ */
+export function ComposerAuth() {
+  const a = useWebAuthorization();
+  const [open, setOpen] = useState(false);
+  const tip = useRef("wa-tip-" + Math.random().toString(36).slice(2, 8));
+  useEffect(() => { setOpen(false); }, [a.st && a.st.state]);              // a new state closes the bubble
+  if (guestPage()) return null;
+  if (publicLink()) return html`<span class="webauth-row note" data-state="public" title=${tn("publicLink")}>${tn("publicLink")}</span>`;
+  if (!a.st) return null;
+  const st = a.st, id = tip.current;
+  const said = a.notice ? html`<span class="webauth-notice" role="status">${a.notice}</span>` : null;
+  if (st.state === "verified") {
+    const until = tn("verified", clock(st.until));
+    return html`<span class="webauth-row" data-state="verified">
+      <button type="button" class="webauth-ok" title=${until} aria-label=${`✓ ${until}`} aria-expanded=${open ? "true" : "false"}
+        aria-controls=${id} onClick=${() => setOpen((v) => !v)} onBlur=${() => setOpen(false)}
+        onKeyDown=${(e) => { if (e.key === "Escape" && open) { e.stopPropagation(); setOpen(false); } }}>✓ ${tn("verifiedShort")}</button><span
+        id=${id} class="webauth-tip" role="tooltip" hidden=${!open}>${until}</span>${said}</span>`;
+  }
+  if (st.state === "pending") {
+    const asks = tn("waiting", mmss(a.left));
+    return html`<span class="webauth-row" data-state="pending"><span class="note" title=${a.notice ? `${asks} — ${a.notice}` : asks}>${tn("waitingShort", mmss(a.left))}</span>${said}</span>`;
+  }
+  if (st.reason === "not_authorized" || st.reason === "authorization_expired") {
+    return html`<span class="webauth-row" data-state="none"><span class="note" aria-hidden="true">${tn("notVerified")} ·</span><button type="button" class="webauth-ask"
+      title=${tn("authorizeWhy")} aria-label=${tn("authorizeWhy")} onClick=${a.ask}>${tn("authorizeShort")}</button>${said}</span>`;
+  }
+  const why = REASONS.includes(st.reason) ? tn(`reason_${st.reason}`) : tn("reason_other");
+  return html`<span class="webauth-row" data-state="none"><span class="note" title=${why}>${tn("notVerified")}<span class="sr-only">: ${why}</span></span>${st.reason === "disabled" || st.reason === "loopback_only"
+    ? html` · <a href="/settings/web" title=${why}>${tn("settings")}</a>` : null}</span>`;
+}
+
 function body(a) {
   const st = a.st;
   if (st.state === "verified") return html`<span class="webauth-ok">✓ ${tn("verified", clock(st.until))}</span>`;

package/dist/ui/signin.html

@@ -6,9 +6,11 @@
 <meta name="referrer" content="no-referrer">
 <meta name="robots" content="noindex">
 <title>AgEnD — Sign in</title>
+<!--app-icon-->
 <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 64x64">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
+<!--/app-icon-->
 <script src="/assets/theme.js"></script>
 <link rel="stylesheet" href="/assets/tokens.css">
 <style>