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

open9

main

fix/issue-32525

View on GitHubTwo-way sync enabledPR last imported 1h ago

Problem

On the web Usage → Limits page, a pool with a single account shows the account's label in the compact layout (the legend row under the bar), but the wide layout hides it. Resizing the window makes the account identifier disappear. Reproduced on main (e455200077) by rendering UsageLimitsPooled with one Codex account (email only): at a 500px viewport the legend row shows KE 60%; at 1280px the bar shows only the reset pill, with no account label. With two accounts the label shows at both widths.

Change

One flag, showAccountName (pool.columns.length > 1), gated both the account label and the repeated percentage in the wide bar. The wide bar now always renders AccountName. The flag is renamed showPercent and only keeps a single-account bar from repeating the headline percentage.

With the label shown, a long single-account name squeezed the reset/credit pill and clipped its credit count. The pill now keeps its width (shrink-0) on single-account bars, so the name truncates first. Multi-account bars keep main's shrinkable pill (min-w-0) and render as before.

Scope and approval

Fixes pingdotgg/t3code#32525

Small, focused fix of the triaged bug in that issue. Web only; desktop wraps the same component. Mobile renders this view with its own component, which already shows the label, and this PR does not change it.

Verification

Browser test UsageLimitsPooled pool bar > labels a single account's bar in the wide layout in apps/web/src/components/usage/UsageLimitsPooled.browser.test.tsx renders one email-only Codex account at 1280px with the app CSS and checks that the wide bar shows both the reset pill and the KE label.
- On main: fails with Cannot find element with locator: …getByRole('button', { name: /^KE: 60% left/ }).getByText('KE').
- On this branch (latest main merged): 2/2 tests in the file pass.
vp run check:changed on the merged head: format, lint, knip, typecheck (2 packages) and React compiler pass; its test step was killed by the 900s runner timeout on a loaded host, and the same test file passes 2/2 when run directly.
Review: two independent reviewers on the full diff against main found no bugs or regressions; the only finding was a stale real-app capture (I1), now recaptured below.
Proof audit: matrix derived from the code (fixture matrix); two audit passes over every row, with R1 and B2 rebuilt independently from the linked drivers at zero pixel delta.

Evidence

Playwright 1.60 / Chromium 148, Linux, DPR 1, no device emulation, Inter, 16px root, no font scaling, en-US/UTC, reduced motion, clock frozen at 2026-10-25T16:00:00Z. W = 1280×900 (742px pool), C = 390×900 (316px pool). Rows marked harness render the real UsageLimitsPooled with app CSS and WorkspacePageContainer on synthetic data; rows marked app are the real dev app's /usage → Limits on a fresh database fed by a mock CLIProxy usage source with synthetic data. Each sheet is Before | After | Diff0 (any channel delta, amplified) | DiffT (>16).

Harness rows A–D, B1, B3: before main ac5e48c612, after f77e6dc16f. App rows I1, A1R, K1 and harness rows R1, B2: before main e5b0718a8a, after dfdf1c7e6e. K1-C: before main 1fed70cd19, after 4c517daf02. Only main merges came in after f77e6dc16f; none touches apps/web/src/components/usage, packages/shared/src/usageLimits.ts or apps/web/src/index.css.

What else changed: wide single-account bars gain the account label (initials chip, display name, or provider name), truncated with an ellipsis before the reset/credit pill. Nothing else: compact frames and the multi-account controls B1, B2 and B3 are pixel-identical at threshold 0; in A4/A6/T1/R1 only name pixels differ and the reset/credit pill keeps main's width. Hover, click, Enter and Space open the same details popover on both sides, wide and compact. B3's six crowded pills clip their reset/credit text identically on main and here; that is existing behaviour.

