Skip to content

feat(usage): Limits card shows pace and refill beside the number - #19140

Open
flamboh wants to merge 10 commits into
pingdotgg:mainfrom
flamboh:t3code/usage-limits-redesign
Open

flamboh wants to merge 10 commits into
pingdotgg:mainfrom
flamboh:t3code/usage-limits-redesign

Conversation

@flamboh

@flamboh flamboh commented Oct 13, 2026 •

Copy link
Copy Markdown
Contributor

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Important

Stacked on #14477. Merge that first; this PR's own change is the top commit, f25a195. Both target main because the branches live on a fork.

Problem

On Usage → Limits, a card says roughly the same thing three times: the pace icon, the ↻ +N% refill line and the bar. The pace icon is a glyph you have to hover to decode, and the refill sits on its own line away from the number it changes.

Change

  • The heading's pace icon (web) and "Ahead of pace" / "Under pace" label (mobile) become muted text in the existing text-xs style: 20% ahead of pace, 15% behind pace, or On pace when within 3 points either way.
  • The pool refill moves from its own line to beside the number, 40% left ↻ +18%. On web, single-account pools now show it too; before, web only showed the refill for pools with 2+ accounts. On web a tooltip spells it out ("Pooled usage +18% in 1h 59m", or "Usage +55% in 1h 29m" for a single account); on mobile the same text is its accessibility label.
  • In packages/shared, the pool's pace becomes a signed paceHeadroomPercent, with a formatPaceHeadroom helper and tests.

One visible difference beyond layout: the old label called anything within 5 points "On pace"; the new text uses a 3-point band, so a window main calls "On pace" at 4–5 points off now reads "4% behind pace".

Scope and approval

There is no explicit maintainer approval of this direction. The closest is Julius's review of #11095, a similar pace PR by someone else. That review asked for design iteration: no new typography, no neon green bar, and proof with several pooled accounts. This PR is the card-layout half of that iteration, split out of #14477 so the pace marks can be reviewed on their own:

  • it uses only existing text styles and neutral theme colours;
  • it adds no accent colour;
  • the evidence below shows two pooled accounts next to a single account.

If the direction still needs a sign-off, I'm happy to move it to an Ideas discussion first.

Verification

  • The shared, web and mobile usage tests pass (55 tests, including formatPaceHeadroom).
  • tsc --noEmit for packages/shared, apps/web and apps/mobile is clean, as are vp lint and vp fmt --check on the changed files.
  • Setup: a worktree dev server with native providers turned off and a usageLimitSources entry pointing at a local fake CLIProxyAPI hub. That drives the real server-side hub reader and pooling code with fixed usage figures.
  • Data: two Codex accounts (ada behind pace, ben ahead) and one Claude account, so each screenshot shows a 2-account pool and a 1-account pool together.
  • Mobile: captured on an iOS 27.0 simulator paired to the same dev server.

Before is #14477 (pace marks only); After is this PR. Countdowns differ by a minute between captures.

Web

