feat(web): filter the Usage page to just the providers you want

[t3dotgg]

The Usage page always mixes every provider together. There was no way to say "only show Claude Code" and see just that spend, chart, and limits.

Now there is a provider filter in the Usage header, next to the environment filter. Untick "All providers", tick the ones you want, and every tab follows: totals, sessions, shares, the chart, the model and day tables, and the Limits bars. The choice is saved with the other Usage page settings, so it sticks after a reload.

How it works: hidden providers are removed from each environment's summary (both usage buckets and transcript sources) before the client merge, so session counts and shares stay correct instead of only hiding rows. On Limits, hidden drivers are removed from native accounts and hub accounts before pooling. The ChatGPT shared usage row and the Cursor "Enable" prompts hide with their provider. The setting is stored as the hidden set, so new providers show by default, and older saved settings still load.

Before	After (Claude Code only)

Dollar figures are blurred in the screenshots. Captured against a dev server reading real transcripts.

Verified:

• Unit tests for the merge narrowing (cost and sessions drop and restore) and the stored preference.
• In a real browser: all providers showed Codex + Claude Code totals; Claude Code only showed just Claude's cost and sessions, one chart line, and recomputed shares; the choice survived a reload; on Limits, hiding Codex removed its pool.

Not in this PR: the mobile Usage screen has its own filter menu and can get the same toggle in a follow-up. #16376 also edits UsagePage.tsx and state/usage.ts, so whichever lands second needs a small rebase.

Reviewed with sol-loop: 2 rounds with GPT-6.1-Sol on high.

Created with Claude Opus 5.5 in Claude 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: Team
• Run ID: acbb8fab-0d08-43b2-8891-012c7e34a4eb

📥 Commits

Reviewing files that changed from the base of the PR and between 7ac5ec6 and 003f146.

📒 Files selected for processing (7)

• apps/web/src/components/usage/UsageLimits.tsx
• apps/web/src/components/usage/UsagePage.test.tsx
• apps/web/src/components/usage/UsagePage.tsx
• apps/web/src/components/usage/usagePagePreferences.test.ts
• apps/web/src/components/usage/usagePagePreferences.ts
• apps/web/src/state/usage.test.tsx
• apps/web/src/state/usage.ts

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

---

📝 Walkthrough

Walkthrough

The usage page adds provider visibility preferences and a filter menu. Hidden providers are excluded from usage summaries and source messages. Provider-specific limits and shared usage displays also respect visibility settings.

Changes

Usage Provider Filtering

Layer / File(s)	Summary
Provider visibility preferences apps/web/src/components/usage/usagePagePreferences.ts, apps/web/src/components/usage/usagePagePreferences.test.ts, apps/web/src/components/usage/UsagePage.tsx, apps/web/src/components/usage/UsagePage.test.tsx	Preferences can store hidden providers while retaining compatibility with saved settings that lack this field. The page adds provider visibility controls and preserves hidden-provider settings when updating other preferences.
Usage aggregation filtering apps/web/src/state/usage.ts, apps/web/src/state/usage.test.tsx	useUsage excludes hidden providers’ buckets and sources before merging selected environments. Tests cover filtered results and the default unfiltered behavior.
Provider-specific displays apps/web/src/components/usage/UsageLimits.tsx, apps/web/src/components/usage/UsagePage.tsx	Usage limits filter native providers and hub accounts by visibility. Cursor prompts and ChatGPT shared usage are suppressed under their provider-specific visibility conditions.

Priority: ➖ Normal

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant UsagePage
  participant useUsage
  participant MergedUsage
  UsagePage->>useUsage: Pass selected environments and hidden providers
  useUsage->>MergedUsage: Filter buckets and sources, then merge
  MergedUsage-->>UsagePage: Return filtered usage totals and sessions

Loading

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 003f1

No confirmed issue blocks merging the Usage provider filter.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description clearly explains the problem, implementation, affected behavior, verification, screenshots, and out-of-scope mobile work. It does not provide the required triaged issue or explicit mai…	Add a link to the triaged issue or approval discussion with the maintainer approval comment. If no prior issue or discussion exists, explain why this focused change qualifies for the documented exemption and confirm the scope remains limite…

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding provider filtering to the Usage page.
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.

Full details: Description check

Explanation

The description clearly explains the problem, implementation, affected behavior, verification, screenshots, and out-of-scope mobile work. It does not provide the required triaged issue or explicit maintainer approval, or explain why the change qualifies for an exemption.

Resolution

Add a link to the triaged issue or approval discussion with the maintainer approval comment. If no prior issue or discussion exists, explain why this focused change qualifies for the documented exemption and confirm the scope remains limited.

• Fix all pre-merge checks with AI

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• 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.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR adds a persistent provider-selection feature that changes usage aggregation, notices, charts, and limits when enabled. Although the default view remains unchanged and compatibility tests are included, the cross-component production behavior is broader than a small self-contained option.

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

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	5.0 KiB	5.0 KiB	0 B (0.0%)	6.8 KiB	✅
Codex	Thread snapshot wire	3.8 KiB	3.8 KiB	0 B (0.0%)	4.9 KiB	✅
Codex	Live turn WebSocket wire	1.2 KiB	1.2 KiB	0 B (0.0%)	2.0 KiB	✅
Codex	Live turn WebSocket decoded	20.9 KiB	20.9 KiB	0 B (0.0%)	29.3 KiB	✅
Codex	Live turn messages	2	2	0 (0.0%)	8	✅
Claude	Total thread wire	5.0 KiB	5.0 KiB	+24 B (+0.5%)	6.8 KiB	✅
Claude	Thread snapshot wire	3.8 KiB	3.8 KiB	0 B (0.0%)	4.9 KiB	✅
Claude	Live turn WebSocket wire	1.2 KiB	1.2 KiB	+24 B (+2.0%)	2.0 KiB	✅
Claude	Live turn WebSocket decoded	21.2 KiB	21.2 KiB	+41 B (+0.2%)	29.3 KiB	✅
Claude	Live turn messages	1	2	+1 (+100.0%)	8	✅

Baseline: 7ac5ec6 · PR result: 003f146 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 108.5 KiB
• Claude decoded thread snapshot: 108.8 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.