chore(cliproxy): improve config and token management

Author: kaitranntt

logs/main.log

@@ -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

@@ -11,7 +11,12 @@ import { getCcsDir, getConfigPath, loadConfig, loadSettings } from '../utils/con
 import { Config, Settings } from '../types/config';
 import { expandPath } from '../utils/helpers';
 import { runHealthChecks, fixHealthIssue } from './health-service';
-import { getAllAuthStatus, getOAuthConfig, initializeAccounts } from '../cliproxy/auth-handler';
+import {
+  getAllAuthStatus,
+  getOAuthConfig,
+  initializeAccounts,
+  triggerOAuth,
+} from '../cliproxy/auth-handler';
 import {
   fetchCliproxyStats,
   fetchCliproxyModels,
@@ -33,6 +38,7 @@ import {
   removeAccount as removeAccountFn,
 } from '../cliproxy/account-manager';
 import type { CLIProxyProvider } from '../cliproxy/types';
+import { getClaudeEnvVars } from '../cliproxy/config-generator';
 // Unified config imports
 import {
   hasUnifiedConfig,
@@ -200,12 +206,25 @@ function updateSettingsFile(
 
 /**
  * Helper: Create cliproxy variant settings
+ * Includes base URL and auth token for proper Claude CLI integration
  */
-function createCliproxySettings(name: string, model?: string): string {
+function createCliproxySettings(name: string, provider: CLIProxyProvider, model?: string): string {
   const settingsPath = path.join(getCcsDir(), `${name}.settings.json`);
 
+  // Get base env vars from provider config (includes BASE_URL, AUTH_TOKEN)
+  const baseEnv = getClaudeEnvVars(provider);
+
   const settings: Settings = {
-    env: model ? { ANTHROPIC_MODEL: model } : {},
+    env: {
+      ANTHROPIC_BASE_URL: baseEnv.ANTHROPIC_BASE_URL || '',
+      ANTHROPIC_AUTH_TOKEN: baseEnv.ANTHROPIC_AUTH_TOKEN || '',
+      ANTHROPIC_MODEL: model || (baseEnv.ANTHROPIC_MODEL as string) || '',
+      ANTHROPIC_DEFAULT_OPUS_MODEL: model || (baseEnv.ANTHROPIC_DEFAULT_OPUS_MODEL as string) || '',
+      ANTHROPIC_DEFAULT_SONNET_MODEL:
+        model || (baseEnv.ANTHROPIC_DEFAULT_SONNET_MODEL as string) || '',
+      ANTHROPIC_DEFAULT_HAIKU_MODEL:
+        (baseEnv.ANTHROPIC_DEFAULT_HAIKU_MODEL as string) || model || '',
+    },
   };
 
   fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n');
@@ -356,7 +375,7 @@ apiRoutes.post('/cliproxy', (req: Request, res: Response): void => {
   }
 
   // Create settings file for variant
-  const settingsPath = createCliproxySettings(name, model);
+  const settingsPath = createCliproxySettings(name, provider as CLIProxyProvider, model);
 
   // Include account if specified (defaults to 'default' if not provided)
   config.cliproxy[name] = {
@@ -534,10 +553,34 @@ apiRoutes.post('/cliproxy/accounts/:provider/default', (req: Request, res: Respo
 /**
  * DELETE /api/cliproxy/accounts/:provider/:accountId - Remove an account
  */
-apiRoutes.delete(
-  '/api/cliproxy/accounts/:provider/:accountId',
-  (req: Request, res: Response): void => {
-    const { provider, accountId } = req.params;
+apiRoutes.delete('/cliproxy/accounts/:provider/:accountId', (req: Request, res: Response): void => {
+  const { provider, accountId } = req.params;
+
+  // Validate provider
+  const validProviders: CLIProxyProvider[] = ['gemini', 'codex', 'agy', 'qwen', 'iflow'];
+  if (!validProviders.includes(provider as CLIProxyProvider)) {
+    res.status(400).json({ error: `Invalid provider: ${provider}` });
+    return;
+  }
+
+  const success = removeAccountFn(provider as CLIProxyProvider, accountId);
+
+  if (success) {
+    res.json({ provider, accountId, deleted: true });
+  } else {
+    res.status(404).json({ error: 'Account not found' });
+  }
+});
+
+/**
+ * POST /api/cliproxy/auth/:provider/start - Start OAuth flow for a provider
+ * Opens browser for authentication and returns account info when complete
+ */
+apiRoutes.post(
+  '/cliproxy/auth/:provider/start',
+  async (req: Request, res: Response): Promise<void> => {
+    const { provider } = req.params;
+    const { nickname } = req.body;
 
     // Validate provider
     const validProviders: CLIProxyProvider[] = ['gemini', 'codex', 'agy', 'qwen', 'iflow'];
@@ -546,12 +589,30 @@ apiRoutes.delete(
       return;
     }
 
-    const success = removeAccountFn(provider as CLIProxyProvider, accountId);
+    try {
+      // Trigger OAuth flow - this opens browser and waits for completion
+      const account = await triggerOAuth(provider as CLIProxyProvider, {
+        add: true, // Always add mode from UI
+        headless: false, // Force interactive mode
+        nickname: nickname || undefined,
+      });
 
-    if (success) {
-      res.json({ provider, accountId, deleted: true });
-    } else {
-      res.status(404).json({ error: 'Account not found' });
+      if (account) {
+        res.json({
+          success: true,
+          account: {
+            id: account.id,
+            email: account.email,
+            nickname: account.nickname,
+            provider: account.provider,
+            isDefault: account.isDefault,
+          },
+        });
+      } else {
+        res.status(400).json({ error: 'Authentication failed or was cancelled' });
+      }
+    } catch (error) {
+      res.status(500).json({ error: (error as Error).message });
     }
   }
 );

src/web-server/routes.ts

@@ -1,8 +1,6 @@
 /**
  * Add Account Dialog Component
- * Simple dialog to add another OAuth account to a provider
- *
- * Shows auth command + refresh button (no variant creation)
+ * Triggers OAuth flow server-side to add another account to a provider
  */
 
 import { useState } from 'react';
@@ -14,9 +12,10 @@ import {
   DialogDescription,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Copy, Check, RefreshCw, Terminal } from 'lucide-react';
-import { useCliproxyAuth } from '@/hooks/use-cliproxy';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, ExternalLink, User } from 'lucide-react';
+import { useStartAuth } from '@/hooks/use-cliproxy';
 
 interface AddAccountDialogProps {
   open: boolean;
@@ -26,69 +25,82 @@ interface AddAccountDialogProps {
 }
 
 export function AddAccountDialog({ open, onClose, provider, displayName }: AddAccountDialogProps) {
-  const [copied, setCopied] = useState(false);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const { refetch } = useCliproxyAuth();
+  const [nickname, setNickname] = useState('');
+  const startAuthMutation = useStartAuth();
 
-  const authCommand = `ccs ${provider} --auth --add`;
-
-  const copyCommand = async () => {
-    await navigator.clipboard.writeText(authCommand);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const handleStartAuth = () => {
+    startAuthMutation.mutate(
+      { provider, nickname: nickname.trim() || undefined },
+      {
+        onSuccess: () => {
+          setNickname('');
+          onClose();
+        },
+      }
+    );
   };
 
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    await refetch();
-    setIsRefreshing(false);
-    onClose();
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen && !startAuthMutation.isPending) {
+      setNickname('');
+      onClose();
+    }
   };
 
   return (
-    <Dialog open={open} onOpenChange={onClose}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>Add {displayName} Account</DialogTitle>
           <DialogDescription>
-            Run the command below in your terminal to authenticate a new account
+            Click the button below to authenticate a new account. A browser window will open for
+            OAuth.
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
-          <Card>
-            <CardContent className="p-4 space-y-3">
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Terminal className="w-4 h-4" />
-                Run this command:
-              </div>
-              <div className="flex items-center gap-2">
-                <code className="flex-1 px-3 py-2 bg-muted rounded-md font-mono text-sm">
-                  {authCommand}
-                </code>
-                <Button variant="outline" size="icon" onClick={copyCommand}>
-                  {copied ? (
-                    <Check className="w-4 h-4 text-green-500" />
-                  ) : (
-                    <Copy className="w-4 h-4" />
-                  )}
-                </Button>
-              </div>
-              <div className="text-xs text-muted-foreground">
-                This will open your browser to authenticate with {displayName}
-              </div>
-            </CardContent>
-          </Card>
+          <div className="space-y-2">
+            <Label htmlFor="nickname">Nickname (optional)</Label>
+            <div className="flex items-center gap-2">
+              <User className="w-4 h-4 text-muted-foreground" />
+              <Input
+                id="nickname"
+                value={nickname}
+                onChange={(e) => setNickname(e.target.value)}
+                placeholder="e.g., work, personal"
+                disabled={startAuthMutation.isPending}
+                className="flex-1"
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              A friendly name to identify this account. Auto-generated from email if left empty.
+            </p>
+          </div>
 
-          <div className="flex items-center justify-end gap-2">
-            <Button variant="ghost" onClick={onClose}>
+          <div className="flex items-center justify-end gap-2 pt-2">
+            <Button variant="ghost" onClick={onClose} disabled={startAuthMutation.isPending}>
               Cancel
             </Button>
-            <Button onClick={handleRefresh} disabled={isRefreshing}>
-              <RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
-              {isRefreshing ? 'Checking...' : 'I ran the command'}
+            <Button onClick={handleStartAuth} disabled={startAuthMutation.isPending}>
+              {startAuthMutation.isPending ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Authenticating...
+                </>
+              ) : (
+                <>
+                  <ExternalLink className="w-4 h-4 mr-2" />
+                  Authenticate
+                </>
+              )}
             </Button>
           </div>
+
+          {startAuthMutation.isPending && (
+            <p className="text-sm text-center text-muted-foreground">
+              Complete the OAuth flow in your browser...
+            </p>
+          )}
         </div>
       </DialogContent>
     </Dialog>