agentgui 1.0.199 → 1.0.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.199",
+  "version": "1.0.200",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -180,6 +180,120 @@ function discoverAgents() {
 
 const discoveredAgents = discoverAgents();
 
+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)) {
+    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 = '';
@@ -755,6 +869,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,154 @@
   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'); }
       }
-    })
-    .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 +159,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 };
 })();