From 320bf37dcef3697dda342613a7bca4324e050a3c Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sat, 7 Nov 2026 16:35:42 +0000
Subject: [PATCH 1/2] test(web): reproduce missing single-account label in wide
 usage pool bar (#32525)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reproduces #32525: in the wide Usage → Limits layout, a pool with a single
account shows only the reset pill on its bar, so the account label is gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../usage/UsageLimitsPooled.browser.test.tsx  | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

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(
+      <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();
+  });
+});

From 72b46d57219c7e70709d2f760d45e2db1d273035 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sat, 7 Nov 2026 16:38:25 +0000
Subject: [PATCH 2/2] fix(web): usage limits keep a single account's label at
 wide sizes

The wide pool bar hid the account label for single-account pools because one
flag gated both the label and the repeated percentage. Always render the label
and rename the flag to showPercent, which now gates only the percentage.

Fixes pingdotgg/t3code#32525

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/usage/UsageLimitsPooled.tsx  | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

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 ? (
     <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,
         )}