agentgui 1.0.413 → 1.0.415

package/lib/ws-handlers-session.js

@@ -97,7 +97,20 @@ export function register(router, deps) {
     return data;
   });
 
-  router.handle('agent.ls', () => ({ agents: discoveredAgents }));
+  router.handle('agent.ls', () => {
+    // Get local agents only (avoid external HTTP calls in WebSocket to prevent recursion)
+    const localAgents = discoveredAgents.map(agent => ({
+      id: agent.id,
+      name: agent.name,
+      icon: agent.icon,
+      path: agent.path,
+      protocol: agent.protocol || 'unknown',
+      description: agent.description || '',
+      status: 'available'
+    }));
+    
+    return { agents: localAgents };
+  });
 
   router.handle('agent.get', (p) => {
     const a = discoveredAgents.find(x => x.id === p.id);

package/package.json

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

package/server.js

@@ -342,31 +342,96 @@ function findCommand(cmd) {
   }
 }
 
+async function queryACPServerAgents(baseUrl) {
+  try {
+    // Ensure correct endpoint format (handle both /api and /api/ cases)
+    const endpoint = baseUrl.endsWith('/') ? `${baseUrl}agents/search` : `${baseUrl}/agents/search`;
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({}),
+    });
+    
+    if (!response.ok) {
+      console.error(`Failed to query ACP agents from ${baseUrl}: ${response.status}`);
+      return [];
+    }
+    
+    const data = await response.json();
+    if (!data.agents || !Array.isArray(data.agents)) {
+      console.error(`Invalid agents response from ${baseUrl}`);
+      return [];
+    }
+    
+    // Convert ACP agent format to our internal format
+    return data.agents.map(agent => ({
+      id: agent.agent_id || agent.id,
+      name: agent.metadata?.ref?.name || agent.name || 'Unknown Agent',
+      icon: agent.metadata?.ref?.name?.charAt(0) || 'A',
+      path: baseUrl,
+      protocol: 'acp',
+      description: agent.metadata?.description || '',
+    }));
+  } catch (error) {
+    console.error(`Error querying ACP server ${baseUrl}:`, error.message);
+    return [];
+  }
+}
+
 function discoverAgents() {
   const agents = [];
   const binaries = [
-    { cmd: 'claude', id: 'claude-code', name: 'Claude Code', icon: 'C' },
-    { cmd: 'opencode', id: 'opencode', name: 'OpenCode', icon: 'O' },
-    { cmd: 'gemini', id: 'gemini', name: 'Gemini CLI', icon: 'G' },
-    { cmd: 'kilo', id: 'kilo', name: 'Kilo Code', icon: 'K' },
-    { cmd: 'goose', id: 'goose', name: 'Goose', icon: 'g' },
-    { cmd: 'openhands', id: 'openhands', name: 'OpenHands', icon: 'H' },
-    { cmd: 'augment', id: 'augment', name: 'Augment Code', icon: 'A' },
-    { cmd: 'cline', id: 'cline', name: 'Cline', icon: 'c' },
-    { cmd: 'kimi', id: 'kimi', name: 'Kimi CLI', icon: 'K' },
-    { cmd: 'qwen-code', id: 'qwen', name: 'Qwen Code', icon: 'Q' },
-    { cmd: 'codex', id: 'codex', name: 'Codex CLI', icon: 'X' },
-    { cmd: 'mistral-vibe', id: 'mistral', name: 'Mistral Vibe', icon: 'M' },
-    { cmd: 'kiro', id: 'kiro', name: 'Kiro CLI', icon: 'k' },
-    { cmd: 'fast-agent', id: 'fast-agent', name: 'fast-agent', icon: 'F' },
+    { cmd: 'claude', id: 'claude-code', name: 'Claude Code', icon: 'C', protocol: 'cli' },
+    { cmd: 'opencode', id: 'opencode', name: 'OpenCode', icon: 'O', protocol: 'acp' },
+    { cmd: 'gemini', id: 'gemini', name: 'Gemini CLI', icon: 'G', protocol: 'acp' },
+    { cmd: 'kilo', id: 'kilo', name: 'Kilo Code', icon: 'K', protocol: 'acp' },
+    { cmd: 'goose', id: 'goose', name: 'Goose', icon: 'g', protocol: 'acp' },
+    { cmd: 'openhands', id: 'openhands', name: 'OpenHands', icon: 'H', protocol: 'acp' },
+    { cmd: 'augment', id: 'augment', name: 'Augment Code', icon: 'A', protocol: 'acp' },
+    { cmd: 'cline', id: 'cline', name: 'Cline', icon: 'c', protocol: 'acp' },
+    { cmd: 'kimi', id: 'kimi', name: 'Kimi CLI', icon: 'K', protocol: 'acp' },
+    { cmd: 'qwen-code', id: 'qwen', name: 'Qwen Code', icon: 'Q', protocol: 'acp' },
+    { cmd: 'codex', id: 'codex', name: 'Codex CLI', icon: 'X', protocol: 'acp' },
+    { cmd: 'mistral-vibe', id: 'mistral', name: 'Mistral Vibe', icon: 'M', protocol: 'acp' },
+    { cmd: 'kiro', id: 'kiro', name: 'Kiro CLI', icon: 'k', protocol: 'acp' },
+    { cmd: 'fast-agent', id: 'fast-agent', name: 'fast-agent', icon: 'F', protocol: 'acp' },
   ];
   for (const bin of binaries) {
     const result = findCommand(bin.cmd);
-    if (result) agents.push({ id: bin.id, name: bin.name, icon: bin.icon, path: result });
+    if (result) agents.push({ 
+      id: bin.id, 
+      name: bin.name, 
+      icon: bin.icon, 
+      path: result, 
+      protocol: bin.protocol 
+    });
   }
   return agents;
 }
 
