@songsid/agend 2.3.0-beta.25 → 2.3.0-beta.26

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

@@ -50,6 +50,7 @@ export function applyStatus(d) {
     if (i.state === "awaiting_input") awaiting[i.name] = typeof i.interaction_summary === "string" ? i.interaction_summary : "";
   }
   appStore.set({ canvasWorker: d.canvas_worker === true, ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
+    startup: d.startup?.phase === "starting" ? d.startup : null,
     connections: typeof d.connections === "number" ? d.connections : null,
     // #1665: the host preferences' revision (app-prefs.js re-reads them when it moves).
     prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null,

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

@@ -34,7 +34,8 @@
 // org canvas reads /ui/traffic when it has no stream).
 // #2233: backend_login — a dashboard sign-in started, moved or ended (no details: the page reads its own view).
 // tasks — the task board changed: the card numbers a write touched (SSE only: the board reads again when it is shown).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks"];
+// offices — the stored offices changed ({ rev }; SSE only: the Office view reads /ui/offices again).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices"];
 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

@@ -470,6 +470,36 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    such as 「昨天 下午03:58」, ticks) — and a block body would stretch to it; fit-content keeps a short message short, on
    the right under its meta, and a long one still wraps at the message's max-width. */
 .msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); width: fit-content; max-width: 100%; margin-left: auto; }
+/* A message this page is sending (chat-thread.js outgoingHtml): shown at once, its text dimmed with "Sending…" until the
+   server takes it; failed, a straight red bar with Retry and Delete. Each file: a picture as itself (or a document mark),
+   its name, a square-ended bar and its percentage, moved in place. */
+.msg.user.out .meta { align-items: center; gap: var(--s-2); }
+.msg.out.out-queued .body, .msg.out.out-sending .body { color: var(--text-3); }
+.msg.out.out-queued .body .md, .msg.out.out-sending .body .md { opacity: .72; }
+.out-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
+.out-spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: out-spin .8s linear infinite; }
+@keyframes out-spin { to { transform: rotate(360deg); } }
+.out-files { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
+.msg.out .body .out-files:first-child { margin-top: 0; }
+.out-file { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.out-pic { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); flex: none; background: var(--surface-2); }
+.msg.out.out-queued .out-pic, .msg.out.out-sending .out-pic { opacity: .7; }
+.out-doc { width: 32px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
+.out-file-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s-2); min-width: 0; flex: 1; min-width: 140px; }
+.out-name { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.out-pct { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
+.out-bar { grid-column: 1 / -1; height: 3px; background: var(--border); overflow: hidden; }
+.out-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
+.out-file[data-state="done"] .out-bar, .out-file[data-state="done"] .out-pct { visibility: hidden; }
+.out-file[data-state="failed"] .out-fill { background: var(--danger); }
+.out-file[data-state="failed"] .out-pct { color: var(--danger); }
+.msg.out.out-sent .out-file .out-bar, .msg.out.out-sent .out-file .out-pct { visibility: hidden; }
+/* Hugs its words under the bubble's right edge, as the bubble does: the bar stays beside them, never across the row. */
+.out-note { --lbar-color: var(--danger); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); width: fit-content; max-width: 100%;
+  margin: var(--s-2) 0 0 auto; padding: var(--s-1) 0 var(--s-1) calc(var(--s-2) + 3px); font-size: var(--fs-xs); color: var(--danger); }
+.out-error { overflow-wrap: anywhere; }
+.out-actions { display: inline-flex; gap: var(--s-1); }
+@media (prefers-reduced-motion: reduce) { .out-spin { animation: none; border-right-color: currentColor; opacity: .6; } .out-fill { transition: none; } }
 /* A person's click on a reply button: the bubble shows 🔘 and the button's label (never the value the agent was given);
    live, the label is a button that shows the reply its buttons were on. */
 .click-chip { display: flex; }
@@ -795,6 +825,8 @@ img.amb-p { object-fit: contain; }
 /* #1939 S2a: Settings → Web → Web authority. */
 .s-web-authority .s-va-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
 .s-web-authority .s-va-sessions li { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; }
+/* #2453: "over your named link" stays one phrase (the list item may break anywhere, CJK included). */
+.s-web-authority .s-va-named { white-space: nowrap; }
 .s-web-authority .s-va-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
 .s-web-authority .save-row { flex-wrap: wrap; }
 /* #1920: a guest's note under the composer — on a phone too, where the key hints are hidden. */
@@ -1032,7 +1064,21 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
    down, never the count; the count is as tall as a header, so the row does not grow. */
 .nav-facets { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-1) 0; }
 .nav-facet-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); flex: 1 1 auto; min-width: 0; }
