agentgui 1.0.711 → 1.0.713

package/package.json

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

package/static/js/client.js

@@ -910,12 +910,7 @@ 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);
-                      if (el) { lastInFrag.appendChild(el); }
+                      this.renderer.mergeResultIntoToolUse(lastInFrag, chunk.block);
                       return;
                     }
                   }
@@ -1587,10 +1582,13 @@ class AgentGUIClient {
       let html = '<div class="message-blocks">';
       if (content.blocks && Array.isArray(content.blocks)) {
         let pendingToolUseClose = false;
+        let pendingHasInput = false;
         content.blocks.forEach((block, blockIdx, blocks) => {
           if (block.type !== 'tool_result' && pendingToolUseClose) {
+            if (pendingHasInput) html += '</div>';
             html += '</details>';
             pendingToolUseClose = false;
+            pendingHasInput = false;
           }
           if (block.type === 'text') {
             const parts = this.parseMarkdownCodeBlocks(block.text);
@@ -1621,10 +1619,11 @@ class AgentGUIClient {
               html += `<div class="message-code"><details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(block.language || 'code')} - ${blkLineCount} line${blkLineCount !== 1 ? 's' : ''}</summary><pre style="margin:0;border-radius:0 0 0.375rem 0.375rem">${this.escapeHtml(block.code)}</pre></details></div>`;
             }
           } else if (block.type === 'tool_use') {
-            let inputHtml = '';
-            if (block.input && Object.keys(block.input).length > 0) {
+            let inputContentHtml = '';
+            const hasInput = block.input && Object.keys(block.input).length > 0;
+            if (hasInput) {
               const inputStr = JSON.stringify(block.input, null, 2);
-              inputHtml = `<div class="folded-tool-body"><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></div>`;
+              inputContentHtml = `<pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre>`;
             }
             const tn = block.name || 'unknown';
             const hasRenderer = typeof StreamingRenderer !== 'undefined';
@@ -1634,27 +1633,40 @@ class AgentGUIClient {
             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} ${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}`;
+            const resultClass = nextBlock?.type === 'tool_result' ? (nextBlock.is_error ? 'has-error tool-result-error' : 'has-success tool-result-success') : '';
+            const resultStatusIcon = nextBlock?.type === 'tool_result'
+              ? `<span class="folded-tool-status">${nextBlock.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>'
+              }</span>` : '';
+            if (hasInput) {
+              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>` : ''}${resultStatusIcon}</summary><div class="folded-tool-body">${inputContentHtml}`;
+              pendingHasInput = true;
+            } else {
+              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>` : ''}${resultStatusIcon}</summary>`;
+              pendingHasInput = false;
+            }
             pendingToolUseClose = true;
           } else if (block.type === 'tool_result') {
             const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
             const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this), true) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
-            const resultPreview = content.length > 80 ? content.substring(0, 77).replace(/\n/g, ' ') + '...' : content.replace(/\n/g, ' ');
-            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 resultTypeClass = hasRenderer && this.renderer ? this.renderer._getBlockTypeClass('tool_result') : 'block-type-tool_result';
-            const resultHtml = `<div class="tool-result-inline${block.is_error ? ' tool-result-error' : ' tool-result-success'} ${resultTypeClass}"><div class="tool-result-status"><span class="folded-tool-icon">${resultIcon}</span><span class="folded-tool-name">${block.is_error ? 'Error' : 'Success'}</span></div><div class="folded-tool-body">${smartHtml}</div></div>`;
+            const resultContentHtml = `<div class="folded-tool-result-content">${smartHtml}</div>`;
             if (pendingToolUseClose) {
-              html += resultHtml + '</details>';
+              if (pendingHasInput) {
+                html += resultContentHtml + '</div></details>';
+              } else {
+                html += `<div class="folded-tool-body">${resultContentHtml}</div></details>`;
+              }
               pendingToolUseClose = false;
             } else {
-              html += resultHtml;
+              html += resultContentHtml;
             }
           }
         });
-        if (pendingToolUseClose) html += '</details>';
+        if (pendingToolUseClose) {
+          if (pendingHasInput) html += '</div>';
+          html += '</details>';
+        }
       }
       html += '</div>';
       return html;
@@ -2139,12 +2151,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);
-        if (element) { toolUseEl.appendChild(element); this.scrollToBottom(); }
+        this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
+        this.scrollToBottom();
         return;
       }
     }
@@ -2885,14 +2893,7 @@ class AgentGUIClient {
                 ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${toolUseId}"]`)
                 : blocksEl.lastElementChild?.classList?.contains('block-type-tool_use') ? blocksEl.lastElementChild : null;
               if (!toolUseEl) return;
-              toolUseEl.classList.remove('has-success', 'has-error');
-              toolUseEl.classList.add(chunk.block.is_error ? 'has-error' : 'has-success');
-              const contextWithParent = { ...chunk, parentIsOpen: toolUseEl.hasAttribute('open') };
-              const element = this.renderer.renderBlock(chunk.block, contextWithParent, toolUseEl);
-              if (element) {
-                element.classList.add('block-loaded');
-                toolUseEl.appendChild(element);
-              }
+              this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
             });
 
             if (isCurrentActiveSession) {

package/static/js/streaming-renderer.js

@@ -1261,33 +1261,17 @@ class StreamingRenderer {
     const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
     const isError = (block.is_error || false) && !contentStr.trimStart().startsWith('exec ran successfully.');
 
-    const details = document.createElement('details');
-    details.className = 'folded-tool' + (isError ? ' folded-tool-error' : ' folded-tool-success');
-    details.dataset.eventType = 'tool_result';
-    // Only open by default if the content is an image and it's not an error
-    const isImageContent = contentStr.includes('data:image/') || (block.content && block.content.type === 'base64');
-    if (!isError && isImageContent) details.open = true;
-    if (block.tool_use_id) details.dataset.toolUseId = block.tool_use_id;
-    details.classList.add(this._getBlockTypeClass('tool_result'));
-
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    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>';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${iconSvg}</span>
-      <span class="folded-tool-name">${isError ? 'Error' : 'Success'}</span>
-    `;
-    details.appendChild(summary);
+    const container = document.createElement('div');
+    container.className = 'tool-result-pending';
+    container.dataset.eventType = 'tool_result';
+    container.dataset.isError = isError ? '1' : '0';
+    if (block.tool_use_id) container.dataset.toolUseId = block.tool_use_id;
+    container.style.display = 'none';
 
     const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
-    const body = document.createElement('div');
-    body.className = 'folded-tool-body';
-    body.innerHTML = renderedContent;
-    details.appendChild(body);
+    container.innerHTML = renderedContent;
 
-    return details;
+    return container;
   }
 
   /**
@@ -2159,14 +2143,14 @@ class StreamingRenderer {
     if (!this.outputContainer) return;
 
     const toolUseBlocks = this.outputContainer.querySelectorAll('details.block-tool-use[data-tool-use-id]');
-    const toolResultBlocks = this.outputContainer.querySelectorAll('details[data-event-type="tool_result"][data-tool-use-id]');
+    const toolResultBlocks = this.outputContainer.querySelectorAll('.tool-result-pending[data-tool-use-id]');
 
     toolResultBlocks.forEach(resultBlock => {
       const toolUseId = resultBlock.dataset.toolUseId;
+      const isError = resultBlock.dataset.isError === '1';
       const toolUseBlock = Array.from(toolUseBlocks).find(b => b.dataset.toolUseId === toolUseId);
 
-      if (toolUseBlock && toolUseBlock.parentElement === resultBlock.parentElement) {
-        const isError = resultBlock.classList.contains('folded-tool-error');
+      if (toolUseBlock) {
         const toolUseSummary = toolUseBlock.querySelector(':scope > summary');
 
         if (toolUseSummary && !toolUseSummary.querySelector('.folded-tool-status')) {
@@ -2180,8 +2164,7 @@ class StreamingRenderer {
           toolUseBlock.classList.add(isError ? 'tool-result-error' : 'tool-result-success');
         }
 
-        const resultBody = resultBlock.querySelector('.folded-tool-body');
-        if (resultBody && resultBody.innerHTML.trim()) {
+        if (resultBlock.innerHTML.trim()) {
           let toolUseBody = toolUseBlock.querySelector(':scope > .folded-tool-body');
           if (!toolUseBody) {
             toolUseBody = document.createElement('div');
@@ -2190,10 +2173,12 @@ class StreamingRenderer {
           }
           const resultContent = document.createElement('div');
           resultContent.className = 'folded-tool-result-content';
-          resultContent.innerHTML = resultBody.innerHTML;
+          resultContent.innerHTML = resultBlock.innerHTML;
           toolUseBody.appendChild(resultContent);
         }
 
+        resultBlock.remove();
+      } else {
         resultBlock.remove();
       }
     });
@@ -2202,6 +2187,40 @@ class StreamingRenderer {
   /**
    * Auto-scroll to bottom of container
    */
+  mergeResultIntoToolUse(toolUseEl, block) {
+    const content = block.content || '';
+    const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
+    const isError = (block.is_error || false) && !contentStr.trimStart().startsWith('exec ran successfully.');
+
+    toolUseEl.classList.remove('has-success', 'has-error');
+    toolUseEl.classList.add(isError ? 'has-error tool-result-error' : 'has-success tool-result-success');
+
+    const summary = toolUseEl.querySelector(':scope > summary');
+    if (summary && !summary.querySelector('.folded-tool-status')) {
+      const statusSvg = 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 statusSpan = document.createElement('span');
+      statusSpan.className = 'folded-tool-status';
+      statusSpan.innerHTML = statusSvg;
+      summary.appendChild(statusSpan);
+    }
+
+    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
+    if (renderedContent && renderedContent.trim()) {
+      let toolUseBody = toolUseEl.querySelector(':scope > .folded-tool-body');
+      if (!toolUseBody) {
+        toolUseBody = document.createElement('div');
+        toolUseBody.className = 'folded-tool-body';
+        toolUseEl.appendChild(toolUseBody);
+      }
+      const resultContent = document.createElement('div');
+      resultContent.className = 'folded-tool-result-content';
+      resultContent.innerHTML = renderedContent;
+      toolUseBody.appendChild(resultContent);
+    }
+  }
+
   autoScroll() {
     if (this._scrollRafPending || this._userScrolledUp) return;
     this._scrollRafPending = true;