Skip to content

feat: add Claude Code usage stats widget to details sidebar #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
aadivar wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add Claude Code usage stats widget to details sidebar #116

aadivar wants to merge 3 commits into from
+456 −4

Conversation

@aadivar
Copy link
Contributor

@aadivar aadivar commented Jan 26, 2026 •
edited
Loading

Summary

  • Adds a new Usage widget to the Details Sidebar that displays Claude Code usage statistics
  • Fetches usage data from Anthropic's OAuth API using the Claude CLI credentials stored in macOS System Keychain
  • Shows 5-hour session usage and 7-day weekly usage with color-coded progress bars
  • Includes collapsible model breakdown section (Opus/Sonnet usage)

Bugfix Included

  • fix: chat input inactive after creating new chat - Fixed a bug where newly created chats showed a disabled input. The issue was caused by using non-reactive getState() calls for Zustand store values instead of reactive selectors, preventing re-renders when the store initialized.

Inspiration

This feature was inspired by Claude-Usage-Tracker by @hamed-elfayome.

Features

  • Progress bars: Color-coded based on usage level (grey < 50%, orange 50-80%, red > 80%)
  • Auto-refresh: Updates every 5 minutes automatically
  • Manual refresh: Button to refresh on demand
  • Smart visibility: Widget hides automatically when not connected to Claude Code
  • Collapsible sections: "By Model" section can be expanded/collapsed

Test plan

  • Run bun run dev
  • Open the Details sidebar (Cmd+Shift+)
  • Usage widget should appear between Workspace and To-dos
  • If Claude Code is connected, shows usage stats with progress bars
  • If not connected, widget is hidden automatically
  • Click refresh button to manually update data
  • Click "By Model" to toggle model breakdown visibility
  • Verify widget appears in Edit Widgets popup with correct icon
  • Create a new chat and verify the input is active immediately (bugfix verification)

@aadivar
feat: add Claude Code usage stats widget to details sidebar
0793e71 
- Add tRPC router to fetch usage data from Anthropic OAuth API
- Read OAuth token from macOS System Keychain (Claude CLI credentials)
- Display 5-hour session and 7-day weekly usage with progress bars
- Show model breakdown (Opus/Sonnet) in collapsible section
- Color-coded status: grey (safe), orange (moderate), red (critical)
- Auto-refresh every 5 minutes, manual refresh button
- Widget hides automatically when not connected to Claude Code
@aadivar
fix: chat input inactive after creating new chat
f9f51c8 
Use reactive Zustand selectors instead of getState() for sub-chat store
values (activeSubChatId, openSubChatIds, pinnedSubChatIds, allSubChats).

The previous non-reactive getState() calls caused the component to not
re-render when the store initialized, leaving tabsToRender empty and
showing a disabled input placeholder for newly created chats.
@aadivar
Copy link
Contributor Author

aadivar commented Jan 26, 2026

Screenshot 2026-01-26 at 23 23 31

Here's the preview!

@aadivar
Merge upstream/main, resolve conflicts
625666d 
- active-chat.tsx: Take upstream useShallow pattern for better performance
@MaxiAcostaGIT
Copy link

MaxiAcostaGIT commented Jan 28, 2026

Excelent idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@aadivar @MaxiAcostaGIT