@superblocksteam/vite-plugin-file-sync 2.0.72-next.1 → 2.0.72-next.3

package/dist/ai-service/mcp/embedded-playwright-mcp-server.js

@@ -2,6 +2,8 @@ import { once } from "node:events";
 import fs from "node:fs";
 import http from "node:http";
 import { chromium, firefox, webkit, } from "playwright";
+/** Default viewport dimensions for consistent screenshots */
+const DEFAULT_VIEWPORT = { width: 1280, height: 800 };
 const PLAYWRIGHT_ACTIONS = [
     "navigate",
     "click",
@@ -12,36 +14,37 @@ const PLAYWRIGHT_ACTIONS = [
     "evaluate",
     "getUrl",
     "reload",
+    "getConsoleLogs",
+    "scroll",
+    "scrollIntoView",
 ];
+let capturedConsoleLogs = [];
 export async function startEmbeddedPlaywrightMcpServer(options) {
+    const logger = options.logger;
     let browser;
     let context = null;
     let shouldCloseBrowser = true;
     if (options?.connectWsEndpoint) {
-        console.log(`🎬 MCP Server: Connecting to existing browser at ${options.connectWsEndpoint}`);
-        browser = await chromium.connect({ wsEndpoint: options.connectWsEndpoint });
+        browser = await chromium.connect({
+            wsEndpoint: options.connectWsEndpoint,
+        });
         shouldCloseBrowser = false;
     }
     else {
-        console.log("🎬 MCP Server: Launching new browser with storage state");
         browser = await launchBrowser();
     }
-    console.log(`🎬 MCP Server: Browser contexts available before selection: ${browser.contexts().length}`);
     // Reuse an existing context when connecting to an existing browser
     if (options?.connectWsEndpoint) {
         const existing = browser.contexts();
         if (existing.length > 0) {
             context = existing[0];
-            console.log("🎬 MCP Server: Reusing existing browser context");
-        }
-        else {
-            console.warn("🎬 MCP Server: No existing context found on shared browser; falling back to new context with storage/JWT");
         }
     }
     if (!context) {
-        const contextOptions = {};
+        const contextOptions = {
+            viewport: DEFAULT_VIEWPORT,
+        };
         if (options?.storageStateData) {
-            console.log("🎬 MCP Server: Using provided storageStateData");
             contextOptions.storageState = options.storageStateData;
             // Duplicate auth cookies onto app host if needed (e.g., when original domain is auth0)
             if (options.appUrl && options.storageStateData.cookies?.length) {
@@ -62,12 +65,8 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
         }
         else if (options?.storageStatePath) {
             if (fs.existsSync(options.storageStatePath)) {
-                console.log(`🎬 MCP Server: Loading storage state from ${options.storageStatePath}`);
                 contextOptions.storageState = options.storageStatePath;
             }
-            else {
-                console.warn(`🎬 MCP Server: Storage state not found at ${options.storageStatePath}, starting without it`);
-            }
         }
         context = await browser.newContext(contextOptions);
     }
@@ -75,6 +74,154 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
     if (!context) {
         throw new Error("Failed to create or reuse a Playwright context");
     }
+    // Inject sb-init and sb-bootstrap-response data for direct iframe access
+    // This simulates the parent window sending these messages to the iframe
+    if (options?.initData || options?.bootstrapData) {
+        const initData = options.initData;
+        const bootstrapData = options.bootstrapData;
+        /**
+         * CRITICAL: Mock Parent Window Setup for Playwright Browser Automation
+         *
+         * WHY THIS IS NECESSARY:
+         * The Superblocks library code (in @superblocksteam/library) expects to run inside an iframe
+         * embedded by the Superblocks editor. It uses `window.parent.postMessage()` to communicate
+         * with the editor and relies on `window.parent !== window` to detect the embedded state.
+         *
+         * When running in Playwright for E2E testing, there is no parent iframe - the page runs
+         * standalone. Without this mock, the library would:
+         * 1. Fail the `isEmbeddedBySuperblocksFirstParty()` check
+         * 2. Never receive the `sb-init` message needed to establish socket connections
+         * 3. Never receive the `sb-bootstrap-response` with auth tokens and app data
+         *
+         * HOW IT WORKS:
+         * 1. We override `window.parent` with a mock object BEFORE library code loads (via addInitScript)
+         * 2. The mock intercepts `postMessage` calls from the library
+         * 3. When the library sends "sb-ready", we respond with "sb-init" containing peerId/auth data
+         * 4. When the library sends "sb-editor-request-bootstrap", we respond with bootstrap data
+         * 5. We also send initial messages proactively in case the library sets up listeners late
+         *
+         * WHAT COULD BREAK THIS:
+         * - If the library changes how it detects parent window embedding (e.g., different checks)
+         * - If the message types or payload shapes change in the library
+         * - If the library adds additional security checks (e.g., origin verification on parent)
+         * - If timing changes require different setTimeout delays
+         *
+         * TESTING NOTE:
+         * Integration tests for this setup should verify:
+         * 1. The app successfully initializes and shows content
+         * 2. API calls are authenticated (tokens were passed correctly)
+         * 3. Real-time features work (socket connection established via peerId)
+         */
+        await context.addInitScript((payload) => {
+            const { initData: init, bootstrapData: bootstrap } = payload;
+            /**
+             * Mock parent window object that intercepts postMessage calls from the library.
+             * When the app sends messages expecting a parent response, we handle them here.
+             */
+            const mockParent = {
+                postMessage: (message, _targetOrigin) => {
+                    // When the app sends sb-ready, we respond with sb-init
+                    // This triggers the library to establish its socket connection
+                    if (message?.type === "sb-ready" && init) {
+                        setTimeout(() => {
+                            window.postMessage({
+                                type: "sb-init",
+                                payload: {
+                                    peerId: init.peerId,
+                                    userId: init.userId,
+                                    devServerAuthorization: init.devServerAuthorization,
+                                    appId: init.appId,
+                                    windowOriginUrl: init.windowOriginUrl,
+                                },
+                                startTime: Date.now(),
+                            }, "*");
+                        }, 10);
+                    }
+                    // When the app sends sb-editor-request-bootstrap, we respond with bootstrap data
+                    // This provides auth tokens and configuration needed by the API manager
+                    if (message?.type === "sb-editor-request-bootstrap" && bootstrap) {
+                        setTimeout(() => {
+                            window.postMessage({
+                                type: "sb-bootstrap-response",
+                                payload: bootstrap,
+                                startTime: Date.now(),
+                            }, "*");
+                        }, 10);
+                    }
+                    // When the app sends authenticate-api-request, we respond with resolve-promise
+                    // This allows API calls to proceed in test mode without actual auth
+                    if (message?.type === "authenticate-api-request") {
+                        const { callbackId } = message.payload || {};
+                        if (callbackId) {
+                            setTimeout(() => {
+                                window.postMessage({
+                                    type: "resolve-promise",
+                                    callbackId,
+                                    payload: {}, // Empty success result - no auth errors
+                                }, "*");
+                            }, 10);
+                        }
+                    }
+                },
+                // These properties make the mock look like a real window object
+                // which helps pass any instanceof or property existence checks
+                window: window,
+                document: document,
+                location: window.location,
+            };
+            // Override window.parent to point to our mock
+            // This must happen before the library code runs (hence addInitScript)
+            Object.defineProperty(window, "parent", {
+                value: mockParent,
+                writable: false,
+                configurable: true,
+            });
+            // Send initial messages proactively after a delay
+            // This handles the case where the library sets up listeners after checking window.parent
+            if (init) {
+                setTimeout(() => {
+                    window.postMessage({
+                        type: "sb-init",
+                        payload: {
+                            peerId: init.peerId,
+                            userId: init.userId,
+                            devServerAuthorization: init.devServerAuthorization,
+                            appId: init.appId,
+                            windowOriginUrl: init.windowOriginUrl,
+                        },
+                        startTime: Date.now(),
+                    }, "*");
+                }, 100);
+            }
+            if (bootstrap) {
+                setTimeout(() => {
+                    window.postMessage({
+                        type: "sb-bootstrap-response",
+                        payload: bootstrap,
+                        startTime: Date.now(),
+                    }, "*");
+                }, 200);
+                // Send sb-global-sync with profiles data for API execution
+                // This sets superblocksContext.profiles which is needed for profileId
+                if (bootstrap.profiles) {
+                    setTimeout(() => {
+                        window.postMessage({
+                            type: "sb-global-sync",
+                            payload: {
+                                global: {
+                                    profiles: bootstrap.profiles,
+                                },
+                            },
+                            startTime: Date.now(),
+                        }, "*");
+                    }, 300);
+                }
+            }
+        }, {
+            initData,
+            bootstrapData,
+        });
+    }
     // Seed a cookie/localStorage with JWT for app domain if provided
     if (options?.jwt && options?.appUrl) {
         try {
@@ -145,7 +292,13 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
             await context.addCookies(cookies);
         }
         catch (error) {
-            console.warn(`🎬 MCP Server: Failed to seed JWT cookie/localStorage: ${String(error)}`);
+            logger.error(`[MCP-Server] ❌ Failed to seed JWT cookie/localStorage: ${String(error)}`, {
+                error: {
+                    kind: "McpServerSeedJwtError",
+                    message: String(error),
+                    stack: error instanceof Error ? error.stack : undefined,
+                },
+            });
         }
     }
     // Seed session storage for app origin if provided
@@ -165,8 +318,8 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
                 }
             }, { targetOrigin: origin, entries: items });
         }
