agentgui 1.0.555 → 1.0.556

package/package.json

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

package/static/js/client.js

@@ -2637,26 +2637,34 @@ class AgentGUIClient {
 
             const blocksEl = messageDiv.querySelector('.message-blocks');
             const blockFrag = document.createDocumentFragment();
+            const toolResultBlocks = new Map();
+
             sessionChunkList.forEach(chunk => {
               if (!chunk.block?.type) return;
               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);
-                  if (element) { lastInFrag.appendChild(element); }
-                  return;
-                }
+                toolResultBlocks.set(chunk.id, chunk);
+                return;
               }
-              const element = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
+              const element = this.renderer.renderBlockHeader(chunk.block, chunk);
               if (!element) return;
               blockFrag.appendChild(element);
             });
+
             blocksEl.appendChild(blockFrag);
 
+            toolResultBlocks.forEach((chunk, chunkId) => {
+              const lastBlock = blocksEl.lastElementChild;
+              if (lastBlock?.classList?.contains('block-type-tool_use')) {
+                lastBlock.classList.remove('has-success', 'has-error');
+                lastBlock.classList.add(chunk.block.is_error ? 'has-error' : 'has-success');
+                const contextWithParent = { ...chunk, parentIsOpen: lastBlock.hasAttribute('open') };
+                const element = this.renderer.renderBlock(chunk.block, contextWithParent);
+                if (element && element !== blockFrag.lastElementChild) {
+                  lastBlock.appendChild(element);
+                }
+              }
+            });
+
             if (isCurrentActiveSession) {
               const indicatorDiv = document.createElement('div');
               indicatorDiv.className = 'streaming-indicator';

package/static/js/streaming-renderer.js

@@ -2154,6 +2154,59 @@ class StreamingRenderer {
     }
   }
 
+  /**
+   * Render block header with lazy-loading placeholder for body
+   * Returns a <details> element with just the summary, body content deferred
+   */
+  renderBlockHeader(block, context = {}) {
+    if (!block || !block.type) return null;
+
+    const typeLabel = block.type.charAt(0).toUpperCase() + block.type.slice(1).replace(/_/g, ' ');
+    const summary = document.createElement('summary');
+    summary.style.cursor = 'pointer';
+    summary.style.userSelect = 'none';
+    summary.className = 'block-header-summary';
+
+    let summaryText = typeLabel;
+    if (block.type === 'code' && block.language) {
+      summaryText += ` (${block.language})`;
+    } else if (block.type === 'bash' && block.source) {
+      summaryText += ` - ${block.source}`;
+    } else if (block.type === 'tool_use' && block.name) {
+      summaryText += ` - ${block.name}`;
+    } else if (block.type === 'text' && block.text) {
+      const preview = block.text.substring(0, 60).replace(/\n/g, ' ');
+      summaryText = preview + (block.text.length > 60 ? '...' : '');
+    }
+
+    summary.textContent = summaryText;
+
+    const details = document.createElement('details');
+    details.className = `block-type-${block.type}`;
+    details.setAttribute('data-block-type', block.type);
+    details.setAttribute('data-lazy-load', 'pending');
+    details.appendChild(summary);
+
+    // Attach lazy loader on first open
+    details.addEventListener('toggle', async (e) => {
+      if (details.open && details.getAttribute('data-lazy-load') === 'pending') {
+        details.setAttribute('data-lazy-load', 'loading');
+        try {
+          const body = this.renderBlock(block, context);
+          if (body && body !== summary) {
+            details.appendChild(body);
+          }
+          details.setAttribute('data-lazy-load', 'loaded');
+        } catch (err) {
+          console.error('Failed to lazy-load block:', err);
+          details.setAttribute('data-lazy-load', 'failed');
+        }
+      }
+    }, { once: false });
+
+    return details;
+  }
+
   /**
    * Cleanup resources
    */