feat: stream sub-agent events, add live preview selection to editor state

- Handle sub-agent streaming events separately in claude-code-agent.js
  so Skill/Task tool activity is visible in the AI chat UI
- Add livePreviewSelectedElement to getEditorState MCP tool response
- Rename "Live Preview JS" tool label to "Inspecting preview"
- Fix todo task list: reduce left padding, allow text wrapping

Author: abose

src-node/mcp-editor-tools.js

@@ -42,7 +42,9 @@ function createEditorMcpServer(sdkModule, nodeConnector) {
     const getEditorStateTool = sdkModule.tool(
         "getEditorState",
         "Get the current Phoenix editor state: active file, working set (open files), live preview file, " +
-        "and cursor/selection info (current line text with surrounding context, or selected text). " +
+        "cursor/selection info (current line text with surrounding context, or selected text), " +
+        "and the currently selected element in the live preview (tag, selector, text preview) if any. " +
+        "The live preview selected element may differ from the editor cursor — use execJsInLivePreview to inspect it further. " +
         "Long lines are trimmed to 200 chars and selections to 10K chars — use the Read tool for full content.",
         {},
         async function () {

src/core-ai/aiPhoenixConnectors.js

@@ -54,6 +54,7 @@ define(function (require, exports, module) {
      * Called from the node-side MCP server via execPeer.
      */
     function getEditorState() {
+        const deferred = new $.Deferred();
         const activeFile = MainViewManager.getCurrentlyViewedFile(MainViewManager.ACTIVE_PANE);
         const workingSet = MainViewManager.getWorkingSet(MainViewManager.ALL_PANES);
 
@@ -138,7 +139,37 @@ define(function (require, exports, module) {
             }
         }
 
-        return result;
+        // If live preview is connected, query the selected element (best-effort)
+        if (LiveDevProtocol.getConnectionIds().length > 0) {
+            const LP_SELECTED_EL_JS =
+                "(function(){" +
+                "var el=window.__current_ph_lp_selected;" +
+                "if(!el||!el.isConnected)return null;" +
+                "var tag=el.tagName.toLowerCase();" +
+                "var id=el.id?'#'+el.id:'';" +
+                "var cls=el.className&&typeof el.className==='string'?" +
+                "'.'+el.className.trim().split(/\\s+/).join('.'):" +
+                "'';" +
+                "var text=el.textContent||'';" +
+                "if(text.length>80)text=text.slice(0,80)+'...';" +
+                "text=text.replace(/\\n/g,' ').trim();" +
+                "return{tag:tag,selector:tag+id+cls,textPreview:text};" +
+                "})()";
+            LiveDevProtocol.evaluate(LP_SELECTED_EL_JS)
+                .done(function (evalResult) {
+                    if (evalResult && evalResult.tag) {
+                        result.livePreviewSelectedElement = evalResult;
+                    }
+                    deferred.resolve(result);
+                })
+                .fail(function () {
+                    deferred.resolve(result);
+                });
+        } else {
+            deferred.resolve(result);
+        }
+
+        return deferred.promise();
     }
 
     // --- Screenshot ---

src/styles/Extn-AIChatPanel.less

@@ -409,7 +409,7 @@
 
 /* ── TodoWrite task list widget ────────────────────────────────────── */
 .ai-todo-list {
-    padding: 2px 8px 4px 28px;
+    padding: 2px 8px 4px 0;
 }
 
 .ai-todo-item {
@@ -434,6 +434,9 @@
 .ai-todo-content {
     color: @project-panel-text-2;
     line-height: 1.4;
+    white-space: normal;
+    overflow-wrap: break-word;
+    min-width: 0;
 
     &.completed {
         text-decoration: line-through;