fix(web,mobile): limit bars use each provider's chart color

[charlielockyer-rice]

barColor (web) and useBarColor (mobile) are documented to use each provider's usage-chart color, but they only map Codex and Claude. Cursor, Grok, OpenCode and Antigravity limit bars fall back to the plain foreground color, and mobile's pooled limits paint every non-Claude provider in Codex's color.

Web now looks the driver up in PROVIDER_PRESENTATION, the table the chart already uses. Mobile gets a small usageProviderKind helper for the same lookup. This is a small, obvious-bug fix: the code didn't match its own documented behavior, and nothing else about the bars changes.

Before / after (Usage → Limits; Cursor, Grok and OpenCode data mocked through a local CLIProxyAPI-compatible hub):

Checked:

• vp run --filter @t3tools/web typecheck and vp run --filter @t3tools/mobile typecheck: clean.
• vp lint on the changed files: no warnings.
• vp test run apps/web/src/components/usage apps/web/src/components/chat apps/mobile/src/features/usage: 1079 passed.

Mobile: checked on the iPad Pro simulator (iOS 27, dev client). Claude and Codex limits render unchanged, as expected, since they were already mapped. Cursor, Grok and OpenCode can't be reproduced on a device here because those providers aren't installed and a CLIProxyAPI hub only carries Codex and Claude accounts. Their mobile path is the same usageProviderKind lookup, which typechecks against the chart's color table.

Implementation: Claude Opus 5.5 (1M context), Claude Code harness in T3 Code.

🤖 Generated with Claude Code

[coderabbitai]

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: 39bad32b-51c4-4a93-92c8-f03ed020a49d

📥 Commits

Reviewing files that changed from the base of the PR and between a9fb6a8 and 200b210.

📒 Files selected for processing (4)

• apps/mobile/src/features/usage/UsageLimitsPooled.tsx
• apps/mobile/src/features/usage/UsageLimitsSection.tsx
• apps/mobile/src/features/usage/usageProviders.ts
• apps/web/src/components/usage/UsageLimits.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

Walkthrough

Mobile and web usage screens now select provider colors by matching drivers to provider kinds or presentations. Mobile screens use a shared helper, with a Codex fallback for pooled cards. The web screen retains its foreground-color fallback when no presentation matches.

Changes

Usage provider colors

Layer / File(s)	Summary
Map usage drivers to provider colors apps/mobile/src/features/usage/usageProviders.ts, apps/mobile/src/features/usage/UsageLimitsPooled.tsx, apps/mobile/src/features/usage/UsageLimitsSection.tsx, apps/web/src/components/usage/UsageLimits.tsx	Mobile screens use usageProviderKind to select provider colors. Pooled cards use Codex when no provider kind matches. The web screen finds a provider presentation by driver and uses the foreground color when none matches.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to 200b2

This change aligns usage-bar colors with provider identity; supported providers map correctly, while unmatched drivers keep their fallbacks. No merge-blocking risk was identified.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 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.
Approvability	✅ Passed	Pass. The pull request changes only provider-color lookup logic in four usage UI files. It is a focused bug fix that makes limit bars match existing chart colors. It does not change a product default,…
Title check	✅ Passed	The title clearly and concisely describes the main change: provider-specific limit-bar colors on web and mobile.
Description check	✅ Passed	The description explains the problem, implementation, scope rationale, verification results, UI evidence, and known mobile testing limitations. It adequately addresses the required template sections.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

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

---

_{Comment @coderabbitai help to get the list of available commands.}