oh-my-opencode 5.0.0-beta.60 → 5.0.0-beta.63

package/packages/shared-skills/skills/visual-qa/SKILL.md

@@ -49,7 +49,7 @@ Before any reviewer sees an image, verify each capture yourself: the file signat
 ### Web
 
 1. Capture a REFERENCE image: the user's mock/target, generated page snapshot, Figma export, source-site capture, or known-good baseline. Save as PNG. If the user provided overview text or annotations, save them next to the image and treat them as part of the reference packet.
-2. Capture the ACTUAL rendered screenshot at the same viewport size, driving the browser your harness actually has. Where a code cell can reach a browser (`new Bun.WebView()` on a Bun >= 1.4 kernel, otherwise `playwright-core` against the local Chrome), capture in-process: it needs no CLI and returns the PNG path directly. In Codex, `browser:control-in-app-browser` is that in-process surface — use it first unless the page needs an authenticated user browser session. Otherwise use the project's configured browser tooling (the playwright, agent-browser, or dev-browser skill). Save as PNG. If nothing is available, install [agent-browser](https://github.com/vercel-labs/agent-browser) (`bun add -g agent-browser && agent-browser install`) and capture with it — see `$SKILL_DIR/references/agent-browser-setup.md` for the full setup, including how to shoot a fixed-viewport screenshot.
+2. Capture the ACTUAL rendered screenshot at the reference viewport. Use two browser tiers from js eval: (1) `new Bun.WebView()` on Bun >= 1.4 (macOS default; Linux/Windows need installed Chrome/Chromium/Edge); (2) otherwise, or for Chrome semantics, stealth, trace, or authenticated profiles, WRITE a `playwright-core` script and run it from the kernel against local Chrome (`chromium.launch({ channel: "chrome" })` / `launchPersistentContext` on a CLONED profile, never the live one). In Codex, prefer `browser:control-in-app-browser` for ordinary captures. Save PNG and return its path; close the browser context. See `$SKILL_DIR/references/browser-setup.md` for fixed-viewport examples and prerequisites.
 3. Run the diff and keep the JSON:
 
 ```

package/packages/shared-skills/skills/visual-qa/references/browser-setup.md

@@ -0,0 +1,75 @@
+# Browser setup (Web capture)
+
+Use the js-eval kernel for both tiers. In Codex, prefer
+`browser:control-in-app-browser` for ordinary captures.
+
+## Tier 1: Bun.WebView
+
+On a Bun >= 1.4 kernel, `new Bun.WebView()` is the macOS default (system
+WebKit, no browser download). Linux/Windows require `backend: "chrome"`
+and installed Chrome/Chromium/Edge. WebView is headless; WebKit has no CDP,
+and `type()` emits no keyboard events. Use tier 2 when these differences matter.
+
+```js
+// js-eval cell; url and pngPath belong to this QA run.
+const view = new Bun.WebView({ width: 1280, height: 720 })
+try {
+  await view.navigate(url)
+  await Bun.write(pngPath, await view.screenshot())
+  console.log(pngPath)
+} finally {
+  view[Symbol.dispose]()
+}
+```
+
+## Tier 2: playwright-core with local Chrome
+
+For other kernels, real-Chrome semantics, stealth, traces, or authenticated
+profiles, WRITE a script beside the project's installed `playwright-core`
+dependency and execute it from js eval. The user installs `playwright-core`
+once with `bun add playwright-core` if needed; Chrome must already exist.
+No managed browser download is needed.
+
+```js
+// capture.mjs
+import { chromium } from "playwright-core"
+const [url, pngPath] = process.argv.slice(2)
+const browser = await chromium.launch({ channel: "chrome", headless: true })
+try {
+  const page = await browser.newPage({ viewport: { width: 1280, height: 720 }, deviceScaleFactor: 1 })
+  await page.goto(url, { waitUntil: "load", timeout: 30000 })
+  await page.screenshot({ path: pngPath })
+  console.log(pngPath)
+} finally {
+  await browser.close()
+}
+```
+
+Run from the js-eval kernel (also works on a Node kernel):
+
+```js
+const { promisify } = await import("node:util")
+const { execFile } = await import("node:child_process")
+const result = await promisify(execFile)("node", [scriptPath, url, pngPath], { timeout: 45000 })
+console.log(result.stdout)
+```
+
+For auth, CLONE the user-data directory to a private task-owned directory
+and use `chromium.launchPersistentContext(clonePath, { channel: "chrome" })`.
+NEVER launch against or clear cookies/cache/site data from the live profile.
+Close the context and remove only the clone after QA. For script-based stealth,
+read the ultimate-browsing skill's `references/chrome-stealth.md`.
+
+## Capture a screenshot at a fixed viewport
+
+Match CSS viewport AND PNG dimensions: WebKit follows native display scale
+(a 1280x720 viewport can yield 2560x1440 pixels). Use matching reference
+captures or Chrome's `deviceScaleFactor`, not resizing to force a pass.
+Wait for the specific page state, not a sleep, then compare:
+
+```sh
+node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff reference.png actual.png
+```
+
+Inspect `dimensionsMatch` and `diffRatio`, then inspect the image. Close every
+WebView/browser context and the fixture server, even on a failed capture.

package/dist/skills/visual-qa/references/agent-browser-setup.md

@@ -1,45 +0,0 @@
-# agent-browser setup (Web capture fallback)
-
-Use this when the project has **no** browser tooling configured or available for the Web
-capture path in Step 2 (no playwright / dev-browser skill, no usable headless browser).
-[agent-browser](https://github.com/vercel-labs/agent-browser) is a standalone CLI that
-drives a real Chromium and can screenshot a page at a fixed viewport — exactly what the
-`image-diff` evidence step needs.
-
-Repo: https://github.com/vercel-labs/agent-browser
-
-## Install
-
-```
-npm install -g agent-browser && agent-browser install
-```
-
-`npm install -g agent-browser` installs the CLI globally; `agent-browser install` downloads the
-managed browser it drives. If Bun is already available, `bun add -g agent-browser && agent-browser install`
-is equivalent, but npm is the default because LazyCodex/Codex installations do not require Bun.
-
-Confirm it is ready and discover the current flags:
-
-```
-agent-browser --help
-```
-
-## Capture a screenshot at a fixed viewport
-
-Set the viewport first, then screenshot — this guarantees the ACTUAL capture matches the
-REFERENCE viewport so `image-diff` compares like-for-like:
-
-```
-agent-browser set viewport 1280 720      # width height (add a third arg, e.g. 2, for retina scale)
-agent-browser screenshot actual.png      # add --full for full-page, --screenshot-dir ./shots for a custom dir
-```
-
-Then feed the PNG into the diff exactly as in Step 2:
-
-```
-node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff <reference.png> actual.png
-```
-
-Match the viewport numbers to whatever the reference/mock was captured at; mismatched
-dimensions make `dimensionsMatch` false and inflate `diffRatio`. Run `agent-browser --help`
-for the full command set (navigation, batch, annotate, format/quality flags).

package/packages/omo-codex/plugin/skills/visual-qa/references/agent-browser-setup.md

@@ -1,45 +0,0 @@
-# agent-browser setup (Web capture fallback)
-
-Use this when the project has **no** browser tooling configured or available for the Web
-capture path in Step 2 (no playwright / dev-browser skill, no usable headless browser).
-[agent-browser](https://github.com/vercel-labs/agent-browser) is a standalone CLI that
-drives a real Chromium and can screenshot a page at a fixed viewport — exactly what the
-`image-diff` evidence step needs.
-
-Repo: https://github.com/vercel-labs/agent-browser
-
-## Install
-
-```
-npm install -g agent-browser && agent-browser install
-```
-
-`npm install -g agent-browser` installs the CLI globally; `agent-browser install` downloads the
-managed browser it drives. If Bun is already available, `bun add -g agent-browser && agent-browser install`
-is equivalent, but npm is the default because LazyCodex/Codex installations do not require Bun.
-
-Confirm it is ready and discover the current flags:
-
-```
-agent-browser --help
-```
-
-## Capture a screenshot at a fixed viewport
-
-Set the viewport first, then screenshot — this guarantees the ACTUAL capture matches the
-REFERENCE viewport so `image-diff` compares like-for-like:
-
-```
-agent-browser set viewport 1280 720      # width height (add a third arg, e.g. 2, for retina scale)
-agent-browser screenshot actual.png      # add --full for full-page, --screenshot-dir ./shots for a custom dir
-```
-
-Then feed the PNG into the diff exactly as in Step 2:
-
-```
-node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff <reference.png> actual.png
-```
-
-Match the viewport numbers to whatever the reference/mock was captured at; mismatched
-dimensions make `dimensionsMatch` false and inflate `diffRatio`. Run `agent-browser --help`
-for the full command set (navigation, batch, annotate, format/quality flags).

package/packages/shared-skills/skills/visual-qa/references/agent-browser-setup.md

@@ -1,45 +0,0 @@
-# agent-browser setup (Web capture fallback)
-
-Use this when the project has **no** browser tooling configured or available for the Web
-capture path in Step 2 (no playwright / dev-browser skill, no usable headless browser).
-[agent-browser](https://github.com/vercel-labs/agent-browser) is a standalone CLI that
-drives a real Chromium and can screenshot a page at a fixed viewport — exactly what the
-`image-diff` evidence step needs.
-
-Repo: https://github.com/vercel-labs/agent-browser
-
-## Install
-
-```
-npm install -g agent-browser && agent-browser install
-```
-
-`npm install -g agent-browser` installs the CLI globally; `agent-browser install` downloads the
-managed browser it drives. If Bun is already available, `bun add -g agent-browser && agent-browser install`
-is equivalent, but npm is the default because LazyCodex/Codex installations do not require Bun.
-
-Confirm it is ready and discover the current flags:
-
-```
-agent-browser --help
-```
-
-## Capture a screenshot at a fixed viewport
-
-Set the viewport first, then screenshot — this guarantees the ACTUAL capture matches the
-REFERENCE viewport so `image-diff` compares like-for-like:
-
-```
-agent-browser set viewport 1280 720      # width height (add a third arg, e.g. 2, for retina scale)
-agent-browser screenshot actual.png      # add --full for full-page, --screenshot-dir ./shots for a custom dir
-```
-
-Then feed the PNG into the diff exactly as in Step 2:
-
-```
-node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff <reference.png> actual.png
-```
-
-Match the viewport numbers to whatever the reference/mock was captured at; mismatched
-dimensions make `dimensionsMatch` false and inflate `diffRatio`. Run `agent-browser --help`
-for the full command set (navigation, batch, annotate, format/quality flags).