Merge branch 'main' into pluto/btm-panel-tabbed

Author: abose

docs/API-Reference/document/Document.md

@@ -248,7 +248,7 @@ Given a character index within the document text (assuming \n newlines),
 returns the corresponding {line, ch} position. Works whether or not
 a master editor is attached.
 
-**Kind**: instance method of [<code>Document</code>](#Document)
+**Kind**: instance method of [<code>Document</code>](#Document)  
 
 | Param | Type | Description |
 | --- | --- | --- |

src-node/claude-code-agent.js

@@ -147,11 +147,25 @@ exports.sendPrompt = async function (params) {
 
     // Prepend selection context to the prompt if available
     let enrichedPrompt = prompt;
-    if (selectionContext && selectionContext.selectedText) {
-        enrichedPrompt =
-            "The user has selected the following text in " + selectionContext.filePath +
-            " (lines " + selectionContext.startLine + "-" + selectionContext.endLine + "):\n" +
-            "```\n" + selectionContext.selectedText + "\n```\n\n" + prompt;
+    if (selectionContext) {
+        if (selectionContext.selectedText) {
+            enrichedPrompt =
+                "The user has selected the following text in " + selectionContext.filePath +
+                " (lines " + selectionContext.startLine + "-" + selectionContext.endLine + "):\n" +
+                "```\n" + selectionContext.selectedText + "\n```\n\n" + prompt;
+        } else {
+            let previewSnippet = "";
+            if (selectionContext.selectionPreview) {
+                previewSnippet = "\nPreview of selection:\n```\n" +
+                    selectionContext.selectionPreview + "\n```\n";
+            }
+            enrichedPrompt =
+                "The user has selected lines " + selectionContext.startLine + "-" +
+                selectionContext.endLine + " in " + selectionContext.filePath +
+                ". Use the Read tool with offset=" + (selectionContext.startLine - 1) +
+                " and limit=" + (selectionContext.endLine - selectionContext.startLine + 1) +
+                " to read the selected content if needed." + previewSnippet + "\n" + prompt;
+        }
     }
 
     // Run the query asynchronously — don't await here so we return requestId immediately
@@ -222,7 +236,9 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale)
             "mcp__phoenix-editor__getEditorState",
             "mcp__phoenix-editor__takeScreenshot",
             "mcp__phoenix-editor__execJsInLivePreview",
-            "mcp__phoenix-editor__controlEditor"
+            "mcp__phoenix-editor__controlEditor",
+            "mcp__phoenix-editor__resizeLivePreview",
+            "mcp__phoenix-editor__wait"
         ],
         mcpServers: { "phoenix-editor": editorMcpServer },
         permissionMode: "acceptEdits",
@@ -253,21 +269,33 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale)
                                 newText: input.tool_input.new_string
                             };
                             editCount++;
+                            let editResult;
                             try {
-                                await nodeConnector.execPeer("applyEditToBuffer", edit);
+                                editResult = await nodeConnector.execPeer("applyEditToBuffer", edit);
                             } catch (err) {
                                 console.warn("[Phoenix AI] Failed to apply edit to buffer:", err.message);
+                                editResult = { applied: false, error: err.message };
                             }
                             nodeConnector.triggerPeer("aiToolEdit", {
                                 requestId: requestId,
                                 toolId: myToolId,
                                 edit: edit
                             });
+                            let reason;
+                            if (editResult && editResult.applied === false) {
+                                reason = "Edit FAILED: " + (editResult.error || "unknown error");
+                            } else {
+                                reason = "Edit applied successfully via Phoenix editor.";
+                                if (editResult && editResult.isLivePreviewRelated) {
+                                    reason += " The edited file is part of the active live preview." +
+                                        " Reload when ready with execJsInLivePreview: `location.reload()`";
+                                }
+                            }
                             return {
                                 hookSpecificOutput: {
                                     hookEventName: "PreToolUse",
                                     permissionDecision: "deny",
-                                    permissionDecisionReason: "Edit applied successfully via Phoenix editor."
+                                    permissionDecisionReason: reason
                                 }
                             };
                         }
@@ -326,21 +354,33 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale)
                                 newText: input.tool_input.content
                             };
                             editCount++;
+                            let writeResult;
                             try {
-                                await nodeConnector.execPeer("applyEditToBuffer", edit);
+                                writeResult = await nodeConnector.execPeer("applyEditToBuffer", edit);
                             } catch (err) {
                                 console.warn("[Phoenix AI] Failed to apply write to buffer:", err.message);
+                                writeResult = { applied: false, error: err.message };
                             }
                             nodeConnector.triggerPeer("aiToolEdit", {
                                 requestId: requestId,
                                 toolId: myToolId,
                                 edit: edit
                             });
