agentgui 1.0.513 → 1.0.515

package/CLAUDE.md

@@ -91,6 +91,30 @@ All routes are prefixed with `BASE_URL` (default `/gm`).
 - `POST /api/tools/update` - Batch update all tools with available updates
 - `POST /api/tools/refresh-all` - Refresh all tool statuses from package manager
 
+## Tool Update System
+
+Tool updates are managed through a complete pipeline:
+
+**Update Flow:**
+1. Frontend (`static/js/tools-manager.js`) initiates POST to `/api/tools/{id}/update`
+2. Server (`server.js` lines 1904-1961 for individual, 1973-2003 for batch) spawns bunx process
+3. Tool manager (`lib/tool-manager.js` lines 400-432) executes `bunx <package>` and detects new version
+4. Version is saved to database: `queries.updateToolStatus(toolId, { version, status: 'installed' })`
+5. WebSocket broadcasts `tool_update_complete` with version and status data
+6. Frontend updates UI and removes tool from `operationInProgress` set
+
+**Critical Detail:** When updating tools in batch (`/api/tools/update`), the version parameter MUST be included in the database update call (line 1986 in server.js). This ensures database persistence across page reloads.
+
+**Version Detection Sources** (`lib/tool-manager.js` lines 26-87):
+- Claude Code: `~/.claude/plugins/{pluginId}/plugin.json`
+- OpenCode: `~/.config/opencode/agents/{pluginId}/plugin.json`
+- Gemini CLI: `~/.gemini/extensions/{pluginId}/plugin.json`
+- Kilo: `~/.config/kilo/agents/{pluginId}/plugin.json`
+
+**Database Schema** (`database.js` lines 168-199):
+- Table: `tool_installations` (toolId, version, status, installed_at, error_message)
+- Table: `tool_install_history` (action, status, error_message for audit trail)
+
 ## Tool Detection System
 
 The system auto-detects installed AI coding tools via `bunx` package resolution:
@@ -99,7 +123,13 @@ The system auto-detects installed AI coding tools via `bunx` package resolution:
 - **Kilo**: `@kilocode/cli` package (id: gm-kilo)
 - **Claude Code**: `@anthropic-ai/claude-code` package (id: gm-cc)
 
-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 configuration in `lib/tool-manager.js` TOOLS array includes id, name, pkg, and pluginId. Each tool has a different plugin folder name than its npm package name:
+- Claude Code: pkg='@anthropic-ai/claude-code', pluginId='gm' (stored at ~/.claude/plugins/gm/)
+- Gemini CLI: pkg='@google/gemini-cli', pluginId='gm' (stored at ~/.gemini/extensions/gm/)
+- Kilo: pkg='@kilocode/cli', pluginId='@kilocode/cli' (stored at ~/.config/kilo/agents/@kilocode/cli/)
+- OpenCode: pkg='opencode-ai', pluginId='opencode-ai' (stored at ~/.config/opencode/agents/opencode-ai/)
+
+Detection happens by spawning `bunx <package> --version` to check if tools are installed. Version detection uses pluginId to find the correct plugin.json file. 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
 
@@ -162,3 +192,76 @@ Speech models (~470MB total) are downloaded automatically on server startup. No
 
 ### Cache Location
 Models are stored at `~/.gmgui/models/` (whisper in `onnx-community/whisper-base/`, TTS in `tts/`).
