@qwertybit/pr-preview 0.1.0

package/dist/cli/index.js

@@ -0,0 +1,2251 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import { Command } from "commander";
+
+// src/cli/commands/init.ts
+import { existsSync } from "fs";
+import { readFile, writeFile, appendFile } from "fs/promises";
+import path from "path";
+
+// src/cli/ui/logger.ts
+import pc from "picocolors";
+import ora from "ora";
+var log = {
+  info(msg) {
+    console.log(`${pc.cyan("\u25CF")} ${msg}`);
+  },
+  success(msg) {
+    console.log(`${pc.green("\u2714")} ${msg}`);
+  },
+  warn(msg) {
+    console.log(`${pc.yellow("\u25B2")} ${msg}`);
+  },
+  error(msg) {
+    console.error(`${pc.red("\u2716")} ${msg}`);
+  },
+  step(msg) {
+    console.log(pc.dim(`  ${msg}`));
+  },
+  spinner(text) {
+    return ora({ text, color: "cyan" }).start();
+  }
+};
+
+// src/cli/commands/init.ts
+var CONFIG_TEMPLATE = `/** @type {import('pr-preview').Config} */
+export default {
+  // \u2500\u2500 App under preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // Command that starts your dev server. $PORT is set for you.
+  devCommand: "npm run dev",
+  // Where the app answers once ready. {port} is replaced with the allocated port.
+  url: "http://localhost:{port}",
+  // Frontend directory relative to the repo root (monorepos).
+  cwd: ".",
+  // How long to wait for the dev server (ms).
+  readyTimeout: 60000,
+
+  // \u2500\u2500 Run options (set here once instead of passing CLI flags every time) \u2500
+  // Use an app YOU already run instead of a managed dev server. Set this for
+  // apps that need real env/backends.
+  // externalUrl: "http://localhost:3000",
+  // Override PR-base ("before") detection, e.g. "origin/main".
+  // baseBranch: undefined,
+  // Reuse the base worktree across runs (skips reinstall).
+  // keepWorktree: false,
+  // 2 (default) = before/after comparison; 1 = a single standalone clip.
+  // (run --single forces 1.)
+  passes: 2,
+
+  // \u2500\u2500 Output \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  output: ".pr-preview/output",
+  format: "mp4", // "mp4" | "gif" | "both"
+  // Start-of-pass reset choice default: true offers "reset to a clean app",
+  // false offers "keep my session". The nudge only shows when there's state.
+  resetStorage: true,
+  viewport: { width: 1920, height: 1080 },
+
+  // \u2500\u2500 Permissions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // Grant browser permissions so apps that ask for them work (others stay
+  // denied silently \u2014 no native prompt blocks the run).
+  // permissions: ["geolocation", "clipboard-read", "clipboard-write"],
+  // geolocation: { latitude: 51.5074, longitude: -0.1278 }, // fixed = deterministic
+};
+`;
+var GITIGNORE_BLOCK = `
+# pr-preview (worktrees, recordings, output)
+.pr-preview/
+`;
+async function initCommand(root) {
+  const configPath = path.join(root, "pr-preview.config.js");
+  if (existsSync(configPath) || existsSync(path.join(root, "pr-preview.config.ts")) || existsSync(path.join(root, "pr-preview.config.json"))) {
+    log.warn("A pr-preview config already exists \u2014 leaving it untouched.");
+  } else {
+    await writeFile(configPath, CONFIG_TEMPLATE);
+    log.success(`Created ${path.basename(configPath)}`);
+  }
+  const gitignorePath = path.join(root, ".gitignore");
+  const current = existsSync(gitignorePath) ? await readFile(gitignorePath, "utf8") : "";
+  if (!current.includes(".pr-preview/")) {
+    await appendFile(gitignorePath, GITIGNORE_BLOCK);
+    log.success("Added .pr-preview/ to .gitignore");
+  }
+  log.info("Edit the config to match your dev command, then run `pr-preview run` on a PR branch.");
+}
+
+// src/cli/commands/record.ts
+import path11 from "path";
+import pc2 from "picocolors";
+
+// src/config/load.ts
+import { existsSync as existsSync2 } from "fs";
+import { readFile as readFile2 } from "fs/promises";
+import path2 from "path";
+import { createJiti } from "jiti";
+
+// src/config/schema.ts
+import { z } from "zod";
+var configSchema = z.object({
+  /** Command that starts the project's dev server, e.g. "npm run dev". */
+  devCommand: z.string().min(1),
+  /** URL the app is reachable on once ready. Supports {port} templating. */
+  url: z.string().min(1),
+  /** Working directory of the frontend relative to the repo root (monorepos). */
+  cwd: z.string().default("."),
+  /** ms to wait for the dev server to answer. */
+  readyTimeout: z.number().int().positive().default(6e4),
+  /** Override PR base detection (the "before" ref). e.g. "origin/main". */
+  baseBranch: z.string().optional(),
+  /**
+   * Run against an app YOU already have running, instead of letting pr-preview
+   * start a dev server in a worktree. Set this (e.g. "http://localhost:3000")
+   * for apps that need real env/backends. Equivalent to `run --url`; the CLI
+   * flag overrides it. When set, devCommand/url are ignored for `run`.
+   */
+  externalUrl: z.string().optional(),
+  /** Reuse the base worktree across runs (skips reinstall). `--keep-worktree`. */
+  keepWorktree: z.boolean().default(false),
+  /** Dependency install behavior in the base worktree. */
+  install: z.enum(["auto", "always", "never"]).default("auto"),
+  /** Output directory for the clips, relative to repo root. */
+  output: z.string().default(".pr-preview/output"),
+  /**
+   * Output format. "mp4" (default) is small + HQ and uploads straight into a
+   * GitHub PR description; needs ffmpeg on PATH (falls back to gif if
+   * missing). "both" produces the two side by side.
+   */
+  format: z.enum(["mp4", "gif", "both"]).default("mp4"),
+  /**
+   * How many recordings the session does: 2 (default) = before/after on the
+   * base branch and your branch; 1 = a single standalone clip of the current
+   * app (no comparison, no base worktree). `run --single` forces 1.
+   */
+  passes: z.union([z.literal(1), z.literal(2)]).default(2),
+  gif: z.object({
+    width: z.number().int().positive().default(900),
+    // 24fps keeps the synthetic cursor's motion fluid in the clip.
+    fps: z.number().positive().max(60).default(24),
+    quality: z.enum(["high", "max"]).default("high"),
+    maxColors: z.number().int().min(2).max(256).default(256)
+  }).default({}),
+  /**
+   * Start-of-pass reset choice default: true (default) offers "reset" (clear
+   * cookies + localStorage + sessionStorage and reload) before recording;
+   * false offers "keep my session". The nudge only appears when there's state
+   * to reset.
+   */
+  resetStorage: z.boolean().default(true),
+  /** Logical app resolution — Full HD by default. The harness scales the
+   *  iframe down to fit the window, keeping this resolution and ratio. */
+  viewport: z.object({
+    width: z.number().int().positive().default(1920),
+    height: z.number().int().positive().default(1080)
+  }).default({}),
+  /** Strip X-Frame-Options / frame-ancestors so any app loads in the iframe. */
+  headerStrip: z.boolean().default(true),
+  /**
+   * Browser permissions to GRANT up front (Playwright names) so a native
+   * prompt never blocks the run. Defaults to allow-all (the broadly-supported
+   * set); unsupported names for your Chrome are skipped gracefully. Set your
+   * own narrower list to override, or [] to deny everything.
+   */
+  permissions: z.array(z.string()).default([
+    "geolocation",
+    "notifications",
+    "camera",
+    "microphone",
+    "clipboard-read",
+    "clipboard-write",
+    "midi",
+    "background-sync",
+    "accelerometer",
+    "gyroscope",
+    "magnetometer",
+    "payment-handler",
+    "storage-access"
+  ]),
+  /**
+   * Fixed geolocation for the session (implies the "geolocation" permission),
+   * so location-based apps render real, deterministic results in both clips.
+   */
+  geolocation: z.object({
+    latitude: z.number(),
+    longitude: z.number(),
+    accuracy: z.number().nonnegative().optional()
+  }).optional()
+});
+function resolveUrl(config, port) {
+  return config.url.replace("{port}", String(port));
+}
+
+// src/config/load.ts
+var CONFIG_FILES = [
+  "pr-preview.config.ts",
+  "pr-preview.config.mts",
+  "pr-preview.config.js",
+  "pr-preview.config.mjs",
+  "pr-preview.config.json"
+];
+var ConfigError = class extends Error {
+};
+async function loadConfig(root) {
+  const file = CONFIG_FILES.map((f) => path2.join(root, f)).find(existsSync2);
+  if (!file) {
+    throw new ConfigError(
+      `No pr-preview config found in ${root}. Run \`pr-preview init\` to create one.`
+    );
+  }
+  let raw;
+  if (file.endsWith(".json")) {
+    raw = JSON.parse(await readFile2(file, "utf8"));
+  } else {
+    const jiti = createJiti(import.meta.url, { interopDefault: true });
+    raw = await jiti.import(file, { default: true });
+  }
+  const parsed = configSchema.safeParse(raw);
+  if (!parsed.success) {
+    const issues = parsed.error.issues.map((i) => `  ${i.path.join(".") || "(root)"}: ${i.message}`).join("\n");
+    throw new ConfigError(`Invalid config in ${path2.basename(file)}:
+${issues}`);
+  }
+  return { config: parsed.data, file };
+}
+
+// src/session/bootstrap.ts
+import path9 from "path";
+
+// src/server/ports.ts
+import getPort, { portNumbers } from "get-port";
+async function allocatePorts() {
+  const pinned = process.env.PR_PREVIEW_PORTS?.split(",").map(Number);
+  if (pinned?.length === 3 && pinned.every((p) => Number.isInteger(p) && p > 0)) {
+    return { harness: pinned[0], beforeApp: pinned[1], afterApp: pinned[2] };
+  }
+  const harness = await getPort({ port: portNumbers(4310, 4400) });
+  const beforeApp = await getPort({ port: portNumbers(4401, 4500), exclude: [harness] });
+  const afterApp = await getPort({
+    port: portNumbers(4501, 4600),
+    exclude: [harness, beforeApp]
+  });
+  return { harness, beforeApp, afterApp };
+}
+
+// src/server/devServer.ts
+import { spawn } from "child_process";
+import { appendFileSync, mkdirSync } from "fs";
+import path3 from "path";
+import treeKill from "tree-kill";
+var DevServerError = class extends Error {
+};
+async function startDevServer(opts) {
+  if (opts.logFile) mkdirSync(path3.dirname(opts.logFile), { recursive: true });
+  const child = spawn(opts.command, {
+    cwd: opts.cwd,
+    shell: true,
+    stdio: ["ignore", "pipe", "pipe"],
+    env: { ...process.env, PORT: String(opts.port), BROWSER: "none", FORCE_COLOR: "0" }
+  });
+  let logTail = "";
+  const onChunk = (chunk) => {
+    logTail = (logTail + chunk.toString()).slice(-4e3);
+    if (opts.logFile) appendFileSync(opts.logFile, chunk);
+  };
+  child.stdout.on("data", onChunk);
+  child.stderr.on("data", onChunk);
+  let exited = false;
+  let exitCode = null;
+  child.on("exit", (code) => {
+    exited = true;
+    exitCode = code;
+  });
+  const deadline = Date.now() + opts.readyTimeout;
+  while (Date.now() < deadline) {
+    if (exited) {
+      throw new DevServerError(
+        `Dev server exited early (code ${exitCode}). Last output:
+${logTail}`
+      );
+    }
+    try {
+      const res = await fetch(opts.url, { redirect: "manual" });
+      if (res.status < 500) {
+        return { url: opts.url, stop: () => killTree(child) };
+      }
+    } catch {
+    }
+    await sleep(400);
+  }
+  await killTree(child);
+  throw new DevServerError(
+    `Dev server did not answer at ${opts.url} within ${opts.readyTimeout}ms. Last output:
+${logTail}`
+  );
+}
+function killTree(child) {
+  return new Promise((resolve) => {
+    if (child.pid == null || child.exitCode !== null) return resolve();
+    treeKill(child.pid, "SIGTERM", () => {
+      setTimeout(() => {
+        if (child.exitCode === null && child.pid != null) {
+          treeKill(child.pid, "SIGKILL", () => resolve());
+        } else {
+          resolve();
+        }
+      }, 1500);
+    });
+  });
+}
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+// src/server/harnessServer.ts
+import http from "http";
+import { readFile as readFile3 } from "fs/promises";
+import { existsSync as existsSync3 } from "fs";
+import path4 from "path";
+import { fileURLToPath } from "url";
+import { WebSocketServer } from "ws";
+
+// src/ipc/protocol.ts
+function serialize(msg) {
+  return JSON.stringify(msg);
+}
+function parseClientMessage(raw) {
+  try {
+    const msg = JSON.parse(raw);
+    if (typeof msg === "object" && msg !== null && typeof msg.type === "string") {
+      return msg;
+    }
+  } catch {
+  }
+  return null;
+}
+
+// src/ipc/bus.ts
+var Bus = class {
+  sockets = /* @__PURE__ */ new Set();
+  handlers = /* @__PURE__ */ new Set();
+  /** Replayed to late-joining sidebars so they can render current state. */
+  helloFactory = null;
+  attach(wss) {
+    wss.on("connection", (ws) => {
+      this.sockets.add(ws);
+      if (this.helloFactory) ws.send(serialize(this.helloFactory()));
+      ws.on("message", (data) => {
+        const msg = parseClientMessage(data.toString());
+        if (msg) for (const h of this.handlers) h(msg);
+      });
+      ws.on("close", () => this.sockets.delete(ws));
+      ws.on("error", () => this.sockets.delete(ws));
+    });
+  }
+  onHello(factory) {
+    this.helloFactory = factory;
+  }
+  send(msg) {
+    const data = serialize(msg);
+    for (const ws of this.sockets) {
+      if (ws.readyState === ws.OPEN) ws.send(data);
+    }
+  }
+  onMessage(handler) {
+    this.handlers.add(handler);
+    return () => this.handlers.delete(handler);
+  }
+  /** Resolve once a message of the given type arrives. */
+  waitFor(type) {
+    return new Promise((resolve) => {
+      const off = this.onMessage((msg) => {
+        if (msg.type === type) {
+          off();
+          resolve(msg);
+        }
+      });
+    });
+  }
+  /** Resolve with whichever of the given message types arrives first. */
+  waitForAny(...types) {
+    return new Promise((resolve) => {
+      const off = this.onMessage((msg) => {
+        if (types.includes(msg.type)) {
+          off();
+          resolve(msg);
+        }
+      });
+    });
+  }
+};
+
+// src/server/harnessServer.ts
+var MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".json": "application/json",
+  ".map": "application/json"
+};
+function harnessDistDir() {
+  const here = path4.dirname(fileURLToPath(import.meta.url));
+  const candidates = [
+    path4.resolve(here, "../harness"),
+    path4.resolve(here, "../../dist/harness")
+  ];
+  const found = candidates.find((c) => existsSync3(path4.join(c, "index.html")));
+  if (!found) {
+    throw new Error(
+      `Harness UI build not found (looked in: ${candidates.join(", ")}). Run \`npm run build\` first.`
+    );
+  }
+  return found;
+}
+async function startHarnessServer(opts) {
+  const dist = harnessDistDir();
+  let appUrl = opts.appUrl;
+  const server = http.createServer(async (req, res) => {
+    const urlPath = (req.url ?? "/").split("?")[0];
+    if (urlPath === "/runtime.json") {
+      res.writeHead(200, { "content-type": "application/json", "cache-control": "no-store" });
+      res.end(JSON.stringify({ appUrl, mode: opts.mode, viewport: opts.viewport }));
+      return;
+    }
+    const rel = urlPath === "/" ? "index.html" : urlPath.slice(1);
+    const file = path4.join(dist, path4.normalize(rel));
+    if (!file.startsWith(dist) || !existsSync3(file)) {
+      res.writeHead(200, { "content-type": MIME[".html"] });
+      res.end(await readFile3(path4.join(dist, "index.html")));
+      return;
+    }
+    res.writeHead(200, {
+      "content-type": MIME[path4.extname(file)] ?? "application/octet-stream",
+      "cache-control": "no-store"
+    });
+    res.end(await readFile3(file));
+  });
+  const wss = new WebSocketServer({ server, path: "/ws" });
+  const bus = new Bus();
+  bus.attach(wss);
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(opts.port, "127.0.0.1", resolve);
+  });
+  return {
+    url: `http://127.0.0.1:${opts.port}`,
+    bus,
+    setAppUrl(url) {
+      appUrl = url;
+    },
+    close: () => new Promise((resolve) => {
+      wss.close();
+      for (const ws of wss.clients) ws.terminate();
+      server.close(() => resolve());
+    })
+  };
+}
+
+// src/browser/launch.ts
+import { chromium } from "playwright";
+
+// src/browser/headerStrip.ts
+async function installHeaderStrip(context, targetOrigins) {
+  await context.route(
+    (url) => targetOrigins.includes(url.origin),
+    async (route) => {
+      const type = route.request().resourceType();
+      if (type !== "document") return route.continue();
+      const response = await route.fetch();
+      const headers = { ...response.headers() };
+      delete headers["x-frame-options"];
+      const csp = headers["content-security-policy"];
+      if (csp) {
+        const stripped = csp.split(";").filter((d) => !/^\s*frame-ancestors/i.test(d)).join(";").trim();
+        if (stripped) headers["content-security-policy"] = stripped;
+        else delete headers["content-security-policy"];
+      }
+      await route.fulfill({ response, headers });
+    }
+  );
+}
+
+// src/browser/recorderInject.ts
+import { readFile as readFile4 } from "fs/promises";
+import { existsSync as existsSync4 } from "fs";
+import path5 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var recorderSource = null;
+async function loadRecorderSource() {
+  if (recorderSource) return recorderSource;
+  const here = path5.dirname(fileURLToPath2(import.meta.url));
+  const candidates = [
+    path5.resolve(here, "../inpage/recorder.global.js"),
+    // dist/cli → dist/inpage
+    path5.resolve(here, "../../dist/inpage/recorder.global.js"),
+    // running from src (tests)
+    path5.resolve(here, "../../../dist/inpage/recorder.global.js")
+  ];
+  const found = candidates.find(existsSync4);
+  if (!found) {
+    throw new Error(
+      `In-page recorder bundle not found (looked in: ${candidates.join(", ")}). Run \`npm run build\` first.`
+    );
+  }
+  recorderSource = await readFile4(found, "utf8");
+  return recorderSource;
+}
+async function installRecorderBinding(page, targetOrigins, onEvent) {
+  await page.exposeBinding("__prPreviewEmit", (source, json) => {
+    try {
+      if (!targetOrigins.includes(new URL(source.frame.url()).origin)) return;
+    } catch {
+      return;
+    }
+    try {
+      onEvent(JSON.parse(json));
+    } catch {
+    }
+  });
+  await page.addInitScript({ content: await loadRecorderSource() });
+}
+
+// src/browser/launch.ts
+var SIDEBAR_WIDTH = 320;
+var BANNER_HEIGHT = 44 + 36;
+var LNA_DISABLE = [
+  "LocalNetworkAccessChecks",
+  "BlockInsecurePrivateNetworkRequests",
+  "PrivateNetworkAccessSendPreflights",
+  "PrivateNetworkAccessForNavigations"
+];
+var cachedBaseDisabledFeatures = null;
+async function playwrightDisabledFeatures() {
+  if (cachedBaseDisabledFeatures !== null) return cachedBaseDisabledFeatures;
+  cachedBaseDisabledFeatures = "";
+  try {
+    const probe = await chromium.launchServer({ headless: true });
+    const arg = probe.process().spawnargs.find((a) => a.startsWith("--disable-features="));
+    cachedBaseDisabledFeatures = arg ? arg.slice("--disable-features=".length) : "";
+    await probe.close();
+  } catch {
+  }
+  return cachedBaseDisabledFeatures;
+}
+async function grantPermissionsResilient(context, perms) {
+  if (perms.length === 0) return;
+  try {
+    await context.grantPermissions(perms);
+  } catch {
+    const good = [];
+    for (const p of perms) {
+      try {
+        await context.grantPermissions([...good, p]);
+        good.push(p);
+      } catch {
+      }
+    }
+  }
+}
+async function launchSession(opts) {
+  const headless = process.env.PR_PREVIEW_HEADLESS === "1";
+  const windowChrome = headless ? 0 : 88;
+  const baseDisabled = await playwrightDisabledFeatures();
+  const args = [
+    "--hide-crash-restore-bubble",
+    // Auto-accept camera/mic prompts with a fake device so getUserMedia
+    // never blocks the run.
+    "--use-fake-ui-for-media-stream",
+    "--use-fake-device-for-media-stream",
+    // Reduce the automation fingerprint (hides navigator.webdriver) so OAuth
+    // providers like Google are less likely to refuse sign-in with "this
+    // browser may not be secure". Not a guarantee — they're aggressive.
+    "--disable-blink-features=AutomationControlled",
+    `--window-size=${opts.appViewport.width + SIDEBAR_WIDTH},${opts.appViewport.height + BANNER_HEIGHT + windowChrome}`
+  ];
+  if (baseDisabled) args.push(`--disable-features=${[baseDisabled, ...LNA_DISABLE].join(",")}`);
+  const browser = await chromium.launch({
+    headless,
+    args,
+    // Drop the "controlled by automation" flag — another OAuth-detection signal.
+    ignoreDefaultArgs: ["--enable-automation"]
+  });
+  const context = await browser.newContext({
+    viewport: null
+    // follow the real window — user can resize freely
+  });
+  const permissions = new Set(opts.permissions ?? []);
+  if (opts.geolocation) permissions.add("geolocation");
+  await grantPermissionsResilient(context, [...permissions]);
+  const geolocation = opts.geolocation ?? (permissions.has("geolocation") ? { latitude: 0, longitude: 0 } : void 0);
+  if (geolocation) await context.setGeolocation(geolocation).catch(() => {
+  });
+  if (opts.headerStrip) await installHeaderStrip(context, opts.targetOrigins);
+  const page = await context.newPage();
+  context.on("dialog", (dialog) => {
+    void dialog.accept(dialog.type() === "prompt" ? dialog.defaultValue() : void 0).catch(() => {
+    });
+  });
+  await installRecorderBinding(page, opts.targetOrigins, opts.onRawEvent);
+  await page.goto(opts.harnessUrl, { waitUntil: "domcontentloaded" });
+  return {
+    browser,
+    context,
+    page,
+    close: async () => {
+      await context.close().catch(() => {
+      });
+      await browser.close().catch(() => {
+      });
+    }
+  };
+}
+
+// src/session/session.ts
+import sharp4 from "sharp";
+
+// src/recorder/steps.ts
+var StepBuilder = class {
+  steps = [];
+  counter = 0;
+  pendingFill = null;
+  listeners = /* @__PURE__ */ new Set();
+  onChange(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify(change) {
+    for (const l of this.listeners) l(change);
+  }
+  nextId() {
+    return `stp_${String(++this.counter).padStart(2, "0")}`;
+  }
+  getSteps() {
+    this.flushFill();
+    return [...this.steps];
+  }
+  /** Replace all steps (journey reuse / re-record truncation). */
+  setSteps(steps) {
+    this.pendingFill = null;
+    this.steps = [...steps];
+    this.counter = steps.length;
+    this.notify({ kind: "reset" });
+  }
+  removeStep(id) {
+    const i = this.steps.findIndex((s) => s.id === id);
+    if (i >= 0) {
+      this.steps.splice(i, 1);
+      this.notify({ kind: "removed", stepId: id });
+    }
+  }
+  /** Drop the given step and everything after it (re-record from there). */
+  truncateFrom(id) {
+    this.flushFill();
+    const i = this.steps.findIndex((s) => s.id === id);
+    if (i >= 0) {
+      this.steps = this.steps.slice(0, i);
+      this.notify({ kind: "reset" });
+    }
+    return [...this.steps];
+  }
+  setThumbnail(id, thumbnail) {
+    const step = this.steps.find((s) => s.id === id);
+    if (step) {
+      step.thumbnail = thumbnail;
+      this.notify({ kind: "updated", step });
+    }
+    return step;
+  }
+  handle(event) {
+    switch (event.kind) {
+      case "input": {
+        const sameField = this.pendingFill && selectorsOverlap(this.pendingFill.selectors ?? [], event.selectors);
+        if (sameField && this.pendingFill) {
+          this.pendingFill.value = event.value;
+          this.pendingFill.timestamp = event.ts;
+          this.notify({ kind: "updated", step: this.pendingFill });
+        } else {
+          this.flushFill();
+          const prev = this.steps[this.steps.length - 1];
+          if (prev?.type === "click" && selectorsOverlap(prev.selectors ?? [], event.selectors) && event.ts - prev.timestamp < 3e3) {
+            this.steps.pop();
+            this.notify({ kind: "removed", stepId: prev.id });
+          }
+          this.pendingFill = {
+            id: this.nextId(),
+            type: "fill",
+            selectors: event.selectors,
+            value: event.value,
+            coordinates: { xNorm: event.xNorm, yNorm: event.yNorm },
+            frameUrl: event.frameUrl,
+            timestamp: event.ts
+          };
+          this.steps.push(this.pendingFill);
+          this.notify({ kind: "added", step: this.pendingFill });
+        }
+        break;
+      }
+      case "click": {
+        this.flushFill();
+        const step = {
+          id: this.nextId(),
+          type: "click",
+          selectors: event.selectors,
+          coordinates: { xNorm: event.xNorm, yNorm: event.yNorm },
+          frameUrl: event.frameUrl,
+          label: event.text,
+          timestamp: event.ts
+        };
+        this.steps.push(step);
+        this.notify({ kind: "added", step });
+        break;
+      }
+      case "select": {
+        this.flushFill();
+        const step = {
+          id: this.nextId(),
+          type: "select",
+          selectors: event.selectors,
+          value: event.value,
+          coordinates: { xNorm: event.xNorm, yNorm: event.yNorm },
+          frameUrl: event.frameUrl,
+          timestamp: event.ts
+        };
+        this.steps.push(step);
+        this.notify({ kind: "added", step });
+        break;
+      }
+      case "key": {
+        this.flushFill();
+        const step = {
+          id: this.nextId(),
+          type: "press",
+          key: event.key,
+          selectors: event.selectors,
+          frameUrl: event.frameUrl,
+          timestamp: event.ts
+        };
+        this.steps.push(step);
+        this.notify({ kind: "added", step });
+        break;
+      }
+      case "scroll": {
+        this.flushFill();
+        const prev = this.steps[this.steps.length - 1];
+        if (prev?.type === "scroll" && prev.scrollTarget === event.target) {
+          prev.scroll = { xNorm: event.xNorm, yNorm: event.yNorm };
+          prev.timestamp = event.ts;
+          this.notify({ kind: "updated", step: prev });
+        } else {
+          const step = {
+            id: this.nextId(),
+            type: "scroll",
+            scrollTarget: event.target,
+            scroll: { xNorm: event.xNorm, yNorm: event.yNorm },
+            frameUrl: event.frameUrl,
+            timestamp: event.ts
+          };
+          this.steps.push(step);
+          this.notify({ kind: "added", step });
+        }
+        break;
+      }
+      case "navigate": {
+        this.flushFill();
+        const prev = this.steps[this.steps.length - 1];
+        if (prev && (prev.type === "click" || prev.type === "press") && event.ts - prev.timestamp < 800) {
+          prev.causesNavigation = true;
+          this.notify({ kind: "updated", step: prev });
+        } else if (prev?.type === "navigate") {
+          prev.url = event.url;
+          prev.timestamp = event.ts;
+          this.notify({ kind: "updated", step: prev });
+        } else {
+          const step = {
+            id: this.nextId(),
+            type: "navigate",
+            url: event.url,
+            frameUrl: event.frameUrl,
+            timestamp: event.ts
+          };
+          this.steps.push(step);
+          this.notify({ kind: "added", step });
+        }
+        break;
+      }
+    }
+  }
+  flushFill() {
+    this.pendingFill = null;
+  }
+};
+function selectorsOverlap(a, b) {
+  return a.some((s) => b.includes(s));
+}
+
+// src/recorder/types.ts
+function describeStep(step) {
+  switch (step.type) {
+    case "click":
+      return `Click ${step.label ?? firstSelector(step)}`;
+    case "fill":
+      return `Type "${truncate(step.value ?? "", 24)}" into ${firstSelector(step)}`;
+    case "select":
+      return `Select "${truncate(step.value ?? "", 24)}" in ${firstSelector(step)}`;
+    case "press":
+      return `Press ${step.key}`;
+    case "scroll":
+      return `Scroll ${step.scrollTarget === "window" ? "page" : step.scrollTarget ?? "page"}`;
+    case "navigate":
+      return `Go to ${step.url}`;
+    case "wait":
+      return "Wait";
+  }
+}
+function firstSelector(step) {
+  return step.selectors?.[0] ?? "element";
+}
+function truncate(s, n) {
+  return s.length > n ? s.slice(0, n - 1) + "\u2026" : s;
+}
+
+// src/capture/screencast.ts
+async function startScreencast(page, opts = {}) {
+  const cdp = await page.context().newCDPSession(page);
+  const frames = [];
+  let t0 = null;
+  let paused = false;
+  let pauseBeganAbs = null;
+  let removed = 0;
+  let lastAbs = 0;
+  const onFrame = async (event) => {
+    const abs = (event.metadata.timestamp ?? Date.now() / 1e3) * 1e3;
+    lastAbs = abs;
+    if (t0 === null) t0 = abs;
+    if (!paused) {
+      frames.push({ data: Buffer.from(event.data, "base64"), t: abs - t0 - removed });
+    }
+    await cdp.send("Page.screencastFrameAck", { sessionId: event.sessionId }).catch(() => {
+    });
+  };
+  cdp.on("Page.screencastFrame", onFrame);
+  await cdp.send("Page.startScreencast", {
+    format: "jpeg",
+    quality: opts.quality ?? 90,
+    everyNthFrame: opts.everyNthFrame ?? 1
+  });
+  return {
+    frameCount() {
+      return frames.length;
+    },
+    truncate(n) {
+      if (n >= 0 && n < frames.length) frames.length = n;
+    },
+    latest() {
+      return frames.length ? frames[frames.length - 1].data : null;
+    },
+    pause() {
+      if (paused) return;
+      paused = true;
+      pauseBeganAbs = lastAbs;
+    },
+    resume() {
+      if (!paused) return;
+      paused = false;
+      if (pauseBeganAbs !== null) removed += Math.max(0, lastAbs - pauseBeganAbs);
+      pauseBeganAbs = null;
+    },
+    async stop() {
+      await cdp.send("Page.stopScreencast").catch(() => {
+      });
+      cdp.off("Page.screencastFrame", onFrame);
+      await cdp.detach().catch(() => {
+      });
+      return frames;
+    }
+  };
+}
+
+// src/capture/region.ts
+function cssRectToFramePixels(rect, frameSize, pageCssSize) {
+  const scaleX = frameSize.width / pageCssSize.width;
+  const scaleY = frameSize.height / pageCssSize.height;
+  const left = Math.max(0, Math.round(rect.x * scaleX));
+  const top = Math.max(0, Math.round(rect.y * scaleY));
+  return {
+    left,
+    top,
+    width: Math.min(Math.round(rect.width * scaleX), frameSize.width - left),
+    height: Math.min(Math.round(rect.height * scaleY), frameSize.height - top)
+  };
+}
+
+// src/encode/media.ts
+import sharp3 from "sharp";
+
+// src/capture/frames.ts
+function resampleToFps(frames, fps) {
+  if (frames.length === 0) return [];
+  const interval = 1e3 / fps;
+  const duration = frames[frames.length - 1].t;
+  const out = [];
+  let src = 0;
+  for (let t = 0; t <= duration; t += interval) {
+    while (src + 1 < frames.length && frames[src + 1].t <= t) src++;
+    out.push({ data: frames[src].data, t });
+  }
+  return out;
+}
+
+// src/encode/gif.ts
+import { mkdir as mkdir2, writeFile as writeFile3 } from "fs/promises";
+import path8 from "path";
+import sharp2 from "sharp";
+import * as gifencNs from "gifenc";
+
+// src/encode/ffmpeg.ts
+import { execFile, spawn as spawn2 } from "child_process";
+import { mkdtemp, rm, writeFile as writeFile2, mkdir } from "fs/promises";
+import { tmpdir } from "os";
+import path6 from "path";
+var available = null;
+function ffmpegAvailable() {
+  if (available !== null) return Promise.resolve(available);
+  return new Promise((resolve) => {
+    execFile("ffmpeg", ["-version"], (err) => {
+      available = !err;
+      resolve(available);
+    });
+  });
+}
+async function withFrameDir(pngFrames, fn) {
+  const dir = await mkdtemp(path6.join(tmpdir(), "pr-preview-frames-"));
+  try {
+    await Promise.all(
+      pngFrames.map(
+        (buf, i) => writeFile2(path6.join(dir, `frame${String(i).padStart(5, "0")}.png`), buf)
+      )
+    );
+    return await fn(path6.join(dir, "frame%05d.png"));
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+}
+async function encodeWithFfmpeg(pngFrames, fps, outFile) {
+  await withFrameDir(pngFrames, async (pattern) => {
+    await mkdir(path6.dirname(outFile), { recursive: true });
+    const filter = `[0:v]fps=${fps},split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle`;
+    await run("ffmpeg", ["-y", "-framerate", String(fps), "-i", pattern, "-filter_complex", filter, outFile]);
+  });
+}
+async function encodeMp4(pngFrames, fps, outFile) {
+  await withFrameDir(pngFrames, async (pattern) => {
+    await mkdir(path6.dirname(outFile), { recursive: true });
+    await run("ffmpeg", [
+      "-y",
+      "-framerate",
+      String(fps),
+      "-i",
+      pattern,
+      "-c:v",
+      "libx264",
+      "-preset",
+      "slow",
+      "-crf",
+      "19",
+      "-pix_fmt",
+      "yuv420p",
+      "-vf",
+      "scale=trunc(iw/2)*2:trunc(ih/2)*2",
+      "-movflags",
+      "+faststart",
+      outFile
+    ]);
+  });
+}
+function run(cmd, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn2(cmd, args, { stdio: ["ignore", "ignore", "pipe"] });
+    let err = "";
+    child.stderr.on("data", (c) => err = (err + c.toString()).slice(-2e3));
+    child.on("error", reject);
+    child.on(
+      "exit",
+      (code) => code === 0 ? resolve() : reject(new Error(`${cmd} failed (${code}):
+${err}`))
+    );
+  });
+}
+
+// src/encode/label.ts
+import { existsSync as existsSync5, mkdirSync as mkdirSync2, writeFileSync } from "fs";
+import path7 from "path";
+import { tmpdir as tmpdir2 } from "os";
+import { fileURLToPath as fileURLToPath3 } from "url";
+import sharp from "sharp";
+var BLURPLE = "#635BFF";
+var GREEN = "#2DA44E";
+var INK = "#1F2328";
+var MUTED = "#57606A";
+function fontFile() {
+  const here = path7.dirname(fileURLToPath3(import.meta.url));
+  const candidates = [
+    path7.resolve(here, "../../assets/fonts/Inter.ttf"),
+    // dist/encode → dist/../assets? n/a
+    path7.resolve(here, "../assets/fonts/Inter.ttf"),
+    // dist/encode → dist/assets
+    path7.resolve(here, "../../../assets/fonts/Inter.ttf")
+    // src/encode → repo/assets
+  ];
+  return candidates.find(existsSync5) ?? candidates[candidates.length - 1];
+}
+var fontconfigReady = false;
+function ensureFontconfig() {
+  if (fontconfigReady || process.env.FONTCONFIG_FILE) {
+    fontconfigReady = true;
+    return;
+  }
+  try {
+    const dir = path7.join(tmpdir2(), "pr-preview-fontconfig");
+    mkdirSync2(dir, { recursive: true });
+    const conf = path7.join(dir, "fonts.conf");
+    writeFileSync(
+      conf,
+      `<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+  <dir>${path7.dirname(fontFile())}</dir>
+  <cachedir>${path7.join(dir, "cache")}</cachedir>
+</fontconfig>
+`
+    );
+    process.env.FONTCONFIG_FILE = conf;
+  } catch {
+  }
+  fontconfigReady = true;
+}
+function escapeMarkup(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+async function renderLabel(spec) {
+  ensureFontconfig();
+  const accent = spec.pass === "after" ? GREEN : BLURPLE;
+  const branch = escapeMarkup(spec.branch);
+  const base = escapeMarkup(spec.baseBranch);
+  const ts = escapeMarkup(spec.timestamp);
+  const tagSpan = spec.pass === "single" ? `<span foreground="${accent}" weight="700">\u25CF</span>` : `<span foreground="${accent}" weight="700">\u25CF  ${spec.pass === "before" ? "BEFORE" : "AFTER"}</span>`;
+  const context = spec.pass === "single" ? `${ts}` : spec.pass === "before" ? `base branch \xB7 ${ts}` : `vs base ${base} \xB7 ${ts}`;
+  const markup = `${tagSpan}   <span foreground="${INK}" weight="700">${branch}</span>   <span foreground="${MUTED}">${context}</span>`;
+  const pt = Math.round(Math.min(28, Math.max(15, spec.videoWidth * 0.0145)));
+  const text = await sharp({
+    text: { text: markup, fontfile: fontFile(), font: `sans ${pt}`, rgba: true, dpi: 72 }
+  }).png().toBuffer();
+  const tm = await sharp(text).metadata();
+  const tw = tm.width ?? 200;
+  const th = tm.height ?? pt;
+  const padX = Math.round(pt * 0.85);
+  const padY = Math.round(pt * 0.6);
+  const w = tw + padX * 2;
+  const h = th + padY * 2;
+  const r = Math.round(h / 2);
+  const bg = Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+       <rect x="0.5" y="0.5" width="${w - 1}" height="${h - 1}" rx="${r}" ry="${r}"
+             fill="#FFFFFF" fill-opacity="0.94" stroke="#D0D7DE" stroke-opacity="0.9"/>
+     </svg>`
+  );
+  return sharp(bg).composite([{ input: text, top: padY, left: padX }]).png().toBuffer();
+}
+var LOGO_SVG = `<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <defs><linearGradient id="g" x1="6" y1="4" x2="58" y2="60" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#635BFF"/><stop offset="1" stop-color="#4B45C6"/></linearGradient></defs>
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#g)"/>
+  <g transform="rotate(-9 32 19)"><rect x="13" y="13.5" width="38" height="9.5" rx="2.4" fill="#fff"/>
+    <path d="M19 13.5 24 23M27 13.5 32 23M35 13.5 40 23M43 13.5 48 23" stroke="#4B45C6" stroke-width="2.3" stroke-linecap="round"/></g>
+  <rect x="13" y="26" width="38" height="24" rx="4.5" fill="#fff"/>
+  <g stroke="#4B45C6" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M23 32 17.5 38 23 44"/><path d="M41 32 46.5 38 41 44"/><path d="M35.5 30.5 28.5 45.5" stroke="#635BFF"/></g>
+</svg>`;
+async function renderWatermark(videoWidth) {
+  ensureFontconfig();
+  const pt = Math.round(Math.min(22, Math.max(12, videoWidth * 0.0115)));
+  const logoPx = Math.round(pt * 1.7);
+  const logo = await sharp(Buffer.from(LOGO_SVG)).resize(logoPx, logoPx).png().toBuffer();
+  const text = await sharp({
+    text: {
+      text: `<span foreground="${INK}" weight="600">pr-preview</span><span foreground="${MUTED}">.com</span>`,
+      fontfile: fontFile(),
+      font: `sans ${pt}`,
+      rgba: true,
+      dpi: 72
+    }
+  }).png().toBuffer();
+  const tm = await sharp(text).metadata();
+  const tw = tm.width ?? 120;
+  const th = tm.height ?? pt;
+  const gap = Math.round(pt * 0.5);
+  const padX = Math.round(pt * 0.75);
+  const padY = Math.round(pt * 0.5);
+  const h = Math.max(logoPx, th) + padY * 2;
+  const w = padX * 2 + logoPx + gap + tw;
+  const r = Math.round(h / 2);
+  const bg = Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+       <rect x="0.5" y="0.5" width="${w - 1}" height="${h - 1}" rx="${r}" ry="${r}"
+             fill="#FFFFFF" fill-opacity="0.94" stroke="#D0D7DE" stroke-opacity="0.9"/>
+     </svg>`
+  );
+  return sharp(bg).composite([
+    { input: logo, top: Math.round((h - logoPx) / 2), left: padX },
+    { input: text, top: Math.round((h - th) / 2), left: padX + logoPx + gap }
+  ]).png().toBuffer();
+}
+
+// src/encode/gif.ts
+var gifencLib = typeof gifencNs.quantize === "function" ? gifencNs : gifencNs.default;
+var { GIFEncoder, quantize: quantize2, applyPalette } = gifencLib;
+async function buildOverlays(label, outWidth, outHeight) {
+  const inset = Math.round(outWidth * 0.018);
+  const overlays = [];
+  if (label) {
+    const png = await renderLabel({ ...label, videoWidth: outWidth });
+    const m = await sharp2(png).metadata();
+    overlays.push({ input: png, top: outHeight - (m.height ?? 0) - inset, left: inset });
+  }
+  const wm = await renderWatermark(outWidth);
+  const wmMeta = await sharp2(wm).metadata();
+  overlays.push({
+    input: wm,
+    top: outHeight - (wmMeta.height ?? 0) - inset,
+    left: outWidth - (wmMeta.width ?? 0) - inset
+  });
+  return overlays;
+}
+async function encodeGif(rawFrames, opts) {
+  if (rawFrames.length === 0) throw new Error("No frames captured \u2014 nothing to encode");
+  const frames = resampleToFps(rawFrames, opts.fps);
+  const meta = await sharp2(frames[0].data).metadata();
+  const crop = cssRectToFramePixels(
+    opts.cropCss,
+    { width: meta.width, height: meta.height },
+    opts.pageCssSize
+  );
+  const outWidth = Math.min(opts.width, crop.width);
+  const outHeight = Math.round(crop.height / crop.width * outWidth);
+  const overlays = await buildOverlays(opts.label, outWidth, outHeight);
+  const rgbaCache = /* @__PURE__ */ new Map();
+  const decode = async (jpeg) => {
+    const hit = rgbaCache.get(jpeg);
+    if (hit) return hit;
+    let pipe = sharp2(jpeg).extract(crop).resize(outWidth, outHeight);
+    if (overlays.length) pipe = pipe.composite(overlays);
+    const { data } = await pipe.ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+    const rgba = new Uint8ClampedArray(data.buffer, data.byteOffset, data.byteLength);
+    rgbaCache.set(jpeg, rgba);
+    return rgba;
+  };
+  if (opts.quality === "max" && await ffmpegAvailable()) {
+    const pngs = [];
+    for (const f of frames) {
+      let pipe = sharp2(f.data).extract(crop).resize(outWidth, outHeight);
+      if (overlays.length) pipe = pipe.composite(overlays);
+      pngs.push(await pipe.png().toBuffer());
+      opts.onProgress?.("Rendering frames", pngs.length, frames.length);
+    }
+    opts.onProgress?.("Encoding GIF", frames.length, frames.length);
+    await encodeWithFfmpeg(pngs, opts.fps, opts.outFile);
+    return { path: opts.outFile, frameCount: frames.length };
+  }
+  const sampleCount = Math.min(10, frames.length);
+  const sampleStride = Math.max(1, Math.floor(frames.length / sampleCount));
+  const samples = [];
+  for (let i = 0; i < frames.length; i += sampleStride) {
+    samples.push(await decode(frames[i].data));
+  }
+  const combined = new Uint8ClampedArray(samples.reduce((n, s) => n + s.length, 0));
+  let offset = 0;
+  for (const s of samples) {
+    combined.set(s, offset);
+    offset += s.length;
+  }
+  const palette = quantize2(combined, opts.maxColors);
+  const gif = GIFEncoder();
+  const delay = 1e3 / opts.fps;
+  let first = true;
+  let done = 0;
+  for (const frame of frames) {
+    const rgba = await decode(frame.data);
+    const indexed = applyPalette(rgba, palette);
+    gif.writeFrame(indexed, outWidth, outHeight, {
+      palette: first ? palette : void 0,
+      first,
+      delay,
+      repeat: first ? 0 : void 0
+      // loop forever
+    });
+    first = false;
+    opts.onProgress?.("Encoding GIF", ++done, frames.length);
+  }
+  gif.finish();
+  await mkdir2(path8.dirname(opts.outFile), { recursive: true });
+  await writeFile3(opts.outFile, gif.bytes());
+  return { path: opts.outFile, frameCount: frames.length };
+}
+
+// src/encode/media.ts
+async function encodeMedia(rawFrames, opts) {
+  if (rawFrames.length === 0) throw new Error("No frames captured \u2014 nothing to encode");
+  const wantsMp4 = opts.format === "mp4" || opts.format === "both";
+  const haveFfmpeg = await ffmpegAvailable();
+  const doMp4 = wantsMp4 && haveFfmpeg;
+  const doGif = opts.format === "gif" || opts.format === "both" || wantsMp4 && !haveFfmpeg;
+  const paths = [];
+  let frameCount = 0;
+  if (doMp4) {
+    const frames = resampleToFps(rawFrames, opts.fps);
+    frameCount = frames.length;
+    const meta = await sharp3(frames[0].data).metadata();
+    const crop = cssRectToFramePixels(
+      opts.cropCss,
+      { width: meta.width, height: meta.height },
+      opts.pageCssSize
+    );
+    const outWidth = Math.min(opts.width * 2, crop.width);
+    const outHeight = Math.round(crop.height / crop.width * outWidth);
+    const overlays = await buildOverlays(opts.label, outWidth, outHeight);
+    const pngs = [];
+    const cache = /* @__PURE__ */ new Map();
+    for (const f of frames) {
+      let png = cache.get(f.data);
+      if (!png) {
+        let pipe = sharp3(f.data).extract(crop).resize(outWidth, outHeight);
+        if (overlays.length) pipe = pipe.composite(overlays);
+        png = await pipe.png().toBuffer();
+        cache.set(f.data, png);
+      }
+      pngs.push(png);
+      opts.onProgress?.("Rendering frames", pngs.length, frames.length);
+    }
+    const file = `${opts.outBase}.mp4`;
+    opts.onProgress?.("Encoding MP4", frames.length, frames.length);
+    await encodeMp4(pngs, opts.fps, file);
+    paths.push(file);
+  }
+  if (doGif) {
+    const result = await encodeGif(rawFrames, { ...opts, outFile: `${opts.outBase}.gif` });
+    paths.push(result.path);
+    frameCount = result.frameCount;
+  }
+  return { paths, frameCount, fellBackToGif: wantsMp4 && !haveFfmpeg };
+}
+
+// src/browser/frame.ts
+async function getAppFrame(page, targetOrigin, timeoutMs = 15e3) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    const frame = page.frames().find((f) => {
+      try {
+        return new URL(f.url()).origin === targetOrigin;
+      } catch {
+        return false;
+      }
+    });
+    if (frame && !frame.isDetached()) return frame;
+    await page.waitForTimeout(200);
+  }
+  throw new Error(`App iframe (${targetOrigin}) did not appear within ${timeoutMs}ms`);
+}
+async function getAppFrameRect(page) {
+  const box = await page.locator("#app-frame").boundingBox();
+  if (!box) throw new Error("App iframe element (#app-frame) not found in harness page");
+  return box;
+}
+
+// src/session/session.ts
+var Session = class {
+  constructor(bus, config, mode, appUrl) {
+    this.bus = bus;
+    this.config = config;
+    this.mode = mode;
+    this.appUrl = appUrl;
+    this.passInfo.resetStorage = config.resetStorage;
+    bus.onHello(() => ({
+      type: "HELLO",
+      phase: this.phase,
+      steps: this.builder.getSteps().map(toSummary),
+      appUrl: this.appUrl,
+      mode: this.mode,
+      passInfo: this.passInfo
+    }));
+    bus.onMessage((msg) => {
+      if (msg.type === "RELOAD_IFRAME") void this.reloadAppFrame();
+    });
+    this.builder.onChange((change) => {
+      switch (change.kind) {
+        case "added":
+          if (this.recordingFeed) this.frameMark.set(change.step.id, this.recordingFeed.frameCount());
+          bus.send({ type: "STEP_ADDED", step: toSummary(change.step) });
+          this.scheduleThumbnail(change.step);
+          break;
+        case "updated":
+          if (this.recordingFeed) this.frameMark.set(change.step.id, this.recordingFeed.frameCount());
+          bus.send({ type: "STEP_UPDATED", step: toSummary(change.step) });
+          break;
+        case "removed":
+          bus.send({ type: "STEP_REMOVED", stepId: change.stepId });
+          break;
+        case "reset":
+          bus.send({ type: "STEPS_RESET", steps: this.builder.getSteps().map(toSummary) });
+          break;
+      }
+    });
+  }
+  bus;
+  config;
+  mode;
+  appUrl;
+  builder = new StepBuilder();
+  /** Path the journey starts on — captured when recording begins. */
+  startUrl = "/";
+  phase = "idle";
+  page = null;
+  thumbnailQueue = Promise.resolve();
+  /** Full screencast kept alive during recording — its frames ARE the clip,
+   *  and its latest frame drives the sidebar thumbnails. */
+  recordingFeed = null;
+  /** frames.length at the moment each step was recorded — lets a re-record
+   *  truncate the footage at that step. */
+  frameMark = /* @__PURE__ */ new Map();
+  passInfo = {
+    pass: "before",
+    done: { before: false, after: false },
+    resetStorage: true
+  };
+  /** Single-recording session — the clip's caption drops the BEFORE/AFTER pill. */
+  singleClip = false;
+  /** The confirmed BEFORE journey, offered as a starting point for AFTER. */
+  beforeJourney = null;
+  attachPage(page, appUrl) {
+    this.page = page;
+    this.appUrl = appUrl;
+  }
+  get targetOrigin() {
+    return new URL(this.appUrl).origin;
+  }
+  setPhase(phase, detail) {
+    this.phase = phase;
+    this.bus.send({ type: "PHASE_CHANGED", phase, detail });
+    if (phase === "recording") void this.onEnterRecording();
+    else void this.onLeaveRecording();
+  }
+  /** Set branch labels for the tab strip (run mode). */
+  setBranches(before, after) {
+    this.passInfo = { ...this.passInfo, branches: { before, after } };
+    this.bus.send({ type: "PASS_CHANGED", passInfo: this.passInfo });
+  }
+  /** Declare the session plan (1 = single clip, 2 = before/after) so the
+   *  harness wizard/tabs render the right shape. */
+  setPasses(passes) {
+    this.singleClip = passes === 1;
+    this.passInfo = { ...this.passInfo, passes };
+    this.bus.send({ type: "PASS_CHANGED", passInfo: this.passInfo });
+  }
+  /**
+   * Blocking nudge at the start of a pass, BEFORE recording: clear the app
+   * (network/cookies/storage) and reload, or keep the current session. Shown
+   * only when there's actually state to reset.
+   */
+  async promptResetChoice() {
+    if (!await this.hasResettableState()) return;
+    this.bus.send({
+      type: "RESET_PROMPT",
+      pass: this.passInfo.pass,
+      defaultReset: this.config.resetStorage
+    });
+    const { reset } = await this.bus.waitFor("RESET_CHOICE");
+    this.passInfo = { ...this.passInfo, resetStorage: reset };
+    this.bus.send({ type: "PASS_CHANGED", passInfo: this.passInfo });
+    if (reset) await this.resetIframe();
+  }
+  /** Is there any cookie / localStorage / sessionStorage worth resetting? */
+  async hasResettableState() {
+    const page = this.page;
+    if (!page) return false;
+    try {
+      const cookies = await page.context().cookies();
+      if (cookies.length > 0) return true;
+      const frame = await getAppFrame(page, this.targetOrigin, 5e3);
+      return await frame.evaluate(() => localStorage.length > 0 || sessionStorage.length > 0);
+    } catch {
+      return false;
+    }
+  }
+  /** Clear cookies + localStorage + sessionStorage and reload the app. */
+  async resetIframe() {
+    const page = this.page;
+    if (!page) return;
+    await page.context().clearCookies().catch(() => {
+    });
+    try {
+      const frame = await getAppFrame(page, this.targetOrigin, 5e3);
+      await frame.evaluate(() => {
+        localStorage.clear();
+        sessionStorage.clear();
+      });
+    } catch {
+    }
+    await page.reload({ waitUntil: "domcontentloaded" });
+    await getAppFrame(page, this.targetOrigin).then((f) => f.waitForLoadState("domcontentloaded").catch(() => {
+    })).catch(() => {
+    });
+  }
+  /** Switch the session to the other pass; AFTER starts with a clean slate. */
+  switchPass(pass) {
+    this.passInfo = { ...this.passInfo, pass };
+    if (pass === "after") {
+      this.beforeJourney = { steps: this.builder.getSteps(), startUrl: this.startUrl };
+      this.builder.setSteps([]);
+      this.frameMark.clear();
+      this.startUrl = "/";
+      this.passInfo = { ...this.passInfo, resetStorage: this.config.resetStorage };
+    }
+    this.bus.send({ type: "PASS_CHANGED", passInfo: this.passInfo });
+  }
+  markGifDone(which) {
+    this.passInfo = { ...this.passInfo, done: { ...this.passInfo.done, [which]: true } };
+    this.bus.send({ type: "PASS_CHANGED", passInfo: this.passInfo });
+  }
+  /** Raw events from the in-page recorder land here (via exposeBinding). */
+  handleRawEvent = (event) => {
+    if (this.phase === "recording") this.builder.handle(event);
+  };
+  /** Reload the current page inside the app iframe (cross-origin safe via CDP). */
+  async reloadAppFrame() {
+    const page = this.page;
+    if (!page) return;
+    try {
+      const frame = await getAppFrame(page, this.targetOrigin, 3e3);
+      await frame.evaluate(() => location.reload());
+    } catch {
+    }
+  }
+  /**
+   * Drive the interactive record/edit loop until the user confirms.
+   * Resolves with the confirmed steps.
+   */
+  async recordUntilConfirmed() {
+    return new Promise((resolve, reject) => {
+      const off = this.bus.onMessage((msg) => {
+        switch (msg.type) {
+          case "START_RECORD":
+            if (this.builder.getSteps().length === 0) {
+              void this.currentAppPath().then((p) => this.startUrl = p);
+            }
+            this.setPhase("recording");
+            break;
+          case "STOP_RECORD":
+            this.setPhase("idle");
+            break;
+          case "DELETE_STEP":
+            this.builder.removeStep(msg.stepId);
+            break;
+          case "RERECORD_FROM":
+            this.truncateLiveFrames(msg.stepId);
+            this.builder.truncateFrom(msg.stepId);
+            this.setPhase("recording", "Re-recording \u2014 perform the journey from this point");
+            break;
+          case "LOAD_BEFORE_STEPS":
+            if (this.beforeJourney) {
+              this.builder.setSteps(this.beforeJourney.steps);
+              this.startUrl = this.beforeJourney.startUrl;
+            }
+            break;
+          case "CONFIRM":
+            this.setPhase("idle");
+            off();
+            resolve(this.builder.getSteps());
+            break;
+          case "ABORT":
+            off();
+            reject(new Error("Aborted from the sidebar"));
+            break;
+        }
+      });
+    });
+  }
+  async currentAppPath() {
+    const page = this.page;
+    if (!page) return "/";
+    try {
+      const frame = await getAppFrame(page, this.targetOrigin, 5e3);
+      return await frame.evaluate(() => location.pathname + location.search);
+    } catch {
+      return "/";
+    }
+  }
+  /** Enter recording: start the full screencast (or resume it) + tell the
+   *  in-page cursor to follow the real mouse so it lands in the footage. */
+  async onEnterRecording() {
+    await this.setIframeRecording(true);
+    if (this.recordingFeed) {
+      this.recordingFeed.resume();
+      return;
+    }
+    const page = this.page;
+    if (!page) return;
+    try {
+      this.recordingFeed = await startScreencast(page, { quality: 80 });
+    } catch {
+      this.recordingFeed = null;
+    }
+  }
+  /** Leave recording: pause the feed (keep its frames). */
+  async onLeaveRecording() {
+    this.recordingFeed?.pause();
+    await this.setIframeRecording(false);
+  }
+  /** Fully stop the recording feed and return its frames (the clip). */
+  async takeRecordingFrames() {
+    const feed = this.recordingFeed;
+    this.recordingFeed = null;
+    if (!feed) return [];
+    return feed.stop();
+  }
+  /** Re-record: drop the footage recorded from `stepId` onwards. */
+  truncateLiveFrames(stepId) {
+    const mark = this.frameMark.get(stepId);
+    if (mark != null) this.recordingFeed?.truncate(mark);
+    for (const [id, n] of this.frameMark) if (mark != null && n >= mark) this.frameMark.delete(id);
+  }
+  /** Tell the in-page recorder to make the synthetic cursor follow the mouse. */
+  async setIframeRecording(on) {
+    const page = this.page;
+    if (!page) return;
+    try {
+      const frame = await getAppFrame(page, this.targetOrigin, 2e3);
+      await frame.evaluate((v) => {
+        window.__prPreviewRecording = v;
+      }, on);
+    } catch {
+    }
+  }
+  /**
+   * Trim dead time at the ends of the footage: keep a small lead-in before the
+   * first interaction and a short tail after the last, so "getting ready" and
+   * "reaching for Confirm" time isn't baked into the clip.
+   */
+  trimToActivity(frames) {
+    const marks = [...this.frameMark.values()].filter((n) => n >= 0 && n < frames.length).sort((a, b) => a - b);
+    if (marks.length === 0) return frames;
+    const HEAD = 12;
+    const TAIL = 40;
+    const head = Math.max(0, marks[0] - HEAD);
+    const tail = Math.min(frames.length, marks[marks.length - 1] + TAIL);
+    return frames.slice(head, tail);
+  }
+  /**
+   * Encode the recorded footage into the clip — cropped to the iframe, with the
+   * caption/watermark overlay. No replay, no state re-creation.
+   */
+  async encodeClip(which, outBase, label) {
+    const page = this.page;
+    if (!page) throw new Error("No browser page attached");
+    await this.setIframeRecording(false);
+    const frames = this.trimToActivity(await this.takeRecordingFrames());
+    if (frames.length === 0) throw new Error("No footage captured for the clip");
+    const cropCss = await getAppFrameRect(page);
+    const pageCssSize = await page.evaluate(() => ({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }));
+    this.setPhase("encoding", `Encoding ${which} clip`);
+    const result = await encodeMedia(frames, {
+      cropCss,
+      pageCssSize,
+      width: this.config.gif.width,
+      fps: this.config.gif.fps,
+      quality: this.config.gif.quality,
+      maxColors: this.config.gif.maxColors,
+      format: this.config.format,
+      outBase,
+      label: label ? { pass: this.singleClip ? "single" : which, ...label } : void 0,
+      onProgress: (stage, done, total) => this.bus.send({ type: "ENCODE_PROGRESS", which, stage, done, total })
+    });
+    this.markGifDone(which);
+    this.bus.send({ type: "GIF_READY", which, path: result.paths[0] });
+    return result;
+  }
+  /**
+   * Crop the recording feed's latest frame to the iframe for the sidebar step
+   * row. No discrete screenshot → no flicker on recorded actions.
+   */
+  scheduleThumbnail(step) {
+    const page = this.page;
+    if (!page) return;
+    this.thumbnailQueue = this.thumbnailQueue.then(async () => {
+      try {
+        const frame = this.recordingFeed?.latest();
+        if (!frame) return;
+        const meta = await sharp4(frame).metadata();
+        if (!meta.width || !meta.height) return;
+        const rect = await getAppFrameRect(page);
+        const pageCss = await page.evaluate(() => ({
+          width: window.innerWidth,
+          height: window.innerHeight
+        }));
+        const crop = cssRectToFramePixels(rect, { width: meta.width, height: meta.height }, pageCss);
+        if (crop.width < 2 || crop.height < 2) return;
+        const small = await sharp4(frame).extract({ left: crop.left, top: crop.top, width: crop.width, height: crop.height }).resize(160).png().toBuffer();
+        this.builder.setThumbnail(step.id, `data:image/png;base64,${small.toString("base64")}`);
+      } catch {
+      }
+    });
+  }
+};
+function toSummary(step) {
+  return {
+    id: step.id,
+    type: step.type,
+    label: describeStep(step),
+    thumbnail: step.thumbnail
+  };
+}
+
+// src/cli/cleanup.ts
+var cleanups = [];
+var installed = false;
+var running = false;
+function registerCleanup(fn) {
+  install();
+  cleanups.push(fn);
+  return () => {
+    const i = cleanups.indexOf(fn);
+    if (i >= 0) cleanups.splice(i, 1);
+  };
+}
+async function runCleanups() {
+  if (running) return;
+  running = true;
+  for (const fn of [...cleanups].reverse()) {
+    try {
+      await fn();
+    } catch {
+    }
+  }
+  cleanups.length = 0;
+  running = false;
+}
+function install() {
+  if (installed) return;
+  installed = true;
+  for (const signal of ["SIGINT", "SIGTERM"]) {
+    process.on(signal, () => {
+      void runCleanups().then(() => process.exit(130));
+    });
+  }
+  process.on("uncaughtException", (err) => {
+    console.error(err);
+    void runCleanups().then(() => process.exit(1));
+  });
+}
+
+// src/session/bootstrap.ts
+async function bootstrap(repoRoot, config, mode, opts = {}) {
+  const ports = await allocatePorts();
+  const appUrl = (which) => opts.fixedUrl ?? resolveUrl(config, which === "before" ? ports.beforeApp : ports.afterApp);
+  const initial = mode === "run" ? "before" : "after";
+  const harness = await startHarnessServer({
+    port: ports.harness,
+    appUrl: appUrl(initial),
+    mode,
+    viewport: config.viewport
+  });
+  registerCleanup(() => harness.close());
+  const session = new Session(harness.bus, config, mode, appUrl(initial));
+  let browser = null;
+  return {
+    ports,
+    harness,
+    session,
+    appUrl,
+    async startApp(which, cwd) {
+      const port = which === "before" ? ports.beforeApp : ports.afterApp;
+      const url = appUrl(which);
+      const spinner = log.spinner(`Starting ${which} dev server (${config.devCommand}) \u2026`);
+      try {
+        const handle = await startDevServer({
+          command: config.devCommand,
+          cwd: path9.join(cwd, config.cwd),
+          port,
+          url,
+          readyTimeout: config.readyTimeout,
+          logFile: path9.join(repoRoot, ".pr-preview", `dev-${which}.log`)
+        });
+        registerCleanup(() => handle.stop());
+        spinner.succeed(`${which} app ready at ${url}`);
+        return handle;
+      } catch (err) {
+        spinner.fail(`${which} dev server failed`);
+        throw err;
+      }
+    },
+    async openBrowser(which) {
+      browser = await launchSession({
+        harnessUrl: harness.url,
+        targetOrigins: [new URL(appUrl("before")).origin, new URL(appUrl("after")).origin],
+        appViewport: config.viewport,
+        headerStrip: config.headerStrip,
+        onRawEvent: session.handleRawEvent,
+        permissions: config.permissions,
+        geolocation: config.geolocation
+      });
+      registerCleanup(() => browser.close());
+      session.attachPage(browser.page, appUrl(which));
+      return browser;
+    },
+    async switchApp(which) {
+      if (!browser) throw new Error("Browser not open");
+      harness.setAppUrl(appUrl(which));
+      session.attachPage(browser.page, appUrl(which));
+      await browser.page.reload({ waitUntil: "domcontentloaded" });
+    }
+  };
+}
+
+// src/recorder/journey.ts
+import { readFile as readFile5, writeFile as writeFile4, mkdir as mkdir3 } from "fs/promises";
+import path10 from "path";
+import { z as z2 } from "zod";
+var stepSchema = z2.object({
+  id: z2.string(),
+  type: z2.enum(["click", "fill", "select", "press", "scroll", "navigate", "wait"]),
+  selectors: z2.array(z2.string()).optional(),
+  coordinates: z2.object({ xNorm: z2.number(), yNorm: z2.number() }).optional(),
+  frameUrl: z2.string().optional(),
+  value: z2.string().optional(),
+  key: z2.string().optional(),
+  scrollTarget: z2.string().optional(),
+  scroll: z2.object({ xNorm: z2.number(), yNorm: z2.number() }).optional(),
+  url: z2.string().optional(),
+  causesNavigation: z2.boolean().optional(),
+  label: z2.string().optional(),
+  timestamp: z2.number(),
+  thumbnail: z2.string().optional()
+});
+var journeySchema = z2.object({
+  version: z2.literal(1),
+  createdAt: z2.string(),
+  baseRef: z2.string().optional(),
+  viewport: z2.object({
+    width: z2.number(),
+    height: z2.number(),
+    deviceScaleFactor: z2.number()
+  }),
+  startUrl: z2.string(),
+  steps: z2.array(stepSchema)
+});
+async function saveJourney(file, journey) {
+  const clean = {
+    ...journey,
+    steps: journey.steps.map((s) => {
+      const { thumbnail: _thumbnail, ...rest } = s;
+      return rest;
+    })
+  };
+  await mkdir3(path10.dirname(file), { recursive: true });
+  await writeFile4(file, JSON.stringify(clean, null, 2) + "\n");
+}
+
+// src/cli/commands/record.ts
+async function recordCommand(repoRoot, opts) {
+  const { config } = await loadConfig(repoRoot);
+  const journeyFile = path11.resolve(repoRoot, opts.out ?? ".pr-preview/journey.json");
+  try {
+    const boot = await bootstrap(repoRoot, config, "record");
+    await boot.startApp("after", repoRoot);
+    await boot.openBrowser("after");
+    log.info(`Harness open at ${pc2.bold(boot.harness.url)}`);
+    log.step("Click Record in the sidebar, perform the journey, then Confirm.");
+    const steps = await boot.session.recordUntilConfirmed();
+    if (steps.length === 0) {
+      log.warn("No steps recorded \u2014 nothing saved.");
+      return;
+    }
+    await saveJourney(journeyFile, {
+      version: 1,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      viewport: { ...config.viewport, deviceScaleFactor: 2 },
+      startUrl: boot.session.startUrl,
+      steps
+    });
+    log.success(`Saved ${steps.length} steps to ${path11.relative(repoRoot, journeyFile)}`);
+  } finally {
+    await runCleanups();
+  }
+}
+
+// src/cli/commands/run.ts
+import { existsSync as existsSync8 } from "fs";
+import path14 from "path";
+import pc3 from "picocolors";
+
+// src/git/exec.ts
+import { execFile as execFile2 } from "child_process";
+var GitError = class extends Error {
+};
+function git(dir, args) {
+  return new Promise((resolve, reject) => {
+    execFile2("git", args, { cwd: dir, maxBuffer: 10 * 1024 * 1024 }, (err, stdout, stderr) => {
+      if (err) reject(new GitError(`git ${args.join(" ")} failed: ${stderr || err.message}`));
+      else resolve(stdout.trim());
+    });
+  });
+}
+async function tryGit(dir, args) {
+  try {
+    return await git(dir, args);
+  } catch {
+    return null;
+  }
+}
+function tryGh(dir, args) {
+  return new Promise((resolve) => {
+    execFile2("gh", args, { cwd: dir }, (err, stdout) => {
+      resolve(err ? null : stdout.trim());
+    });
+  });
+}
+
+// src/git/base.ts
+async function detectBase(repoRoot, override) {
+  if (!await tryGit(repoRoot, ["rev-parse", "--is-inside-work-tree"])) {
+    throw new GitError(
+      `Not inside a git repository (${repoRoot}). pr-preview run needs a git repo with a committed base branch \u2014 cd into your project and try again.`
+    );
+  }
+  if (!await tryGit(repoRoot, ["rev-parse", "--verify", "HEAD"])) {
+    throw new GitError(
+      `This git repository has no commits yet, so there is no base to compare against. Commit your work and run pr-preview on a feature branch (or pass --base <ref>).`
+    );
+  }
+  if (override) {
+    const sha = await git(repoRoot, ["merge-base", "HEAD", override]);
+    return { sha, source: "config", ref: override };
+  }
+  const ghBase = await tryGh(repoRoot, ["pr", "view", "--json", "baseRefName", "-q", ".baseRefName"]);
+  if (ghBase) {
+    const ref = await tryGit(repoRoot, ["rev-parse", "--verify", `origin/${ghBase}`]) ? `origin/${ghBase}` : ghBase;
+    const sha = await tryGit(repoRoot, ["merge-base", "HEAD", ref]);
+    if (sha) return { sha, source: "gh-pr", ref };
+  }
+  const candidates = [];
+  const originHead = await tryGit(repoRoot, ["symbolic-ref", "refs/remotes/origin/HEAD"]);
+  if (originHead) candidates.push(originHead.replace("refs/remotes/", ""));
+  candidates.push("origin/main", "origin/master", "main", "master", "develop");
+  const current = await git(repoRoot, ["rev-parse", "HEAD"]);
+  for (const ref of candidates) {
+    if (!await tryGit(repoRoot, ["rev-parse", "--verify", `${ref}^{commit}`])) continue;
+    const sha = await tryGit(repoRoot, ["merge-base", "HEAD", ref]);
+    if (sha && sha !== current) return { sha, source: "merge-base", ref };
+    if (sha && sha === current) {
+      throw new GitError(
+        `Current branch has no commits beyond ${ref} \u2014 there is no "before" to compare. Switch to your PR branch first, or pass --base <ref>.`
+      );
+    }
+  }
+  throw new GitError(
+    "Could not detect the PR base. Pass --base <ref> or set baseBranch in pr-preview.config."
+  );
+}
+
+// src/git/worktree.ts
+import { existsSync as existsSync6 } from "fs";
+import { rm as rm2 } from "fs/promises";
+import path12 from "path";
+var WORKTREE_DIR = ".pr-preview/worktrees";
+function explainGitCrash(err, repoRoot) {
+  const msg = err instanceof Error ? err.message : String(err);
+  if (/died of signal|signal 1[01]\b|SIGBUS|SIGSEGV/i.test(msg)) {
+    const inICloud = /\/(Documents|Desktop)\//.test(repoRoot);
+    throw new GitError(
+      `git crashed creating the base worktree (it died of a signal). This usually means the repository's git objects are iCloud-evicted "dataless" placeholders` + (inICloud ? " \u2014 and this repo is under ~/Documents, which iCloud syncs.\n\n" : ".\n\n") + `Fixes:
+  \u2022 Move the repo out of iCloud (e.g. ~/dev), or disable Desktop & Documents sync, then retry.
+  \u2022 Or force-download the objects now:  find .git -type f -exec cat {} + >/dev/null
+
+Original error: ${msg}`
+    );
+  }
+  throw err;
+}
+async function createBaseWorktree(repoRoot, sha) {
+  const dir = path12.join(repoRoot, WORKTREE_DIR, `base-${sha.slice(0, 12)}`);
+  if (existsSync6(dir) && await tryGit(dir, ["rev-parse", "HEAD"]) === sha) {
+    return { dir, remove: () => removeWorktree(repoRoot, dir) };
+  }
+  await pruneStaleWorktrees(repoRoot);
+  if (existsSync6(dir)) await rm2(dir, { recursive: true, force: true });
+  try {
+    await git(repoRoot, ["worktree", "add", "--detach", dir, sha]);
+  } catch (err) {
+    await removeWorktree(repoRoot, dir).catch(() => {
+    });
+    explainGitCrash(err, repoRoot);
+  }
+  return { dir, remove: () => removeWorktree(repoRoot, dir) };
+}
+async function removeWorktree(repoRoot, dir) {
+  await tryGit(repoRoot, ["worktree", "remove", "--force", dir]);
+  if (existsSync6(dir)) await rm2(dir, { recursive: true, force: true });
+  await tryGit(repoRoot, ["worktree", "prune"]);
+}
+async function pruneStaleWorktrees(repoRoot) {
+  await tryGit(repoRoot, ["worktree", "prune"]);
+}
+
+// src/server/pkgManager.ts
+import { existsSync as existsSync7 } from "fs";
+import path13 from "path";
+import { spawn as spawn3 } from "child_process";
+function detectPackageManager(dir) {
+  if (existsSync7(path13.join(dir, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync7(path13.join(dir, "yarn.lock"))) return "yarn";
+  if (existsSync7(path13.join(dir, "bun.lockb")) || existsSync7(path13.join(dir, "bun.lock"))) {
+    return "bun";
+  }
+  return "npm";
+}
+function installDependencies(dir, pm) {
+  return new Promise((resolve, reject) => {
+    const child = spawn3(pm, ["install"], {
+      cwd: dir,
+      stdio: ["ignore", "pipe", "pipe"],
+      env: process.env
+    });
+    let tail = "";
+    const keepTail = (chunk) => {
+      tail = (tail + chunk.toString()).slice(-2e3);
+    };
+    child.stdout.on("data", keepTail);
+    child.stderr.on("data", keepTail);
+    child.on("error", reject);
+    child.on("exit", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`${pm} install failed (exit ${code}):
+${tail}`));
+    });
+  });
+}
+
+// src/cli/util/openPath.ts
+import { spawn as spawn4 } from "child_process";
+function openPath(target) {
+  if (process.env.PR_PREVIEW_HEADLESS === "1" || process.env.CI) return;
+  const [cmd, args] = process.platform === "darwin" ? ["open", [target]] : process.platform === "win32" ? ["cmd", ["/c", "start", "", target]] : ["xdg-open", [target]];
+  try {
+    const child = spawn4(cmd, [...args], { detached: true, stdio: "ignore" });
+    child.on("error", () => {
+    });
+    child.unref();
+  } catch {
+  }
+}
+function revealFiles(files, dir) {
+  if (process.env.PR_PREVIEW_HEADLESS === "1" || process.env.CI) return;
+  if (process.platform === "darwin" && files.length > 0) {
+    try {
+      const child = spawn4("open", ["-R", ...files], { detached: true, stdio: "ignore" });
+      child.on("error", () => openPath(dir));
+      child.unref();
+      return;
+    } catch {
+    }
+  }
+  openPath(dir);
+}
+
+// src/cli/commands/run.ts
+function captureClip(session, which, outBase, label) {
+  return session.encodeClip(which, outBase, label);
+}
+function stamp() {
+  const d = /* @__PURE__ */ new Date();
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+function shortRef(ref) {
+  return ref.replace(/^origin\//, "");
+}
+function slug(ref) {
+  return shortRef(ref).replace(/[^a-zA-Z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function fileStamp() {
+  const d = /* @__PURE__ */ new Date();
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}`;
+}
+async function branchName(repoRoot, fallback) {
+  const ref = await tryGit(repoRoot, ["rev-parse", "--abbrev-ref", "HEAD"]);
+  return ref ? shortRef(ref) : fallback;
+}
+async function runCommand(repoRoot, opts) {
+  let config;
+  const urlFlag = opts.url;
+  try {
+    config = (await loadConfig(repoRoot)).config;
+  } catch (err) {
+    if (urlFlag && err instanceof ConfigError) {
+      config = configSchema.parse({ devCommand: "external", url: urlFlag });
+    } else {
+      throw err;
+    }
+  }
+  opts = {
+    url: opts.url ?? config.externalUrl,
+    base: opts.base ?? config.baseBranch,
+    keepWorktree: opts.keepWorktree ?? config.keepWorktree,
+    single: opts.single
+  };
+  const outDir = path14.resolve(repoRoot, config.output);
+  const passes = opts.single ? 1 : config.passes;
+  if (passes === 1) return runSingleClip(repoRoot, config, outDir, opts);
+  if (opts.url) return runWithExternalApp(repoRoot, config, outDir, opts);
+  try {
+    const base = await detectBase(repoRoot, opts.base ?? config.baseBranch);
+    const currentBranch = await tryGit(repoRoot, ["rev-parse", "--abbrev-ref", "HEAD"]) ?? "HEAD";
+    log.info(`PR base: ${pc3.bold(base.ref)} (${base.sha.slice(0, 10)}, via ${base.source})`);
+    const worktree = await createBaseWorktree(repoRoot, base.sha);
+    if (!opts.keepWorktree) registerCleanup(() => worktree.remove());
+    log.success(`Base worktree at ${path14.relative(repoRoot, worktree.dir)}`);
+    if (config.install !== "never") {
+      const appDir = path14.join(worktree.dir, config.cwd);
+      const pm = detectPackageManager(appDir);
+      const hasModules = existsSync8(path14.join(appDir, "node_modules"));
+      if (config.install === "always" || !hasModules) {
+        const spinner = log.spinner(`Installing dependencies in worktree (${pm}) \u2026`);
+        try {
+          await installDependencies(appDir, pm);
+          spinner.succeed("Worktree dependencies installed");
+        } catch (err) {
+          spinner.fail("Install failed");
+          throw err;
+        }
+      }
+    }
+    const boot = await bootstrap(repoRoot, config, "run");
+    boot.session.setPasses(2);
+    boot.session.setBranches(base.ref, currentBranch);
+    const beforeServer = await boot.startApp("before", worktree.dir);
+    await boot.openBrowser("before");
+    log.info(`Harness open at ${pc3.bold(boot.harness.url)}`);
+    log.step(`Record the journey on BEFORE (${base.ref}), then Confirm in the sidebar.`);
+    await boot.session.promptResetChoice();
+    const beforeSteps = await boot.session.recordUntilConfirmed();
+    if (beforeSteps.length === 0) throw new Error("No steps recorded for BEFORE \u2014 aborting.");
+    await saveJourneyFile(repoRoot, "journey-before.json", config, boot.session.startUrl, beforeSteps, base.sha);
+    const timestamp = stamp();
+    const fstamp = fileStamp();
+    const baseLabel = shortRef(base.ref);
+    const headLabel = shortRef(currentBranch);
+    log.info("Capturing BEFORE \u2026");
+    const before = await captureClip(
+      boot.session,
+      "before",
+      path14.join(outDir, `before-${slug(base.ref)}-${fstamp}`),
+      { branch: baseLabel, baseBranch: baseLabel, timestamp }
+    );
+    if (before.fellBackToGif) {
+      log.warn("ffmpeg not found \u2014 produced a GIF instead of MP4 (brew install ffmpeg).");
+    }
+    log.success(`${before.paths.map((p) => path14.basename(p)).join(" + ")} (${before.frameCount} frames)`);
+    await beforeServer.stop();
+    await boot.startApp("after", repoRoot);
+    boot.session.switchPass("after");
+    await boot.switchApp("after");
+    boot.session.setPhase("idle");
+    log.step(
+      `Now record the journey on AFTER (${currentBranch}) \u2014 the UI may differ. Record fresh or load the BEFORE steps, then Save.`
+    );
+    await boot.session.promptResetChoice();
+    const afterSteps = await boot.session.recordUntilConfirmed();
+    if (afterSteps.length === 0) throw new Error("No steps recorded for AFTER \u2014 aborting.");
+    await saveJourneyFile(repoRoot, "journey-after.json", config, boot.session.startUrl, afterSteps);
+    log.info("Capturing AFTER \u2026");
+    const after = await captureClip(
+      boot.session,
+      "after",
+      path14.join(outDir, `after-${slug(currentBranch)}-${fstamp}`),
+      { branch: headLabel, baseBranch: baseLabel, timestamp }
+    );
+    log.success(`${after.paths.map((p) => path14.basename(p)).join(" + ")} (${after.frameCount} frames)`);
+    boot.session.setPhase("done");
+    boot.harness.bus.send({
+      type: "DONE",
+      outputs: { before: before.paths[0], after: after.paths[0] }
+    });
+    console.log();
+    log.success(pc3.bold("Done \u2014 drag these into your PR description:"));
+    for (const p of [...before.paths, ...after.paths]) {
+      log.step(path14.relative(repoRoot, p));
+    }
+    revealFiles([...before.paths, ...after.paths], outDir);
+  } finally {
+    await runCleanups();
+  }
+}
+async function runSingleClip(repoRoot, config, outDir, opts) {
+  try {
+    const boot = opts.url ? await bootstrap(repoRoot, config, "run", { fixedUrl: opts.url }) : await bootstrap(repoRoot, config, "run");
+    boot.session.setPasses(1);
+    const branch = await branchName(repoRoot, "app");
+    let server;
+    if (opts.url) {
+      log.info(`Using your running app at ${pc3.bold(opts.url)} (single clip).`);
+    } else {
+      server = await boot.startApp("before", repoRoot);
+    }
+    await boot.openBrowser("before");
+    log.info(`Harness open at ${pc3.bold(boot.harness.url)}`);
+    log.step(`Record the journey, then Confirm to save the clip.`);
+    await boot.session.promptResetChoice();
+    const steps = await boot.session.recordUntilConfirmed();
+    if (steps.length === 0) throw new Error("No steps recorded \u2014 aborting.");
+    await saveJourneyFile(repoRoot, "journey.json", config, boot.session.startUrl, steps);
+    const timestamp = stamp();
+    log.info("Capturing the clip \u2026");
+    const clip = await captureClip(
+      boot.session,
+      "before",
+      path14.join(outDir, `${slug(branch)}-${fileStamp()}`),
+      { branch, baseBranch: branch, timestamp }
+    );
+    if (clip.fellBackToGif) {
+      log.warn("ffmpeg not found \u2014 produced a GIF instead of MP4 (brew install ffmpeg).");
+    }
+    await server?.stop();
+    boot.session.setPhase("done");
+    boot.harness.bus.send({ type: "DONE", outputs: { before: clip.paths[0] } });
+    console.log();
+    log.success(pc3.bold("Done \u2014 your clip:"));
+    for (const p of clip.paths) log.step(path14.relative(repoRoot, p));
+    revealFiles(clip.paths, outDir);
+  } finally {
+    await runCleanups();
+  }
+}
+async function runWithExternalApp(repoRoot, config, outDir, opts) {
+  log.info(`Using your running app at ${pc3.bold(opts.url)} (no dev server managed).`);
+  try {
+    const boot = await bootstrap(repoRoot, config, "run", { fixedUrl: opts.url });
+    boot.session.setPasses(2);
+    const beforeBranch = await branchName(repoRoot, "before");
+    boot.session.setBranches(beforeBranch, "your PR branch");
+    await boot.openBrowser("before");
+    log.info(`Harness open at ${pc3.bold(boot.harness.url)}`);
+    log.step(`Record the journey on your app (currently ${beforeBranch}), then Confirm.`);
+    await boot.session.promptResetChoice();
+    const beforeSteps = await boot.session.recordUntilConfirmed();
+    if (beforeSteps.length === 0) throw new Error("No steps recorded for BEFORE \u2014 aborting.");
+    const timestamp = stamp();
+    const fstamp = fileStamp();
+    await saveJourneyFile(repoRoot, "journey-before.json", config, boot.session.startUrl, beforeSteps);
+    log.info("Capturing BEFORE \u2026");
+    const before = await captureClip(
+      boot.session,
+      "before",
+      path14.join(outDir, `before-${slug(beforeBranch)}-${fstamp}`),
+      { branch: beforeBranch, baseBranch: beforeBranch, timestamp }
+    );
+    log.success(`${before.paths.map((p) => path14.basename(p)).join(" + ")} (${before.frameCount} frames)`);
+    log.info(pc3.bold("\u2192 Switch your app to the PR branch and restart it on the same URL, then Continue in the harness."));
+    boot.harness.bus.send({
+      type: "MANUAL_PAUSE",
+      stepId: null,
+      kind: "generic",
+      label: `Switch your app to your PR branch and restart it on ${opts.url}, then click Continue.`
+    });
+    await boot.harness.bus.waitFor("CONTINUE");
+    const afterBranch = await branchName(repoRoot, "after");
+    boot.session.switchPass("after");
+    boot.session.setBranches(beforeBranch, afterBranch);
+    await boot.switchApp("after");
+    boot.session.setPhase("idle");
+    log.step(`Now record the journey on AFTER (${afterBranch}) \u2014 record fresh or load the BEFORE steps, then Save.`);
+    await boot.session.promptResetChoice();
+    const afterSteps = await boot.session.recordUntilConfirmed();
+    if (afterSteps.length === 0) throw new Error("No steps recorded for AFTER \u2014 aborting.");
+    await saveJourneyFile(repoRoot, "journey-after.json", config, boot.session.startUrl, afterSteps);
+    log.info("Capturing AFTER \u2026");
+    const after = await captureClip(
+      boot.session,
+      "after",
+      path14.join(outDir, `after-${slug(afterBranch)}-${fstamp}`),
+      { branch: afterBranch, baseBranch: beforeBranch, timestamp }
+    );
+    log.success(`${after.paths.map((p) => path14.basename(p)).join(" + ")} (${after.frameCount} frames)`);
+    boot.session.setPhase("done");
+    boot.harness.bus.send({ type: "DONE", outputs: { before: before.paths[0], after: after.paths[0] } });
+    console.log();
+    log.success(pc3.bold("Done \u2014 drag these into your PR description:"));
+    for (const p of [...before.paths, ...after.paths]) log.step(path14.relative(repoRoot, p));
+    revealFiles([...before.paths, ...after.paths], outDir);
+  } finally {
+    await runCleanups();
+  }
+}
+async function saveJourneyFile(repoRoot, name, config, startUrl, steps, baseRef) {
+  await saveJourney(path14.join(repoRoot, ".pr-preview", name), {
+    version: 1,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+    baseRef,
+    viewport: { ...config.viewport, deviceScaleFactor: 2 },
+    startUrl,
+    steps
+  });
+}
+
+// src/cli/index.ts
+var program = new Command();
+program.name("pr-preview").description("Record a user journey once, get before/after PR GIFs of your UI.").version("0.1.0");
+program.command("init").description("Scaffold pr-preview.config.js and .gitignore entries").action(() => wrap(() => initCommand(process.cwd())));
+program.command("record").description("Record a journey on the current branch (no GIFs)").option("-o, --out <file>", "journey output path", ".pr-preview/journey.json").action((opts) => wrap(() => recordCommand(process.cwd(), opts)));
+program.command("run").description("Record on the PR base, then produce before.gif and after.gif").option("-b, --base <ref>", "override PR base detection").option("--keep-worktree", "keep the base worktree around for faster re-runs").option(
+  "-u, --url <url>",
+  "use your own already-running app at <url> instead of starting a dev server (records BEFORE, you switch branches + restart, records AFTER)"
+).option(
+  "-s, --single",
+  "record a single standalone clip of the current app (no before/after comparison)"
+).action((opts) => wrap(() => runCommand(process.cwd(), opts)));
+async function wrap(fn) {
+  try {
+    await fn();
+    process.exit(0);
+  } catch (err) {
+    if (err instanceof ConfigError || err instanceof GitError) {
+      log.error(err.message);
+    } else {
+      log.error(err instanceof Error ? err.stack ?? err.message : String(err));
+    }
+    process.exit(1);
+  }
+}
+program.parse();
+//# sourceMappingURL=index.js.map