feat: add wait MCP tool, extend live preview banner duration, fix table cursor

- Add `wait` MCP tool (0.1–60s) with countdown UI in AI chat panel
- Auto-approve `wait` tool in allowedTools list
- Show "Waiting Xs" countdown that becomes "Done waiting Xs" on completion
- Keep live preview banner visible for 5s after exec/resize (was instant/3s)
- Cancel pending auto-hide timer when new exec batch starts
- Fix text cursor on table cells (th/td) in AI chat messages

Author: abose

src-node/claude-code-agent.js

@@ -237,7 +237,8 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale)
             "mcp__phoenix-editor__takeScreenshot",
             "mcp__phoenix-editor__execJsInLivePreview",
             "mcp__phoenix-editor__controlEditor",
-            "mcp__phoenix-editor__resizeLivePreview"
+            "mcp__phoenix-editor__resizeLivePreview",
+            "mcp__phoenix-editor__wait"
         ],
         mcpServers: { "phoenix-editor": editorMcpServer },
         permissionMode: "acceptEdits",

src-node/mcp-editor-tools.js

@@ -200,9 +200,27 @@ function createEditorMcpServer(sdkModule, nodeConnector) {
         }
     );
 
+    const waitTool = sdkModule.tool(
+        "wait",
+        "Wait for a specified number of seconds before continuing. " +
+        "Useful for waiting after DOM changes, animations, live preview updates, or resize operations " +
+        "before taking a screenshot or inspecting state. Maximum 60 seconds.",
+        {
+            seconds: z.number().min(0.1).max(60).describe("Number of seconds to wait (0.1–60)")
+        },
+        async function (args) {
+            const ms = Math.round(args.seconds * 1000);
+            await new Promise(function (resolve) { setTimeout(resolve, ms); });
+            return {
+                content: [{ type: "text", text: "Waited " + args.seconds + " seconds." }]
+            };
+        }
+    );
+
     return sdkModule.createSdkMcpServer({
         name: "phoenix-editor",
-        tools: [getEditorStateTool, takeScreenshotTool, execJsInLivePreviewTool, controlEditorTool, resizeLivePreviewTool]
+        tools: [getEditorStateTool, takeScreenshotTool, execJsInLivePreviewTool, controlEditorTool,
+            resizeLivePreviewTool, waitTool]
     });
 }
 

src/core-ai/AIChatPanel.js

@@ -640,6 +640,7 @@ define(function (require, exports, module) {
         "mcp__phoenix-editor__execJsInLivePreview": { icon: "fa-solid fa-eye", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_LIVE_PREVIEW_JS },
         "mcp__phoenix-editor__controlEditor":       { icon: "fa-solid fa-code", color: "#6bc76b", label: Strings.AI_CHAT_TOOL_CONTROL_EDITOR },
         "mcp__phoenix-editor__resizeLivePreview":   { icon: "fa-solid fa-arrows-left-right", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_RESIZE_PREVIEW },
+        "mcp__phoenix-editor__wait":                { icon: "fa-solid fa-hourglass-half", color: "#adb9bd", label: Strings.AI_CHAT_TOOL_WAIT },
         TodoWrite: { icon: "fa-solid fa-list-check", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_TASKS }
     };
 
@@ -1376,6 +1377,20 @@ define(function (require, exports, module) {
             $tool.find(".ai-tool-header").on("click", function () {
                 $tool.toggleClass("ai-tool-expanded");
             }).css("cursor", "pointer");
+        } else if (toolName === "mcp__phoenix-editor__wait" && toolInput && toolInput.seconds) {
+            // Countdown timer: update label every second
+            const totalSec = Math.ceil(toolInput.seconds);
+            let remaining = totalSec;
+            const $label = $tool.find(".ai-tool-label");
+            const countdownId = setInterval(function () {
+                remaining--;
+                if (remaining <= 0) {
+                    clearInterval(countdownId);
+                    $label.text(StringUtils.format(Strings.AI_CHAT_TOOL_WAITED, totalSec));
+                } else {
+                    $label.text(StringUtils.format(Strings.AI_CHAT_TOOL_WAITING, remaining));
+                }
+            }, 1000);
         } else if (toolName === "mcp__phoenix-editor__takeScreenshot") {
             const $detail = $('<div class="ai-tool-detail"></div>');
             $tool.append($detail);
@@ -1503,6 +1518,11 @@ define(function (require, exports, module) {
                 summary: Strings.AI_CHAT_TOOL_RESIZE_PREVIEW,
                 lines: input.width ? [input.width + "px"] : []
             };
+        case "mcp__phoenix-editor__wait":
+            return {
+                summary: StringUtils.format(Strings.AI_CHAT_TOOL_WAITING, input.seconds || "?"),
+                lines: []
+            };
         case "TodoWrite": {
             const todos = input.todos || [];
             const completed = todos.filter(function (t) { return t.status === "completed"; }).length;

src/core-ai/aiPhoenixConnectors.js

@@ -153,6 +153,11 @@ define(function (require, exports, module) {
     function _onExecJsStart() {
         _activeExecJsCount++;
         if (_activeExecJsCount === 1) {
+            // Cancel any pending auto-hide from a previous exec batch
+            if (_bannerAutoHideTimer) {
+                clearTimeout(_bannerAutoHideTimer);
+                _bannerAutoHideTimer = null;
+            }
             _savedLivePreviewMode = LiveDevMain.getCurrentMode();
             if (_savedLivePreviewMode !== LivePreviewConstants.LIVE_PREVIEW_MODE) {
                 LiveDevMain.setMode(LivePreviewConstants.LIVE_PREVIEW_MODE);
@@ -173,7 +178,14 @@ define(function (require, exports, module) {
                 LiveDevMain.setMode(_savedLivePreviewMode);
             }
             _savedLivePreviewMode = null;
-            _hideBanner();
+            // Keep the banner visible briefly so the user can read it
+            if (_bannerAutoHideTimer) {
+                clearTimeout(_bannerAutoHideTimer);
+            }
+            _bannerAutoHideTimer = setTimeout(function () {
+                _hideBanner();
+                _bannerAutoHideTimer = null;
+            }, 5000);
         }
     }
 
@@ -670,7 +682,7 @@ define(function (require, exports, module) {
             _bannerAutoHideTimer = setTimeout(function () {
                 _hideBanner();
                 _bannerAutoHideTimer = null;
-            }, 3000);
+            }, 5000);
 
             const result = { actualWidth: actualWidth };
             if (actualWidth !== targetWidth) {

src/nls/root/strings.js

@@ -1862,6 +1862,9 @@ define({
     "AI_CHAT_CONTEXT_SELECTION": "Selection L{0}-L{1}",
     "AI_CHAT_CONTEXT_CURSOR": "Line {0}",
     "AI_CHAT_CONTEXT_LIVE_PREVIEW": "Live Preview",
+    "AI_CHAT_TOOL_WAIT": "Wait",
+    "AI_CHAT_TOOL_WAITING": "Waiting {0}s",
+    "AI_CHAT_TOOL_WAITED": "Done waiting {0}s",
     "AI_CHAT_COPY_CODE": "Copy",
     "AI_CHAT_COPIED_CODE": "Copied!",
 

src/styles/Extn-AIChatPanel.less

@@ -242,6 +242,7 @@
             max-width: 50%;
             white-space: nowrap;
             overflow-wrap: normal;
+            cursor: text;
         }
 
         th {