feat(web): preview provider limits from the Usage icon

[Mixer159]

What changed

Hover or keyboard-focus the sidebar's Usage icon to see provider limits, percentages left, and the next refill. Clicking it still opens Usage.

The preview reuses the streamed environment snapshots and account pooling from Usage → Limits. Its content mounts on demand and adds no polling or provider requests. The existing color helper now lives with provider presentation metadata so the sidebar can use it without importing the full Limits view.

Both sidebar layouts share this footer, including the Electron renderer. Native mobile navigation does not use this hover control.

Why

Checking subscription headroom currently requires leaving the thread and opening Usage → Limits.

UI changes

Before	After

Interaction video: hover, Escape, keyboard focus, and navigation

Captured in an isolated local instance with synthetic subscription data.

Validation

• Web typecheck, scoped lint, and formatting passed.
• Existing packages/shared/src/usageLimits.test.ts passed.
• Chromium verified hover, keyboard focus, Escape, Enter/click navigation, and moving the pointer into the popup.
• Pooled account values matched the full Limits page. Empty and failed sources showed notices.
• Checked dark and light themes and a 390px web viewport, including closing the mobile sidebar on navigation.
• Three hover cycles made zero additional requests to the fixture source.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for UI changes
• I included a video for interaction changes

Model: GPT-6. Harness: Codex.

Summary by CodeRabbit

• New Features

  • Added a usage limits tooltip to the Usage menu item.
  • View subscription usage by provider, including account counts, remaining capacity, progress bars, refill timing, and notices.
  • Displays a clear empty state when no usage limits are available.

• Accessibility

  • Improved tooltip association for assistive technologies.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR adds a new default-on preview of pooled provider limits to the Usage icon, including remaining percentages, refill timing, and status notices, rather than making only a visual or mechanical change. The implementation reuses existing snapshots without new requests or polling, but the new user-facing capability and changed sidebar interaction warrant human review.

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

[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: d0873b69-edc6-44e3-9e83-f0defb8bcf20

📥 Commits

Reviewing files that changed from the base of the PR and between 7fbc545 and 6744954.

📒 Files selected for processing (5)

• apps/web/src/components/sidebar/SidebarChrome.tsx
• apps/web/src/components/usage/UsageLimits.tsx
• apps/web/src/components/usage/UsageLimitsPooled.tsx
• apps/web/src/components/usage/UsageLimitsTooltip.tsx
• apps/web/src/components/usage/usageProviders.ts

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

---

📝 Walkthrough

Walkthrough

The Usage sidebar item now opens a custom tooltip that displays usage pools, remaining percentages, refill timing, account counts, and notices. Provider bar-color logic is centralized in usageProviders.

Changes

Usage limits tooltip

Layer / File(s)	Summary
Centralize provider bar colors apps/web/src/components/usage/UsageLimits.tsx, apps/web/src/components/usage/UsageLimitsPooled.tsx, apps/web/src/components/usage/usageProviders.ts	The exported barColor helper now resides in usageProviders and maps supported drivers to provider colors. Usage components import it from that module.
Render usage limits summary apps/web/src/components/usage/UsageLimitsTooltip.tsx	The new tooltip reads usage presentation state, collects limit pools and notices, and renders usage details, progress bars, refill text, or an empty state.
Integrate tooltip with Usage item apps/web/src/components/sidebar/SidebarChrome.tsx	SidebarUtilityItem supports custom tooltip rendering, generates stable IDs, and sets aria-describedby. The Usage item renders UsageLimitsTooltip.

Priority: ⬇️ Low

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

Merge Risk: ⚪ Minimal · up to 67449

The Usage sidebar icon now shows existing provider-limit information on hover or keyboard focus while retaining its click behavior. No merge-blocking correctness, security, or runtime risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant SidebarUtilityItem
  participant UsageLimitsTooltip
  participant UsageLimitsSummary
  participant UsagePresentationState
  SidebarUtilityItem->>UsageLimitsTooltip: render with generated tooltip id
  UsageLimitsTooltip->>UsageLimitsSummary: render usage summary
  UsageLimitsSummary->>UsagePresentationState: read presentations and timestamp
  UsagePresentationState-->>UsageLimitsSummary: return usage state
  UsageLimitsSummary-->>UsageLimitsTooltip: render pools and notices
  UsageLimitsTooltip-->>SidebarUtilityItem: display custom tooltip

Loading

Suggested reviewers: juliusmarminge, maria-rcks

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding a provider-limits preview from the Usage sidebar icon.
Description check	✅ Passed	The description covers what changed, why, UI changes, validation, screenshots, video, and the required checklist. It is complete and aligned with the pull request objectives.
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.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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