feat: add Task tool and subagent support to AI chat

Enable the Task tool so the AI can spawn researcher and coder subagents
for focused subtasks. Render subagent invocations in the chat UI with
a dedicated icon, label, and expandable description.

Author: abose

src-node/claude-code-agent.js

@@ -250,14 +250,37 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale)
         maxTurns: undefined,
         allowedTools: [
             "Read", "Edit", "Write", "Glob", "Grep",
-            "AskUserQuestion",
+            "AskUserQuestion", "Task",
             "mcp__phoenix-editor__getEditorState",
             "mcp__phoenix-editor__takeScreenshot",
             "mcp__phoenix-editor__execJsInLivePreview",
             "mcp__phoenix-editor__controlEditor",
             "mcp__phoenix-editor__resizeLivePreview",
             "mcp__phoenix-editor__wait"
         ],
+        agents: {
+            "researcher": {
+                description: "Explores the codebase, reads files, and searches" +
+                    " for patterns. Use for research tasks.",
+                prompt: "You are a code research assistant. Search and read" +
+                    " files to answer questions. Do not modify files.",
+                tools: ["Read", "Glob", "Grep",
+                    "mcp__phoenix-editor__getEditorState",
+                    "mcp__phoenix-editor__takeScreenshot",
+                    "mcp__phoenix-editor__execJsInLivePreview"]
+            },
+            "coder": {
+                description: "Reads, edits, and writes code files." +
+                    " Use for implementation tasks.",
+                prompt: "You are a coding assistant. Implement the requested" +
+                    " changes using Edit for existing files and Write" +
+                    " only for new files.",
+                tools: ["Read", "Edit", "Write", "Glob", "Grep",
+                    "mcp__phoenix-editor__getEditorState",
+                    "mcp__phoenix-editor__takeScreenshot",
+                    "mcp__phoenix-editor__execJsInLivePreview"]
+            }
+        },
         mcpServers: { "phoenix-editor": editorMcpServer },
         permissionMode: "acceptEdits",
         appendSystemPrompt:

src/core-ai/AIChatPanel.js

@@ -643,7 +643,8 @@ define(function (require, exports, module) {
         "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 },
-        AskUserQuestion: { icon: "fa-solid fa-circle-question", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_QUESTION }
+        AskUserQuestion: { icon: "fa-solid fa-circle-question", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_QUESTION },
+        Task: { icon: "fa-solid fa-diagram-project", color: "#6b9eff", label: Strings.AI_CHAT_TOOL_TASK }
     };
 
     function _onProgress(_event, data) {
@@ -1542,6 +1543,17 @@ define(function (require, exports, module) {
             $tool.find(".ai-tool-header").on("click", function () {
                 $tool.toggleClass("ai-tool-expanded");
             }).css("cursor", "pointer");
+        } else if (toolName === "Task" && toolInput) {
+            const $detail = $('<div class="ai-tool-detail"></div>');
+            const desc = toolInput.description || toolInput.prompt || "";
+            if (desc) {
+                $detail.append($('<div class="ai-tool-detail-line"></div>').text(desc.slice(0, 200)));
+            }
+            $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 (detail.lines && detail.lines.length) {
             // Add expandable detail if available
             const $detail = $('<div class="ai-tool-detail"></div>');
@@ -1674,6 +1686,17 @@ define(function (require, exports, module) {
                 lines: qs.map(function (q) { return q.question; })
             };
         }
+        case "Task": {
+            const desc = input.description || input.prompt || "";
+            const agentType = input.subagent_type || "";
+            const summary = agentType
+                ? StringUtils.format(Strings.AI_CHAT_TOOL_TASK_NAME, agentType)
+                : Strings.AI_CHAT_TOOL_TASK;
+            return {
+                summary: summary,
+                lines: desc ? [desc.split("\n")[0].slice(0, 120)] : []
+            };
+        }
         case "TodoWrite": {
             const todos = input.todos || [];
             const completed = todos.filter(function (t) { return t.status === "completed"; }).length;

src/nls/root/strings.js

@@ -1879,6 +1879,8 @@ define({
     "AI_CHAT_COPY_CODE": "Copy",
     "AI_CHAT_COPIED_CODE": "Copied!",
     "AI_CHAT_TOOL_QUESTION": "Question",
+    "AI_CHAT_TOOL_TASK": "Subagent",
+    "AI_CHAT_TOOL_TASK_NAME": "Subagent: {0}",
     "AI_CHAT_QUESTION_OTHER": "Type a custom answer\u2026",
 
     // demo start - Phoenix Code Playground - Interactive Onboarding