fix: tool streaming preview visible during active tool use

- Delay adding ai-tool-done class by 1.5s so the streaming preview
  remains visible while the tool is active and briefly after completion
- Add final flush of aiToolStream on content_block_stop to ensure
  browser receives latest preview data before tool completes
- Update get_browser_console_logs MCP tool description to mention
  PhNode logs are included

Author: abose

phoenix-builder-mcp/mcp-tools.js

@@ -161,6 +161,7 @@ export function registerTools(server, processManager, wsControlServer, phoenixDe
     server.tool(
         "get_browser_console_logs",
         "Get console logs from the Phoenix browser runtime. Returns last 50 entries by default. " +
+        "This includes both browser-side console logs and Node.js (PhNode) logs, which are prefixed with 'PhNode:'. " +
         "USAGE: Start with default tail=50. Use filter (regex) to narrow results (e.g. filter='error|warn'). " +
         "Use before=N (from previous totalEntries) to page back. Avoid tail=0 unless necessary — " +
         "prefer filter + small tail to keep responses compact.",

src-node/claude-code-agent.js

@@ -381,10 +381,19 @@ async function _runQuery(requestId, prompt, projectPath, model, signal) {
                     }
                 }
 
-                // Tool block complete — parse input and send details
+                // Tool block complete — flush final stream preview and send details
                 if (event.type === "content_block_stop" &&
                     event.index === activeToolIndex &&
                     activeToolName) {
+                    // Final flush of tool stream (bypasses throttle)
+                    if (activeToolInputJson) {
+                        nodeConnector.triggerPeer("aiToolStream", {
+                            requestId: requestId,
+                            toolId: toolCounter,
+                            toolName: activeToolName,
+                            partialJson: activeToolInputJson
+                        });
+                    }
                     let toolInput = {};
                     try {
                         toolInput = JSON.parse(activeToolInputJson);

src/core-ai/AIChatPanel.js

@@ -557,8 +557,7 @@ define(function (require, exports, module) {
         const config = TOOL_CONFIG[toolName] || { icon: "fa-solid fa-gear", color: "#adb9bd", label: toolName };
         const detail = _getToolDetail(toolName, toolInput);
 
-        // Mark as done: replace spinner with colored icon
-        $tool.addClass("ai-tool-done");
+        // Replace spinner with colored icon immediately
         $tool.find(".ai-tool-spinner").replaceWith(
             '<span class="ai-tool-icon" style="color:' + config.color + '">' +
                 '<i class="' + config.icon + '"></i>' +
@@ -593,6 +592,14 @@ define(function (require, exports, module) {
             }).css("cursor", "pointer").addClass("ai-tool-label-clickable");
         }
 
+        // Delay marking as done so the streaming preview stays visible briefly.
+        // The ai-tool-done class hides the preview via CSS; deferring it lets the
+        // browser paint the preview before it disappears.
+        setTimeout(function () {
+            $tool.addClass("ai-tool-done");
+            $tool.find(".ai-tool-preview").text("");
+        }, 1500);
+
         _scrollToBottom();
     }