-.nav-facets .nav-shown { flex: none; margin: 0 0 0 auto; padding: 2px 0; white-space: nowrap; }
+/* #2401: the count, "shown" under it and Clear under that. The word's width is held by ::before (its text from
+   data-reserve) and idle Clear's by the button itself, both at no height, unseen and out of reach (visibility): the column —
+   and the headers' box beside it — is as wide with a facet set as without. */
+.nav-facet-end { flex: none; margin: 0 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
+.nav-facets .nav-shown { margin: 0; padding: 2px 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
+.nav-shown-word { display: block; }
+.nav-facet-end::before { content: attr(data-reserve); display: block; height: 0; overflow: hidden; visibility: hidden; font-size: var(--fs-xs); white-space: nowrap; }
+.nav-facet-end .is-idle { visibility: hidden; height: 0; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; overflow: hidden; }
+/* No open list beside it (.compact): one cell of one line, as wide as the count or Clear; a facet set, Clear in the count's
+   place (the count transparent, still read; the word for a screen reader only, so its width is not held here). */
+.nav-facets.compact .nav-facet-end { display: grid; justify-items: end; align-items: center; }
+.nav-facets.compact .nav-facet-end > * { grid-area: 1 / 1; margin: 0; }
+.nav-facets.compact .nav-facet-end::before { display: none; }
+.nav-facets.compact .nav-shown.is-set { opacity: 0; pointer-events: none; }
+.nav-facets.compact .nav-shown-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 .nav-facet { font-size: var(--fs-xs); color: var(--text-2); min-width: 0; max-width: 100%; }
 /* #1700: a facet group's header — the whole row toggles its list; folded with a filter set, a short summary. */
 .nav-facet-head { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: 2px var(--s-2); border: 0; border-radius: var(--r-sm);
@@ -1041,10 +1087,15 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .nav-facet-head:focus-visible { outline: 2px solid var(--accent); }
 .nav-facet-head .caret { color: var(--text-3); flex: none; }
 .nav-facet-sum { min-width: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }
+/* #2401: the summary takes only the room its line has left — never counted when the headers wrap (contain: inline-size,
+   its gap taken back), so a facet set never sends a header to a line of its own; the header holding it grows into the rest. */
+.nav-facet.has-sum { flex-grow: 1; }
+.nav-facet.has-sum .nav-facet-head { width: 100%; }
+.nav-facet-sum { contain: inline-size; flex: 1 1 0; margin-left: calc(-1 * var(--s-1)); padding-left: var(--s-1); }
 .nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
 .nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
 .nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
-.nav-facet-reset { font-size: var(--fs-xs); }
+.nav-facet-reset { font-size: var(--fs-xs); flex: none; white-space: nowrap; margin-top: 2px; padding: 2px var(--s-1); }
 
 /* One gap on every page (View's, #1448): the header's controls are the same size on every tab. */
 .panel-actions .btn { gap: var(--s-1); }
@@ -1102,7 +1153,42 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 /* #1673: the usage rail beside the page on a wide screen (header-tools.js UsageRail; shown only at min-width 1200px). */
 .u-rail { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--bg); }
 .u-rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); }
