agentgui 1.0.414 → 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.414",
+  "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);
 
@@ -1947,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