agentgui 1.0.241 → 1.0.243

package/lib/claude-runner.js

@@ -197,7 +197,7 @@ class AgentRunner {
     try {
       return await this._runACPOnce(prompt, cwd, config);
     } catch (err) {
-      const isEmptyExit = err.message && err.message.includes('ACP exited with code');
+      const isEmptyExit = err.isPrematureEnd || (err.message && err.message.includes('ACP exited with code'));
       const isBinaryError = err.code === 'ENOENT' || (err.message && err.message.includes('ENOENT'));
       if ((isEmptyExit || isBinaryError) && _retryCount < maxRetries) {
         const delay = Math.min(1000 * Math.pow(2, _retryCount), 5000);
@@ -205,6 +205,13 @@ class AgentRunner {
         await new Promise(r => setTimeout(r, delay));
         return this.runACP(prompt, cwd, config, _retryCount + 1);
       }
+      if (err.isPrematureEnd) {
+        const premErr = new Error(err.message);
+        premErr.isPrematureEnd = true;
+        premErr.exitCode = err.exitCode;
+        premErr.stderrText = err.stderrText;
+        throw premErr;
+      }
       throw err;
     }
   }
@@ -437,7 +444,11 @@ class AgentRunner {
           resolve({ outputs, sessionId });
         } else {
           const detail = stderrText ? `: ${stderrText.substring(0, 200)}` : '';
-          reject(new Error(`${this.name} ACP exited with code ${code}${detail}`));
+          const err = new Error(`${this.name} ACP exited with code ${code}${detail}`);
+          err.isPrematureEnd = true;
+          err.exitCode = code;
+          err.stderrText = stderrText;
+          reject(err);
         }
       });
 

package/package.json

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

package/server.js

@@ -35,62 +35,71 @@ const modelDownloadState = {
   complete: false
 };
 
