feat(conversations): show 5-hour and weekly rate limit usage with reset times

[senamakel]

Summary

• Replace single circular budget indicator with dual progress bars showing 5-hour and weekly limit consumption percentages.
• Add hover tooltip with exact dollar amounts and countdown to each limit's reset time.
• Budget-exhausted banner now also triggers on 5-hour cap with a specific message and reset countdown.

Problem

• Users could only see a single "remaining budget" number with no visibility into the two distinct rate limits (5-hour rolling window and 7-day weekly cycle).
• When the 5-hour cap was hit, the UI showed no explanation — users had no idea when they could resume.

Solution

• Backend (backend-3, separate branch): Extended GET /teams/me/usage with fiveHourSpendUsd, fiveHourCapUsd, fiveHourResetsAt, cycleStartDate, and cycleEndsAt. Added getWindowSpendInfo() to rateLimitService to return the oldest entry timestamp for reset calculation.
• Frontend: Extended TeamUsage type, added LimitPill component (compact bar + percentage with color coding: primary < 80%, amber 80–99%, coral at 100%), formatResetTime helper for human-readable countdowns, and a hover tooltip showing both limits' details.

Submission Checklist

• Unit tests — Vitest for formatResetTime and LimitPill component
• E2E / integration — Verify tooltip and bars render with mock usage data
• Doc comments — JSDoc on new TeamUsage fields
• Inline comments — Logic is self-evident from naming

Impact

• Desktop only — changes are in the conversations page UI and API types.
• No performance impact; the existing getTeamUsage call is augmented, not duplicated.
• Requires the companion backend branch (feat/rate-limit-usage-display on backend-3) to be deployed for the new fields to be populated.

Related

• Backend companion: tinyhumansai/backend-3 branch feat/rate-limit-usage-display
• Follow-up: unit tests for the new helper functions and component

Summary by CodeRabbit

• New Features

  • Separate tracking and display of 5-hour and weekly spending limits with detailed usage tooltips.
  • Enhanced billing warnings that distinguish between weekly budget exhaustion and 5-hour rate limit events with reset times.
  • Conditional "Top Up" button visibility based on budget status.

• Style

  • Replaced single budget indicator with dual usage pills for improved clarity.
  • Updated loading state animation for usage displays.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The changes implement a dual-layer billing system with both 5-hour rolling spend limits and 7-day weekly budgets. The API response type is extended with new fields for 5-hour window tracking and cycle dates. The UI is updated to display both usage metrics via color-coded pills, conditionally show warnings based on either limit being reached, and selectively display the top-up button.

Changes

Cohort / File(s)	Summary
API Type Extension app/src/services/api/creditsApi.ts	Extended TeamUsage interface with five new fields: fiveHourSpendUsd, fiveHourCapUsd, fiveHourResetsAt, cycleStartDate, and cycleEndsAt to support dual billing window tracking.
Billing UI & Logic Updates app/src/pages/Conversations.tsx	Added formatResetTime utility for relative time display and new LimitPill component for compact usage visualization. Updated banner logic to trigger on either weekly exhaustion or 5-hour cap breach, with context-aware messaging. Replaced single circular indicator with dual-pill display and improved loading state with pulse animation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Two clocks now tick for spending's flow,
Five hours swift, and seven days slow—
Pills of color show the way,
When limits loom, the warning will say!
A hop, a bound, the billing grows true. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding dual rate limit usage indicators with reset times for both 5-hour and weekly cycles to the conversations page.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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