agentgui 1.0.554 → 1.0.556

package/package.json

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

package/static/js/client.js

@@ -1179,9 +1179,11 @@ class AgentGUIClient {
         outputEl.appendChild(queueEl);
       }
 
+      const isStreaming = this.state.streamingConversations.has(conversationId);
       queueEl.innerHTML = queue.map((q, i) => `
         <div class="queue-item" data-message-id="${q.messageId}" style="padding:0.5rem 1rem;margin:0.5rem 0;border-radius:0.375rem;background:var(--color-warning);color:#000;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem;">
           <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${i + 1}. ${this.escapeHtml(q.content)}</span>
+          ${isStreaming ? `<button class="queue-steer-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:#06b6d4;border:1px solid #0891b2;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;color:#fff;">Steer</button>` : ''}
           <button class="queue-edit-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Edit</button>
           <button class="queue-delete-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Delete</button>
         </div>
@@ -1190,7 +1192,21 @@ class AgentGUIClient {
       if (!queueEl._listenersAttached) {
         queueEl._listenersAttached = true;
         queueEl.addEventListener('click', async (e) => {
-          if (e.target.classList.contains('queue-delete-btn')) {
+          if (e.target.classList.contains('queue-steer-btn')) {
+            const index = parseInt(e.target.dataset.index);
+            const q = queue[index];
+            try {
+              const data = await window.wsClient.rpc('conv.steer', { id: conversationId, content: q.content });
+              console.log('Steer response:', data);
+              if (data.ok && data.steered) {
+                // Remove from queue after successful steer
+                await window.wsClient.rpc('q.del', { id: conversationId, messageId: q.messageId });
+              }
+            } catch (err) {
+              console.error('Failed to steer:', err);
+              this.showError('Failed to steer: ' + err.message);
+            }
+          } else if (e.target.classList.contains('queue-delete-btn')) {
             const index = parseInt(e.target.dataset.index);
             const msgId = queue[index].messageId;
             if (await window.UIDialog.confirm('Delete this queued message?', 'Delete Message')) {
@@ -2621,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
    */