agentgui 1.0.199 → 1.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.199",
+  "version": "1.0.201",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -28,6 +28,7 @@
     "busboy": "^1.6.0",
     "express": "^5.2.1",
     "fsbrowse": "^0.2.13",
+    "google-auth-library": "^10.5.0",
     "onnxruntime-node": "^1.24.1",
     "webtalk": "github:AnEntrypoint/webtalk",
     "ws": "^8.14.2"

package/server.js

@@ -3,10 +3,13 @@ import fs from 'fs';
 import path from 'path';
 import os from 'os';
 import zlib from 'zlib';
+import net from 'net';
+import crypto from 'crypto';
 import { fileURLToPath } from 'url';
 import { WebSocketServer } from 'ws';
 import { execSync, spawn } from 'child_process';
 import { createRequire } from 'module';
+import { OAuth2Client } from 'google-auth-library';
 import { queries } from './database.js';
 import { runClaudeWithStreaming } from './lib/claude-runner.js';
 let speechModule = null;
@@ -180,6 +183,350 @@ function discoverAgents() {
 
 const discoveredAgents = discoverAgents();
 
+const GEMINI_SCOPES = [
+  'https://www.googleapis.com/auth/cloud-platform',
+  'https://www.googleapis.com/auth/userinfo.email',
+  'https://www.googleapis.com/auth/userinfo.profile',
+];
+
+function getGeminiOAuthCreds() {
+  try {
+    const geminiPath = execSync('which gemini', { encoding: 'utf8' }).trim();
+    const realPath = fs.realpathSync(geminiPath);
+    const pkgRoot = path.resolve(path.dirname(realPath), '..');
+    const oauth2Path = path.join(pkgRoot, 'node_modules', '@google', 'gemini-cli-core', 'dist', 'src', 'code_assist', 'oauth2.js');
+    const src = fs.readFileSync(oauth2Path, 'utf8');
+    const idMatch = src.match(/OAUTH_CLIENT_ID\s*=\s*['"]([^'"]+)['"]/);
+    const secretMatch = src.match(/OAUTH_CLIENT_SECRET\s*=\s*['"]([^'"]+)['"]/);
+    if (idMatch && secretMatch) return { clientId: idMatch[1], clientSecret: secretMatch[1] };
+  } catch {}
+  try {
+    const npmCacheDirs = [
+      path.join(os.homedir(), '.npm', '_npx'),
+      path.join(os.homedir(), '.cache', '.npm', '_npx'),
+      process.env.NPM_CACHE ? path.join(process.env.NPM_CACHE, '_npx') : null,
+    ].filter(Boolean);
+    for (const cacheDir of npmCacheDirs) {
+      if (!fs.existsSync(cacheDir)) continue;
+      for (const d of fs.readdirSync(cacheDir).filter(d => !d.startsWith('.'))) {
+        const oauth2Path = path.join(cacheDir, d, 'node_modules', '@google', 'gemini-cli-core', 'dist', 'src', 'code_assist', 'oauth2.js');
+        if (fs.existsSync(oauth2Path)) {
+          const src = fs.readFileSync(oauth2Path, 'utf8');
+          const idMatch = src.match(/OAUTH_CLIENT_ID\s*=\s*['"]([^'"]+)['"]/);
+          const secretMatch = src.match(/OAUTH_CLIENT_SECRET\s*=\s*['"]([^'"]+)['"]/);
+          if (idMatch && secretMatch) return { clientId: idMatch[1], clientSecret: secretMatch[1] };
+        }
+      }
+    }
+  } catch {}
+  return null;
+}
+const GEMINI_DIR = path.join(os.homedir(), '.gemini');
+const GEMINI_OAUTH_FILE = path.join(GEMINI_DIR, 'oauth_creds.json');
+const GEMINI_ACCOUNTS_FILE = path.join(GEMINI_DIR, 'google_accounts.json');
+
+let geminiOAuthState = { status: 'idle', error: null, email: null };
+let geminiOAuthCallbackServer = null;
+
+function getAvailablePort() {
+  return new Promise((resolve, reject) => {
+    const srv = net.createServer();
+    srv.listen(0, () => {
+      const port = srv.address().port;
+      srv.close(() => resolve(port));
+    });
+    srv.on('error', reject);
+  });
+}
+
+function saveGeminiCredentials(tokens, email) {
+  if (!fs.existsSync(GEMINI_DIR)) fs.mkdirSync(GEMINI_DIR, { recursive: true });
+  fs.writeFileSync(GEMINI_OAUTH_FILE, JSON.stringify(tokens, null, 2), { mode: 0o600 });
+  try { fs.chmodSync(GEMINI_OAUTH_FILE, 0o600); } catch (_) {}
+
+  let accounts = { active: null, old: [] };
+  try {
+    if (fs.existsSync(GEMINI_ACCOUNTS_FILE)) {
+      accounts = JSON.parse(fs.readFileSync(GEMINI_ACCOUNTS_FILE, 'utf8'));
+    }
+  } catch (_) {}
+
+  if (email) {
+    if (accounts.active && accounts.active !== email && !accounts.old.includes(accounts.active)) {
+      accounts.old.push(accounts.active);
+    }
+    accounts.active = email;
+  }
+  fs.writeFileSync(GEMINI_ACCOUNTS_FILE, JSON.stringify(accounts, null, 2), { mode: 0o600 });
+}
+
+function geminiOAuthResultPage(title, message, success) {
+  const color = success ? '#10b981' : '#ef4444';
+  const icon = success ? '✓' : '✗';
+  return `<!DOCTYPE html><html><head><title>${title}</title></head>
+<body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#111827;font-family:system-ui,sans-serif;color:white;">
+<div style="text-align:center;max-width:400px;padding:2rem;">
+<div style="font-size:4rem;color:${color};margin-bottom:1rem;">${icon}</div>
+<h1 style="font-size:1.5rem;margin-bottom:0.5rem;">${title}</h1>
+<p style="color:#9ca3af;">${message}</p>
+<p style="color:#6b7280;margin-top:1rem;font-size:0.875rem;">You can close this tab.</p>
+</div></body></html>`;
+}
+
+async function startGeminiOAuth() {
+  if (geminiOAuthCallbackServer) {
+    try { geminiOAuthCallbackServer.close(); } catch (_) {}
+    geminiOAuthCallbackServer = null;
+  }
+
+  const creds = getGeminiOAuthCreds();
+  if (!creds) throw new Error('Could not find Gemini CLI OAuth credentials. Install gemini CLI first.');
+
+  const port = await getAvailablePort();
+  const redirectUri = `http://127.0.0.1:${port}/oauth2callback`;
+  const state = crypto.randomBytes(32).toString('hex');
+
+  const client = new OAuth2Client({
+    clientId: creds.clientId,
+    clientSecret: creds.clientSecret,
+  });
+
+  const authUrl = client.generateAuthUrl({
+    redirect_uri: redirectUri,
+    access_type: 'offline',
+    scope: GEMINI_SCOPES,
+    state,
+  });
+
+  geminiOAuthState = { status: 'pending', error: null, email: null };
+
+  return new Promise((resolve, reject) => {
+    const cbServer = http.createServer(async (req, res) => {
+      try {
+        const reqUrl = new URL(req.url, `http://127.0.0.1:${port}`);
+        if (reqUrl.pathname !== '/oauth2callback') {
+          res.writeHead(404);
+          res.end('Not found');
+          return;
+        }
+
+        const error = reqUrl.searchParams.get('error');
+        if (error) {
+          const desc = reqUrl.searchParams.get('error_description') || error;
+          geminiOAuthState = { status: 'error', error: desc, email: null };
+          res.writeHead(200, { 'Content-Type': 'text/html' });
+          res.end(geminiOAuthResultPage('Authentication Failed', desc, false));
+          cbServer.close();
+          return;
+        }
+
+        if (reqUrl.searchParams.get('state') !== state) {
+          geminiOAuthState = { status: 'error', error: 'State mismatch', email: null };
+          res.writeHead(200, { 'Content-Type': 'text/html' });
+          res.end(geminiOAuthResultPage('Authentication Failed', 'State mismatch.', false));
+          cbServer.close();
+          return;
+        }
+
+        const code = reqUrl.searchParams.get('code');
+        if (!code) {
+          geminiOAuthState = { status: 'error', error: 'No authorization code', email: null };
+          res.writeHead(200, { 'Content-Type': 'text/html' });
+          res.end(geminiOAuthResultPage('Authentication Failed', 'No authorization code received.', false));
+          cbServer.close();
+          return;
+        }
+
+        const { tokens } = await client.getToken({ code, redirect_uri: redirectUri });
+        client.setCredentials(tokens);
+
+        let email = '';
+        try {
+          const { token } = await client.getAccessToken();
+          if (token) {
+            const resp = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
+              headers: { Authorization: `Bearer ${token}` }
+            });
+            if (resp.ok) {
+              const info = await resp.json();
+              email = info.email || '';
+            }
+          }
+        } catch (_) {}
+
+        saveGeminiCredentials(tokens, email);
+        geminiOAuthState = { status: 'success', error: null, email };
+
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(geminiOAuthResultPage('Authentication Successful', email ? `Signed in as ${email}` : 'Gemini CLI credentials saved.', true));
+        cbServer.close();
+      } catch (e) {
+        geminiOAuthState = { status: 'error', error: e.message, email: null };
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(geminiOAuthResultPage('Authentication Failed', e.message, false));
+        cbServer.close();
+      }
+    });
+
+    cbServer.on('error', (err) => {
+      geminiOAuthState = { status: 'error', error: err.message, email: null };
+      reject(err);
+    });
+
+    cbServer.listen(port, '127.0.0.1', () => {
+      geminiOAuthCallbackServer = cbServer;
+      resolve(authUrl);
+    });
+
+    setTimeout(() => {
+      if (geminiOAuthState.status === 'pending') {
+        geminiOAuthState = { status: 'error', error: 'Authentication timed out', email: null };
+        try { cbServer.close(); } catch (_) {}
+      }
+    }, 5 * 60 * 1000);
+  });
+}
+
+function getGeminiOAuthStatus() {
+  try {
+    if (fs.existsSync(GEMINI_OAUTH_FILE)) {
+      const creds = JSON.parse(fs.readFileSync(GEMINI_OAUTH_FILE, 'utf8'));
+      if (creds.refresh_token || creds.access_token) {
+        let email = '';
+        try {
+          if (fs.existsSync(GEMINI_ACCOUNTS_FILE)) {
+            const accts = JSON.parse(fs.readFileSync(GEMINI_ACCOUNTS_FILE, 'utf8'));
+            email = accts.active || '';
+          }
+        } catch (_) {}
+        return { hasKey: true, apiKey: email || '****oauth', defaultModel: '', path: GEMINI_OAUTH_FILE, authMethod: 'oauth' };
+      }
+    }
+  } catch (_) {}
+  return null;
+}
+
+const PROVIDER_CONFIGS = {
+  'anthropic': {
+    name: 'Anthropic', configPaths: [
+      path.join(os.homedir(), '.claude.json'),
+      path.join(os.homedir(), '.config', 'claude', 'settings.json'),
+      path.join(os.homedir(), '.anthropic.json')
+    ],
+    configFormat: (apiKey, model) => ({ api_key: apiKey, default_model: model })
+  },
+  'openai': {
+    name: 'OpenAI', configPaths: [
+      path.join(os.homedir(), '.openai.json'),
+      path.join(os.homedir(), '.config', 'openai', 'api-key')
+    ],
+    configFormat: (apiKey, model) => ({ apiKey, defaultModel: model })
+  },
+  'google': {
+    name: 'Google Gemini', configPaths: [
+      path.join(os.homedir(), '.gemini.json'),
+      path.join(os.homedir(), '.config', 'gemini', 'credentials.json')
+    ],
+    configFormat: (apiKey, model) => ({ api_key: apiKey, default_model: model })
+  },
+  'openrouter': {
+    name: 'OpenRouter', configPaths: [
+      path.join(os.homedir(), '.openrouter.json'),
+      path.join(os.homedir(), '.config', 'openrouter', 'config.json')
+    ],
+    configFormat: (apiKey, model) => ({ api_key: apiKey, default_model: model })
+  },
+  'github': {
+    name: 'GitHub Models', configPaths: [
+      path.join(os.homedir(), '.github.json'),
+      path.join(os.homedir(), '.config', 'github-copilot.json')
+    ],
+    configFormat: (apiKey, model) => ({ github_token: apiKey, default_model: model })
+  },
+  'azure': {
+    name: 'Azure OpenAI', configPaths: [
+      path.join(os.homedir(), '.azure.json'),
+      path.join(os.homedir(), '.config', 'azure-openai', 'config.json')
+    ],
+    configFormat: (apiKey, model) => ({ api_key: apiKey, endpoint: '', default_model: model })
+  },
+  'anthropic-claude-code': {
+    name: 'Claude Code Max', configPaths: [
+      path.join(os.homedir(), '.claude', 'max.json'),
+      path.join(os.homedir(), '.config', 'claude-code', 'max.json')
+    ],
+    configFormat: (apiKey, model) => ({ api_key: apiKey, plan: 'max', default_model: model })
+  },
+  'opencode': {
+    name: 'OpenCode', configPaths: [
+      path.join(os.homedir(), '.opencode', 'config.json'),
+      path.join(os.homedir(), '.config', 'opencode', 'config.json')
+    ],
+    configFormat: (apiKey, model) => ({ api_key: apiKey, default_model: model, providers: ['anthropic', 'openai', 'google'] })
+  },
+  'proxypilot': {
+    name: 'ProxyPilot', configPaths: [
+      path.join(os.homedir(), '.proxypilot', 'config.json'),
+      path.join(os.homedir(), '.config', 'proxypilot', 'config.json')
+    ],
+    configFormat: (apiKey, model) => ({ api_key: apiKey, default_model: model })
+  }
+};
+
+function maskKey(key) {
+  if (!key || key.length < 8) return '****';
+  return '****' + key.slice(-4);
+}
+
+function getProviderConfigs() {
+  const configs = {};
+  for (const [providerId, config] of Object.entries(PROVIDER_CONFIGS)) {
+    if (providerId === 'google') {
+      const oauthStatus = getGeminiOAuthStatus();
+      if (oauthStatus) {
+        configs[providerId] = { name: config.name, ...oauthStatus };
+        continue;
+      }
+    }
+    for (const configPath of config.configPaths) {
+      try {
+        if (fs.existsSync(configPath)) {
+          const content = fs.readFileSync(configPath, 'utf8');
+          const parsed = JSON.parse(content);
+          const rawKey = parsed.api_key || parsed.apiKey || parsed.github_token || '';
+          configs[providerId] = {
+            name: config.name,
+            apiKey: maskKey(rawKey),
+            hasKey: !!rawKey,
+            defaultModel: parsed.default_model || parsed.defaultModel || '',
+            path: configPath
+          };
+          break;
+        }
+      } catch (_) {}
+    }
+    if (!configs[providerId]) {
+      configs[providerId] = { name: config.name, apiKey: '', hasKey: false, defaultModel: '', path: '' };
+    }
+  }
+  return configs;
+}
+
+function saveProviderConfig(providerId, apiKey, defaultModel) {
+  const config = PROVIDER_CONFIGS[providerId];
+  if (!config) throw new Error('Unknown provider: ' + providerId);
+  const configPath = config.configPaths[0];
+  const configDir = path.dirname(configPath);
+  if (!fs.existsSync(configDir)) fs.mkdirSync(configDir, { recursive: true });
+  let existing = {};
+  try {
+    if (fs.existsSync(configPath)) existing = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+  } catch (_) {}
+  const merged = { ...existing, ...config.configFormat(apiKey, defaultModel) };
+  fs.writeFileSync(configPath, JSON.stringify(merged, null, 2), { mode: 0o600 });
+  return configPath;
+}
+
 function parseBody(req) {
   return new Promise((resolve, reject) => {
     let body = '';
@@ -678,15 +1025,29 @@ const server = http.createServer(async (req, res) => {
               status.detail = 'no credentials';
             }
           } else if (agent.id === 'gemini') {
+            const oauthFile = path.join(os.homedir(), '.gemini', 'oauth_creds.json');
             const acctFile = path.join(os.homedir(), '.gemini', 'google_accounts.json');
+            let hasOAuth = false;
+            if (fs.existsSync(oauthFile)) {
+              try {
+                const creds = JSON.parse(fs.readFileSync(oauthFile, 'utf-8'));
+                if (creds.refresh_token || creds.access_token) hasOAuth = true;
+              } catch (_) {}
+            }
             if (fs.existsSync(acctFile)) {
               const accts = JSON.parse(fs.readFileSync(acctFile, 'utf-8'));
               if (accts.active) {
                 status.authenticated = true;
                 status.detail = accts.active;
+              } else if (hasOAuth) {
+                status.authenticated = true;
+                status.detail = 'oauth';
               } else {
                 status.detail = 'logged out';
               }
+            } else if (hasOAuth) {
+              status.authenticated = true;
+              status.detail = 'oauth';
             } else {
               status.detail = 'no credentials';
             }
@@ -711,16 +1072,60 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    if (pathOnly === '/api/gemini-oauth/start' && req.method === 'POST') {
+      try {
+        const authUrl = await startGeminiOAuth();
+        sendJSON(req, res, 200, { authUrl });
+      } catch (e) {
+        sendJSON(req, res, 500, { error: e.message });
+      }
+      return;
+    }
+
+    if (pathOnly === '/api/gemini-oauth/status' && req.method === 'GET') {
+      sendJSON(req, res, 200, geminiOAuthState);
+      return;
+    }
+
     const agentAuthMatch = pathOnly.match(/^\/api\/agents\/([^/]+)\/auth$/);
     if (agentAuthMatch && req.method === 'POST') {
       const agentId = agentAuthMatch[1];
       const agent = discoveredAgents.find(a => a.id === agentId);
       if (!agent) { sendJSON(req, res, 404, { error: 'Agent not found' }); return; }
 
+      if (agentId === 'gemini') {
+        try {
+          const authUrl = await startGeminiOAuth();
+          const conversationId = '__agent_auth__';
+          broadcastSync({ type: 'script_started', conversationId, script: 'auth-gemini', agentId: 'gemini', timestamp: Date.now() });
+          broadcastSync({ type: 'script_output', conversationId, data: `\x1b[36mOpening Google OAuth in your browser...\x1b[0m\r\n\r\nIf it doesn't open automatically, visit:\r\n${authUrl}\r\n`, stream: 'stdout', timestamp: Date.now() });
+
+          const pollId = setInterval(() => {
+            if (geminiOAuthState.status === 'success') {
+              clearInterval(pollId);
+              const email = geminiOAuthState.email || '';
+              broadcastSync({ type: 'script_output', conversationId, data: `\r\n\x1b[32mAuthentication successful${email ? ' (' + email + ')' : ''}\x1b[0m\r\n`, stream: 'stdout', timestamp: Date.now() });
+              broadcastSync({ type: 'script_stopped', conversationId, code: 0, timestamp: Date.now() });
+            } else if (geminiOAuthState.status === 'error') {
+              clearInterval(pollId);
+              broadcastSync({ type: 'script_output', conversationId, data: `\r\n\x1b[31mAuthentication failed: ${geminiOAuthState.error}\x1b[0m\r\n`, stream: 'stderr', timestamp: Date.now() });
+              broadcastSync({ type: 'script_stopped', conversationId, code: 1, error: geminiOAuthState.error, timestamp: Date.now() });
+            }
+          }, 1000);
+
+          setTimeout(() => clearInterval(pollId), 5 * 60 * 1000);
+
+          sendJSON(req, res, 200, { ok: true, agentId, authUrl });
+          return;
+        } catch (e) {
+          sendJSON(req, res, 500, { error: e.message });
+          return;
+        }
+      }
+
       const authCommands = {
         'claude-code': { cmd: 'claude', args: ['setup-token'] },
         'opencode': { cmd: 'opencode', args: ['auth', 'login'] },
-        'gemini': { cmd: 'gemini', args: [] }
       };
       const authCmd = authCommands[agentId];
       if (!authCmd) { sendJSON(req, res, 400, { error: 'No auth command for this agent' }); return; }
@@ -755,6 +1160,33 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    if (pathOnly === '/api/auth/configs' && req.method === 'GET') {
+      const configs = getProviderConfigs();
+      sendJSON(req, res, 200, configs);
+      return;
+    }
+
+    if (pathOnly === '/api/auth/save-config' && req.method === 'POST') {
+      try {
+        const body = await parseBody(req);
+        const { providerId, apiKey, defaultModel } = body || {};
+        if (typeof providerId !== 'string' || !providerId.length || providerId.length > 100) {
+          sendJSON(req, res, 400, { error: 'Invalid providerId' }); return;
+        }
+        if (typeof apiKey !== 'string' || !apiKey.length || apiKey.length > 10000) {
+          sendJSON(req, res, 400, { error: 'Invalid apiKey' }); return;
+        }
+        if (defaultModel !== undefined && (typeof defaultModel !== 'string' || defaultModel.length > 200)) {
+          sendJSON(req, res, 400, { error: 'Invalid defaultModel' }); return;
+        }
+        const configPath = saveProviderConfig(providerId, apiKey, defaultModel || '');
+        sendJSON(req, res, 200, { success: true, path: configPath });
+      } catch (err) {
+        sendJSON(req, res, 400, { error: err.message });
+      }
+      return;
+    }
+
     if (pathOnly === '/api/import/claude-code' && req.method === 'GET') {
       const result = queries.importClaudeCodeConversations();
             sendJSON(req, res, 200, { imported: result });

package/static/index.html

@@ -452,7 +452,7 @@
       transition: background-color 0.15s, color 0.15s;
     }
     .header-icon-btn:hover { background-color: var(--color-bg-primary); color: var(--color-text-primary); }
-    .header-icon-btn svg { width: 18px; height: 18px; }
+    .header-icon-btn svg { width: 20px; height: 20px; }
     #scriptStartBtn { color: var(--color-success); }
     #scriptStartBtn:hover { background-color: rgba(16,185,129,0.1); color: var(--color-success); }
     .script-dev-btn { color: var(--color-info); }
@@ -466,7 +466,7 @@
     .agent-auth-btn:hover { background-color: var(--color-bg-primary); }
     .agent-auth-dropdown {
       position: absolute; top: 100%; right: 0; z-index: 100;
-      min-width: 200px; padding: 0.25rem 0;
+      min-width: 260px; padding: 0.25rem 0;
       background: var(--color-bg-secondary); border: 1px solid var(--color-border);
       border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
       display: none;
@@ -485,6 +485,11 @@
     .agent-auth-dot.ok { background: var(--color-success); }
     .agent-auth-dot.missing { background: var(--color-warning); }
     .agent-auth-dot.unknown { background: var(--color-text-secondary); }
+    .agent-auth-section-header {
+      padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 600;
+      text-transform: uppercase; letter-spacing: 0.05em;
+      color: var(--color-text-secondary); user-select: none;
+    }
 
     .terminal-container {
       flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #1e1e1e;

package/static/js/agent-auth.js

@@ -2,103 +2,157 @@
   var BASE = window.__BASE_URL || '';
   var btn = document.getElementById('agentAuthBtn');
   var dropdown = document.getElementById('agentAuthDropdown');
-  var agents = [];
-  var authRunning = false;
+  var agents = [], providers = {}, authRunning = false, editingProvider = null;
   var AUTH_CONV_ID = '__agent_auth__';
 
   function init() {
     if (!btn || !dropdown) return;
+    btn.style.display = 'flex';
     btn.addEventListener('click', toggleDropdown);
     document.addEventListener('click', function(e) {
-      if (!btn.contains(e.target)) closeDropdown();
+      if (!btn.contains(e.target) && !dropdown.contains(e.target)) closeDropdown();
     });
-    window.addEventListener('conversation-selected', function() { fetchAuthStatus(); });
+    window.addEventListener('conversation-selected', function() { refresh(); });
     window.addEventListener('ws-message', onWsMessage);
-    fetchAuthStatus();
+    refresh();
   }
 
+  function refresh() { fetchAuthStatus(); fetchProviderConfigs(); }
+
   function fetchAuthStatus() {
-    fetch(BASE + '/api/agents/auth-status')
-      .then(function(r) { return r.json(); })
-      .then(function(data) {
-        agents = data.agents || [];
-        updateButton();
-        renderDropdown();
-      })
+    fetch(BASE + '/api/agents/auth-status').then(function(r) { return r.json(); })
+      .then(function(data) { agents = data.agents || []; updateButton(); renderDropdown(); })
+      .catch(function() {});
+  }
+
+  function fetchProviderConfigs() {
+    fetch(BASE + '/api/auth/configs').then(function(r) { return r.json(); })
+      .then(function(data) { providers = data || {}; updateButton(); renderDropdown(); })
       .catch(function() {});
   }
 
   function updateButton() {
-    if (agents.length === 0) { btn.style.display = 'none'; return; }
     btn.style.display = 'flex';
-    var allOk = agents.every(function(a) { return a.authenticated; });
-    var anyMissing = agents.some(function(a) { return !a.authenticated; });
-    btn.classList.toggle('auth-ok', allOk);
-    btn.classList.toggle('auth-warn', anyMissing);
+    var agentOk = agents.length === 0 || agents.every(function(a) { return a.authenticated; });
+    var pkeys = Object.keys(providers);
+    var provOk = pkeys.length === 0 || pkeys.some(function(k) { return providers[k].hasKey; });
+    var anyWarn = agents.some(function(a) { return !a.authenticated; }) ||
+      pkeys.some(function(k) { return !providers[k].hasKey; });
+    btn.classList.toggle('auth-ok', agentOk && provOk && (agents.length > 0 || pkeys.length > 0));
+    btn.classList.toggle('auth-warn', anyWarn);
   }
 
   function renderDropdown() {
     dropdown.innerHTML = '';
-    agents.forEach(function(agent) {
-      var item = document.createElement('button');
-      item.className = 'agent-auth-item';
-      var dotClass = agent.authenticated ? 'ok' : (agent.detail === 'unknown' ? 'unknown' : 'missing');
-      item.innerHTML = '<span class="agent-auth-dot ' + dotClass + '"></span>' +
-        '<span>' + escapeHtml(agent.name) + '</span>' +
-        '<span style="margin-left:auto;font-size:0.7rem;color:var(--color-text-secondary)">' + escapeHtml(agent.detail) + '</span>';
-      item.addEventListener('click', function(e) {
-        e.stopPropagation();
-        closeDropdown();
-        triggerAuth(agent.id);
+    if (agents.length > 0) {
+      appendHeader('Agent CLI Auth');
+      agents.forEach(function(agent) {
+        var dotClass = agent.authenticated ? 'ok' : (agent.detail === 'unknown' ? 'unknown' : 'missing');
+        var item = makeItem(dotClass, agent.name, agent.detail);
+        item.addEventListener('click', function(e) { e.stopPropagation(); closeDropdown(); triggerAuth(agent.id); });
+        dropdown.appendChild(item);
+      });
+    }
+    var pkeys = Object.keys(providers);
+    if (pkeys.length > 0) {
+      if (agents.length > 0) appendSep();
+      appendHeader('Provider Keys');
+      pkeys.forEach(function(pid) {
+        var p = providers[pid];
+        var item = makeItem(p.hasKey ? 'ok' : 'missing', p.name || pid, p.hasKey ? p.apiKey : 'not set');
+        item.style.flexWrap = 'wrap';
+        item.addEventListener('click', function(e) { e.stopPropagation(); toggleEdit(pid); });
+        dropdown.appendChild(item);
+        if (editingProvider === pid) dropdown.appendChild(makeEditForm(pid));
       });
-      dropdown.appendChild(item);
+    }
+  }
+
+  function appendHeader(text) {
+    var h = document.createElement('div');
+    h.className = 'agent-auth-section-header';
+    h.textContent = text;
+    dropdown.appendChild(h);
+  }
+
+  function appendSep() {
+    var s = document.createElement('div');
+    s.style.cssText = 'height:1px;background:var(--color-border);margin:0.25rem 0;';
+    dropdown.appendChild(s);
+  }
+
+  function makeItem(dotClass, name, detail) {
+    var el = document.createElement('button');
+    el.className = 'agent-auth-item';
+    el.innerHTML = '<span class="agent-auth-dot ' + dotClass + '"></span><span>' + esc(name) +
+      '</span><span style="margin-left:auto;font-size:0.7rem;color:var(--color-text-secondary)">' + esc(detail) + '</span>';
+    return el;
+  }
+
+  function makeEditForm(pid) {
+    var form = document.createElement('div');
+    form.style.cssText = 'width:100%;padding:0.375rem 0.75rem;display:flex;gap:0.375rem;';
+    var input = document.createElement('input');
+    input.type = 'password'; input.placeholder = 'API key';
+    input.style.cssText = 'flex:1;min-width:0;padding:0.25rem 0.5rem;font-size:0.75rem;border:1px solid var(--color-border);border-radius:0.25rem;background:var(--color-bg-primary);color:var(--color-text-primary);outline:none;';
+    input.addEventListener('click', function(e) { e.stopPropagation(); });
+    var saveBtn = document.createElement('button');
+    saveBtn.textContent = 'Save';
+    saveBtn.style.cssText = 'padding:0.25rem 0.5rem;font-size:0.7rem;font-weight:600;background:var(--color-primary);color:white;border:none;border-radius:0.25rem;cursor:pointer;flex-shrink:0;';
+    saveBtn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      var key = input.value.trim();
+      if (!key) return;
+      saveBtn.disabled = true; saveBtn.textContent = '...';
+      saveProviderKey(pid, key);
     });
+    form.appendChild(input); form.appendChild(saveBtn);
+    setTimeout(function() { input.focus(); }, 50);
+    return form;
+  }
+
+  function toggleEdit(pid) { editingProvider = editingProvider === pid ? null : pid; renderDropdown(); }
+
+  function saveProviderKey(providerId, apiKey) {
+    fetch(BASE + '/api/auth/save-config', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ providerId: providerId, apiKey: apiKey, defaultModel: '' })
+    }).then(function(r) { return r.json(); }).then(function(data) {
+      if (data.success) { editingProvider = null; fetchProviderConfigs(); }
+    }).catch(function() { editingProvider = null; renderDropdown(); });
   }
 
   function toggleDropdown(e) {
     e.stopPropagation();
+    if (!dropdown.classList.contains('open')) { editingProvider = null; refresh(); }
     dropdown.classList.toggle('open');
   }
 
-  function closeDropdown() {
-    dropdown.classList.remove('open');
-  }
+  function closeDropdown() { dropdown.classList.remove('open'); editingProvider = null; }
 
   function triggerAuth(agentId) {
     if (authRunning) return;
     fetch(BASE + '/api/agents/' + agentId + '/auth', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: '{}'
-    })
-    .then(function(r) { return r.json(); })
-    .then(function(data) {
+      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}'
+    }).then(function(r) { return r.json(); }).then(function(data) {
       if (data.ok) {
-        authRunning = true;
-        showTerminalTab();
-        switchToTerminalView();
+        authRunning = true; showTerminalTab(); switchToTerminalView();
         var term = getTerminal();
-        if (term) {
-          term.clear();
-          term.writeln('\x1b[36m[authenticating ' + agentId + ']\x1b[0m\r\n');
+        if (term) { term.clear(); term.writeln('\x1b[36m[authenticating ' + agentId + ']\x1b[0m\r\n'); }
+        if (data.authUrl) {
+          window.open(data.authUrl, '_blank');
         }
       }
-    })
-    .catch(function() {});
+    }).catch(function() {});
   }
 
   function onWsMessage(e) {
     var data = e.detail;
     if (!data || data.conversationId !== AUTH_CONV_ID) return;
     if (data.type === 'script_started') {
-      authRunning = true;
-      showTerminalTab();
-      switchToTerminalView();
+      authRunning = true; showTerminalTab(); switchToTerminalView();
       var term = getTerminal();
-      if (term) {
-        term.clear();
-        term.writeln('\x1b[36m[authenticating ' + (data.agentId || '') + ']\x1b[0m\r\n');
-      }
+      if (term) { term.clear(); term.writeln('\x1b[36m[authenticating ' + (data.agentId || '') + ']\x1b[0m\r\n'); }
     } else if (data.type === 'script_output') {
       showTerminalTab();
       var term = getTerminal();
@@ -108,37 +162,20 @@
       var term = getTerminal();
       var msg = data.error ? data.error : ('exited with code ' + (data.code || 0));
       if (term) term.writeln('\r\n\x1b[90m[auth ' + msg + ']\x1b[0m');
-      setTimeout(fetchAuthStatus, 1000);
+      setTimeout(refresh, 1000);
     }
   }
 
-  function showTerminalTab() {
-    var tabBtn = document.getElementById('terminalTabBtn');
-    if (tabBtn) tabBtn.style.display = '';
-  }
-
+  function showTerminalTab() { var t = document.getElementById('terminalTabBtn'); if (t) t.style.display = ''; }
   function switchToTerminalView() {
     var bar = document.getElementById('viewToggleBar');
     if (!bar) return;
-    var termBtn = bar.querySelector('[data-view="terminal"]');
-    if (termBtn) termBtn.click();
-  }
-
-  function getTerminal() {
-    return window.scriptRunner ? window.scriptRunner.getTerminal() : null;
-  }
-
-  function escapeHtml(s) {
-    var d = document.createElement('div');
-    d.textContent = s;
-    return d.innerHTML;
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
+    var t = bar.querySelector('[data-view="terminal"]'); if (t) t.click();
   }
+  function getTerminal() { return window.scriptRunner ? window.scriptRunner.getTerminal() : null; }
+  function esc(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
 
-  window.agentAuth = { refresh: fetchAuthStatus };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+  window.agentAuth = { refresh: refresh };
 })();