agentgui 1.0.198 → 1.0.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.198",
+  "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 = '';
@@ -410,6 +524,46 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    const queueMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/queue$/);
+    if (queueMatch && req.method === 'GET') {
+      const conversationId = queueMatch[1];
+      const conv = queries.getConversation(conversationId);
+      if (!conv) { sendJSON(req, res, 404, { error: 'Conversation not found' }); return; }
+      const queue = messageQueues.get(conversationId) || [];
+      sendJSON(req, res, 200, { queue });
+      return;
+    }
+
+    const queueItemMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/queue\/([^/]+)$/);
+    if (queueItemMatch && req.method === 'DELETE') {
+      const conversationId = queueItemMatch[1];
+      const messageId = queueItemMatch[2];
+      const queue = messageQueues.get(conversationId);
+      if (!queue) { sendJSON(req, res, 404, { error: 'Queue not found' }); return; }
+      const index = queue.findIndex(q => q.messageId === messageId);
+      if (index === -1) { sendJSON(req, res, 404, { error: 'Queued message not found' }); return; }
+      queue.splice(index, 1);
+      if (queue.length === 0) messageQueues.delete(conversationId);
+      broadcastSync({ type: 'queue_status', conversationId, queueLength: queue?.length || 0, timestamp: Date.now() });
+      sendJSON(req, res, 200, { deleted: true });
+      return;
+    }
+
+    if (queueItemMatch && req.method === 'PATCH') {
+      const conversationId = queueItemMatch[1];
+      const messageId = queueItemMatch[2];
+      const body = await parseBody(req);
+      const queue = messageQueues.get(conversationId);
+      if (!queue) { sendJSON(req, res, 404, { error: 'Queue not found' }); return; }
+      const item = queue.find(q => q.messageId === messageId);
+      if (!item) { sendJSON(req, res, 404, { error: 'Queued message not found' }); return; }
+      if (body.content !== undefined) item.content = body.content;
+      if (body.agentId !== undefined) item.agentId = body.agentId;
+      broadcastSync({ type: 'queue_updated', conversationId, messageId, content: item.content, agentId: item.agentId, timestamp: Date.now() });
+      sendJSON(req, res, 200, { updated: true, item });
+      return;
+    }
+
     const messageMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/messages\/([^/]+)$/);
     if (messageMatch && req.method === 'GET') {
       const msg = queries.getMessage(messageMatch[2]);
@@ -620,6 +774,127 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    if (pathOnly === '/api/agents/auth-status' && req.method === 'GET') {
+      const statuses = discoveredAgents.map(agent => {
+        const status = { id: agent.id, name: agent.name, authenticated: false, detail: '' };
+        try {
+          if (agent.id === 'claude-code') {
+            const credFile = path.join(os.homedir(), '.claude', '.credentials.json');
+            if (fs.existsSync(credFile)) {
+              const creds = JSON.parse(fs.readFileSync(credFile, 'utf-8'));
+              if (creds.claudeAiOauth && creds.claudeAiOauth.expiresAt > Date.now()) {
+                status.authenticated = true;
+                status.detail = creds.claudeAiOauth.subscriptionType || 'authenticated';
+              } else {
+                status.detail = 'expired';
+              }
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else if (agent.id === 'gemini') {
+            const acctFile = path.join(os.homedir(), '.gemini', 'google_accounts.json');
+            if (fs.existsSync(acctFile)) {
+              const accts = JSON.parse(fs.readFileSync(acctFile, 'utf-8'));
+              if (accts.active) {
+                status.authenticated = true;
+                status.detail = accts.active;
+              } else {
+                status.detail = 'logged out';
+              }
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else if (agent.id === 'opencode') {
+            const out = execSync('opencode auth list 2>&1', { encoding: 'utf-8', timeout: 5000 });
+            const countMatch = out.match(/(\d+)\s+credentials?/);
+            if (countMatch && parseInt(countMatch[1], 10) > 0) {
+              status.authenticated = true;
+              status.detail = countMatch[1] + ' credential(s)';
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else {
+            status.detail = 'unknown';
+          }
+        } catch (e) {
+          status.detail = 'check failed';
+        }
+        return status;
+      });
+      sendJSON(req, res, 200, { agents: statuses });
+      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; }
+
+      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; }
+
+      const conversationId = '__agent_auth__';
+      if (activeScripts.has(conversationId)) {
+        sendJSON(req, res, 409, { error: 'Auth process already running' });
+        return;
+      }
+
+      const child = spawn(authCmd.cmd, authCmd.args, {
+        stdio: ['pipe', 'pipe', 'pipe'],
+        env: { ...process.env, FORCE_COLOR: '1' }
+      });
+      activeScripts.set(conversationId, { process: child, script: 'auth-' + agentId, startTime: Date.now() });
+      broadcastSync({ type: 'script_started', conversationId, script: 'auth-' + agentId, agentId, timestamp: Date.now() });
+
+      const onData = (stream) => (chunk) => {
+        broadcastSync({ type: 'script_output', conversationId, data: chunk.toString(), stream, timestamp: Date.now() });
+      };
+      child.stdout.on('data', onData('stdout'));
+      child.stderr.on('data', onData('stderr'));
+      child.on('error', (err) => {
+        activeScripts.delete(conversationId);
+        broadcastSync({ type: 'script_stopped', conversationId, code: 1, error: err.message, timestamp: Date.now() });
+      });
+      child.on('close', (code) => {
+        activeScripts.delete(conversationId);
+        broadcastSync({ type: 'script_stopped', conversationId, code: code || 0, timestamp: Date.now() });
+      });
+      sendJSON(req, res, 200, { ok: true, agentId, pid: child.pid });
+      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();
@@ -1382,7 +1657,7 @@ wss.on('connection', (ws, req) => {
 
 const BROADCAST_TYPES = new Set([
   'message_created', 'conversation_created', 'conversation_updated',
-  'conversations_updated', 'conversation_deleted', 'queue_status',
+  'conversations_updated', 'conversation_deleted', 'queue_status', 'queue_updated',
   'streaming_start', 'streaming_complete', 'streaming_error',
   'rate_limit_hit', 'rate_limit_clear',
   'script_started', 'script_stopped', 'script_output'

package/static/index.html

@@ -447,12 +447,12 @@
     .script-buttons { display: flex; gap: 0.25rem; align-items: center; }
     .header-icon-btn {
       display: flex; align-items: center; justify-content: center;
-      width: 32px; height: 32px; background: none; border: none;
+      width: 36px; height: 36px; background: none; border: none;
       border-radius: 0.375rem; cursor: pointer; color: var(--color-text-secondary);
       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: 16px; height: 16px; }
+    .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); }
@@ -460,6 +460,37 @@
     .script-stop-btn { color: var(--color-error); }
     .script-stop-btn:hover { background-color: rgba(239,68,68,0.1); color: var(--color-error); }
 
+    .agent-auth-btn { color: var(--color-text-secondary); position: relative; }
+    .agent-auth-btn.auth-ok { color: var(--color-success); }
+    .agent-auth-btn.auth-warn { color: var(--color-warning); }
+    .agent-auth-btn:hover { background-color: var(--color-bg-primary); }
+    .agent-auth-dropdown {
+      position: absolute; top: 100%; right: 0; z-index: 100;
+      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;
+    }
+    .agent-auth-dropdown.open { display: block; }
+    .agent-auth-item {
+      display: flex; align-items: center; gap: 0.5rem;
+      padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.8125rem;
+      color: var(--color-text-primary); border: none; background: none; width: 100%;
+      text-align: left;
+    }
+    .agent-auth-item:hover { background: var(--color-bg-primary); }
+    .agent-auth-dot {
+      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+    }
+    .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;
     }
@@ -2234,6 +2265,10 @@
               <svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="5" y="5" width="14" height="14" rx="1"></rect></svg>
             </button>
           </div>
+          <button class="header-icon-btn agent-auth-btn" id="agentAuthBtn" title="Agent authentication" aria-label="Agent authentication" style="display:none;">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+            <div class="agent-auth-dropdown" id="agentAuthDropdown"></div>
+          </button>
           <div class="status-badge">
             <div class="status-indicator" data-status="disconnected"></div>
             <span id="connectionStatus" data-status-indicator>Disconnected</span>
@@ -2378,6 +2413,7 @@
   <script type="module" src="/gm/js/voice.js"></script>
   <script defer src="/gm/js/features.js"></script>
   <script defer src="/gm/js/script-runner.js"></script>
+  <script defer src="/gm/js/agent-auth.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/agent-auth.js

@@ -0,0 +1,178 @@
+(function() {
+  var BASE = window.__BASE_URL || '';
+  var btn = document.getElementById('agentAuthBtn');
+  var dropdown = document.getElementById('agentAuthDropdown');
+  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) && !dropdown.contains(e.target)) closeDropdown();
+    });
+    window.addEventListener('conversation-selected', function() { refresh(); });
+    window.addEventListener('ws-message', onWsMessage);
+    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(); })
+      .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() {
+    btn.style.display = 'flex';
+    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 = '';
+    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));
+      });
+    }
+  }
+
+  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'); 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) {
+      if (data.ok) {
+        authRunning = true; showTerminalTab(); switchToTerminalView();
+        var term = getTerminal();
+        if (term) { term.clear(); term.writeln('\x1b[36m[authenticating ' + agentId + ']\x1b[0m\r\n'); }
+      }
+    }).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();
+      var term = getTerminal();
+      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();
+      if (term) term.write(data.data);
+    } else if (data.type === 'script_stopped') {
+      authRunning = false;
+      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(refresh, 1000);
+    }
+  }
+
+  function showTerminalTab() { var t = document.getElementById('terminalTabBtn'); if (t) t.style.display = ''; }
+  function switchToTerminalView() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+    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; }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+  window.agentAuth = { refresh: refresh };
+})();