+// Function to discover agents from external ACP servers
+async function discoverExternalACPServers() {
+  // Default ACP servers to query (excluding local server to prevent recursion)
+  const acpServers = [
+    'http://localhost:8080',         // Common default ACP port
+  ];
+  
+  const externalAgents = [];
+  for (const serverUrl of acpServers) {
+    try {
+      console.log(`Querying ACP agents from: ${serverUrl}`);
+      const agents = await queryACPServerAgents(serverUrl);
+      externalAgents.push(...agents);
+    } catch (error) {
+      console.error(`Failed to query ${serverUrl}:`, error.message);
+    }
+  }
+  
+  return externalAgents;
+}
+
 const discoveredAgents = discoverAgents();
 initializeDescriptors(discoveredAgents);
 
@@ -569,6 +634,11 @@ async function getModelsForAgent(agentId) {
 
   // Fallback default models for agents that fail to retrieve models
   const fallbackModels = {
+    'claude-code': [
+      { id: 'haiku', label: 'Haiku (Default)' },
+      { id: 'sonnet', label: 'Sonnet' },
+      { id: 'opus', label: 'Opus' }
+    ],
     'gemini': [
       { id: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro' },
       { id: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' },
@@ -585,15 +655,65 @@ async function getModelsForAgent(agentId) {
       { id: 'claude-sonnet-4', label: 'Claude Sonnet 4' },
       { id: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
       { id: 'gpt-4', label: 'GPT-4' }
+    ],
+    'goose': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'goose-pro', label: 'Goose Pro' }
+    ],
+    'openhands': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'openhands-1', label: 'OpenHands 1' }
+    ],
+    'augment': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'augment-pro', label: 'Augment Pro' }
+    ],
+    'cline': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'cline-1', label: 'Cline 1' }
+    ],
+    'kimi': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'kimi-pro', label: 'Kimi Pro' }
+    ],
+    'qwen': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'qwen-7b', label: 'Qwen 7B' },
+      { id: 'qwen-14b', label: 'Qwen 14B' }
+    ],
+    'codex': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'code-davinci-002', label: 'Code Davinci 002' },
+      { id: 'code-cushman-001', label: 'Code Cushman 001' }
+    ],
+    'mistral': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'mistral-small', label: 'Mistral Small' },
+      { id: 'mistral-medium', label: 'Mistral Medium' },
+      { id: 'mistral-large', label: 'Mistral Large' }
+    ],
+    'kiro': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'kiro-1', label: 'Kiro 1' }
+    ],
+    'fast-agent': [
+      { id: 'default', label: 'Default Model' },
+      { id: 'fast-agent-1', label: 'Fast Agent 1' }
     ]
   };
 
   if (fallbackModels[agentId]) {
-    modelCache.set(agentId, { models: fallbackModels[agentId], timestamp: Date.now() });
-    return fallbackModels[agentId];
+    const models = fallbackModels[agentId];
+    modelCache.set(agentId, { models, timestamp: Date.now() });
+    return models;
   }
 
