feat(browser): migrate from puppeteer-core to patchright (undetected Playwright)

Replace puppeteer-core with patchright — a patched, undetected Playwright
drop-in that provides built-in stealth (Runtime.enable avoidance, Console.enable
disable, command-flag leak fixes, closed shadow root support).

Core changes:
- launch.ts: chromium.launchServer() + connect(wsEndpoint) for headless mode,
  connectOverCDP(cdpUrl) for Electron/external attach. CDP-based
  Emulation.setDeviceMetricsOverride for deviceScaleFactor (DPR) support.
  Removed all 14 custom stealth init scripts, patchSourceUrl CDP monkey-patch,
  UA override logic, and @puppeteer/browsers dependency.
- registry.ts: BrowserServer|Browser union handle, browserAlive() helper,
  connectOverCDP() replaces puppeteer.connect(), browser.isConnected()
  replaces browser.connected.
- attach.ts: pickElectronTarget uses browser.contexts().flatMap(ctx => ctx.pages())
  instead of browser.targets()/target.type()/target.page().
- tab-worker.ts: page.ariaSnapshot({mode:'ai',boxes:true}) replaces
  page.accessibility.snapshot(). New parseAriaSnapshot()/parseAriaLine()
  functions parse the YAML-like output into ObservationEntry[] with string
  aria-ref IDs (e.g. 'e2'). tab.id(ref) returns page.locator('aria-ref='+ref).
  CDP Accessibility.getFullAXTree enriches entries with description and
  keyshortcuts (stealth-safe, does not trigger Runtime.enable). All locator
  methods updated (.click({timeout}) instead of .setTimeout().click()),
  setInputFiles replaces uploadFile, mouse.wheel(dx,dy) takes numbers.
  normalizeSelector translates Puppeteer selectors (aria/X, text/X, xpath/X,
  pierce/X, p-aria/X) to Playwright equivalents (text=X, xpath=, bare CSS).
  WebP screenshot saves use resizeImage encoding since Playwright can't
  capture webp natively.
- tab-supervisor.ts: buildInitPayload passes WS endpoint (headless) or CDP
  URL (attach). pageTargetId() from launch.ts replaces internal _targetId
  access. closeOrphanTarget uses context-based page discovery.
- tab-protocol.ts: WorkerInitPayload uses 'endpoint' instead of
  'browserWSEndpoint'. ObservationEntry.id changed from number to string.
  Observation.viewport removed deviceScaleFactor (DPR set via CDP instead).
- cmux/cmux-tab.ts: ref construction uses @${element.id} (not @e${id})
  since ids already have the e prefix. selectorSpec parses eN refs correctly.
- bundle-dist.ts: RUNTIME_EXTERNAL updated from puppeteer-core to
  patchright/patchright-core.

Removed:
- puppeteer-core, @puppeteer/browsers dependencies
- packages/coding-agent/src/tools/puppeteer/ (14 stealth scripts)
- browser-stealth-targets.test.ts (stealth functionality removed)

Added: patchright 1.60.2 dependency

Author: Brit

bun.lock

@@ -42,7 +42,6 @@
       "@opentelemetry/resources": "^2.7.1",
       "@opentelemetry/sdk-trace-base": "^2.7.1",
       "@opentelemetry/sdk-trace-node": "^2.7.1",
-      "@puppeteer/browsers": "^3.0.4",
       "@tailwindcss/node": "^4.3.0",
       "@tailwindcss/vite": "^4.3.0",
       "@types/babel__generator": "^7.27.0",
@@ -74,7 +73,7 @@
       "partial-json": "^0.1.7",
       "postcss": "^8.5.15",
       "prettier": "^3.8.4",
-      "puppeteer-core": "^25.1.0",
+      "patchright": "1.60.2",
       "react": "19.2.7",
       "react-chartjs-2": "^5.3.1",
       "react-dom": "19.2.7",

package.json

@@ -65,7 +65,6 @@
 		"@opentelemetry/resources": "catalog:",
 		"@opentelemetry/sdk-trace-base": "catalog:",
 		"@opentelemetry/sdk-trace-node": "catalog:",
-		"@puppeteer/browsers": "catalog:",
 		"@types/turndown": "catalog:",
 		"@xterm/headless": "catalog:",
 		"arktype": "catalog:",
@@ -77,7 +76,7 @@
 		"lru-cache": "catalog:",
 		"mammoth": "catalog:",
 		"mupdf": "catalog:",
-		"puppeteer-core": "catalog:",
+		"patchright": "catalog:",
 		"turndown": "catalog:",
 		"turndown-plugin-gfm": "catalog:",
 		"zod": "catalog:"

packages/coding-agent/package.json