Before (#14477), wide: pace icons beside "left", refill on its own line under the Codex numbers
Before (#14477), wide: Codex 2-account and Claude 1-account cards with pace trend icons next to "left" and a separate "↻ +18%" line

After, wide: refill beside the number, pace as text below it
After, wide: "40% left ↻ +18%" with "20% ahead of pace" below; Claude reads "45% left ↻ +55%" with "15% behind pace"

Before (#14477), narrow
Before (#14477), narrow layout with pace icons in the headings

After, narrow
After, narrow layout with refill beside the number and pace text in the headings

After, refill tooltip (2-account Codex pool)
After: hovering the Codex session's "↻ +18%" shows "Pooled usage +18% in 2h 0m"

After, refill tooltip (1-account Claude pool): no "Pooled" for a single account
After: hovering the Claude session's "↻ +66%" shows "Usage +66% in 1h 29m"

After, near pace: within 3 points reads "On pace"; 4 points off shows the number
After: Claude session reads "4% behind pace" (34% left) and Claude weekly reads "On pace" (41% left, 2 points ahead of even pace)

Mobile (iOS)

Before (#14477), Limits, 2-account Codex pool: "Ahead of pace" label and a separate "↻ +18% in 1h 58m" line
Before (#14477), iOS Limits: Codex session with "Ahead of pace" at top right and the refill on its own line

After, Limits, 2-account Codex pool
After, iOS Limits: Codex session with "↻ +18%" beside the number and pace as text

Before (#14477), Limits, 1-account Claude pool
Before (#14477), iOS Limits: Claude cards with the "Under pace" label

After, Limits, 1-account Claude pool
After, iOS Limits: Claude cards with the refill beside the number and "behind pace" text

Made with Claude Opus 5.5 in Claude Code via T3 Code. Web screenshots by GPT-6.1 Sol in Codex; mobile screenshots by Claude Opus 5.5 on an iOS simulator.

Each account segment on Usage → Limits gets a dashed neutral mark where
even spending would leave its quota, and the card heading says how far the
pool is from it ("24% under pace", "7% over pace", "On pace") instead of
the pace icon. The segment popover on web and the account screen on mobile
state the mark's value.

With one account the pace icon, refill line and bar said overlapping
things, so the heading keeps only the pace text. With two or more, the
"↻ +N%" pool refill line stays: no segment carries that aggregate. Mobile
now matches web in hiding it for a single account.

The pool's pace becomes a signed paceHeadroomPercent, and the composer
bars reuse the new paceRemainingPercent helper.
The next reset's share of the pool now shows on hover or focus of each
card's remaining percentage, for one account or many, with its countdown.
The next reset's share sits next to "left" as ↻ +N% for one account or
many, with a tooltip on web (and a spoken label on mobile) that explains
it goes back to the pool and when. The even-pace mark no longer
brightens on hover.
The dashed mark was 50% foreground over the fill, which measured
2.4-2.8:1 on light fills. A solid muted tick that overhangs the bar by
4px reads against the page background at 4.7:1 (light) and 5.1:1 (dark)
wherever it sits. The fill and hatching move to an inner clipped layer
so the overhang is not cut off.
# Conflicts:
#	apps/mobile/src/features/usage/UsageLimitsPooled.tsx
#	apps/web/src/components/usage/UsageLimitsPooled.tsx
@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Oct 13, 2026
@macroscopeapp

macroscopeapp Bot commented Oct 13, 2026 •

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR adds a coordinated pace-and-refill experience to the production Usage→Limits screens on web and mobile, including new shared calculations, visual markers, tooltips, and accessibility content. Although it is localized and has no backend or infrastructure side effects, it changes existing user-facing behavior across multiple paths and merits human review.

You can add or adjust custom eligibility rules. Learn more.

@coderabbitai

coderabbitai Bot commented Oct 13, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 3f61fc0a-4b76-4ac7-a321-7a2d38c05fca
📥 Commits

Reviewing files that changed from the base of the PR and between f25a195 and 091c9a1.

📒 Files selected for processing: 4
  • apps/mobile/src/features/usage/UsageLimitsPooled.tsx
  • apps/web/src/components/usage/UsageLimitsPooled.tsx
  • packages/shared/src/usageLimits.test.ts
  • packages/shared/src/usageLimits.ts
🚧 Files skipped from review as they are similar to previous changes: 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; 9 remain after this review.

📝 Walkthrough

Shared usage-limit logic now calculates pace headroom and remaining quota at the current pace. Mobile and web displays use these values for window markers and pooled usage details.

Changes: Usage pacing and pooled quota displays

Layer / File(s) Summary
Shared pace calculations
packages/shared/src/usageLimits.ts, packages/shared/src/usageLimits.test.ts
Pooled windows now expose numeric paceHeadroomPercent instead of categorical pace. New helpers calculate pace-based remaining quota and format pace headroom. Tests cover these calculations and formatting.
Window pace markers
apps/mobile/src/features/usage/UsageLimitsSection.tsx, apps/web/src/components/usage/UsageLimits.tsx
Window rows use paceRemainingPercent to determine the position and availability of the even-pace marker.
Pooled usage displays
apps/mobile/src/features/usage/UsageLimitsPooled.tsx, apps/web/src/components/usage/UsageLimitsPooled.tsx
Pooled usage displays show formatted pace headroom and refill details. Account segments show pace markers and include pace-based remaining quota in their accessible labels.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Possibly related PRs

  • pingdotgg/t3code#11095: Adds the earlier reserve/deficit pace model and pooled pace indicators. This change replaces that model with numeric pace calculations and updates the same usage cards.
  • pingdotgg/t3code#11063: Adds even-pace markers and shared pace calculations to pooled usage bars. This change updates the same marker behavior and usage components.

Suggested labels: vouch:unvouched

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 091c9

No actionable merge-blocking risk was identified in the reviewed changes.

Security architecture risk: ⚪ Minimal · up to 091c9

The inspected changes calculate and display usage information without introducing new permissions, provider operations or account access. Both clients consume the replacement field, while provider data formats and existing quota-reset interactions remain unchanged.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

  • inferred — The incremental exposure is limited to usage presentation in the existing web and mobile views. The inspected changes do not grant authority over additional accounts, environments or data stores; displayed refill predictions are not reset operations.

Trust Boundaries and Controls

  • observed — The adjacent web reset-credit interaction predates this PR. Redemption still depends on account.redeem, uses the existing account-specific redemption input, and passes through confirmation and canManageProviders UI gates. The display changes do not alter these controls; backend authorization is outside this inspection.
Pre-merge checks: Passed 3 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Description check Warning The description includes all required sections and provides detailed change, verification, and UI evidence. However, the Scope and approval section does not provide explicit maintainer approval for th… Link a triaged issue or discussion that contains explicit maintainer approval, including the approval comment. If the change qualifies as an exemption, explain why it is a small, focused, obvious fix.
Passed Passed checks: 3 passed
Check name Status Explanation
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Title check Passed The title clearly and concisely describes the primary change: showing pace and refill information beside the usage amount.
Full details: Description check

Explanation

The description includes all required sections and provides detailed change, verification, and UI evidence. However, the Scope and approval section does not provide explicit maintainer approval for this direction or a valid exemption.

  • Fix all pre-merge checks with AI
✨ 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.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant