feat: add Claude usage tracking via CLI

Adds a Claude usage tracking feature that displays session, weekly, and Sonnet usage stats. Uses the Claude CLI's /usage command to fetch data (no API key required).

Features:
- Usage popover in board header showing session, weekly, and Sonnet limits
- Progress bars with color-coded status (green/orange/red)
- Auto-refresh with configurable interval
- Caching of usage data with stale indicator
- Settings section for refresh interval configuration

Server:
- ClaudeUsageService: Executes Claude CLI via PTY (expect) to fetch usage
- New /api/claude/usage endpoint

UI:
- ClaudeUsagePopover component with usage cards
- ClaudeUsageSection in settings for configuration
- Integration with app store for persistence
This commit is contained in:
Mohamad Yahia
2025-12-21 08:03:43 +04:00
parent 5aedb4fadf
commit 5bd2b705dc
11 changed files with 952 additions and 5 deletions

View File

@@ -482,6 +482,9 @@ export interface ElectronAPI {
sessionId: string
) => Promise<{ success: boolean; error?: string }>;
};
claude?: {
getUsage: () => Promise<any>;
};
}
// Note: Window interface is declared in @/types/electron.d.ts
@@ -879,6 +882,33 @@ const getMockElectronAPI = (): ElectronAPI => {
// Mock Running Agents API
runningAgents: createMockRunningAgentsAPI(),
// Mock Claude API
claude: {
getUsage: async () => {
console.log("[Mock] Getting Claude usage");
return {
sessionTokensUsed: 0,
sessionLimit: 0,
sessionPercentage: 15,
sessionResetTime: new Date(Date.now() + 3600000).toISOString(),
sessionResetText: "Resets in 1h",
weeklyTokensUsed: 0,
weeklyLimit: 0,
weeklyPercentage: 5,
weeklyResetTime: new Date(Date.now() + 86400000 * 2).toISOString(),
weeklyResetText: "Resets Dec 23",
opusWeeklyTokensUsed: 0,
opusWeeklyPercentage: 1,
opusResetText: "Resets Dec 27",
costUsed: null,
costLimit: null,
costCurrency: null,
lastUpdated: new Date().toISOString(),
userTimezone: "UTC"
};
},
}
};
};