@superblocksteam/vite-plugin-file-sync 2.0.72-next.12 → 2.0.72-next.14

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

@@ -2,6 +2,164 @@ import { once } from "node:events";
 import fs from "node:fs";
 import http from "node:http";
 import { chromium, firefox, webkit, } from "playwright";
+/**
+ * Playwright action logger that captures browser actions and saves them as log artifacts.
+ */
+class PlaywrightActionLogger {
+    logContent = "";
+    sessionId;
+    startTime;
+    actionCount = 0;
+    saveArtifact;
+    runTimestamp;
+    logger;
+    constructor(options) {
+        this.sessionId = options.sessionId;
+        this.startTime = Date.now();
+        this.saveArtifact = options.saveArtifact;
+        this.runTimestamp = options.runTimestamp || new Date().toISOString();
+        this.logger = options.logger;
+        this.logContent += this.formatSection("PLAYWRIGHT SESSION START") + "\n";
+        this.logContent += `Session ID: ${this.sessionId}\n`;
+        this.logContent += `Timestamp: ${new Date().toISOString()}\n\n`;
+    }
+    formatSection(title) {
+        const prefix = `------ ${title} `;
+        const remaining = Math.max(0, 72 - prefix.length);
+        return prefix + "-".repeat(remaining);
+    }
+    truncateString(s, maxBytes) {
+        if (s.length <= maxBytes)
+            return s;
+        return (s.slice(0, maxBytes) + `\n... [truncated ${s.length - maxBytes} bytes]`);
+    }
+    /**
+     * Log the start of a Playwright action.
+     */
+    logActionStart(action, params) {
+        this.actionCount++;
+        const timestamp = new Date().toISOString();
+        this.logContent += `ACTION #${this.actionCount}: ${action}\n`;
+        this.logContent += `  Timestamp: ${timestamp}\n`;
+        // Log relevant parameters (exclude screenshot data)
+        const logParams = {};
+        for (const [key, value] of Object.entries(params)) {
+            if (key === "screenshot" || key === "data")
+                continue;
+            logParams[key] = value;
+        }
+        if (Object.keys(logParams).length > 0) {
+            this.logContent += `  Params:\n`;
+            for (const [key, value] of Object.entries(logParams)) {
+                const valueStr = typeof value === "string"
+                    ? this.truncateString(value, 200)
+                    : JSON.stringify(value);
+                this.logContent += `    ${key}: ${valueStr}\n`;
+            }
+        }
+    }
+    /**
+     * Log the result of a Playwright action.
+     */
+    logActionResult(result) {
+        const success = result.success !== false;
+        this.logContent += `  Result: ${success ? "SUCCESS" : "FAILED"}\n`;
+        // Log error if present
+        if (result.error) {
+            this.logContent += `  Error: ${result.error}\n`;
+        }
+        // Log runtime errors if present
+        if (result.runtimeErrors?.length > 0) {
+            this.logContent += `  Runtime Errors:\n`;
+            for (const err of result.runtimeErrors) {
+                this.logContent += `    - ${err.header}\n`;
+                if (err.stack) {
+                    const truncatedStack = this.truncateString(err.stack, 500);
+                    this.logContent += `      Stack: ${truncatedStack}\n`;
+                }
+            }
+        }
+        // Log specific result fields (excluding large data like screenshots)
+        const fieldsToLog = ["url", "text", "hasErrors", "errorCount", "count"];
+        for (const field of fieldsToLog) {
+            if (field in result && result[field] !== undefined) {
+                this.logContent += `  ${field}: ${JSON.stringify(result[field])}\n`;
+            }
+        }
+        this.logContent += "\n";
+    }
+    /**
+     * Log console messages from the page.
+     */
+    logConsoleLogs(logs) {
+        if (logs.length === 0)
+            return;
+        this.logContent += `  Console Logs (${logs.length}):\n`;
+        const maxLogs = 20;
+        const logsToShow = logs.slice(-maxLogs);
+        for (const log of logsToShow) {
+            const text = this.truncateString(log.text, 200);
+            this.logContent += `    [${log.type}] ${text}\n`;
+        }
+        if (logs.length > maxLogs) {
+            this.logContent += `    ... and ${logs.length - maxLogs} more logs\n`;
+        }
+    }
+    /**
+     * Save the log to an artifact file.
+     */
+    async save() {
+        if (!this.saveArtifact) {
+            this.logger.debug("[PlaywrightLogger] No saveArtifact function provided, skipping log save");
+            return;
+        }
+        const duration = Date.now() - this.startTime;
+        this.logContent += this.formatSection("PLAYWRIGHT SESSION END") + "\n";
+        this.logContent += `End Timestamp: ${new Date().toISOString()}\n`;
+        this.logContent += `Duration: ${duration}ms\n`;
+        this.logContent += `Total Actions: ${this.actionCount}\n`;
+        try {
+            const artifact = {
+                type: "file",
+                filePath: `playwright-session-${this.sessionId}.log`,
+                content: this.logContent,
+            };
+            const stepId = `playwright-session-${this.sessionId}`;
+            await this.saveArtifact(artifact, stepId, this.runTimestamp);
+            this.logger.debug(`[PlaywrightLogger] Saved log artifact: ${artifact.filePath}`);
+        }
+        catch (error) {
+            this.logger.error(`[PlaywrightLogger] Failed to save log: ${String(error)}`);
+        }
+    }
+    /**
+     * Save the current log and reset for a new session.
+     * Used to save logs after each test run without closing the server.
+     */
+    async saveAndReset() {
+        // Only save if there are actions logged
+        if (this.actionCount === 0) {
+            this.logger.debug("[PlaywrightLogger] No actions logged, skipping save and reset");
+            return;
+        }
+        await this.save();
+        // Reset for next session
+        const newSessionId = String(Date.now());
+        this.sessionId = newSessionId;
+        this.startTime = Date.now();
+        this.actionCount = 0;
+        this.logContent = "";
+        this.logContent += this.formatSection("PLAYWRIGHT SESSION START") + "\n";
+        this.logContent += `Session ID: ${this.sessionId}\n`;
+        this.logContent += `Timestamp: ${new Date().toISOString()}\n\n`;
+        this.logger.debug(`[PlaywrightLogger] Reset for new session: ${newSessionId}`);
+    }
+    getLogContent() {
+        return this.logContent;
+    }
+}
+/** Default viewport dimensions for consistent screenshots */
+const DEFAULT_VIEWPORT = { width: 1280, height: 800 };
 const PLAYWRIGHT_ACTIONS = [
     "navigate",
     "click",
@@ -12,36 +170,46 @@ const PLAYWRIGHT_ACTIONS = [
     "evaluate",
     "getUrl",
     "reload",
+    "getConsoleLogs",
+    "scroll",
+    "scrollIntoView",
+    "checkRuntimeErrors",
 ];
+let capturedConsoleLogs = [];
 export async function startEmbeddedPlaywrightMcpServer(options) {
+    const logger = options.logger;
+    // Create action logger for capturing Playwright actions
+    const sessionId = String(Date.now());
+    const actionLogger = new PlaywrightActionLogger({
+        sessionId,
+        saveArtifact: options.saveArtifact,
+        runTimestamp: options.runTimestamp,
+        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 +230,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 +239,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 +457,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 +483,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 +520,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 +530,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 {
@@ -244,7 +591,7 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
                     }));
                     return;
                 }
-                const response = await handleJsonRpcRequest(request, activePage);
+                const response = await handleJsonRpcRequest(request, activePage, actionLogger);
                 res.writeHead(200, { "Content-Type": "application/json" });
                 res.end(JSON.stringify(response));
             }