-.u-rail-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
+.u-rail-head h2 { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
+/* The usage view's compact mode (usage-dialog.js CompactGroup / CompactRow), the user's pick (2026-10-22): the logins
+   grouped by provider (its name once, in small capitals), each in three short lines — its name and plan with the
+   soonest reset on the right, then each window as a labelled full-width bar and the percent. */
+.dlg-tools { display: inline-flex; align-items: center; flex: none; }
+.u-compact-toggle { flex: none; }
+/* flex: none — a group never shrinks to fit the rail (it would clip its accounts): the rail scrolls instead. */
+.u-cgroup { flex: none; display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+.u-cg-head { display: flex; align-items: baseline; gap: 4px; padding: 7px var(--s-3) 3px; font-size: 11px; font-weight: var(--fw-semibold);
+  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
+.u-cg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-cg-count { flex: none; }
+.u-crow { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; padding: 6px var(--s-3); border: 0; border-top: 1px solid var(--border);
+  background: transparent; color: inherit; font: inherit; line-height: 1.3; text-align: left; cursor: pointer; }
+.u-cg-head + .u-crow { border-top: 0; }
+.u-crow:hover { background: var(--surface-2); }
+.u-crow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
+/* The name never gives way to the plan (#2415); the reset keeps its room on the right. */
+.u-crow-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); }
+.u-crow-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text); }
+.u-crow .u-plan { flex: 0 100 auto; min-width: 22px; max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  padding-block: 0; line-height: 16px; font-size: 10.5px; }
+.u-crow-reset { margin-left: auto; flex: none; padding-left: 6px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.u-cm { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 3.4em; align-items: center; gap: 7px; min-width: 0; }
+.u-cm-tag { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* #2240: an account of several pools (agy) names each pool's line: a wider label, ending in an ellipsis if it must. */
+.u-crow.is-pooled .u-cm { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 3.4em; }
+.u-cm-bar { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
+.u-cm-fill { display: block; height: 100%; width: 0; min-width: 2px; border-radius: var(--r-full); background: var(--accent); }
+.u-cm-fill.warn { background: var(--warn); } .u-cm-fill.crit { background: var(--danger); }
+.u-cm-pct { text-align: right; font-size: 13px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text); }
+.u-cm-pct.warn { color: var(--warn); } .u-cm-pct.crit { color: var(--danger); }
+.u-crow-note { font-size: var(--fs-xs); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-crow-note.is-alert::before { content: "●"; margin-right: 5px; color: var(--danger); }
+.u-crow.is-stale .u-crow-note.is-alert::before { color: var(--warn); }
+@media (prefers-reduced-motion: no-preference) { .u-crow { transition: background-color 0.15s var(--ease); } }
 .u-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
 @media (max-width: 1199px) { .u-rail { display: none; } }
 @media (max-width: 899px) {
@@ -1460,6 +1546,49 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .oc-tools { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: var(--s-2); }
   .oc-mini { display: none; }
 }
+/* ── Fleet → Org chart → Office (fleet-office.js): the fleet as a pixel office on one <canvas>. Its size is set through
+   the CSSOM (never a style attribute, #1300); the stage scrolls, the page around it too. ── */
+.oo { display: flex; flex-direction: column; gap: var(--s-2); }
+.oo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.oo-pick { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
+.oo-pick .tb-select { max-width: 200px; }
+.oo-people { position: relative; }
+/* #2399: the offices' minimal editor (fleet-office-editor.js) — one row per office, its members unfolded under it. */
+.oe-form { border: 0; margin: 0; padding: 0; min-width: 0; }
+/* #2431: after a 409, the two ways on (keep my edits, load theirs), side by side; they wrap on a phone. */
+.oe-conflict { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
+.oe-list { list-style: none; margin: var(--s-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
+.oe-row { padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2); }
+.oe-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
+.oe-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oe-label { font-size: var(--fs-xs); color: var(--text-2); }
+.oe-name { min-width: 0; width: 16em; max-width: 100%; }
+.oe-remove { margin-left: auto; }
+.oe-members { display: flex; flex-wrap: wrap; gap: var(--s-3); }
+.oe-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 12em; max-height: 240px; overflow-y: auto; }
+.oe-group legend { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); padding: 0; margin-bottom: 4px; }
+.oo-people > .btn.on { border-color: var(--accent); }
+.oo-people-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(280px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
+.oo-people-pop input[type="search"] { width: 100%; height: 32px; }
+.oo-people-list { list-style: none; margin: 0; padding: 0; }
+.oo-people-list label { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: var(--fs-xs); color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
+.oo-note { font-size: var(--fs-xs); }
+.oo-stage { position: relative; height: clamp(420px, calc(100dvh - 280px), 960px); overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
+.oo-canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
+.oo-canvas.hot { cursor: pointer; }
+.oo-tip { position: absolute; left: 0; top: 0; z-index: 5; max-width: 240px; pointer-events: none; padding: 6px 10px; font-size: var(--fs-xs); line-height: 1.4;
+  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow-wrap: anywhere; }
+/* The desks as a list: for a screen reader, and shown (over the stage's corner) while the keyboard is in it. */
+.oo-desks { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; list-style: none; }
+.oo-desks:focus-within { position: sticky; left: var(--s-2); bottom: var(--s-2); width: auto; height: auto; max-height: 40%; margin: 0; padding: var(--s-1); clip: auto; overflow-y: auto;
+  display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 2 * var(--s-2)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); white-space: normal; }
+.oo-desk { font-size: var(--fs-xs); padding: 2px 6px; border-radius: var(--r-sm); background: var(--bg); color: var(--text); border: 1px solid var(--border); }
+.oo-desk:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+@media (max-width: 640px) {
+  .oo-stage { height: calc(100dvh - 300px); min-height: 340px; }
+  .oo-pick .tb-select { max-width: 150px; }
+}
 /* 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) {
   .p-fleet .seg-item:not(.active) > span, .p-settings .seg-item:not(.active) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

package/dist/ui/shared/guest-refused.js

@@ -0,0 +1,35 @@
+// What a guest's browser is shown for a page it cannot open. Loaded from /assets/guest-refused.js.
+//
+// The gate answers a guest's navigation with this page instead of its JSON (#2399 smoke): "members" for a page that is
+// not a guest's (Fleet, Settings…), "ended" when no chat is shared with the guest any more. The page's words are in
+// the browser's language, as the sign-in page's are; the HTML carries the English for a browser without scripts.
+(() => {
+  "use strict";
+  const T = {
+    en: {
+      members_title: "This page is not open to guests",
+      members_lead: "This page is for the fleet's members. As a guest you can use the chats shared with you.",
+      members_go: "Open your chats",
+      ended_title: "No chats are shared with you",
+      ended_lead: "Your guest access on this fleet has no chat now — you may have left the room it came from. Ask whoever invited you to share a chat with you again.",
+    },
+    "zh-TW": {
+      members_title: "訪客無法開啟這個頁面",
+      members_lead: "這個頁面只給 fleet 的成員使用。身為訪客，你可以使用分享給你的聊天。",
+      members_go: "打開你的聊天",
+      ended_title: "目前沒有分享給你的聊天",
+      ended_lead: "你在這個 fleet 的訪客權限目前沒有任何聊天——你可能已經離開當初的頻道。請聯絡邀請你的人，再分享聊天給你。",
+    },
+  };
+  const lang = /^zh/i.test(navigator.language || "") ? "zh-TW" : "en";
+  const t = (k) => T[lang][k] || T.en[k] || k;
+  document.documentElement.lang = lang === "zh-TW" ? "zh-Hant" : "en";
+  const main = document.getElementById("refused");
+  const why = main && main.dataset.why === "ended" ? "ended" : "members";
+  document.getElementById("title").textContent = t(`${why}_title`);
+  document.getElementById("lead").textContent = t(`${why}_lead`);
+  // Nothing to open when no chat is shared (the chats would answer this page again): no button then.
+  const go = document.getElementById("go");
+  if (go) { if (why === "ended") go.remove(); else go.textContent = t("members_go"); }
+  document.title = `AgEnD — ${t(`${why}_title`)}`;
+})();

package/dist/ui/shared/header-tools.js

@@ -9,7 +9,7 @@ import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { createStore, useStore } from "./app-store.js";
 import { Icon } from "./ui-icons.js";
-import { UsageBody, UsageDialog } from "./usage-dialog.js";
+import { UsageBody, UsageCompactToggle, UsageDialog } from "./usage-dialog.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
@@ -126,7 +126,7 @@ export function UsageRail({ route }) {
   const { open } = useStore(usageRailStore);
   if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) return null;
   return html`<aside data-trust="usage" class="u-rail" aria-label=${t("view.usage.title_plain")}>
-    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2>
+    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2><${UsageCompactToggle} />
       <button type="button" class="icon-btn" onClick=${() => setUsageRail(false)} aria-label=${t("app.usageHide")} title=${t("app.usageHide")}><${Icon} name="close" size=${16} /></button></div>
     <div class="u-rail-body"><${UsageBody} owner="usage-rail" /></div>
   </aside>`;

package/dist/ui/shared/instance-nav.js

@@ -82,11 +82,12 @@ export function backendLabel(backend) { return BACKEND_LABELS[backend] || backen
 export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
 export const STATUS_KEYS = { running: "statusRunning", paused: "statusPaused", stopped: "statusStopped", crashed: "statusCrashed" };
 
-/** The status chips, in order (design Q5): what the row's dot says, in five words. */
-export const STATUS_FACETS = ["working", "needs", "idle", "stopped", "crashed"];
+/** The status chips, in order: what the row's dot says, including agents queued for this boot. */
+export const STATUS_FACETS = ["working", "needs", "starting", "idle", "stopped", "crashed"];
 /** Which status chip a row falls under: needs you first, then crashed, not running, working (or stuck), idle. */
 export function statusFacet(it, exec, awaiting) {
   if (awaiting != null) return "needs";
+  if (it?.startup_phase === "queued" || it?.startup_phase === "starting") return "starting";
   if (!it || it.status === "crashed") return "crashed";
   if (it.status !== "running") return "stopped";
   return exec === "working" || exec === "stuck" ? "working" : "idle";
@@ -127,7 +128,8 @@ export function filterSidebar(groupNames, instByGroup, rosterByName, query, labe
 }
 export function instanceTooltip(it) {
   const context = it.context_pct != null && Number.isFinite(it.context_pct) ? `${Math.round(Math.min(100, Math.max(0, it.context_pct)))}%` : tn("tooltipUnavailable");
-  const status = STATUS_KEYS[it.status] ? tn(STATUS_KEYS[it.status]) : it.status || tn("statusUnknown");
+  const status = it.startup_phase === "queued" ? t("app.statusQueued") : it.startup_phase === "starting" ? t("app.statusStarting")
+    : STATUS_KEYS[it.status] ? tn(STATUS_KEYS[it.status]) : it.status || tn("statusUnknown");
   const line = (key, value) => tn(key, { value });
   const lines = [];
   const name = nameOf(it);
@@ -361,12 +363,15 @@ export function avatarOf(it) {
 /** The status dot on the avatar: needs you, crashed, paused, stopped, looks stuck, working, idle — colour AND a label. */
 export function dotState(it, exec, awaiting) {
   if (awaiting != null) return "needs";
+  if (it?.startup_phase === "queued") return "queued";
+  if (it?.startup_phase === "starting") return "starting";
   if (!it || it.status === "crashed") return "crashed";
   if (it.status === "paused") return "paused";
   if (it.status !== "running") return "stopped";
   return exec === "stuck" ? "stuck" : exec === "working" ? "working" : "idle";
 }
 const DOT = {
+  queued: ["off", () => t("app.statusQueued")], starting: ["busy", () => t("app.statusStarting")],
   needs: ["warn", () => t("app.needsYou")], crashed: ["bad", () => t("app.statusCrashed")], paused: ["off hollow", () => t("app.statusPaused")],
   stopped: ["off", () => t("app.statusStopped")], stuck: ["warn", () => t("app.statusStuck")], working: ["busy", () => t("app.statusWorking")],
   idle: ["ok", () => t("app.statusIdle")],
@@ -393,7 +398,7 @@ export function InstanceAvatar({ it, state, cli = false }) {
 
 // ── The list ──
 
-const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "working" ? t("app.statusWorking") : facet === "idle" ? t("app.statusIdle")
+const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "starting" ? t("app.statusStarting") : facet === "working" ? t("app.statusWorking") : facet === "idle" ? t("app.statusIdle")
   : facet === "crashed" ? t("app.statusCrashed") : t("app.statusStopped"));
 
 // ── #2179: when each instance last replied to a person (the status frame's last_reply) ──
@@ -571,7 +576,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     const sel = f[key];
     const summary = !open && sel.length ? (sel.length <= 2 ? sel.map(text).join(", ") : tn("facetSelected", { n: sel.length })) : "";
     const hint = tn(open ? "facetHide" : "facetShow", { group: label });
-    return html`<div class=${`nav-facet${open ? " open" : ""}`}>
+    return html`<div class=${`nav-facet${open ? " open" : ""}${summary ? " has-sum" : ""}`}>
       <button type="button" class="nav-facet-head" aria-expanded=${open ? "true" : "false"} aria-controls=${`nav-facet-${key}`}
         title=${summary ? `${hint} (${label} · ${summary})` : hint} onClick=${() => toggleFacet(key)}>
         <${Icon} name="chevron" size=${12} cls=${open ? "caret" : "caret folded"} /><span class="nav-facet-label">${label}</span>
@@ -614,6 +619,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
           aria-label=${tn(starred ? "favRemove" : "favAdd", { name: label })} title=${full ? tn("favFull", { max: MAX_FAVORITES }) : tn(starred ? "favRemove" : "favAdd", { name: label })}
           onClick=${() => toggleFavorite(name, known)}><${Icon} name="star" size=${14} /></button>` : null}</li>`;
   };
+  // #2401: an open list of two or more lines leaves room under the count for "shown" and Clear (stacked); otherwise compact.
+  const facetSet = f.status.length > 0 || f.cli.length > 0;
+  const stacked = (!viewOnly && facetOpen.status) || (facetOpen.cli && backends.length > 1);
   // The list scrolls; the filter under it stays in view (#999), so it sits outside the scrolling section.
   return html`<div class=${`view-roster inst-nav${editing && canStar ? " fav-editing" : ""}`}>
     <div data-trust="navigation" class="side-section" id="instanceList" ref=${list}>
@@ -653,13 +661,22 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
         ${f.q ? html`<button type="button" class="icon-btn v-filter-clear" aria-label=${tn("filterClear")} title=${tn("filterClear")}
           onClick=${() => { recordEdit(filterRef.current); setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
       </label>
-      <div class="nav-facets">
+      <div class=${`nav-facets${stacked ? "" : " compact"}`}>
         <div class="nav-facet-groups">
           ${viewOnly ? null : chips("status", STATUS_FACETS, tn("filterStatus"), statusText)}
           ${backends.length > 1 || f.cli.length ? chips("cli", backends, tn("filterCli"), backendLabel) : null}
-          ${f.status.length || f.cli.length ? html`<button type="button" class="chip-btn nav-facet-reset" onClick=${() => setNavFilter({ status: [], cli: [] })}>${tn("filterFacetsReset")}</button>` : null}
         </div>
-        <p class="note nav-shown" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
+        ${/* #2401: the count, its "shown" and Clear stack at the row's right end — beside an open list there is room under
+            the count, so setting a facet adds no row (a word beside the count, or Clear beside it, wrapped CLI under the
+            list). With no such list (.compact) they share one cell of one line: a facet set, Clear takes the count's place
+            (the count kept for a screen reader and in Clear's title). Either way the column keeps Clear's width (idle, there
+            unseen at no height: .is-idle, a class — never a style attribute, #1300), and stacked the word's too
+            (data-reserve, drawn unseen at no height), so the headers' box beside it never narrows. */ ""}
+        <div class="nav-facet-end" data-reserve=${tn("filterShown")}>
+          <p class=${`note nav-shown${facetSet ? " is-set" : ""}`} aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? html`<span class="nav-shown-word"> ${tn("filterShown")}</span>` : ""}</p>
+          <button type="button" class=${`chip-btn nav-facet-reset${facetSet ? "" : " is-idle"}`} title=${facetSet ? `${shown.shown} / ${shown.total} ${tn("filterShown")}` : undefined}
+            onClick=${() => setNavFilter({ status: [], cli: [] })}>${tn("filterFacetsReset")}</button>
+        </div>
       </div>
     </div>`}
   </div>`;

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

@@ -10,7 +10,7 @@ import { t } from "./app-i18n.js";
  * <${Dialog} title="Create task" onClose=${…} actions=${html`…`}>…body…</${Dialog}>
  * Rendered = open; the parent unmounts it to close. `busy` keeps Esc and the backdrop from closing it mid-request.
  */
-export function Dialog({ title, onClose, actions, children, busy = false, wide = false, drawer = false, label }) {
+export function Dialog({ title, onClose, actions, children, busy = false, wide = false, drawer = false, label, tools = null }) {
   const ref = useRef(null);
   const opener = useRef(null);
   const busyRef = useRef(busy);
@@ -38,7 +38,7 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
   }, [onClose]);
   return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}${drawer ? " dlg-drawer" : ""}`} aria-label=${label || title}>
     <div class="dlg-box">
-      <div class="dlg-head"><h2 class="dlg-title">${title}</h2>
+      <div class="dlg-head"><h2 class="dlg-title">${title}</h2>${tools ? html`<span class="dlg-tools">${tools}</span>` : null}
         <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${() => { if (!busyRef.current) onClose(); }}><${Icon} name="close" /></button></div>
       <div class="dlg-body">${children}</div>
       ${actions ? html`<div class="dlg-actions">${actions}</div>` : null}

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";
@@ -129,6 +130,142 @@ 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));
+/**
+ * One window on its own line: its few characters ("5h"), a full-width bar and the percent, coloured as the full card.
+ * A pool's line (#2240): the pool's name in place of the window, its every window 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") : "";
+  return html`<span class="u-cm" title=${title || `${usageText(m.label, m.labelI18n)}: ${pct.toFixed(0)}%${word ? ` (${word})` : ""}`}>
+    <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>`;
+}
+/** 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 with the
+ * soonest reset on the right; then its short window and its long one, each a labelled full-width bar and the percent.
+ * 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";
+  const pools = failed || p.stale ? null : compactPools(p);
+  const metrics = failed || p.stale ? [] : 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 reset = soonestReset(metrics);
+  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}
+      ${reset ? html`<span class="u-crow-reset" title=${reset.full}>${reset.short}<span class="sr-only"> (${reset.full})</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) => `${usageText(m.label, m.labelI18n)}: ${pctOf(m).toFixed(0)}%`).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.
@@ -141,6 +278,11 @@ export function UsageBody({ owner }) {
   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);
@@ -188,10 +330,10 @@ 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=${p.stale ? "u-provider is-stale" : "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>
@@ -202,7 +344,11 @@ export function UsageBody({ owner }) {
           : 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>`)}
+      </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>`;
@@ -218,5 +364,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

@@ -47,6 +47,16 @@ 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",
+  "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}",
@@ -279,6 +289,16 @@ register("view", {
   "usageNear": "接近上限",
   "usageMoveUp": "上移",
   "usageMoveDown": "下移",
+  "usageCompact": "精簡",
+  "usageCompactTitle": "每個登入一行",
+  "usageFull": "完整",
+  "usageFullTitle": "每個登入顯示完整卡片",
+  "usageExpand": "顯示完整卡片",
+  "usageCollapse": "收回成一行",
+  "usageWindowHours": "{n}小時",
+  "usageWindowDays": "{n}天",
+  "usageWindowMinutes": "{n}分",
+  "usageStaleMark": "不是最新",
   "tooltipBackend": "後端：{value}",
   "tooltipStatus": "狀態：{value}",
   "tooltipContext": "上下文：{value}",