-        catch (error) {
-            console.warn(`🎬 MCP Server: Failed to seed sessionStorage: ${String(error)}`);
+        catch {
+            // ignore session storage seeding errors
         }
     }
     // Seed additional origins storage (local/session) if provided
@@ -202,8 +355,8 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
                         ssEntries: seedSession,
                     });
                 }
-                catch (error) {
-                    console.warn(`🎬 MCP Server: Failed to seed extra origin storage for ${origin}: ${String(error)}`);
+                catch {
+                    // ignore extra origin storage seeding errors
                 }
             }
         }
@@ -212,6 +365,35 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
     // Prefer an existing page in the reused context (e.g., the CLI-authenticated one)
     const existingPages = context.pages();
     const activePage = existingPages.length > 0 ? existingPages[0] : page;
+    // Set up console log capture for the page
+    capturedConsoleLogs = []; // Reset logs for new session
+    activePage.on("console", (msg) => {
+        capturedConsoleLogs.push({
+            type: msg.type(),
+            text: msg.text(),
+            timestamp: Date.now(),
+        });
+    });
+    // Auto-navigate to the app URL if provided, so the agent doesn't need to navigate manually
+    if (options?.appUrl) {
+        try {
+            await activePage.goto(options.appUrl, {
+                waitUntil: "load",
+                timeout: 60000,
+            });
+        }
+        catch (error) {
+            // Don't throw - let the agent handle navigation if auto-nav fails
+            // Log the error for debugging purposes
+            logger.warn(`[MCP-Server] Auto-navigation to ${options.appUrl} failed: ${String(error)}`, {
+                error: {
+                    kind: "McpServerAutoNavError",
+                    message: String(error),
+                    stack: error instanceof Error ? error.stack : undefined,
+                },
+            });
+        }
+    }
     const server = http.createServer((req, res) => {
         void (async () => {
             try {
@@ -312,14 +494,8 @@ async function readRequestBody(req) {
 }
 async function handleJsonRpcRequest(request, page) {
     const { method, id } = request;
-    console.log("🎬 MCP Server: Received request", {
-        method,
-        id,
-        hasParams: !!request.params,
-    });
     try {
         if (method === "tools/list") {
-            console.log("🎬 MCP Server: Listing tools");
             return {
                 jsonrpc: "2.0",
                 id,
@@ -327,16 +503,102 @@ async function handleJsonRpcRequest(request, page) {
                     tools: [
                         {
                             name: "playwright_action",
-                            description: "Execute Playwright browser automation actions (navigate, click, fill, screenshot, etc.)",
+                            description: `Execute Playwright browser automation actions. The browser is already navigated to the app.
+
+ACTIONS:
+- screenshot: Take a screenshot. Params: { fullPage?: boolean }
+- click: Click an element. Params: { selector: string }
+- fill: Type into an input. Params: { selector: string, value: string }
+- getText: Get text content. Params: { selector: string }
+- waitForSelector: Wait for element. Params: { selector: string }
+- evaluate: Run JavaScript. Params: { script: string }
+- getUrl: Get current URL. No params.
+- reload: Reload the page. No params.
+- navigate: Go to URL. Params: { url: string }
+- getConsoleLogs: Get browser console logs. Params: { clear?: boolean }
+- scroll: Scroll the page. Params: { x?: number, y?: number, deltaX?: number, deltaY?: number }
+- scrollIntoView: Scroll element into view. Params: { selector: string }
+
+SELECTOR EXAMPLES:
+- By testid: [data-testid="login-form"]
+- By name: input[name="username"], textarea[name="bio"]
+- By placeholder: input[placeholder="Enter name"]
+- By type: input[type="email"], button[type="submit"]  
+- By text content: button:has-text("Submit"), a:has-text("Click here")
+- By ID: #submitBtn, #loginForm
+- By class: .btn-primary, .form-input
+- Combining: form#login input[name="password"]
+
+Any selector that playwright supports can be used.
+
+CSS SELECTOR SYNTAX (IMPORTANT):
+✓ CORRECT: input[name="email"], button[type="submit"], #myId, .myClass
+✗ WRONG: input [name="email"] (no space before bracket!)
+✗ WRONG: input[name=email] (quotes required around value)
+
+TIPS:
+1. Use specific selectors: prefer [name="x"] or [placeholder="x"] over generic .class
+2. If click/fill fails, the element may not be visible - try waitForSelector first
+3. For dynamic content, use waitForSelector before interacting
+4. Navigate, click, and fill will automatically take a screenshot of the page after the action is performed`,
                             inputSchema: {
                                 type: "object",
                                 properties: {
                                     action: {
                                         type: "string",
                                         enum: PLAYWRIGHT_ACTIONS,
+                                        description: "The action to perform. Most actions require a 'selector' parameter.",
+                                    },
+                                    description: {
+                                        type: "string",
+                                        description: "Brief description of what this test step is verifying (e.g., 'Verify login form appears', 'Test submit button functionality'). This will be displayed in the test report.",
+                                    },
+                                    selector: {
+                                        type: "string",
+                                        description: 'CSS selector for the target element. NO SPACE before brackets! Example: input[name="email"] NOT input [name="email"]',
+                                    },
+                                    value: {
+                                        type: "string",
+                                        description: "Value to fill (for 'fill' action)",
+                                    },
+                                    url: {
+                                        type: "string",
+                                        description: "URL to navigate to (for 'navigate' action)",
+                                    },
+                                    script: {
+                                        type: "string",
+                                        description: "JavaScript to execute in browser (for 'evaluate' action). No imports allowed.",
+                                    },
+                                    fullPage: {
+                                        type: "boolean",
+                                        description: "Capture full scrollable page (for 'screenshot' action)",
+                                    },
+                                    clear: {
+                                        type: "boolean",
+                                        description: "Clear logs after retrieving (for 'getConsoleLogs' action)",
+                                    },
+                                    x: {
+                                        type: "number",
+                                        description: "Absolute horizontal scroll position in pixels (for 'scroll' action)",
+                                    },
+                                    y: {
+                                        type: "number",
+                                        description: "Absolute vertical scroll position in pixels (for 'scroll' action)",
+                                    },
+                                    deltaX: {
+                                        type: "number",
+                                        description: "Relative horizontal scroll amount in pixels (for 'scroll' action)",
+                                    },
+                                    deltaY: {
+                                        type: "number",
+                                        description: "Relative vertical scroll amount in pixels (for 'scroll' action)",
+                                    },
+                                    testCaseId: {
+                                        type: "string",
+                                        description: "ID of the test case this action belongs to. Required when test cases are predefined. Links this action to a specific test case for status tracking.",
                                     },
                                 },
-                                required: ["action"],
+                                required: ["action", "description"],
                             },
                         },
                     ],
@@ -344,13 +606,7 @@ async function handleJsonRpcRequest(request, page) {
             };
         }
         if (method === "tools/call") {
-            console.log("🎬 MCP Server: tools/call method");
             const params = request.params;
-            console.log("🎬 MCP Server: Tool call params", {
-                toolName: params?.name,
-                hasArguments: !!params?.arguments,
-                action: params?.arguments?.action,
-            });
             if (!params || params.name !== "playwright_action") {
                 throw new Error(`Unknown tool: ${params?.name ?? "undefined"}`);
             }
@@ -358,12 +614,12 @@ async function handleJsonRpcRequest(request, page) {
             if (!action || !PLAYWRIGHT_ACTIONS.includes(action)) {
                 throw new Error(`Unsupported Playwright action: ${String(action)}`);
             }
-            console.log(`🎬 MCP Server: Executing action: ${action}`);
             const result = await executePlaywrightAction(action, page, params.arguments ?? {});
-            console.log(`🎬 MCP Server: Action ${action} completed`, {
-                success: result?.success,
-                hasResult: !!result,
-            });
+            // Include testCaseId in the result if provided
+            const testCaseId = params.arguments?.testCaseId;
+            if (testCaseId) {
+                result.testCaseId = testCaseId;
+            }
             return {
                 jsonrpc: "2.0",
                 id,
@@ -392,96 +648,238 @@ async function handleJsonRpcRequest(request, page) {
         };
     }
 }
-async function executePlaywrightAction(action, page, params) {
-    console.log("🎬 MCP Server: executePlaywrightAction called", {
-        action,
-        paramKeys: Object.keys(params),
-        url: page.url(),
+/**
+ * Captures a screenshot in PNG format.
+ *
+ * TODO: Re-enable WebP conversion using sharp once the build issue is resolved.
+ * WebP provides ~25-34% smaller file sizes compared to JPEG at equivalent
+ * visual quality, with better compression than PNG.
+ *
+ * @param page - The Playwright page to capture
+ * @returns Screenshot data as base64 string with format identifier
+ */
+async function captureScreenshot(page) {
+    try {
+        await page.evaluate(() => document.fonts.ready);
+        await page.waitForTimeout(100);
+    }
+    catch {
+        // Continue anyway if fonts.ready fails
+    }
+    const pngBuffer = await page.screenshot({
+        fullPage: false,
+        scale: "css",
+        type: "png",
     });
+    // TODO: Re-enable WebP conversion once sharp build issue is resolved
+    // const webpBuffer = await sharp(pngBuffer).webp({ quality: 80 }).toBuffer();
+    // return { data: webpBuffer.toString("base64"), format: "webp" };
+    return {
+        data: pngBuffer.toString("base64"),
+        format: "png",
+    };
+}
+async function executePlaywrightAction(action, page, params) {
     switch (action) {
         case "navigate": {
             const url = params.url;
+            const description = params.description || "Navigate to page";
             if (!url)
                 throw new Error("Missing url parameter for navigate action");
-            console.log(`🎬 MCP Server: Navigating to ${url}`);
             try {
                 await page.goto(url, {
                     waitUntil: "load",
                     timeout: 60000, // 60 second timeout
                 });
-                console.log(`🎬 MCP Server: Navigation complete`);
-                return { success: true, url };
+                // Auto-capture screenshot after navigation
+                const screenshot = await captureScreenshot(page);
+                return {
+                    success: true,
+                    action: "navigate",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        url,
+                    },
+                };
             }
             catch (error) {
                 console.error(`🎬 MCP Server: Navigation failed: ${String(error)}`);
-                // Return error but don't throw - let the judge handle it
+                // Capture screenshot even on error
+                let errorScreenshot = null;
+                try {
+                    errorScreenshot = await captureScreenshot(page);
+                }
+                catch {
+                    // Ignore screenshot errors
+                }
                 return {
                     success: false,
+                    action: "navigate",
+                    description,
+                    screenshot: errorScreenshot?.data,
+                    format: errorScreenshot?.format ?? "png",
+                    context: {
+                        url,
+                    },
                     error: `Navigation to ${url} failed: ${String(error)}`,
-                    url,
                 };
             }
         }
         case "click": {
             const selector = params.selector;
+            const description = params.description || "Click element";
             if (!selector)
                 throw new Error("Missing selector for click action");
-            // Always target elements inside the iframe
-            const frame = page.frameLocator('[data-test="sb-iframe"]');
-            await frame.locator(selector).click({ timeout: params.timeout });
-            return { success: true };
+            try {
+                await page
+                    .locator(selector)
+                    .click({ timeout: params.timeout ?? 10000 });
+                // Auto-capture screenshot after action
+                const screenshot = await captureScreenshot(page);
+                return {
+                    success: true,
+                    action: "click",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        selector,
+                    },
+                };
+            }
+            catch (error) {
+                // Capture screenshot even on error
+                let errorScreenshot = null;
+                try {
+                    errorScreenshot = await captureScreenshot(page);
+                }
+                catch {
+                    // Ignore screenshot errors
+                }
+                return {
+                    success: false,
+                    action: "click",
+                    description,
+                    screenshot: errorScreenshot?.data,
+                    format: errorScreenshot?.format ?? "png",
+                    context: {
+                        selector,
+                    },
+                    error: `Click failed on "${selector}": ${String(error)}`,
+                };
+            }
         }
         case "fill": {
             const selector = params.selector;
             const value = params.value ?? "";
+            const description = params.description || "Fill input";
             if (!selector)
                 throw new Error("Missing selector for fill action");
-            // Always target elements inside the iframe
-            const frame = page.frameLocator('[data-test="sb-iframe"]');
-            await frame.locator(selector).fill(value, { timeout: params.timeout });
-            return { success: true };
+            try {
+                await page
+                    .locator(selector)
+                    .fill(value, { timeout: params.timeout ?? 10000 });
+                // Auto-capture screenshot after fill
+                const screenshot = await captureScreenshot(page);
+                return {
+                    success: true,
+                    action: "fill",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        selector,
+                        value,
+                    },
+                };
+            }
+            catch (error) {
+                // Capture screenshot even on error
+                let errorScreenshot = null;
+                try {
+                    errorScreenshot = await captureScreenshot(page);
+                }
+                catch {
+                    // Ignore screenshot errors
+                }
+                return {
+                    success: false,
+                    action: "fill",
+                    description,
+                    screenshot: errorScreenshot?.data,
+                    format: errorScreenshot?.format ?? "png",
+                    context: {
+                        selector,
+                        value,
+                    },
+                    error: `Fill failed on "${selector}": ${String(error)}`,
+                };
+            }
         }
         case "screenshot": {
-            const buffer = await page.screenshot({
-                fullPage: Boolean(params.fullPage),
-            });
+            const description = params.description || "Capture current state";
+            // Capture screenshot in WebP format for optimal compression
+            const screenshot = await captureScreenshot(page);
             return {
                 success: true,
-                screenshot: buffer.toString("base64"),
+                action: "screenshot",
+                description,
+                screenshot: screenshot.data,
+                format: screenshot.format,
+                context: {
+                    fullPage: Boolean(params.fullPage),
+                },
             };
         }
         case "getText": {
             const selector = params.selector;
             if (!selector)
                 throw new Error("Missing selector for getText action");
-            // Always target elements inside the iframe
-            const frame = page.frameLocator('[data-test="sb-iframe"]');
-            const text = await frame.locator(selector).textContent({
-                timeout: params.timeout,
-            });
-            return { success: true, text };
+            try {
+                const text = await page.locator(selector).textContent({
+                    timeout: params.timeout ?? 10000,
+                });
+                return { success: true, text };
+            }
+            catch (error) {
+                return {
+                    success: false,
+                    error: `getText failed on "${selector}": ${String(error)}`,
+                };
+            }
         }
         case "waitForSelector": {
             const selector = params.selector;
             if (!selector) {
                 throw new Error("Missing selector for waitForSelector action");
             }
-            // Always target elements inside the iframe
-            const frame = page.frameLocator('[data-test="sb-iframe"]');
-            await frame.locator(selector).waitFor({
-                timeout: params.timeout ?? 30_000,
-            });
-            return { success: true };
+            try {
+                await page.locator(selector).waitFor({
+                    timeout: params.timeout ?? 15000,
+                });
+                return { success: true };
+            }
+            catch (error) {
+                return {
+                    success: false,
+                    error: `waitForSelector failed on "${selector}": ${String(error)}`,
+                };
+            }
         }
         case "evaluate": {
             const script = params.script;
+            const description = params.description || "Execute JavaScript";
             if (typeof script !== "string") {
                 throw new Error("Missing script for evaluate action");
             }
             // Check for import/export/require statements that can't be used in browser context
-            if (script.includes("import ") ||
-                script.includes("export ") ||
-                script.includes("require(")) {
+            // Use regex with word boundaries to avoid false positives on strings like "important"
+            const hasImport = /\bimport\s+/.test(script);
+            const hasExport = /\bexport\s+/.test(script);
+            const hasRequire = /\brequire\s*\(/.test(script);
+            if (hasImport || hasExport || hasRequire) {
                 throw new Error("Cannot use import/export/require statements in browser evaluate context. " +
                     "Please use plain JavaScript that can run in a browser console. " +
                     "For example, use 'document.querySelector' instead of importing libraries.");
@@ -496,32 +894,64 @@ async function executePlaywrightAction(action, page, params) {
             return { error: e.toString(), stack: e.stack };
           }
         })()`;
-                // Always execute JavaScript inside the iframe
-                const frameElement = await page
-                    .locator('[data-test="sb-iframe"]')
-                    .elementHandle();
-                const frame = await frameElement?.contentFrame();
-                if (!frame) {
-                    throw new Error("Could not find iframe [data-test='sb-iframe'] or iframe not loaded");
-                }
-                const result = await frame.evaluate(wrappedScript);
+                const result = await page.evaluate(wrappedScript);
                 // Check if the evaluation returned an error
                 if (result && typeof result === "object" && "error" in result) {
                     throw new Error(`Browser evaluation failed: ${result.error}`);
                 }
-                return { success: true, result };
+                // Auto-capture screenshot after evaluation
+                const screenshot = await captureScreenshot(page);
+                return {
+                    success: true,
+                    action: "evaluate",
+                    description,
+                    result,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        script: script.substring(0, 100) + (script.length > 100 ? "..." : ""),
+                    },
+                };
             }
             catch (error) {
+                // Capture screenshot even on error
+                let errorScreenshot = null;
+                try {
+                    errorScreenshot = await captureScreenshot(page);
+                }
+                catch {
+                    // Ignore screenshot errors
+                }
                 // If the error looks like a syntax error, provide helpful guidance
                 const errorMsg = String(error);
                 if (errorMsg.includes("SyntaxError") ||
                     errorMsg.includes("import") ||
                     errorMsg.includes("module")) {
-                    throw new Error("JavaScript evaluation failed. Make sure your code is browser-compatible " +
-                        "(no import/export statements). Error: " +
-                        errorMsg);
+                    return {
+                        success: false,
+                        action: "evaluate",
+                        description,
+                        screenshot: errorScreenshot?.data,
+                        format: errorScreenshot?.format ?? "png",
+                        context: {
+                            script: script.substring(0, 100) + (script.length > 100 ? "..." : ""),
+                        },
+                        error: "JavaScript evaluation failed. Make sure your code is browser-compatible " +
+                            "(no import/export statements). Error: " +
+                            errorMsg,
+                    };
                 }
-                throw error;
+                return {
+                    success: false,
+                    action: "evaluate",
+                    description,
+                    screenshot: errorScreenshot?.data,
+                    format: errorScreenshot?.format ?? "png",
+                    context: {
+                        script: script.substring(0, 100) + (script.length > 100 ? "..." : ""),
+                    },
+                    error: String(error),
+                };
             }
         }
         case "getUrl": {
@@ -534,6 +964,112 @@ async function executePlaywrightAction(action, page, params) {
             });
             return { success: true };
         }
+        case "getConsoleLogs": {
+            // Return captured console logs and optionally clear them
+            const logs = [...capturedConsoleLogs];
+            if (params.clear) {
+                capturedConsoleLogs = [];
+            }
+            return {
+                success: true,
+                logs,
+                count: logs.length,
+            };
+        }
+        case "scroll": {
+            const { x, y, deltaX, deltaY } = params;
+            const description = params.description || "Scroll page";
+            try {
+                await page.evaluate(({ x, y, deltaX, deltaY }) => {
+                    if (deltaX !== undefined || deltaY !== undefined) {
+                        window.scrollBy(deltaX ?? 0, deltaY ?? 0);
+                    }
+                    else if (x !== undefined || y !== undefined) {
+                        window.scrollTo(x ?? window.scrollX, y ?? window.scrollY);
+                    }
+                }, { x, y, deltaX, deltaY });
+                const screenshot = await captureScreenshot(page);
+                return {
+                    success: true,
+                    action: "scroll",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        x,
+                        y,
+                        deltaX,
+                        deltaY,
+                    },
+                };
+            }
+            catch (error) {
+                let errorScreenshot = null;
+                try {
+                    errorScreenshot = await captureScreenshot(page);
+                }
+                catch {
+                    // Ignore screenshot errors
+                }
+                return {
+                    success: false,
+                    action: "scroll",
+                    description,
+                    screenshot: errorScreenshot?.data,
+                    format: errorScreenshot?.format ?? "png",
+                    context: {
+                        x,
+                        y,
+                        deltaX,
+                        deltaY,
+                    },
+                    error: `Scroll failed: ${String(error)}`,
+                };
+            }
+        }
+        case "scrollIntoView": {
+            const selector = params.selector;
+            const description = params.description || "Scroll element into view";
+            if (!selector) {
+                throw new Error("Missing selector for scrollIntoView action");
+            }
+            try {
+                await page.locator(selector).scrollIntoViewIfNeeded({
+                    timeout: params.timeout ?? 10000,
+                });
+                const screenshot = await captureScreenshot(page);
+                return {
+                    success: true,
+                    action: "scrollIntoView",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        selector,
+                    },
+                };
+            }
+            catch (error) {
+                let errorScreenshot = null;
+                try {
+                    errorScreenshot = await captureScreenshot(page);
+                }
+                catch {
+                    // Ignore screenshot errors
+                }
+                return {
+                    success: false,
+                    action: "scrollIntoView",
+                    description,
+                    screenshot: errorScreenshot?.data,
+                    format: errorScreenshot?.format ?? "png",
+                    context: {
+                        selector,
+                    },
+                    error: `scrollIntoView failed on "${selector}": ${String(error)}`,
+                };
+            }
+        }
         default:
             throw new Error(`Unhandled Playwright action: ${action}`);
     }