@@ -65,6 +65,8 @@ async function main(): Promise<void> {
 					"fastembed",
 					"--external",
 					"onnxruntime-node",
+					"--external",
+					"chromium-bidi",
 					"--root",
 					".",
 					"./packages/coding-agent/src/cli.ts",

packages/coding-agent/scripts/build-binary.ts

@@ -22,8 +22,9 @@ const ALWAYS_EXTERNAL = ["mupdf", "@oh-my-pi/pi-natives", "@huggingface/transfor
 // @ark/schema is patched, so it — and arktype, which pulls @ark/schema — stay
 // bundled).
 const RUNTIME_EXTERNAL = [
-	"puppeteer-core",
-	"@puppeteer/browsers",
+	"patchright",
+	"patchright-core",
+	"chromium-bidi",
 	"@babel/parser",
 	"@xterm/headless",
 	"turndown",

packages/coding-agent/scripts/bundle-dist.ts

@@ -3307,7 +3307,7 @@ export const SETTINGS_SCHEMA = {
 			tab: "tools",
 			group: "Available Tools",
 			label: "Browser",
-			description: "Enable the browser tool for scripted Chromium automation (puppeteer)",
+			description: "Enable the browser tool for scripted Chromium automation (patchright)",
 		},
 	},
 

packages/coding-agent/src/config/settings-schema.ts

@@ -27,7 +27,7 @@ Drives real Chromium tab; full puppeteer access via JS.
   - `tab.evaluate(fn, …args)` — `page.evaluate` for ad-hoc DOM reads.
   - `tab.screenshot({ selector?, fullPage?, save?, silent? })` — capture + attach for viewing (`silent: true` skips). Pass `save` only when a later step needs the file.
   - `tab.extract(format = "markdown")` — readable page content (`"markdown"` | `"text"`); throws when nothing readable.
-- Selectors: CSS + puppeteer handlers `aria/Sign in`, `text/Continue`, `xpath/…`, `pierce/…`; also Playwright-style `p-aria/…`, `p-text/…`.
+- Selectors: CSS + Playwright engines `text=Sign in`, `xpath=//a`, `role=button`; legacy `aria/X`, `text/X`, `xpath/X`, `pierce/X`, `p-aria/X`, `p-text/X` auto-translated.
 </instruction>
 
 <critical>

packages/coding-agent/src/prompts/tools/browser.md

@@ -1,6 +1,6 @@
 import * as net from "node:net";
 import { Process, ProcessStatus } from "@oh-my-pi/pi-natives";
-import type { Browser, Page } from "puppeteer-core";
+import type { Browser, Page } from "patchright";
 import { ToolError, throwIfAborted } from "../tool-errors";
 
 const ATTACH_TARGET_SKIP_PATTERN =
@@ -119,27 +119,16 @@ export async function findReusableCdp(
 }
 
 /**
- * Pick the best page target on an attached browser. Prefer discoverable page
- * targets first so Chromium/Edge attach flows that hide pages from
- * `browser.pages()` can still return a usable tab.
+ * Pick the best page on an attached browser. In Playwright, pages are accessed
+ * via browser contexts rather than target objects. We gather all pages across
+ * all contexts and pick the best match.
  */
 export async function pickElectronTarget(browser: Browser, matcher?: string): Promise<Page> {
-	const discoveredPages = await Promise.all(
-		browser.targets().map(async target => {
-			if (String(target.type()) !== "page") return null;
-			return await target.page().catch(() => null);
-		}),
-	);
-	const usablePages = discoveredPages.filter((page): page is Page => page !== null);
-	if (usablePages.length > 0) {
-		return pickPageFromList(usablePages, matcher);
-	}
-
-	const fallbackPages = await browser.pages();
-	if (!fallbackPages.length) {
+	const pages = browser.contexts().flatMap(ctx => ctx.pages());
+	if (!pages.length) {
 		throw new ToolError("No page targets available on the attached browser");
 	}
-	return pickPageFromList(fallbackPages, matcher);
+	return pickPageFromList(pages, matcher);
 }
 
 async function enrichPages(pages: Page[]): Promise<Array<{ page: Page; url: string; title: string }>> {

packages/coding-agent/src/tools/browser/attach.ts

@@ -246,7 +246,7 @@ export class CmuxTab {
 	#lastViewport: ReadyInfo["viewport"] = DEFAULT_VIEWPORT;
 	#runContext: RunContext | undefined;
 	#runtime: JsRuntime | undefined;
-	readonly #elementRefs = new Map<number, CachedElementRef>();
+	readonly #elementRefs = new Map<string, CachedElementRef>();
 	#pageFacade: CmuxPageFacade | undefined;
 	#browserFacade: CmuxBrowserFacade | undefined;
 	constructor(opts: { client: CmuxSocketClient; surfaceId: string; url?: string; title?: string }) {
@@ -278,7 +278,6 @@ export class CmuxTab {
 		this.#lastViewport = {
 			width: viewport.width,
 			height: viewport.height,
-			deviceScaleFactor: viewport.deviceScaleFactor,
 		};
 	}
 
@@ -298,9 +297,7 @@ export class CmuxTab {
 			this.#lastUrl = urlResult.url;
 		}
 		const geometry = await this.#readGeometry().catch(() => undefined);
-		this.#lastViewport = geometry
-			? { width: geometry.innerWidth, height: geometry.innerHeight, deviceScaleFactor: geometry.dpr }
-			: viewport;
+		this.#lastViewport = geometry ? { width: geometry.innerWidth, height: geometry.innerHeight } : viewport;
 		await this.title().catch(() => "");
 		return {
 			url: this.#lastUrl,
@@ -342,7 +339,6 @@ export class CmuxTab {
 		const viewport = {
 			width: geometry.innerWidth,
 			height: geometry.innerHeight,
-			deviceScaleFactor: geometry.dpr,
 		};
 		this.#lastViewport = viewport;
 		const observation = cmuxSnapshotToObservation(snapshot as CmuxSnapshotResult, viewport, geometry);
@@ -575,8 +571,8 @@ export class CmuxTab {
 		throw new ToolError(`tab.waitForResponse() timed out after ${timeoutMs}ms`);
 	}
 
-	async id(id: number): Promise<CmuxElementHandle> {
-		const ref = this.#elementRefs.get(id)?.ref ?? `@e${id}`;
+	async id(id: string): Promise<CmuxElementHandle> {
+		const ref = this.#elementRefs.get(id)?.ref ?? `@${id}`;
 		await this.#waitForSelector(ref, this.#runContext?.timeoutMs ?? 30_000);
 		return new CmuxElementHandle(this, ref);
 	}
@@ -808,7 +804,7 @@ export class CmuxTab {
 	}
 
 	async #selectorExists(spec: SelectorSpec): Promise<boolean> {
-		if (spec.kind === "ref") return this.#elementRefs.has(Number(spec.value));
+		if (spec.kind === "ref") return this.#elementRefs.has(spec.value);
 		const script = `(() => {
 			const spec = ${JSON.stringify(spec)};
 			${PAGE_SELECTOR_HELPERS}
@@ -893,8 +889,8 @@ export class CmuxTab {
 		else if (normalized.startsWith("p-aria/")) normalized = `aria/${normalized.slice("p-aria/".length)}`;
 		else if (normalized.startsWith("p-xpath/")) normalized = `xpath/${normalized.slice("p-xpath/".length)}`;
 		else if (normalized.startsWith("p-pierce/")) normalized = `pierce/${normalized.slice("p-pierce/".length)}`;
-		const ref = /^@?e(\d+)$/.exec(normalized);
-		if (ref) return { kind: "ref", value: ref[1]!, raw, ref: `@e${ref[1]}` };
+		const ref = /^@?(e\d+)$/.exec(normalized);
+		if (ref) return { kind: "ref", value: ref[1]!, raw, ref: `@${ref[1]}` };
 		const slash = normalized.indexOf("/");
 		if (slash > 0) {
 			const prefix = normalized.slice(0, slash);
@@ -916,7 +912,7 @@ export class CmuxTab {
 		this.#elementRefs.clear();
 		for (const element of observation.elements) {
 			this.#elementRefs.set(element.id, {
-				ref: `@e${element.id}`,
+				ref: `@${element.id}`,
 				name: element.name,
 				role: element.role,
 			});

packages/coding-agent/src/tools/browser/cmux/cmux-tab.ts

@@ -82,13 +82,18 @@ export function cmuxSnapshotToObservation(
 	for (const ref in refs) {
 		const value = refs[ref];
 		if (!value) continue;
-		const id = Number.parseInt(ref.replace(/^@?e/, ""), 10);
-		if (Number.isNaN(id)) continue;
+		// Keep the full ref string (e.g. "e2") as the element ID for aria-ref selectors.
+		const normalizedRef = ref.startsWith("@") ? ref.slice(1) : ref;
+		if (!normalizedRef.startsWith("e")) continue;
 		const role = typeof value.role === "string" && value.role.length > 0 ? value.role : "generic";
 		const name = typeof value.name === "string" && value.name.length > 0 ? value.name : undefined;
-		elements.push({ id, role, name, states: [] });
+		elements.push({ id: normalizedRef, role, name, states: [] });
 	}
-	elements.sort((a, b) => a.id - b.id);
+	elements.sort((a, b) => {
+		const aNum = Number.parseInt(a.id.replace(/^e/, ""), 10) || 0;
+		const bNum = Number.parseInt(b.id.replace(/^e/, ""), 10) || 0;
+		return aNum - bNum;
+	});
 
 	const url =
 		(typeof result.url === "string" && result.url.length > 0 ? result.url : undefined) ??