+                            let reason;
+                            if (writeResult && writeResult.applied === false) {
+                                reason = "Write FAILED: " + (writeResult.error || "unknown error");
+                            } else {
+                                reason = "Write applied successfully via Phoenix editor.";
+                                if (writeResult && writeResult.isLivePreviewRelated) {
+                                    reason += " The written file is part of the active live preview." +
+                                        " Reload when ready with execJsInLivePreview: `location.reload()`";
+                                }
+                            }
                             return {
                                 hookSpecificOutput: {
                                     hookEventName: "PreToolUse",
                                     permissionDecision: "deny",
-                                    permissionDecisionReason: "Write applied successfully via Phoenix editor."
+                                    permissionDecisionReason: reason
                                 }
                             };
                         }

src-node/mcp-editor-tools.js

@@ -170,9 +170,57 @@ function createEditorMcpServer(sdkModule, nodeConnector) {
         }
     );
 
+    const resizeLivePreviewTool = sdkModule.tool(
+        "resizeLivePreview",
+        "Resize the live preview panel to a specific width for responsive testing. " +
+        "Provide a width in pixels based on the target device (e.g. 390 for a phone, 768 for a tablet, 1440 for desktop).",
+        {
+            width: z.number().describe("Target width in pixels")
+        },
+        async function (args) {
+            try {
+                const result = await nodeConnector.execPeer("resizeLivePreview", {
+                    width: args.width
+                });
+                if (result.error) {
+                    return {
+                        content: [{ type: "text", text: "Error: " + result.error }],
+                        isError: true
+                    };
+                }
+                return {
+                    content: [{ type: "text", text: JSON.stringify(result) }]
+                };
+            } catch (err) {
+                return {
+                    content: [{ type: "text", text: "Error resizing live preview: " + err.message }],
+                    isError: true
+                };
+            }
+        }
+    );
+
+    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]
+        tools: [getEditorStateTool, takeScreenshotTool, execJsInLivePreviewTool, controlEditorTool,
+            resizeLivePreviewTool, waitTool]
     });
 }
 

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -548,7 +548,7 @@ function RemoteFunctions(config = {}) {
                 if (this.trigger) {
                     _trigger(this.elements[i], "highlight", 0);
                 }
-                clearElementBackground(this.elements[i]);
+                clearElementHoverHighlight(this.elements[i]);
             }
 
             this.elements = [];
@@ -583,19 +583,12 @@ function RemoteFunctions(config = {}) {
         return getHighlightMode() !== "click";
     }
 
-    // helper function to clear element background highlighting
-    function clearElementBackground(element) {
-        if (element._originalBackgroundColor !== undefined) {
-            element.style.backgroundColor = element._originalBackgroundColor;
-        } else {
-            // only clear background if it's currently a highlight color, not if it's an original user style
-            const currentBg = element.style.backgroundColor;
-            if (currentBg === "rgba(0, 162, 255, 0.2)" || currentBg.includes("rgba(0, 162, 255")) {
-                element.style.backgroundColor = "";
-            }
-            // if it's some other color, we just leave it as is - it's likely a user-defined style
+    // helper function to clear element hover outline highlighting
+    function clearElementHoverHighlight(element) {
+        if (element._originalHoverOutline !== undefined) {
+            element.style.outline = element._originalHoverOutline;
         }
-        delete element._originalBackgroundColor;
+        delete element._originalHoverOutline;
     }
 
     function onElementHover(event) {
@@ -622,9 +615,10 @@ function RemoteFunctions(config = {}) {
         if (_hoverHighlight && shouldShowHighlightOnHover()) {
             _hoverHighlight.clear();
 
-            // Store original background color to restore on hover out
-            element._originalBackgroundColor = element.style.backgroundColor;
-            element.style.backgroundColor = "rgba(0, 162, 255, 0.2)";
+            // Store original outline to restore on hover out, then apply a blue border
+            element._originalHoverOutline = element.style.outline;
+            const outlineColor = element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR) ? "#4285F4" : "#3C3F41";
+            element.style.outline = `1px solid ${outlineColor}`;
 
             _hoverHighlight.add(element, false);
 
@@ -646,7 +640,7 @@ function RemoteFunctions(config = {}) {
             // this is to check the user's settings, if they want to show the elements highlights on hover or click
             if (_hoverHighlight && shouldShowHighlightOnHover()) {
                 _hoverHighlight.clear();
-                clearElementBackground(element);
+                clearElementHoverHighlight(element);
                 // dismiss the info box
                 const infoBoxHandler = LivePreviewView.getToolHandler("InfoBox");
                 if (infoBoxHandler) {