-  return [];
+  // Default fallback for any other agent
+  const defaultFallback = [
+    { id: 'default', label: 'Default Model' }
+  ];
+  modelCache.set(agentId, { models: defaultFallback, timestamp: Date.now() });
+  return defaultFallback;
 }
 
 const GEMINI_SCOPES = [
@@ -1892,8 +2012,31 @@ const server = http.createServer(async (req, res) => {
 
     if (pathOnly === '/api/agents/search' && req.method === 'POST') {
       const body = await parseBody(req);
-      const result = queries.searchAgents(discoveredAgents, body);
-      sendJSON(req, res, 200, result);
+      try {
+        // Get local agents
+        const localResult = queries.searchAgents(discoveredAgents, body);
+        
+        // Get external agents from ACP servers
+        const externalAgents = await discoverExternalACPServers();
+        const externalResult = queries.searchAgents(externalAgents, body);
+        
+        // Combine results
+        const combinedAgents = [...localResult.agents, ...externalResult.agents];
+        const total = localResult.total + externalResult.total;
+        const hasMore = localResult.hasMore || externalResult.hasMore;
+        
+        sendJSON(req, res, 200, {
+          agents: combinedAgents,
+          total,
+          limit: body.limit || 50,
+          offset: body.offset || 0,
+          hasMore,
+        });
+      } catch (error) {
+        console.error('Error searching agents:', error);
+        const result = queries.searchAgents(discoveredAgents, body);
+        sendJSON(req, res, 200, result);
+      }
       return;
     }
 

package/static/index.html

@@ -804,25 +804,35 @@
       align-items: flex-end;
     }
 
-    .agent-selector {
-      padding: 0.5rem;
-      border: none;
-      border-radius: 0.375rem;
-      background-color: var(--color-bg-secondary);
-      color: var(--color-text-primary);
-      font-size: 0.8rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      width: auto;
-      min-width: 80px;
-      max-width: 200px;
-    }
-
-    .agent-selector:disabled, .model-selector:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background-color: var(--color-bg-secondary);
-    }
+    .agent-selector {
+      padding: 0.5rem;
+      border: none;
+      border-radius: 0.375rem;
+      background-color: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      font-size: 0.8rem;
+      cursor: pointer;
+      flex-shrink: 0;
+      width: auto;
+      min-width: 80px;
+      max-width: 200px;
+    }
+
+    .cli-agent-selector {
+      /* CLI agents have a different background color */
+      background-color: var(--color-bg-secondary);
+    }
+
+    .acp-agent-selector {
+      /* ACP agents have a different background color */
+      background-color: var(--color-bg-secondary);
+    }
+
+    .agent-selector:disabled, .model-selector:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--color-bg-secondary);
+    }
 
     .model-selector {
       padding: 0.5rem;
@@ -3167,17 +3177,18 @@
       </div>
 
       <!-- Input area: fixed at bottom -->
-      <div class="input-section">
-        <div class="input-wrapper">
-          <select class="agent-selector" data-agent-selector title="Select agent"></select>
-          <select class="model-selector" data-model-selector title="Select model" data-empty="true"></select>
-          <textarea
-            class="message-textarea"
-            data-message-input
-            placeholder="Message AgentGUI... (Ctrl+Enter to send)"
-            aria-label="Message input"
-            rows="1"
-          ></textarea>
+      <div class="input-section">
+        <div class="input-wrapper">
+          <select class="agent-selector cli-agent-selector" data-cli-agent-selector title="Select CLI agent"></select>
+          <select class="agent-selector acp-agent-selector" data-acp-agent-selector title="Select ACP agent"></select>
+          <select class="model-selector" data-model-selector title="Select model" data-empty="true"></select>
+          <textarea
+            class="message-textarea"
+            data-message-input
+            placeholder="Message AgentGUI... (Ctrl+Enter to send)"
+            aria-label="Message input"
+            rows="1"
+          ></textarea>
           <button class="inject-btn" id="injectBtn" title="Inject instructions into running agent" aria-label="Inject instructions">
             <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
               <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>

package/static/js/client.js

@@ -341,30 +341,50 @@ class AgentGUIClient {
     });
   }
 
