agentgui 1.0.419 → 1.0.420

package/lib/ws-handlers-session.js

@@ -97,19 +97,42 @@ export function register(router, deps) {
     return data;
   });
 
-  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.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.subagents', async (p) => {
+    const agent = discoveredAgents.find(x => x.id === p.id);
+    if (!agent) return { subAgents: [] };
+    try {
+      const port = agent.acpPort || 8080;
+      const res = await fetch(`http://localhost:${port}/agents/search`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+        signal: AbortSignal.timeout(3000)
+      });
+      if (!res.ok) return { subAgents: [] };
+      const data = await res.json();
+      const subAgents = (data.agents || []).map(a => ({
+        id: a.agent_id || a.id,
+        name: a.metadata?.ref?.name || a.name || a.agent_id || a.id
+      }));
+      return { subAgents };
+    } catch (_) {
+      return { subAgents: [] };
+    }
   });
 
   router.handle('agent.get', (p) => {

package/package.json

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

package/static/index.html

@@ -491,10 +491,10 @@
       color: var(--color-text-secondary); user-select: none;
     }
 
-    .terminal-container {
-      flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #1e1e1e; min-height: 0;
-    }
-    .terminal-output { flex: 1; overflow: hidden; position: relative; min-height: 0; }
+    .terminal-container {
+      flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #1e1e1e; min-height: 0;
+    }
+    .terminal-output { flex: 1; overflow: hidden; position: relative; min-height: 0; }
 
     /* --- View toggle bar --- */
     .view-toggle-bar {
@@ -804,29 +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;
@@ -1077,7 +1077,8 @@
       .message { max-width: 95%; }
       .messages-wrapper { padding: 0.375rem 0.5rem; }
       .input-section { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
-      .agent-selector { display: none; }
+      .cli-selector { display: none; }
+      .sub-agent-selector { display: none; }
       .model-selector { display: none; }
     }
 
@@ -1328,20 +1329,20 @@
     .sidebar-list { contain: strict; content-visibility: auto; }
     .message { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 80px; }
 
-     .voice-block .voice-result-stats {
-       font-size: 0.8rem;
-       color: var(--color-text-secondary);
-       margin-top: 0.5rem;
-       padding-top: 0.5rem;
-       border-top: 1px solid var(--color-border);
-     }
-
-     .voice-block-content {
-       white-space: pre-wrap;
-       display: block;
-     }
-
-     .voice-reread-btn {
+     .voice-block .voice-result-stats {
+       font-size: 0.8rem;
+       color: var(--color-text-secondary);
+       margin-top: 0.5rem;
+       padding-top: 0.5rem;
+       border-top: 1px solid var(--color-border);
+     }
+
+     .voice-block-content {
+       white-space: pre-wrap;
+       display: block;
+     }
+
+     .voice-reread-btn {
       position: absolute;
       top: 0.5rem;
       right: 0.5rem;
@@ -3171,17 +3172,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-selector" data-cli-selector title="Select CLI tool"></select>
+          <select class="agent-selector sub-agent-selector" data-agent-selector title="Select sub-agent" style="display:none"></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"/>
@@ -3226,22 +3228,22 @@
     window._escHtml = function(t) { return t.replace(_escHtmlRe, function(c) { return _escHtmlMap[c]; }); };
   </script>
   <script defer src="/gm/js/event-processor.js"></script>
-  <script defer src="/gm/js/streaming-renderer.js"></script>
-  <script defer src="/gm/js/kalman-filter.js"></script>
-  <script defer src="/gm/js/event-consolidator.js"></script>
-  <script defer src="/gm/js/websocket-manager.js"></script>
-  <script defer src="/gm/js/ws-client.js"></script>
-  <script defer src="/gm/js/event-filter.js"></script>
-  <script defer src="/gm/js/syntax-highlighter.js"></script>
-  <script defer src="/gm/js/dialogs.js"></script>
-  <script defer src="/gm/js/ui-components.js"></script>
-  <script defer src="/gm/js/conversations.js"></script>
-  <script defer src="/gm/js/terminal.js"></script>
-  <script defer src="/gm/js/script-runner.js"></script>
-  <script defer src="/gm/js/client.js"></script>
-  <script type="module" src="/gm/js/voice.js"></script>
-  <script defer src="/gm/js/features.js"></script>
-  <script defer src="/gm/js/agent-auth.js"></script>
+  <script defer src="/gm/js/streaming-renderer.js"></script>
+  <script defer src="/gm/js/kalman-filter.js"></script>
+  <script defer src="/gm/js/event-consolidator.js"></script>
+  <script defer src="/gm/js/websocket-manager.js"></script>
+  <script defer src="/gm/js/ws-client.js"></script>
+  <script defer src="/gm/js/event-filter.js"></script>
+  <script defer src="/gm/js/syntax-highlighter.js"></script>
+  <script defer src="/gm/js/dialogs.js"></script>
+  <script defer src="/gm/js/ui-components.js"></script>
+  <script defer src="/gm/js/conversations.js"></script>
+  <script defer src="/gm/js/terminal.js"></script>
+  <script defer src="/gm/js/script-runner.js"></script>
+  <script defer src="/gm/js/client.js"></script>
+  <script type="module" src="/gm/js/voice.js"></script>
+  <script defer src="/gm/js/features.js"></script>
+  <script defer src="/gm/js/agent-auth.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/client.js

@@ -43,6 +43,7 @@ class AgentGUIClient {
       statusIndicator: null,
       messageInput: null,
       sendButton: null,
+      cliSelector: null,
       agentSelector: null,
       modelSelector: null
     };
@@ -354,13 +355,23 @@ class AgentGUIClient {
     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.cliSelector = document.querySelector('[data-cli-selector]');
     this.ui.agentSelector = document.querySelector('[data-agent-selector]');
     this.ui.modelSelector = document.querySelector('[data-model-selector]');
 
+    if (this.ui.cliSelector) {
+      this.ui.cliSelector.addEventListener('change', () => {
+        if (!this._agentLocked) {
+          this.loadSubAgentsForCli(this.ui.cliSelector.value);
+          this.saveAgentAndModelToConversation();
+        }
+      });
+    }
+
     if (this.ui.agentSelector) {
       this.ui.agentSelector.addEventListener('change', () => {
         if (!this._agentLocked) {
-          this.loadModelsForAgent(this.ui.agentSelector.value);
+          this.loadModelsForAgent(this.getEffectiveAgentId());
           this.saveAgentAndModelToConversation();
         }
       });
@@ -1822,22 +1833,27 @@ class AgentGUIClient {
         const { agents } = await window.wsClient.rpc('agent.ls');
         this.state.agents = agents;
 
-        // Populate unified agent selector with all agents (both CLI and ACP)
-        if (this.ui.agentSelector) {
-          if (agents.length > 0) {
-            this.ui.agentSelector.innerHTML = agents
-              .map(agent => `<option value="${agent.id}">${agent.name}</option>`)
+        const cliAgents = agents.filter(a => a.protocol === 'cli');
+        const displayAgents = cliAgents.length > 0 ? cliAgents : agents;
+
+        if (this.ui.cliSelector) {
+          if (displayAgents.length > 0) {
+            this.ui.cliSelector.innerHTML = displayAgents
+              .map(a => `<option value="${a.id}">${a.name}</option>`)
               .join('');
-            this.ui.agentSelector.style.display = 'inline-block';
+            this.ui.cliSelector.style.display = 'inline-block';
           } else {
-            this.ui.agentSelector.innerHTML = '';
-            this.ui.agentSelector.style.display = 'none';
+            this.ui.cliSelector.innerHTML = '';
+            this.ui.cliSelector.style.display = 'none';
           }
         }
 
         window.dispatchEvent(new CustomEvent('agents-loaded', { detail: { agents } }));
-        if (agents.length > 0 && !this._agentLocked) {
-          this.loadModelsForAgent(agents[0].id);
+
+        if (displayAgents.length > 0 && !this._agentLocked) {
+          const firstId = displayAgents[0].id;
+          await this.loadSubAgentsForCli(firstId);
+          this.loadModelsForAgent(this.getEffectiveAgentId());
         }
         return agents;
       } catch (error) {
@@ -1847,6 +1863,24 @@ class AgentGUIClient {
     });
   }
 
+  async loadSubAgentsForCli(cliAgentId) {
+    if (this.ui.agentSelector) {
+      this.ui.agentSelector.innerHTML = '';
+      this.ui.agentSelector.style.display = 'none';
+    }
+    try {
+      const { subAgents } = await window.wsClient.rpc('agent.subagents', { id: cliAgentId });
+      if (subAgents && subAgents.length > 0 && this.ui.agentSelector) {
+        this.ui.agentSelector.innerHTML = subAgents
+          .map(a => `<option value="${a.id}">${a.name}</option>`)
+          .join('');
+        this.ui.agentSelector.style.display = 'inline-block';
+      }
+    } catch (_) {
+      // No sub-agents available for this CLI tool — keep hidden
+    }
+  }
+
   async checkSpeechStatus() {
     try {
       const status = await window.wsClient.rpc('speech.status');
@@ -1899,8 +1933,10 @@ class AgentGUIClient {
 
   lockAgentAndModel(agentId, model) {
     this._agentLocked = true;
+    if (this.ui.cliSelector) {
+      this.ui.cliSelector.disabled = true;
+    }
     if (this.ui.agentSelector) {
-      this.ui.agentSelector.value = agentId;
       this.ui.agentSelector.disabled = true;
     }
 
@@ -1914,9 +1950,11 @@ class AgentGUIClient {
 
   unlockAgentAndModel() {
     this._agentLocked = false;
+    if (this.ui.cliSelector) {
+      this.ui.cliSelector.disabled = false;
+    }
     if (this.ui.agentSelector) {
       this.ui.agentSelector.disabled = false;
-      this.ui.agentSelector.style.display = 'inline-block';
     }
     if (this.ui.modelSelector) {
       this.ui.modelSelector.disabled = false;
@@ -1932,12 +1970,11 @@ class AgentGUIClient {
     const model = conversation.model || null;
 
     if (hasActivity) {
+      this._setCliSelectorToAgent(agentId);
       this.lockAgentAndModel(agentId, model);
     } else {
       this.unlockAgentAndModel();
-      if (this.ui.agentSelector) {
-        this.ui.agentSelector.value = agentId;
-      }
+      this._setCliSelectorToAgent(agentId);
 
       this.loadModelsForAgent(agentId).then(() => {
         if (model && this.ui.modelSelector) {
@@ -1947,6 +1984,15 @@ class AgentGUIClient {
     }
   }
 
+  _setCliSelectorToAgent(agentId) {
+    const allAgents = this.state.agents || [];
+    const agent = allAgents.find(a => a.id === agentId);
+    const cliId = (agent?.protocol === 'cli' || !agent) ? agentId : null;
+    if (cliId && this.ui.cliSelector) {
+      this.ui.cliSelector.value = cliId;
+    }
+  }
+
   /**
    * Load conversations
    */
@@ -2510,14 +2556,15 @@ class AgentGUIClient {
   /**
    * Get current selected agent
    */
-  getCurrentAgent() {
-    if (this.ui.agentSelector?.value) {
-      return this.ui.agentSelector.value;
-    }
-    if (this.ui.agentSelector?.value) {
+  getEffectiveAgentId() {
+    if (this.ui.agentSelector?.value && this.ui.agentSelector.style.display !== 'none') {
       return this.ui.agentSelector.value;
     }
-    return 'claude-code';
+    return this.ui.cliSelector?.value || 'claude-code';
+  }
+
+  getCurrentAgent() {
+    return this.getEffectiveAgentId();
   }
 
   /**