agentgui 1.0.740 → 1.0.742

package/package.json

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

package/static/js/client.js

@@ -90,14 +90,18 @@ class AgentGUIClient {
       currentConversationId: null,
       currentSessionId: null
     };
+
+    this._debug = typeof localStorage !== 'undefined' && localStorage.getItem('debug') === '1';
   }
 
+  _dbg(...args) { if (this._debug) this._dbg(...args); }
+
   /**
    * Initialize the client
    */
   async init() {
     try {
-      console.log('Initializing AgentGUI client');
+      this._dbg('Initializing AgentGUI client');
 
       // Initialize renderer
       this.renderer.init(this.config.outputContainerId, this.config.scrollContainerId);
@@ -105,7 +109,7 @@ class AgentGUIClient {
       // Initialize image loader
       if (typeof ImageLoader !== 'undefined') {
         window.imageLoader = new ImageLoader();
-        console.log('Image loader initialized');
+        this._dbg('Image loader initialized');
       }
 
       // Setup event listeners
@@ -137,7 +141,7 @@ class AgentGUIClient {
       this.emit('initialized');
       this._setupDebugHooks();
 
-      console.log('AgentGUI client initialized');
+      this._dbg('AgentGUI client initialized');
       return this;
     } catch (error) {
       console.error('Client initialization error:', error);
@@ -151,7 +155,7 @@ class AgentGUIClient {
    */
   setupWebSocketListeners() {
     this.wsManager.on('connected', () => {
-      console.log('WebSocket connected');
+      this._dbg('WebSocket connected');
       this.updateConnectionStatus('connected');
       this._subscribeToConversationUpdates();
       // On reconnect (not initial connect), invalidate current conversation's DOM
@@ -170,7 +174,7 @@ class AgentGUIClient {
       if (window.__SERVER_VERSION) {
         fetch((window.__BASE_URL || '') + '/api/version').then(r => r.json()).then(d => {
           if (d.version && d.version !== window.__SERVER_VERSION) {
-            console.log(`Server updated ${window.__SERVER_VERSION} → ${d.version}, reloading`);
+            this._dbg(`Server updated ${window.__SERVER_VERSION} → ${d.version}, reloading`);
             window.location.reload();
           }
         }).catch(() => {});
@@ -178,7 +182,7 @@ class AgentGUIClient {
     });
 
     this.wsManager.on('disconnected', () => {
-      console.log('WebSocket disconnected');
+      this._dbg('WebSocket disconnected');
       this.updateConnectionStatus('disconnected');
       this.updateSendButtonState();
       this.disablePromptArea();
@@ -186,7 +190,7 @@ class AgentGUIClient {
     });
 
     this.wsManager.on('reconnecting', (data) => {
-      console.log('WebSocket reconnecting:', data);
+      this._dbg('WebSocket reconnecting:', data);
       this.updateConnectionStatus('reconnecting');
     });
 
@@ -266,7 +270,7 @@ class AgentGUIClient {
    */
   setupRendererListeners() {
     this.renderer.on('batch:complete', (data) => {
-      console.log('Batch rendered:', data);
+      this._dbg('Batch rendered:', data);
       this.updateMetrics(data.metrics);
     });
 
@@ -293,7 +297,7 @@ class AgentGUIClient {
       if (sessionId && this.isValidId(sessionId)) {
         this.routerState.currentSessionId = sessionId;
       }
-      console.log('Restoring conversation from URL:', conversationId);
+      this._dbg('Restoring conversation from URL:', conversationId);
       this._isLoadingConversation = true;
       if (window.conversationManager) {
         window.conversationManager.select(conversationId);
@@ -303,7 +307,7 @@ class AgentGUIClient {
           // If the URL conversation doesn't exist, try loading the most recent conversation
           if (this.state.conversations && this.state.conversations.length > 0) {
             const latestConv = this.state.conversations[0];
-            console.log('Loading latest conversation instead:', latestConv.id);
+            this._dbg('Loading latest conversation instead:', latestConv.id);
             return this.loadConversationMessages(latestConv.id);
           } else {
             // No conversations available - show welcome screen
@@ -510,7 +514,7 @@ class AgentGUIClient {
         if (!this.state.currentConversation) return;
         try {
           const data = await window.wsClient.rpc('conv.cancel', { id: this.state.currentConversation.id });
-          console.log('Stop response:', data);
+          this._dbg('Stop response:', data);
         } catch (err) {
           console.error('Failed to stop:', err);
         }
@@ -561,7 +565,7 @@ class AgentGUIClient {
         try {
           // Queue uses msg.send which will enqueue if streaming is active
           const data = await window.wsClient.rpc('msg.send', { id: this.state.currentConversation.id, content: message });
-          console.log('Queue response:', data);
+          this._dbg('Queue response:', data);
           if (this.ui.messageInput) {
             this.ui.messageInput.value = '';
             this.ui.messageInput.style.height = 'auto';
@@ -788,7 +792,7 @@ class AgentGUIClient {
   }
 
   async handleStreamingStart(data) {
-    console.log('Streaming started:', data);
+    this._dbg('Streaming started:', data);
     if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'STREAMING', conversationId: data.conversationId });
     this._clearThinkingCountdown();
     if (this._lastSendTime > 0) {
@@ -812,9 +816,9 @@ class AgentGUIClient {
     // If this streaming event is for a different conversation than what we are viewing,
     // just track the state but do not modify the DOM or start polling
     if (this.state.currentConversation?.id !== data.conversationId) {
-      console.log('Streaming started for non-active conversation:', data.conversationId);
+      this._dbg('Streaming started for non-active conversation:', data.conversationId);
       this._setConvStreaming(data.conversationId, true, data.sessionId, data.agentId);
-      console.log('[SYNC] streaming_start - non-active conv:', { convId: data.conversationId, sessionId: data.sessionId, streamingCount: this.state.streamingConversations.size });
+      this._dbg('[SYNC] streaming_start - non-active conv:', { convId: data.conversationId, sessionId: data.sessionId, streamingCount: this.state.streamingConversations.size });
       this.updateBusyPromptArea(data.conversationId);
       this.emit('streaming:start', data);
 
@@ -900,7 +904,7 @@ class AgentGUIClient {
   }
 
   async handleStreamingResumed(data) {
-    console.log('Streaming resumed:', data);
+    this._dbg('Streaming resumed:', data);
     const conv = this.state.currentConversation || { id: data.conversationId };
     await this.handleStreamingStart({
       type: 'streaming_start',
@@ -956,6 +960,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);
@@ -1052,7 +1102,7 @@ class AgentGUIClient {
 
     // If this event is for a conversation we are NOT currently viewing, just track state
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
-      console.log('Streaming error for non-active conversation:', conversationId);
+      this._dbg('Streaming error for non-active conversation:', conversationId);
       this._setConvStreaming(conversationId, false);
       this.updateBusyPromptArea(conversationId);
       this.emit('streaming:error', data);
@@ -1117,7 +1167,7 @@ class AgentGUIClient {
   }
 
   handleStreamingComplete(data) {
-    console.log('Streaming completed:', data);
+    this._dbg('Streaming completed:', data);
     if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
     this._clearThinkingCountdown();
 
@@ -1125,16 +1175,16 @@ class AgentGUIClient {
     if (conversationId) this.invalidateCache(conversationId);
 
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
-      console.log('Streaming completed for non-active conversation:', conversationId);
+      this._dbg('Streaming completed for non-active conversation:', conversationId);
       this._setConvStreaming(conversationId, false);
-      console.log('[SYNC] streaming_complete - non-active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size });
+      this._dbg('[SYNC] streaming_complete - non-active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size });
       this.updateBusyPromptArea(conversationId);
       this.emit('streaming:complete', data);
       return;
     }
 
     this._setConvStreaming(conversationId, false);
-    console.log('[SYNC] streaming_complete - active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size, interrupted: data.interrupted });
+    this._dbg('[SYNC] streaming_complete - active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size, interrupted: data.interrupted });
     this.updateBusyPromptArea(conversationId);
 
     const sessionId = data.sessionId || this.state.currentSession?.id;
@@ -1222,7 +1272,7 @@ class AgentGUIClient {
       return;
     }
 
-    console.log('[SYNC] message_created:', { msgId: data.message.id, role: data.message.role, convId: data.conversationId });
+    this._dbg('[SYNC] message_created:', { msgId: data.message.id, role: data.message.role, convId: data.conversationId });
 
     // Update messageCount in current conversation state for user messages
     if (data.message.role === 'user' && this.state.currentConversation) {
@@ -2036,7 +2086,7 @@ class AgentGUIClient {
       }
 
       if (result.queued) {
-        console.log('Message queued, position:', result.queuePosition);
+        this._dbg('Message queued, position:', result.queuePosition);
         this.enableControls();
         return;
       }
@@ -2083,7 +2133,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 +2142,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 +2207,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);
@@ -2199,13 +2264,13 @@ class AgentGUIClient {
           .map(a => `<option value="${a.id}">${a.name.split(/[\s\-]+/)[0]}</option>`)
           .join('');
         this.ui.agentSelector.style.display = 'inline-block';
-        console.log(`[Agent Selector] Loaded ${subAgents.length} sub-agents for ${cliAgentId}`);
+        this._dbg(`[Agent Selector] Loaded ${subAgents.length} sub-agents for ${cliAgentId}`);
         // Auto-select first sub-agent and load its models
         const firstSubAgentId = subAgents[0].id;
         this.ui.agentSelector.value = firstSubAgentId;
         this.loadModelsForAgent(cliAgentId); // models keyed to parent agent
       } else {
-        console.log(`[Agent Selector] No sub-agents found for ${cliAgentId}`);
+        this._dbg(`[Agent Selector] No sub-agents found for ${cliAgentId}`);
         // Load models for the CLI agent itself (fallback for agents without sub-agents)
         const cliToAcpMap = {
           'cli-opencode': 'opencode',
@@ -2447,7 +2512,7 @@ class AgentGUIClient {
     }
     if (progress.done || progress.status === 'completed') {
       this._modelDownloadInProgress = false;
-      console.log('[Models] Download complete');
+      this._dbg('[Models] Download complete');
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
       return;
     }
@@ -2459,7 +2524,7 @@ class AgentGUIClient {
 
   _handleTTSSetupProgress(data) {
     if (data.step && data.status) {
-      console.log('[TTS Setup]', data.step, ':', data.status, data.message || '');
+      this._dbg('[TTS Setup]', data.step, ':', data.status, data.message || '');
     }
   }
 
@@ -2716,7 +2781,7 @@ class AgentGUIClient {
           if (window.conversationManager) window.conversationManager.loadConversations();
           const fallbackConv = prevConversationId ? prevConversationId : availableFallback?.id;
           if (fallbackConv && fallbackConv !== conversationId) {
-            console.log('Resuming from fallback conversation:', fallbackConv);
+            this._dbg('Resuming from fallback conversation:', fallbackConv);
             this.showError('Conversation not found. Resuming previous conversation.');
             await this.loadConversationMessages(fallbackConv);
           } else {
@@ -2897,7 +2962,7 @@ class AgentGUIClient {
       // Resume from last successful conversation if available, or fall back to any available conversation
       const fallbackConv = prevConversationId ? prevConversationId : availableFallback?.id;
       if (fallbackConv && fallbackConv !== conversationId) {
-        console.log('Resuming from fallback conversation due to error:', fallbackConv);
+        this._dbg('Resuming from fallback conversation due to error:', fallbackConv);
         this.showError('Failed to load conversation. Resuming previous conversation.');
         try {
           await this.loadConversationMessages(fallbackConv);
@@ -3293,7 +3358,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     agentGUIClient = new AgentGUIClient();
     window.agentGuiClient = agentGUIClient;
     await agentGUIClient.init();
-    console.log('AgentGUI ready');
+    this._dbg('AgentGUI ready');
   } catch (error) {
     console.error('Failed to initialize AgentGUI:', error);
   }

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)
    */