agentgui 1.0.248 → 1.0.250

package/package.json

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

package/static/index.html

@@ -2753,6 +2753,7 @@
   <script defer src="/gm/js/syntax-highlighter.js"></script>
   <script defer src="/gm/js/dialogs.js"></script>
   <script defer src="/gm/js/ui-components.js"></script>
+  <script defer src="/gm/js/progress-dialog.js"></script>
   <script defer src="/gm/js/conversations.js"></script>
   <script defer src="/gm/js/client.js"></script>
   <script type="module" src="/gm/js/voice.js"></script>

package/static/js/client.js

@@ -2044,8 +2044,11 @@ class AgentGUIClient {
         window._voiceProgressDialog.close();
         window._voiceProgressDialog = null;
       }
+      const errorMsg = 'Failed to download voice models: ' + progress.error;
       if (window.UIDialog) {
-        window.UIDialog.alert('Failed to download voice models: ' + progress.error, 'Download Error');
+        window.UIDialog.alert(errorMsg, 'Download Error');
+      } else {
+        alert(errorMsg);
       }
       return;
     }

package/static/js/features.js

@@ -208,10 +208,22 @@
   function triggerVoiceModelDownload() {
     var client = window.agentGUIClient;
     if (client && client._modelDownloadInProgress) {
+      if (window._voiceProgressDialog) {
+        return;
+      }
       showToast('Voice models downloading... please wait', 'info');
       return;
     }
-    showToast('Starting voice model download...', 'info');
+
+    if (!window._voiceProgressDialog) {
+      window._voiceProgressDialog = new ProgressDialog({
+        title: 'Voice Models',
+        message: 'Preparing to download voice models...',
+        percentage: 0,
+        cancellable: false
+      });
+    }
+
     fetch((window.__BASE_URL || '') + '/api/speech-status', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -219,12 +231,22 @@
     }).then(function(res) { return res.json(); })
     .then(function(data) {
       if (data.ok) {
-        showToast('Downloading voice models... will auto-open when ready', 'info');
         window._voiceTabPendingOpen = true;
+        if (window._voiceProgressDialog) {
+          window._voiceProgressDialog.update(0, 'Starting download...');
+        }
       } else {
+        if (window._voiceProgressDialog) {
+          window._voiceProgressDialog.close();
+          window._voiceProgressDialog = null;
+        }
         showToast('Failed to start download: ' + (data.error || 'unknown'), 'error');
       }
     }).catch(function(err) {
+      if (window._voiceProgressDialog) {
+        window._voiceProgressDialog.close();
+        window._voiceProgressDialog = null;
+      }
       showToast('Download request failed: ' + err.message, 'error');
     });
   }

package/static/js/progress-dialog.js

