feat: add settings usage tab with real Anthropic rate limits

[mkarpacts]

Summary by CodeRabbit

• New Features
  • Added a Usage tab in Settings displaying API plan details, rate limits (session and weekly), current token usage metrics, and reset timing information. Includes visual usage progress indicators and a refresh button for real-time data updates.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This pull request introduces a usage tracking system that logs per-model token consumption and costs to a database, exposes usage statistics via an authenticated API endpoint, and adds a new Usage settings tab to display rate-limit information and plan details from Anthropic's API.

Changes

Cohort / File(s)	Summary
Database & Backend Logging server/claude-sdk.js, server/database/db.js	Added per-model usage logging to database during SDK result processing; created new usage_log table with cost tracking and exported usageDb.log() method for inserting token/cost metrics.
API Routes & Endpoints server/index.js, server/routes/usage.js	Mounted new /api/usage/current route that reads Claude credentials, queries Anthropic for rate-limit headers, and returns plan/tier info plus session and weekly utilization metrics.
Frontend API Client src/utils/api.js	Added api.usage.current() method for authenticated requests to the new usage endpoint.
Settings UI Components src/components/settings/view/Settings.tsx, src/components/settings/view/SettingsMainTabs.tsx, src/components/settings/view/SettingsSidebar.tsx, src/components/settings/view/tabs/UsageSettingsTab.tsx	Integrated new Usage tab into settings with icon, conditional rendering, and new component that displays plan badges and dual rate-limit progress meters with refresh functionality.
Settings Type & Config src/components/settings/types/types.ts, src/components/settings/constants/constants.ts	Extended SettingsMainTab type and SETTINGS_MAIN_TABS constant to include 'usage' tab option.
Internationalization src/i18n/locales/en/settings.json	Added English translations for Usage tab label and usage page content (plan limits, session info, weekly metrics, refresh button).

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client (SDK)
    participant SDK as claude-sdk.js
    participant DB as Database
    participant Logs as usage_log Table
    
    Client->>SDK: Send message (receives result with modelUsage)
    SDK->>SDK: Process SDK result message
    SDK->>SDK: Iterate over message.modelUsage entries
    loop For each model usage entry
        SDK->>DB: usageDb.log(sessionId, model, tokens, cost)
        DB->>Logs: Insert usage metrics
        Logs-->>DB: Confirm insert
    end
    DB-->>SDK: Logging complete
    SDK-->>Client: Continue session (errors wrapped in try/catch)

Loading

sequenceDiagram
    participant User as User
    participant UI as UsageSettingsTab
    participant API as Frontend API Client
    participant Server as /api/usage/current
    participant Creds as ~/.claude/.credentials.json
    participant Anthropic as Anthropic API
    
    User->>UI: Open Usage tab
    UI->>API: Call api.usage.current()
    API->>Server: GET /api/usage/current (authenticated)
    Server->>Creds: Read Claude credentials
    Creds-->>Server: Return claudeAiOauth & accessToken
    alt If accessToken present
        Server->>Anthropic: POST /v1/messages (minimal request)
        Anthropic-->>Server: Return rate-limit headers
        Server->>Server: Parse headers into session/weekly objects
    end
    Server-->>API: Return plan, tier, rateLimits
    API-->>UI: Resolve response
    UI->>UI: Render plan badges & progress meters
    UI-->>User: Display usage & utilization status
    
    User->>UI: Click refresh button
    UI->>API: Call api.usage.current() again
    Note over UI: Repeat fetch cycle

Loading

Possibly Related PRs

• #446: Modifies server/claude-sdk.js to handle per-model usage logging from message.modelUsage entries.
• #454: Changes how and when modelUsage is logged by moving the operation to the result-message path.
• #208: Alters server/claude-sdk.js's token-budget extraction and streaming logic alongside modelUsage handling.

Suggested Reviewers

• blackmammoth
• viper151

Poem

🐰 Whiskers twitch with delight

Usage metrics now tracked with care,
Per-model tokens logged with flair,
A dashboard shows the limits near,
Session and weekly, crystal clear!
Progress bars hop left and right,
Cost and clarity—what a sight! 📊

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 18.18% 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 accurately summarizes the main change: adding a new usage settings tab that displays real Anthropic rate limits.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[mkarpacts]

Good