@vercel/next-browser 0.1.8 → 0.3.0

package/dist/cli.js

@@ -51,14 +51,49 @@ if (cmd === "reload") {
     const res = await send("reload");
     exit(res, res.ok ? `reloaded → ${res.data}` : "");
 }
-if (cmd === "capture-goto") {
-    const res = await send("capture-goto", arg ? { url: arg } : {});
+if (cmd === "perf") {
+    const res = await send("perf", arg ? { url: arg } : {});
     if (!res.ok)
         exit(res, "");
-    const data = res.data;
-    exit(res, `${data.frames} frames → ${data.dir}\n` +
-        "\n" +
-        "frame-0000.png is the PPR shell. Remaining frames capture hydration → data.");
+    const d = res.data;
+    const lines = [`# Page Load Profile — ${d.url}`, ""];
+    // Core Web Vitals
+    lines.push("## Core Web Vitals");
+    const ttfbStr = d.ttfb != null ? `${d.ttfb}ms` : "—";
+    lines.push(`  TTFB              ${ttfbStr.padStart(10)}`);
+    if (d.lcp) {
+        const lcpLabel = d.lcp.element ? ` (${d.lcp.element}${d.lcp.url ? `: ${d.lcp.url.slice(0, 60)}` : ""})` : "";
+        lines.push(`  LCP               ${String(d.lcp.startTime + "ms").padStart(10)}${lcpLabel}`);
+    }
+    else {
+        lines.push(`  LCP                        —`);
+    }
+    lines.push(`  CLS               ${String(d.cls.score).padStart(10)}`);
+    lines.push("");
+    // React Hydration
+    if (d.hydration) {
+        lines.push(`## React Hydration — ${d.hydration.duration}ms (${d.hydration.startTime}ms → ${d.hydration.endTime}ms)`);
+    }
+    else {
+        lines.push("## React Hydration — no data (requires profiling build)");
+    }
+    if (d.phases.length > 0) {
+        for (const p of d.phases) {
+            lines.push(`  ${p.label.padEnd(28)} ${String(p.duration + "ms").padStart(10)}  (${p.startTime} → ${p.endTime})`);
+        }
+        lines.push("");
+    }
+    if (d.hydratedComponents.length > 0) {
+        lines.push(`## Hydrated components (${d.hydratedComponents.length} total, sorted by duration)`);
+        const top = d.hydratedComponents.slice(0, 30);
+        for (const c of top) {
+            lines.push(`  ${c.name.padEnd(40)} ${String(c.duration + "ms").padStart(10)}`);
+        }
+        if (d.hydratedComponents.length > 30) {
+            lines.push(`  ... and ${d.hydratedComponents.length - 30} more`);
+        }
+    }
+    exit(res, lines.join("\n"));
 }
 if (cmd === "restart-server") {
     const res = await send("restart");
@@ -85,24 +120,84 @@ if (cmd === "goto") {
     const res = await send("goto", { url: arg });
     exit(res, res.ok ? `→ ${res.data}` : "");
 }
-if (cmd === "ssr-goto") {
-    const res = await send("ssr-goto", { url: arg });
-    exit(res, res.ok ? `→ ${res.data} (external scripts blocked)` : "");
+if (cmd === "ssr" && arg === "lock") {
+    const res = await send("ssr-lock");
+    exit(res, "ssr locked — external scripts blocked on all navigations");
+}
+if (cmd === "ssr" && arg === "unlock") {
+    const res = await send("ssr-unlock");
+    exit(res, "ssr unlocked — external scripts re-enabled");
 }
 if (cmd === "back") {
     const res = await send("back");
     exit(res, "back");
 }
+if (cmd === "preview") {
+    const clear = args.includes("--clear");
+    const caption = args.filter((a) => a !== "--clear").slice(1).join(" ") || undefined;
+    const res = await send("preview", { caption, clear });
+    exit(res, res.ok ? `preview → ${res.data}` : "");
+}
 if (cmd === "screenshot") {
-    const res = await send("screenshot");
+    const fullPage = args.includes("--full-page");
+    const res = await send("screenshot", { fullPage });
     exit(res, res.ok ? String(res.data) : "");
 }
-if (cmd === "eval") {
+if (cmd === "snapshot") {
+    const res = await send("snapshot");
+    exit(res, res.ok ? json(res.data) : "");
+}
+if (cmd === "click") {
     if (!arg) {
-        console.error("usage: next-browser eval <script>");
+        console.error("usage: next-browser click <ref|text|selector>");
+        process.exit(1);
+    }
+    const res = await send("click", { selector: arg });
+    exit(res, "clicked");
+}
+if (cmd === "fill") {
+    const value = args[2];
+    if (!arg || value === undefined) {
+        console.error("usage: next-browser fill <ref|selector> <value>");
+        process.exit(1);
+    }
+    const res = await send("fill", { selector: arg, value });
+    exit(res, "filled");
+}
+if (cmd === "eval") {
+    // Check if first arg is a ref (e.g. "e3") — if so, second arg is the script
+    let ref;
+    let scriptArg = arg;
+    let fileArgIdx = 2;
+    if (arg && /^e\d+$/.test(arg)) {
+        ref = arg;
+        scriptArg = args[2];
+        fileArgIdx = 3;
+    }
+    let script;
+    if (scriptArg === "--file" || scriptArg === "-f") {
+        const filePath = args[fileArgIdx];
+        if (!filePath) {
+            console.error("usage: next-browser eval [ref] --file <path>");
+            process.exit(1);
+        }
+        script = readFileSync(filePath, "utf-8");
+    }
+    else if (scriptArg === "-") {
+        // Read from stdin
+        const chunks = [];
+        for await (const chunk of process.stdin)
+            chunks.push(chunk);
+        script = Buffer.concat(chunks).toString("utf-8");
+    }
+    else {
+        script = scriptArg;
+    }
+    if (!script) {
+        console.error("usage: next-browser eval [ref] <script>\n       next-browser eval [ref] --file <path>\n       echo 'script' | next-browser eval -");
         process.exit(1);
     }
-    const res = await send("eval", { script: arg });
+    const res = await send("eval", { script, ...(ref ? { selector: ref } : {}) });
     exit(res, res.ok ? json(res.data) : "");
 }
 if (cmd === "tree") {
@@ -233,11 +328,12 @@ function printUsage() {
         "  close              close browser and daemon\n" +
         "\n" +
         "  goto <url>         full-page navigation (new document load)\n" +
-        "  ssr-goto <url>     goto but block external scripts (SSR shell)\n" +
+        "  ssr lock           block external scripts on all navigations\n" +
+        "  ssr unlock         re-enable external scripts\n" +
         "  push [path]        client-side navigation (interactive picker if no path)\n" +
         "  back               go back in history\n" +
         "  reload             reload current page\n" +
-        "  capture-goto [url]   capture loading sequence (PPR shell → hydration → data)\n" +
+        "  perf [url]         profile page load (CWVs + React hydration timing)\n" +
         "  restart-server     restart the Next.js dev server (clears fs cache)\n" +
         "\n" +
         "  ppr lock           enter PPR instant-navigation mode\n" +
@@ -247,8 +343,14 @@ function printUsage() {
         "  tree <id>          inspect component (props, hooks, state, source)\n" +
         "\n" +
         "  viewport [WxH]     show or set viewport size (e.g. 1280x720)\n" +
-        "  screenshot         save full-page screenshot to tmp file\n" +
-        "  eval <script>      evaluate JS in page context\n" +
+        "  preview [caption] [--clear]  screenshot + open in viewer (accumulates)\n" +
+        "  screenshot [--full-page]  save screenshot to tmp file\n" +
+        "  snapshot           accessibility tree with interactive refs\n" +
+        "  click <ref|sel>    click an element (real pointer events)\n" +
+        "  fill <ref|sel> <v> fill a text input\n" +
+        "  eval [ref] <script> evaluate JS in page context\n" +
+        "  eval --file <path> evaluate JS from a file\n" +
+        "  eval -             evaluate JS from stdin\n" +
         "\n" +
         "  errors             show build/runtime errors\n" +
         "  logs               show recent dev server log output\n" +

package/dist/daemon.js

@@ -57,16 +57,20 @@ async function run(cmd) {
         const data = await browser.reload();
         return { ok: true, data };
     }
-    if (cmd.action === "capture-goto") {
-        const data = await browser.captureGoto(cmd.url);
+    if (cmd.action === "perf") {
+        const data = await browser.perf(cmd.url);
         return { ok: true, data };
     }
     if (cmd.action === "restart") {
         const data = await browser.restart();
         return { ok: true, data };
     }
+    if (cmd.action === "preview") {
+        const data = await browser.preview(cmd.caption, cmd.clear);
+        return { ok: true, data };
+    }
     if (cmd.action === "screenshot") {
-        const data = await browser.screenshot();
+        const data = await browser.screenshot({ fullPage: cmd.fullPage });
         return { ok: true, data };
     }
     if (cmd.action === "links") {
@@ -81,9 +85,13 @@ async function run(cmd) {
         const data = await browser.goto(cmd.url);
         return { ok: true, data };
     }
-    if (cmd.action === "ssr-goto") {
-        const data = await browser.ssrGoto(cmd.url);
-        return { ok: true, data };
+    if (cmd.action === "ssr-lock") {
+        await browser.ssrLock();
+        return { ok: true };
+    }
+    if (cmd.action === "ssr-unlock") {
+        await browser.ssrUnlock();
+        return { ok: true };
     }
     if (cmd.action === "back") {
         await browser.back();
@@ -97,8 +105,20 @@ async function run(cmd) {
         const data = await browser.node(cmd.nodeId);
         return { ok: true, data };
     }
+    if (cmd.action === "snapshot") {
+        const data = await browser.snapshot();
+        return { ok: true, data };
+    }
+    if (cmd.action === "click") {
+        await browser.click(cmd.selector);
+        return { ok: true };
+    }
+    if (cmd.action === "fill") {
+        await browser.fill(cmd.selector, cmd.value);
+        return { ok: true };
+    }
     if (cmd.action === "eval") {
-        const data = await browser.evaluate(cmd.script);
+        const data = await browser.evaluate(cmd.script, cmd.selector);
         return { ok: true, data };
     }
     if (cmd.action === "mcp") {

package/dist/paths.js

@@ -2,5 +2,7 @@ import { homedir } from "node:os";
 import { join } from "node:path";
 const dir = join(homedir(), ".next-browser");
 export const socketDir = dir;
-export const socketPath = join(dir, "default.sock");
+export const socketPath = process.platform === "win32"
+    ? "//./pipe/next-browser-default"
+    : join(dir, "default.sock");
 export const pidFile = join(dir, "default.pid");

package/dist/suspense.js

@@ -124,61 +124,46 @@ export function formatReport(report) {
             }
             lines.push("");
         }
-        lines.push("## Dynamic holes (suspended in shell)");
-        for (const hole of report.holes) {
-            const name = hole.name ?? "(unnamed)";
-            const src = hole.source ? `${hole.source[0]}:${hole.source[1]}:${hole.source[2]}` : null;
-            lines.push(`  ${name}${src ? ` at ${src}` : ""}`);
-            if (hole.renderedBy.length > 0) {
-                lines.push(`    rendered by: ${hole.renderedBy.map((o) => {
-                    const env = o.env ? ` [${o.env}]` : "";
-                    const src = o.source ? ` at ${o.source[0]}:${o.source[1]}` : "";
-                    return `${o.name}${env}${src}`;
-                }).join(" > ")}`);
-            }
-            if (hole.environments.length > 0)
-                lines.push(`    environments: ${hole.environments.join(", ")}`);
-            if (hole.primaryBlocker) {
-                lines.push(`    primary blocker: ${hole.primaryBlocker.name} ` +
-                    `(${hole.primaryBlocker.kind}, actionability ${labelActionability(hole.primaryBlocker.actionability)})`);
-                if (hole.fallbackSource.path) {
-                    lines.push(`    fallback source: ${hole.fallbackSource.path} ` +
-                        `(${hole.fallbackSource.confidence} confidence)`);
-                }
-                if (hole.primaryBlocker.sourceFrame) {
-                    lines.push(`      source: ${hole.primaryBlocker.sourceFrame[0] || "(anonymous)"} ` +
-                        `${hole.primaryBlocker.sourceFrame[1]}:${hole.primaryBlocker.sourceFrame[2]}`);
+        // Detail section — only shows info NOT already in the Quick Reference table:
+        // owner chains, environment tags, secondary blockers, and stack frames.
+        const holesWithDetail = report.holes.filter((h) => h.renderedBy.length > 0 || h.environments.length > 0 || h.blockers.length > 1 || h.unknownSuspenders);
+        if (holesWithDetail.length > 0) {
+            lines.push("## Detail");
+            for (const hole of holesWithDetail) {
+                const name = hole.name ?? "(unnamed)";
+                lines.push(`  ${name}`);
+                if (hole.renderedBy.length > 0) {
+                    lines.push(`    rendered by: ${hole.renderedBy.map((o) => {
+                        const env = o.env ? ` [${o.env}]` : "";
+                        const src = o.source ? ` at ${o.source[0]}:${o.source[1]}` : "";
+                        return `${o.name}${env}${src}`;
+                    }).join(" > ")}`);
                 }
-                lines.push(`      next step: ${hole.recommendation}`);
-            }
-            if (hole.blockers.length > 0) {
-                lines.push("    blocked by:");
-                for (const blocker of hole.blockers) {
-                    const dur = hole.primaryBlocker?.name === blocker.name ? " [primary]" : "";
-                    const env = blocker.env ? ` [${blocker.env}]` : "";
-                    const owner = blocker.ownerName ? ` initiated by <${blocker.ownerName}>` : "";
-                    const awaiter = blocker.awaiterName ? ` awaited in <${blocker.awaiterName}>` : "";
-                    lines.push(`      - ${blocker.name}: ${blocker.description || "(no description)"}${env}${dur}${owner}${awaiter}`);
-                    if (blocker.ownerFrame) {
-                        const [fn, file, line] = blocker.ownerFrame;
-                        lines.push(`          owner: ${fn || "(anonymous)"} ${file}:${line}`);
-                    }
-                    if (blocker.awaiterFrame && !blocker.ownerFrame) {
-                        const [fn, file, line] = blocker.awaiterFrame;
-                        lines.push(`          awaiter: ${fn || "(anonymous)"} ${file}:${line}`);
-                    }
-                    if (blocker.ownerFrame && hole.primaryBlocker?.name === blocker.name) {
-                        for (const [fn, file, line] of [blocker.ownerFrame].slice(0, 3)) {
-                            lines.push(`          at ${fn || "(anonymous)"} ${file}:${line}`);
+                if (hole.environments.length > 0)
+                    lines.push(`    environments: ${hole.environments.join(", ")}`);
+                if (hole.blockers.length > 1) {
+                    lines.push("    secondary blockers:");
+                    for (const blocker of hole.blockers.slice(1)) {
+                        const env = blocker.env ? ` [${blocker.env}]` : "";
+                        const owner = blocker.ownerName ? ` initiated by <${blocker.ownerName}>` : "";
+                        const awaiter = blocker.awaiterName ? ` awaited in <${blocker.awaiterName}>` : "";
+                        lines.push(`      - ${blocker.name}: ${blocker.description || "(no description)"}${env}${owner}${awaiter}`);
+                        if (blocker.ownerFrame) {
+                            const [fn, file, line] = blocker.ownerFrame;
+                            lines.push(`          owner: ${fn || "(anonymous)"} ${file}:${line}`);
+                        }
+                        else if (blocker.awaiterFrame) {
+                            const [fn, file, line] = blocker.awaiterFrame;
+                            lines.push(`          awaiter: ${fn || "(anonymous)"} ${file}:${line}`);
                         }
                     }
                 }
+                if (hole.unknownSuspenders) {
+                    lines.push(`    suspenders unknown: ${hole.unknownSuspenders}`);
+                }
             }
-            else if (hole.unknownSuspenders) {
-                lines.push(`    suspenders unknown: ${hole.unknownSuspenders}`);
-            }
+            lines.push("");
         }
-        lines.push("");
     }
     if (report.statics.length > 0) {
         lines.push("## Static (pre-rendered in shell)");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/next-browser",
-  "version": "0.1.8",
+  "version": "0.3.0",
   "description": "Headed Playwright browser with React DevTools pre-loaded",
   "license": "MIT",
   "repository": {
@@ -21,20 +21,23 @@
   "bin": {
     "next-browser": "./dist/cli.js"
   },
-  "scripts": {
-    "start": "node src/cli.ts",
-    "typecheck": "tsc",
-    "build": "tsc -p tsconfig.build.json",
-    "prepack": "pnpm build"
-  },
   "dependencies": {
     "@next/playwright": "16.2.0-canary.80",
     "playwright": "^1.50.0",
     "source-map-js": "^1.2.1"
   },
-  "packageManager": "pnpm@10.29.2",
   "devDependencies": {
+    "@changesets/changelog-github": "^0.6.0",
+    "@changesets/cli": "^2.30.0",
     "@types/node": "^22.0.0",
     "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "start": "node src/cli.ts",
+    "typecheck": "tsc",
+    "build": "tsc -p tsconfig.build.json",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish"
   }
-}
+}

package/dist/cloud-client.js

@@ -1,72 +0,0 @@
-import { connect as netConnect } from "node:net";
-import { readFileSync, existsSync, rmSync } from "node:fs";
-import { spawn } from "node:child_process";
-import { setTimeout as sleep } from "node:timers/promises";
-import { fileURLToPath } from "node:url";
-import { cloudSocketPath, cloudPidFile } from "./cloud-paths.js";
-export async function cloudSend(action, payload = {}) {
-    await ensureCloudDaemon();
-    const socket = await connect();
-    const id = String(Date.now());
-    socket.write(JSON.stringify({ id, action, ...payload }) + "\n");
-    const line = await readLine(socket);
-    socket.end();
-    return JSON.parse(line);
-}
-async function ensureCloudDaemon() {
-    if (daemonAlive() && (await connect().then(ok, no)))
-        return;
-    const ext = import.meta.url.endsWith(".ts") ? ".ts" : ".js";
-    const daemon = fileURLToPath(new URL(`./cloud-daemon${ext}`, import.meta.url));
-    const child = spawn(process.execPath, [daemon], {
-        detached: true,
-        stdio: "ignore",
-    });
-    child.unref();
-    for (let i = 0; i < 50; i++) {
-        if (await connect().then(ok, no))
-            return;
-        await sleep(100);
-    }
-    throw new Error(`cloud daemon failed to start (${cloudSocketPath})`);
-}
-function daemonAlive() {
-    if (!existsSync(cloudPidFile))
-        return false;
-    const pid = Number(readFileSync(cloudPidFile, "utf-8"));
-    try {
-        process.kill(pid, 0);
-        return true;
-    }
-    catch {
-        rmSync(cloudPidFile, { force: true });
-        rmSync(cloudSocketPath, { force: true });
-        return false;
-    }
-}
-function connect() {
-    return new Promise((resolve, reject) => {
-        const socket = netConnect(cloudSocketPath);
-        socket.once("connect", () => resolve(socket));
-        socket.once("error", reject);
-    });
-}
-function readLine(socket) {
-    return new Promise((resolve, reject) => {
-        let buffer = "";
-        socket.on("data", (chunk) => {
-            buffer += chunk;
-            const newline = buffer.indexOf("\n");
-            if (newline >= 0)
-                resolve(buffer.slice(0, newline));
-        });
-        socket.on("error", reject);
-    });
-}
-function ok(s) {
-    s.destroy();
-    return true;
-}
-function no() {
-    return false;
-}

package/dist/cloud-daemon.js

@@ -1,87 +0,0 @@
-import { createServer } from "node:net";
-import { mkdirSync, writeFileSync, rmSync } from "node:fs";
-import * as cloud from "./cloud.js";
-import { cloudSocketDir, cloudSocketPath, cloudPidFile } from "./cloud-paths.js";
-mkdirSync(cloudSocketDir, { recursive: true, mode: 0o700 });
-rmSync(cloudSocketPath, { force: true });
-rmSync(cloudPidFile, { force: true });
-writeFileSync(cloudPidFile, String(process.pid));
-const server = createServer((socket) => {
-    let buffer = "";
-    socket.on("data", (chunk) => {
-        buffer += chunk;
-        let newline;
-        while ((newline = buffer.indexOf("\n")) >= 0) {
-            const line = buffer.slice(0, newline);
-            buffer = buffer.slice(newline + 1);
-            if (line)
-                dispatch(line, socket);
-        }
-    });
-    socket.on("error", () => { });
-});
-server.listen(cloudSocketPath);
-process.on("SIGINT", shutdown);
-process.on("SIGTERM", shutdown);
-process.on("exit", cleanup);
-async function dispatch(line, socket) {
-    const cmd = JSON.parse(line);
-    const result = await run(cmd).catch((err) => ({
-        ok: false,
-        error: err.message,
-    }));
-    socket.write(JSON.stringify({ id: cmd.id, ...result }) + "\n");
-    if (cmd.action === "destroy")
-        setImmediate(shutdown);
-}
-async function run(cmd) {
-    if (cmd.action === "create") {
-        const data = await cloud.create();
-        return { ok: true, data };
-    }
-    if (cmd.action === "exec") {
-        if (!cmd.command)
-            return { ok: false, error: "missing command" };
-        const result = await cloud.exec(cmd.command);
-        const output = [
-            result.stdout,
-            result.stderr ? `stderr:\n${result.stderr}` : "",
-            result.exitCode !== 0 ? `exit code: ${result.exitCode}` : "",
-        ]
-            .filter(Boolean)
-            .join("\n");
-        if (result.exitCode === 0)
-            return { ok: true, data: output };
-        return { ok: false, error: output || `exit code: ${result.exitCode}` };
-    }
-    if (cmd.action === "status") {
-        const data = await cloud.status();
-        return { ok: true, data };
-    }
-    if (cmd.action === "upload") {
-        if (!cmd.localPath || !cmd.remotePath)
-            return { ok: false, error: "missing localPath or remotePath" };
-        const data = await cloud.upload(cmd.localPath, cmd.remotePath);
-        return { ok: true, data };
-    }
-    if (cmd.action === "destroy") {
-        const data = await cloud.destroy();
-        return { ok: true, data };
-    }
-    return { ok: false, error: `unknown action: ${cmd.action}` };
-}
-async function shutdown() {
-    try {
-        await cloud.destroy();
-    }
-    catch {
-        // best effort
-    }
-    server.close();
-    cleanup();
-    process.exit(0);
-}
-function cleanup() {
-    rmSync(cloudSocketPath, { force: true });
-    rmSync(cloudPidFile, { force: true });
-}

package/dist/cloud-paths.js

@@ -1,7 +0,0 @@
-import { homedir } from "node:os";
-import { join } from "node:path";
-const dir = join(homedir(), ".next-browser");
-export const cloudSocketDir = dir;
-export const cloudSocketPath = join(dir, "cloud.sock");
-export const cloudPidFile = join(dir, "cloud.pid");
-export const cloudStateFile = join(dir, "cloud.json");