feat(web): show provider usage limits below chat

[muffe]

What Changed

Adds a compact usage limits bar below the chat composer in web and desktop. It follows the selected provider and shows remaining quota and reset times from the same snapshots as Usage → Limits. Multiple accounts have revealable account labels.

The bar is enabled by default and can be disabled in Settings → General → Show usage limits below chat. The preference is stored on the client. Native mobile is unchanged.

Why

I like the Limits view, but switching away from the conversation just to check remaining quota gets repetitive. This keeps those numbers visible while working, without adding another polling loop or timer. Providers without limit data have no bar.

UI Changes

Before (bar disabled, matching the previous chat layout):

After:

Codex:

Settings:

Narrow web viewport

Validation

• Web typecheck passed.
• 162 tests passed across settings contracts, settings persistence hooks, and shared usage-limit logic.
• Targeted lint passed with existing warnings in ChatView.
• Checked Claude/Codex selection, disabling the bar, persistence after reload, restoring the default, and a 390px viewport in an isolated local web instance. No browser errors during these checks.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for UI changes
• No animation or timing changes; static screenshots show the display change.

Summary by CodeRabbit

• New Features
  • Added a usage limits bar below the chat composer.
  • Displays provider quota status, remaining usage, progress, and reset times.
  • Supports multiple provider accounts with account labels.
  • Added a setting to show or hide the usage limits bar, including settings search support.
  • The bar is enabled by default and appears when provider usage information is available.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 525bff07-d6c5-4bc5-a8be-809d238d45d2

📥 Commits

Reviewing files that changed from the base of the PR and between 4f55d40 and 079977a.

📒 Files selected for processing (3)

• apps/web/src/components/ChatView.tsx
• apps/web/src/components/chat/UsageLimitsBar.tsx
• apps/web/src/components/settings/SettingsPanels.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

• apps/web/src/components/settings/SettingsPanels.tsx
• apps/web/src/components/ChatView.tsx
• apps/web/src/components/chat/UsageLimitsBar.tsx

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

---

📝 Walkthrough

Walkthrough

Adds a configurable usage-limits bar below the chat composer. The bar uses provider snapshots to display account notices, usage windows, remaining percentages, and reset times.

Changes

Usage limits bar

Layer / File(s)	Summary
Usage-limits setting contract packages/contracts/src/settings.ts, apps/web/src/components/settings/SettingsPanels.tsx, apps/web/src/components/settings/settingsSearch.ts	Adds the showUsageLimitsBar setting with a default value of true, an optional patch field, a settings toggle, reset action, documentation, and search entry.
Usage-limits report rendering apps/web/src/components/chat/UsageLimitsBar.tsx	Adds usage report calculation and renders account notices, usage windows, progress bars, remaining percentages, and reset times.
Composer integration apps/web/src/components/ChatView.tsx	Renders the bar when the setting is enabled, a provider instance is active, and the environment is available.

Priority: ⬇️ Low — Defer the configurable usage-limits bar because its scope is a non-blocking web and desktop chat-composer enhancement with no supplied external urgency.

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

Merge Risk: ⚪ Minimal · up to 07997

This change adds a configurable usage-limits bar to web and desktop chat while preserving mobile behavior. No merge-blocking current-head risk is identified.

Sequence Diagram(s)

sequenceDiagram
  participant SettingsPanel
  participant ChatView
  participant UsageLimitsBar
  SettingsPanel->>ChatView: update showUsageLimitsBar setting
  ChatView->>UsageLimitsBar: pass instanceId, providers, and sources
  UsageLimitsBar->>UsageLimitsBar: collectProviderUsageLimits
  UsageLimitsBar-->>ChatView: render usage notices and windows

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers what changed, why it changed, UI changes with screenshots, validation results, and the required checklist. It is focused and aligned with the pull request objectives.
Title check	✅ Passed	The title clearly and concisely describes the main change: showing provider usage limits below the chat.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 5 files.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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