Merge pull request #104 from kaitranntt/kai/feat/auth-monitor-design

feat(ui): auth monitor with real-time account flow visualization

Author: kaitranntt

src/cliproxy/account-manager.ts

@@ -473,12 +473,14 @@ export function discoverExistingAccounts(): void {
       const stats = fs.statSync(filePath);
 
       // Register account with auto-generated nickname
+      // Use mtime as lastUsedAt (when token was last modified = last auth/refresh)
+      const lastModified = stats.mtime || stats.birthtime || new Date();
       providerAccounts.accounts[accountId] = {
         email,
         nickname: generateNickname(email),
         tokenFile: file,
         createdAt: stats.birthtime?.toISOString() || new Date().toISOString(),
-        lastUsedAt: stats.mtime?.toISOString(),
+        lastUsedAt: lastModified.toISOString(),
       };
     } catch {
       // Skip invalid files

src/cliproxy/stats-fetcher.ts

@@ -7,10 +7,28 @@
 
 import { CCS_CONTROL_PANEL_SECRET, CLIPROXY_DEFAULT_PORT } from './config-generator';
 
+/** Per-account usage statistics */
+export interface AccountUsageStats {
+  /** Account email or identifier */
+  source: string;
+  /** Number of successful requests */
+  successCount: number;
+  /** Number of failed requests */
+  failureCount: number;
+  /** Total tokens used */
+  totalTokens: number;
+  /** Last request timestamp */
+  lastUsedAt?: string;
+}
+
 /** Usage statistics from CLIProxyAPI */
 export interface CliproxyStats {
   /** Total number of requests processed */
   totalRequests: number;
+  /** Total successful requests */
+  successCount: number;
+  /** Total failed requests */
+  failureCount: number;
   /** Token counts */
   tokens: {
     input: number;
@@ -21,6 +39,8 @@ export interface CliproxyStats {
   requestsByModel: Record<string, number>;
   /** Requests grouped by provider */
   requestsByProvider: Record<string, number>;
+  /** Per-account usage breakdown */
+  accountStats: Record<string, AccountUsageStats>;
   /** Number of quota exceeded (429) events */
   quotaExceededCount: number;
   /** Number of request retries */
@@ -29,6 +49,21 @@ export interface CliproxyStats {
   collectedAt: string;
 }
 
+/** Request detail from CLIProxyAPI */
+interface RequestDetail {
+  timestamp: string;
+  source: string;
+  auth_index: number;
+  tokens: {
+    input_tokens: number;
+    output_tokens: number;
+    reasoning_tokens: number;
+    cached_tokens: number;
+    total_tokens: number;
+  };
+  failed: boolean;
+}
+
 /** Usage API response from CLIProxyAPI /v0/management/usage endpoint */
 interface UsageApiResponse {
   failed_requests?: number;
@@ -47,6 +82,7 @@ interface UsageApiResponse {
           {
             total_requests?: number;
             total_tokens?: number;
+            details?: RequestDetail[];
           }
         >;
       }
@@ -83,16 +119,55 @@ export async function fetchCliproxyStats(
     const data = (await response.json()) as UsageApiResponse;
     const usage = data.usage;
 
-    // Extract models and providers from the nested API structure
+    // Extract models, providers, and per-account stats from the nested API structure
     const requestsByModel: Record<string, number> = {};
     const requestsByProvider: Record<string, number> = {};
+    const accountStats: Record<string, AccountUsageStats> = {};
+    let totalSuccessCount = 0;
+    let totalFailureCount = 0;
+    let totalInputTokens = 0;
+    let totalOutputTokens = 0;
 
     if (usage?.apis) {
       for (const [provider, providerData] of Object.entries(usage.apis)) {
         requestsByProvider[provider] = providerData.total_requests ?? 0;
         if (providerData.models) {
           for (const [model, modelData] of Object.entries(providerData.models)) {
             requestsByModel[model] = modelData.total_requests ?? 0;
+
+            // Aggregate per-account stats from request details
+            if (modelData.details) {
+              for (const detail of modelData.details) {
+                const source = detail.source || 'unknown';
+
+                // Initialize account stats if not exists
+                if (!accountStats[source]) {
+                  accountStats[source] = {
+                    source,
+                    successCount: 0,
+                    failureCount: 0,
+                    totalTokens: 0,
+                  };
+                }
+
+                // Update account stats
+                if (detail.failed) {
+                  accountStats[source].failureCount++;
+                  totalFailureCount++;
+                } else {
+                  accountStats[source].successCount++;
+                  totalSuccessCount++;
+                }
+
+                const tokens = detail.tokens?.total_tokens ?? 0;
+                accountStats[source].totalTokens += tokens;
+                accountStats[source].lastUsedAt = detail.timestamp;
+
+                // Aggregate token breakdowns
+                totalInputTokens += detail.tokens?.input_tokens ?? 0;
+                totalOutputTokens += detail.tokens?.output_tokens ?? 0;
+              }
+            }
           }
         }
       }
@@ -101,13 +176,16 @@ export async function fetchCliproxyStats(
     // Normalize the response to our interface
     return {
       totalRequests: usage?.total_requests ?? 0,
+      successCount: totalSuccessCount,
+      failureCount: totalFailureCount,
       tokens: {
-        input: 0, // API doesn't provide input/output breakdown
-        output: 0,
+        input: totalInputTokens,
+        output: totalOutputTokens,
         total: usage?.total_tokens ?? 0,
       },
       requestsByModel,
       requestsByProvider,
+      accountStats,
       quotaExceededCount: usage?.failure_count ?? data.failed_requests ?? 0,
       retryCount: 0, // API doesn't track retries separately
       collectedAt: new Date().toISOString(),

src/web-server/routes.ts

@@ -36,6 +36,7 @@ import {
   getProviderAccounts,
   setDefaultAccount as setDefaultAccountFn,
   removeAccount as removeAccountFn,
+  touchAccount,
 } from '../cliproxy/account-manager';
 import type { CLIProxyProvider } from '../cliproxy/types';
 import { getClaudeEnvVars } from '../cliproxy/config-generator';
@@ -469,11 +470,43 @@ apiRoutes.delete('/cliproxy/:name', (req: Request, res: Response): void => {
 
 /**
  * GET /api/cliproxy/auth - Get auth status for built-in CLIProxy profiles
+ * Also fetches CLIProxyAPI stats to update lastUsedAt for active providers
  */
-apiRoutes.get('/cliproxy/auth', (_req: Request, res: Response) => {
+apiRoutes.get('/cliproxy/auth', async (_req: Request, res: Response) => {
   // Initialize accounts from existing tokens on first request
   initializeAccounts();
 
+  // Fetch CLIProxyAPI usage stats to determine active providers
+  const stats = await fetchCliproxyStats();
+
+  // Map CLIProxyAPI provider names to our internal provider names
+  const statsProviderMap: Record<string, CLIProxyProvider> = {
+    gemini: 'gemini',
+    antigravity: 'agy',
+    codex: 'codex',
+    qwen: 'qwen',
+    iflow: 'iflow',
+  };
+
+  // Update lastUsedAt for providers with recent activity
+  if (stats?.requestsByProvider) {
+    for (const [statsProvider, requestCount] of Object.entries(stats.requestsByProvider)) {
+      if (requestCount > 0) {
+        const provider = statsProviderMap[statsProvider.toLowerCase()];
+        if (provider) {
+          // Touch the default account for this provider (or all accounts)
+          const accounts = getProviderAccounts(provider);
+          for (const account of accounts) {
+            // Only touch if this is the default account (most likely being used)
+            if (account.isDefault) {
+              touchAccount(provider, account.id);
+            }
+          }
+        }
+      }
+    }
+  }
+
   const statuses = getAllAuthStatus();
 
   const authStatus = statuses.map((status) => {