agentgui 1.0.258 → 1.0.259

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.258",
+  "version": "1.0.259",
   "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);