Merge pull request #84 from kaitranntt/dev

feat: Introduce Web Dashboard, Analytics, and Multi-Account Support

Author: kaitranntt

VERSION

@@ -1 +1 @@
-5.15.0-dev.2
+5.15.0-dev.4

logs/main.log

@@ -1,6 +1,6 @@
 {
   "name": "@kaitranntt/ccs",
-  "version": "5.15.0-dev.2",
+  "version": "5.15.0-dev.4",
   "description": "Claude Code Switch - Instant profile switching between Claude Sonnet 4.5 and GLM 4.6",
   "keywords": [
     "cli",

package.json

@@ -1,16 +1,22 @@
 #!/usr/bin/env node
 
 /**
- * Verify UI bundle size is under 1MB gzipped
- * React + shadcn/ui dashboard typically ranges 600-900KB
+ * Verify UI bundle size stays reasonable
+ *
+ * Current stack: React + TanStack Query + Radix UI + shadcn/ui + Recharts
+ * Expected range: 800KB - 1.5MB gzipped for full-featured dashboard
+ *
+ * This is a developer tool, not a public-facing site, so we optimize for
+ * features over minimal bundle size. The limit is a sanity check to catch
+ * accidental large dependencies, not a hard performance target.
  */
 
 const fs = require('fs');
 const path = require('path');
 const zlib = require('zlib');
 
 const UI_DIR = path.join(__dirname, '../dist/ui');
-const MAX_SIZE = 1024 * 1024; // 1MB
+const MAX_SIZE = 1.5 * 1024 * 1024; // 1.5MB - reasonable for full-featured React dashboard
 
 function getGzipSize(filePath) {
   const content = fs.readFileSync(filePath);
@@ -40,9 +46,10 @@ if (!fs.existsSync(UI_DIR)) {
 
 const totalSize = walkDir(UI_DIR);
 const sizeKB = (totalSize / 1024).toFixed(1);
+const maxKB = (MAX_SIZE / 1024).toFixed(0);
 
 if (totalSize > MAX_SIZE) {
-  console.log(`[X] Bundle too large: ${sizeKB}KB gzipped (max: 1024KB)`);
+  console.log(`[X] Bundle too large: ${sizeKB}KB gzipped (max: ${maxKB}KB)`);
   process.exit(1);
 } else {
   console.log(`[OK] Bundle size: ${sizeKB}KB gzipped`);

scripts/verify-bundle.js

@@ -130,11 +130,54 @@ export function saveAccountsRegistry(registry: AccountsRegistry): void {
   });
 }
 
+/**
+ * Sync registry with actual token files
+ * Removes stale entries where token file no longer exists
+ * Called automatically when loading accounts
+ */
+function syncRegistryWithTokenFiles(registry: AccountsRegistry): boolean {
+  const authDir = getAuthDir();
+  let modified = false;
+
+  for (const [_providerName, providerAccounts] of Object.entries(registry.providers)) {
+    if (!providerAccounts) continue;
+
+    const staleIds: string[] = [];
+
+    for (const [accountId, meta] of Object.entries(providerAccounts.accounts)) {
+      const tokenPath = path.join(authDir, meta.tokenFile);
+      if (!fs.existsSync(tokenPath)) {
+        staleIds.push(accountId);
+      }
+    }
+
+    // Remove stale accounts
+    for (const id of staleIds) {
+      delete providerAccounts.accounts[id];
+      modified = true;
+
+      // Update default if deleted
+      if (providerAccounts.default === id) {
+        const remainingIds = Object.keys(providerAccounts.accounts);
+        providerAccounts.default = remainingIds[0] || 'default';
+      }
+    }
+  }
+
+  return modified;
+}
+
 /**
  * Get all accounts for a provider
  */
 export function getProviderAccounts(provider: CLIProxyProvider): AccountInfo[] {
   const registry = loadAccountsRegistry();
+
+  // Sync with actual token files (removes stale entries)
+  if (syncRegistryWithTokenFiles(registry)) {
+    saveAccountsRegistry(registry);
+  }
+
   const providerAccounts = registry.providers[provider];
 
   if (!providerAccounts) {

src/cliproxy/account-manager.ts

@@ -23,7 +23,17 @@ interface ProviderSettings {
 export const CLIPROXY_DEFAULT_PORT = 8317;
 
 /** Internal API key for CCS-managed requests */
-const CCS_INTERNAL_API_KEY = 'ccs-internal-managed';
+export const CCS_INTERNAL_API_KEY = 'ccs-internal-managed';
+
+/** Simple secret key for Control Panel login (user-facing) */
+export const CCS_CONTROL_PANEL_SECRET = 'ccs';
+
+/**
+ * Config version - bump when config format changes to trigger regeneration
+ * v1: Initial config (port, auth-dir, api-keys only)
+ * v2: Full-featured config with dashboard, quota mgmt, simplified key
+ */
+export const CLIPROXY_CONFIG_VERSION = 2;
 
 /** Provider display names (static metadata) */
 const PROVIDER_DISPLAY_NAMES: Record<CLIProxyProvider, string> = {
@@ -112,26 +122,68 @@ export function getBinDir(): string {
 function generateUnifiedConfigContent(port: number = CLIPROXY_DEFAULT_PORT): string {
   const authDir = getAuthDir(); // Base auth dir - CLIProxyAPI scans subdirectories
 
-  // Unified config with all providers
-  const config = `# CLIProxyAPI unified config generated by CCS
-# Supports: gemini, codex, agy, qwen (concurrent usage)
+  // Unified config with enhanced CLIProxyAPI features
+  const config = `# CLIProxyAPI config generated by CCS v${CLIPROXY_CONFIG_VERSION}
+# Supports: gemini, codex, agy, qwen, iflow (concurrent usage)
 # Generated: ${new Date().toISOString()}
+#
+# This config is auto-managed by CCS. Manual edits may be overwritten.
+# Use 'ccs doctor' to regenerate with latest settings.
+
+# =============================================================================
+# Server Settings
+# =============================================================================
 
 port: ${port}
 debug: false
-logging-to-file: false
-usage-statistics-enabled: false
 
-# CCS internal authentication
+# =============================================================================
+# Logging
+# =============================================================================
+
+# Write logs to file (stored in ~/.ccs/cliproxy/logs/)
+logging-to-file: true
+
+# Log individual API requests for debugging/analytics
+request-log: true
+
+# =============================================================================
+# Dashboard & Management
+# =============================================================================
+
+# Enable usage statistics for CCS dashboard analytics
+usage-statistics-enabled: true
+
+# Remote management API for CCS dashboard integration
+remote-management:
+  allow-remote: true
+  secret-key: "${CCS_CONTROL_PANEL_SECRET}"
+  disable-control-panel: false
+
+# =============================================================================
+# Reliability & Quota Management
+# =============================================================================
+
+# Auto-retry on transient errors (403, 408, 500, 502, 503, 504)
+request-retry: 0
+max-retry-interval: 0
+
+# Auto-switch accounts on quota exceeded (429)
+# This enables seamless multi-account rotation when rate limited
+quota-exceeded:
+  switch-project: true
+  switch-preview-model: true
+
+# =============================================================================
+# Authentication
+# =============================================================================
+
+# API keys for CCS internal requests
 api-keys:
   - "${CCS_INTERNAL_API_KEY}"
 
-# OAuth tokens stored in auth/ directory
-# CLIProxyAPI auto-discovers auth files in subdirectories
-auth-dir: "${authDir.replace(/\\/g, '/')}"
-
-# All providers configured - routes by model name
-# No provider-specific sections needed - OAuth auth files provide credentials
+# OAuth tokens directory (auto-discovered by CLIProxyAPI)
+auth-dir: "${authDir.replace(/\\\\/g, '/')}"
 `;
 
   return config;
@@ -162,6 +214,67 @@ export function generateConfig(
   return configPath;
 }
 
+/**
+ * Force regenerate config.yaml with latest settings
+ * Deletes existing config and creates fresh one with current port
+ * @returns Path to new config file
+ */
+export function regenerateConfig(port: number = CLIPROXY_DEFAULT_PORT): string {
+  const configPath = getConfigPath();
+
+  // Read existing port if config exists (preserve user's port choice)
+  let effectivePort = port;
+  if (fs.existsSync(configPath)) {
+    try {
+      const content = fs.readFileSync(configPath, 'utf-8');
+      const portMatch = content.match(/^port:\s*(\d+)/m);
+      if (portMatch) {
+        effectivePort = parseInt(portMatch[1], 10);
+      }
+    } catch {
+      // Use default port if reading fails
+    }
+    // Delete existing config
+    fs.unlinkSync(configPath);
+  }
+
+  // Ensure directories exist
+  fs.mkdirSync(path.dirname(configPath), { recursive: true });
+  fs.mkdirSync(getAuthDir(), { recursive: true, mode: 0o700 });
+
+  // Generate fresh config
+  const configContent = generateUnifiedConfigContent(effectivePort);
+  fs.writeFileSync(configPath, configContent, { mode: 0o600 });
+
+  return configPath;
+}
+
+/**
+ * Check if config needs regeneration (version mismatch)
+ * @returns true if config should be regenerated
+ */
+export function configNeedsRegeneration(): boolean {
+  const configPath = getConfigPath();
+  if (!fs.existsSync(configPath)) {
+    return false; // Will be created on first use
+  }
+
+  try {
+    const content = fs.readFileSync(configPath, 'utf-8');
+
+    // Check for version marker
+    const versionMatch = content.match(/CCS v(\d+)/);
+    if (!versionMatch) {
+      return true; // No version marker = old config
+    }
+
+    const configVersion = parseInt(versionMatch[1], 10);
+    return configVersion < CLIPROXY_CONFIG_VERSION;
+  } catch {
+    return true; // Error reading = regenerate
+  }
+}
+
 /**
  * Check if config exists for provider
  */

src/cliproxy/config-generator.ts

@@ -48,6 +48,8 @@ export {
 // Config generation
 export {
   generateConfig,
+  regenerateConfig,
+  configNeedsRegeneration,
   getClaudeEnvVars,
   getEffectiveEnvVars,
   getProviderSettingsPath,
@@ -62,6 +64,7 @@ export {
   configExists,
   deleteConfig,
   CLIPROXY_DEFAULT_PORT,
+  CLIPROXY_CONFIG_VERSION,
 } from './config-generator';
 
 // Base config loader (for reading config/base-*.settings.json)
@@ -98,3 +101,23 @@ export {
   getProviderTokenDir,
   displayAuthStatus,
 } from './auth-handler';
+
+// Stats fetcher
+export type { CliproxyStats } from './stats-fetcher';
+export { fetchCliproxyStats, isCliproxyRunning } from './stats-fetcher';
+
+// OpenAI compatibility layer
+export type { OpenAICompatProvider, OpenAICompatModel } from './openai-compat-manager';
+export {
+  listOpenAICompatProviders,
+  getOpenAICompatProvider,
+  addOpenAICompatProvider,
+  updateOpenAICompatProvider,
+  removeOpenAICompatProvider,
+  OPENROUTER_TEMPLATE,
+  TOGETHER_TEMPLATE,
+} from './openai-compat-manager';
+
+// Service manager (background CLIProxy for dashboard)
+export type { ServiceStartResult } from './service-manager';
+export { ensureCliproxyService, stopCliproxyService, getServiceStatus } from './service-manager';