stably 4.12.4 → 4.12.6

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

@@ -75,13 +75,25 @@ 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 show chrome (tabs, URL bar).
-  // Without this, the remote browser's viewport fills the entire window, hiding chrome.
+  // 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 {
-      const pages = browserContext.pages();
-      const page = pages[0];
+      // 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());
         // 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;
@@ -101,18 +113,62 @@ async function startMcpDaemonServer(config, contextFactory) {
         if (!viewport) {
           viewport = config.browser.contextOptions?.viewport;
         }
-        if (viewport && viewport.width && viewport.height) {
-          await page.setViewportSize(viewport);
-        }
         const cdpSession = await browserContext.newCDPSession(page);
         const { windowId } = await cdpSession.send("Browser.getWindowForTarget");
         const vp = viewport || { width: 1280, height: 720 };
-        const CHROME_HEADER_HEIGHT = 85;
-        await cdpSession.send("Browser.setWindowBounds", {
-          windowId,
-          bounds: { width: vp.width, height: vp.height + CHROME_HEADER_HEIGHT }
+        // 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, ")");
+          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);

package/dist/stably-browser.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-// ../../app/node_modules/.pnpm/@stablyai-internal+playwright-cli@0.4.6/node_modules/@stablyai-internal/playwright-cli/playwright-cli.js
+// ../../app/node_modules/.pnpm/@stablyai-internal+playwright-cli@0.4.16/node_modules/@stablyai-internal/playwright-cli/playwright-cli.js
 var fs = require("fs");
 var path = require("path");
 var argv = process.argv.slice(2);
@@ -193,24 +193,51 @@ const test = realPw.test.extend({
 
   page: async ({ context }, use) => {
     const page = context.pages()[0] || await context.newPage();
-    // Apply viewport from user's playwright.config.ts if specified.
-    // The daemon's context was created with viewport: null (browser window size),
-    // so we need to explicitly set it to match the user's config.
+    // Resize the browser window to match the user's configured viewport.
+    // Strategy: resize the OS window via Browser.setWindowBounds when the viewport fits
+    // on screen (no device emulation needed). When it doesn't fit, maximize the window
+    // and use setViewportSize (device emulation) to force the exact dimensions \u2014 this is
+    // safe because the emulated viewport is larger than the window, so no white borders.
     const vp = process.env.PLAYWRIGHT_CLI_VIEWPORT;
     if (vp) {
       const [w, h] = vp.split(',').map(Number);
       if (w && h) {
-        await page.setViewportSize({ width: w, height: h });
-        // Also resize the actual browser window to match.
-        // setViewportSize only changes the CSS layout viewport via DeviceMetricsOverride,
-        // leaving the OS window at its original size (visible as dark gray dead space).
         try {
           const cdpSession = await context.newCDPSession(page);
           const { windowId } = await cdpSession.send('Browser.getWindowForTarget');
-          // Add offset for browser chrome (tab bar + address bar, ~85px on macOS)
-          await cdpSession.send('Browser.setWindowBounds', {
-            windowId, bounds: { width: w, height: h + 85 }
-          });
+          const { bounds: currentBounds } = await cdpSession.send('Browser.getWindowBounds', { windowId });
+          const screenSize = await page.evaluate(() => ({ width: screen.width, height: screen.height }));
+          // Quick check: if viewport won't fit with decorations (~100px width, ~200px height),
+          // skip measurement and go straight to maximize + device emulation.
+          // We can't reliably measure decorations when device emulation is active (from open)
+          // because window.innerWidth/Height returns the emulated dimensions, not real ones.
+          if (w + 100 > screenSize.width || h + 200 > screenSize.height) {
+            // Chrome requires fullscreen \u2192 normal \u2192 maximized (can't go directly).
+            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: w, height: h, deviceScaleFactor: 0, mobile: false
+            });
+          } else {
+            // Viewport fits \u2014 un-maximize, measure decorations, resize window exactly.
+            if (currentBounds.windowState === 'maximized' || currentBounds.windowState === 'fullscreen') {
+              await cdpSession.send('Browser.setWindowBounds', { windowId, bounds: { windowState: 'normal' } });
+            }
+            // Clear any prior device emulation so innerWidth/Height reflect actual window size.
+            await cdpSession.send('Emulation.clearDeviceMetricsOverride').catch(() => {});
+            const { bounds: measuredBounds } = await cdpSession.send('Browser.getWindowBounds', { windowId });
+            const inner = await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight }));
+            const decoW = measuredBounds.width - inner.width;
+            const decoH = measuredBounds.height - inner.height;
+            const targetW = w + decoW;
+            const targetH = h + decoH;
+            await cdpSession.send('Browser.setWindowBounds', { windowId, bounds: { width: targetW, height: targetH } });
+          }
           await cdpSession.detach();
         } catch (_) { /* best-effort \u2014 headed only, fails silently in headless */ }
       }
@@ -322,30 +349,28 @@ var _runArgs;
 var _ptPkg;
 var _ptCli;
 if (cmdIndex !== -1 && argv[cmdIndex] === "open") {
+  process.env.DEBUG = (process.env.DEBUG || "") + (process.env.DEBUG ? ",pw:daemon" : "pw:daemon");
   const cwd = process.cwd();
   for (const name of ["playwright.config.ts", "playwright.config.js", "playwright.config.mjs"]) {
     const configPath = path.join(cwd, name);
     if (fs.existsSync(configPath)) {
       try {
-        const { execSync } = require("child_process");
-        const isTS = name.endsWith(".ts");
-        const extractCode = [
-          `const m = require('${configPath.replace(/\\/g, "/").replace(/'/g, "\\'")}');`,
-          `const c = m.default || m;`,
-          `const vp = c.use?.viewport || (c.projects || [])[0]?.use?.viewport;`,
-          `if (vp && vp.width && vp.height) process.stdout.write(vp.width + 'x' + vp.height);`
-        ].join(" ");
-        const nodeArgs = isTS ? ["--require", "tsx/cjs"] : [];
-        const result = execSync(
-          [process.execPath, ...nodeArgs, "-e", extractCode].map((a) => `"${a}"`).join(" "),
-          {
-            cwd,
-            encoding: "utf-8",
-            timeout: 1e4,
-            stdio: ["pipe", "pipe", "pipe"],
-            env: { ...process.env, NODE_OPTIONS: "" }
-          }
-        ).trim();
+        const { execFileSync } = require("child_process");
+        const extractCode = `
+          const { requireOrImport } = require('playwright/lib/transform/transform');
+          requireOrImport('${configPath.replace(/\\/g, "/").replace(/'/g, "\\'")}').then(m => {
+            const c = m.default || m;
+            const vp = c.use?.viewport || (c.projects || [])[0]?.use?.viewport;
+            if (vp && vp.width && vp.height) process.stdout.write(vp.width + 'x' + vp.height);
+          }).catch(() => {});
+        `;
+        const result = execFileSync(process.execPath, ["-e", extractCode], {
+          cwd,
+          encoding: "utf-8",
+          timeout: 1e4,
+          stdio: ["pipe", "pipe", "pipe"],
+          env: { ...process.env, NODE_OPTIONS: "" }
+        }).trim();
         if (result && /^\d+x\d+$/.test(result)) {
           process.env.PLAYWRIGHT_MCP_VIEWPORT_SIZE = result;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stably",
-  "version": "4.12.4",
+  "version": "4.12.6",
   "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",
@@ -87,7 +87,7 @@
     "playwright": "1.59.0-alpha-1771104257000",
     "@stablyai/codegen-agent-constants": "workspace:*",
     "@stablyai-internal/api-client": "workspace:*",
-    "@stablyai-internal/playwright-cli": "0.4.6",
+    "@stablyai-internal/playwright-cli": "0.4.16",
     "@stablyai/agent-hooks": "workspace:*",
     "@stablyai/agent-schemas": "workspace:*",
     "@stablyai/agent-security-hooks": "workspace:*",