agentgui 1.0.568 → 1.0.569

package/package.json

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

package/static/index.html

@@ -948,6 +948,26 @@
     .inject-btn:disabled { opacity: 0.4; cursor: not-allowed; }
     .inject-btn.visible { display: flex; }
 
+    .queue-btn {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      background-color: #8b5cf6;
+      color: white;
+      border: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background-color 0.15s;
+      margin-right: 0.25rem;
+    }
+
+    .queue-btn:hover:not(:disabled) { background-color: #7c3aed; }
+    .queue-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .queue-btn.visible { display: flex; }
+
     .steer-btn {
       display: none;
       align-items: center;
@@ -3185,6 +3205,11 @@
               <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
             </svg>
           </button>
+          <button class="queue-btn" id="queueBtn" title="Queue message for running agent" aria-label="Queue message">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+              <path d="M15 13H1v-2h14v2zm0-4H1V7h14v2zM1 19h14v-2H1v2z"/>
+            </svg>
+          </button>
           <button class="steer-btn" id="steerBtn" title="Steer running agent with message" aria-label="Steer agent">
             <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
               <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>

package/static/js/client.js

@@ -458,6 +458,7 @@ class AgentGUIClient {
 
     this.ui.stopButton = document.getElementById('stopBtn');
     this.ui.injectButton = document.getElementById('injectBtn');
+    this.ui.queueButton = document.getElementById('queueBtn');
     this.ui.steerButton = document.getElementById('steerBtn');
 
     if (this.ui.stopButton) {
@@ -486,6 +487,28 @@ class AgentGUIClient {
       });
     }
 
+    if (this.ui.queueButton) {
+      this.ui.queueButton.addEventListener('click', async () => {
+        if (!this.state.currentConversation) return;
+        const message = this.ui.messageInput?.value || '';
+        if (!message.trim()) {
+          this.showError('Please enter a message to queue');
+          return;
+        }
+        try {
+          const data = await window.wsClient.rpc('conv.queue', { id: this.state.currentConversation.id, content: message });
+          console.log('Queue response:', data);
+          if (this.ui.messageInput) {
+            this.ui.messageInput.value = '';
+            this.ui.messageInput.style.height = 'auto';
+          }
+        } catch (err) {
+          console.error('Failed to queue:', err);
+          this.showError('Failed to queue: ' + err.message);
+        }
+      });
+    }
+
     if (this.ui.steerButton) {
       this.ui.steerButton.addEventListener('click', async () => {
         if (!this.state.currentConversation) return;
@@ -726,19 +749,13 @@ class AgentGUIClient {
     if (this.state.currentConversation?.id !== data.conversationId) {
       console.log('Streaming started for non-active conversation:', data.conversationId);
       this.state.streamingConversations.set(data.conversationId, true);
+      this.updateBusyPromptArea(data.conversationId);
       this.emit('streaming:start', data);
       return;
     }
 
-    // Show stop, steer, queue, and inject buttons when streaming starts for current conversation
-    if (this.ui.stopButton) this.ui.stopButton.classList.add('visible');
-    if (this.ui.injectButton) this.ui.injectButton.classList.add('visible');
-    if (this.ui.steerButton) this.ui.steerButton.classList.add('visible');
-    if (this.ui.queueButton) this.ui.queueButton.classList.add('visible');
-    if (this.ui.sendButton) this.ui.sendButton.style.display = 'none';
-    this.ensurePromptAreaAlwaysEnabled();
-
     this.state.streamingConversations.set(data.conversationId, true);
+    this.updateBusyPromptArea(data.conversationId);
     this.state.currentSession = {
       id: data.sessionId,
       conversationId: data.conversationId,
@@ -977,11 +994,13 @@ class AgentGUIClient {
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
       console.log('Streaming error for non-active conversation:', conversationId);
       this.state.streamingConversations.delete(conversationId);
+      this.updateBusyPromptArea(conversationId);
       this.emit('streaming:error', data);
       return;
     }
 
     this.state.streamingConversations.delete(conversationId);
+    this.updateBusyPromptArea(conversationId);
 
     // Stop polling for chunks
     this.stopChunkPolling();
@@ -1021,23 +1040,19 @@ class AgentGUIClient {
     console.log('Streaming completed:', data);
     this._clearThinkingCountdown();
 
-    // Hide stop, steer, and inject buttons when streaming completes
-    if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
-    if (this.ui.injectButton) this.ui.injectButton.classList.remove('visible');
-    if (this.ui.steerButton) this.ui.steerButton.classList.remove('visible');
-    if (this.ui.sendButton) this.ui.sendButton.style.display = '';
-
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
     if (conversationId) this.invalidateCache(conversationId);
 
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
       console.log('Streaming completed for non-active conversation:', conversationId);
       this.state.streamingConversations.delete(conversationId);
+      this.updateBusyPromptArea(conversationId);
       this.emit('streaming:complete', data);
       return;
     }
 
     this.state.streamingConversations.delete(conversationId);
+    this.updateBusyPromptArea(conversationId);
 
     this.stopChunkPolling();
 
@@ -2489,6 +2504,7 @@ class AgentGUIClient {
 
       if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
       if (this.ui.injectButton) this.ui.injectButton.classList.remove('visible');
+      if (this.ui.queueButton) this.ui.queueButton.classList.remove('visible');
       if (this.ui.steerButton) this.ui.steerButton.classList.remove('visible');
       if (this.ui.sendButton) this.ui.sendButton.style.display = '';
 
@@ -2668,27 +2684,27 @@ class AgentGUIClient {
                 toolResultBlocks.set(chunk.id, chunk);
                 return;
               }
-              const element = this.renderer.renderBlock(chunk.block, chunk);
+              const element = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
               if (!element) return;
-              // Ensure CSS classes are always applied for styling consistency
               element.classList.add('block-loaded');
-              element.classList.add(`block-type-${chunk.block.type}`);
               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) {
-                  element.classList.add('block-loaded');
-                  lastBlock.appendChild(element);
-                }
+            toolResultBlocks.forEach((chunk) => {
+              const toolUseId = chunk.block.tool_use_id;
+              const toolUseEl = toolUseId
+                ? 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);
               }
             });
 
@@ -2779,20 +2795,22 @@ class AgentGUIClient {
   }
 
   updateBusyPromptArea(conversationId) {
+    if (this.state.currentConversation?.id !== conversationId) return;
     const isStreaming = this.state.streamingConversations.has(conversationId);
     const isConnected = this.wsManager?.isConnected;
 
     const injectBtn = document.getElementById('injectBtn');
     const steerBtn = document.getElementById('steerBtn');
+    const queueBtn = document.getElementById('queueBtn');
     const stopBtn = document.getElementById('stopBtn');
 
-    if (injectBtn) injectBtn.style.display = isStreaming ? 'flex' : 'none';
-    if (steerBtn) steerBtn.style.display = isStreaming ? 'flex' : 'none';
-    if (stopBtn) stopBtn.style.display = isStreaming ? 'flex' : 'none';
+    [injectBtn, steerBtn, queueBtn, stopBtn].forEach(btn => {
+      if (!btn) return;
+      btn.classList.toggle('visible', isStreaming);
+      btn.disabled = !isConnected;
+    });
 
-    if (injectBtn) injectBtn.disabled = !isConnected;
-    if (steerBtn) steerBtn.disabled = !isConnected;
-    if (stopBtn) stopBtn.disabled = !isConnected;
+    if (this.ui.sendButton) this.ui.sendButton.style.display = isStreaming ? 'none' : '';
   }
 
   removeScrollUpDetection() {
@@ -3070,6 +3088,9 @@ class AgentGUIClient {
     if (this.ui.steerButton && this.ui.steerButton.classList.contains('visible')) {
       this.ui.steerButton.disabled = !this.wsManager.isConnected;
     }
+    if (this.ui.queueButton && this.ui.queueButton.classList.contains('visible')) {
+      this.ui.queueButton.disabled = !this.wsManager.isConnected;
+    }
   }
 
   /**
@@ -3103,6 +3124,10 @@ class AgentGUIClient {
       this.ui.steerButton.classList.add('visible');
       this.ui.steerButton.disabled = !this.wsManager.isConnected;
     }
+    if (this.ui.queueButton) {
+      this.ui.queueButton.classList.add('visible');
+      this.ui.queueButton.disabled = !this.wsManager.isConnected;
+    }
   }
 
   /**

package/static/js/streaming-renderer.js

@@ -1230,7 +1230,8 @@ class StreamingRenderer {
     const toolName = block.tool_name || block.name || '';
 
     // Special handling for TodoWrite: render directly without success wrapper
-    if (toolName.includes('TodoWrite') && typeof content === 'object' && content.todos && Array.isArray(content.todos)) {
+    // Detect by tool name OR by content structure (todos array)
+    if ((toolName.includes('TodoWrite') || (typeof content === 'object' && Array.isArray(content?.todos))) && typeof content === 'object' && content.todos && Array.isArray(content.todos)) {
       const statusIcons = { completed: '✅', in_progress: '⚙', pending: '☐' };
       const completedCount = content.todos.filter(t => t.status === 'completed').length;
       const totalCount = content.todos.length;
@@ -2200,8 +2201,8 @@ class StreamingRenderer {
     summary.textContent = summaryText;
 
     const details = document.createElement('details');
-    const className = `block-${block.type} block-type-${block.type} ${this._getBlockTypeClass(block.type)}`;
-    details.className = className;
+    details.className = `block-${block.type}`;
+    details.classList.add(this._getBlockTypeClass(block.type));
     details.setAttribute('data-block-type', block.type);
     details.setAttribute('data-lazy-load', 'pending');
     details.open = block.type === 'success' || (block.type === 'tool_result' && !block.is_error);