Repository navigation
feat(web): show usage limits as used or left - #26284
abhaymettu wants to merge 2 commits into
Conversation
usageDisplay decodes to "remaining" when missing, so existing settings files keep today's readout.
Settings > Threads > Usage limits gets a "Show usage as" choice. Every limits readout now goes through usageReadout: the percent, its label, the bar fill, the even-pace mark and its text, the refill hatching and the restore amount all flip together. Used is the complement of left, and the bar fills from the start in both modes. The mark moves to the share of the window elapsed when showing used, so a fill past the mark means ahead of pace there, and under pace when showing left. Refill hatching sits on the tail of the fill when showing used, so it draws in the background colour there.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
ApprovabilityVerdict: Approved at Macroscope's review found this PR approvable — Adds a setting to show subscription limits as used or left, with matching bars and pace indicators. Existing default presentation and actual quota enforcement remain unchanged. You can add or adjust custom eligibility rules. Learn more. |
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Usage display setting contract packages/contracts/src/settings.ts, packages/contracts/src/settings.test.ts |
The client settings schema accepts “remaining” and “used,” defaults missing values to “remaining,” and includes the preference in patches. Tests cover the default and accepted and rejected values. |
Threads preference controls apps/web/src/components/settings/SettingsPanels.tsx, apps/web/src/components/settings/settingsSearch.ts, apps/desktop/src/settings/DesktopClientSettings.test.ts |
The Threads panel offers “Left” and “Used,” supports restoring the default, and includes the setting in restore-defaults change detection. Settings search links to the Threads panel. The desktop test fixture sets the preference to “used.” |
Usage readouts and displays apps/web/src/components/usage/usageReadout.ts, apps/web/src/components/usage/usageReadout.test.ts, apps/web/src/components/usage/UsageLimits.tsx, apps/web/src/components/usage/UsageLimitsPooled.tsx |
Shared helpers calculate display-aware readouts, restoration text, and refill spans. Usage components use them for percentages, labels, pace indicators, tooltips, and refill bars. Tests cover both display modes and cases without a refill or pace value. |
Priority:
Estimated code review effort: 3 (Moderate) | ~20 minutes
Sequence Diagram(s)
sequenceDiagram
participant Settings as ThreadsSettingsPanel
participant Limits as UsageLimits
participant Pooled as UsageLimitsPooled
participant Readout as usageReadout
Settings->>Limits: Configure usage display preference
Limits->>Readout: Pass display and usage percentages
Readout-->>Limits: Return display-aware readout
Pooled->>Readout: Pass display and usage percentages
Readout-->>Pooled: Return display-aware readout
Possibly related PRs
- pingdotgg/t3code#25651: Adds the Threads settings page and places usage-limit controls there; this change adds the display preference to that same settings surface.
Suggested reviewers: juliusmarminge, maria-rcks
Merge Risk: 
cf111
-
No merge-blocking issue was established.
Pre-merge checks: 
-
Check name Status Explanation Title check The title "feat(web): show usage limits as used or left" matches the main change: a new Settings > Threads option, "Show usage as", that switches subscription limit readouts between Left and Used. It … Linked Issues check Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Check skipped because no linked issues were found for this pull request. Description check The description follows the template well. It has Problem, Change, Scope and approval, and Verification sections, with specific tests, manual checks, and before/after screenshots. The Scope and approv… Full details: Title check
-
Explanation
The title "feat(web): show usage limits as used or left" matches the main change: a new Settings > Threads option, "Show usage as", that switches subscription limit readouts between Left and Used. It follows the conventional commit format the template asks for. It is specific and does not use vague terms.
Full details: Description check
-
Explanation
The description follows the template well. It has Problem, Change, Scope and approval, and Verification sections, with specific tests, manual checks, and before/after screenshots. The Scope and approval section lacks a linked issue or maintainer approval. It argues the change is a focused configuration option of an established capability, which the template allows. The template asks for a triaged issue or explicit approval, or for the author to explain why the exemption applies. The author explained the exemption, so the section is mostly complete. The description also names the model used, as the template requests. Remaining gaps: the author gives no maintainer approval, and the packaged desktop build and Codex/Cursor limits are not checked.
-
Finishing Touches
-
🧪 Generate unit tests (beta)
-
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Comment @coderabbitai help to get the list of available commands.
Problem
Subscription limits always show the share left, such as "62% left". Some people track what they have spent instead,
as in "I've used 38% of my week", and they have to subtract every number in their head. Time format already offers a
12-hour or 24-hour choice. Usage limits have no equivalent.
Change
default and keeps the current readout.
usageDisplay: "remaining" | "used"decodes to"remaining"when it is missing.usageReadout(display, remainingPercent, windowLeftPercent), feeds every readout: the percent,its label and word, the bar fill, the even-pace mark, and the mark's text. It takes the numbers that the shared
helpers already compute. With Left, the output matches
main. With Used, it is the exact complement.read it.
so a fill past the mark still means ahead of pace. The pace wording does not change.
refillSpan). Onthe fill, the stripes draw in the background colour so they stay visible. The restore amount reads "+19%" with Left
and "−19%" with Used.
Scope and approval
There is no prior discussion. I think this fits the route for a focused configuration option for an established
capability.
the pace calculation and the layout do not change.
setting is client-only, like
timestampFormat. Web and desktop share the code. The mobile app has its own readoutsand does not read client settings, so it is unchanged. The server is not involved.
Out of scope: layout changes to the pooled bars, such as account labels above the bar. That is a separate problem.
Verification
apps/webusageReadout.test.ts(7 tests) checks literal strings and positions for bothmodes, a window with no clock, and refill spans.
packages/contractssrc/settings.test.ts(25 tests) covers thedefault decode, a patch decode, and the rejection of an unknown value.
tsc --noEmitis clean for contracts, web and desktop, andvp lintis clean on the touched paths.vp run dev --home-dir <tmp> --no-seed. The limits came from a local stand-in for a CLIProxyAPIhub, added as a usage limit source in server settings, which returned two Claude accounts on
example.com. WithLeft, the Usage page matched
mainpixel for pixel, apart from the reset countdowns, which had moved by a minute.A segment's accessible label read "62% left, ..., 45% of the window left" on both. With Used, it read "38% used,
..., 55% of the window elapsed", the pool cards read "25% used" and "44% used", and the popover rows read "Used",
"55% used by now" and "−19% of pool".
code.
Usage page, Limits, two Claude accounts. Before is
main:The segment popover with Used, and the settings row:
Claude Opus 5.5 via Claude Code in T3 Code.