stably 4.12.8 → 4.12.9

package/dist/node_modules/playwright/lib/cli/daemon/daemon.js

@@ -75,6 +75,117 @@ async function startMcpDaemonServer(config, contextFactory) {
     timestamp: Date.now()
   };
   const { browserContext, close } = await contextFactory.createContext(clientInfo, new AbortController().signal, {});
+  // For CDP connections: resize the browser window to match the user's configured viewport.
+  // We only use Browser.setWindowBounds (no setViewportSize) so the page viewport is
+  // determined naturally by the window's content area. Using setViewportSize would trigger
+  // Emulation.setDeviceMetricsOverride which creates a device emulation frame with white
+  // borders inside the window — the page renders at the viewport size but doesn't fill
+  // the window's content area.
+  if (config.browser.cdpEndpoint) {
+    try {
+      // Pages may not be immediately available after CDP connection — wait briefly for discovery.
+      let page = browserContext.pages()[0];
+      if (!page) {
+        daemonDebug("no pages found, waiting for page discovery...");
+        page = await Promise.race([
+          new Promise(resolve => browserContext.once("page", resolve)),
+          new Promise(resolve => setTimeout(() => resolve(null), 5000))
+        ]);
+      }
+      if (page) {
+        daemonDebug("found page for viewport resize:", page.url());
+        // Clear any stale device emulation from a prior session's setViewportSize() calls.
+        try {
+          const clearSession = await browserContext.newCDPSession(page);
+          await clearSession.send("Emulation.clearDeviceMetricsOverride").catch(() => {});
+          await clearSession.detach();
+          daemonDebug("cleared stale device emulation");
+        } catch (_) {}
+        // Try to load viewport from the user's playwright.config (most authoritative source),
+        // then fall back to config.browser.contextOptions.viewport (which may just be the 1280x720 default).
+        let viewport = null;
+        if (config.playwrightConfigPath) {
+          try {
+            const { requireOrImport } = require("../../transform/transform");
+            let userConfig = await requireOrImport(config.playwrightConfigPath);
+            if (userConfig && typeof userConfig === "object" && "default" in userConfig)
+              userConfig = userConfig.default;
+            viewport = userConfig?.use?.viewport || userConfig?.projects?.[0]?.use?.viewport;
+            daemonDebug("extracted viewport from playwright config:", viewport);
+          } catch (e) {
+            daemonDebug("failed to load playwright config for viewport", e);
+          }
+        }
+        // Fall back to config viewport if playwright.config didn't provide one
+        if (!viewport) {
+          viewport = config.browser.contextOptions?.viewport;
+        }
+        const cdpSession = await browserContext.newCDPSession(page);
+        const { windowId } = await cdpSession.send("Browser.getWindowForTarget");
+        const vp = viewport || { width: 1280, height: 720 };
+        // Get current window state and measure chrome decoration overhead.
+        const { bounds: currentBounds } = await cdpSession.send("Browser.getWindowBounds", { windowId });
+        daemonDebug("current window state:", currentBounds.windowState, "bounds:", currentBounds.width, "x", currentBounds.height);
+        // Get screen size to know if the desired viewport can fit.
+        const { result: screenSize } = await cdpSession.send("Runtime.evaluate", {
+          expression: "JSON.stringify({ width: screen.width, height: screen.height })",
+          returnByValue: true
+        });
+        const screen = JSON.parse(screenSize.value);
+        daemonDebug("screen size:", screen.width, "x", screen.height);
+        // Quick check: if viewport won't fit with decorations (~100px width, ~200px height),
+        // skip measurement and go straight to maximize + device emulation.
+        if (vp.width + 100 > screen.width || vp.height + 200 > screen.height) {
+          daemonDebug("viewport", vp.width, "x", vp.height, "exceeds screen, using maximize + device emulation");
+          // Chrome requires fullscreen → normal → maximized (can't go directly fullscreen → maximized).
+          if (currentBounds.windowState === "fullscreen") {
+            await cdpSession.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "normal" } });
+          }
+          await cdpSession.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "maximized" } });
+          // Use Emulation.setDeviceMetricsOverride directly instead of page.setViewportSize()
+          // because setViewportSize also resizes the window, pushing it off-screen and hiding
+          // the tab bar and address bar.
+          await cdpSession.send("Emulation.setDeviceMetricsOverride", {
+            width: vp.width, height: vp.height, deviceScaleFactor: 0, mobile: false
+          });
+          daemonDebug("device emulation applied:", vp.width, "x", vp.height);
+        } else {
+          // Viewport fits — un-maximize, measure decorations, resize window exactly.
+          if (currentBounds.windowState === "maximized" || currentBounds.windowState === "fullscreen") {
+            await cdpSession.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "normal" } });
+            daemonDebug("un-maximized window for measurement");
+          }
+          const { bounds: measuredBounds } = await cdpSession.send("Browser.getWindowBounds", { windowId });
+          const { result: innerSize } = await cdpSession.send("Runtime.evaluate", {
+            expression: "JSON.stringify({ width: window.innerWidth, height: window.innerHeight })",
+            returnByValue: true
+          });
+          const inner = JSON.parse(innerSize.value);
+          const decorationWidth = measuredBounds.width - inner.width;
+          const decorationHeight = measuredBounds.height - inner.height;
+          daemonDebug("measured chrome decorations:", decorationWidth, "x", decorationHeight, "(window:", measuredBounds.width, "x", measuredBounds.height, "inner:", inner.width, "x", inner.height, ")");
+          // Sanity check: if decorations are negative, measurement is corrupted — skip resize.
+          if (decorationWidth < 0 || decorationHeight < 0) {
+            daemonDebug("negative decorations detected, skipping resize to avoid progressive shrink");
+          } else {
+            const targetWidth = vp.width + decorationWidth;
+            const targetHeight = vp.height + decorationHeight;
+            daemonDebug("resizing window to:", targetWidth, "x", targetHeight, "for viewport:", vp.width, "x", vp.height);
+            await cdpSession.send("Browser.setWindowBounds", {
+              windowId,
+              bounds: { width: targetWidth, height: targetHeight }
+            });
+            daemonDebug("window resize succeeded");
+          }
+        }
+        await cdpSession.detach();
+      } else {
+        daemonDebug("no page available for viewport resize after waiting");
+      }
+    } catch (e) {
+      daemonDebug("failed to resize window for CDP connection (best-effort)", e);
+    }
+  }
   browserContext.on("close", () => {
     daemonDebug("browser closed, shutting down daemon");
     shutdown(0);

package/dist/node_modules/playwright/lib/index.js

@@ -92,6 +92,21 @@ const playwrightFixtures = {
   browser: [async ({ playwright, browserName, _browserOptions, connectOptions }, use) => {
     if (!["chromium", "firefox", "webkit"].includes(browserName))
       throw new Error(`Unexpected browserName "${browserName}", must be one of "chromium", "firefox" or "webkit"`);
+    // CDP endpoint support via environment variable or connectOptions with /browser-cdp/ path
+    const cdpEndpoint = process.env.PLAYWRIGHT_CDP_ENDPOINT;
+    const connectWsEndpoint = connectOptions == null ? void 0 : connectOptions.wsEndpoint;
+    const isCdpWsEndpoint = typeof connectWsEndpoint === "string" && (connectWsEndpoint.includes("/browser-cdp/") || connectWsEndpoint.includes("/browser/cdp"));
+    if (cdpEndpoint || isCdpWsEndpoint) {
+      if (browserName !== "chromium")
+        throw new Error("CDP endpoint is only supported for Chromium browsers");
+      const endpoint = cdpEndpoint || connectWsEndpoint;
+      const cdpHeadersFromEnv = process.env.PLAYWRIGHT_CDP_HEADERS ? JSON.parse(process.env.PLAYWRIGHT_CDP_HEADERS) : void 0;
+      const browser2 = await playwright.chromium.connectOverCDP(endpoint, {
+        headers: cdpHeadersFromEnv || (connectOptions == null ? void 0 : connectOptions.headers)
+      });
+      await use(browser2);
+      return;
+    }
     if (connectOptions) {
       const browser2 = await playwright[browserName].connect({
         ...connectOptions,
@@ -335,7 +350,13 @@ const playwrightFixtures = {
           size: typeof video === "string" ? void 0 : video.size
         }
       } : {};
-      const context = await browser.newContext({ ...videoOptions, ...options });
+      // When connected via CDP (run-test), reuse the default context instead of
+      // creating a new one. This preserves browser state (pages, cookies, etc.)
+      // after the test completes, allowing the daemon to interact with the result.
+      const isCdpSession = !!process.env.PLAYWRIGHT_CDP_ENDPOINT;
+      const context = isCdpSession && browser.contexts().length > 0
+        ? browser.contexts()[0]
+        : await browser.newContext({ ...videoOptions, ...options });
       if (process.env.PW_CLOCK === "frozen") {
         await context._wrapApiCall(async () => {
           await context.clock.install({ time: 0 });
@@ -351,6 +372,10 @@ const playwrightFixtures = {
         if (closed)
           return;
         closed = true;
+        // Skip context.close() when connected via CDP — preserve browser state
+        // so the daemon can continue interacting with the test's pages.
+        if (isCdpSession)
+          return;
         const closeReason = testInfo.status === "timedOut" ? "Test timeout of " + testInfo.timeout + "ms exceeded." : "Test ended.";
         await context.close({ reason: closeReason });
         const testFailed = testInfo.status !== testInfo.expectedStatus;
@@ -403,6 +428,12 @@ const playwrightFixtures = {
     await browserImpl._wrapApiCall(() => browserImpl._disconnectFromReusedContext(closeReason), { internal: true });
   },
   page: async ({ context, _reuseContext }, use) => {
+    // When connected via CDP, reuse the existing page (the daemon's page)
+    // instead of creating a new one, so the daemon sees the test's navigation.
+    if (process.env.PLAYWRIGHT_CDP_ENDPOINT && context.pages().length > 0) {
+      await use(context.pages()[0]);
+      return;
+    }
     if (!_reuseContext) {
       await use(await context.newPage());
       return;

package/dist/node_modules/playwright/lib/mcp/browser/browserServerBackend.js

@@ -27,6 +27,22 @@ var import_response = require("./response");
 var import_sessionLog = require("./sessionLog");
 var import_tools = require("./tools");
 var import_tool = require("../sdk/tool");
+var import_net = require("net");
+function sendRecorderEvent(event) {
+  const port = process.env.CLAUDE_RECORDER_PORT;
+  if (!port)
+    return;
+  try {
+    const socket = import_net.createConnection({
+      port: Number(port),
+      host: process.env.CLAUDE_RECORDER_HOST || "127.0.0.1"
+    });
+    const payload = JSON.stringify(event) + "\n";
+    socket.on("error", () => socket.destroy());
+    socket.write(payload, () => socket.end());
+  } catch (error) {
+  }
+}
 class BrowserServerBackend {
   constructor(config, factory, options = {}) {
     this._config = config;
@@ -64,6 +80,17 @@ Tool "${name}" not found` }],
       await tool.handle(context, parsedArguments, response);
       responseObject = await response.serialize();
       this._sessionLog?.logResponse(name, parsedArguments, responseObject);
+      // Send recorder event for user action tracking
+      const parsed = (0, import_response.parseResponse)(responseObject);
+      if (parsed && parsed.code) {
+        sendRecorderEvent({
+          type: "user-action",
+          action: { name: name, args: parsedArguments },
+          code: parsed.code,
+          url: this._context?.currentTab()?.page?.url() || "",
+          timestamp: Date.now()
+        });
+      }
     } catch (error) {
       return {
         content: [{ type: "text", text: `### Error

package/dist/node_modules/playwright/lib/mcp/browser/config.js.rej

@@ -0,0 +1,11 @@
+--- lib/mcp/browser/config.js
++++ lib/mcp/browser/config.js
+@@ -305,7 +305,7 @@
+ function outputDir(config, clientInfo) {
+   if (config.outputDir)
+     return import_path.default.resolve(config.outputDir);
+   const rootPath = (0, import_server2.firstRootPath)(clientInfo);
+   if (rootPath)
+-    return import_path.default.resolve(rootPath, config.skillMode ? ".playwright-cli" : ".playwright-mcp");
++    return import_path.default.resolve(rootPath, config.skillMode ? ".stably-browser" : ".playwright-mcp");
+   const tmpDir = process.env.PW_TMPDIR_FOR_TEST ?? import_os.default.tmpdir();

package/dist/node_modules/playwright/lib/mcp/browser/context.js

@@ -40,6 +40,55 @@ var import_log = require("../log");
 var import_tab = require("./tab");
 var import_config = require("./config");
 const testDebug = (0, import_utilsBundle.debug)("pw:mcp:test");
+class InputRecorder {
+  constructor(context, browserContext) {
+    this._context = context;
+    this._browserContext = browserContext;
+  }
+  static async create(context, browserContext) {
+    const recorder = new InputRecorder(context, browserContext);
+    await recorder._initialize();
+    return recorder;
+  }
+  async _initialize() {
+    const sessionLog = this._context.sessionLog;
+    if (!sessionLog) return;
+    await this._browserContext._enableRecorder({
+      mode: "recording",
+      recorderMode: "api"
+    }, {
+      actionAdded: (page, data, code) => {
+        if (this._context.isRunningTool())
+          return;
+        const tab = import_tab.Tab.forPage(page);
+        if (tab)
+          sessionLog.logUserAction(data.action, tab, code, false);
+      },
+      actionUpdated: (page, data, code) => {
+        if (this._context.isRunningTool())
+          return;
+        const tab = import_tab.Tab.forPage(page);
+        if (tab)
+          sessionLog.logUserAction(data.action, tab, code, true);
+      },
+      signalAdded: (page, data) => {
+        if (this._context.isRunningTool())
+          return;
+        if (data.signal.name !== "navigation")
+          return;
+        const tab = import_tab.Tab.forPage(page);
+        const navigateAction = {
+          name: "navigate",
+          url: data.signal.url,
+          signals: []
+        };
+        if (tab)
+          sessionLog.logUserAction(navigateAction, tab, `await page.goto('${data.signal.url}');`, false);
+      }
+    });
+  }
+}
+
 class Context {
   constructor(options) {
     this._tabs = [];
@@ -251,6 +300,9 @@ class Context {
         _live: true
       });
     }
+    // Initialize InputRecorder for user action capture
+    if (this.sessionLog)
+      await InputRecorder.create(this, browserContext);
     return result;
   }
   lookupSecret(secretName) {

package/dist/node_modules/playwright/lib/mcp/browser/sessionLog.js

@@ -33,8 +33,24 @@ __export(sessionLog_exports, {
 module.exports = __toCommonJS(sessionLog_exports);
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
+var import_net = require("net");
 var import_config = require("./config");
 var import_response = require("./response");
+function sendRecorderEvent(event) {
+  const port = process.env.CLAUDE_RECORDER_PORT;
+  if (!port)
+    return;
+  try {
+    const socket = import_net.createConnection({
+      port: Number(port),
+      host: process.env.CLAUDE_RECORDER_HOST || "127.0.0.1"
+    });
+    const payload = JSON.stringify(event) + "\n";
+    socket.on("error", () => socket.destroy());
+    socket.write(payload, () => socket.end());
+  } catch (error) {
+  }
+}
 class SessionLog {
   constructor(sessionFolder) {
     this._sessionFileQueue = Promise.resolve();
@@ -68,6 +84,40 @@ class SessionLog {
     lines.push("");
     this._sessionFileQueue = this._sessionFileQueue.then(() => import_fs.default.promises.appendFile(this._file, lines.join("\n")));
   }
+  logUserAction(action, tab, code, isUpdate) {
+    code = code.trim();
+    // Send recorder event for user action tracking
+    const actionForLog = { ...action };
+    delete actionForLog.ariaSnapshot;
+    delete actionForLog.selector;
+    actionForLog.isUpdate = !!isUpdate;
+    sendRecorderEvent({
+      type: "user-action",
+      action: actionForLog,
+      code,
+      url: tab.page.url(),
+      timestamp: Date.now()
+    });
+    // Also log to session file
+    const lines = [""];
+    lines.push(
+      `### User action: ${action.name}`,
+      "- Args",
+      "```json",
+      JSON.stringify(actionForLog, null, 2),
+      "```"
+    );
+    if (code) {
+      lines.push(
+        "- Code",
+        "```js",
+        code,
+        "```"
+      );
+    }
+    lines.push("");
+    this._sessionFileQueue = this._sessionFileQueue.then(() => import_fs.default.promises.appendFile(this._file, lines.join("\n")));
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/node_modules/playwright/lib/mcp/test/browserBackend.js

@@ -32,9 +32,14 @@ function createCustomMessageHandler(testInfo, context) {
     if (data.initialize) {
       if (backend)
         throw new Error("MCP backend is already initialized");
-      backend = new import_browserServerBackend.BrowserServerBackend({ ...import_config.defaultConfig, capabilities: ["testing"] }, (0, import_browserContextFactory.identityBrowserContextFactory)(context));
+      backend = new import_browserServerBackend.BrowserServerBackend({ ...import_config.defaultConfig, capabilities: ["testing"], saveSession: true }, (0, import_browserContextFactory.identityBrowserContextFactory)(context));
       await backend.initialize(data.initialize.clientInfo);
       const pausedMessage = await generatePausedMessage(testInfo, context);
+      // Ensure recorder UI appears immediately by triggering a benign action that doesn't change page state.
+      try {
+        await backend.callTool("browser_tabs", { action: "list" });
+      } catch (e) {
+      }
       return { initialize: { pausedMessage } };
     }
     if (data.listTools) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stably",
-  "version": "4.12.8",
+  "version": "4.12.9",
   "packageManager": "pnpm@10.24.0",
   "description": "AI-powered E2E Playwright testing CLI. Stably can understand your codebase, edit/run tests, and handle complex test scenarios for you.",
   "main": "dist/index.mjs",