agentgui 1.0.740 → 1.0.741

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.740",
+  "version": "1.0.741",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/static/js/client.js

@@ -956,6 +956,52 @@ class AgentGUIClient {
     const blocksEl = streamingEl.querySelector('.streaming-blocks');
     if (!blocksEl) return;
 
+    if (block.type === 'tool_result') {
+      const tid = block.tool_use_id;
+      const toolUseEl = (tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`))
+        || (blocksEl.lastElementChild?.classList?.contains('block-tool-use') ? blocksEl.lastElementChild : null);
+      if (toolUseEl) {
+        this.renderer.mergeResultIntoToolUse(toolUseEl, block);
+        this.scrollToBottom();
+        return;
+      }
+    }
+
+    if (block.type === 'tool_status') {
+      const tid = block.tool_use_id;
+      const toolUseEl = tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`);
+      if (toolUseEl) {
+        const summary = toolUseEl.querySelector(':scope > summary');
+        if (summary) {
+          let badge = summary.querySelector('.folded-tool-status-live');
+          if (!badge) { badge = document.createElement('span'); badge.className = 'folded-tool-status-live'; summary.appendChild(badge); }
+          const isRunning = block.status === 'in_progress';
+          badge.style.cssText = 'margin-left:auto;font-size:0.65rem;opacity:0.7;display:inline-flex;align-items:center;gap:0.25rem';
+          badge.innerHTML = (isRunning ? '<span class="animate-spin" style="display:inline-block;width:0.6rem;height:0.6rem;border:1.5px solid var(--color-border);border-top-color:var(--color-info);border-radius:50%"></span>' : '')
+            + '<span>' + (isRunning ? 'Running' : (block.status || '')) + '</span>';
+        }
+        this.scrollToBottom();
+        return;
+      }
+    }
+
+    if (block.type === 'hook_progress') {
+      const hookEvent = (block.hookEvent || '').split(':')[0];
+      if (hookEvent === 'PreToolUse' || hookEvent === 'PostToolUse') {
+        const lastTool = blocksEl.querySelector('.block-tool-use:last-of-type') || blocksEl.lastElementChild;
+        if (lastTool?.classList?.contains('block-tool-use')) {
+          const summary = lastTool.querySelector(':scope > summary');
+          if (summary) {
+            let hookBadge = summary.querySelector('.folded-tool-hook');
+            if (!hookBadge) { hookBadge = document.createElement('span'); hookBadge.className = 'folded-tool-hook'; hookBadge.style.cssText = 'margin-left:0.375rem;font-size:0.6rem;opacity:0.4;font-weight:400'; summary.appendChild(hookBadge); }
+            hookBadge.textContent = block.hookEvent?.split(':').pop() || hookEvent;
+          }
+          return;
+        }
+      }
+      return;
+    }
+
     const el = this.renderer.renderBlock(block, data, blocksEl);
     if (el) {
       blocksEl.appendChild(el);
@@ -2083,7 +2129,8 @@ class AgentGUIClient {
       const deferred = [];
       for (const chunk of list) {
         if (!chunk.block?.type) continue;
-        if (chunk.block.type === 'tool_result') { deferred.push(chunk); continue; }
+        const bt = chunk.block.type;
+        if (bt === 'tool_result' || bt === 'tool_status' || bt === 'hook_progress') { deferred.push(chunk); continue; }
         const el = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
         if (!el) continue;
         el.classList.add('block-loaded');
@@ -2091,10 +2138,23 @@ class AgentGUIClient {
       }
       blocksEl.appendChild(blockFrag);
       for (const chunk of deferred) {
-        const tid = chunk.block.tool_use_id;
-        const toolUseEl = (tid ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`) : null)
-          || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
-        if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
+        const b = chunk.block;
+        if (b.type === 'tool_result') {
+          const tid = b.tool_use_id;
+          const toolUseEl = (tid ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`) : null)
+            || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
+          if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, b);
+        } else if (b.type === 'tool_status') {
+          const tid = b.tool_use_id;
+          const toolUseEl = tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`);
+          if (toolUseEl) {
+            const isError = b.status === 'failed';
+            const isDone = b.status === 'completed';
+            if (isDone || isError) {
+              toolUseEl.classList.add(isError ? 'tool-result-error' : 'tool-result-success');
+            }
+          }
+        }
       }
       if (isActive) {
         const ind = document.createElement('div');
@@ -2143,6 +2203,7 @@ class AgentGUIClient {
         return;
       }
     }
+    if (chunk.block.type === 'tool_status' || chunk.block.type === 'hook_progress') return;
     const element = this.renderer.renderBlock(chunk.block, chunk, blocksEl);
     if (!element) { this.scrollToBottom(); return; }
     blocksEl.appendChild(element);

package/static/js/streaming-renderer.js

@@ -403,6 +403,8 @@ class StreamingRenderer {
           return this.renderBlockPlan(block, context);
         case 'premature':
           return this.renderBlockPremature(block, context);
+        case 'hook_progress':
+          return this.renderBlockHookProgress(block, context);
         default:
           return this.renderBlockGeneric(block, context);
       }
@@ -540,23 +542,28 @@ class StreamingRenderer {
    * Render thinking block (expandable), signature-aware
    */
   renderBlockThinking(block, context) {
+    const thinking = block.thinking || '';
+    const hasSignature = !!block.signature;
     const div = document.createElement('div');
     div.className = 'block-thinking';
     div.classList.add(this._getBlockTypeClass('thinking'));
 
-    const thinking = block.thinking || '';
-    const hasSignature = !!block.signature;
-    div.innerHTML = `
-      <details>
-        <summary>
-          <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
-          <span>Thinking Process</span>
-          ${hasSignature ? '<span style="margin-left:0.5rem;font-size:0.65rem;opacity:0.5;font-weight:400">verified</span>' : ''}
-        </summary>
-        <div class="thinking-content">${this.escapeHtml(thinking)}</div>
-      </details>
-    `;
-
+    if (!thinking) {
+      div.style.cssText = 'display:flex;align-items:center;gap:0.375rem;padding:0.25rem 0;font-size:0.7rem;color:var(--color-text-secondary);opacity:0.6';
+      div.innerHTML = '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.875rem;height:0.875rem"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>'
+        + '<span>Thinking</span>'
+        + (hasSignature ? '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem;color:#3b82f6"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 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>' : '');
+      return div;
+    }
+
+    div.innerHTML = '<details>'
+      + '<summary>'
+      + '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>'
+      + '<span>Thinking Process</span>'
+      + (hasSignature ? '<span style="margin-left:0.5rem;font-size:0.65rem;opacity:0.5;font-weight:400">verified</span>' : '')
+      + '</summary>'
+      + '<div class="thinking-content">' + this.escapeHtml(thinking) + '</div>'
+      + '</details>';
     return div;
   }
 
@@ -1437,6 +1444,23 @@ class StreamingRenderer {
     return div;
   }
 
+  renderBlockHookProgress(block, context) {
+    const hookEvent = block.hookEvent || block.hookName || '';
+    const hookIcons = {
+      PreToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10.666a1 1 0 11-1.64-1.118L9.687 10H5a1 1 0 01-.82-1.573l7-10.666a1 1 0 011.12-.373z" clip-rule="evenodd"/></svg>',
+      PostToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>',
+      Stop: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/></svg>'
+    };
+    const icon = hookIcons[hookEvent.split(':')[0]] || hookIcons.PreToolUse;
+    const label = hookEvent.includes(':') ? hookEvent.split(':').pop() : hookEvent;
+    const div = document.createElement('div');
+    div.className = 'block-hook-progress';
+    div.dataset.hookEvent = hookEvent;
+    div.style.cssText = 'display:none';
+    div.innerHTML = '<span class="hook-badge" style="display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;font-size:0.65rem;color:var(--color-text-secondary);opacity:0.5">' + icon + '<span>' + this.escapeHtml(label) + '</span></span>';
+    return div;
+  }
+
   /**
    * Render usage block (ACP usage updates)
    */