+function broadcastModelProgress(progress) {
+  modelDownloadState.progress = progress;
+  broadcastSync({ type: 'model_download_progress', progress });
+}
+
 async function ensureModelsDownloaded() {
-  const { createRequire: cr } = await import('module');
-  const r = cr(import.meta.url);
-  const models = r('sttttsmodels');
-  const checkAllFilesExist = models.checkAllFilesExist;
-  const downloadModels = models.downloadModels;
-  
-  if (checkAllFilesExist && checkAllFilesExist()) {
-    modelDownloadState.complete = true;
-    return true;
-  }
-  
-  if (!downloadModels) {
-    console.log('[MODELS] Download function not available, skipping');
-    modelDownloadState.complete = true;
-    return true;
-  }
-  
   if (modelDownloadState.downloading) {
-    // Wait for current download
     while (modelDownloadState.downloading) {
       await new Promise(r => setTimeout(r, 100));
     }
     return modelDownloadState.complete;
   }
-  
-  modelDownloadState.downloading = true;
-  modelDownloadState.error = null;
-  
+
   try {
-    await downloadModels((progress) => {
-      modelDownloadState.progress = progress;
-      // Broadcast progress to all connected clients
-      broadcastSync({
-        type: 'model_download_progress',
-        progress: {
-          started: progress.started,
-          done: progress.done,
-          error: progress.error,
-          downloading: progress.downloading,
-          type: progress.type,
-          completedFiles: progress.completedFiles,
-          totalFiles: progress.totalFiles,
-          totalDownloaded: progress.totalDownloaded,
-          totalBytes: progress.totalBytes
-        }
-      });
-    });
+    const { createRequire: cr } = await import('module');
+    const r = cr(import.meta.url);
+    const sttttsmodels = r('sttttsmodels');
+    const { sttDir, ttsDir } = sttttsmodels;
+
+    const sttOk = fs.existsSync(sttDir) && fs.readdirSync(sttDir).length > 0;
+    const ttsOk = fs.existsSync(ttsDir) && fs.readdirSync(ttsDir).length > 0;
+
+    if (sttOk && ttsOk) {
+      console.log('[MODELS] All model files present');
+      modelDownloadState.complete = true;
+      return true;
+    }
+
+    modelDownloadState.downloading = true;
+    modelDownloadState.error = null;
+
+    const webtalkWhisper = r('webtalk/whisper-models');
+    const webtalkTTS = r('webtalk/tts-models');
+    const { createConfig } = r('webtalk/config');
+    const config = createConfig({ sdkDir: path.dirname(fileURLToPath(import.meta.url)) });
+    config.modelsDir = path.dirname(sttDir);
+    config.ttsModelsDir = ttsDir;
+    config.sttModelsDir = sttDir;
+    config.whisperBaseUrl = 'https://huggingface.co/onnx-community/whisper-base/resolve/main/';
+    config.ttsBaseUrl = 'https://huggingface.co/datasets/AnEntrypoint/sttttsmodels/resolve/main/tts/';
+
+    const totalFiles = 16;
+    let completedFiles = 0;
+
+    if (!sttOk) {
+      console.log('[MODELS] Downloading STT model...');
+      broadcastModelProgress({ started: true, done: false, downloading: true, type: 'stt', completedFiles, totalFiles });
+      await webtalkWhisper.ensureModel('whisper-base', config);
+      completedFiles += 10;
+    }
+
+    if (!ttsOk) {
+      console.log('[MODELS] Downloading TTS models...');
+      broadcastModelProgress({ started: true, done: false, downloading: true, type: 'tts', completedFiles, totalFiles });
+      await webtalkTTS.ensureTTSModels(config);
+      completedFiles += 6;
+    }
+
     modelDownloadState.complete = true;
+    broadcastModelProgress({ started: true, done: true, downloading: false, completedFiles: totalFiles, totalFiles });
     return true;
   } catch (err) {
+    console.error('[MODELS] Download error:', err.message);
     modelDownloadState.error = err.message;
-    broadcastSync({
-      type: 'model_download_progress',
-      progress: { error: err.message, done: true }
-    });
+    broadcastModelProgress({ done: true, error: err.message });
     return false;
   } finally {
     modelDownloadState.downloading = false;
@@ -327,12 +336,57 @@ const AGENT_DEFAULT_MODELS = {
   ]
 };
 
+async function fetchClaudeModelsFromAPI() {
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey) return null;
+  try {
+    const https = await import('https');
+    return new Promise((resolve) => {
+      const req = https.default.request({
+        hostname: 'api.anthropic.com', path: '/v1/models', method: 'GET',
+        headers: { 'x-api-key': apiKey, 'anthropic-version': '2023-06-01' },
+        timeout: 8000
+      }, (res) => {
+        let body = '';
+        res.on('data', d => body += d);
+        res.on('end', () => {
+          try {
+            const data = JSON.parse(body);
+            const items = (data.data || []).filter(m => m.id && m.id.startsWith('claude-'));
+            if (items.length === 0) return resolve(null);
+            const models = [{ id: '', label: 'Default' }];
+            for (const m of items) {
+              const label = m.display_name || m.id.replace(/^claude-/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+              models.push({ id: m.id, label });
+            }
+            resolve(models);
+          } catch { resolve(null); }
+        });
+      });
+      req.on('error', () => resolve(null));
+      req.on('timeout', () => { req.destroy(); resolve(null); });
+      req.end();
+    });
+  } catch { return null; }
+}
+
 async function getModelsForAgent(agentId) {
   const cached = modelCache.get(agentId);
-  if (cached && Date.now() - cached.timestamp < 300000) {
+  if (cached && Date.now() - cached.timestamp < 3600000) {
     return cached.models;
   }
 
+  if (agentId === 'claude-code') {
+    const apiModels = await fetchClaudeModelsFromAPI();
+    if (apiModels) {
+      modelCache.set(agentId, { models: apiModels, timestamp: Date.now() });
+      return apiModels;
+    }
+    const models = AGENT_DEFAULT_MODELS[agentId];
+    modelCache.set(agentId, { models, timestamp: Date.now() });
+    return models;
+  }
+
   if (AGENT_DEFAULT_MODELS[agentId]) {
     const models = AGENT_DEFAULT_MODELS[agentId];
     modelCache.set(agentId, { models, timestamp: Date.now() });
@@ -2975,6 +3029,8 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       sessionId,
       conversationId,
       error: error.message,
+      isPrematureEnd: error.isPrematureEnd || false,
+      exitCode: error.exitCode,
       recoverable: elapsed < 60000,
       timestamp: Date.now()
     });

package/static/index.html

@@ -48,6 +48,8 @@
       --block-color-7: #f43f5e;
       --block-color-8: #22c55e;
       --block-color-9: #eab308;
+      --block-color-10: #0ea5e9;
+      --block-color-11: #d946ef;
     }
 
     html.dark {
@@ -66,6 +68,8 @@
       --block-color-7: #fb7185;
       --block-color-8: #4ade80;
       --block-color-9: #facc15;
+      --block-color-10: #38bdf8;
+      --block-color-11: #e879f9;
     }
 
     html, body {
@@ -1883,33 +1887,15 @@
       padding: 0.3rem 0.625rem;
       font-size: 0.75rem;
       line-height: 1.3;
-      cursor: pointer;
+      cursor: default;
       user-select: none;
-      list-style: none;
     }
     .tool-result-status::-webkit-details-marker { display: none; }
     .tool-result-status::marker { display: none; content: ''; }
-    .tool-result-status::before {
-      content: '\25b6';
-      font-size: 0.5rem;
-      margin-right: 0.125rem;
-      display: inline-block;
-      transition: transform 0.15s;
-      color: #16a34a;
-      flex-shrink: 0;
-    }
-    html.dark .tool-result-status::before { color: #4ade80; }
-    .tool-result-inline[open] > .tool-result-status::before { transform: rotate(90deg); }
-    .tool-result-status:hover { background: #bbf7d0; }
-    html.dark .tool-result-status:hover { background: #14532d; }
     .tool-result-inline > .folded-tool-body { border-top: 1px solid #bbf7d0; }
     html.dark .tool-result-inline > .folded-tool-body { border-top-color: #166534; }
     .tool-result-error { background: #fef2f2; border-top-color: #fecaca; }
     html.dark .tool-result-error { background: #1f0a0a; border-top-color: #991b1b; }
-    .tool-result-error > .tool-result-status:hover { background: #fecaca; }
-    html.dark .tool-result-error > .tool-result-status:hover { background: #2d0f0f; }
-    .tool-result-error .tool-result-status::before { color: #dc2626; }
-    html.dark .tool-result-error .tool-result-status::before { color: #f87171; }
     .tool-result-error .folded-tool-icon { color: #dc2626; }
     html.dark .tool-result-error .folded-tool-icon { color: #f87171; }
     .tool-result-error .folded-tool-name { color: #991b1b; }
@@ -2390,6 +2376,174 @@
       animation: pulse 1s ease-in-out infinite;
       background-color: var(--color-warning) !important;
     }
+
+    /* ===== IN-UI DIALOGS ===== */
+    .dialog-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 10000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .dialog-overlay.visible { opacity: 1; }
+    .dialog-backdrop {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(2px);
+    }
+    .dialog-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10001;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .dialog-container.visible { opacity: 1; }
+    .dialog-box {
+      background: var(--color-bg-primary);
+      border-radius: 0.75rem;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      max-width: 90vw;
+      width: 400px;
+      overflow: hidden;
+      transform: scale(0.95) translateY(-10px);
+      transition: transform 0.2s ease;
+    }
+    .dialog-container.visible .dialog-box {
+      transform: scale(1) translateY(0);
+    }
+    .dialog-box-progress { width: 450px; }
+    .dialog-header {
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--color-border);
+    }
+    .dialog-title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+    }
+    .dialog-body {
+      padding: 1.25rem;
+    }
+    .dialog-message {
+      margin: 0;
+      font-size: 0.9rem;
+      line-height: 1.5;
+      color: var(--color-text-primary);
+    }
+    .dialog-label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-size: 0.9rem;
+      color: var(--color-text-primary);
+    }
+    .dialog-input {
+      width: 100%;
+      padding: 0.625rem 0.875rem;
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      font-size: 0.9rem;
+      outline: none;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    .dialog-input:focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    }
+    .dialog-footer {
+      padding: 0.75rem 1.25rem;
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-bg-secondary);
+    }
+    .dialog-btn {
+      padding: 0.5rem 1.25rem;
+      border: none;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .dialog-btn-primary {
+      background: var(--color-primary);
+      color: white;
+    }
+    .dialog-btn-primary:hover { background: var(--color-primary-dark); }
+    .dialog-btn-secondary {
+      background: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      border: 1px solid var(--color-border);
+    }
+    .dialog-btn-secondary:hover { background: var(--color-bg-secondary); }
+    .dialog-btn-danger { background: var(--color-error); }
+    .dialog-btn-danger:hover { background: #dc2626; }
+    .dialog-progress-bar {
+      height: 8px;
+      background: var(--color-bg-secondary);
+      border-radius: 4px;
+      overflow: hidden;
+      margin: 1rem 0 0.5rem;
+    }
+    .dialog-progress-fill {
+      height: 100%;
+      background: var(--color-primary);
+      border-radius: 4px;
+      transition: width 0.3s ease;
+    }
+    .dialog-progress-percent {
+      margin: 0;
+      text-align: center;
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+    }
+
+    /* ===== TOAST NOTIFICATIONS ===== */
+    .toast-notification {
+      position: fixed;
+      bottom: 100px;
+      left: 50%;
+      transform: translateX(-50%) translateY(20px);
+      padding: 0.75rem 1.5rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 20000;
+      opacity: 0;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .toast-notification.visible {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+    .toast-info { background: var(--color-primary); color: white; }
+    .toast-success { background: var(--color-success); color: white; }
+    .toast-error { background: var(--color-error); color: white; }
+    .toast-warning { background: var(--color-warning); color: white; }
   </style>
 </head>
 <body>
@@ -2597,6 +2751,7 @@
   <script defer src="/gm/js/websocket-manager.js"></script>
   <script defer src="/gm/js/event-filter.js"></script>
   <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/conversations.js"></script>
   <script defer src="/gm/js/client.js"></script>

package/static/js/client.js

@@ -282,10 +282,12 @@ class AgentGUIClient {
 
     try {
       const position = localStorage.getItem(`scroll_${conversationId}`);
+      const scrollContainer = document.getElementById(this.config.scrollContainerId);
+      if (!scrollContainer) return;
+      
       if (position !== null) {
         const scrollTop = parseInt(position, 10);
-        const scrollContainer = document.getElementById(this.config.scrollContainerId);
-        if (scrollContainer && !isNaN(scrollTop)) {
+        if (!isNaN(scrollTop)) {
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
               const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
@@ -293,6 +295,12 @@ class AgentGUIClient {
             });
           });
         }
+      } else {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            scrollContainer.scrollTop = 0;
+          });
+        });
       }
     } catch (e) {
       console.warn('Failed to restore scroll position:', e);
@@ -368,7 +376,7 @@ class AgentGUIClient {
     if (this.ui.injectButton) {
       this.ui.injectButton.addEventListener('click', async () => {
         if (!this.state.currentConversation) return;
-        const instructions = prompt('Enter instructions to inject into the running agent:');
+        const instructions = await window.UIDialog.prompt('Enter instructions to inject into the running agent:', '', 'Inject Instructions');
         if (!instructions) return;
         try {
           const resp = await fetch(`${window.__BASE_URL}/api/conversations/${this.state.currentConversation.id}/inject`, {
@@ -981,17 +989,17 @@ class AgentGUIClient {
         btn.addEventListener('click', async (e) => {
           const index = parseInt(e.target.dataset.index);
           const msgId = queue[index].messageId;
-          if (confirm('Delete this queued message?')) {
+          if (await window.UIDialog.confirm('Delete this queued message?', 'Delete Message')) {
             await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${msgId}`, { method: 'DELETE' });
           }
         });
       });
 
       queueEl.querySelectorAll('.queue-edit-btn').forEach(btn => {
-        btn.addEventListener('click', (e) => {
+        btn.addEventListener('click', async (e) => {
           const index = parseInt(e.target.dataset.index);
           const q = queue[index];
-          const newContent = prompt('Edit message:', q.content);
+          const newContent = await window.UIDialog.prompt('Edit message:', q.content, 'Edit Queued Message');
           if (newContent !== null && newContent !== q.content) {
             fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${q.messageId}`, {
               method: 'PATCH',
@@ -1176,7 +1184,8 @@ class AgentGUIClient {
             const dName = hasRenderer ? StreamingRenderer.getToolDisplayName(tn) : tn;
             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>` : '';
-            html += `<details class="block-tool-use folded-tool"><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}`;
+            const colorIdx = hasRenderer && this.renderer ? this.renderer._getBlockColorIndex('tool_use') : 1;
+            html += `<details class="block-tool-use folded-tool" open style="border-left:3px solid var(--block-color-${colorIdx})"><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);
@@ -1185,7 +1194,8 @@ class AgentGUIClient {
             const resultIcon = block.is_error
               ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
               : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-            const resultHtml = `<details class="tool-result-inline${block.is_error ? ' tool-result-error' : ''}"><summary class="tool-result-status"><span class="folded-tool-icon">${resultIcon}</span><span class="folded-tool-name">${block.is_error ? 'Error' : 'Success'}</span><span class="folded-tool-desc">${this.escapeHtml(resultPreview)}</span></summary><div class="folded-tool-body">${smartHtml}</div></details>`;
+            const colorIdx = hasRenderer && this.renderer ? this.renderer._getBlockColorIndex('tool_result') : 2;
+            const resultHtml = `<div class="tool-result-inline${block.is_error ? ' tool-result-error' : ''}" style="border-left:3px solid var(--block-color-${colorIdx})"><div class="tool-result-status"><span class="folded-tool-icon">${resultIcon}</span><span class="folded-tool-name">${block.is_error ? 'Error' : 'Success'}</span><span class="folded-tool-desc">${this.escapeHtml(resultPreview)}</span></div><div class="folded-tool-body">${smartHtml}</div></div>`;
             if (pendingToolUseClose) {
               html += resultHtml + '</details>';
               pendingToolUseClose = false;
@@ -1996,6 +2006,13 @@ class AgentGUIClient {
       this._modelDownloadInProgress = false;
       console.error('[Models] Download error:', progress.error);
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+      if (window._voiceProgressDialog) {
+        window._voiceProgressDialog.close();
+        window._voiceProgressDialog = null;
+      }
+      if (window.UIDialog) {
+        window.UIDialog.alert('Failed to download voice models: ' + progress.error, 'Download Error');
+      }
       return;
     }
     
@@ -2004,12 +2021,30 @@ class AgentGUIClient {
       console.log('[Models] Download complete');
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
       this._updateVoiceTabState();
+      if (window._voiceProgressDialog) {
+        window._voiceProgressDialog.update(100, 'Voice models ready!');
+        setTimeout(function() {
+          if (window._voiceProgressDialog) {
+            window._voiceProgressDialog.close();
+            window._voiceProgressDialog = null;
+          }
+        }, 500);
+      }
       return;
     }
     
     if (progress.started || progress.downloading) {
       this._modelDownloadInProgress = true;
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+      
+      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 + '...');
+      }
     }
   }
 
@@ -2018,8 +2053,7 @@ class AgentGUIClient {
     if (voiceBtn) {
       var isReady = this._modelDownloadProgress?.done === true || 
                     this._modelDownloadProgress?.complete === true;
-      voiceBtn.disabled = !isReady;
-      voiceBtn.title = isReady ? 'Voice' : 'Downloading voice models...';
+      voiceBtn.title = isReady ? 'Voice' : 'Voice (click to download models)';
     }
   }
 
@@ -2438,8 +2472,9 @@ class AgentGUIClient {
    */
   showError(message) {
     console.error(message);
-    // Could display in a toast or alert
-    alert(message);
+    if (window.UIDialog) {
+      window.UIDialog.alert(message, 'Error');
+    }
   }
 
   /**

package/static/js/streaming-renderer.js

@@ -300,6 +300,10 @@ class StreamingRenderer {
         return this.renderBlock(event.block, event);
       }
 
+      if (event.type === 'streaming_error' && event.isPrematureEnd) {
+        return this.renderBlockPremature({ type: 'premature', error: event.error, exitCode: event.exitCode });
+      }
+
       switch (event.type) {
         case 'streaming_start':
           return this.renderStreamingStart(event);
@@ -366,6 +370,8 @@ class StreamingRenderer {
           return this.renderBlockUsage(block, context);
         case 'plan':
           return this.renderBlockPlan(block, context);
+        case 'premature':
+          return this.renderBlockPremature(block, context);
         default:
           return this.renderBlockGeneric(block, context);
       }
@@ -399,23 +405,28 @@ class StreamingRenderer {
     div.className = 'block-text';
     if (isHtml) div.classList.add('html-content');
     div.innerHTML = html;
-    const colorIndex = this._getUniqueColorIndex(text);
+    const colorIndex = this._getBlockColorIndex('text');
     div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
     return div;
   }
 
-  _getUniqueColorIndex(text) {
-    if (!this._colorIndexMap) {
-      this._colorIndexMap = new Map();
-      this._colorCounter = 0;
-    }
-    let index = this._colorIndexMap.get(text);
-    if (index === undefined) {
-      index = this._colorCounter % 10;
-      this._colorIndexMap.set(text, index);
-      this._colorCounter++;
-    }
-    return index;
+  _getBlockColorIndex(blockType) {
+    const typeColors = {
+      'text': 0,
+      'tool_use': 1,
+      'tool_result': 2,
+      'code': 3,
+      'thinking': 4,
+      'bash': 5,
+      'system': 6,
+      'result': 7,
+      'error': 8,
+      'image': 9,
+      'plan': 10,
+      'usage': 11,
+      'premature': 8
+    };
+    return typeColors[blockType] !== undefined ? typeColors[blockType] : 0;
   }
 
   containsHtmlTags(text) {
@@ -463,6 +474,7 @@ class StreamingRenderer {
   renderBlockCode(block, context) {
     const div = document.createElement('div');
     div.className = 'block-code';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('code')})`;
 
     const code = block.code || '';
     const language = (block.language || 'plaintext').toLowerCase();
@@ -508,6 +520,8 @@ class StreamingRenderer {
   renderBlockThinking(block, context) {
     const div = document.createElement('div');
     div.className = 'block-thinking';
+    const colorIndex = this._getBlockColorIndex('thinking');
+    div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     const thinking = block.thinking || '';
     div.innerHTML = `
@@ -733,7 +747,10 @@ class StreamingRenderer {
 
     const details = document.createElement('details');
     details.className = 'block-tool-use folded-tool';
+    details.setAttribute('open', '');
     if (block.id) details.dataset.toolUseId = block.id;
+    const colorIndex = this._getBlockColorIndex('tool_use');
+    details.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
     const summary = document.createElement('summary');
     summary.className = 'folded-tool-bar';
     const displayName = this.getToolUseDisplayName(toolName);
@@ -1199,33 +1216,34 @@ class StreamingRenderer {
     const isError = block.is_error || false;
     const content = block.content || '';
     const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
-    const preview = contentStr.length > 80 ? contentStr.substring(0, 77).replace(/\n/g, ' ') + '...' : contentStr.replace(/\n/g, ' ');
 
-    const details = document.createElement('details');
-    details.className = 'tool-result-inline' + (isError ? ' tool-result-error' : '');
-    details.dataset.eventType = 'tool_result';
-    if (block.tool_use_id) details.dataset.toolUseId = block.tool_use_id;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tool-result-inline' + (isError ? ' tool-result-error' : '');
+    wrapper.dataset.eventType = 'tool_result';
+    if (block.tool_use_id) wrapper.dataset.toolUseId = block.tool_use_id;
+    const colorIndex = this._getBlockColorIndex('tool_result');
+    wrapper.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
+    const header = document.createElement('div');
+    header.className = 'tool-result-status';
     const iconSvg = isError
       ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
       : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-
-    const summary = document.createElement('summary');
-    summary.className = 'tool-result-status';
-    summary.innerHTML = `
+    const preview = contentStr.length > 80 ? contentStr.substring(0, 77).replace(/\n/g, ' ') + '...' : contentStr.replace(/\n/g, ' ');
+    header.innerHTML = `
       <span class="folded-tool-icon">${iconSvg}</span>
       <span class="folded-tool-name">${isError ? 'Error' : 'Success'}</span>
       <span class="folded-tool-desc">${this.escapeHtml(preview)}</span>
     `;
-    details.appendChild(summary);
+    wrapper.appendChild(header);
 
     const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this));
     const body = document.createElement('div');
     body.className = 'folded-tool-body';
     body.innerHTML = renderedContent;
-    details.appendChild(body);
+    wrapper.appendChild(body);
 
-    return details;
+    return wrapper;
   }
 
   /**
@@ -1234,6 +1252,7 @@ class StreamingRenderer {
   renderBlockImage(block, context) {
     const div = document.createElement('div');
     div.className = 'block-image';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('image')})`;
 
     let src = block.image || block.src || '';
     const alt = block.alt || 'Image';
@@ -1257,6 +1276,8 @@ class StreamingRenderer {
   renderBlockBash(block, context) {
     const div = document.createElement('div');
     div.className = 'block-bash';
+    const colorIndex = this._getBlockColorIndex('bash');
+    div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     const command = block.command || block.code || '';
     const output = block.output || '';
@@ -1284,6 +1305,7 @@ class StreamingRenderer {
     const details = document.createElement('details');
     details.className = 'folded-tool folded-tool-info';
     details.dataset.eventType = 'system';
+    details.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('system')})`;
     const desc = block.model ? this.escapeHtml(block.model) : 'Session';
     const summary = document.createElement('summary');
     summary.className = 'folded-tool-bar';
@@ -1320,6 +1342,9 @@ class StreamingRenderer {
     const details = document.createElement('details');
     details.className = isError ? 'folded-tool folded-tool-error' : 'folded-tool';
     details.dataset.eventType = 'result';
+    if (!isError) details.setAttribute('open', '');
+    const colorIndex = this._getBlockColorIndex(isError ? 'error' : 'result');
+    details.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     const iconSvg = isError
       ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
@@ -1374,6 +1399,7 @@ class StreamingRenderer {
     const div = document.createElement('div');
     div.className = 'block-tool-status';
     div.dataset.toolUseId = block.tool_use_id || '';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('tool_use')})`;
     div.innerHTML = `
       <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;font-size:0.75rem;color:var(--color-text-secondary)">
         ${statusIcons[status] || statusIcons.pending}
@@ -1394,6 +1420,7 @@ class StreamingRenderer {
 
     const div = document.createElement('div');
     div.className = 'block-usage';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('usage')})`;
     div.innerHTML = `
       <div style="display:flex;gap:1rem;padding:0.25rem 0.5rem;font-size:0.7rem;color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:0.25rem">
         ${used ? `<span><strong>Used:</strong> ${used.toLocaleString()}</span>` : ''}
@@ -1424,6 +1451,7 @@ class StreamingRenderer {
 
     const div = document.createElement('div');
     div.className = 'block-plan';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('plan')})`;
     div.innerHTML = `
       <details class="folded-tool folded-tool-info">
         <summary class="folded-tool-bar">
@@ -1446,6 +1474,21 @@ class StreamingRenderer {
     return div;
   }
 
+  renderBlockPremature(block, context) {
+    const div = document.createElement('div');
+    div.className = 'folded-tool folded-tool-error block-premature';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('premature')})`;
+    const code = block.exitCode != null ? ` (exit ${block.exitCode})` : '';
+    div.innerHTML = `
+      <div class="folded-tool-bar" style="background:rgba(245,158,11,0.1)">
+        <span class="folded-tool-icon" style="color:#f59e0b"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg></span>
+        <span class="folded-tool-name" style="color:#f59e0b">ACP Ended Prematurely${this.escapeHtml(code)}</span>
+        <span class="folded-tool-desc">${this.escapeHtml(block.error || 'Process exited without output')}</span>
+      </div>
+    `;
+    return div;
+  }
+
   /**
    * Render generic block with formatted key-value pairs
    */