Row	Fixture	Sheet / recordings
A1	harness, one email-only account, W/C, light/dark	A1
A1R	app, continuous resize W → C → W (45 steps each way)	Before MP4 · After MP4 A1R endpoints
A2	harness, display name, W, light/dark	A2
A3	harness, neither name nor email (provider fallback), W light	A3
A4	harness, long name, reset and 12 credits, W, light/dark	A4
A5	harness, display name, no reset or credits, W light	A5
A6	harness, long name, credits only, W light	A6
T1	harness, long name, 23h 59m reset, 12 credits at the 671/672px pool breakpoint	T1
R1	harness, long name, 12 credits, pool 672px, "Resets momentarily" then "resets now"	Before MP4 · After MP4 R1
D1	harness, one Claude account: email only, and provider fallback, W light	D1
B1	harness, two accounts (control), W, light/dark	B1
B2	harness, three named accounts with readable credit pills (control), W light	B2
B3	harness, six long-named accounts with credits (control), W light	B3
I1	app, one email-only account, W light/dark, C light	I1
K1	app, W: hover the new label, click, Tab + Enter, Tab + Space	Before MP4 · After MP4
K1-C	app, C: hover the legend label, click, Tab + Enter, Tab + Space	Before MP4 · After MP4 K1-C initial

Pill detail, before (left) and after (right): A4 credit count (light above, dark below), then R1 "Resets momentarily" / "resets now":

A4 credit detail R1 pill detail

Recording steps with timestamps, per-capture files, pixel counts and geometry: A1–A4, B1, B3 index · A5, A6, T1, D1 index · I1, A1R, R1, K1, B2 index · K1-C index. Drivers (uploaded, not committed): REPRODUCE.md · REPRODUCE-r2.md · harness.tsx · capture-harness.mjs · mock-cliproxy.mjs · seed-real-app.mjs · capture-real-app.mjs · capture-real-interactions.mjs.

Not checked: a real limits-reporting account (synthetic sources only), mobile (its own component already shows the label and is unchanged), and the desktop shell (it wraps the same web component).

AI-assisted; verified with the tests and tools listed above.

Checks

20 successful · 14 skipped

All checks passed

Added 2 commits3d ago

