Merge pull request #70 from kaitranntt/dev

feat: CLIProxy multi-account support and analytics improvements

Author: kaitranntt

.github/workflows/ci.yml

@@ -23,10 +23,12 @@ jobs:
           node-version: '22'
 
       - name: Install dependencies
-        run: bun install --frozen-lockfile
+        run: |
+          bun install --frozen-lockfile
+          cd ui && bun install --frozen-lockfile
 
       - name: Build package
-        run: bun run build
+        run: bun run build:all
 
       - name: Validate (typecheck + lint + tests)
         run: bun run validate

.github/workflows/dev-release.yml

@@ -36,10 +36,11 @@ jobs:
           bun install --frozen-lockfile
           cd ui && bun install --frozen-lockfile
 
-      - name: Build and validate
-        run: |
-          bun run build:all
-          bun run validate
+      - name: Build
+        run: bun run build:all
+
+      - name: Validate (typecheck + lint + tests)
+        run: bun run validate
 
       - name: Bump dev version
         id: bump

README.md

@@ -106,6 +106,29 @@ ccs agy --headless       # Displays URL, paste in browser elsewhere
 ccs gemini --logout
 ```
 
+### Multi-Account for OAuth Providers
+
+Use multiple accounts per provider (work + personal):
+
+```bash
+# First account (default)
+ccs gemini --auth
+
+# Add another account
+ccs gemini --auth --add
+
+# Add with nickname for easy identification
+ccs gemini --auth --add --nickname work
+
+# List all accounts
+ccs agy --accounts
+
+# Switch to a different account
+ccs agy --use work
+```
+
+Accounts are stored in `~/.ccs/cliproxy/accounts.json` and can be managed via web dashboard (`ccs config`).
+
 ### OAuth vs API Key Models
 
 | Feature | OAuth Providers<br>(gemini, codex, agy) | API Key Models<br>(glm, kimi) |

VERSION

@@ -1 +1 @@
-5.12.1
+5.12.1-dev.4

docs/project-roadmap.md

@@ -589,6 +589,7 @@ src/types/
 **Release Date**: 2025-12-08
 
 #### UI Fixes & Improvements
+- ✅ **Analytics UI Enhancements**: Standardized colors, fixed truncated model names, and ensured color consistency in the analytics dashboard.
 - ✅ **Auto-formatting**: 31 UI files auto-formatted for consistent styling.
 - ✅ **Fast Refresh Exports**: Resolved `react-refresh/only-export-components` by extracting `buttonVariants`, `useSidebar`, and `useWebSocketContext` to separate files.
 - ✅ **React Hooks Issues**: Fixed `react-hooks/purity` (`Math.random()` in `useMemo` for `sidebar.tsx`) and `react-hooks/set-state-in-effect` (`use-theme.ts`, `settings.tsx`).
@@ -821,6 +822,6 @@ src/types/
 ---
 
 **Document Status**: Living document, updated with each major release
-**Last Updated**: 2025-12-08 (UI Layout Improvements)
+**Last Updated**: 2025-12-09 (Analytics UI Enhancements)
 **Next Update**: v4.6.0 UI Enhancements Planning
 **Maintainer**: CCS Development Team

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaitranntt/ccs",
-  "version": "5.12.1",
+  "version": "5.12.1-dev.4",
   "description": "Claude Code Switch - Instant profile switching between Claude Sonnet 4.5 and GLM 4.6",
   "keywords": [
     "cli",
@@ -62,9 +62,10 @@
     "lint:fix": "eslint src/ --fix",
     "format": "prettier --write src/",
     "format:check": "prettier --check src/",
-    "validate": "bun run typecheck && bun run lint:fix && bun run format:check && bun run test",
+    "validate": "bun run typecheck && bun run lint:fix && bun run format:check && bun run test:all",
     "verify:bundle": "node scripts/verify-bundle.js",
     "test": "bun run build && bun run test:all",
+    "test:ci": "bun run test:all",
     "test:all": "bun test",
     "test:unit": "bun test tests/unit/",
     "test:npm": "bun test tests/npm/",

src/cliproxy/account-manager.ts

@@ -19,6 +19,8 @@ export interface AccountInfo {
   id: string;
   /** Email address from OAuth (if available) */
   email?: string;
+  /** User-friendly nickname for quick reference (auto-generated from email prefix) */
+  nickname?: string;
   /** Provider this account belongs to */
   provider: CLIProxyProvider;
   /** Whether this is the default account for the provider */
@@ -53,6 +55,36 @@ const DEFAULT_REGISTRY: AccountsRegistry = {
   providers: {},
 };
 
+/**
+ * Generate nickname from email
+ * Takes prefix before @ symbol, sanitizes whitespace
+ * Validation: 1-50 chars, any non-whitespace (permissive per user preference)
+ */
+export function generateNickname(email?: string): string {
+  if (!email) return 'default';
+  const prefix = email.split('@')[0];
+  // Sanitize: remove whitespace, limit to 50 chars
+  return prefix.replace(/\s+/g, '').slice(0, 50) || 'default';
+}
+
+/**
+ * Validate nickname
+ * Rules: 1-50 chars, any non-whitespace allowed (permissive)
+ * @returns null if valid, error message if invalid
+ */
+export function validateNickname(nickname: string): string | null {
+  if (!nickname || nickname.length === 0) {
+    return 'Nickname is required';
+  }
+  if (nickname.length > 50) {
+    return 'Nickname must be 50 characters or less';
+  }
+  if (/\s/.test(nickname)) {
+    return 'Nickname cannot contain whitespace';
+  }
+  return null;
+}
+
 /**
  * Get path to accounts registry file
  */
@@ -133,14 +165,41 @@ export function getAccount(provider: CLIProxyProvider, accountId: string): Accou
   return accounts.find((a) => a.id === accountId) || null;
 }
 
+/**
+ * Find account by query (nickname, email, or id)
+ * Supports partial matching for convenience
+ */
+export function findAccountByQuery(provider: CLIProxyProvider, query: string): AccountInfo | null {
+  const accounts = getProviderAccounts(provider);
+  const lowerQuery = query.toLowerCase();
+
+  // Exact match first (id, email, nickname)
+  const exactMatch = accounts.find(
+    (a) =>
+      a.id === query ||
+      a.email?.toLowerCase() === lowerQuery ||
+      a.nickname?.toLowerCase() === lowerQuery
+  );
+  if (exactMatch) return exactMatch;
+
+  // Partial match on nickname or email prefix
+  const partialMatch = accounts.find(
+    (a) =>
+      a.nickname?.toLowerCase().startsWith(lowerQuery) ||
+      a.email?.toLowerCase().startsWith(lowerQuery)
+  );
+  return partialMatch || null;
+}
+
 /**
  * Register a new account
  * Called after successful OAuth to record the account
  */
 export function registerAccount(
   provider: CLIProxyProvider,
   tokenFile: string,
-  email?: string
+  email?: string,
+  nickname?: string
 ): AccountInfo {
   const registry = loadAccountsRegistry();
 
@@ -161,9 +220,13 @@ export function registerAccount(
   const accountId = email || 'default';
   const isFirstAccount = Object.keys(providerAccounts.accounts).length === 0;
 
+  // Generate nickname if not provided
+  const accountNickname = nickname || generateNickname(email);
+
   // Create or update account
   providerAccounts.accounts[accountId] = {
     email,
+    nickname: accountNickname,
     tokenFile,
     createdAt: new Date().toISOString(),
     lastUsedAt: new Date().toISOString(),
@@ -181,6 +244,7 @@ export function registerAccount(
     provider,
     isDefault: accountId === providerAccounts.default,
     email,
+    nickname: accountNickname,
     tokenFile,
     createdAt: providerAccounts.accounts[accountId].createdAt,
     lastUsedAt: providerAccounts.accounts[accountId].lastUsedAt,
@@ -333,9 +397,10 @@ export function discoverExistingAccounts(): void {
       // Get file stats for creation time
       const stats = fs.statSync(filePath);
 
-      // Register account
+      // Register account with auto-generated nickname
       providerAccounts.accounts[accountId] = {
         email,
+        nickname: generateNickname(email),
         tokenFile: file,
         createdAt: stats.birthtime?.toISOString() || new Date().toISOString(),
         lastUsedAt: stats.mtime?.toISOString(),

src/cliproxy/auth-handler.ts

@@ -22,11 +22,13 @@ import { CLIProxyProvider } from './types';
 import {
   AccountInfo,
   discoverExistingAccounts,
+  generateNickname,
   getDefaultAccount,
   getProviderAccounts,
   registerAccount,
   touchAccount,
 } from './account-manager';
+import { preflightOAuthCheck } from '../management/oauth-port-diagnostics';
 
 /**
  * OAuth callback ports used by CLIProxyAPI (hardcoded in binary)
@@ -90,26 +92,50 @@ function killProcessOnPort(port: number, verbose: boolean): boolean {
 
 /**
  * Detect if running in a headless environment (no browser available)
+ *
+ * IMPROVED: Avoids false positives on Windows desktop environments
+ * where isTTY may be undefined due to terminal wrapper behavior.
+ *
+ * Case study: Vietnamese Windows users reported "command hangs" because
+ * their terminal (PowerShell via npm) didn't set isTTY correctly.
  */
 function isHeadlessEnvironment(): boolean {
-  // SSH session
+  // SSH session - always headless
   if (process.env.SSH_TTY || process.env.SSH_CLIENT || process.env.SSH_CONNECTION) {
     return true;
   }
 
-  // No display (Linux/X11)
+  // No display on Linux (X11/Wayland) - headless
   if (process.platform === 'linux' && !process.env.DISPLAY && !process.env.WAYLAND_DISPLAY) {
     return true;
   }
 
-  // Non-interactive (piped stdin) - skip on Windows
-  // Windows npm wrappers don't set isTTY correctly (returns undefined, not true)
+  // Windows desktop - NEVER headless unless SSH (already checked above)
+  // This fixes false positive where Windows npm wrappers don't set isTTY correctly
   // Windows desktop environments always have browser capability
-  if (process.platform !== 'win32' && !process.stdin.isTTY) {
-    return true;
+  if (process.platform === 'win32') {
+    return false;
+  }
+
+  // macOS - check for proper terminal
+  if (process.platform === 'darwin') {
+    // Non-interactive stdin on macOS means likely piped/scripted
+    if (!process.stdin.isTTY) {
+      return true;
+    }
+    return false;
   }
 
-  return false;
+  // Linux with display - check TTY
+  if (process.platform === 'linux') {
+    if (!process.stdin.isTTY) {
+      return true;
+    }
+    return false;
+  }
+
+  // Default fallback for unknown platforms
+  return !process.stdin.isTTY;
 }
 
 /**
@@ -404,14 +430,15 @@ export function clearAuth(provider: CLIProxyProvider): boolean {
  * Auto-detects headless environment and uses --no-browser flag accordingly
  * @param provider - The CLIProxy provider to authenticate
  * @param options - OAuth options
+ * @param options.add - If true, skip confirm prompt when adding another account
  * @returns Account info if successful, null otherwise
  */
 export async function triggerOAuth(
   provider: CLIProxyProvider,
-  options: { verbose?: boolean; headless?: boolean; account?: string } = {}
+  options: { verbose?: boolean; headless?: boolean; account?: string; add?: boolean } = {}
 ): Promise<AccountInfo | null> {
   const oauthConfig = getOAuthConfig(provider);
-  const { verbose = false } = options;
+  const { verbose = false, add = false } = options;
 
   // Auto-detect headless if not explicitly set
   const headless = options.headless ?? isHeadlessEnvironment();
@@ -422,6 +449,47 @@ export async function triggerOAuth(
     }
   };
 
+  // Check for existing accounts and prompt if --add not specified
+  const existingAccounts = getProviderAccounts(provider);
+  if (existingAccounts.length > 0 && !add) {
+    console.log('');
+    console.log(
+      `[i] ${existingAccounts.length} account(s) already authenticated for ${oauthConfig.displayName}`
+    );
+
+    // Import readline for confirm prompt
+    const readline = await import('readline');
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+
+    const confirmed = await new Promise<boolean>((resolve) => {
+      rl.question('[?] Add another account? (y/N): ', (answer) => {
+        rl.close();
+        resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+      });
+    });
+
+    if (!confirmed) {
+      console.log('[i] Cancelled');
+      return null;
+    }
+  }
+
+  // Pre-flight check: verify OAuth callback port is available
+  const preflight = await preflightOAuthCheck(provider);
+  if (!preflight.ready) {
+    console.log('');
+    console.log('[!] OAuth pre-flight check failed:');
+    for (const issue of preflight.issues) {
+      console.log(`    ${issue}`);
+    }
+    console.log('');
+    console.log('[i] Resolve the port conflict and try again.');
+    return null;
+  }
+
   // Ensure binary exists
   let binaryPath: string;
   try {
@@ -624,8 +692,8 @@ function registerAccountFromToken(
     const data = JSON.parse(content);
     const email = data.email || undefined;
 
-    // Register the account
-    return registerAccount(provider, newestFile, email);
+    // Register the account with auto-generated nickname
+    return registerAccount(provider, newestFile, email, generateNickname(email));
   } catch {
     return null;
   }