+
+## Tool Update Process Fix
+
+### Issue
+Tool update/install operations would complete successfully but the version display in the UI would not update to reflect the new version.
+
+### Root Cause
+The WebSocket broadcast event for tool update/install completion was missing the `version` field. The server was sending only the `freshStatus` object (which contains `installedVersion`), but not including the extracted `version` field from the tool-manager result.
+
+Frontend expected: `data.data.version`
+Backend was sending: only `data.data.installedVersion`
+
+### Solution
+Updated WebSocket broadcasts in `server.js`:
+- Line 1883: Install endpoint now includes `version` in broadcast data
+- Line 1942: Update endpoint now includes `version` in broadcast data
+- Line 1987: Legacy install endpoint now saves `version` to database
+
+The broadcasts now include both the immediately-detected `version` field and the comprehensive `freshStatus` object, ensuring the frontend has complete information to update the UI correctly.
+
+### Testing
+After update/install completes:
+1. WebSocket event `tool_update_complete` or `tool_install_complete` is broadcast
+2. Frontend receives complete data with `version`, `installedVersion`, `isUpToDate`, etc.
+3. UI version display updates to show new version
+4. Status reverts to "Installed" or "Up-to-date" accordingly
+
+## Tool Update Testing & Diagnostics
+
+A comprehensive diagnostic page is available at `http://localhost:3000/gm/tool-update-test.html` (`static/tool-update-test.html`) with 7 interactive test sections:
+
+1. **API Connection Test** - Verifies server HTTP connectivity
+2. **Get Tools Status** - Lists all tools with their current status, versions, and update availability
+3. **WebSocket Connection Test** - Tests real-time event streaming (ping/pong)
+4. **Single Tool Update Test** - Triggers update for a specific tool and monitors completion
+5. **Event Stream Monitoring** - Watches all WebSocket events in real-time
+6. **Database Status** - Checks database accessibility and tool persistence
+7. **System Info** - Displays environment and configuration details
+
+### Batch Update Fix (Critical)
+
+**Issue:** When updating all tools via `/api/tools/update` endpoint, tool versions were not persisted to the database because the `version` parameter was missing from the `updateToolStatus` call.
+
+**Location:** `server.js` line 1986 in the batch update handler (`/api/tools/update`)
+
+**Fix Applied:**
+```javascript
+// BEFORE (missing version):
+queries.updateToolStatus(toolId, { status: 'installed', installed_at: Date.now() });
+
+// AFTER (version preserved):
+const version = result.version || null;
+queries.updateToolStatus(toolId, { status: 'installed', version, installed_at: Date.now() });
+```
+
+**Impact:** Ensures tool versions are correctly saved after batch updates, enabling the UI to display accurate version information and update status across page reloads.
+
+### Testing Tool Updates
+
+**Manual Steps:**
+1. Open `http://localhost:3000/gm/tool-update-test.html`
+2. Click "Get Tools List" and note current versions
+3. Click "Start Update" for a tool (e.g., gm-cc)
+4. Monitor WebSocket events - you should see `tool_update_progress` and `tool_update_complete`
+5. Click "Check Status" to verify version was saved to database
+6. Reload the page - versions should persist
+
+**Expected Outcomes:**
+- Individual tool update: version saved ✓
+- Batch tool update: version saved for all tools ✓
+- Database persists across page reload ✓
+- Frontend shows "Up-to-date" or "Update available" ✓
+- Tool install history records the action ✓

package/package.json

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

package/server.js