test(web): reproduce missing single-account label in wide usage pool bar (#32525)320bf37
fix(web): usage limits keep a single account's label at wide sizes72b46d5

MmacroscopeappBotapproved these changes · review dismissed3d ago

MmacroscopeappBot3d ago

Approvability

Verdict: Approved at f77e6dc

Macroscope's review found this PR approvable — Wide single-account usage bars now retain their account label and keep the reset/credit pill from shrinking. The change is presentation-only and does not alter usage limits or credit operations.

No code changes detected at 94947ba. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

CcoderabbitaiBot3d ago

Explain Change →

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

External image Run configuration

Source mode: Auto
Repository: pingdotgg/t3code
Branch: fix/issue-32525
File: .coderabbit.config.ts
Commit: 94947ba
Layers: Repository TS config
Review profile: CHILL
Plan: Team
Run ID: 83f92e92-039c-4f39-b7f6-f15f31db726f

External image Commits

Reviewing files that changed from the base of the PR and between 4c517daf02d1269edc82c2be23d771cb95796d74 and 94947ba43ddd6f251461097512fe3436888906e1.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

Trigger review

No actionable comments were generated in the recent review.

Walkthrough

The wide pooled usage bar now always displays the account name. The percentage remains conditional on the number of pool columns. A browser test checks a single-account bar’s remaining percentage, reset countdown, and account initials.

Changes: Pooled usage bar

Layer / File(s)	Summary
Wide bar account label and percentage `apps/web/src/components/usage/UsageLimitsPooled.tsx`, `apps/web/src/components/usage/UsageLimitsPooled.browser.test.tsx`	The wide bar always renders the account name. It displays the percentage when the pool has multiple columns. The browser test checks a single-account bar at a wide viewport.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Possibly related PRs

pingdotgg/t3code#25778: Changes percentage visibility in the wide bar, a condition this PR separates from account-name rendering.
pingdotgg/t3code#26256: Changes when pooled-bar account names appear.
pingdotgg/t3code#25251: Changes single-account percentage visibility in the wide bar.

Suggested reviewers: t3dotgg, only21mil

Merge Risk: External image Minimal · previous review f77e6

The change appears ready to merge after normal checks.

Pre-merge checks: ^Passed 4

Check name	Status	Explanation
Title check	Passed	The title clearly summarizes the main change: a single account’s label remains visible at wide sizes.
Linked Issues check	Passed	[`#32525`] `SegmentTriggers` now always renders `AccountName` in the wide bar. The compact layout remains unchanged. The browser test covers a single email-only Codex account at 1280px and checks the ac…
Out of Scope Changes check	Passed	[`#32525`] The browser test and the reset/credit pill sizing change support the account-label fix. The pill now resists shrinking for a single-account bar so a long account name truncates first. No unre…
Description check	Passed	The description covers the problem, change, scope, linked issue, and focused verification. It includes before/after UI evidence and reports what was not checked. It does not name the AI model and harn…

Full details: Linked Issues check

Explanation

[#32525] SegmentTriggers now always renders AccountName in the wide bar. The compact layout remains unchanged. The browser test covers a single email-only Codex account at 1280px and checks the account label and reset pill. showPercent preserves the existing percentage behavior for multi-account bars and avoids repeating the percentage for one account.

Full details: Out of Scope Changes check

Explanation

[#32525] The browser test and the reset/credit pill sizing change support the account-label fix. The pill now resists shrinking for a single-account bar so a long account name truncates first. No unrelated changes are evident.

Full details: Description check

Explanation

The description covers the problem, change, scope, linked issue, and focused verification. It includes before/after UI evidence and reports what was not checked. It does not name the AI model and harness, as the template requests when an agent was used, but the description is otherwise complete.

Finishing Touches

Generate docstrings

Commit to this branch
Create a new PR

Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

External image Recent review info

External image Run configuration

Source mode: Auto
Repository: pingdotgg/t3code
Branch: fix/issue-32525
File: .coderabbit.config.ts
Commit: f77e6dc
Layers: Repository TS config
Review profile: CHILL
Plan: Team
Run ID: `dcd1efaa-59f5-4494-b194-7cfa13ee6070`

External image Commits

Reviewing files that changed from the base of the PR and between 1ad7abff6b28f56b2d9a3584409e5dc05c1784a0 and f77e6dc16f16d77443153b444998dc20c34883ac.

External image Files selected for processing: 1

`apps/web/src/components/usage/UsageLimitsPooled.tsx`

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.

Added 3 commits6h ago

Merge remote-tracking branch 'origin/main' into pr-325341ad7abf
fix(web): long account names no longer clip the usage reset pillee74dcf
fix(web): keep multi-account usage segments' pill shrinkablef77e6dc

MmacroscopeappBotapproved these changes6h ago

Added 4 commits1h ago

Merge remote-tracking branch 'origin/main' into pr-32534b6053b1
Merge remote-tracking branch 'origin/main' into pr-32534dfdf1c7
Merge remote-tracking branch 'origin/main' into pr-325344c517da
Merge remote-tracking branch 'origin/main' into fix/issue-3252594947ba

JJulius Marminge46m ago

Evidence

Run both commits as separate real web dev apps with fresh databases and the same synthetic hub data. Environment for every capture: Chromium 157/Linux, light theme, DPR 2. Compact viewport: 800×800 CSS px; wide viewport: 1280×800 CSS px.

Steps: Open Usage → Limits with one synthetic account at 60% remaining and three reset credits. Record widening from compact to wide. At the wide viewport, repeat with a long account name, three longer account names, and three short account names. Every still was captured after two screenshots 500 ms apart matched byte-for-byte. Captures were opened and inspected.

Before	After
d756fed7aa	94947ba43d
Compact: label visible in legend. Before compact single account	Compact: label remains visible. After compact single account
Wide: label disappears. Before wide single account	Wide: Sample Account remains inline. After wide single account
Long name hidden. Before long account name	Name truncates before the intact reset/credit pill; the pace marker still crosses text. After long account name
Three short names: names, percentages and pills fit in approximately 245px segments. Before three narrow account segments	Same layout on head. After three narrow account segments
Longer multi-account names expose existing clipping. Before multi-account stress case	Same clipping on head; no observed regression. After multi-account stress case
Before resize recording	After resize recording

Rebuilt using the uploaded synthetic hub and browser driver. Raw stability pairs and recording review frames.

The label disappearance is reproduced on base and gone on head. This does not establish completely unobstructed long-name rendering: the pace marker still crosses text. Multi-account stress clipping exists on both commits.

AI-assisted; verified with the tests and tools listed above.

Not shown:

Unobstructed long-name rendering is not established: the head capture still shows the pace marker crossing the name. The label visibility and truncation fix passes, but the marker layering remains.
Completely unclipped multi-account rendering with longer names is not established: the third segment's credit content clips on both base and head. The short-name three-account case fits, and no difference was observed between commits.
Direct first-party OAuth usage was not exercised because those credentials are unavailable; the real app was verified through its supported hub integration using synthetic Codex subscription responses.