@@ -0,0 +1,130 @@
+/**
+ * Progress Dialog
+ * Modal dialog for displaying download/upload progress
+ */
+
+class ProgressDialog {
+  constructor(config = {}) {
+    this.title = config.title || 'Progress';
+    this.message = config.message || 'Processing...';
+    this.percentage = config.percentage || 0;
+    this.cancellable = config.cancellable || false;
+    this.onCancel = config.onCancel || null;
+    this.overlay = null;
+    this.progressBar = null;
+    this.progressText = null;
+    this.messageEl = null;
+    this._create();
+  }
+
+  _create() {
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'folder-modal-overlay visible';
+    this.overlay.style.zIndex = '3000';
+
+    const modal = document.createElement('div');
+    modal.className = 'folder-modal';
+    modal.style.width = '400px';
+
+    const header = document.createElement('div');
+    header.className = 'folder-modal-header';
+    header.innerHTML = `
+      <h3>${this._escapeHtml(this.title)}</h3>
+      ${this.cancellable ? '<button class="folder-modal-close" aria-label="Cancel">&times;</button>' : ''}
+    `;
+
+    const body = document.createElement('div');
+    body.style.padding = '1.5rem 1rem';
+
+    this.messageEl = document.createElement('div');
+    this.messageEl.style.marginBottom = '1rem';
+    this.messageEl.style.fontSize = '0.875rem';
+    this.messageEl.style.color = 'var(--color-text-primary)';
+    this.messageEl.textContent = this.message;
+
+    const progressContainer = document.createElement('div');
+    progressContainer.style.marginBottom = '0.5rem';
+
+    this.progressBar = document.createElement('div');
+    this.progressBar.style.width = '100%';
+    this.progressBar.style.height = '8px';
+    this.progressBar.style.backgroundColor = 'var(--color-bg-secondary)';
+    this.progressBar.style.borderRadius = '4px';
+    this.progressBar.style.overflow = 'hidden';
+
+    const progressFill = document.createElement('div');
+    progressFill.className = 'progress-fill';
+    progressFill.style.height = '100%';
+    progressFill.style.backgroundColor = 'var(--color-primary)';
+    progressFill.style.width = this.percentage + '%';
+    progressFill.style.transition = 'width 0.3s ease';
+
+    this.progressBar.appendChild(progressFill);
+    progressContainer.appendChild(this.progressBar);
+
+    this.progressText = document.createElement('div');
+    this.progressText.style.fontSize = '0.75rem';
+    this.progressText.style.color = 'var(--color-text-secondary)';
+    this.progressText.style.textAlign = 'right';
+    this.progressText.style.marginTop = '0.25rem';
+    this.progressText.textContent = Math.round(this.percentage) + '%';
+
+    body.appendChild(this.messageEl);
+    body.appendChild(progressContainer);
+    body.appendChild(this.progressText);
+
+    modal.appendChild(header);
+    modal.appendChild(body);
+    this.overlay.appendChild(modal);
+
+    if (this.cancellable) {
+      const closeBtn = header.querySelector('.folder-modal-close');
+      closeBtn.addEventListener('click', () => this._handleCancel());
+    }
+
+    document.body.appendChild(this.overlay);
+  }
+
+  update(percentage, message) {
+    if (message !== undefined) {
+      this.message = message;
+      if (this.messageEl) {
+        this.messageEl.textContent = message;
+      }
+    }
+
+    if (percentage !== undefined) {
+      this.percentage = Math.min(100, Math.max(0, percentage));
+      const fill = this.progressBar?.querySelector('.progress-fill');
+      if (fill) {
+        fill.style.width = this.percentage + '%';
+      }
+      if (this.progressText) {
+        this.progressText.textContent = Math.round(this.percentage) + '%';
+      }
+    }
+  }
+
+  close() {
+    if (this.overlay && this.overlay.parentNode) {
+      this.overlay.remove();
+    }
+  }
+
+  _handleCancel() {
+    if (this.onCancel) {
+      this.onCancel();
+    }
+    this.close();
+  }
+
+  _escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = ProgressDialog;
+}

package/static/js/streaming-renderer.js

@@ -424,7 +424,9 @@ class StreamingRenderer {
       'image': 9,
       'plan': 10,
       'usage': 11,
-      'premature': 8
+      'premature': 8,
+      'tool_status': 7,
+      'generic': 0
     };
     return typeColors[blockType] !== undefined ? typeColors[blockType] : 0;
   }
@@ -1501,6 +1503,8 @@ class StreamingRenderer {
   renderBlockGeneric(block, context) {
     const div = document.createElement('div');
     div.className = 'block-generic';
+    const colorIndex = this._getBlockColorIndex('generic');
+    div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     // Show key-value pairs instead of raw JSON
     const fieldsHtml = Object.entries(block)
@@ -1532,6 +1536,8 @@ class StreamingRenderer {
   renderBlockError(block, error) {
     const div = document.createElement('div');
     div.className = 'block-error';
+    const colorIndex = this._getBlockColorIndex('error');
+    div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     div.innerHTML = `
       <div style="display:flex;align-items:flex-start;gap:0.625rem">