agentgui 1.0.258 → 1.0.260

package/package.json

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

package/static/index.html

@@ -1715,15 +1715,15 @@
       text-align: center;
     }
 
-    /* --- Folded Tool Use (compact success-style bar) --- */
+    /* --- Folded Tool Use (neutral base, colored by block-type-* classes) --- */
     .folded-tool {
       margin: 0;
       border-radius: 0.375rem;
       overflow: hidden;
-      background: #f0fdf4;
+      background: #f3f4f6;
     }
     html.dark .folded-tool {
-      background: #0a1f0f;
+      background: #1f2937;
     }
     .folded-tool-bar {
       display: flex;
@@ -1735,11 +1735,11 @@
       list-style: none;
       font-size: 0.85rem;
       line-height: 1.3;
-      background: #dcfce7;
+      background: #e5e7eb;
       transition: background 0.15s;
     }
     html.dark .folded-tool-bar {
-      background: #0f2b1a;
+      background: #374151;
     }
     .folded-tool-bar::-webkit-details-marker { display: none; }
     .folded-tool-bar::marker { display: none; content: ''; }
@@ -1749,33 +1749,33 @@
       margin-right: 0.125rem;
       display: inline-block;
       transition: transform 0.15s;
-      color: #16a34a;
+      color: #6b7280;
       flex-shrink: 0;
     }
