agentgui 1.0.414 → 1.0.416

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.416",
   "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,29 @@
       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;
+    }
+
+    
+
+    
+
+    .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 +3171,17 @@
       </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" 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>
           <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

@@ -355,6 +355,7 @@ class AgentGUIClient {
     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.agentSelector = document.querySelector('[data-agent-selector]');
     this.ui.modelSelector = document.querySelector('[data-model-selector]');
 
     if (this.ui.agentSelector) {
@@ -1248,7 +1249,7 @@ class AgentGUIClient {
     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 agentId = (isNewConversation ? this.getCurrentAgent() : null) || conv?.agentType || this.getCurrentAgent() || 'claude-code';
     const model = this.ui.modelSelector?.value || null;
 
     if (!prompt.trim()) {
@@ -1822,10 +1823,34 @@ class AgentGUIClient {
         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.agentSelector) {
-          this.ui.agentSelector.innerHTML = agents
-            .map(agent => `<option value="${agent.id}">${agent.name}</option>`)
-            .join('');
+          if (cliAgents.length > 0) {
+            this.ui.agentSelector.innerHTML = cliAgents
+              .map(agent => `<option value="${agent.id}">${agent.name}</option>`)
+              .join('');
+            this.ui.agentSelector.style.display = 'inline-block';
+          } else {
+            this.ui.agentSelector.innerHTML = '';
+            this.ui.agentSelector.style.display = 'none';
+          }
+        }
+
+        // Populate ACP agent selector
+        if (this.ui.agentSelector) {
+          if (acpAgents.length > 0) {
+            this.ui.agentSelector.innerHTML = acpAgents
+              .map(agent => `<option value="${agent.id}">${agent.name}</option>`)
+              .join('');
+            this.ui.agentSelector.style.display = 'inline-block';
+          } else {
+            this.ui.agentSelector.innerHTML = '';
+            this.ui.agentSelector.style.display = 'none';
+          }
         }
 
         window.dispatchEvent(new CustomEvent('agents-loaded', { detail: { agents } }));
@@ -1892,10 +1917,34 @@ class AgentGUIClient {
 
   lockAgentAndModel(agentId, model) {
     this._agentLocked = true;
-    if (this.ui.agentSelector) {
-      this.ui.agentSelector.value = agentId;
-      this.ui.agentSelector.disabled = 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.agentSelector) {
+          this.ui.agentSelector.value = agentId;
+          this.ui.agentSelector.disabled = true;
+        }
+        if (this.ui.agentSelector) {
+          this.ui.agentSelector.value = '';
+          this.ui.agentSelector.disabled = true;
+          this.ui.agentSelector.style.display = 'none';
+        }
+      } else {
+        if (this.ui.agentSelector) {
+          this.ui.agentSelector.value = agentId;
+          this.ui.agentSelector.disabled = true;
+        }
+        if (this.ui.agentSelector) {
+          this.ui.agentSelector.value = '';
+          this.ui.agentSelector.disabled = true;
+          this.ui.agentSelector.style.display = 'none';
+        }
+      }
     }
+    
     this.loadModelsForAgent(agentId).then(() => {
       if (this.ui.modelSelector && model) {
         this.ui.modelSelector.value = model;
@@ -1908,6 +1957,17 @@ class AgentGUIClient {
     if (this.ui.agentSelector) {
       this.ui.agentSelector.disabled = false;
     }
+    if (this.ui.agentSelector) {
+      this.ui.agentSelector.disabled = false;
+    }
+    
+    // Show both selectors again when unlocking
+    if (this.ui.agentSelector && this.state.agents.some(a => a.protocol === 'cli')) {
+      this.ui.agentSelector.style.display = 'inline-block';
+    }
+    if (this.ui.agentSelector && this.state.agents.some(a => a.protocol === 'acp')) {
+      this.ui.agentSelector.style.display = 'inline-block';
+    }
   }
 
   /**
@@ -1922,9 +1982,31 @@ class AgentGUIClient {
       this.lockAgentAndModel(agentId, model);
     } else {
       this.unlockAgentAndModel();
-      if (this.ui.agentSelector) {
-        this.ui.agentSelector.value = agentId;
+      // 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.agentSelector) {
+            this.ui.agentSelector.value = agentId;
+            this.ui.agentSelector.style.display = 'inline-block';
+          }
+          if (this.ui.agentSelector) {
+            this.ui.agentSelector.value = '';
+            this.ui.agentSelector.style.display = 'none';
+          }
+        } else {
+          if (this.ui.agentSelector) {
+            this.ui.agentSelector.value = agentId;
+            this.ui.agentSelector.style.display = 'inline-block';
+          }
+          if (this.ui.agentSelector) {
+            this.ui.agentSelector.value = '';
+            this.ui.agentSelector.style.display = 'none';
+          }
+        }
       }
+      
       this.loadModelsForAgent(agentId).then(() => {
         if (model && this.ui.modelSelector) {
           this.ui.modelSelector.value = model;
@@ -2494,10 +2576,23 @@ class AgentGUIClient {
   }
 
   /**
-   * Get application state
+   * Get current selected agent
+   */
+  getCurrentAgent() {
+    if (this.ui.agentSelector?.value) {
+      return this.ui.agentSelector.value;
+    }
+    if (this.ui.agentSelector?.value) {
+      return this.ui.agentSelector.value;
+    }
+    return 'claude-code';
+  }
+
+  /**
+   * Get current selected model
    */
-  getState() {
-    return { ...this.state };
+  getCurrentModel() {
+    return this.ui.modelSelector?.value || null;
   }
 
   /**