feat: add TodoWrite task list rendering, elapsed timer, and batch controlEditor

abose · abose · commit 8a84144e716b · 2026-02-22T00:30:40.000+05:30
- Render TodoWrite tool as a visual task list with status icons (completed,
  in-progress, pending) that auto-expands and is collapsible
- Show elapsed time counter on long-running tools after 2s of inactivity
- Change controlEditor MCP tool to accept an operations array for batch
  file open/close/navigate actions in a single call
- Wire controlEditor through to browser-side with full operation support
- Add corresponding i18n strings and LESS styles
diff --git a/src-node/claude-code-agent.js b/src-node/claude-code-agent.js
@@ -221,7 +221,8 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale)
             "Read", "Edit", "Write", "Glob", "Grep",
             "mcp__phoenix-editor__getEditorState",
             "mcp__phoenix-editor__takeScreenshot",
-            "mcp__phoenix-editor__execJsInLivePreview"
+            "mcp__phoenix-editor__execJsInLivePreview",
+            "mcp__phoenix-editor__controlEditor"
         ],
         mcpServers: { "phoenix-editor": editorMcpServer },
         permissionMode: "acceptEdits",
diff --git a/src-node/mcp-editor-tools.js b/src-node/mcp-editor-tools.js
@@ -123,9 +123,54 @@ function createEditorMcpServer(sdkModule, nodeConnector) {
         }
     );
 
+    const controlEditorTool = sdkModule.tool(
+        "controlEditor",
+        "Control the Phoenix editor: open/close files, navigate to lines, and select text ranges. " +
+        "Accepts an array of operations to batch multiple actions in one call. " +
+        "All line and ch (column) parameters are 1-based.\n\n" +
+        "Operations:\n" +
+        "- open: Open a file in the active pane. Params: filePath\n" +
+        "- close: Close a file (force, no save prompt). Params: filePath\n" +
+        "- openInWorkingSet: Open a file and pin it to the working set. Params: filePath\n" +
+        "- setSelection: Open a file and select a range. Params: filePath, startLine, startCh, endLine, endCh\n" +
+        "- setCursorPos: Open a file and set cursor position. Params: filePath, line, ch",
+        {
+            operations: z.array(z.object({
+                operation: z.enum(["open", "close", "openInWorkingSet", "setSelection", "setCursorPos"]),
+                filePath: z.string().describe("Absolute path to the file"),
+                startLine: z.number().optional().describe("Start line (1-based) for setSelection"),
+                startCh: z.number().optional().describe("Start column (1-based) for setSelection"),
+                endLine: z.number().optional().describe("End line (1-based) for setSelection"),
+                endCh: z.number().optional().describe("End column (1-based) for setSelection"),
+                line: z.number().optional().describe("Line number (1-based) for setCursorPos"),
+                ch: z.number().optional().describe("Column (1-based) for setCursorPos")
+            })).describe("Array of editor operations to execute sequentially")
+        },
+        async function (args) {
+            const results = [];
+            let hasError = false;
+            for (const op of args.operations) {
+                try {
+                    const result = await nodeConnector.execPeer("controlEditor", op);
+                    results.push(result);
+                    if (!result.success) {
+                        hasError = true;
+                    }
+                } catch (err) {
+                    results.push({ success: false, error: err.message });
+                    hasError = true;
+                }
+            }
+            return {
+                content: [{ type: "text", text: JSON.stringify(results) }],
+                isError: hasError
+            };
+        }
+    );
+
     return sdkModule.createSdkMcpServer({
         name: "phoenix-editor",
-        tools: [getEditorStateTool, takeScreenshotTool, execJsInLivePreviewTool]
+        tools: [getEditorStateTool, takeScreenshotTool, execJsInLivePreviewTool, controlEditorTool]
     });
 }
 