-  /**
-   * Setup UI elements
-   */
-  setupUI() {
-    const container = document.getElementById(this.config.containerId);
-    if (!container) {
-      throw new Error(`Container not found: ${this.config.containerId}`);
-    }
-
-    // Get references to key UI elements
-    this.ui.statusIndicator = document.querySelector('[data-status-indicator]');
-    this.ui.messageInput = document.querySelector('[data-message-input]');
-    this.ui.sendButton = document.querySelector('[data-send-button]');
-    this.ui.agentSelector = document.querySelector('[data-agent-selector]');
-    this.ui.modelSelector = document.querySelector('[data-model-selector]');
-
-    if (this.ui.agentSelector) {
-      this.ui.agentSelector.addEventListener('change', () => {
-        if (!this._agentLocked) {
-          this.loadModelsForAgent(this.ui.agentSelector.value);
-          this.saveAgentAndModelToConversation();
-        }
-      });
-    }
+  /**
+   * Setup UI elements
+   */
+  setupUI() {
+    const container = document.getElementById(this.config.containerId);
+    if (!container) {
+      throw new Error(`Container not found: ${this.config.containerId}`);
+    }
+
+    // Get references to key UI elements
+    this.ui.statusIndicator = document.querySelector('[data-status-indicator]');
+    this.ui.messageInput = document.querySelector('[data-message-input]');
+    this.ui.sendButton = document.querySelector('[data-send-button]');
+    this.ui.cliAgentSelector = document.querySelector('[data-cli-agent-selector]');
+    this.ui.acpAgentSelector = document.querySelector('[data-acp-agent-selector]');
+    this.ui.modelSelector = document.querySelector('[data-model-selector]');
+
+    if (this.ui.cliAgentSelector) {
+      this.ui.cliAgentSelector.addEventListener('change', () => {
+        if (!this._agentLocked) {
+          this.loadModelsForAgent(this.ui.cliAgentSelector.value);
+          this.saveAgentAndModelToConversation();
+          // Hide ACP selector when CLI is selected
+          if (this.ui.acpAgentSelector) {
+            this.ui.acpAgentSelector.value = '';
+            this.ui.acpAgentSelector.style.display = 'none';
+          }
+        }
+      });
+    }
+
+    if (this.ui.acpAgentSelector) {
+      this.ui.acpAgentSelector.addEventListener('change', () => {
+        if (!this._agentLocked) {
+          this.loadModelsForAgent(this.ui.acpAgentSelector.value);
+          this.saveAgentAndModelToConversation();
+          // Hide CLI selector when ACP is selected
+          if (this.ui.cliAgentSelector) {
+            this.ui.cliAgentSelector.value = '';
+            this.ui.cliAgentSelector.style.display = 'none';
+          }
+        }
+      });
+    }
 
     if (this.ui.modelSelector) {
       this.ui.modelSelector.addEventListener('change', () => {
@@ -1244,12 +1264,12 @@ class AgentGUIClient {
     }
   }
 
-  async startExecution() {
-    const prompt = this.ui.messageInput?.value || '';
-    const conv = this.state.currentConversation;
-    const isNewConversation = conv && !conv.messageCount && !this.state.streamingConversations.has(conv.id);
-    const agentId = (isNewConversation ? this.ui.agentSelector?.value : null) || conv?.agentType || this.ui.agentSelector?.value || 'claude-code';
-    const model = this.ui.modelSelector?.value || null;
+  async startExecution() {
+    const prompt = this.ui.messageInput?.value || '';
+    const conv = this.state.currentConversation;
+    const isNewConversation = conv && !conv.messageCount && !this.state.streamingConversations.has(conv.id);
+    const agentId = (isNewConversation ? this.getCurrentAgent() : null) || conv?.agentType || this.getCurrentAgent() || 'claude-code';
+    const model = this.ui.modelSelector?.value || null;
 
     if (!prompt.trim()) {
       this.showError('Please enter a prompt');
@@ -1816,29 +1836,53 @@ class AgentGUIClient {
   /**
    * Load agents
    */
-  async loadAgents() {
-    return this._dedupedFetch('loadAgents', async () => {
-      try {
-        const { agents } = await window.wsClient.rpc('agent.ls');
-        this.state.agents = agents;
-
-        if (this.ui.agentSelector) {
-          this.ui.agentSelector.innerHTML = agents
-            .map(agent => `<option value="${agent.id}">${agent.name}</option>`)
-            .join('');
-        }
-
-        window.dispatchEvent(new CustomEvent('agents-loaded', { detail: { agents } }));
-        if (agents.length > 0 && !this._agentLocked) {
-          this.loadModelsForAgent(agents[0].id);
-        }
-        return agents;
-      } catch (error) {
-        console.error('Failed to load agents:', error);
-        return [];
-      }
-    });
-  }
+  async loadAgents() {
+    return this._dedupedFetch('loadAgents', async () => {
+      try {
+        const { agents } = await window.wsClient.rpc('agent.ls');
+        this.state.agents = agents;
+
+        // Split agents by protocol
+        const cliAgents = agents.filter(agent => agent.protocol === 'cli');
+        const acpAgents = agents.filter(agent => agent.protocol === 'acp');
+
+        // Populate CLI agent selector
+        if (this.ui.cliAgentSelector) {
+          if (cliAgents.length > 0) {
+            this.ui.cliAgentSelector.innerHTML = cliAgents
+              .map(agent => `<option value="${agent.id}">${agent.name}</option>`)
+              .join('');
+            this.ui.cliAgentSelector.style.display = 'inline-block';
+          } else {
+            this.ui.cliAgentSelector.innerHTML = '';
+            this.ui.cliAgentSelector.style.display = 'none';
+          }
+        }
+
+        // Populate ACP agent selector
+        if (this.ui.acpAgentSelector) {
+          if (acpAgents.length > 0) {
+            this.ui.acpAgentSelector.innerHTML = acpAgents
+              .map(agent => `<option value="${agent.id}">${agent.name}</option>`)
+              .join('');
+            this.ui.acpAgentSelector.style.display = 'inline-block';
+          } else {
+            this.ui.acpAgentSelector.innerHTML = '';
+            this.ui.acpAgentSelector.style.display = 'none';
+          }
+        }
+
+        window.dispatchEvent(new CustomEvent('agents-loaded', { detail: { agents } }));
+        if (agents.length > 0 && !this._agentLocked) {
+          this.loadModelsForAgent(agents[0].id);
+        }
+        return agents;
+      } catch (error) {
+        console.error('Failed to load agents:', error);
+        return [];
+      }
+    });
+  }
 
   async checkSpeechStatus() {
     try {
@@ -1890,48 +1934,105 @@ class AgentGUIClient {
       .join('');
   }
 
-  lockAgentAndModel(agentId, model) {
-    this._agentLocked = true;
-    if (this.ui.agentSelector) {
-      this.ui.agentSelector.value = agentId;
-      this.ui.agentSelector.disabled = true;
-    }
-    this.loadModelsForAgent(agentId).then(() => {
-      if (this.ui.modelSelector && model) {
-        this.ui.modelSelector.value = model;
-      }
-    });
-  }
-
-  unlockAgentAndModel() {
-    this._agentLocked = false;
-    if (this.ui.agentSelector) {
-      this.ui.agentSelector.disabled = false;
-    }
-  }
+  lockAgentAndModel(agentId, model) {
+    this._agentLocked = true;
+    
+    // Find the agent to determine protocol
+    const agent = this.state.agents.find(a => a.id === agentId);
+    
+    if (agent) {
+      if (agent.protocol === 'cli') {
+        if (this.ui.cliAgentSelector) {
+          this.ui.cliAgentSelector.value = agentId;
+          this.ui.cliAgentSelector.disabled = true;
+        }
+        if (this.ui.acpAgentSelector) {
+          this.ui.acpAgentSelector.value = '';
+          this.ui.acpAgentSelector.disabled = true;
+          this.ui.acpAgentSelector.style.display = 'none';
+        }
+      } else {
+        if (this.ui.acpAgentSelector) {
+          this.ui.acpAgentSelector.value = agentId;
+          this.ui.acpAgentSelector.disabled = true;
+        }
+        if (this.ui.cliAgentSelector) {
+          this.ui.cliAgentSelector.value = '';
+          this.ui.cliAgentSelector.disabled = true;
+          this.ui.cliAgentSelector.style.display = 'none';
+        }
+      }
+    }
+    
+    this.loadModelsForAgent(agentId).then(() => {
+      if (this.ui.modelSelector && model) {
+        this.ui.modelSelector.value = model;
+      }
+    });
+  }
+
+  unlockAgentAndModel() {
+    this._agentLocked = false;
+    if (this.ui.cliAgentSelector) {
+      this.ui.cliAgentSelector.disabled = false;
+    }
+    if (this.ui.acpAgentSelector) {
+      this.ui.acpAgentSelector.disabled = false;
+    }
+    
+    // Show both selectors again when unlocking
+    if (this.ui.cliAgentSelector && this.state.agents.some(a => a.protocol === 'cli')) {
+      this.ui.cliAgentSelector.style.display = 'inline-block';
+    }
+    if (this.ui.acpAgentSelector && this.state.agents.some(a => a.protocol === 'acp')) {
+      this.ui.acpAgentSelector.style.display = 'inline-block';
+    }
+  }
 
   /**
    * Apply agent and model selection based on conversation state
    * Consolidates duplicate logic for cached and fresh conversation loads
    */
-  applyAgentAndModelSelection(conversation, hasActivity) {
-    const agentId = conversation.agentId || conversation.agentType || 'claude-code';
-    const model = conversation.model || null;
-
-    if (hasActivity) {
-      this.lockAgentAndModel(agentId, model);
-    } else {
-      this.unlockAgentAndModel();
-      if (this.ui.agentSelector) {
-        this.ui.agentSelector.value = agentId;
-      }
-      this.loadModelsForAgent(agentId).then(() => {
-        if (model && this.ui.modelSelector) {
-          this.ui.modelSelector.value = model;
-        }
-      });
-    }
-  }
+  applyAgentAndModelSelection(conversation, hasActivity) {
+    const agentId = conversation.agentId || conversation.agentType || 'claude-code';
+    const model = conversation.model || null;
+
+    if (hasActivity) {
+      this.lockAgentAndModel(agentId, model);
+    } else {
+      this.unlockAgentAndModel();
+      // Find the agent to determine protocol
+      const agent = this.state.agents.find(a => a.id === agentId);
+      
+      if (agent) {
+        if (agent.protocol === 'cli') {
+          if (this.ui.cliAgentSelector) {
+            this.ui.cliAgentSelector.value = agentId;
+            this.ui.cliAgentSelector.style.display = 'inline-block';
+          }
+          if (this.ui.acpAgentSelector) {
+            this.ui.acpAgentSelector.value = '';
+            this.ui.acpAgentSelector.style.display = 'none';
+          }
+        } else {
+          if (this.ui.acpAgentSelector) {
+            this.ui.acpAgentSelector.value = agentId;
+            this.ui.acpAgentSelector.style.display = 'inline-block';
+          }
+          if (this.ui.cliAgentSelector) {
+            this.ui.cliAgentSelector.value = '';
+            this.ui.cliAgentSelector.style.display = 'none';
+          }
+        }
+      }
+      
+      this.loadModelsForAgent(agentId).then(() => {
+        if (model && this.ui.modelSelector) {
+          this.ui.modelSelector.value = model;
+        }
+      });
+    }
+  }
 
   /**
    * Load conversations
@@ -2493,12 +2594,25 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Get application state
-   */
-  getState() {
-    return { ...this.state };
-  }
+  /**
+   * Get current selected agent
+   */
+  getCurrentAgent() {
+    if (this.ui.cliAgentSelector?.value) {
+      return this.ui.cliAgentSelector.value;
+    }
+    if (this.ui.acpAgentSelector?.value) {
+      return this.ui.acpAgentSelector.value;
+    }
+    return 'claude-code';
+  }
+
+  /**
+   * Get current selected model
+   */
+  getCurrentModel() {
+    return this.ui.modelSelector?.value || null;
+  }
 
   /**
    * Get metrics

package/static/js/terminal.js

@@ -1,106 +1,135 @@
-(function() {
-  var ws = null;
-  var term = null;
-  var fitAddon = null;
-  var termActive = false;
-  var BASE = window.__BASE_URL || '';
-
-  function getWsUrl() {
-    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    return proto + '//' + location.host + BASE + '/sync';
-  }
-
-  function ensureTerm() {
-    var output = document.getElementById('terminalOutput');
-    if (!output) return false;
-    if (term) return true;
-    if (!window.Terminal || !window.FitAddon) return false;
-
-    term = new Terminal({
-      cursorBlink: true,
-      fontSize: 14,
-      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      theme: {
-        background: '#0d1117',
-        foreground: '#e6edf3',
-        cursor: '#e6edf3',
-        selectionBackground: '#3b4455'
-      },
-      convertEol: false,
-      scrollback: 5000
-    });
-    fitAddon = new FitAddon.FitAddon();
-    term.loadAddon(fitAddon);
-    output.innerHTML = '';
-    term.open(output);
-    fitAddon.fit();
-
-    term.onData(function(data) {
-      if (ws && ws.readyState === WebSocket.OPEN) {
-        var encoded = btoa(unescape(encodeURIComponent(data)));
-        ws.send(JSON.stringify({ type: 'terminal_input', data: encoded }));
-      }
-    });
-
-    window.addEventListener('resize', function() {
-      if (fitAddon) try { fitAddon.fit(); } catch(_) {}
-    });
-    return true;
-  }
-
-  function connectAndStart() {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({ type: 'terminal_start', cwd: window.__STARTUP_CWD || undefined }));
-      return;
-    }
-    ws = new WebSocket(getWsUrl());
-    ws.onopen = function() {
-      ws.send(JSON.stringify({ type: 'terminal_start', cwd: window.__STARTUP_CWD || undefined }));
-    };
-    ws.onmessage = function(e) {
-      try {
-        var msg = JSON.parse(e.data);
-        if (msg.type === 'terminal_output' && term) {
-          var raw = msg.encoding === 'base64'
-            ? decodeURIComponent(escape(atob(msg.data)))
-            : msg.data;
-          term.write(raw);
-        } else if (msg.type === 'terminal_exit' && term) {
-          term.write('\r\n[Process exited with code ' + msg.code + ']\r\n');
-          if (termActive) setTimeout(connectAndStart, 2000);
-        }
-      } catch(_) {}
-    };
-    ws.onclose = function() {
-      if (termActive) setTimeout(connectAndStart, 2000);
-    };
-  }
-
-  function startTerminal() {
-    if (!ensureTerm()) {
-      setTimeout(startTerminal, 200);
-      return;
-    }
-    termActive = true;
-    connectAndStart();
-    setTimeout(function() { if (fitAddon) try { fitAddon.fit(); } catch(_) {} }, 100);
-  }
-
-  function stopTerminal() {
-    termActive = false;
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({ type: 'terminal_stop' }));
-    }
-  }
-
-  window.addEventListener('view-switched', function(e) {
-    if (e.detail.view === 'terminal') {
-      startTerminal();
-    } else if (termActive) {
-      stopTerminal();
-    }
-  });
-
+(function() {
+  var ws = null;
+  var term = null;
+  var fitAddon = null;
+  var termActive = false;
+  var BASE = window.__BASE_URL || '';
+
+  function getWsUrl() {
+    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return proto + '//' + location.host + BASE + '/sync';
+  }
+
+  function ensureTerm() {
+    var output = document.getElementById('terminalOutput');
+    if (!output) return false;
+    if (term) return true;
+    if (!window.Terminal || !window.FitAddon) return false;
+
+    term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      theme: {
+        background: '#0d1117',
+        foreground: '#e6edf3',
+        cursor: '#e6edf3',
+        selectionBackground: '#3b4455'
+      },
+      convertEol: false,
+      scrollback: 5000
+    });
+    fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    output.innerHTML = '';
+    term.open(output);
+    fitAddon.fit();
+
+    term.onData(function(data) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        var encoded = btoa(unescape(encodeURIComponent(data)));
+        ws.send(JSON.stringify({ type: 'terminal_input', data: encoded }));
+      }
+    });
+
+    window.addEventListener('resize', function() {
+      if (fitAddon) try { fitAddon.fit(); } catch(_) {}
+    });
+    return true;
+  }
+
+  function connectAndStart() {
+    console.log('Terminal: Connecting to WebSocket');
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      console.log('Terminal: Sending terminal_start command');
+      ws.send(JSON.stringify({ type: 'terminal_start', cwd: window.__STARTUP_CWD || undefined }));
+      return;
+    }
+    if (ws && ws.readyState === WebSocket.CONNECTING) {
+      console.log('Terminal: WebSocket already connecting');
+      return;
+    }
+    
+    ws = new WebSocket(getWsUrl());
+    ws.onopen = function() {
+      console.log('Terminal: WebSocket connected, starting terminal');
+      ws.send(JSON.stringify({ type: 'terminal_start', cwd: window.__STARTUP_CWD || undefined }));
+    };
+    ws.onmessage = function(e) {
+      try {
+        var msg = JSON.parse(e.data);
+        if (msg.type === 'terminal_output' && term) {
+          var raw = msg.encoding === 'base64'
+            ? decodeURIComponent(escape(atob(msg.data)))
+            : msg.data;
+          term.write(raw);
+        } else if (msg.type === 'terminal_exit' && term) {
+          term.write('\r\n[Process exited with code ' + msg.code + ']\r\n');
+          if (termActive) setTimeout(connectAndStart, 2000);
+        } else if (msg.type === 'terminal_started') {
+          console.log('Terminal: Started successfully');
+        }
+      } catch(_) {}
+    };
+    ws.onclose = function() {
+      console.log('Terminal: WebSocket closed');
+      ws = null;
+      if (termActive) setTimeout(connectAndStart, 2000);
+    };
+    ws.onerror = function(error) {
+      console.error('Terminal: WebSocket error:', error);
+    };
+  }
+
+  function startTerminal() {
+    console.log('Terminal: Starting terminal module');
+    if (!ensureTerm()) {
+      console.log('Terminal: Terminal not ready, retrying');
+      setTimeout(startTerminal, 200);
+      return;
+    }
+    termActive = true;
+    connectAndStart();
+    setTimeout(function() { if (fitAddon) try { fitAddon.fit(); } catch(_) {} }, 100);
+  }
+
+  function stopTerminal() {
+    console.log('Terminal: Stopping terminal module');
+    termActive = false;
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'terminal_stop' }));
+    }
+    if (ws) {
+      ws.close();
+      ws = null;
+    }
+  }
+
+  // Check if terminal view is initially active
+  if (document.getElementById('terminalContainer') && 
+      window.getComputedStyle(document.getElementById('terminalContainer')).display !== 'none') {
+    console.log('Terminal: Terminal view initially visible, starting');
+    startTerminal();
+  }
+
+  window.addEventListener('view-switched', function(e) {
+    if (e.detail.view === 'terminal') {
+      startTerminal();
+    } else if (termActive) {
+      stopTerminal();
+    }
+  });
+
   window.terminalModule = { 
     start: startTerminal, 
     stop: stopTerminal,