diff --git a/apps/web/src/components/usage/UsageLimitsPooled.browser.test.tsx b/apps/web/src/components/usage/UsageLimitsPooled.browser.test.tsx index ab114fbbd6f21..88095f4974028 100644 --- a/apps/web/src/components/usage/UsageLimitsPooled.browser.test.tsx +++ b/apps/web/src/components/usage/UsageLimitsPooled.browser.test.tsx @@ -6,9 +6,11 @@ import { } from "@t3tools/contracts"; import { CHATGPT_USAGE_URL } from "@t3tools/shared/usageLimits"; import { describe, expect, it } from "vite-plus/test"; +import { page } from "vite-plus/test/browser"; import { render } from "../../../test/render"; import { UsageLimitsPooled } from "./UsageLimitsPooled"; +import "~/index.css"; const checkedAt = "2026-10-25T16:00:00.000Z"; @@ -63,3 +65,47 @@ describe("UsageLimitsPooled ChatGPT usage card", () => { .toBeVisible(); }); }); + +describe("UsageLimitsPooled pool bar", () => { + it("labels a single account's bar in the wide layout", async () => { + await page.viewport(1280, 800); + const codex: ServerProvider = { + instanceId: ProviderInstanceId.make("codex"), + driver: ProviderDriverKind.make("codex"), + enabled: true, + installed: true, + version: "0.164.0", + status: "ready", + auth: { status: "authenticated", email: "kam@example.com" }, + checkedAt, + models: [], + slashCommands: [], + skills: [], + usageLimits: { + checkedAt, + windows: [ + { + id: "weekly", + kind: "weekly", + label: "Weekly", + usedPercent: 40, + resetsAt: "2026-10-28T16:00:00.000Z", + }, + ], + }, + }; + const presentations = new Map([ + [ + EnvironmentId.make("desk"), + { entry: { target: { label: "Desk" } }, serverConfig: { providers: [codex] } }, + ], + ]); + await using screen = await render( + , + ); + + const bar = screen.getByRole("button", { name: /^KE: 60% left/ }); + await expect.element(bar.getByText("↻ 3d 0h")).toBeVisible(); + await expect.element(bar.getByText("KE", { exact: true })).toBeVisible(); + }); +}); diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx index 00f437246584f..c05b4f82a0ed8 100644 --- a/apps/web/src/components/usage/UsageLimitsPooled.tsx +++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx @@ -288,7 +288,7 @@ function PoolSegment({ readonly color: string; readonly now: number; readonly index: number; - readonly showAccountName: boolean; + readonly showPercent: boolean; }) { return account.redeem ? ( @@ -333,13 +333,13 @@ function SegmentTriggers({ color, now, index, - showAccountName, + showPercent, }: SegmentPayload & { readonly refillPercent: number; readonly color: string; readonly now: number; readonly index: number; - readonly showAccountName: boolean; + readonly showPercent: boolean; }) { const popover = use(SegmentPopoverContext) ?? undefined; const payload: SegmentPayload = { account, window, reset, redeem }; @@ -398,14 +398,9 @@ function SegmentTriggers({ {index}
- {showAccountName ? ( - - ) : null} + {/* A single-account bar repeats the headline percentage. */} - {showAccountName ? ( + {showPercent ? ( {remaining}% @@ -519,7 +514,7 @@ function PoolBar({ color={normalizeProviderAccentColor(member.account.accentColor) ?? color} now={now} index={position + 1} - showAccountName={pool.columns.length > 1} + showPercent={pool.columns.length > 1} /> ) : null, )}