-    html.dark .folded-tool-bar::before { color: #4ade80; }
+    html.dark .folded-tool-bar::before { color: #9ca3af; }
     .folded-tool[open] > .folded-tool-bar::before { transform: rotate(90deg); }
-    .folded-tool-bar:hover { background: #bbf7d0; }
-    html.dark .folded-tool-bar:hover { background: #14532d; }
+    .folded-tool-bar:hover { background: #d1d5db; }
+    html.dark .folded-tool-bar:hover { background: #4b5563; }
     .folded-tool-icon {
       display: flex;
       align-items: center;
-      color: #16a34a;
+      color: #6b7280;
       width: 1rem;
       height: 1rem;
       flex-shrink: 0;
     }
-    html.dark .folded-tool-icon { color: #4ade80; }
+    html.dark .folded-tool-icon { color: #9ca3af; }
     .folded-tool-icon svg { width: 1rem; height: 1rem; }
     .folded-tool-name {
       font-weight: 600;
-      color: #166534;
+      color: #374151;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
       font-size: 0.8rem;
       flex-shrink: 0;
     }
-    html.dark .folded-tool-name { color: #86efac; }
+    html.dark .folded-tool-name { color: #d1d5db; }
     .folded-tool-desc {
-      color: #15803d;
+      color: #6b7280;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
       font-size: 0.8rem;
       overflow: hidden;
@@ -1785,13 +1785,13 @@
       min-width: 0;
       opacity: 0.8;
     }
-    html.dark .folded-tool-desc { color: #4ade80; }
+    html.dark .folded-tool-desc { color: #9ca3af; }
     .folded-tool-body {
       padding: 0.5rem 0.75rem;
       font-size: 0.75rem;
-      border-top: 1px solid #bbf7d0;
+      border-top: 1px solid #d1d5db;
     }
-    html.dark .folded-tool-body { border-top-color: #166534; }
+    html.dark .folded-tool-body { border-top-color: #4b5563; }
     .folded-tool-body .tool-input-pre {
       margin: 0;
       padding: 0.375rem 0.5rem;
@@ -2007,6 +2007,41 @@
     .tool-result-success .folded-tool-name { color: #166534; font-weight: 600; }
     html.dark .tool-result-success .folded-tool-name { color: #86efac; }
 
+    /* --- Tool_use parent: has-success / has-error indicators on header --- */
+    .folded-tool.has-success { background: #f0fdf4; }
+    html.dark .folded-tool.has-success { background: #0a1f0f; }
+    .folded-tool.has-success > .folded-tool-bar { background: #dcfce7; }
+    html.dark .folded-tool.has-success > .folded-tool-bar { background: #0f2b1a; }
+    .folded-tool.has-success > .folded-tool-bar:hover { background: #bbf7d0; }
+    html.dark .folded-tool.has-success > .folded-tool-bar:hover { background: #14532d; }
+    .folded-tool.has-success > .folded-tool-bar::before { color: #16a34a; }
+    html.dark .folded-tool.has-success > .folded-tool-bar::before { color: #4ade80; }
+    .folded-tool.has-success .folded-tool-icon { color: #16a34a; }
+    html.dark .folded-tool.has-success .folded-tool-icon { color: #4ade80; }
+    .folded-tool.has-success .folded-tool-name { color: #166534; }
+    html.dark .folded-tool.has-success .folded-tool-name { color: #86efac; }
+    .folded-tool.has-success .folded-tool-desc { color: #15803d; }
+    html.dark .folded-tool.has-success .folded-tool-desc { color: #4ade80; }
+    .folded-tool.has-success > .folded-tool-body { border-top-color: #bbf7d0; }
+    html.dark .folded-tool.has-success > .folded-tool-body { border-top-color: #166534; }
+
+    .folded-tool.has-error { background: #fef2f2; }
+    html.dark .folded-tool.has-error { background: #1c0f0f; }
+    .folded-tool.has-error > .folded-tool-bar { background: #fee2e2; }
+    html.dark .folded-tool.has-error > .folded-tool-bar { background: #2c1010; }
+    .folded-tool.has-error > .folded-tool-bar:hover { background: #fecaca; }
+    html.dark .folded-tool.has-error > .folded-tool-bar:hover { background: #451a1a; }
+    .folded-tool.has-error > .folded-tool-bar::before { color: #ef4444; }
+    html.dark .folded-tool.has-error > .folded-tool-bar::before { color: #f87171; }
+    .folded-tool.has-error .folded-tool-icon { color: #ef4444; }
+    html.dark .folded-tool.has-error .folded-tool-icon { color: #f87171; }
+    .folded-tool.has-error .folded-tool-name { color: #991b1b; }
+    html.dark .folded-tool.has-error .folded-tool-name { color: #fca5a5; }
+    .folded-tool.has-error .folded-tool-desc { color: #b91c1c; }
+    html.dark .folded-tool.has-error .folded-tool-desc { color: #f87171; }
+    .folded-tool.has-error > .folded-tool-body { border-top-color: #fecaca; }
+    html.dark .folded-tool.has-error > .folded-tool-body { border-top-color: #7f1d1d; }
+
     /* --- Consecutive block joining --- */
     .folded-tool + .folded-tool,
     .block-tool-use + .block-tool-use {

package/static/js/client.js

@@ -611,6 +611,8 @@ class AgentGUIClient {
                   if (chunk.block.type === 'tool_result') {
                     const lastInFrag = bFrag.lastElementChild;
                     if (lastInFrag?.classList?.contains('block-tool-use')) {
+                      lastInFrag.classList.remove('has-success', 'has-error');
+                      lastInFrag.classList.add(chunk.block.is_error ? 'has-error' : 'has-success');
                       const parentIsOpen = lastInFrag.hasAttribute('open');
                       const contextWithParent = { ...chunk, parentIsOpen };
                       const el = this.renderer.renderBlock(chunk.block, contextWithParent, bFrag);
@@ -1141,7 +1143,7 @@ class AgentGUIClient {
       let html = '<div class="message-blocks">';
       if (content.blocks && Array.isArray(content.blocks)) {
         let pendingToolUseClose = false;
-        content.blocks.forEach(block => {
+        content.blocks.forEach((block, blockIdx, blocks) => {
           if (block.type !== 'tool_result' && pendingToolUseClose) {
             html += '</details>';
             pendingToolUseClose = false;
@@ -1186,7 +1188,9 @@ 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';
-            html += `<details class="block-tool-use folded-tool ${typeClass}"><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 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}`;
             pendingToolUseClose = true;
           } else if (block.type === 'tool_result') {
             const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
@@ -1751,6 +1755,8 @@ class AgentGUIClient {
       const lastEl = blocksEl.lastElementChild;
       const toolUseEl = matchById || (lastEl?.classList?.contains('block-tool-use') ? lastEl : null);
       if (toolUseEl) {
+        toolUseEl.classList.remove('has-success', 'has-error');
+        toolUseEl.classList.add(chunk.block.is_error ? 'has-error' : 'has-success');
         const parentIsOpen = toolUseEl.hasAttribute('open');
         const contextWithParent = { ...chunk, parentIsOpen };
         const element = this.renderer.renderBlock(chunk.block, contextWithParent, blocksEl);
@@ -1811,6 +1817,8 @@ class AgentGUIClient {
           const lastEl = blocksEl.lastElementChild;
           const toolUseEl = matchById || (lastEl?.classList?.contains('block-tool-use') ? lastEl : null);
           if (toolUseEl) {
+            toolUseEl.classList.remove('has-success', 'has-error');
+            toolUseEl.classList.add(chunk.block.is_error ? 'has-error' : 'has-success');
             const parentIsOpen = toolUseEl.hasAttribute('open');
             const contextWithParent = { ...chunk, parentIsOpen };
             const el = this.renderer.renderBlock(chunk.block, contextWithParent, blocksEl);
@@ -2390,6 +2398,8 @@ class AgentGUIClient {
               if (chunk.block.type === 'tool_result') {
                 const lastInFrag = blockFrag.lastElementChild;
                 if (lastInFrag?.classList?.contains('block-tool-use')) {
+                  lastInFrag.classList.remove('has-success', 'has-error');
+                  lastInFrag.classList.add(chunk.block.is_error ? 'has-error' : 'has-success');
                   const parentIsOpen = lastInFrag.hasAttribute('open');
                   const contextWithParent = { ...chunk, parentIsOpen };
                   const element = this.renderer.renderBlock(chunk.block, contextWithParent, blockFrag);

package/static/js/voice.js

@@ -17,6 +17,7 @@
   var isLoadingHistory = false;
   var _lastVoiceBlockText = null;
   var _lastVoiceBlockTime = 0;
+  var _voiceBreakNext = false;
   var selectedVoiceId = localStorage.getItem('voice-selected-id') || 'default';
   var ttsAudioCache = new Map();
   var TTS_CLIENT_CACHE_MAX = 50;
@@ -549,7 +550,7 @@
     var emptyMsg = container.querySelector('.voice-empty');
     if (emptyMsg) emptyMsg.remove();
     var lastChild = container.lastElementChild;
-    if (!isUser && lastChild && lastChild.classList.contains('voice-block') && !lastChild.classList.contains('voice-block-user')) {
+    if (!isUser && !_voiceBreakNext && lastChild && lastChild.classList.contains('voice-block') && !lastChild.classList.contains('voice-block-user')) {
       var contentSpan = lastChild.querySelector('.voice-block-content');
       if (contentSpan) {
         contentSpan.textContent += '\n' + stripHtml(text);
@@ -558,6 +559,7 @@
         return lastChild;
       }
     }
+    _voiceBreakNext = false;
     var div = document.createElement('div');
     div.className = 'voice-block' + (isUser ? ' voice-block-user' : '');
     if (isUser) {
@@ -666,6 +668,7 @@
         if (data.conversationId && data.conversationId !== currentConversationId) return;
         spokenChunks = new Set();
         renderedSeqs = new Set();
+        _voiceBreakNext = false;
       }
     });
     window.addEventListener('conversation-selected', function(e) {
@@ -682,7 +685,6 @@
   function handleVoiceBlock(block, isNew) {
     if (!block || !block.type) return;
     if (block.type === 'text' && block.text) {
-      // Deduplicate: prevent rendering the same text block twice within 500ms
       var now = Date.now();
       if (_lastVoiceBlockText === block.text && (now - _lastVoiceBlockTime) < 500) {
         return;
@@ -697,7 +699,10 @@
         setTimeout(function() { div.classList.remove('speaking'); }, 2000);
       }
     } else if (block.type === 'result') {
+      _voiceBreakNext = true;
       addVoiceResultBlock(block, isNew);
+    } else {
+      _voiceBreakNext = true;
     }
   }
 
@@ -705,9 +710,9 @@
     var container = document.getElementById('voiceMessages');
     if (!container) return;
     container.innerHTML = '';
-    // Reset dedup state when loading a new conversation
     _lastVoiceBlockText = null;
     _lastVoiceBlockTime = 0;
+    _voiceBreakNext = false;
     if (!conversationId) {
       showVoiceEmpty(container);
       return;
@@ -722,6 +727,7 @@
           return;
         }
         var hasContent = false;
+        _voiceBreakNext = false;
         data.chunks.forEach(function(chunk) {
           if (chunk.sequence !== undefined) renderedSeqs.add(chunk.sequence);
           var block = typeof chunk.data === 'string' ? JSON.parse(chunk.data) : chunk.data;
@@ -730,8 +736,11 @@
             addVoiceBlock(block.text, false);
             hasContent = true;
           } else if (block.type === 'result') {
+            _voiceBreakNext = true;
             addVoiceResultBlock(block, false);
             hasContent = true;
+          } else {
+            _voiceBreakNext = true;
           }
         });
         if (!hasContent) showVoiceEmpty(container);