package/static/js/client.js

@@ -372,6 +372,9 @@ class AgentGUIClient {
         case 'queue_status':
           this.handleQueueStatus(data);
           break;
+        case 'queue_updated':
+          this.handleQueueUpdated(data);
+          break;
         case 'rate_limit_hit':
           this.handleRateLimitHit(data);
           break;
@@ -478,7 +481,7 @@ class AgentGUIClient {
                 const bFrag = document.createDocumentFragment();
                 sList.forEach(chunk => {
                   if (!chunk.block?.type) return;
-                  const el = this.renderer.renderBlock(chunk.block, chunk);
+                  const el = this.renderer.renderBlock(chunk.block, chunk, bFrag);
                   if (!el) return;
                   if (chunk.block.type === 'tool_result') {
                     const lastInFrag = bFrag.lastElementChild;
@@ -699,21 +702,68 @@ class AgentGUIClient {
 
   handleQueueStatus(data) {
     if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.fetchAndRenderQueue(data.conversationId);
+  }
+
+  handleQueueUpdated(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.fetchAndRenderQueue(data.conversationId);
+  }
 
+  async fetchAndRenderQueue(conversationId) {
     const outputEl = document.querySelector('.conversation-messages');
     if (!outputEl) return;
 
-    let queueEl = outputEl.querySelector('.queue-indicator');
-    if (data.queueLength > 0) {
+    try {
+      const response = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue`);
+      const { queue } = await response.json();
+
+      let queueEl = outputEl.querySelector('.queue-indicator');
+      if (!queue || queue.length === 0) {
+        if (queueEl) queueEl.remove();
+        return;
+      }
+
       if (!queueEl) {
         queueEl = document.createElement('div');
         queueEl.className = 'queue-indicator';
-        queueEl.style.cssText = 'padding:0.5rem 1rem;margin:0.5rem 0;border-radius:0.375rem;background:var(--color-warning);color:#000;font-size:0.875rem;text-align:center;';
         outputEl.appendChild(queueEl);
       }
-      queueEl.textContent = `${data.queueLength} message${data.queueLength > 1 ? 's' : ''} queued`;
-    } else if (queueEl) {
-      queueEl.remove();
+
+      queueEl.innerHTML = queue.map((q, i) => `
+        <div class="queue-item" data-message-id="${q.messageId}" style="padding:0.5rem 1rem;margin:0.5rem 0;border-radius:0.375rem;background:var(--color-warning);color:#000;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem;">
+          <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${i + 1}. ${this.escapeHtml(q.content)}</span>
+          <button class="queue-edit-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Edit</button>
+          <button class="queue-delete-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Delete</button>
+        </div>
+      `).join('');
+
+      queueEl.querySelectorAll('.queue-delete-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          const index = parseInt(e.target.dataset.index);
+          const msgId = queue[index].messageId;
+          if (confirm('Delete this queued message?')) {
+            await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${msgId}`, { method: 'DELETE' });
+          }
+        });
+      });
+
+      queueEl.querySelectorAll('.queue-edit-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          const index = parseInt(e.target.dataset.index);
+          const q = queue[index];
+          const newContent = prompt('Edit message:', q.content);
+          if (newContent !== null && newContent !== q.content) {
+            fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${q.messageId}`, {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ content: newContent })
+            });
+          }
+        });
+      });
+    } catch (err) {
+      console.error('Failed to fetch queue:', err);
     }
   }
 
@@ -1160,8 +1210,8 @@ class AgentGUIClient {
     if (!streamingEl) return;
     const blocksEl = streamingEl.querySelector('.streaming-blocks');
     if (!blocksEl) return;
-    const element = this.renderer.renderBlock(chunk.block, chunk);
-    if (!element) return;
+    const element = this.renderer.renderBlock(chunk.block, chunk, blocksEl);
+    if (!element) { this.scrollToBottom(); return; }
     if (chunk.block.type === 'tool_result') {
       const matchById = chunk.block.tool_use_id && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${chunk.block.tool_use_id}"]`);
       const lastEl = blocksEl.lastElementChild;
@@ -1187,8 +1237,8 @@ class AgentGUIClient {
       const blocksEl = streamingEl.querySelector('.streaming-blocks');
       if (!blocksEl) continue;
       for (const chunk of groups[sid]) {
-        const el = this.renderer.renderBlock(chunk.block, chunk);
-        if (!el) continue;
+        const el = this.renderer.renderBlock(chunk.block, chunk, blocksEl);
+        if (!el) { appended = true; continue; }
         if (chunk.block.type === 'tool_result') {
           const matchById = chunk.block.tool_use_id && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${chunk.block.tool_use_id}"]`);
           const lastEl = blocksEl.lastElementChild;
@@ -1271,7 +1321,6 @@ class AgentGUIClient {
    */
   disableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = true;
-    if (this.ui.agentSelector) this.ui.agentSelector.disabled = true;
   }
 
   /**
@@ -1279,7 +1328,6 @@ class AgentGUIClient {
    */
   enableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = false;
-    if (this.ui.agentSelector) this.ui.agentSelector.disabled = false;
   }
 
   /**
@@ -1501,7 +1549,7 @@ class AgentGUIClient {
             const blockFrag = document.createDocumentFragment();
             sessionChunkList.forEach(chunk => {
               if (!chunk.block?.type) return;
-              const element = this.renderer.renderBlock(chunk.block, chunk);
+              const element = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
               if (!element) return;
               if (chunk.block.type === 'tool_result') {
                 const lastInFrag = blockFrag.lastElementChild;

package/static/js/streaming-renderer.js

@@ -328,13 +328,13 @@ class StreamingRenderer {
   /**
    * Render Claude message blocks with beautiful styling
    */
-  renderBlock(block, context = {}) {
+  renderBlock(block, context = {}, targetContainer = null) {
     if (!block || !block.type) return null;
 
     try {
       switch (block.type) {
         case 'text':
-          return this.renderBlockText(block, context);
+          return this.renderBlockText(block, context, targetContainer);
         case 'code':
           return this.renderBlockCode(block, context);
         case 'thinking':
@@ -363,7 +363,7 @@ class StreamingRenderer {
   /**
    * Render text block with semantic HTML
    */
-  renderBlockText(block, context) {
+  renderBlockText(block, context, targetContainer = null) {
     const text = block.text || '';
     const isHtml = this.containsHtmlTags(text);
     const cached = this.renderCache.get(text);
@@ -373,7 +373,8 @@ class StreamingRenderer {
       this.renderCache.set(text, html);
     }
 
-    const lastChild = this.outputContainer && this.outputContainer.lastElementChild;
+    const container = targetContainer || this.outputContainer;
+    const lastChild = container && container.lastElementChild;
     if (lastChild && lastChild.classList.contains('block-text') && !isHtml && !lastChild.classList.contains('html-content')) {
       lastChild.innerHTML += html;
       return null;