Show per-account usage bars inline in the launch account popover (#1235)

Author: h0x91b

change-logs/2026/08/03/fix-launch-account-usage-bars-inline.md

@@ -0,0 +1,3 @@
+Short: Account usage bars visible without a click
+
+The launch picker's account popover now shows each account's 5h/7d usage bars, percentages and reset countdowns inline, so comparing accounts no longer costs a click per row. The per-row expand chevron is gone, the capture age rides the last bar line as a compact suffix (warning-tinted once stale), and the panel scrolls instead of growing past its dialog.

src/mainview/components/AgentAccountIndicator.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
 import { createPortal } from "react-dom";
 import type {
 	AgentAccount,
@@ -20,7 +20,7 @@ import { api } from "../rpc";
 import { toast } from "../toast";
 import { useT } from "../i18n";
 import { useOverlayLayer } from "../utils/useOverlayLayer";
-import { CapturedNote, UsageBar, severityText } from "./rate-limit-ui";
+import { CapturedAgeSuffix, UsageBar, severityText } from "./rate-limit-ui";
 
 /** Fired on window after any account mutation (switch from this popover,
  *  add/remove/switch in Settings → Agent Accounts), so every mounted listener
@@ -112,66 +112,51 @@ function quotaLines(snap: AgentRateLimitSnapshot, monthlyLabel: string): QuotaLi
 	return lines;
 }
 
-/** The one reading a collapsed row keeps: an unlimited chip, or the most severe
- *  window percentage — enough to choose an account without expanding it. */
-function RowHeadline({ usage, monthlyLabel }: { usage: RowUsage; monthlyLabel: string }) {
+/** An unlimited account has no bars to show, so the chip carries its whole
+ *  reading; every other state renders its numbers in the quota block below. */
+function RowHeadline({ usage }: { usage: RowUsage }) {
 	const t = useT();
-	if (!usage.snap) return null;
-	if (usage.state === "unlimited") {
-		return (
-			<span className="text-success-strong text-micro px-1 py-px bg-success/10 rounded font-medium shrink-0">
-				{t("rateLimits.unlimited")}
-			</span>
-		);
-	}
-	const lines = quotaLines(usage.snap, monthlyLabel);
-	if (lines.length === 0) return null;
-	const percent = Math.round(Math.max(...lines.map((line) => line.usedPercent)));
-	// "37%" alone reads as either used or left; the title carries the direction,
-	// and an exhausted account says so outright — picking it wastes the launch.
+	if (!usage.snap || usage.state !== "unlimited") return null;
 	return (
-		<span
-			className={`shrink-0 text-xs font-semibold tabular-nums ${severityText(percent)}`}
-			title={percent >= RATE_LIMIT_DANGER_PERCENT
-				? t("rateLimits.quotaExhausted")
-				: t("rateLimits.percentUsed", { percent: String(percent) })}
-		>
-			{t("rateLimits.percentUsed", { percent: String(percent) })}
+		<span className="text-success-strong text-micro px-1 py-px bg-success/10 rounded font-medium shrink-0">
+			{t("rateLimits.unlimited")}
 		</span>
 	);
 }
 
-/** Expanded per-account quota block: one "label · bar · % · reset" line per
- *  limit window plus the captured note. Collapsed by default so a row is one
- *  line and the popover fits below its trigger. */
+/** Per-account quota block, always visible: one dense "label · bar · % · reset"
+ *  line per limit window. Picking an account is a comparison, so hiding the bars
+ *  behind a per-row toggle made every open cost a click (decision: inline). */
 function RowQuota({ usage, now }: { usage: RowUsage; now: number }) {
 	const t = useT();
-	if (!usage.snap) return null;
-	const lines = usage.state === "used" ? quotaLines(usage.snap, t("rateLimits.monthlyLabel")) : [];
+	if (!usage.snap || usage.state !== "used") return null;
+	const lines = quotaLines(usage.snap, t("rateLimits.monthlyLabel"));
+	if (lines.length === 0) return null;
 	const exhausted = lines.some((line) => line.usedPercent >= RATE_LIMIT_DANGER_PERCENT);
+	const lastKey = lines[lines.length - 1]?.key;
 	return (
-		<div className="pl-8 pr-3 pb-2">
+		<span className="mt-1 block">
 			{lines.map((line) => {
 				const percent = Math.round(line.usedPercent);
 				const reset = formatResetDelta(line.resetsAt, now);
 				return (
-					<div key={line.key} className="mt-1.5 flex items-center gap-1.5">
+					<span key={line.key} className="mt-1 flex items-center gap-1.5">
 						<span className="min-w-[1.5rem] shrink-0 text-xs text-fg-3 tabular-nums whitespace-nowrap">{line.label}</span>
-						<UsageBar percent={line.usedPercent} className="h-1 min-w-0 flex-1" />
-						<span className="shrink-0 text-xs tabular-nums">
+						<UsageBar percent={line.usedPercent} className="h-1 min-w-[3rem] flex-1" />
+						<span className="shrink-0 text-xs tabular-nums whitespace-nowrap">
 							<span className={`font-semibold ${severityText(percent)}`}>
 								{t("rateLimits.percentUsed", { percent: String(percent) })}
 							</span>
 							{reset && <span className="text-fg-3"> · {t("rateLimits.resetsIn", { time: reset })}</span>}
+							{/* Provenance rides the last line: a reading is only as good as its age,
+							    and a separate line per account doubled the block's height. */}
+							{line.key === lastKey && <CapturedAgeSuffix capturedAt={usage.snap!.capturedAt} now={now} />}
 						</span>
-					</div>
+					</span>
 				);
 			})}
-			{exhausted && <p className="mt-1.5 text-xs text-danger">{t("rateLimits.quotaExhausted")}</p>}
-			<div className="mt-1">
-				<CapturedNote capturedAt={usage.snap.capturedAt} now={now} />
-			</div>
-		</div>
+			{exhausted && <span className="mt-1 block text-xs text-danger">{t("rateLimits.quotaExhausted")}</span>}
+		</span>
 	);
 }
 
@@ -226,7 +211,6 @@ function SwitcherPopover({
 	const menuRef = useRef<HTMLDivElement>(null);
 	const [pos, setPos] = useState({ top: anchor.top, left: anchor.left });
 	const [visible, setVisible] = useState(false);
-	const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set<string>());
 	const now = Date.now();
 
 	// Registers the panel as an overlay layer: Tab reaches it, Escape closes it
@@ -279,19 +263,13 @@ function SwitcherPopover({
 	}, [reposition]);
 
 	const autoFocusKey = (rows.find((row) => row.isActive) ?? rows[0])?.key ?? null;
-	const toggleExpanded = (key: string) =>
-		setExpanded((prev) => {
-			const next = new Set(prev);
-			if (!next.delete(key)) next.add(key);
-			return next;
-		});
 
 	return createPortal(
 		<div
 			ref={menuRef}
 			role="menu"
 			aria-label={title}
-			className="fixed z-[10000] bg-overlay rounded-xl shadow-2xl shadow-black/40 border border-edge-active py-1.5 w-[21rem] max-w-[calc(100vw-1rem)]"
+			className="fixed z-[10000] bg-overlay rounded-xl shadow-2xl shadow-black/40 border border-edge-active py-1.5 w-[25rem] max-w-[calc(100vw-1rem)]"
 			// Opacity, not `visibility`, hides the pre-measure frame: a
 			// visibility-hidden element cannot take focus, so autofocusing the
 			// active row silently did nothing.
@@ -302,16 +280,19 @@ function SwitcherPopover({
 				<div className="text-fg-2 text-sm font-semibold uppercase tracking-wider">{title}</div>
 				<p className="text-fg-3 text-xs leading-snug mt-1">{subtitle}</p>
 			</div>
-			{rows.map((row) => {
-				// Informational rows (codex "unmanaged") and a busy switch stay inert —
-				// via aria-disabled, so every row keeps its place in the Tab ring.
-				const inert = busy || !row.onSelect;
-				const showSub = !!row.sub && row.sub !== row.label && !row.label.includes(row.sub);
-				const hasQuota = !!row.usage?.snap;
-				const isOpen = expanded.has(row.key);
-				return (
-					<Fragment key={row.key}>
-						<div className={`flex items-start ${inert ? "" : "hover:bg-elevated-hover"} transition-colors`}>
+			{/* Usage bars make a row 3 lines tall, so the list is the part that scrolls —
+			    the title block and the provenance hint stay pinned. */}
+			<div className="max-h-[min(28rem,60vh)] overflow-y-auto overscroll-contain">
+				{rows.map((row) => {
+					// Informational rows (codex "unmanaged") and a busy switch stay inert —
+					// via aria-disabled, so every row keeps its place in the Tab ring.
+					const inert = busy || !row.onSelect;
+					const showSub = !!row.sub && row.sub !== row.label && !row.label.includes(row.sub);
+					return (
+						<div
+							key={row.key}
+							className={`flex items-start ${inert ? "" : "hover:bg-elevated-hover"} transition-colors`}
+						>
 							<button
 								type="button"
 								role="menuitemradio"
@@ -322,7 +303,7 @@ function SwitcherPopover({
 									if (inert) return;
 									row.onSelect?.();
 								}}
-								className={`min-w-0 flex-1 text-left pl-3 pr-2 py-2 flex items-start gap-2 focus:bg-elevated-hover ${
+								className={`min-w-0 flex-1 text-left pl-3 pr-3 py-2 flex items-start gap-2 focus:bg-elevated-hover ${
 									inert ? "cursor-default" : "cursor-pointer"
 								}`}
 							>
@@ -345,7 +326,7 @@ function SwitcherPopover({
 												{row.planLabel}
 											</span>
 										) : null}
-										{row.usage ? <RowHeadline usage={row.usage} monthlyLabel={t("rateLimits.monthlyLabel")} /> : null}
+										{row.usage ? <RowHeadline usage={row.usage} /> : null}
 									</span>
 									{showSub || row.workspaceLabel ? (
 										<span className="mt-1 flex flex-wrap items-center gap-1.5 min-w-0">
@@ -367,6 +348,7 @@ function SwitcherPopover({
 									{row.usage && row.usage.state === "none" ? (
 										<span className="mt-1 block text-xs text-fg-3">{t("rateLimits.noRecentData")}</span>
 									) : null}
+									{row.usage ? <RowQuota usage={row.usage} now={now} /> : null}
 								</span>
 								{row.isActive ? (
 									<svg
@@ -381,32 +363,10 @@ function SwitcherPopover({
 									</svg>
 								) : null}
 							</button>
-							{hasQuota ? (
-								<button
-									type="button"
-									role="menuitem"
-									aria-expanded={isOpen}
-									aria-label={t(isOpen ? "launch.accountHideUsage" : "launch.accountShowUsage")}
-									title={t(isOpen ? "launch.accountHideUsage" : "launch.accountShowUsage")}
-									onClick={() => toggleExpanded(row.key)}
-									className="shrink-0 px-2 py-2.5 text-fg-3 hover:text-fg focus:bg-elevated-hover"
-								>
-									<svg
-										className={`w-3.5 h-3.5 transition-transform ${isOpen ? "rotate-180" : ""}`}
-										viewBox="0 0 24 24"
-										fill="none"
-										stroke="currentColor"
-										strokeWidth={2}
-									>
-										<path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
-									</svg>
-								</button>
-							) : null}
 						</div>
-						{hasQuota && isOpen && row.usage ? <RowQuota usage={row.usage} now={now} /> : null}
-					</Fragment>
-				);
-			})}
+					);
+				})}
+			</div>
 			<div className="border-t border-edge mt-1 pt-1.5 px-3 pb-1">
 				<p className="text-fg-3 text-xs leading-snug">{hint}</p>
 			</div>

src/mainview/components/__tests__/AgentAccountIndicator.test.tsx

@@ -102,13 +102,6 @@ function makeReport(snapshots: AgentRateLimitSnapshot[]): AgentRateLimitsReport
 	return { snapshots, generatedAt: Date.now() };
 }
 
-/** Quota bars live behind a per-row disclosure; collapsed rows only show the
- *  worst percentage. `index` picks which row's toggle to open. */
-async function expandUsage(user: ReturnType<typeof userEvent.setup>, index = 0) {
-	const toggles = await screen.findAllByLabelText("Show usage details");
-	await user.click(toggles[index]!);
-}
-
 beforeEach(() => {
 	vi.clearAllMocks();
 	mockedApi.request.listAgentAccounts.mockResolvedValue(makeState());
@@ -289,15 +282,13 @@ describe("AgentAccountIndicator", () => {
 
 		await user.click(await screen.findByTestId("agent-account-trigger"));
 
-		// Collapsed rows carry the worst percentage, phrased so the direction is
-		// explicit: 62% used (system, neutral tier) and
-		// 97% (managed account, danger tier).
+		// Every window renders its own bar line with no click: the percentages are
+		// tiered by severity (62% neutral, 97% danger) and both rows are readable
+		// side by side, which is the whole point of picking an account.
 		const okPercent = await screen.findByText("62% used");
 		expect(okPercent.className).toContain("text-fg-2");
 		const dangerPercent = screen.getByText("97% used");
 		expect(dangerPercent.className).toContain("text-danger");
-		// Expanding the system row reveals every window.
-		await expandUsage(user, 0);
 		expect(screen.getByText("34% used")).toBeTruthy();
 		expect(screen.getByText("5h")).toBeTruthy();
 	});
@@ -330,13 +321,14 @@ describe("AgentAccountIndicator", () => {
 		renderIndicator(claudeAgent, { value: null, onSelect: vi.fn() });
 
 		await user.click(await screen.findByTestId("agent-account-trigger"));
-		await expandUsage(user, 0);
 
-		// No hover needed — the quota line and its provenance render in the row
-		// (34% shows twice: the collapsed headline and the expanded window line).
-		expect((await screen.findAllByText("34% used")).length).toBe(2);
+		// No click and no hover: the quota line, its reset countdown and the
+		// capture age all render in the row itself.
+		expect((await screen.findAllByText("34% used")).length).toBe(1);
 		expect(screen.getByText(/· resets in 2h/)).toBeTruthy();
-		expect(screen.getByText("captured 20m ago")).toBeTruthy();
+		const age = screen.getByTitle("captured 20m ago");
+		expect(age.textContent).toContain("20m");
+		expect(age.className).toContain("text-warning");
 	});
 
 	it("renders the monthly credits line when the plan exposes it", async () => {
@@ -353,9 +345,7 @@ describe("AgentAccountIndicator", () => {
 		renderIndicator(claudeAgent, { value: null, onSelect: vi.fn() });
 
 		await user.click(await screen.findByTestId("agent-account-trigger"));
-		expect(await screen.findByText("25% used")).toBeTruthy(); // headline, collapsed
-		await expandUsage(user, 0);
-
+		expect(await screen.findByText("25% used")).toBeTruthy();
 		expect(screen.getByText("monthly credits")).toBeTruthy();
 	});
 

src/mainview/components/rate-limit-ui.tsx

@@ -231,6 +231,25 @@ export function CapturedNote({ capturedAt, now }: { capturedAt: number; now: num
 	);
 }
 
+/**
+ * Capture age as a dense inline suffix ("· 15h") for surfaces that cannot spend
+ * a whole line on provenance. Same honesty contract as CapturedNote: warning
+ * tint past STALE_AFTER_MS so a reading from days ago never reads as live.
+ */
+export function CapturedAgeSuffix({ capturedAt, now }: { capturedAt: number; now: number }) {
+	const t = useT();
+	const age = Math.max(0, now - capturedAt);
+	const stale = age > STALE_AFTER_MS;
+	const short = age < 60_000 ? t("rateLimits.capturedAgeNow") : formatAge(age);
+	const full = age < 60_000 ? t("rateLimits.capturedNow") : t("rateLimits.captured", { time: formatAge(age) });
+	return (
+		<span title={full} className={stale ? "text-warning" : "text-fg-3"}>
+			{" · "}
+			{short}
+		</span>
+	);
+}
+
 /** Compact age like "12m" or "3h" for the staleness note. */
 function formatAge(ms: number): string {
 	const mins = Math.round(ms / 60000);

src/mainview/i18n/translations/en/dashboard.ts

@@ -130,6 +130,7 @@ const dashboard = {
 	"rateLimits.monthlyUsage": "{used} / {limit} used · {remaining}% left",
 	"rateLimits.captured": "captured {time} ago",
 	"rateLimits.capturedNow": "captured just now",
+	"rateLimits.capturedAgeNow": "just now",
 	"rateLimits.noRecentData": "no recent usage data",
 	"rateLimits.quotaExhausted": "No quota left — this launch will fail until it resets.",
 

src/mainview/i18n/translations/en/kanban.ts

@@ -329,8 +329,6 @@ const kanban = {
 	"kanban.loadFailedDesc": "Loading this project's tasks failed. Try again.",
 	"kanban.loadFailedOffline": "dev-3.0 can't reach your computer right now. The board reloads itself once the connection is back.",
 	"kanban.loadRetry": "Retry",
-	"launch.accountShowUsage": "Show usage details",
-	"launch.accountHideUsage": "Hide usage details",
 } as const;
 
 export default kanban;

src/mainview/i18n/translations/es/dashboard.ts

@@ -130,6 +130,7 @@ const dashboard = {
 	"rateLimits.monthlyUsage": "{used} / {limit} usados · {remaining}% restantes",
 	"rateLimits.captured": "capturado hace {time}",
 	"rateLimits.capturedNow": "capturado ahora mismo",
+	"rateLimits.capturedAgeNow": "ahora mismo",
 	"rateLimits.noRecentData": "sin datos de uso recientes",
 	"rateLimits.quotaExhausted": "Sin cuota disponible — este lanzamiento fallará hasta que se restablezca.",
 

src/mainview/i18n/translations/es/kanban.ts

@@ -329,8 +329,6 @@ const kanban = {
 	"kanban.loadFailedDesc": "No se pudieron cargar las tareas del proyecto. Inténtalo de nuevo.",
 	"kanban.loadFailedOffline": "dev-3.0 no puede alcanzar tu ordenador ahora mismo. El tablero se recargará solo cuando vuelva la conexión.",
 	"kanban.loadRetry": "Reintentar",
-	"launch.accountShowUsage": "Mostrar detalles de uso",
-	"launch.accountHideUsage": "Ocultar detalles de uso",
 };
 
 export default kanban;

src/mainview/i18n/translations/ru/dashboard.ts

@@ -146,6 +146,7 @@ const dashboard = {
 	"rateLimits.monthlyUsage": "использовано {used} / {limit} · осталось {remaining}%",
 	"rateLimits.captured": "снято {time} назад",
 	"rateLimits.capturedNow": "снято только что",
+	"rateLimits.capturedAgeNow": "только что",
 	"rateLimits.noRecentData": "нет свежих данных об использовании",
 	"rateLimits.quotaExhausted": "Лимит исчерпан — запуск будет падать до сброса.",
 

src/mainview/i18n/translations/ru/kanban.ts

@@ -335,8 +335,6 @@ const kanban = {
 	"kanban.loadFailedDesc": "Задачи проекта не загрузились. Попробуйте ещё раз.",
 	"kanban.loadFailedOffline": "dev-3.0 сейчас не видит ваш компьютер. Доска перезагрузится сама, когда связь вернётся.",
 	"kanban.loadRetry": "Повторить",
-	"launch.accountShowUsage": "Показать детали расхода",
-	"launch.accountHideUsage": "Скрыть детали расхода",
 };
 
 export default kanban;