diff --git a/src/core-ai/AIChatPanel.js b/src/core-ai/AIChatPanel.js
@@ -596,7 +596,9 @@ define(function (require, exports, module) {
         Skill: { icon: "fa-solid fa-puzzle-piece", color: "#e0c060", label: Strings.AI_CHAT_TOOL_SKILL },
         "mcp__phoenix-editor__getEditorState":     { icon: "fa-solid fa-code", color: "#6bc76b", label: Strings.AI_CHAT_TOOL_EDITOR_STATE },
         "mcp__phoenix-editor__takeScreenshot":     { icon: "fa-solid fa-camera", color: "#c084fc", label: Strings.AI_CHAT_TOOL_SCREENSHOT },
-        "mcp__phoenix-editor__execJsInLivePreview": { icon: "fa-solid fa-eye", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_LIVE_PREVIEW_JS }
+        "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 },
+        TodoWrite: { icon: "fa-solid fa-list-check", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_TASKS }
     };
 
     function _onProgress(_event, data) {
@@ -637,6 +639,42 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * Start an elapsed-time counter on a tool indicator. Called when the tool's
+     * stale timer fires (no streaming activity for 2s).
+     */
+    function _startElapsedTimer($tool) {
+        if ($tool.data("elapsedTimer")) {
+            return; // already running
+        }
+        const startTime = $tool.data("startTime") || Date.now();
+        const $header = $tool.find(".ai-tool-header");
+        let $elapsed = $header.find(".ai-tool-elapsed");
+        if (!$elapsed.length) {
+            $elapsed = $('<span class="ai-tool-elapsed"></span>');
+            $header.append($elapsed);
+        }
+        function update() {
+            const secs = Math.floor((Date.now() - startTime) / 1000);
+            if (secs < 60) {
+                $elapsed.text(secs + "s");
+            } else {
+                const m = Math.floor(secs / 60);
+                const s = secs % 60;
+                $elapsed.text(m + "m " + (s < 10 ? "0" : "") + s + "s");
+            }
+        }
+        update();
+        const timerId = setInterval(function () {
+            if ($tool.hasClass("ai-tool-done")) {
+                clearInterval(timerId);
+                return;
+            }
+            update();
+        }, 1000);
+        $tool.data("elapsedTimer", timerId);
+    }
+
     function _onToolStream(_event, data) {
         const uniqueToolId = (_currentRequestId || "") + "-" + data.toolId;
         _traceToolStreamCounts[uniqueToolId] = (_traceToolStreamCounts[uniqueToolId] || 0) + 1;
@@ -682,6 +720,7 @@ define(function (require, exports, module) {
             if ($livePreview.length && !$tool.hasClass("ai-tool-done")) {
                 $livePreview.text(phrases[idx]);
             }
+            _startElapsedTimer($tool);
             _toolStreamRotateTimer = setInterval(function () {
                 idx = (idx + 1) % phrases.length;
                 const $p = $tool.find(".ai-tool-preview");
@@ -1146,6 +1185,7 @@ define(function (require, exports, module) {
         $tool.find(".ai-tool-label").text(config.label + "...");
         $tool.css("--tool-color", config.color);
         $tool.attr("data-tool-icon", config.icon);
+        $tool.data("startTime", Date.now());
         $messages.append($tool);
         _scrollToBottom();
     }
@@ -1173,9 +1213,38 @@ define(function (require, exports, module) {
         // Update label to include summary
         $tool.find(".ai-tool-label").text(detail.summary);
 
-        // For screenshot tools, add a detail container that will be populated
-        // when the screenshot capture completes (via screenshotCaptured event)
-        if (toolName === "mcp__phoenix-editor__takeScreenshot") {
+        // For TodoWrite, render a mini task-list widget and auto-expand
+        if (toolName === "TodoWrite" && toolInput && toolInput.todos) {
+            const $detail = $('<div class="ai-tool-detail"></div>');
+            const $todoList = $('<div class="ai-todo-list"></div>');
+            toolInput.todos.forEach(function (todo) {
+                let iconClass, statusClass;
+                if (todo.status === "completed") {
+                    iconClass = "fa-solid fa-circle-check";
+                    statusClass = "completed";
+                } else if (todo.status === "in_progress") {
+                    iconClass = "fa-solid fa-spinner fa-spin";
+                    statusClass = "in_progress";
+                } else {
+                    iconClass = "fa-regular fa-circle";
+                    statusClass = "pending";
+                }
+                const $item = $(
+                    '<div class="ai-todo-item">' +
+                        '<span class="ai-todo-icon ' + statusClass + '"><i class="' + iconClass + '"></i></span>' +
+                        '<span class="ai-todo-content ' + (todo.status === "completed" ? "completed" : "") + '"></span>' +
+                    '</div>'
+                );
+                $item.find(".ai-todo-content").text(todo.content);
+                $todoList.append($item);
+            });
+            $detail.append($todoList);
+            $tool.append($detail);
+            $tool.addClass("ai-tool-expanded");
+            $tool.find(".ai-tool-header").on("click", function () {
+                $tool.toggleClass("ai-tool-expanded");
+            }).css("cursor", "pointer");
+        } else if (toolName === "mcp__phoenix-editor__takeScreenshot") {
             const $detail = $('<div class="ai-tool-detail"></div>');
             $tool.append($detail);
             $tool.data("awaitingScreenshot", true);
@@ -1211,6 +1280,14 @@ define(function (require, exports, module) {
         clearTimeout(_toolStreamStaleTimer);
         clearInterval(_toolStreamRotateTimer);
 
+        // Stop the elapsed timer and remove the element
+        const elapsedTimer = $tool.data("elapsedTimer");
+        if (elapsedTimer) {
+            clearInterval(elapsedTimer);
+            $tool.removeData("elapsedTimer");
+        }
+        $tool.find(".ai-tool-elapsed").remove();
+
         // 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.
@@ -1289,6 +1366,79 @@ define(function (require, exports, module) {
                 summary: Strings.AI_CHAT_TOOL_LIVE_PREVIEW_JS,
                 lines: input.code ? input.code.split("\n").slice(0, 20) : []
             };
+        case "TodoWrite": {
+            const todos = input.todos || [];
+            const completed = todos.filter(function (t) { return t.status === "completed"; }).length;
+            return {
+                summary: StringUtils.format(Strings.AI_CHAT_TOOL_TASKS_SUMMARY, completed, todos.length),
+                lines: []
+            };
+        }
+        case "mcp__phoenix-editor__controlEditor": {
+            // Multi-operation batch format
+            if (input.operations && input.operations.length) {
+                if (input.operations.length === 1) {
+                    // Single operation — show its detail
+                    const op = input.operations[0];
+                    const fn = (op.filePath || "").split("/").pop();
+                    let opSummary;
+                    switch (op.operation) {
+                    case "open":
+                    case "openInWorkingSet":
+                        opSummary = "Open " + fn;
+                        break;
+                    case "close":
+                        opSummary = "Close " + fn;
+                        break;
+                    case "setCursorPos":
+                        opSummary = "Go to L" + (op.line || "?") + " in " + fn;
+                        break;
+                    case "setSelection":
+                        opSummary = "Select L" + (op.startLine || "?") + "-L" + (op.endLine || "?") + " in " + fn;
+                        break;
+                    default:
+                        opSummary = Strings.AI_CHAT_TOOL_CONTROL_EDITOR;
+                    }
+                    return { summary: opSummary, lines: [op.filePath || ""] };
+                }
+                // Multiple operations — summarize
+                const count = input.operations.length;
+                const opTypes = {};
+                input.operations.forEach(function (op) {
+                    const t = op.operation || "open";
+                    opTypes[t] = (opTypes[t] || 0) + 1;
+                });
+                const parts = Object.keys(opTypes).map(function (t) {
+                    const label = (t === "open" || t === "openInWorkingSet") ? "Open" :
+                        t === "close" ? "Close" :
+                            t === "setCursorPos" ? "Navigate" :
+                                t === "setSelection" ? "Select" : t;
+                    return label + " " + opTypes[t];
+                });
+                return { summary: parts.join(", ") + " files", lines: [] };
+            }
+            // Legacy single-operation format
+            const fileName = (input.filePath || "").split("/").pop();
+            let opSummary;
+            switch (input.operation) {
+            case "open":
+            case "openInWorkingSet":
+                opSummary = "Open " + fileName;
+                break;
+            case "close":
+                opSummary = "Close " + fileName;
+                break;
+            case "setCursorPos":
+                opSummary = "Go to L" + (input.line || "?") + " in " + fileName;
+                break;
+            case "setSelection":
+                opSummary = "Select L" + (input.startLine || "?") + "-L" + (input.endLine || "?") + " in " + fileName;
+                break;
+            default:
+                opSummary = Strings.AI_CHAT_TOOL_CONTROL_EDITOR;
+            }
+            return { summary: opSummary, lines: [input.filePath || ""] };
+        }
         default: {
             // Fallback: use TOOL_CONFIG label if available
             const cfg = TOOL_CONFIG[toolName];
@@ -1306,6 +1456,13 @@ define(function (require, exports, module) {
     function _finishActiveTools() {
         $messages.find(".ai-msg-tool:not(.ai-tool-done)").each(function () {
             const $prev = $(this);
+            // Clear any running elapsed timer
+            const et = $prev.data("elapsedTimer");
+            if (et) {
+                clearInterval(et);
+                $prev.removeData("elapsedTimer");
+            }
+            $prev.find(".ai-tool-elapsed").remove();
             // _updateToolIndicator already ran — let the delayed timeout handle it
             if ($prev.find(".ai-tool-icon").length) {
                 return;
diff --git a/src/core-ai/aiPhoenixConnectors.js b/src/core-ai/aiPhoenixConnectors.js
@@ -392,6 +392,78 @@ define(function (require, exports, module) {
         return deferred.promise();
     }
 
+    // --- Editor control ---
+
+    /**
+     * Control the editor: open/close files, set cursor, set selection.
+     * Called from the node-side MCP server via execPeer.
+     * @param {Object} params - { operation, filePath, startLine, startCh, endLine, endCh, line, ch }
+     * @return {$.Promise} resolves with { success: true } or { success: false, error: "..." }
+     */
+    function controlEditor(params) {
+        const deferred = new $.Deferred();
+        const vfsPath = SnapshotStore.realToVfsPath(params.filePath);
+
+        switch (params.operation) {
+        case "open":
+            CommandManager.execute(Commands.CMD_OPEN, { fullPath: vfsPath })
+                .done(function () { deferred.resolve({ success: true }); })
+                .fail(function (err) { deferred.resolve({ success: false, error: String(err) }); });
+            break;
+
+        case "close": {
+            const file = FileSystem.getFileForPath(vfsPath);
+            CommandManager.execute(Commands.FILE_CLOSE, { file: file, _forceClose: true })
+                .done(function () { deferred.resolve({ success: true }); })
+                .fail(function (err) { deferred.resolve({ success: false, error: String(err) }); });
+            break;
+        }
+
+        case "openInWorkingSet":
+            CommandManager.execute(Commands.CMD_ADD_TO_WORKINGSET_AND_OPEN, { fullPath: vfsPath })
+                .done(function () { deferred.resolve({ success: true }); })
+                .fail(function (err) { deferred.resolve({ success: false, error: String(err) }); });
+            break;
+
+        case "setSelection":
+            CommandManager.execute(Commands.CMD_OPEN, { fullPath: vfsPath })
+                .done(function () {
+                    const editor = EditorManager.getActiveEditor();
+                    if (editor) {
+                        editor.setSelection(
+                            { line: params.startLine - 1, ch: params.startCh - 1 },
+                            { line: params.endLine - 1, ch: params.endCh - 1 },
+                            true
+                        );
+                        deferred.resolve({ success: true });
+                    } else {
+                        deferred.resolve({ success: false, error: "No active editor after opening file" });
+                    }
+                })
+                .fail(function (err) { deferred.resolve({ success: false, error: String(err) }); });
+            break;
+
+        case "setCursorPos":
+            CommandManager.execute(Commands.CMD_OPEN, { fullPath: vfsPath })
+                .done(function () {
+                    const editor = EditorManager.getActiveEditor();
+                    if (editor) {
+                        editor.setCursorPos(params.line - 1, params.ch - 1, true);
+                        deferred.resolve({ success: true });
+                    } else {
+                        deferred.resolve({ success: false, error: "No active editor after opening file" });
+                    }
+                })
+                .fail(function (err) { deferred.resolve({ success: false, error: String(err) }); });
+            break;
+
+        default:
+            deferred.resolve({ success: false, error: "Unknown operation: " + params.operation });
+        }
+
+        return deferred.promise();
+    }
+
     exports.getEditorState = getEditorState;
     exports.takeScreenshot = takeScreenshot;
     exports.getFileContent = getFileContent;
@@ -400,6 +472,7 @@ define(function (require, exports, module) {
     exports.clearPreviousContentMap = clearPreviousContentMap;
     exports.getLastScreenshot = getLastScreenshot;
     exports.execJsInLivePreview = execJsInLivePreview;
+    exports.controlEditor = controlEditor;
 
     EventDispatcher.makeEventDispatcher(exports);
 });
diff --git a/src/core-ai/main.js b/src/core-ai/main.js
@@ -54,6 +54,10 @@ define(function (require, exports, module) {
         return PhoenixConnectors.execJsInLivePreview(params);
     };
 
+    exports.controlEditor = async function (params) {
+        return PhoenixConnectors.controlEditor(params);
+    };
+
     AppInit.appReady(function () {
         SidebarTabs.addTab("ai", "AI", "fa-solid fa-wand-magic-sparkles", { priority: 200 });
 
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -1826,6 +1826,9 @@ define({
     "AI_CHAT_TOOL_SCREENSHOT_LIVE_PREVIEW": "live preview",
     "AI_CHAT_TOOL_SCREENSHOT_FULL_PAGE": "full page",
     "AI_CHAT_TOOL_LIVE_PREVIEW_JS": "Live Preview JS",
+    "AI_CHAT_TOOL_CONTROL_EDITOR": "Editor",
+    "AI_CHAT_TOOL_TASKS": "Tasks",
+    "AI_CHAT_TOOL_TASKS_SUMMARY": "{0} of {1} tasks done",
     "AI_CHAT_TOOL_SEARCHED": "Searched: {0}",
     "AI_CHAT_TOOL_GREP": "Grep: {0}",
     "AI_CHAT_TOOL_READ_FILE": "Read {0}",
diff --git a/src/styles/Extn-AIChatPanel.less b/src/styles/Extn-AIChatPanel.less
