agentgui 1.0.260 → 1.0.262

package/static/js/client.js

@@ -494,7 +494,7 @@ class AgentGUIClient {
           this.handleRateLimitClear(data);
           break;
         case 'model_download_progress':
-          this._handleModelDownloadProgress(data.progress);
+          this._handleModelDownloadProgress(data.progress || data);
           break;
         default:
           break;
@@ -1188,9 +1188,10 @@ class AgentGUIClient {
             const tTitle = hasRenderer && block.input ? StreamingRenderer.getToolTitle(tn, block.input) : '';
             const iconHtml = hasRenderer && this.renderer ? `<span class="folded-tool-icon">${this.renderer.getToolIcon(tn)}</span>` : '';
             const typeClass = hasRenderer && this.renderer ? this.renderer._getBlockTypeClass('tool_use') : 'block-type-tool_use';
+            const toolColorClass = hasRenderer && this.renderer ? this.renderer._getToolColorClass(tn) : 'tool-color-default';
             const nextBlock = blocks[blockIdx + 1];
             const resultClass = nextBlock?.type === 'tool_result' ? (nextBlock.is_error ? 'has-error' : 'has-success') : '';
-            html += `<details class="block-tool-use folded-tool ${typeClass} ${resultClass}"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}`;
+            html += `<details class="block-tool-use folded-tool ${typeClass} ${toolColorClass} ${resultClass}"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}`;
             pendingToolUseClose = true;
           } else if (block.type === 'tool_result') {
             const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
@@ -2027,16 +2028,16 @@ class AgentGUIClient {
 
   _handleModelDownloadProgress(progress) {
     this._modelDownloadProgress = progress;
-    
-    if (progress.error) {
+
+    if (progress.status === 'failed' || progress.error) {
       this._modelDownloadInProgress = false;
-      console.error('[Models] Download error:', progress.error);
+      console.error('[Models] Download error:', progress.error || progress.status);
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
       if (window._voiceProgressDialog) {
         window._voiceProgressDialog.close();
         window._voiceProgressDialog = null;
       }
-      const errorMsg = 'Failed to download voice models: ' + progress.error;
+      const errorMsg = 'Failed to download voice models: ' + (progress.error || 'unknown error');
       if (window.UIDialog) {
         window.UIDialog.alert(errorMsg, 'Download Error');
       } else {
@@ -2044,8 +2045,8 @@ class AgentGUIClient {
       }
       return;
     }
-    
-    if (progress.done) {
+
+    if (progress.done || progress.status === 'completed') {
       this._modelDownloadInProgress = false;
       console.log('[Models] Download complete');
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
@@ -2066,8 +2067,8 @@ class AgentGUIClient {
       }
       return;
     }
-    
-    if (progress.started || progress.downloading) {
+
+    if (progress.started || progress.downloading || progress.status === 'downloading' || progress.status === 'connecting') {
       this._modelDownloadInProgress = true;
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
 
@@ -2075,13 +2076,26 @@ class AgentGUIClient {
         window.__showVoiceDownloadProgress();
       }
 
-      if (window._voiceProgressDialog && progress.totalBytes > 0) {
-        var pct = Math.round((progress.totalDownloaded / progress.totalBytes) * 100);
-        var mb = Math.round(progress.totalBytes / 1024 / 1024);
-        var downloaded = Math.round((progress.totalDownloaded || 0) / 1024 / 1024);
-        window._voiceProgressDialog.update(pct, 'Downloading ' + downloaded + 'MB / ' + mb + 'MB');
-      } else if (window._voiceProgressDialog && progress.file) {
-        window._voiceProgressDialog.update(0, 'Loading ' + progress.file + '...');
+      if (window._voiceProgressDialog) {
+        let displayText = 'Downloading models...';
+
+        if (progress.status === 'connecting') {
+          displayText = 'Connecting to ' + (progress.currentGateway || 'gateway') + '...';
+        } else if (progress.totalBytes > 0) {
+          const downloaded = (progress.bytesDownloaded || 0) / 1024 / 1024;
+          const total = progress.totalBytes / 1024 / 1024;
+          const speed = progress.downloadSpeed ? (progress.downloadSpeed / 1024 / 1024).toFixed(2) : '0';
+          const eta = progress.eta ? Math.ceil(progress.eta) + 's' : '...';
+          const retryInfo = progress.retryCount > 0 ? ` (retry ${progress.retryCount})` : '';
+
+          displayText = `Downloading ${downloaded.toFixed(1)}MB / ${total.toFixed(1)}MB @ ${speed}MB/s (ETA: ${eta})${retryInfo}`;
+        } else if (progress.file) {
+          displayText = 'Loading ' + progress.file + '...';
+        } else if (progress.completedFiles && progress.totalFiles) {
+          displayText = `Downloaded ${progress.completedFiles}/${progress.totalFiles} files`;
+        }
+
+        window._voiceProgressDialog.update(progress.percentComplete || 0, displayText);
       }
     }
   }

package/static/js/streaming-renderer.js

@@ -422,6 +422,12 @@ class StreamingRenderer {
     return validTypes.includes(blockType) ? `block-type-${blockType}` : 'block-type-generic';
   }
 
+  _getToolColorClass(toolName) {
+    const n = (toolName || '').replace(/^mcp__[^_]+__/, '').toLowerCase();
+    const map = { read: 'read', write: 'write', edit: 'edit', bash: 'bash', glob: 'glob', grep: 'grep', webfetch: 'web', websearch: 'web', todowrite: 'todo', task: 'task', notebookedit: 'edit' };
+    return `tool-color-${map[n] || 'default'}`;
+  }
+
   containsHtmlTags(text) {
     const htmlPattern = /<(?:div|table|section|article|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6]|p|blockquote|pre|code|span|strong|em|a|img|br|hr|li|td|tr|th|thead|tbody|tfoot)\b[^>]*>/i;
     return htmlPattern.test(text);
@@ -737,6 +743,7 @@ class StreamingRenderer {
     details.className = 'block-tool-use folded-tool';
     if (block.id) details.dataset.toolUseId = block.id;
     details.classList.add(this._getBlockTypeClass('tool_use'));
+    details.classList.add(this._getToolColorClass(toolName));
     const summary = document.createElement('summary');
     summary.className = 'folded-tool-bar';
     const displayName = this.getToolUseDisplayName(toolName);
@@ -1625,6 +1632,8 @@ class StreamingRenderer {
     const fileName = event.path ? event.path.split('/').pop() : 'unknown';
     const details = document.createElement('details');
     details.className = 'block-tool-use folded-tool';
+    details.classList.add(this._getBlockTypeClass('tool_use'));
+    details.classList.add(this._getToolColorClass('Read'));
     details.dataset.eventId = event.id || '';
     details.dataset.eventType = 'file_read';
     const summary = document.createElement('summary');
@@ -1656,6 +1665,8 @@ class StreamingRenderer {
     const fileName = event.path ? event.path.split('/').pop() : 'unknown';
     const details = document.createElement('details');
     details.className = 'block-tool-use folded-tool';
+    details.classList.add(this._getBlockTypeClass('tool_use'));
+    details.classList.add(this._getToolColorClass('Write'));
     details.dataset.eventId = event.id || '';
     details.dataset.eventType = 'file_write';
     const summary = document.createElement('summary');
@@ -1719,6 +1730,8 @@ class StreamingRenderer {
 
     const details = document.createElement('details');
     details.className = 'block-tool-use folded-tool';
+    details.classList.add(this._getBlockTypeClass('tool_use'));
+    details.classList.add(this._getToolColorClass('Bash'));
     details.dataset.eventId = event.id || '';
     details.dataset.eventType = 'command_execute';
     const summary = document.createElement('summary');

package/test-download-progress.js

@@ -0,0 +1,223 @@
+import https from 'https';
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+const testDir = path.join(os.tmpdir(), 'test-download-progress');
+if (!fs.existsSync(testDir)) {
+  fs.mkdirSync(testDir, { recursive: true });
+}
+
+const GATEWAYS = [
+  'https://ipfs.io',
+  'https://gateway.pinata.cloud',
+  'https://cloudflare-ipfs.com',
+];
+
+function downloadWithProgress(url, destination, onProgress = null) {
+  let bytesDownloaded = 0;
+  let totalBytes = 0;
+  let lastProgressTime = Date.now();
+  let lastProgressBytes = 0;
+  const speeds = [];
+  let retryCount = 0;
+  let gatewayIndex = 0;
+
+  const emitProgress = () => {
+    const now = Date.now();
+    const deltaTime = (now - lastProgressTime) / 1000;
+    const deltaBytes = bytesDownloaded - lastProgressBytes;
+    const speed = deltaTime > 0 ? Math.round(deltaBytes / deltaTime) : 0;
+
+    if (speed > 0) {
+      speeds.push(speed);
+      if (speeds.length > 10) speeds.shift();
+    }
+
+    const avgSpeed = speeds.length > 0 ? Math.round(speeds.reduce((a, b) => a + b, 0) / speeds.length) : 0;
+    const eta = avgSpeed > 0 && totalBytes > bytesDownloaded ? Math.round((totalBytes - bytesDownloaded) / avgSpeed) : 0;
+
+    if (onProgress) {
+      onProgress({
+        bytesDownloaded,
+        bytesRemaining: Math.max(0, totalBytes - bytesDownloaded),
+        totalBytes,
+        downloadSpeed: avgSpeed,
+        eta,
+        retryCount,
+        currentGateway: url,
+        status: bytesDownloaded >= totalBytes ? 'completed' : 'downloading',
+        percentComplete: totalBytes > 0 ? Math.round((bytesDownloaded / totalBytes) * 100) : 0,
+        timestamp: now
+      });
+    }
+
+    lastProgressTime = now;
+    lastProgressBytes = bytesDownloaded;
+  };
+
+  return new Promise((resolve, reject) => {
+    const dir = path.dirname(destination);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    const attemptDownload = (gateway) => {
+      if (onProgress) {
+        onProgress({
+          bytesDownloaded: 0,
+          bytesRemaining: 0,
+          totalBytes: 0,
+          downloadSpeed: 0,
+          eta: 0,
+          retryCount,
+          currentGateway: gateway,
+          status: 'connecting',
+          percentComplete: 0,
+          timestamp: Date.now()
+        });
+      }
+
+      https.get(gateway, { timeout: 30000 }, (res) => {
+        if ([301, 302, 307, 308].includes(res.statusCode)) {
+          const location = res.headers.location;
+          if (location) return attemptDownload(location);
+        }
+
+        if (res.statusCode !== 200) {
+          res.resume();
+          if (gatewayIndex < GATEWAYS.length - 1) {
+            retryCount++;
+            gatewayIndex++;
+            return setTimeout(() => attemptDownload(GATEWAYS[gatewayIndex]), 1000 * Math.pow(2, Math.min(retryCount, 3)));
+          }
+          return reject(new Error(`HTTP ${res.statusCode}`));
+        }
+
+        totalBytes = parseInt(res.headers['content-length'], 10) || 0;
+        bytesDownloaded = 0;
+        lastProgressBytes = 0;
+        lastProgressTime = Date.now();
+
+        const file = fs.createWriteStream(destination);
+        let lastEmit = Date.now();
+
+        res.on('data', (chunk) => {
+          bytesDownloaded += chunk.length;
+          const now = Date.now();
+          if (now - lastEmit >= 200) {
+            emitProgress();
+            lastEmit = now;
+          }
+        });
+
+        res.on('end', () => {
+          emitProgress();
+          file.destroy();
+          resolve({ destination, bytesDownloaded, success: true });
+        });
+
+        res.on('error', (err) => {
+          file.destroy();
+          fs.unlink(destination, () => {});
+          if (gatewayIndex < GATEWAYS.length - 1) {
+            retryCount++;
+            gatewayIndex++;
+            return setTimeout(() => attemptDownload(GATEWAYS[gatewayIndex]), 1000 * Math.pow(2, Math.min(retryCount, 3)));
+          }
+          reject(err);
+        });
+
+        file.on('error', (err) => {
+          res.destroy();
+          fs.unlink(destination, () => {});
+          if (gatewayIndex < GATEWAYS.length - 1) {
+            retryCount++;
+            gatewayIndex++;
+            return setTimeout(() => attemptDownload(GATEWAYS[gatewayIndex]), 1000 * Math.pow(2, Math.min(retryCount, 3)));
+          }
+          reject(err);
+        });
+
+        res.pipe(file);
+      }).on('timeout', () => {
+        if (gatewayIndex < GATEWAYS.length - 1) {
+          retryCount++;
+          gatewayIndex++;
+          return setTimeout(() => attemptDownload(GATEWAYS[gatewayIndex]), 1000 * Math.pow(2, Math.min(retryCount, 3)));
+        }
+        reject(new Error('Download timeout'));
+      }).on('error', (err) => {
+        if (gatewayIndex < GATEWAYS.length - 1) {
+          retryCount++;
+          gatewayIndex++;
+          return setTimeout(() => attemptDownload(GATEWAYS[gatewayIndex]), 1000 * Math.pow(2, Math.min(retryCount, 3)));
+        }
+        reject(err);
+      });
+    };
+
+    attemptDownload(GATEWAYS[0]);
+  });
+}
+
+let progressCount = 0;
+let lastPrintTime = Date.now();
+let minInterval = Infinity;
+let maxInterval = 0;
+const progressIntervals = [];
+
+console.log('Starting download progress tracking test...\n');
+
+downloadWithProgress(
+  'https://www.w3.org/WAI/WCAG21/Techniques/pdf/pdf-files/table-example.pdf',
+  path.join(testDir, 'test-file.pdf'),
+  (progress) => {
+    progressCount++;
+    const now = Date.now();
+    const interval = now - lastPrintTime;
+
+    if (progressCount > 1) {
+      progressIntervals.push(interval);
+      minInterval = Math.min(minInterval, interval);
+      maxInterval = Math.max(maxInterval, interval);
+    }
+
+    console.log(`[${progressCount}] Progress Update:
+  Status: ${progress.status}
+  Downloaded: ${(progress.bytesDownloaded / 1024).toFixed(1)}KB / ${(progress.totalBytes / 1024).toFixed(1)}KB
+  Speed: ${(progress.downloadSpeed / 1024).toFixed(2)}MB/s
+  ETA: ${progress.eta}s
+  Complete: ${progress.percentComplete}%
+  Retry Count: ${progress.retryCount}
+  Gateway: ${progress.currentGateway}
+  Interval: ${interval}ms\n`);
+
+    lastPrintTime = now;
+  }
+).then((result) => {
+  const avgInterval = progressIntervals.length > 0 ? progressIntervals.reduce((a, b) => a + b, 0) / progressIntervals.length : 0;
+  console.log('\n=== Download Complete ===');
+  console.log(`Result: ${JSON.stringify(result, null, 2)}`);
+  console.log(`\nProgress Tracking Statistics:
+  Total Updates: ${progressCount}
+  Interval Range: ${minInterval}ms - ${maxInterval}ms
+  Average Interval: ${avgInterval.toFixed(0)}ms
+  Expected Interval: 200ms (should be 100-500ms range)`);
+
+  if (avgInterval >= 100 && avgInterval <= 500) {
+    console.log('  Status: PASS - Progress interval within acceptable range');
+  } else {
+    console.log('  Status: FAIL - Progress interval outside acceptable range');
+  }
+
+  if (fs.existsSync(path.join(testDir, 'test-file.pdf'))) {
+    const stat = fs.statSync(path.join(testDir, 'test-file.pdf'));
+    console.log(`\nDownloaded file size: ${(stat.size / 1024).toFixed(1)}KB`);
+  }
+
+  process.exit(0);
+}).catch((err) => {
+  console.error('Download failed:', err.message);
+  process.exit(1);
+});

package/test-websocket-broadcast.js

@@ -0,0 +1,147 @@
+import { WebSocketServer } from 'ws';
+import http from 'http';
+import path from 'path';
+import os from 'os';
+
+const PORT = 8899;
+const server = http.createServer();
+const wss = new WebSocketServer({ server, clientTracking: true });
+
+let broadcastedMessages = [];
+let clientConnected = false;
+
+wss.on('connection', (ws) => {
+  clientConnected = true;
+  console.log('[WS] Client connected');
+
+  ws.on('message', (data) => {
+    const msg = JSON.parse(data);
+    console.log('[WS] Client sent:', msg.type);
+  });
+
+  ws.on('close', () => {
+    clientConnected = false;
+    console.log('[WS] Client disconnected');
+  });
+});
+
+function broadcastSync(event) {
+  if (wss.clients.size === 0) return;
+  const data = JSON.stringify(event);
+  broadcastedMessages.push(event);
+  for (const client of wss.clients) {
+    if (client.readyState === 1) {
+      client.send(data);
+    }
+  }
+}
+
+function broadcastModelProgress(progress) {
+  const broadcastData = {
+    type: 'model_download_progress',
+    modelId: progress.type || 'unknown',
+    bytesDownloaded: progress.bytesDownloaded || 0,
+    bytesRemaining: progress.bytesRemaining || 0,
+    totalBytes: progress.totalBytes || 0,
+    downloadSpeed: progress.downloadSpeed || 0,
+    eta: progress.eta || 0,
+    retryCount: progress.retryCount || 0,
+    currentGateway: progress.currentGateway || '',
+    status: progress.status || (progress.done ? 'completed' : progress.downloading ? 'downloading' : 'paused'),
+    percentComplete: progress.percentComplete || 0,
+    completedFiles: progress.completedFiles || 0,
+    totalFiles: progress.totalFiles || 0,
+    timestamp: Date.now(),
+    ...progress
+  };
+  broadcastSync(broadcastData);
+}
+
+server.listen(PORT, () => {
+  console.log(`[Server] Listening on ws://localhost:${PORT}`);
+
+  setTimeout(() => {
+    console.log('\n[Test] Simulating model download progress...\n');
+
+    broadcastModelProgress({
+      type: 'stt',
+      started: true,
+      downloading: true,
+      completedFiles: 0,
+      totalFiles: 10
+    });
+
+    setTimeout(() => {
+      broadcastModelProgress({
+        type: 'stt',
+        bytesDownloaded: 5242880,
+        bytesRemaining: 20971520,
+        totalBytes: 26214400,
+        downloadSpeed: 1048576,
+        eta: 20,
+        retryCount: 0,
+        currentGateway: 'https://huggingface.co/',
+        status: 'downloading',
+        percentComplete: 20,
+        completedFiles: 2,
+        totalFiles: 10
+      });
+
+      setTimeout(() => {
+        broadcastModelProgress({
+          type: 'stt',
+          bytesDownloaded: 15728640,
+          bytesRemaining: 10485760,
+          totalBytes: 26214400,
+          downloadSpeed: 2097152,
+          eta: 5,
+          retryCount: 0,
+          currentGateway: 'https://huggingface.co/',
+          status: 'downloading',
+          percentComplete: 60,
+          completedFiles: 6,
+          totalFiles: 10
+        });
+
+        setTimeout(() => {
+          broadcastModelProgress({
+            type: 'stt',
+            started: true,
+            done: true,
+            downloading: false,
+            completedFiles: 10,
+            totalFiles: 10,
+            status: 'completed'
+          });
+
+          setTimeout(() => {
+            console.log('\n[Test] Broadcasting complete. Results:\n');
+            console.log(`Broadcasted messages: ${broadcastedMessages.length}`);
+            console.log(`Client connected: ${clientConnected}`);
+
+            console.log('\nMessage types:');
+            broadcastedMessages.forEach((msg, idx) => {
+              console.log(`  [${idx + 1}] Type: ${msg.type}`);
+              console.log(`      Status: ${msg.status}`);
+              console.log(`      Complete: ${msg.percentComplete || msg.completedFiles}%`);
+              console.log(`      Speed: ${msg.downloadSpeed ? (msg.downloadSpeed / 1024 / 1024).toFixed(2) + 'MB/s' : 'N/A'}`);
+              console.log(`      ETA: ${msg.eta || 0}s`);
+            });
+
+            const requiredFields = ['modelId', 'bytesDownloaded', 'bytesRemaining', 'downloadSpeed', 'eta', 'retryCount', 'currentGateway', 'status'];
+            const allFieldsPresent = broadcastedMessages.every(msg =>
+              requiredFields.every(field => field in msg)
+            );
+
+            console.log(`\nAll required fields present: ${allFieldsPresent ? 'PASS' : 'FAIL'}`);
+            console.log(`Message count >= 3: ${broadcastedMessages.length >= 3 ? 'PASS' : 'FAIL'}`);
+
+            server.close(() => {
+              process.exit(allFieldsPresent && broadcastedMessages.length >= 3 ? 0 : 1);
+            });
+          }, 500);
+        }, 500);
+      }, 500);
+    }, 500);
+  }, 500);
+});