agentgui 1.0.502 → 1.0.504

package/CLAUDE.md

@@ -84,6 +84,12 @@ All routes are prefixed with `BASE_URL` (default `/gm`).
 - `GET /api/speech-status` - Speech model loading status
 - `POST /api/folders` - Create folder
 - `GET /api/tools` - List detected tools with installation status (via WebSocket tools.list handler)
+- `GET /api/tools/:id/status` - Get tool installation status (version, installed_at, error_message)
+- `POST /api/tools/:id/install` - Start tool installation (returns `{ success: true }` with background async install)
+- `POST /api/tools/:id/update` - Start tool update (body: targetVersion)
+- `GET /api/tools/:id/history` - Get tool install/update history (query: limit, offset)
+- `POST /api/tools/update` - Batch update all tools with available updates
+- `POST /api/tools/refresh-all` - Refresh all tool statuses from package manager
 
 ## Tool Detection System
 
@@ -95,6 +101,29 @@ The system auto-detects installed AI coding tools via `bunx` package resolution:
 
 Tool package names are configured in `lib/tool-manager.js` TOOLS array (lines 6-11). Detection happens by spawning `bunx <package> --version` to check if tools are installed. Response from `/api/tools` includes: id, name, pkg, installed, status (one of: installed|needs_update|not_installed), isUpToDate, upgradeNeeded, hasUpdate. Frontend displays tools in UI and updates based on installation status.
 
+### Tool Installation and Update UI Flow
+
+When user clicks Install/Update button on a tool:
+
+1. **Frontend** (`static/js/tools-manager.js`):
+   - Immediately updates tool status to 'installing'/'updating' and re-renders UI
+   - Sends POST request to `/api/tools/{id}/install` or `/api/tools/{id}/update`
+   - Adds toolId to `operationInProgress` to prevent duplicate requests
+   - Button becomes disabled showing progress indicator while install runs
+
+2. **Backend** (`server.js` lines 1819-1851):
+   - Receives POST request, updates database status to 'installing'/'updating'
+   - Sends immediate response `{ success: true }`
+   - Asynchronously calls `toolManager.install/update()` in background
+   - Upon completion, broadcasts WebSocket event `tool_install_complete` or `tool_install_failed`
+
+3. **Frontend WebSocket Handler** (`static/js/tools-manager.js` lines 138-151):
+   - Listens for `tool_install_complete` or `tool_install_failed` events
+   - Updates tool status and re-renders final state
+   - Removes toolId from `operationInProgress`, enabling button again
+
+The UI shows progress in three phases: immediate "Installing" status, progress bar animation during install, and final "Installed"/"Failed" status when complete.
+
 ## WebSocket Protocol
 
 Endpoint: `BASE_URL + /sync`

package/package.json

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

package/static/js/client.js

@@ -1890,7 +1890,7 @@ class AgentGUIClient {
         if (this.ui.cliSelector) {
           if (displayAgents.length > 0) {
             this.ui.cliSelector.innerHTML = displayAgents
-              .map(a => `<option value="${a.id}">${a.name}</option>`)
+              .map(a => `<option value="${a.id}">${a.name.split(/[\s\-]+/)[0]}</option>`)
               .join('');
             this.ui.cliSelector.style.display = 'inline-block';
           } else {
@@ -1923,7 +1923,7 @@ class AgentGUIClient {
       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>`)
+          .map(a => `<option value="${a.id}">${a.name.split(/[\s\-]+/)[0]}</option>`)
           .join('');
         this.ui.agentSelector.style.display = 'inline-block';
         this.loadModelsForAgent(cliAgentId);

package/static/js/voice.js

@@ -508,6 +508,9 @@
   var streamingSupported = true;
   var streamingFailedAt = 0;
 
+  var pendingVoiceUpdates = [];
+  var MAX_PENDING_UPDATES = 100;
+
   function optimizePromptForSpeech(text) {
     var optimizationInstructions = ' [Optimize for speech: Keep it short. Use simple words. Use short sentences. Focus on clarity.]';
     return text + optimizationInstructions;
@@ -813,22 +816,29 @@
       if (data.type === 'sync_connected') {
         sendVoiceToServer();
       }
+      if (data.type === 'streaming_progress' || data.type === 'message_created' || data.type === 'streaming_start') {
+        if (data.conversationId && data.conversationId !== currentConversationId) return;
+        if (!voiceActive) {
+          pendingVoiceUpdates.push(data);
+          if (pendingVoiceUpdates.length > MAX_PENDING_UPDATES) {
+            pendingVoiceUpdates.shift();
+          }
+          return;
+        }
+      }
       if (!voiceActive) return;
       if (data.type === 'streaming_progress' && data.block) {
-        if (data.conversationId && data.conversationId !== currentConversationId) return;
         if (data.seq !== undefined && renderedSeqs.has(data.seq)) return;
         if (data.seq !== undefined) renderedSeqs.add(data.seq);
         handleVoiceBlock(data.block, true, data.blockRole);
       }
       if (data.type === 'message_created' && data.message) {
-        if (data.conversationId && data.conversationId !== currentConversationId) return;
         var message = data.message;
         if (message.role === 'user' && message.content) {
           handleVoiceBlock({ type: 'text', text: message.content }, true, 'user');
         }
       }
       if (data.type === 'streaming_start') {
-        if (data.conversationId && data.conversationId !== currentConversationId) return;
         spokenChunks = new Set();
         renderedSeqs = new Set();
         _voiceBreakNext = false;
@@ -838,13 +848,16 @@
       var newConversationId = e.detail.conversationId;
       if (currentConversationId && currentConversationId !== newConversationId) {
         unsubscribeFromConversation();
+        pendingVoiceUpdates = [];
       }
       currentConversationId = newConversationId;
       stopSpeaking();
       spokenChunks = new Set();
       renderedSeqs = new Set();
       if (voiceActive) {
+        subscribeToConversation(currentConversationId);
         loadVoiceBlocks(currentConversationId);
+        processPendingUpdates();
       }
     });
   }
@@ -941,7 +954,9 @@
   function activate() {
     voiceActive = true;
     if (currentConversationId) {
+      subscribeToConversation(currentConversationId);
       loadVoiceBlocks(currentConversationId);
+      processPendingUpdates();
     } else {
       var container = document.getElementById('voiceMessages');
       if (container && !container.hasChildNodes()) {
@@ -950,10 +965,35 @@
     }
   }
 
+  function processPendingUpdates() {
+    if (!voiceActive) return;
+    var updates = pendingVoiceUpdates.splice(0, pendingVoiceUpdates.length);
+    for (var i = 0; i < updates.length; i++) {
+      var data = updates[i];
+      if (data.type === 'streaming_progress' && data.block) {
+        if (data.seq !== undefined && renderedSeqs.has(data.seq)) continue;
+        if (data.seq !== undefined) renderedSeqs.add(data.seq);
+        handleVoiceBlock(data.block, true, data.blockRole);
+      }
+      if (data.type === 'message_created' && data.message) {
+        var message = data.message;
+        if (message.role === 'user' && message.content) {
+          handleVoiceBlock({ type: 'text', text: message.content }, true, 'user');
+        }
+      }
+      if (data.type === 'streaming_start') {
+        spokenChunks = new Set();
+        renderedSeqs = new Set();
+        _voiceBreakNext = false;
+      }
+    }
+  }
+
   function deactivate() {
     voiceActive = false;
     stopSpeaking();
     unsubscribeFromConversation();
+    pendingVoiceUpdates = [];
   }
 
   function escapeHtml(text) {