@@ -1880,7 +1880,7 @@ const server = http.createServer(async (req, res) => {
           queries.updateToolStatus(toolId, { status: 'installed', version, installed_at: Date.now() });
           const freshStatus = await toolManager.checkToolStatusAsync(toolId);
           console.log(`[TOOLS-API] Fresh status after install for ${toolId}:`, JSON.stringify(freshStatus));
-          broadcastSync({ type: 'tool_install_complete', toolId, data: { success: true, ...freshStatus } });
+          broadcastSync({ type: 'tool_install_complete', toolId, data: { success: true, version, ...freshStatus } });
           queries.addToolInstallHistory(toolId, 'install', 'success', null);
         } else {
           console.error(`[TOOLS-API] Install failed for ${toolId}:`, result.error);
@@ -1939,7 +1939,7 @@ const server = http.createServer(async (req, res) => {
           queries.updateToolStatus(toolId, { status: 'installed', version, installed_at: Date.now() });
           const freshStatus = await toolManager.checkToolStatusAsync(toolId);
           console.log(`[TOOLS-API] Fresh status after update for ${toolId}:`, JSON.stringify(freshStatus));
-          broadcastSync({ type: 'tool_update_complete', toolId, data: { success: true, ...freshStatus } });
+          broadcastSync({ type: 'tool_update_complete', toolId, data: { success: true, version, ...freshStatus } });
           queries.addToolInstallHistory(toolId, 'update', 'success', null);
         } else {
           console.error(`[TOOLS-API] Update failed for ${toolId}:`, result.error);
@@ -1970,133 +1970,43 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
-
-    // Handle POST /api/tools/{toolId}/install - individual tool install
-    const installMatch = pathOnly.match(/^\/api\/tools\/([^\/]+)\/install$/);
-    if (installMatch && req.method === 'POST') {
-      const toolId = installMatch[1];
-      sendJSON(req, res, 200, { installing: true, toolId });
-      setImmediate(async () => {
-        try {
-          const result = await toolManager.install(toolId, (msg) => {
-            if (wsOptimizer && wsOptimizer.broadcast) {
-              wsOptimizer.broadcast({ type: 'tool_install_progress', toolId, data: msg });
-            }
-          });
-          if (result.success) {
-            queries.updateToolStatus(toolId, { status: 'installed', installed_at: Date.now() });
-            queries.addToolInstallHistory(toolId, 'install', 'success', null);
-            const freshStatus = await toolManager.checkToolStatusAsync(toolId);
-            if (wsOptimizer && wsOptimizer.broadcast) {
-              wsOptimizer.broadcast({ type: 'tool_install_complete', toolId, data: { ...result, ...freshStatus } });
-            }
-          } else {
-            queries.updateToolStatus(toolId, { status: 'failed', error_message: result.error });
-            queries.addToolInstallHistory(toolId, 'install', 'failed', result.error);
-            if (wsOptimizer && wsOptimizer.broadcast) {
-              wsOptimizer.broadcast({ type: 'tool_install_failed', toolId, data: result });
-            }
-          }
-        } catch (err) {
-          queries.updateToolStatus(toolId, { status: 'failed', error_message: err.message });
-          queries.addToolInstallHistory(toolId, 'install', 'failed', err.message);
-          if (wsOptimizer && wsOptimizer.broadcast) {
-            wsOptimizer.broadcast({ type: 'tool_install_failed', toolId, data: { success: false, error: err.message } });
-          }
-        }
-      });
-      return;
-    }
-
-    // Handle POST /api/tools/{toolId}/update - individual tool update
-    const updateMatch = pathOnly.match(/^\/api\/tools\/([^\/]+)\/update$/);
-    if (updateMatch && req.method === 'POST') {
-      const toolId = updateMatch[1];
-      sendJSON(req, res, 200, { updating: true, toolId });
-      setImmediate(async () => {
-        try {
-          const result = await toolManager.update(toolId, (msg) => {
-            if (wsOptimizer && wsOptimizer.broadcast) {
-              wsOptimizer.broadcast({ type: 'tool_update_progress', toolId, data: msg });
-            }
-          });
-          if (result.success) {
-            queries.updateToolStatus(toolId, { status: 'installed', installed_at: Date.now() });
-            queries.addToolInstallHistory(toolId, 'update', 'success', null);
-            const freshStatus = await toolManager.checkToolStatusAsync(toolId);
-            if (wsOptimizer && wsOptimizer.broadcast) {
-              wsOptimizer.broadcast({ type: 'tool_update_complete', toolId, data: { ...result, ...freshStatus } });
-            }
-          } else {
-            queries.updateToolStatus(toolId, { status: 'failed', error_message: result.error });
-            queries.addToolInstallHistory(toolId, 'update', 'failed', result.error);
-            if (wsOptimizer && wsOptimizer.broadcast) {
-              wsOptimizer.broadcast({ type: 'tool_update_failed', toolId, data: result });
-            }
-          }
-        } catch (err) {
-          queries.updateToolStatus(toolId, { status: 'failed', error_message: err.message });
-          queries.addToolInstallHistory(toolId, 'update', 'failed', err.message);
-          if (wsOptimizer && wsOptimizer.broadcast) {
-            wsOptimizer.broadcast({ type: 'tool_update_failed', toolId, data: { success: false, error: err.message } });
-          }
-        }
-      });
-      return;
-    }
-
     if (pathOnly === '/api/tools/update' && req.method === 'POST') {
       sendJSON(req, res, 200, { updating: true, toolCount: 4 });
-      if (wsOptimizer && wsOptimizer.broadcast) {
-        wsOptimizer.broadcast({ type: 'tools_update_started', tools: ['gm-cc', 'gm-oc', 'gm-gc', 'gm-kilo'] });
-      }
+      broadcastSync({ type: 'tools_update_started', tools: ['gm-cc', 'gm-oc', 'gm-gc', 'gm-kilo'] });
       setImmediate(async () => {
         const toolIds = ['gm-cc', 'gm-oc', 'gm-gc', 'gm-kilo'];
         const results = {};
         for (const toolId of toolIds) {
           try {
             const result = await toolManager.update(toolId, (msg) => {
-              if (wsOptimizer && wsOptimizer.broadcast) {
-                wsOptimizer.broadcast({ type: 'tool_update_progress', toolId, data: msg });
-              }
+              broadcastSync({ type: 'tool_update_progress', toolId, data: msg });
             });
             results[toolId] = result;
             if (result.success) {
-              queries.updateToolStatus(toolId, { status: 'installed', installed_at: Date.now() });
+              const version = result.version || null;
+              queries.updateToolStatus(toolId, { status: 'installed', version, installed_at: Date.now() });
               queries.addToolInstallHistory(toolId, 'update', 'success', null);
               const freshStatus = await toolManager.checkToolStatusAsync(toolId);
-              if (wsOptimizer && wsOptimizer.broadcast) {
-                wsOptimizer.broadcast({ type: 'tool_update_complete', toolId, data: { ...result, ...freshStatus } });
-              }
+              broadcastSync({ type: 'tool_update_complete', toolId, data: { ...result, ...freshStatus } });
             } else {
               queries.updateToolStatus(toolId, { status: 'failed', error_message: result.error });
               queries.addToolInstallHistory(toolId, 'update', 'failed', result.error);
-              if (wsOptimizer && wsOptimizer.broadcast) {
-                wsOptimizer.broadcast({ type: 'tool_update_failed', toolId, data: result });
-              }
+              broadcastSync({ type: 'tool_update_failed', toolId, data: result });
             }
           } catch (err) {
-            const error = err.message || 'Unknown error';
-            results[toolId] = { success: false, error };
-            queries.updateToolStatus(toolId, { status: 'failed', error_message: error });
-            queries.addToolInstallHistory(toolId, 'update', 'failed', error);
-            if (wsOptimizer && wsOptimizer.broadcast) {
-              wsOptimizer.broadcast({ type: 'tool_update_failed', toolId, data: { error } });
-            }
+            queries.updateToolStatus(toolId, { status: 'failed', error_message: err.message });
+            queries.addToolInstallHistory(toolId, 'update', 'failed', err.message);
+            broadcastSync({ type: 'tool_update_failed', toolId, data: { success: false, error: err.message } });
           }
         }
-        if (wsOptimizer && wsOptimizer.broadcast) {
-          wsOptimizer.broadcast({ type: 'tools_update_complete', data: results });
-        }
+        broadcastSync({ type: 'tools_update_complete', data: results });
       });
       return;
     }
 
     if (pathOnly === '/api/tools/refresh-all' && req.method === 'POST') {
       sendJSON(req, res, 200, { refreshing: true, toolCount: 4 });
-      if (wsOptimizer && wsOptimizer.broadcast) {
-        wsOptimizer.broadcast({ type: 'tools_refresh_started' });
-      }
+      broadcastSync({ type: 'tools_refresh_started' });
       setImmediate(async () => {
         const tools = toolManager.getAllTools();
         for (const tool of tools) {
@@ -2112,9 +2022,7 @@ const server = http.createServer(async (req, res) => {
             }
           }
         }
-        if (wsOptimizer && wsOptimizer.broadcast) {
-          wsOptimizer.broadcast({ type: 'tools_refresh_complete', data: tools });
-        }
+        broadcastSync({ type: 'tools_refresh_complete', data: tools });
       });
       return;
     }

package/static/js/voice.js

@@ -453,6 +453,43 @@
     });
   }
 
+  function preGenerateTTS(text) {
+    if (!ttsEnabled) return;
+    var clean = text.replace(/<[^>]*>/g, '').trim();
+    if (!clean) return;
+    var parts = [];
+    if (typeof agentGUIClient !== 'undefined' && agentGUIClient && typeof agentGUIClient.parseMarkdownCodeBlocks === 'function') {
+      parts = agentGUIClient.parseMarkdownCodeBlocks(clean);
+    } else {
+      parts = [{ type: 'text', content: clean }];
+    }
+    parts.forEach(function(part) {
+      if (part.type === 'code') return;
+      var segment = part.content.trim();
+      if (!segment) return;
+      var cacheKey = selectedVoiceId + ':' + segment;
+      if (ttsAudioCache.has(cacheKey)) return;
+      var optimizedText = optimizePromptForSpeech(segment);
+      fetch(BASE + '/api/tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: optimizedText, voiceId: selectedVoiceId })
+      }).then(function(resp) {
+        if (!resp.ok) throw new Error('TTS pre-generation failed: ' + resp.status);
+        return resp.arrayBuffer();
+      }).then(function(buf) {
+        var blob = new Blob([buf], { type: 'audio/wav' });
+        if (ttsAudioCache.size >= TTS_CLIENT_CACHE_MAX) {
+          var oldest = ttsAudioCache.keys().next().value;
+          ttsAudioCache.delete(oldest);
+        }
+        ttsAudioCache.set(cacheKey, blob);
+      }).catch(function(err) {
+        console.warn('[Voice] TTS pre-generation failed:', err);
+      });
+    });
+  }
+
   function processQueue() {
     if (isSpeaking || speechQueue.length === 0) return;
     if (ttsDisabledUntilReset) {
@@ -783,6 +820,7 @@
       var div = addVoiceBlock(block.text, isUser);
       if (div && isNew && ttsEnabled && blockRole === 'assistant') {
         div.classList.add('speaking');
+        preGenerateTTS(block.text);
         speak(block.text);
         setTimeout(function() { div.classList.remove('speaking'); }, 2000);
       }

package/test-fixes.mjs

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+
+/**
+ * Test script for validating the two fixes:
+ * 1. Agent selector visibility in chat view
+ * 2. TTS streaming pre-generation
+ */
+
+import fs from 'fs';
+import { execSync } from 'child_process';
+
+console.log('=== AgentGUI Fix Validation ===\n');
+
+// Test 1: Verify agent selectors are NOT hidden on desktop
+console.log('Test 1: Agent Selector Visibility');
+console.log('-----------------------------------');
+const html = fs.readFileSync('./static/index.html', 'utf-8');
+const beforeMobileMedia = html.substring(0, html.indexOf('@media (max-width: 480px)'));
+const cliHiddenOnDesktop = beforeMobileMedia.includes('.cli-selector { display: none; }');
+const modelHiddenOnDesktop = beforeMobileMedia.includes('.model-selector { display: none; }');
+
+if (!cliHiddenOnDesktop && !modelHiddenOnDesktop) {
+  console.log('✓ PASS: Agent selectors are NOT hidden by CSS on desktop');
+  console.log('  - CLI selector will be visible when populated');
+  console.log('  - Model selector will be visible when populated');
+} else {
+  console.log('❌ FAIL: Agent selectors are still hidden on desktop');
+  if (cliHiddenOnDesktop) console.log('  - .cli-selector has display:none');
+  if (modelHiddenOnDesktop) console.log('  - .model-selector has display:none');
+}
+
+// Verify selectors are in HTML
+const hasSelectors = html.includes('data-cli-selector') &&
+                     html.includes('data-agent-selector') &&
+                     html.includes('data-model-selector');
+if (hasSelectors) {
+  console.log('✓ PASS: All selector elements are present in HTML');
+} else {
+  console.log('❌ FAIL: Some selector elements are missing');
+}
+
+// Test 2: Verify TTS pre-generation is implemented
+console.log('\nTest 2: TTS Streaming Pre-generation');
+console.log('--------------------------------------');
+const voiceJs = fs.readFileSync('./static/js/voice.js', 'utf-8');
+const hasPreGenerateFunction = voiceJs.includes('function preGenerateTTS(text)');
+const callsPreGenerate = voiceJs.includes('preGenerateTTS(block.text)');
+const usesCache = voiceJs.includes('if (ttsAudioCache.has(cacheKey)) return;');
+const fetchesTTS = voiceJs.match(/fetch\(BASE \+ '\/api\/tts'/g)?.length >= 2; // Should be in both preGenerate and processQueue
+
+if (hasPreGenerateFunction && callsPreGenerate && usesCache && fetchesTTS) {
+  console.log('✓ PASS: TTS pre-generation is fully implemented');
+  console.log('  - preGenerateTTS function exists');
+  console.log('  - Called when assistant text arrives');
+  console.log('  - Uses cache to avoid duplicate generation');
+  console.log('  - Audio generation happens in background');
+} else {
+  console.log('❌ FAIL: TTS pre-generation incomplete');
+  if (!hasPreGenerateFunction) console.log('  - Missing preGenerateTTS function');
+  if (!callsPreGenerate) console.log('  - Not called in handleVoiceBlock');
+  if (!usesCache) console.log('  - Missing cache check');
+}
+
+// Test 3: Check that client.js populates selectors correctly
+console.log('\nTest 3: Selector Population Logic');
+console.log('-----------------------------------');
+const clientJs = fs.readFileSync('./static/js/client.js', 'utf-8');
+const setsDisplay = clientJs.includes("this.ui.cliSelector.style.display = 'inline-block'");
+const populatesOptions = clientJs.includes('.innerHTML = displayAgents');
+
+if (setsDisplay && populatesOptions) {
+  console.log('✓ PASS: Client.js correctly populates and displays selectors');
+  console.log('  - Sets display to inline-block when agents loaded');
+  console.log('  - Populates options from agent list');
+} else {
+  console.log('❌ FAIL: Selector population logic may be broken');
+}
+
+// Summary
+console.log('\n=== SUMMARY ===');
+const allTestsPass = !cliHiddenOnDesktop && !modelHiddenOnDesktop &&
+                     hasSelectors && hasPreGenerateFunction &&
+                     callsPreGenerate && usesCache &&
+                     setsDisplay && populatesOptions;
+
+if (allTestsPass) {
+  console.log('✓ ALL TESTS PASSED\n');
+  console.log('Manual Testing Instructions:');
+  console.log('1. Start server: npm run dev');
+  console.log('2. Open http://localhost:3000/gm/');
+  console.log('3. Check chat input area - you should see:');
+  console.log('   - CLI selector dropdown (e.g., "Claude")');
+  console.log('   - Model selector dropdown (e.g., "Sonnet 4.5")');
+  console.log('   - Microphone button for voice input');
+  console.log('4. Open Voice tab and enable "Auto-speak responses"');
+  console.log('5. Send a message and observe:');
+  console.log('   - Text streams in as agent responds');
+  console.log('   - Voice playback starts immediately after completion (no delay)');
+  console.log('   - Audio was pre-generated during streaming');
+} else {
+  console.log('❌ SOME TESTS FAILED - Review output above\n');
+  process.exit(1);
+}