fix(web): usage limits keep a single account's label at wide sizes

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(
+      <UsageLimitsPooled presentations={presentations} now={Date.parse(checkedAt)} />,
+    );
+
+    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();
+  });
+});

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 ? (
     <RedeemableSegment account={account} redeemAt={account.redeem} {...props} />
@@ -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}
         </span>
         <div className="relative hidden h-full min-w-0 items-center gap-1.5 overflow-hidden rounded-md px-2 text-xs @2xl/pool:flex">
-          {showAccountName ? (
-            <AccountName
-              account={account}
-              className="min-w-0 truncate font-medium text-foreground"
-            />
-          ) : null}
+          <AccountName account={account} className="min-w-0 truncate font-medium text-foreground" />
           {/* A single-account bar repeats the headline percentage. */}
-          {showAccountName ? (
+          {showPercent ? (
             <span className="shrink-0 font-semibold text-foreground tabular-nums">
               {remaining}%
             </span>
@@ -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,
         )}