agentgui 1.0.564 → 1.0.566

package/package.json

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

package/static/js/client.js

@@ -564,7 +564,6 @@ class AgentGUIClient {
       if (outputEl) outputEl.innerHTML = '';
       if (this.ui.messageInput) {
         this.ui.messageInput.value = '';
-        this.ui.messageInput.disabled = false;
         this.ui.messageInput.style.height = 'auto';
       }
       this.unlockAgentAndModel();
@@ -863,6 +862,9 @@ class AgentGUIClient {
     // Start polling for chunks from database
     this.startChunkPolling(data.conversationId);
 
+    // Show queue/steer UI when streaming starts (for busy prompt)
+    this.fetchAndRenderQueue(data.conversationId);
+
     this.disableControls();
     this.emit('streaming:start', data);
   }
@@ -982,6 +984,10 @@ class AgentGUIClient {
     // Stop polling for chunks
     this.stopChunkPolling();
 
+    // Clear queue indicator on error
+    const queueEl = document.querySelector('.queue-indicator');
+    if (queueEl) queueEl.remove();
+
     // If this is a premature ACP end, render distinct warning block
     if (data.isPrematureEnd) {
       this.renderer.queueEvent({
@@ -1033,6 +1039,10 @@ class AgentGUIClient {
 
     this.stopChunkPolling();
 
+    // Clear queue indicator when streaming completes
+    const queueEl = document.querySelector('.queue-indicator');
+    if (queueEl) queueEl.remove();
+
     const sessionId = data.sessionId || this.state.currentSession?.id;
     const streamingEl = document.getElementById(`streaming-${sessionId}`);
     if (streamingEl) {
@@ -2372,24 +2382,21 @@ class AgentGUIClient {
 
   /**
    * Disable UI controls during streaming
-   * NOTE: Only disables stop button visibility. Prompt, input, and inject remain enabled.
+   * NOTE: Prompt area is IMMUTABLE - always enabled while connected.
+   * Streaming state is rendered via queue/steer buttons, not input disabling.
    */
   disableControls() {
-    // Prompt area and inject button are NEVER disabled during streaming
-    // Only stop button behavior changes
-    const stopBtn = document.getElementById('stopBtn');
-    if (stopBtn) stopBtn.disabled = false;
+    // IMMUTABLE: Prompt state managed only by syncPromptState() based on WebSocket connection
+    // Never disable input during streaming - use queue/steer visibility instead
   }
 
   /**
    * Enable UI controls
-   * NOTE: Restores stop button visibility. Prompt area always stays enabled.
+   * NOTE: Prompt area is always enabled when connected.
    */
   enableControls() {
-    // Prompt area and inject button are always enabled unless disconnected
-    // Only stop button behavior changes
-    const stopBtn = document.getElementById('stopBtn');
-    if (stopBtn) stopBtn.disabled = true;
+    // IMMUTABLE: Prompt state managed only by syncPromptState() based on WebSocket connection
+    // Never disable input during streaming - use queue/steer visibility instead
   }
 
   /**
@@ -2661,6 +2668,7 @@ class AgentGUIClient {
               }
               const element = this.renderer.renderBlock(chunk.block, chunk);
               if (!element) return;
+              element.classList.add('block-loaded');
               blockFrag.appendChild(element);
             });
 
@@ -2674,6 +2682,7 @@ class AgentGUIClient {
                 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);
                 }
               }
@@ -2759,7 +2768,7 @@ class AgentGUIClient {
     if (!conversation || conversation.id !== conversationId) return;
 
     if (this.ui.messageInput) {
-      this.ui.messageInput.disabled = !this.wsManager.isConnected;
+      this.ui.messageInput.disabled = false;
     }
   }
 
@@ -3034,14 +3043,11 @@ class AgentGUIClient {
   }
 
   /**
-   * Disable prompt area (input and inject button) only on disconnect
+   * Disable prompt area - NEVER CALLED. Prompt must always be enabled.
+   * Keeping method for backward compatibility but it does nothing.
    */
   disablePromptArea() {
-    if (this.ui.messageInput) {
-      this.ui.messageInput.disabled = true;
-    }
-    const injectBtn = document.getElementById('injectBtn');
-    if (injectBtn) injectBtn.disabled = true;
+    // NEVER disable messageInput - prompt must always be writable
   }
 
   /**

package/static/js/streaming-renderer.js

@@ -751,6 +751,7 @@ class StreamingRenderer {
     if (block.id) details.dataset.toolUseId = block.id;
     details.classList.add(this._getBlockTypeClass('tool_use'));
     details.classList.add(this._getToolColorClass(toolName));
+    details.open = true;
     const summary = document.createElement('summary');
     summary.className = 'folded-tool-bar';
     const displayName = this.getToolUseDisplayName(toolName);
@@ -1226,6 +1227,20 @@ class StreamingRenderer {
   renderBlockToolResult(block, context) {
     const isError = block.is_error || false;
     const content = block.content || '';
+    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)) {
+      const statusIcons = { completed: '✅', in_progress: '⚙', pending: '☐' };
+      const completedCount = content.todos.filter(t => t.status === 'completed').length;
+      const totalCount = content.todos.length;
+      const items = content.todos.map(t => `<div class="todo-item"><span class="todo-status">${statusIcons[t.status] || '&#9744;'}</span><span class="todo-text">${this.escapeHtml(t.content || '')}</span></div>`).join('');
+      const div = document.createElement('div');
+      div.className = 'block-tool-result';
+      div.innerHTML = `<details class="folded-tool" open><summary class="folded-tool-bar" style="cursor:pointer;padding:0.5rem;background:var(--color-bg-secondary);border-radius:0.25rem;user-select:none"><span style="font-weight:600;font-size:0.9rem">📋 Tasks</span><span style="margin-left:0.5rem;font-size:0.8rem;color:var(--color-text-secondary)">${completedCount}/${totalCount} complete</span></summary><div class="folded-tool-body tool-param-todos" style="padding:0.75rem">${items}</div></details>`;
+      return div;
+    }
+
     const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
 
     const details = document.createElement('details');
@@ -2185,7 +2200,8 @@ class StreamingRenderer {
     summary.textContent = summaryText;
 
     const details = document.createElement('details');
-    details.className = `block-type-${block.type} ${this._getBlockTypeClass(block.type)}`;
+    const className = `block-${block.type} block-type-${block.type} ${this._getBlockTypeClass(block.type)}`;
+    details.className = className;
     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);