feat(ui): implement usage statistics badge for top bar (ACS-228)

apps/frontend/src/main/claude-profile/usage-monitor.ts

@@ -6,24 +6,35 @@
  *
  * Uses hybrid approach:
  * 1. Primary: Direct OAuth API (https://api.anthropic.com/api/oauth/usage)
- * 2. Fallback: CLI /usage command parsing
+ * 2. API profiles: Provider-specific endpoints (Z.ai, etc.)
+ * 3. Fallback: CLI /usage command parsing
  */
 
 import { EventEmitter } from 'events';
+import { spawn } from 'child_process';
 import { getClaudeProfileManager } from '../claude-profile-manager';
 import { ClaudeUsageSnapshot } from '../../shared/types/agent';
+import { loadProfilesFile, detectProvider, fetchUsageForProfile, fetchAnthropicOAuthUsage } from '../services/profile';
+import { getClaudeCliInvocationAsync } from '../claude-cli-utils';
+import { getSpawnCommand, getSpawnOptions } from '../env-utils';
+import { parseUsageOutput, parseResetTime, classifyRateLimitType } from './usage-parser';
+import { getProfileEnv } from '../rate-limit-detector';
 
 export class UsageMonitor extends EventEmitter {
   private static instance: UsageMonitor;
   private intervalId: NodeJS.Timeout | null = null;
   private currentUsage: ClaudeUsageSnapshot | null = null;
   private isChecking = false;
   private useApiMethod = true; // Try API first, fall back to CLI if it fails
-  
+
   // Swap loop protection: track profiles that recently failed auth
   private authFailedProfiles: Map<string, number> = new Map(); // profileId -> timestamp
   private static AUTH_FAILURE_COOLDOWN_MS = 5 * 60 * 1000; // 5 minutes cooldown
-
+  private static CLI_USAGE_TIMEOUT_MS = 10000; // 10 seconds timeout for CLI /usage command
+  // API retry mechanism: retry API after N consecutive successful CLI fallbacks
+  private cliFallbackSuccessCount = 0;
+  private static CLI_FALLBACK_RETRY_THRESHOLD = 5; // Retry API after 5 successful CLI calls
+
   // Debug flag for verbose logging
   private readonly isDebug = process.env.DEBUG === 'true';
 
@@ -46,8 +57,8 @@
     const profileManager = getClaudeProfileManager();
     const settings = profileManager.getAutoSwitchSettings();
 
-    if (!settings.enabled || !settings.proactiveSwapEnabled) {
-      console.warn('[UsageMonitor] Proactive monitoring disabled. Settings:', JSON.stringify(settings, null, 2));
+    if (!settings.enabled) {
+      console.warn('[UsageMonitor] Usage monitoring disabled. Settings:', JSON.stringify(settings, null, 2));
       return;
     }
 
@@ -57,7 +68,7 @@
     }
 
     const interval = settings.usageCheckInterval || 30000;
-    console.warn('[UsageMonitor] Starting with interval:', interval, 'ms');
+    console.warn('[UsageMonitor] Starting with interval:', interval, 'ms', 'Proactive swap:', settings.proactiveSwapEnabled ? 'enabled' : 'disabled');
 
     // Check immediately
     this.checkUsageAndSwap();
@@ -124,7 +135,8 @@
       const sessionExceeded = usage.sessionPercent >= settings.sessionThreshold;
       const weeklyExceeded = usage.weeklyPercent >= settings.weeklyThreshold;
 
-      if (sessionExceeded || weeklyExceeded) {
+      // Only perform proactive swap if enabled
+      if (settings.proactiveSwapEnabled && (sessionExceeded || weeklyExceeded)) {
         if (this.isDebug) {
           console.warn('[UsageMonitor:TRACE] Threshold exceeded', {
             sessionPercent: usage.sessionPercent,
@@ -159,20 +171,20 @@
       if ((error as any).statusCode === 401 || (error as any).statusCode === 403) {
         const profileManager = getClaudeProfileManager();
         const activeProfile = profileManager.getActiveProfile();
-        
+
         if (activeProfile) {
           // Mark this profile as auth-failed to prevent swap loops
           this.authFailedProfiles.set(activeProfile.id, Date.now());
           console.warn('[UsageMonitor] Auth failure detected, marked profile as failed:', activeProfile.id);
-          
+
           // Clean up expired entries from the failed profiles map
           const now = Date.now();
           this.authFailedProfiles.forEach((timestamp, profileId) => {
             if (now - timestamp > UsageMonitor.AUTH_FAILURE_COOLDOWN_MS) {
               this.authFailedProfiles.delete(profileId);
             }
           });
-          
+
           try {
             const excludeProfiles = Array.from(this.authFailedProfiles.keys());
             console.warn('[UsageMonitor] Attempting proactive swap (excluding failed profiles):', excludeProfiles);
@@ -287,7 +299,7 @@
       if (error?.statusCode === 401 || error?.statusCode === 403) {
         throw error;
       }
-      
+
       console.error('[UsageMonitor] API fetch failed:', error);
       return null;
     }
@@ -296,18 +308,99 @@
   /**
    * Fetch usage via CLI /usage command (fallback)
    * Note: This is a fallback method. The API method is preferred.
-   * CLI-based fetching would require spawning a Claude process and parsing output,
-   * which is complex. For now, we rely on the API method.
+   * CLI-based fetching spawns a Claude process and parses output.
    */
   private async fetchUsageViaCLI(
-    _profileId: string,
-    _profileName: string
+    profileId: string,
+    profileName: string
   ): Promise<ClaudeUsageSnapshot | null> {
-    // CLI-based usage fetching is not implemented yet.
-    // The API method should handle most cases. If we need CLI fallback,
-    // we would need to spawn a Claude process with /usage command and parse the output.
-    console.warn('[UsageMonitor] CLI fallback not implemented, API method should be used');
-    return null;
+    try {
+      console.warn('[UsageMonitor] Attempting CLI fallback for profile:', profileName);
+
+      // Get CLI invocation with augmented environment and profile-specific environment
+      const { command: claudeCmd, env: augmentedEnv } = await getClaudeCliInvocationAsync();
+      const profileEnv = getProfileEnv(profileId);
+
+      // Merge augmented environment with profile-specific environment
+      // Profile-specific vars take precedence
+      const mergedEnv: Record<string, string> = {
+        ...augmentedEnv,
+        ...profileEnv,
+      };
+
+      // Spawn Claude CLI with /usage command
+      const execCmd = getSpawnCommand(claudeCmd);
+      const spawnOptions = getSpawnOptions(execCmd, {
+        env: mergedEnv,
+        timeout: UsageMonitor.CLI_USAGE_TIMEOUT_MS
+      });
+
+      const child = spawn(execCmd, ['/usage'], spawnOptions);
+
+      let stdout = '';
+      let stderr = '';
+
+      child.stdout?.on('data', (data) => {
+        stdout += data.toString();
+      });
+
+      child.stderr?.on('data', (data) => {
+        stderr += data.toString();
+      });
+
+      return new Promise((resolve) => {
+        const timeoutId = setTimeout(() => {
+          child.kill();
+          console.error('[UsageMonitor] CLI usage fetch timed out');
+          resolve(null);
+        }, UsageMonitor.CLI_USAGE_TIMEOUT_MS);
+
+        child.on('close', (code) => {
+          clearTimeout(timeoutId);
+
+          if (code !== 0) {
+            console.error('[UsageMonitor] CLI usage fetch failed:', stderr);
+            resolve(null);
+            return;
+          }
+
+          try {
+            // Parse CLI output - returns ClaudeUsageData
+            const usageData = parseUsageOutput(stdout);
+
+            // Convert ClaudeUsageData to ClaudeUsageSnapshot
+            const snapshot: ClaudeUsageSnapshot = {
+              sessionPercent: usageData.sessionUsagePercent,
+              weeklyPercent: usageData.weeklyUsagePercent,
+              sessionResetTime: usageData.sessionResetTime || this.formatResetTime(undefined),
+              weeklyResetTime: usageData.weeklyResetTime || this.formatResetTime(undefined),
+              profileId,
+              profileName,
+              fetchedAt: new Date(),
+              limitType: classifyRateLimitType(usageData.weeklyResetTime || usageData.sessionResetTime)
+            };
+
+            console.warn('[UsageMonitor] Successfully fetched via CLI');
+
+            // Increment CLI success count and potentially retry API
+            this.cliFallbackSuccessCount++;
+            if (this.cliFallbackSuccessCount >= UsageMonitor.CLI_FALLBACK_RETRY_THRESHOLD) {
+              console.warn('[UsageMonitor] Retrying API method after', this.cliFallbackSuccessCount, 'successful CLI fetches');
+              this.cliFallbackSuccessCount = 0;
+              this.useApiMethod = true;
+            }
+
+            resolve(snapshot);
+          } catch (error) {
+            console.error('[UsageMonitor] Failed to parse CLI usage output:', error);
+            resolve(null);
+          }
+        });
+      });
+    } catch (error) {
+      console.error('[UsageMonitor] CLI usage fetch exception:', error);
+      return null;
+    }
   }
 
   /**
@@ -347,12 +440,12 @@
     additionalExclusions: string[] = []
   ): Promise<void> {
     const profileManager = getClaudeProfileManager();
-    
+
     // Get all profiles to swap to, excluding current and any additional exclusions
     const allProfiles = profileManager.getProfilesSortedByAvailability();
     const excludeIds = new Set([currentProfileId, ...additionalExclusions]);
     const eligibleProfiles = allProfiles.filter(p => !excludeIds.has(p.id));
-    
+
     if (eligibleProfiles.length === 0) {
       console.warn('[UsageMonitor] No alternative profile for proactive swap (excluded:', Array.from(excludeIds), ')');
       this.emit('proactive-swap-failed', {
@@ -362,7 +455,7 @@
       });
       return;
     }
-    
+
     // Use the best available from eligible profiles
     const bestProfile = eligibleProfiles[0];
 

apps/frontend/src/main/ipc-handlers/terminal-handlers.ts

@@ -607,6 +607,32 @@ export function registerTerminalHandlers(
   );
 
 
+  // Get usage statistics for active profile (API-based, on-demand)
+  ipcMain.handle(
+    IPC_CHANNELS.PROFILES_GET_USAGE,
+    async (): Promise<IPCResult<import('../../shared/types').ClaudeUsageSnapshot>> => {
+      try {
+        const { fetchActiveProfileUsage } = await import('../services/profile');
+        const result = await fetchActiveProfileUsage();
+
+        if (!result.success || !result.usage) {
+          return {
+            success: false,
+            error: result.error || 'Failed to fetch usage data'
+          };
+        }
+
+        return { success: true, data: result.usage };
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Failed to fetch usage data'
+        };
+      }
+    }
+  );
+
+
   // Terminal session management (persistence/restore)
   ipcMain.handle(
     IPC_CHANNELS.TERMINAL_GET_SESSIONS,
@@ -761,12 +787,36 @@ export function initializeUsageMonitorForwarding(mainWindow: BrowserWindow): voi
 
   // Forward usage updates to renderer
   monitor.on('usage-updated', (usage: ClaudeUsageSnapshot) => {
-    mainWindow.webContents.send(IPC_CHANNELS.USAGE_UPDATED, usage);
+    if (!mainWindow.isDestroyed()) {
+      mainWindow.webContents.send(IPC_CHANNELS.USAGE_UPDATED, usage);
+    }
   });
 
-  // Forward proactive swap notifications to renderer
+  // Forward proactive swap completed events to renderer
+  monitor.on('proactive-swap-completed', (data: any) => {
+    if (!mainWindow.isDestroyed()) {
+      mainWindow.webContents.send(IPC_CHANNELS.PROACTIVE_SWAP_NOTIFICATION, {
+        type: 'completed',
+        ...data
+      });
+    }
+  });
+
+  // Forward proactive swap failed events to renderer
+  monitor.on('proactive-swap-failed', (data: any) => {
+    if (!mainWindow.isDestroyed()) {
+      mainWindow.webContents.send(IPC_CHANNELS.PROACTIVE_SWAP_NOTIFICATION, {
+        type: 'failed',
+        ...data
+      });
+    }
+  });
+
+  // Forward show-swap-notification events (for in-app swap notifications)
   monitor.on('show-swap-notification', (notification: unknown) => {
-    mainWindow.webContents.send(IPC_CHANNELS.PROACTIVE_SWAP_NOTIFICATION, notification);
+    if (!mainWindow.isDestroyed()) {
+      mainWindow.webContents.send(IPC_CHANNELS.PROACTIVE_SWAP_NOTIFICATION, notification);
+    }
   });
 
   debugLog('[terminal-handlers] Usage monitor event forwarding initialized');

apps/frontend/src/main/services/profile/index.ts

@@ -31,6 +31,17 @@ export {
 
 export type { CreateProfileInput, UpdateProfileInput } from './profile-service';
 
+// Profile Usage Service
+export {
+  detectProvider,
+  fetchZaiUsage,
+  fetchAnthropicOAuthUsage,
+  fetchUsageForProfile,
+  fetchActiveProfileUsage
+} from './profile-usage';
+
+export type { UsageProvider, UsageFetchResult } from './profile-usage';
+
 // Re-export types from shared for convenience
 export type {
   APIProfile,
@@ -41,3 +52,6 @@ export type {
   DiscoverModelsResult,
   DiscoverModelsError
 } from '@shared/types/profile';
+
+// Re-export RESETTING_SOON from shared/types/agent for convenience
+export { RESETTING_SOON } from '../../../shared/types/agent';