Synced from GitHub
fix(web): usage limits no longer show a disabled history period#24411
Problem
On the Usage page, selecting Limits leaves the history period selector visible but disabled, without explaining why. This happens in both the wide segmented control and the compact picker.
Change
Hide the history period selector while Limits is selected and explain that limits show live usage. Cost and Tokens retain their selectable history period and restore the previous selection. Native mobile already hides this control in Limits; desktop uses the same web component.
Scope and approval
Fixes https://github.com/pingdotgg/t3code/issues/16179 GitCafe: https://git.cafe/pingdotgg/t3code/issues/16179
Triaged bug via the automated issue flow. This fixes the misleading disabled control without adding historical limit snapshots, options, or persisted state.
Verification
- Scoped lint and web typecheck passed. Existing usage-page preference tests passed (4 tests). No markup-only test added for this visual change.
- Two independent diff reviews found no code blockers. Independent proof audit reproduced the 390px dark after capture with zero changed pixels and accepted the disclosed verification scope.
- Integrated head
0252b8f70c88e95dc40c54adb88c9f66d85fc10eincludes current main6e79211743; focused checks passed again after integration. Captures comparebb7783e295with459dcae8b9; the changed UsagePage file is byte-identical in the integrated head. - Real app on Linux, Chrome 154, isolated worktree state; CSS viewports 1440×900 and 390×844, light/dark, DPR 2, zoom 100%, root font 16px. Wide snapshot PNGs are scaled to 1280×800 by the preview service; phone PNGs are 780×1688.
- Verified period selection and retention across Limits/history switches and reload, keyboard shortcuts/focus, refresh completion, environment selection, and responsive header boundaries. Genuine historical usage supplied populated Cost and Tokens views.
- Populated live-limit cards, provider notice/link/Cursor prompt variants, a server with no configured environments, native Electron chrome, and relay mode were not captured. Native mobile is unchanged and already excludes the period picker in Limits.
- Visible changes: remove the disabled period control, reposition the right-aligned metric controls, add the explanation, and shift Limits content below it. A narrow Tokens/breadcrumb overlap was reproduced identically on the baseline and is outside this fix.
Full evidence report, recordings, regression captures, fixture provenance and scripts. Fixture matrix.
Evidence
These show the genuine empty subscription-limits state, not a populated-account substitute. Wide uses ToggleGroup; phone uses Select.
1440px light
| Before | After |
|---|---|
bb7783e295 | 459dcae8b9 |
| Before: Limits, 1440px light | After: Limits, 1440px light |
Threshold 0, RGB difference amplified 8× · Threshold 16/255, magenta changed-pixel mask
1440px dark
| Before | After |
|---|---|
bb7783e295 | 459dcae8b9 |
| Before: Limits, 1440px dark | After: Limits, 1440px dark |
Threshold 0, RGB difference amplified 8× · Threshold 16/255, magenta changed-pixel mask
390px light
| Before | After |
|---|---|
bb7783e295 | 459dcae8b9 |
| Before: Limits, 390px light | After: Limits, 390px light |
Threshold 0, RGB difference amplified 8× · Threshold 16/255, magenta changed-pixel mask
390px dark
| Before | After |
|---|---|
bb7783e295 | 459dcae8b9 |
| Before: Limits, 390px dark | After: Limits, 390px dark |
Threshold 0, RGB difference amplified 8× · Threshold 16/255, magenta changed-pixel mask
Diffs composite transparency consistently onto the theme background, then compare max absolute RGB channel difference. Threshold 0 includes every nonzero pixel; threshold 16 marks pixels with any channel difference >16/255. No regions are masked from these diffs. Changed-pixel counts
Implementation: Claude Opus 5.5 through the Claude harness. Triage, review and verification: GPT-6.1-sol through the Codex harness, with an independent Claude Opus 5.5 review.
Checks
22 successful · 6 skipped
Added 2 commits
Synced from GitHub
Approvability
Verdict: Approved at 0252b8f
Macroscope's review found this PR approvable — This one-file change is a focused UI bug fix that hides the irrelevant disabled history selector for live usage limits and adds explanatory text. Existing Cost and Tokens history behavior, preferences, and limits data handling remain unchanged.
You can add or adjust custom eligibility rules. Learn more.
Synced from GitHub
No actionable comments were generated in the recent review.
External image Recent review info
External image Run configuration
- Source mode: Auto
- Repository: pingdotgg/t3code
- Branch: fix/issue-16179
- File: .coderabbit.config.ts
- Commit: 0252b8f
- Layers: Repository TS config
- Review profile: CHILL
- Plan: Team
- Run ID:
9527ed62-5898-44da-b546-e0f598edef6e
External image Commits
Reviewing files that changed from the base of the PR and between 6e792117436662208bf2b6eb71ee8d0d88817e43 and 0252b8f70c88e95dc40c54adb88c9f66d85fc10e.
External image Files selected for processing: 1
apps/web/src/components/usage/UsagePage.tsx
Limit details: You’ve used all 10 included reviews currently available.
Walkthrough
The Usage page now hides the history-period controls when Limits is selected. The Limits view displays a notice that usage is live and that the history period applies only to Cost and Tokens.
Changes: Usage Limits view
Layer / File(s) Summary Limits period controls and notice
apps/web/src/components/usage/UsagePage.tsxThe desktop toggle and compact select are omitted in Limits mode. A notice states that Limits shows live usage and that the history period applies to Cost and Tokens. The existing UsageLimitsSectionand Cursor enable flow remain in place.Priority: External image Low
Estimated code review effort: 2 (Simple) | ~10 minutes
Change: Bug fix · Severity of issue fixed: Low
Possibly related issues
- pingdotgg/t3code#24113 — This issue concerns overlap in the Usage page header. Hiding the period control in Limits mode changes the controls shown in that header.
Possibly related PRs
- pingdotgg/t3code#24123 — Changes the Usage page header layout and container-based control breakpoints.
- pingdotgg/t3code#24125 — Also changes the Usage page header layout and container-query breakpoints.
- pingdotgg/t3code#18274 — Adds subscription-limit data displayed in the Usage → Limits view.
Suggested labels:
size:MSuggested reviewers:
nateec
Merge Risk: External image Minimal · up to 0252b
The requested Limits behavior is implemented without an identified merge-blocking issue.
Pre-merge checks: Passed 4
Check name Status Explanation Title check Passed The title clearly and concisely describes the main web fix: removing the disabled history-period control from the Usage Limits view. Description check Passed The description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the issue, implementation, linked issue, test results, visual evidence, and known veri… Linked Issues check Passed Issue #16179asks that the Usage page hide the history period selector while Limits is selected and state that limits are live. The reviewed diff of apps/web/src/components/usage/UsagePage.tsx does bo…Out of Scope Changes check Passed The reviewed change set for the whole PR, from merge base 6e792117 to head 0252b8f7, is limited to apps/web/src/components/usage/UsagePage.tsx. Every hunk maps to issue #16179. Two hunks conditionally…Full details: Description check
Explanation
The description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the issue, implementation, linked issue, test results, visual evidence, and known verification limits.
Full details: Linked Issues check
Explanation
Issue
#16179asks that the Usage page hide the history period selector while Limits is selected and state that limits are live. The reviewed diff of apps/web/src/components/usage/UsagePage.tsx does both. (1) Desktop: the period ToggleGroup, aria-label "Usage period", is rendered only when showingLimits is false. (2) Compact: the period Select is rendered only when showingLimits is false. (3) A new paragraph renders when Limits is active: "Limits show live usage, so the history period applies only to Cost and Tokens." The windowDays state and selectWindow are not changed, so the Cost and Tokens period selection is retained when the user switches views. The issue allows hiding the selector with an explanation, so the chosen approach meets the requirement. No automated test was added. The issue does not request one, and the PR reports that existing usage-page preference tests pass. No non-coding requirements apply.
Full details: Out of Scope Changes check
Explanation
The reviewed change set for the whole PR, from merge base 6e792117 to head 0252b8f7, is limited to apps/web/src/components/usage/UsagePage.tsx. Every hunk maps to issue
#16179. Two hunks conditionally omit the desktop and compact period controls under showingLimits. One hunk adds the live-usage explanation and wraps UsagePage's existing UsageLimitsSection and cursorPrompt props in a fragment. The +63/-59 line count includes re-indentation from these wrappers. No unrelated behavior, refactoring, or data-model change was found in the diff. The PR reports that historical limit snapshots, new options, and persisted state were not added, and the diff matches that claim.
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
Usage-based review receipt
- Mode: Continue automatically
- Reviewed files: 1
- Charged: $0.25
- View usage details
Note
This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.
Comment @coderabbitai help to get the list of available commands.