agentgui 1.0.415 → 1.0.416

package/package.json

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

package/static/index.html

@@ -818,15 +818,9 @@
       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;
@@ -3179,8 +3173,7 @@
       <!-- Input area: fixed at bottom -->
       <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="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"

package/static/js/client.js

@@ -341,50 +341,31 @@ 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.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';
-          }
-        }
-      });
-    }
+  /**
+   * 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.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();
+        }
+      });
+    }
 
     if (this.ui.modelSelector) {
       this.ui.modelSelector.addEventListener('change', () => {
@@ -1264,12 +1245,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.getCurrentAgent() : null) || conv?.agentType || this.getCurrentAgent() || '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');
@@ -1836,53 +1817,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;
-
-        // 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 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.agentSelector) {
+          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 } }));
+        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 {
@@ -1934,105 +1915,105 @@ class AgentGUIClient {
       .join('');
   }
 
-  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';
-    }
-  }
+  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.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;
+      }
+    });
+  }
+
+  unlockAgentAndModel() {
+    this._agentLocked = false;
+    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';
+    }
+  }
 
   /**
    * 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();
-      // 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;
-        }
-      });
-    }
-  }
+  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.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;
+        }
+      });
+    }
+  }
 
   /**
    * Load conversations
@@ -2594,25 +2575,25 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * 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 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
+   */
+  getCurrentModel() {
+    return this.ui.modelSelector?.value || null;
+  }
 
   /**
    * Get metrics