@@ -268,6 +615,8 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
     return {
         url,
         close: async () => {
+            // Save the action log before closing
+            await actionLogger.save();
             await Promise.allSettled([
                 new Promise((resolve, reject) => {
                     server.close((error) => {
@@ -286,6 +635,62 @@ export async function startEmbeddedPlaywrightMcpServer(options) {
                     : Promise.resolve(),
             ]);
         },
+        flushLog: async () => {
+            await actionLogger.saveAndReset();
+        },
+        captureInteractiveElements: async () => {
+            try {
+                // Wait for page to be ready
+                await page.waitForLoadState("domcontentloaded");
+                const elements = await page.evaluate(() => {
+                    const selector = 'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="tab"], [role="menuitem"], [onclick], [data-testid]';
+                    const nodeList = document.querySelectorAll(selector);
+                    return Array.from(nodeList)
+                        .map((el) => {
+                        const text = el.textContent?.trim().slice(0, 100);
+                        const id = el.id || undefined;
+                        const className = el.className || undefined;
+                        const testId = el.getAttribute("data-testid") || undefined;
+                        const placeholder = el.getAttribute("placeholder") || undefined;
+                        const href = el.getAttribute("href") || undefined;
+                        const type = el.getAttribute("type") || undefined;
+                        const role = el.getAttribute("role") || undefined;
+                        const ariaLabel = el.getAttribute("aria-label") || undefined;
+                        const name = el.getAttribute("name") || undefined;
+                        const disabled = el.hasAttribute("disabled") ||
+                            el.getAttribute("aria-disabled") === "true";
+                        return {
+                            tag: el.tagName.toLowerCase(),
+                            text: text || undefined,
+                            id,
+                            className: typeof className === "string" ? className : undefined,
+                            testId,
+                            placeholder,
+                            href,
+                            type,
+                            role,
+                            ariaLabel,
+                            name,
+                            disabled: disabled || undefined,
+                        };
+                    })
+                        .filter((el) => {
+                        // Filter out elements with no useful selector info
+                        return (el.text ||
+                            el.id ||
+                            el.testId ||
+                            el.placeholder ||
+                            el.ariaLabel ||
+                            el.name);
+                    });
+                });
+                return elements;
+            }
+            catch (error) {
+                logger.warn(`Failed to capture interactive elements: ${String(error)}`);
+                return [];
+            }
+        },
     };
 }
 async function launchBrowser() {
@@ -310,16 +715,10 @@ async function readRequestBody(req) {
     }
     return Buffer.concat(chunks).toString("utf-8");
 }
-async function handleJsonRpcRequest(request, page) {
+async function handleJsonRpcRequest(request, page, actionLogger) {
     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 +726,113 @@ 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 }
+- checkRuntimeErrors: Explicitly check for component crashes. No params.
+
+RUNTIME ERROR DETECTION:
+Actions (navigate, click, fill, evaluate) automatically detect component crashes.
+When a component crashes, the action returns:
+- success: false
+- runtimeErrors: Array of { header: string, stack?: string }
+- error: Summary message
+
+If you see runtimeErrors in a response, the test should FAIL. Include the error details in your summary.
+
+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
+5. If success is false due to runtimeErrors, FAIL the test and report the error details`,
                             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 +840,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 +848,16 @@ 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}`);
+            // Log the action start
+            actionLogger.logActionStart(action, params.arguments ?? {});
             const result = await executePlaywrightAction(action, page, params.arguments ?? {});
-            console.log(`🎬 MCP Server: Action ${action} completed`, {
-                success: result?.success,
-                hasResult: !!result,
-            });
+            // Log the action result
+            actionLogger.logActionResult(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 +886,298 @@ 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(),
+/**
+ * Checks for runtime errors displayed by ErrorBoundary components.
+ * These are detected by looking for elements with data-testid="runtime-error-details".
+ *
+ * @param page - The Playwright page to check
+ * @returns Object with hasErrors flag and array of error details
+ */
+async function checkForRuntimeErrors(page) {
+    try {
+        const errorElements = await page
+            .locator('[data-testid="runtime-error-details"]')
+            .all();
+        if (errorElements.length === 0) {
+            return { hasErrors: false, errors: [] };
+        }
+        const errors = [];
+        for (const element of errorElements) {
+            try {
+                // Get the error header (h3 contains "Something went wrong." or custom header)
+                const header = (await element.locator("h3").textContent()) || "Component error";
+                // Try to get the stack trace from the pre > code element inside details
+                let stack;
+                try {
+                    const codeElement = element.locator("pre code");
+                    const codeText = await codeElement.textContent({ timeout: 1000 });
+                    stack = codeText || undefined;
+                }
+                catch {
+                    // Stack not available or details not expanded
+                }
+                errors.push({ header, stack });
+            }
+            catch {
+                errors.push({ header: "Unknown component error" });
+            }
+        }
+        return { hasErrors: true, errors };
+    }
+    catch {
+        return { hasErrors: false, errors: [] };
+    }
+}
+/**
+ * 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);
+                // Check for runtime errors (component crashes)
+                const runtimeErrors = await checkForRuntimeErrors(page);
+                return {
+                    success: !runtimeErrors.hasErrors,
+                    action: "navigate",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        url,
+                    },
+                    ...(runtimeErrors.hasErrors && {
+                        runtimeErrors: runtimeErrors.errors,
+                        error: `Component crashed with ${runtimeErrors.errors.length} runtime error(s): ${runtimeErrors.errors.map((e) => e.header).join(", ")}`,
+                    }),
+                };
             }
             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);
+                // Check for runtime errors (component crashes)
+                const runtimeErrors = await checkForRuntimeErrors(page);
+                return {
+                    success: !runtimeErrors.hasErrors,
+                    action: "click",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        selector,
+                    },
+                    ...(runtimeErrors.hasErrors && {
+                        runtimeErrors: runtimeErrors.errors,
+                        error: `Component crashed with ${runtimeErrors.errors.length} runtime error(s): ${runtimeErrors.errors.map((e) => e.header).join(", ")}`,
+                    }),
+                };
+            }
+            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);
+                // Check for runtime errors (component crashes)
+                const runtimeErrors = await checkForRuntimeErrors(page);
+                return {
+                    success: !runtimeErrors.hasErrors,
+                    action: "fill",
+                    description,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        selector,
+                        value,
+                    },
+                    ...(runtimeErrors.hasErrors && {
+                        runtimeErrors: runtimeErrors.errors,
+                        error: `Component crashed with ${runtimeErrors.errors.length} runtime error(s): ${runtimeErrors.errors.map((e) => e.header).join(", ")}`,
+                    }),
+                };
+            }
+            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 +1192,70 @@ 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);
+                // Check for runtime errors (component crashes)
+                const runtimeErrors = await checkForRuntimeErrors(page);
+                return {
+                    success: !runtimeErrors.hasErrors,
+                    action: "evaluate",
+                    description,
+                    result,
+                    screenshot: screenshot.data,
+                    format: screenshot.format,
+                    context: {
+                        script: script.substring(0, 100) + (script.length > 100 ? "..." : ""),
+                    },
+                    ...(runtimeErrors.hasErrors && {
+                        runtimeErrors: runtimeErrors.errors,
+                        error: `Component crashed with ${runtimeErrors.errors.length} runtime error(s): ${runtimeErrors.errors.map((e) => e.header).join(", ")}`,
+                    }),
+                };
             }
             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 +1268,130 @@ 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)}`,
+                };
+            }
+        }
+        case "checkRuntimeErrors": {
+            const description = params.description || "Check for component runtime errors";
+            const screenshot = await captureScreenshot(page);
+            const runtimeErrors = await checkForRuntimeErrors(page);
+            return {
+                success: !runtimeErrors.hasErrors,
+                action: "checkRuntimeErrors",
+                description,
+                screenshot: screenshot.data,
+                format: screenshot.format,
+                hasErrors: runtimeErrors.hasErrors,
+                errorCount: runtimeErrors.errors.length,
+                ...(runtimeErrors.hasErrors && {
+                    runtimeErrors: runtimeErrors.errors,
+                    error: `Found ${runtimeErrors.errors.length} component crash(es): ${runtimeErrors.errors.map((e) => e.header).join(", ")}`,
+                }),
+            };
+        }
         default:
             throw new Error(`Unhandled Playwright action: ${action}`);
     }