agentgui 1.0.616 → 1.0.617

package/static/index.html

@@ -1456,7 +1456,6 @@
       align-items: center;
       justify-content: space-between;
       gap: 0.5rem;
-      background: #1f2937;
       padding: 0.5rem 1rem;
     }
 
@@ -1532,7 +1531,6 @@
     .block-tool-use {
       margin-bottom: 0;
       border-radius: 0.5rem;
-      background: #ecfeff;
       overflow: hidden;
     }
 
@@ -1543,7 +1541,6 @@
       display: flex;
       align-items: center;
       gap: 0.375rem;
-      background: #cffafe;
     }
 
     html.dark .block-tool-use .tool-header { }
@@ -2410,10 +2407,10 @@
       overflow: hidden;
     }
 
-    .block-tool-result.result-success { background: #f0fdf4; }
-    .block-tool-result.result-error { background: #fef2f2; }
-    html.dark .block-tool-result.result-success { background: #0a1f0f; }
-    html.dark .block-tool-result.result-error { background: #1c0f0f; }
+    .block-tool-result.result-success { }
+    .block-tool-result.result-error { }
+    html.dark .block-tool-result.result-success { }
+    html.dark .block-tool-result.result-error { }
 
     .block-tool-result .result-header {
       padding: 0.3rem 0.75rem;
@@ -2422,10 +2419,10 @@
       justify-content: space-between;
     }
 
-    .block-tool-result.result-success .result-header { background: #dcfce7; }
-    .block-tool-result.result-error .result-header { background: #fee2e2; }
-    html.dark .block-tool-result.result-success .result-header { background: #0f2b1a; }
-    html.dark .block-tool-result.result-error .result-header { background: #2c1010; }
+    .block-tool-result.result-success .result-header { }
+    .block-tool-result.result-error .result-header { }
+    html.dark .block-tool-result.result-success .result-header { }
+    html.dark .block-tool-result.result-error .result-header { }
 
     .block-tool-result .result-header .status-label {
       display: flex;
@@ -2497,15 +2494,13 @@
     }
 
     .block-result.result-ok {
-      background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
     }
 
     .block-result.result-err {
-      background: linear-gradient(135deg, #fef2f2, #fff1f2);
     }
 
-    html.dark .block-result.result-ok { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); }
-    html.dark .block-result.result-err { background: linear-gradient(135deg, #1c0f0f, #2c1010); }
+    html.dark .block-result.result-ok { }
+    html.dark .block-result.result-err { }
 
     .block-result .result-summary-header {
       padding: 0.375rem 0.75rem;
@@ -2553,21 +2548,19 @@
     .block-system {
       margin-bottom: 0;
       border-radius: 0.5rem;
-      background: #eef2ff;
       overflow: hidden;
     }
 
-    html.dark .block-system { background: #15103a; }
+    html.dark .block-system { }
 
     .block-system .system-header {
       padding: 0.375rem 0.75rem;
-      background: #e0e7ff;
       font-weight: 600;
       font-size: 0.85rem;
       color: #3730a3;
     }
 
-    html.dark .block-system .system-header { background: #1e1b4b; color: #a5b4fc; }
+    html.dark .block-system .system-header { color: #a5b4fc; }
 
     .block-system .system-body {
       padding: 0.375rem 0.75rem;
@@ -2611,7 +2604,6 @@
       margin-bottom: 0;
       border-radius: 0.5rem;
       overflow: hidden;
-      background: #111827;
     }
 
     .block-bash .bash-command {
@@ -2688,10 +2680,9 @@
       margin-bottom: 0;
       padding: 0.5rem 0.75rem;
       border-radius: 0.5rem;
-      background: #fef2f2;
     }
 
-    html.dark .block-error { background: #1c0f0f; }
+    html.dark .block-error { }
 
     /* --- Image Block --- */
     .block-image {

package/static/js/client.js

@@ -532,7 +532,8 @@ class AgentGUIClient {
           return;
         }
         try {
-          const data = await window.wsClient.rpc('conv.queue', { id: this.state.currentConversation.id, content: message });
+          // Queue uses msg.send which will enqueue if streaming is active
+          const data = await window.wsClient.rpc('msg.send', { id: this.state.currentConversation.id, content: message });
           console.log('Queue response:', data);
           if (this.ui.messageInput) {
             this.ui.messageInput.value = '';
@@ -918,6 +919,24 @@ class AgentGUIClient {
       this.scrollToBottom(true);
     }
 
+    // Immediately fetch any existing chunks for this session and start polling
+    // This ensures real-time feedback appears immediately
+    try {
+      const initialChunks = await this.fetchChunks(data.conversationId, 0);
+      // Filter to only chunks from the current session
+      const sessionChunks = initialChunks.filter(c => c.sessionId === data.sessionId && c.block && c.block.type);
+      if (sessionChunks.length > 0) {
+        this.renderChunkBatch(sessionChunks);
+        // Update lastFetchTimestamp so polling doesn't duplicate these chunks
+        const lastChunk = sessionChunks[sessionChunks.length - 1];
+        if (lastChunk && lastChunk.created_at) {
+          this.chunkPollState.lastFetchTimestamp = lastChunk.created_at;
+        }
+      }
+    } catch (e) {
+      console.warn('Initial chunk fetch failed:', e.message);
+    }
+
     // Start polling for chunks from database
     this.startChunkPolling(data.conversationId);
 
@@ -952,6 +971,18 @@ class AgentGUIClient {
     if (!this.state.streamingBlocks) this.state.streamingBlocks = [];
     this.state.streamingBlocks.push(block);
 
+    // Thinking blocks are transient and not stored in DB, so render immediately
+    if (block.type === 'thinking' && this.state.currentSession?.id === data.sessionId) {
+      const streamingEl = document.getElementById(`streaming-${data.sessionId}`);
+      if (streamingEl) {
+        const blocksEl = streamingEl.querySelector('.streaming-blocks');
+        if (blocksEl) {
+          const el = this.renderer.renderBlock(block, data, blocksEl);
+          if (el) blocksEl.appendChild(el);
+        }
+      }
+    }
+
     // WebSocket is now just a notification trigger, not data source
     // Actual blocks come from database polling in startChunkPolling()
   }
@@ -1131,6 +1162,14 @@ class AgentGUIClient {
       this.saveScrollPosition(conversationId);
     }
 
+    // Fetch any final chunks that may have been missed during polling
+    // This ensures all output is visible without requiring a page refresh
+    if (conversationId && sessionId) {
+      this.fetchRemainingChunks(conversationId, sessionId).catch(err => {
+        console.warn('Final chunk fetch failed:', err.message);
+      });
+    }
+
     this.enableControls();
     this.emit('streaming:complete', data);
 
@@ -1935,7 +1974,10 @@ class AgentGUIClient {
     if (pollState.isPolling) return;
 
     pollState.isPolling = true;
-    pollState.lastFetchTimestamp = Date.now();
+    // Only reset lastFetchTimestamp if it wasn't already set by initial fetch
+    if (pollState.lastFetchTimestamp === 0) {
+      pollState.lastFetchTimestamp = Date.now();
+    }
     pollState.backoffDelay = this._getAdaptivePollInterval();
     pollState.sessionCheckCounter = 0;
     pollState.emptyPollCount = 0;
@@ -2045,6 +2087,23 @@ class AgentGUIClient {
     if (this._placeholderTimer) { clearTimeout(this._placeholderTimer); this._placeholderTimer = null; }
   }
 
+  /**
+   * Fetch any remaining chunks after streaming completes
+   * Ensures all output is visible without requiring a page refresh
+   */
+  async fetchRemainingChunks(conversationId, sessionId) {
+    try {
+      const lastTimestamp = this.chunkPollState.lastFetchTimestamp || 0;
+      const chunks = await this.fetchChunks(conversationId, lastTimestamp);
+      const sessionChunks = chunks.filter(c => c.sessionId === sessionId && c.block && c.block.type);
+      if (sessionChunks.length > 0) {
+        this.renderChunkBatch(sessionChunks);
+      }
+    } catch (err) {
+      console.error('Failed to fetch remaining chunks:', err);
+    }
+  }
+
   /**
    * Render a single chunk to the output
    */

package/static/js/streaming-renderer.js

@@ -334,7 +334,9 @@ class StreamingRenderer {
         case 'code_block':
           return this.renderCode(event);
         case 'thinking_block':
-          return this.renderThinking(event);
+          // Thinking blocks are now rendered immediately via handleStreamingProgress
+          // Don't render them here to avoid duplicates
+          return null;
         case 'tool_use':
           return this.renderToolUse(event);
         default:

package/static/js/tools-manager.js

@@ -287,6 +287,17 @@
         operationInProgress.delete(data.toolId);
         render();
       }
+    } else if (data.type === 'tool_status_update') {
+      var tool = tools.find(t => t.id === data.toolId);
+      if (tool && data.data) {
+        if (data.data.installed) {
+          tool.status = data.data.isUpToDate ? 'installed' : 'needs_update';
+          tool.installed = true;
+          tool.isUpToDate = data.data.isUpToDate ?? true;
+          tool.installedVersion = data.data.installedVersion || tool.installedVersion;
+        }
+        render();
+      }
     } else if (data.type === 'tools_update_complete') {
       fetchTools();
     } else if (data.type === 'tools_refresh_complete') {

package/test-cli-detection.mjs

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+import { checkCliInstalled, getCliVersion } from './lib/tool-manager.js';
+import { execSync } from 'child_process';
+
+console.log('=== CLI Tool Detection Test ===\n');
+
+const tools = [
+  { pkg: '@anthropic-ai/claude-code', bin: 'claude' },
+  { pkg: 'opencode-ai', bin: 'opencode' },
+  { pkg: '@google/gemini-cli', bin: 'gemini' },
+  { pkg: '@kilocode/cli', bin: 'kilo' },
+  { pkg: '@openai/codex', bin: 'codex' }
+];
+
+tools.forEach(tool => {
+  try {
+    // Direct which check
+    const which = process.platform === 'win32' ? 'where' : 'which';
+    execSync(`${which} ${tool.bin}`, { stdio: 'pipe', timeout: 3000 });
+    const version = execSync(`${tool.bin} --version`, { stdio: 'pipe', timeout: 2000, encoding: 'utf8' }).trim();
+    const match = version.match(/(\d+\.\d+\.\d+)/);
+    console.log(`✓ ${tool.pkg}`);
+    console.log(`  Binary: ${tool.bin} (found)`);
+    console.log(`  Version output: ${version.substring(0, 50)}`);
+    console.log(`  Parsed version: ${match ? match[1] : 'NOT FOUND'}`);
+  } catch (e) {
+    console.log(`✗ ${tool.pkg}`);
+    console.log(`  Binary: ${tool.bin} (not found in PATH)`);
+  }
+  console.log();
+});
+
+console.log('=== Testing Tool Manager Functions ===\n');
+
+// Test with promises
+console.log('Note: Tool manager functions require async context');
+console.log('Use tool-manager directly in server to test full functionality');

package/test-system-validation.js

@@ -0,0 +1,188 @@
+#!/usr/bin/env node
+
+/**
+ * System Validation Script
+ * Verifies that CLI tools are properly detected and agents are available
+ * Usage: node test-system-validation.js
+ */
+
+import { execSync } from 'child_process';
+import os from 'os';
+import fs from 'fs';
+import path from 'path';
+
+const homeDir = os.homedir();
+const colors = {
+  reset: '\x1b[0m',
+  green: '\x1b[32m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m'
+};
+
+function log(color, label, message) {
+  console.log(`${colors[color]}[${label}]${colors.reset} ${message}`);
+}
+
+function success(label, message) {
+  log('green', label, message);
+}
+
+function error(label, message) {
+  log('red', label, message);
+}
+
+function warn(label, message) {
+  log('yellow', label, message);
+}
+
+function info(label, message) {
+  log('blue', label, message);
+}
+
+// Test CLI tool detection
+function testCLIDetection() {
+  info('TEST', 'CLI Tool Detection');
+
+  const tools = [
+    { pkg: '@anthropic-ai/claude-code', bin: 'claude', name: 'Claude Code' },
+    { pkg: 'opencode-ai', bin: 'opencode', name: 'OpenCode' },
+    { pkg: '@google/gemini-cli', bin: 'gemini', name: 'Gemini CLI' },
+    { pkg: '@kilocode/cli', bin: 'kilo', name: 'Kilo Code' },
+    { pkg: '@openai/codex', bin: 'codex', name: 'Codex CLI' }
+  ];
+
+  let foundCount = 0;
+
+  for (const tool of tools) {
+    try {
+      const cmd = os.platform() === 'win32' ? 'where' : 'which';
+      const result = execSync(`${cmd} ${tool.bin}`, { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
+
+      if (result) {
+        success(tool.name, `Found at ${result}`);
+
+        // Try to get version
+        try {
+          const version = execSync(`${tool.bin} --version`, { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] });
+          const match = version.match(/(\d+\.\d+\.\d+)/);
+          if (match) {
+            success(tool.name, `Version ${match[1]}`);
+          }
+        } catch (_) {
+          warn(tool.name, 'Could not detect version');
+        }
+
+        foundCount++;
+      }
+    } catch (_) {
+      error(tool.name, 'NOT FOUND in PATH');
+    }
+  }
+
+  console.log(`\n✓ CLI Detection Summary: ${foundCount}/${tools.length} tools found\n`);
+  return foundCount > 0;
+}
+
+// Test agent discovery paths
+function testAgentPaths() {
+  info('TEST', 'Agent Plugin Paths');
+
+  const paths = [
+    { label: 'Claude Code Plugin', path: path.join(homeDir, '.claude', 'plugins', 'gm-cc') },
+    { label: 'OpenCode Agent', path: path.join(homeDir, '.config', 'opencode', 'agents', 'gm.md') },
+    { label: 'Gemini Extension', path: path.join(homeDir, '.gemini', 'extensions', 'gm') },
+    { label: 'Kilo Agent', path: path.join(homeDir, '.config', 'kilo', 'agents', 'gm.md') }
+  ];
+
+  let foundCount = 0;
+
+  for (const { label, path: p } of paths) {
+    if (fs.existsSync(p)) {
+      success(label, `Found at ${p}`);
+      foundCount++;
+    } else {
+      warn(label, `Not found at ${p}`);
+    }
+  }
+
+  console.log(`\n✓ Agent Paths Summary: ${foundCount}/${paths.length} agent paths exist\n`);
+  return foundCount > 0;
+}
+
+// Test Node.js binary discovery
+function testNodeBinaries() {
+  info('TEST', 'Node Modules Binaries');
+
+  const agentguiPath = '/config/workspace/agentgui';
+  const binaries = ['claude', 'opencode', 'gemini', 'kilo', 'codex'];
+
+  let foundCount = 0;
+
+  for (const bin of binaries) {
+    const path = `${agentguiPath}/node_modules/.bin/${bin}`;
+    if (fs.existsSync(path)) {
+      success(`Binary: ${bin}`, `Found at ${path}`);
+      foundCount++;
+    } else {
+      warn(`Binary: ${bin}`, `NOT found at ${path}`);
+    }
+  }
+
+  console.log(`\n✓ Node Binaries Summary: ${foundCount}/${binaries.length} binaries found\n`);
+  return foundCount > 0;
+}
+
+// Test ES module imports
+function testESModuleImports() {
+  info('TEST', 'ES Module Imports (tool-manager.js)');
+
+  try {
+    const toolManagerPath = '/config/workspace/agentgui/lib/tool-manager.js';
+    const content = fs.readFileSync(toolManagerPath, 'utf8');
+
+    // Check for proper execSync import
+    if (content.includes('import { spawn, execSync } from \'child_process\'')) {
+      success('execSync Import', 'Properly imported from child_process');
+    } else {
+      error('execSync Import', 'NOT found or incorrectly imported');
+      return false;
+    }
+
+    // Check that require() is not used
+    if (!content.includes('require(\'child_process\')')) {
+      success('No require()', 'No CommonJS require() calls found');
+    } else {
+      error('require() Calls', 'Found require() calls which won\'t work in ES modules');
+      return false;
+    }
+
+    console.log();
+    return true;
+  } catch (err) {
+    error('File Read', err.message);
+    return false;
+  }
+}
+
+// Run all tests
+console.log('\n' + colors.blue + '═══════════════════════════════════════════════════════════' + colors.reset);
+console.log(colors.blue + '  AgentGUI System Validation' + colors.reset);
+console.log(colors.blue + '═══════════════════════════════════════════════════════════' + colors.reset + '\n');
+
+let allPassed = true;
+
+allPassed &= testCLIDetection();
+allPassed &= testAgentPaths();
+allPassed &= testNodeBinaries();
+allPassed &= testESModuleImports();
+
+console.log(colors.blue + '═══════════════════════════════════════════════════════════' + colors.reset);
+if (allPassed) {
+  success('RESULT', 'All critical checks passed! System should work correctly.');
+} else {
+  warn('RESULT', 'Some checks failed. Review errors above.');
+}
+console.log(colors.blue + '═══════════════════════════════════════════════════════════' + colors.reset + '\n');
+
+process.exit(allPassed ? 0 : 1);