@vercel/next-browser 0.1.8 → 0.2.0

package/README.md

@@ -1,83 +1,182 @@
 # @vercel/next-browser
 
-Programmatic access to React DevTools and the Next.js dev server. Everything
-you'd click through in a GUI — component trees, props, hooks, PPR shells,
-build errors, Suspense boundaries — exposed as shell commands that return
-structured text.
+React DevTools and the Next.js dev overlay as shell commands — component
+trees, props, hooks, PPR shells, errors, network, accessibility snapshots —
+structured text that agents can parse and act on.
 
-Built for agents. An LLM can't read a DevTools panel, but it can run
-`next-browser tree`, parse the output, and decide what to inspect next. Each
+An LLM can't click through a DevTools panel, but it can run
+`next-browser snapshot`, read the output, `click e3`, and keep going. Each
 command is a stateless one-shot against a long-lived browser daemon, so an
 agent loop can fire them off without managing browser lifecycle.
 
 ## Getting started
 
-You don't install or run this directly. Your agent does.
+**As a skill** (recommended) — from your Next.js repo:
 
-1. **Add the skill to your project.** From your Next.js repo:
+```bash
+npx skills add vercel-labs/next-browser
+```
 
-   ```bash
-   npx skills add vercel-labs/next-browser
-   ```
+Works with Claude Code, Cursor, Cline, and [others](https://skills.sh).
+Start your agent in the project and type `/next-browser` to invoke the
+skill. It installs the CLI and Chromium if needed, asks for your dev server
+URL, and from there it's pair programming — tell it what you're debugging
+and it drives the browser for you.
 
-   Works with Claude Code, Cursor, Cline, and [others](https://skills.sh).
+**Manual install:**
 
-2. **Start your agent** in that project.
+```bash
+pnpm add -g @vercel/next-browser   # or npm, yarn
+playwright install chromium
+```
 
-3. **Type `/next-browser`** to invoke the skill.
+Requires Node >= 20.
 
-4. The skill checks for the CLI and **installs `@vercel/next-browser`
-   globally** if it's missing (plus `playwright install chromium`).
+## Commands
 
-5. It asks for your dev server URL and any cookies it needs, opens the
-   browser, and from there it's **pair programming** — tell it what you're
-   debugging and it drives the tree, navigates pages, inspects components,
-   and reads errors for you.
+### Browser lifecycle
 
-That's the whole flow. Run `npx skills upgrade` later to pull updates.
+| Command                              | Description                                        |
+| ------------------------------------ | -------------------------------------------------- |
+| `open <url> [--cookies-json <file>]` | Launch browser and navigate (with optional cookies) |
+| `close`                              | Close browser and kill daemon                      |
 
-The rest of this README documents the raw CLI for the rare case where you're
-scripting it yourself.
+### Navigation
 
----
+| Command            | Description                                               |
+| ------------------ | --------------------------------------------------------- |
+| `goto <url>`       | Full-page navigation (new document load)                  |
+| `ssr-goto <url>`   | Navigate blocking external scripts (inspect SSR shell)    |
+| `push [path]`      | Client-side navigation (interactive picker if no path)    |
+| `back`             | Go back in history                                        |
+| `reload`           | Reload current page                                       |
+| `restart-server`   | Restart the Next.js dev server (clears caches)            |
 
-## Manual install
+### Inspection
+
+| Command           | Description                                                   |
+| ----------------- | ------------------------------------------------------------- |
+| `tree`            | Full React component tree (hierarchy, IDs, keys)              |
+| `tree <id>`       | Inspect one component (props, hooks, state, source location)  |
+| `snapshot`        | Accessibility tree with `[ref=eN]` markers on interactive elements |
+| `errors`          | Build and runtime errors for the current page                 |
+| `logs`            | Recent dev server log output                                  |
+| `network [idx]`   | List network requests, or inspect one (headers, body)         |
+| `screenshot`      | Full-page PNG to a temp file                                  |
+
+### Interaction
+
+| Command                      | Description                                                |
+| ---------------------------- | ---------------------------------------------------------- |
+| `click <ref\|text\|selector>` | Click via real pointer events (works with Radix, Headless UI) |
+| `fill <ref\|selector> <value>` | Fill a text input or textarea                            |
+| `eval [ref] <script>`       | Run JS in page context (supports `--file` and stdin)       |
+| `viewport [WxH]`            | Show or set viewport size                                  |
+
+### Performance & PPR
+
+| Command        | Description                                                  |
+| -------------- | ------------------------------------------------------------ |
+| `perf [url]`   | Core Web Vitals + React hydration timing in one pass         |
+| `ppr lock`     | Freeze dynamic content to inspect the static shell           |
+| `ppr unlock`   | Resume dynamic content and print shell analysis              |
+
+### Next.js MCP
+
+| Command        | Description                                     |
+| -------------- | ----------------------------------------------- |
+| `page`         | Route segments for the current URL              |
+| `project`      | Project root and dev server URL                 |
+| `routes`       | All app router routes                           |
+| `action <id>`  | Inspect a server action by ID                   |
+
+## Examples
+
+**Inspect what's on the page and interact with it:**
 
-```bash
-pnpm add -g @vercel/next-browser
+```
+$ next-browser open http://localhost:3000
+$ next-browser snapshot
+- navigation "Main"
+  - link "Home" [ref=e0]
+  - link "Dashboard" [ref=e1]
+- main
+  - heading "Settings"
+  - tablist
+    - tab "General" [ref=e2] (selected)
+    - tab "Security" [ref=e3]
+
+$ next-browser click e3
+clicked
+
+$ next-browser snapshot
+- tablist
+  - tab "General" [ref=e0]
+  - tab "Security" [ref=e1] (selected)
 ```
 
-Requires Node `>=20`.
+**Profile page load performance:**
 
-## Commands
+```
+$ next-browser perf http://localhost:3000/dashboard
+# Page Load Profile — http://localhost:3000/dashboard
+
+## Core Web Vitals
+  TTFB                   42ms
+  LCP               1205.3ms (img: /_next/image?url=...)
+  CLS                    0.03
+
+## React Hydration — 65.5ms (466.2ms → 531.7ms)
+  Hydrated                         65.5ms  (466.2 → 531.7)
+  Commit                            2.0ms  (531.7 → 533.7)
+  ...
+```
+
+**Debug the PPR shell:**
 
 ```
-open <url> [--cookies-json <file>]  launch browser and navigate
-close              close browser and daemon
-
-goto <url>         full-page navigation (new document load)
-ssr-goto <url>     goto but block external scripts (SSR shell)
-push [path]        client-side navigation (interactive picker if no path)
-back               go back in history
-reload             reload current page
-capture-goto [url] capture loading sequence (PPR shell → hydration → data)
-restart-server     restart the Next.js dev server (clears fs cache)
-
-ppr lock           enter PPR instant-navigation mode (requires cacheComponents)
-ppr unlock         exit PPR mode and show shell analysis
-
-tree               show React component tree
-tree <id>          inspect component (props, hooks, state, source)
-
-viewport [WxH]     show or set viewport size (e.g. 1280x720)
-screenshot         save full-page screenshot to tmp file
-eval <script>      evaluate JS in page context
-
-errors             show build/runtime errors
-logs               show recent dev server log output
-network [idx]      list network requests, or inspect one
+$ next-browser ppr lock
+locked
+$ next-browser goto http://localhost:3000/dashboard
+$ next-browser screenshot
+/var/folders/.../next-browser-screenshot.png
+$ next-browser ppr unlock
+# PPR Shell Analysis — 131 boundaries: 3 dynamic holes, 128 static
+
+## Quick Reference
+| Boundary              | Type      | Primary blocker           | Source              |
+| ---                   | ---       | ---                       | ---                 |
+| TrackedSuspense       | component | usePathname (client-hook) | tracked-suspense.js |
 ```
 
+**Inspect a React component:**
+
+```
+$ next-browser tree
+0 38167 - Root
+1 38168 38167 HeadManagerContext.Provider
+2 38169 38168 Root
+...
+224 46375 46374 DeploymentsProvider
+
+$ next-browser tree 46375
+path: Root > ... > DeploymentsProvider
+DeploymentsProvider #46375
+props:
+  children: [<Lazy />, <Lazy />, <span />, <Lazy />, <Lazy />]
+hooks:
+  IsMobile: undefined (1 sub)
+  Router: undefined (2 sub)
+source: app/.../deployments/_parts/context.tsx:180:10
+```
+
+## How it works
+
+A daemon process launches Chromium with the React DevTools extension
+pre-loaded and listens on a Unix domain socket (named pipe on Windows).
+CLI commands send JSON-RPC messages to the daemon and print the response.
+The browser stays open across commands — no per-command startup cost.
+
 ## License
 
 MIT

package/dist/browser.js

@@ -10,7 +10,7 @@
  *
  * Module-level state: one browser context, one page, one PPR lock.
  */
-import { readFileSync, mkdirSync, writeFileSync } from "node:fs";
+import { readFileSync, mkdirSync } from "node:fs";
 import { join, resolve } from "node:path";
 import { tmpdir } from "node:os";
 import { chromium } from "playwright";
@@ -139,7 +139,7 @@ export async function unlock() {
     // For goto case: the page auto-reloads. Wait for the new page to load
     // and React/DevTools to reconnect before trying to snapshot boundaries.
     await page.waitForLoadState("load").catch(() => { });
-    await new Promise((r) => setTimeout(r, 2000));
+    await waitForDevToolsReconnect(page);
     // Wait for all boundaries to resolve after unlock.
     await waitForSuspenseToSettle(page);
     // Capture the fully-resolved state with rich suspendedBy data.
@@ -206,6 +206,25 @@ async function waitForSuspenseToSettle(p) {
         await new Promise((r) => setTimeout(r, 500));
     }
 }
+/**
+ * Wait for React DevTools to reconnect after a page reload.
+ *
+ * After the goto case unlocks, the page auto-reloads and DevTools loses its
+ * renderer connection. Poll until the DevTools hook reports at least one
+ * renderer, or bail after 5s. This replaces the old hardcoded 2s sleep.
+ */
+async function waitForDevToolsReconnect(p) {
+    const deadline = Date.now() + 5_000;
+    while (Date.now() < deadline) {
+        const connected = await p.evaluate(() => {
+            const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+            return hook?.rendererInterfaces?.size > 0;
+        }).catch(() => false);
+        if (connected)
+            return;
+        await new Promise((r) => setTimeout(r, 200));
+    }
+}
 // ── Navigation ───────────────────────────────────────────────────────────────
 /** Hard reload the current page. Returns the URL after reload. */
 export async function reload() {
@@ -215,66 +234,114 @@ export async function reload() {
     return page.url();
 }
 /**
- * Reload the page while capturing screenshots every ~150ms.
- * Stops when: load has fired AND no new layout-shift entries for 2s.
- * Hard timeout at 30s. Returns the list of screenshot paths plus any
- * LayoutShift entries observed during the reload.
- */
-/**
- * Lock PPR → goto → screenshot the shell → unlock → screenshot frames
- * until the page settles. Just PNGs in a directory — the AI reads them.
+ * Profile a page load: reload (or navigate to a URL) and collect Core Web
+ * Vitals (LCP, CLS, TTFB) plus React hydration timing.
+ *
+ * CWVs come from PerformanceObserver and Navigation Timing API.
+ * Hydration timing comes from console.timeStamp entries emitted by React's
+ * profiling build (see the addInitScript interceptor in launch()).
  *
- * Frame 0 is always the PPR shell. Remaining frames capture the transition
- * through hydration and data loading. Stops after 3s of no visual change.
+ * Returns structured data that the CLI formats into a readable report.
  */
-export async function captureGoto(url) {
+export async function perf(url) {
     if (!page)
         throw new Error("browser not open");
     const targetUrl = url || page.url();
-    const dir = join(tmpdir(), `next-browser-capture-goto-${Date.now()}`);
-    mkdirSync(dir, { recursive: true });
-    let frameIdx = 0;
-    async function snap() {
-        await hideDevOverlay();
-        const path = join(dir, `frame-${String(frameIdx).padStart(4, "0")}.png`);
-        const buf = await page.screenshot({ path }).catch(() => null);
-        frameIdx++;
-        return buf;
+    // Install CWV observers before navigation so they capture everything.
+    await page.evaluate(() => {
+        window.__NEXT_BROWSER_REACT_TIMING__ = [];
+        const cwv = { lcp: null, cls: 0, clsEntries: [] };
+        window.__NEXT_BROWSER_CWV__ = cwv;
+        // Largest Contentful Paint
+        new PerformanceObserver((list) => {
+            const entries = list.getEntries();
+            if (entries.length > 0) {
+                const last = entries[entries.length - 1];
+                cwv.lcp = {
+                    startTime: Math.round(last.startTime * 100) / 100,
+                    size: last.size,
+                    element: last.element?.tagName?.toLowerCase() ?? null,
+                    url: last.url || null,
+                };
+            }
+        }).observe({ type: "largest-contentful-paint", buffered: true });
+        // Cumulative Layout Shift
+        new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+                if (!entry.hadRecentInput) {
+                    cwv.cls += entry.value;
+                    cwv.clsEntries.push({
+                        value: Math.round(entry.value * 10000) / 10000,
+                        startTime: Math.round(entry.startTime * 100) / 100,
+                    });
+                }
+            }
+        }).observe({ type: "layout-shift", buffered: true });
+    });
+    // Navigate or reload to trigger a full page load.
+    if (url) {
+        await page.goto(targetUrl, { waitUntil: "load" });
     }
-    // PPR shell: lock suppresses hydration.
-    await lock();
-    await page.goto(targetUrl, { waitUntil: "load" }).catch(() => { });
-    await new Promise((r) => setTimeout(r, 300));
-    await snap();
-    // Unlock → page reloads, hydrates, loads data.
-    const unlockDone = unlock();
-    await new Promise((r) => setTimeout(r, 200));
-    let lastChangeTime = Date.now();
-    let prevHash = "";
-    const SETTLE_MS = 3_000;
-    const HARD_TIMEOUT = 30_000;
-    const start = Date.now();
-    while (true) {
-        const buf = await snap();
-        let hash = "";
-        if (buf) {
-            let h = 0;
-            for (let i = 0; i < buf.length; i += 200)
-                h = ((h << 5) - h + buf[i]) | 0;
-            hash = String(h);
-        }
-        if (hash !== prevHash) {
-            lastChangeTime = Date.now();
-            prevHash = hash;
-        }
-        if (Date.now() - start > HARD_TIMEOUT)
-            break;
-        if (lastChangeTime > 0 && Date.now() - lastChangeTime > SETTLE_MS)
-            break;
-        await new Promise((r) => setTimeout(r, 150));
+    else {
+        await page.reload({ waitUntil: "load" });
+    }
+    // Wait for passive effects, late paints, and layout shifts to flush.
+    await new Promise((r) => setTimeout(r, 3000));
+    // Collect all metrics from the page.
+    const metrics = await page.evaluate(() => {
+        const cwv = window.__NEXT_BROWSER_CWV__ ?? {};
+        const timing = window.__NEXT_BROWSER_REACT_TIMING__ ?? [];
+        // TTFB from Navigation Timing API.
+        const nav = performance.getEntriesByType("navigation")[0];
+        const ttfb = nav
+            ? Math.round((nav.responseStart - nav.requestStart) * 100) / 100
+            : null;
+        return { cwv, timing, ttfb };
+    });
+    // Process React hydration timing.
+    const phases = metrics.timing.filter((e) => e.trackGroup === "Scheduler ⚛" && e.endTime > e.startTime);
+    const components = metrics.timing.filter((e) => e.track === "Components ⚛" && e.endTime > e.startTime);
+    const hydrationPhases = phases.filter((e) => e.label === "Hydrated");
+    const hydratedComponents = components.filter((e) => e.color?.startsWith("tertiary"));
+    let hydrationStart = Infinity;
+    let hydrationEnd = 0;
+    for (const p of hydrationPhases) {
+        if (p.startTime < hydrationStart)
+            hydrationStart = p.startTime;
+        if (p.endTime > hydrationEnd)
+            hydrationEnd = p.endTime;
     }
-    await unlockDone.catch(() => { });
-    return { dir, frames: frameIdx };
+    const round = (n) => Math.round(n * 100) / 100;
+    return {
+        url: targetUrl,
+        ttfb: metrics.ttfb,
+        lcp: metrics.cwv.lcp,
+        cls: {
+            score: round(metrics.cwv.cls),
+            entries: metrics.cwv.clsEntries,
+        },
+        hydration: hydrationPhases.length > 0
+            ? {
+                startTime: round(hydrationStart),
+                endTime: round(hydrationEnd),
+                duration: round(hydrationEnd - hydrationStart),
+            }
+            : null,
+        phases: phases.map((p) => ({
+            label: p.label,
+            startTime: round(p.startTime),
+            endTime: round(p.endTime),
+            duration: round(p.endTime - p.startTime),
+        })),
+        hydratedComponents: hydratedComponents
+            .map((c) => ({
+            name: c.label,
+            startTime: round(c.startTime),
+            endTime: round(c.endTime),
+            duration: round(c.endTime - c.startTime),
+        }))
+            .sort((a, b) => b.duration - a.duration),
+    };
 }
 /**
  * Restart the Next.js dev server via its internal endpoint, then reload.
@@ -444,10 +511,170 @@ async function hideDevOverlay() {
         document.querySelectorAll("[data-nextjs-dev-overlay]").forEach((el) => el.remove());
     }).catch(() => { });
 }
-/** Evaluate arbitrary JavaScript in the page context. */
-export async function evaluate(script) {
+// ── Ref map for interactive elements ──────────────────────────────────
+const INTERACTIVE_ROLES = new Set([
+    "button", "link", "textbox", "checkbox", "radio", "combobox", "listbox",
+    "menuitem", "menuitemcheckbox", "menuitemradio", "option", "searchbox",
+    "slider", "spinbutton", "switch", "tab", "treeitem",
+]);
+let refMap = [];
+/**
+ * Snapshot the accessibility tree via CDP and return a text representation
+ * with [ref=e0], [ref=e1] … markers on interactive elements.
+ * Stores a ref map so that `click("e3")` can resolve back to role+name.
+ */
+export async function snapshot() {
     if (!page)
         throw new Error("browser not open");
+    const cdp = await page.context().newCDPSession(page);
+    try {
+        const { nodes } = (await cdp.send("Accessibility.getFullAXTree"));
+        // Index nodes by ID
+        const byId = new Map();
+        for (const n of nodes)
+            byId.set(n.nodeId, n);
+        refMap = [];
+        const roleNameCount = new Map();
+        const lines = [];
+        function walk(node, depth) {
+            const role = node.role?.value || "unknown";
+            const name = (node.name?.value || "").trim().slice(0, 80);
+            const isInteractive = INTERACTIVE_ROLES.has(role);
+            // Read properties into a map
+            const propMap = new Map();
+            for (const p of node.properties || [])
+                propMap.set(p.name, p.value.value);
+            const ignored = propMap.get("hidden") === true;
+            if (ignored)
+                return;
+            // Always skip leaf text nodes — parent already carries the text
+            if (role === "InlineTextBox" || role === "StaticText" || role === "LineBreak")
+                return;
+            // Skip generic/none wrappers with no name — just recurse children
+            const SKIP_ROLES = new Set(["none", "generic", "GenericContainer"]);
+            if (SKIP_ROLES.has(role) && !name) {
+                for (const id of node.childIds || []) {
+                    const child = byId.get(id);
+                    if (child)
+                        walk(child, depth);
+                }
+                return;
+            }
+            // Skip root WebArea — just recurse
+            if (role === "WebArea" || role === "RootWebArea") {
+                for (const id of node.childIds || []) {
+                    const child = byId.get(id);
+                    if (child)
+                        walk(child, depth);
+                }
+                return;
+            }
+            const indent = "  ".repeat(depth);
+            let line = `${indent}- ${role}`;
+            if (name)
+                line += ` "${name}"`;
+            const disabled = propMap.get("disabled") === true;
+            if (isInteractive && !disabled) {
+                const key = `${role}::${name}`;
+                const count = roleNameCount.get(key) || 0;
+                roleNameCount.set(key, count + 1);
+                const ref = { role, name };
+                if (count > 0)
+                    ref.nth = count;
+                const idx = refMap.length;
+                refMap.push(ref);
+                line += ` [ref=e${idx}]`;
+            }
+            // Append state properties
+            const tags = [];
+            if (propMap.get("checked") === "true" || propMap.get("checked") === true)
+                tags.push("checked");
+            if (propMap.get("checked") === "mixed")
+                tags.push("mixed");
+            if (disabled)
+                tags.push("disabled");
+            if (propMap.get("expanded") === true)
+                tags.push("expanded");
+            if (propMap.get("expanded") === false)
+                tags.push("collapsed");
+            if (propMap.get("selected") === true)
+                tags.push("selected");
+            if (tags.length)
+                line += ` (${tags.join(", ")})`;
+            lines.push(line);
+            for (const id of node.childIds || []) {
+                const child = byId.get(id);
+                if (child)
+                    walk(child, depth + 1);
+            }
+        }
+        // Start from the root (first node)
+        if (nodes.length)
+            walk(nodes[0], 0);
+        return lines.join("\n");
+    }
+    finally {
+        await cdp.detach();
+    }
+}
+/** Resolve a ref (e.g. "e3") or selector string to a Playwright Locator. */
+function resolveLocator(selectorOrRef) {
+    if (!page)
+        throw new Error("browser not open");
+    const refMatch = selectorOrRef.match(/^e(\d+)$/);
+    if (refMatch) {
+        const idx = Number(refMatch[1]);
+        const ref = refMap[idx];
+        if (!ref)
+            throw new Error(`ref e${idx} not found — run snapshot first`);
+        const locator = page.getByRole(ref.role, {
+            name: ref.name,
+            exact: true,
+        });
+        return ref.nth != null ? locator.nth(ref.nth) : locator;
+    }
+    const hasPrefix = /^(css=|text=|role=|#|\[|\.|\w+\s*>)/.test(selectorOrRef);
+    return page.locator(hasPrefix ? selectorOrRef : `text=${selectorOrRef}`);
+}
+/**
+ * Click an element using real pointer events.
+ * Accepts: "e3" (ref from snapshot), plain text, or Playwright selectors.
+ */
+export async function click(selectorOrRef) {
+    if (!page)
+        throw new Error("browser not open");
+    await resolveLocator(selectorOrRef).click();
+}
+/**
+ * Fill a text input/textarea. Clears existing value, then types the new one.
+ * Accepts: "e3" (ref from snapshot), or a selector.
+ */
+export async function fill(selectorOrRef, value) {
+    if (!page)
+        throw new Error("browser not open");
+    await resolveLocator(selectorOrRef).fill(value);
+}
+/**
+ * Evaluate arbitrary JavaScript in the page context.
+ * If ref is provided (e.g. "e3"), the script receives the DOM element as its
+ * first argument: `next-browser eval e3 'el => el.textContent'`
+ */
+export async function evaluate(script, ref) {
+    if (!page)
+        throw new Error("browser not open");
+    if (ref) {
+        const locator = resolveLocator(ref);
+        const handle = await locator.elementHandle();
+        if (!handle)
+            throw new Error(`ref ${ref} not found in DOM`);
+        // The script should be an arrow/function that receives the element.
+        // We wrap it so page.evaluate can pass the element handle as an arg.
+        return page.evaluate(([fn, el]) => {
+            // eslint-disable-next-line no-eval
+            const f = (0, eval)(fn);
+            return f(el);
+        }, [script, handle]);
+    }
     return page.evaluate(script);
 }
 /**
@@ -534,11 +761,36 @@ async function launch() {
     profileDirPath = dir;
     const ctx = await chromium.launchPersistentContext(dir, {
         headless,
-        viewport: { width: 1440, height: 900 },
+        viewport: null,
         // --no-sandbox is required when Chrome runs as root (common in containers/cloud sandboxes)
-        args: headless ? ["--no-sandbox"] : [],
+        args: [
+            ...(headless ? ["--no-sandbox"] : []),
+            "--window-size=1440,900",
+        ],
     });
     await ctx.addInitScript(installHook);
+    // Intercept console.timeStamp to capture React's Performance Track entries.
+    // React's profiling build calls console.timeStamp(label, startTime, endTime,
+    // track, trackGroup, color) for render phases and per-component timing.
+    // startTime/endTime are performance.now() values from the reconciler.
+    await ctx.addInitScript(() => {
+        const entries = [];
+        window.__NEXT_BROWSER_REACT_TIMING__ = entries;
+        const orig = console.timeStamp;
+        console.timeStamp = function (label, ...args) {
+            if (typeof label === "string" && args.length >= 2 && typeof args[0] === "number") {
+                entries.push({
+                    label,
+                    startTime: args[0],
+                    endTime: args[1],
+                    track: args[2] ?? "",
+                    trackGroup: args[3] ?? "",
+                    color: args[4] ?? "",
+                });
+            }
+            return orig.apply(console, [label, ...args]);
+        };
+    });
     // Next.js devtools overlay is removed before each screenshot via hideDevOverlay().
     return ctx;
 }