afterbefore 0.1.0

package/dist/cli.js

@@ -0,0 +1,1150 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { Command } from "commander";
+
+// src/logger.ts
+import chalk from "chalk";
+import ora from "ora";
+var Logger = class {
+  spinner = null;
+  info(message) {
+    this.clearSpinner();
+    console.log(chalk.blue("\u2139"), message);
+  }
+  success(message) {
+    this.clearSpinner();
+    console.log(chalk.green("\u2714"), message);
+  }
+  warn(message) {
+    this.clearSpinner();
+    console.log(chalk.yellow("\u26A0"), message);
+  }
+  error(message) {
+    this.clearSpinner();
+    console.error(chalk.red("\u2716"), message);
+  }
+  dim(message) {
+    this.clearSpinner();
+    console.log(chalk.dim(message));
+  }
+  spin(message) {
+    this.clearSpinner();
+    this.spinner = ora(message).start();
+    return this.spinner;
+  }
+  stopSpinner() {
+    this.clearSpinner();
+  }
+  clearSpinner() {
+    if (this.spinner) {
+      this.spinner.stop();
+      this.spinner = null;
+    }
+  }
+};
+var logger = new Logger();
+
+// src/utils/git.ts
+import { execSync } from "child_process";
+function git(args, cwd) {
+  return execSync(`git ${args}`, {
+    cwd,
+    encoding: "utf-8",
+    stdio: ["pipe", "pipe", "pipe"]
+  }).trim();
+}
+function isGitRepo(cwd) {
+  try {
+    git("rev-parse --is-inside-work-tree", cwd);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getMergeBase(base, cwd) {
+  return git(`merge-base ${base} HEAD`, cwd);
+}
+function getDiffNameStatus(base, cwd) {
+  const mergeBase = getMergeBase(base, cwd);
+  return git(`diff --name-status ${mergeBase}`, cwd);
+}
+
+// src/pipeline.ts
+import { resolve as resolve2 } from "path";
+
+// src/cleanup.ts
+var CleanupRegistry = class {
+  cleanups = [];
+  registered = false;
+  register(fn) {
+    this.cleanups.push(fn);
+    this.ensureSignalHandlers();
+  }
+  async runAll() {
+    const fns = [...this.cleanups].reverse();
+    this.cleanups = [];
+    for (const fn of fns) {
+      try {
+        await fn();
+      } catch (err) {
+        logger.warn(
+          `Cleanup failed: ${err instanceof Error ? err.message : String(err)}`
+        );
+      }
+    }
+  }
+  ensureSignalHandlers() {
+    if (this.registered) return;
+    this.registered = true;
+    const handler = async (signal) => {
+      logger.dim(`
+Received ${signal}, cleaning up...`);
+      await this.runAll();
+      process.exit(signal === "SIGINT" ? 130 : 143);
+    };
+    process.on("SIGINT", () => handler("SIGINT"));
+    process.on("SIGTERM", () => handler("SIGTERM"));
+    process.on("exit", () => {
+      if (this.cleanups.length > 0) {
+        for (const fn of [...this.cleanups].reverse()) {
+          try {
+            fn();
+          } catch {
+          }
+        }
+        this.cleanups = [];
+      }
+    });
+  }
+};
+var cleanupRegistry = new CleanupRegistry();
+
+// src/utils/fs.ts
+import { mkdir } from "fs/promises";
+async function ensureDir(dir) {
+  await mkdir(dir, { recursive: true });
+}
+
+// src/utils/port.ts
+import { createServer } from "net";
+function findPort() {
+  return new Promise((resolve3, reject) => {
+    const server = createServer();
+    server.listen(0, () => {
+      const addr = server.address();
+      if (!addr || typeof addr === "string") {
+        server.close();
+        reject(new Error("Failed to get port"));
+        return;
+      }
+      const port = addr.port;
+      server.close(() => resolve3(port));
+    });
+    server.on("error", reject);
+  });
+}
+async function findAvailablePort(exclude) {
+  for (let i = 0; i < 5; i++) {
+    const port = await findPort();
+    if (!exclude || !exclude.has(port)) return port;
+  }
+  throw new Error("Failed to find available port after 5 attempts");
+}
+
+// src/stages/diff.ts
+var VALID_STATUSES = /* @__PURE__ */ new Set(["A", "M", "D", "R", "C"]);
+function parseDiffOutput(raw) {
+  if (!raw.trim()) return [];
+  const results = [];
+  for (const line of raw.trim().split("\n")) {
+    const parts = line.split("	");
+    const statusRaw = parts[0].charAt(0);
+    if (!VALID_STATUSES.has(statusRaw)) continue;
+    const status = statusRaw;
+    if (status === "R" || status === "C") {
+      results.push({ status, oldPath: parts[1], path: parts[2] });
+    } else {
+      results.push({ status, path: parts[1] });
+    }
+  }
+  return results;
+}
+function getChangedFiles(base, cwd) {
+  const raw = getDiffNameStatus(base, cwd);
+  return parseDiffOutput(raw);
+}
+
+// src/stages/classify.ts
+var VISUAL_CATEGORIES = /* @__PURE__ */ new Set([
+  "page",
+  "component",
+  "style",
+  "layout"
+]);
+function classifyFile(filePath) {
+  const p = filePath.replace(/^src\//, "");
+  if (/\.(test|spec)\.[tj]sx?$/.test(p) || /^tests?\//.test(p) || /\/__tests__\//.test(p) || p.includes(".test.") || p.includes(".spec.")) {
+    return "test";
+  }
+  if (/^(tsconfig|next\.config|tailwind\.config|postcss\.config|\.eslint|\.prettier|vitest\.config|jest\.config)/.test(
+    p
+  ) || p === "package.json" || p === "package-lock.json" || p.endsWith(".config.ts") || p.endsWith(".config.js") || p.endsWith(".config.mjs")) {
+    return "config";
+  }
+  if (/\.(css|scss|sass|less)$/.test(p) || p === "tailwind.config.ts") {
+    return "style";
+  }
+  if (/\/layout\.[tj]sx?$/.test(p) || /^app\/layout\.[tj]sx?$/.test(p)) {
+    return "layout";
+  }
+  if (/\/page\.[tj]sx?$/.test(p) || /^app\/page\.[tj]sx?$/.test(p)) {
+    return "page";
+  }
+  if (/^(components|app)\//.test(p) && /\.[tj]sx?$/.test(p)) {
+    return "component";
+  }
+  if (/^(lib|utils|hooks|helpers|services|api)\//.test(p) && /\.[tj]sx?$/.test(p)) {
+    return "utility";
+  }
+  if (/\.[tj]sx?$/.test(p)) {
+    return "component";
+  }
+  return "other";
+}
+function classifyFiles(files) {
+  return files.map((f) => ({
+    ...f,
+    category: classifyFile(f.path)
+  }));
+}
+function filterVisuallyRelevant(files) {
+  return files.filter((f) => VISUAL_CATEGORIES.has(f.category));
+}
+
+// src/stages/graph.ts
+import { readdirSync, readFileSync as readFileSync2 } from "fs";
+import { join as join2, relative } from "path";
+import { init, parse } from "es-module-lexer";
+
+// src/stages/resolve.ts
+import { existsSync, readFileSync, statSync } from "fs";
+import { resolve, dirname, join } from "path";
+var EXTENSIONS = [".ts", ".tsx", ".js", ".jsx"];
+function createResolver(projectRoot) {
+  const mappings = loadPathMappings(projectRoot);
+  const existsCache = /* @__PURE__ */ new Map();
+  function cachedExists(p) {
+    const cached = existsCache.get(p);
+    if (cached !== void 0) return cached;
+    const result = existsSync(p);
+    existsCache.set(p, result);
+    return result;
+  }
+  function tryResolve(candidate) {
+    if (cachedExists(candidate) && !isDirectory(candidate)) return candidate;
+    for (const ext of EXTENSIONS) {
+      const withExt = candidate + ext;
+      if (cachedExists(withExt)) return withExt;
+    }
+    for (const ext of EXTENSIONS) {
+      const indexFile = join(candidate, `index${ext}`);
+      if (cachedExists(indexFile)) return indexFile;
+    }
+    return null;
+  }
+  function isDirectory(p) {
+    try {
+      return statSync(p).isDirectory();
+    } catch {
+      return false;
+    }
+  }
+  return (specifier, fromFile) => {
+    if (specifier.startsWith(".")) {
+      const dir = dirname(fromFile);
+      const candidate = resolve(dir, specifier);
+      return tryResolve(candidate);
+    }
+    for (const mapping of mappings) {
+      if (!specifier.startsWith(mapping.prefix)) continue;
+      const rest = specifier.slice(mapping.prefix.length);
+      for (const target of mapping.targets) {
+        const candidate = resolve(projectRoot, target + rest);
+        const result = tryResolve(candidate);
+        if (result) return result;
+      }
+    }
+    return null;
+  };
+}
+function loadPathMappings(projectRoot) {
+  const tsconfigPath = join(projectRoot, "tsconfig.json");
+  if (!existsSync(tsconfigPath)) {
+    logger.dim("No tsconfig.json found, skipping path alias resolution");
+    return [];
+  }
+  try {
+    const raw = readFileSync(tsconfigPath, "utf-8");
+    const cleaned = raw.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+    const config = JSON.parse(cleaned);
+    const paths = config?.compilerOptions?.paths;
+    if (!paths) return [];
+    const baseUrl = config?.compilerOptions?.baseUrl || ".";
+    const mappings = [];
+    for (const [pattern, targets] of Object.entries(paths)) {
+      const prefix = pattern.replace(/\*$/, "");
+      const resolvedTargets = targets.map(
+        (t) => t.replace(/\*$/, "")
+      );
+      const absoluteTargets = resolvedTargets.map(
+        (t) => join(baseUrl, t)
+      );
+      mappings.push({ prefix, targets: absoluteTargets });
+    }
+    return mappings;
+  } catch (e) {
+    logger.warn(`Failed to parse tsconfig.json: ${e}`);
+    return [];
+  }
+}
+
+// src/stages/graph.ts
+var SOURCE_EXTENSIONS = /* @__PURE__ */ new Set([".ts", ".tsx", ".js", ".jsx"]);
+var SOURCE_DIRS = ["app", "src", "components", "lib"];
+function collectFiles(dir) {
+  const results = [];
+  let entries;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return results;
+  }
+  for (const entry of entries) {
+    const fullPath = join2(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name.startsWith(".") || entry.name === "node_modules" || entry.name === "dist") {
+        continue;
+      }
+      results.push(...collectFiles(fullPath));
+    } else if (entry.isFile()) {
+      const ext = entry.name.slice(entry.name.lastIndexOf("."));
+      if (SOURCE_EXTENSIONS.has(ext)) {
+        results.push(fullPath);
+      }
+    }
+  }
+  return results;
+}
+function parseImports(filePath) {
+  let source;
+  try {
+    source = readFileSync2(filePath, "utf-8");
+  } catch {
+    return [];
+  }
+  try {
+    const cleaned = source.replace(/import\s+type\s+/g, "import ").replace(/export\s+type\s+/g, "export ");
+    const [imports] = parse(cleaned);
+    return imports.map((imp) => imp.n).filter((n) => n !== void 0 && n !== "");
+  } catch {
+    const specifiers = [];
+    const importRegex = /(?:import|from)\s+["']([^"']+)["']/g;
+    let match;
+    while ((match = importRegex.exec(source)) !== null) {
+      specifiers.push(match[1]);
+    }
+    return specifiers;
+  }
+}
+async function buildImportGraph(projectRoot) {
+  await init;
+  const resolve3 = createResolver(projectRoot);
+  const allFiles = [];
+  for (const dir of SOURCE_DIRS) {
+    const fullDir = join2(projectRoot, dir);
+    allFiles.push(...collectFiles(fullDir));
+  }
+  const fileSet = new Set(allFiles);
+  const forward = /* @__PURE__ */ new Map();
+  const reverse = /* @__PURE__ */ new Map();
+  for (const filePath of fileSet) {
+    const relPath = relative(projectRoot, filePath);
+    const specifiers = parseImports(filePath);
+    const deps = /* @__PURE__ */ new Set();
+    for (const spec of specifiers) {
+      const resolved = resolve3(spec, filePath);
+      if (!resolved) continue;
+      const relResolved = relative(projectRoot, resolved);
+      deps.add(relResolved);
+      if (!reverse.has(relResolved)) {
+        reverse.set(relResolved, /* @__PURE__ */ new Set());
+      }
+      reverse.get(relResolved).add(relPath);
+    }
+    forward.set(relPath, deps);
+  }
+  logger.dim(`Import graph: ${fileSet.size} files, ${countEdges(forward)} edges`);
+  return { forward, reverse };
+}
+function countEdges(forward) {
+  let count = 0;
+  for (const deps of forward.values()) {
+    count += deps.size;
+  }
+  return count;
+}
+
+// src/utils/nextjs.ts
+function pagePathToRoute(pagePath) {
+  let p = pagePath.replace(/^src\//, "");
+  const match = p.match(/^app\/(.*)\/page\.[tj]sx?$/);
+  if (!match) {
+    if (/^app\/page\.[tj]sx?$/.test(p)) return "/";
+    return null;
+  }
+  let route = match[1];
+  if (/\[.*\]/.test(route)) {
+    logger.warn(`Skipping dynamic route: /${route} (dynamic segments not supported)`);
+    return null;
+  }
+  route = route.split("/").filter((seg) => !seg.startsWith("(")).join("/");
+  return `/${route}` || "/";
+}
+function isPageFile(filePath) {
+  const p = filePath.replace(/^src\//, "");
+  return /^app\/(.+\/)?page\.[tj]sx?$/.test(p);
+}
+function isLayoutFile(filePath) {
+  const p = filePath.replace(/^src\//, "");
+  return /^app\/(.+\/)?layout\.[tj]sx?$/.test(p);
+}
+function getLayoutDir(filePath) {
+  const p = filePath.replace(/^src\//, "");
+  const match = p.match(/^(app\/.*\/)layout\.[tj]sx?$/);
+  if (!match) return "app/";
+  return match[1];
+}
+
+// src/stages/impact.ts
+var MAX_DEPTH = 3;
+function findAffectedRoutes(changedFiles, graph, projectRoot) {
+  const routeMap = /* @__PURE__ */ new Map();
+  for (const file of changedFiles) {
+    const visited = /* @__PURE__ */ new Set();
+    const queue = [
+      { path: file, depth: 0 }
+    ];
+    visited.add(file);
+    while (queue.length > 0) {
+      const { path, depth } = queue.shift();
+      if (isPageFile(path)) {
+        const route = pagePathToRoute(path);
+        if (route !== null && !routeMap.has(route)) {
+          routeMap.set(route, {
+            pagePath: path,
+            route,
+            reason: depth === 0 ? "direct" : "transitive",
+            depth
+          });
+        }
+      }
+      if (depth >= MAX_DEPTH) continue;
+      const importers = graph.reverse.get(path);
+      if (!importers) continue;
+      for (const importer of importers) {
+        if (visited.has(importer)) continue;
+        visited.add(importer);
+        queue.push({ path: importer, depth: depth + 1 });
+      }
+    }
+  }
+  for (const file of changedFiles) {
+    if (!isLayoutFile(file)) continue;
+    const layoutDir = getLayoutDir(file);
+    for (const knownFile of graph.forward.keys()) {
+      if (knownFile.startsWith(layoutDir) && isPageFile(knownFile)) {
+        const route = pagePathToRoute(knownFile);
+        if (route !== null && !routeMap.has(route)) {
+          routeMap.set(route, {
+            pagePath: knownFile,
+            route,
+            reason: "transitive",
+            depth: 1
+          });
+        }
+      }
+    }
+  }
+  const routes = Array.from(routeMap.values());
+  logger.dim(`Found ${routes.length} affected route(s)`);
+  return routes;
+}
+
+// src/stages/worktree.ts
+import { execSync as execSync2 } from "child_process";
+import { rm, mkdtemp } from "fs/promises";
+import { join as join4 } from "path";
+import { tmpdir } from "os";
+
+// src/utils/pm.ts
+import { existsSync as existsSync2 } from "fs";
+import { join as join3 } from "path";
+function detectPackageManager(dir) {
+  if (existsSync2(join3(dir, "bun.lockb")) || existsSync2(join3(dir, "bun.lock")))
+    return "bun";
+  if (existsSync2(join3(dir, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync2(join3(dir, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+function pmExec(pm) {
+  switch (pm) {
+    case "bun":
+      return "bunx";
+    case "pnpm":
+      return "pnpm exec";
+    case "yarn":
+      return "yarn";
+    default:
+      return "npx";
+  }
+}
+
+// src/stages/worktree.ts
+async function createWorktree(base, cwd) {
+  const worktreeDir = await mkdtemp(join4(tmpdir(), "afterbefore-wt-"));
+  logger.info(`Creating worktree for ${base} at ${worktreeDir}`);
+  execSync2(`git worktree add "${worktreeDir}" "${base}"`, {
+    cwd,
+    stdio: ["pipe", "pipe", "pipe"]
+  });
+  const pm = detectPackageManager(cwd);
+  logger.info(`Installing dependencies with ${pm}`);
+  execSync2(`${pm} install`, {
+    cwd: worktreeDir,
+    stdio: ["pipe", "pipe", "pipe"]
+  });
+  const cleanup = async () => {
+    logger.dim(`Cleaning up worktree at ${worktreeDir}`);
+    try {
+      execSync2(`git worktree remove --force "${worktreeDir}"`, {
+        cwd,
+        stdio: ["pipe", "pipe", "pipe"]
+      });
+    } catch {
+      try {
+        await rm(worktreeDir, { recursive: true, force: true });
+        execSync2("git worktree prune", {
+          cwd,
+          stdio: ["pipe", "pipe", "pipe"]
+        });
+      } catch {
+        logger.warn(`Failed to clean up worktree at ${worktreeDir}`);
+      }
+    }
+  };
+  cleanupRegistry.register(cleanup);
+  return { path: worktreeDir, ref: base, cleanup };
+}
+
+// src/stages/server.ts
+import { spawn } from "child_process";
+function waitForServer(url, timeoutMs) {
+  const start = Date.now();
+  return new Promise((resolve3, reject) => {
+    const poll = async () => {
+      if (Date.now() - start > timeoutMs) {
+        reject(
+          new Error(
+            `Server at ${url} did not respond within ${timeoutMs / 1e3}s. Make sure 'next dev' starts correctly in your project.`
+          )
+        );
+        return;
+      }
+      try {
+        await fetch(url);
+        resolve3();
+      } catch {
+        setTimeout(poll, 500);
+      }
+    };
+    poll();
+  });
+}
+async function startServer(projectDir, port) {
+  const url = `http://localhost:${port}`;
+  const pm = detectPackageManager(projectDir);
+  const exec = pmExec(pm);
+  const [cmd, ...baseArgs] = exec.split(" ");
+  logger.info(`Starting Next.js dev server on ${url} (using ${pm})`);
+  const child = spawn(cmd, [...baseArgs, "next", "dev", "-p", String(port)], {
+    cwd: projectDir,
+    stdio: ["pipe", "pipe", "pipe"],
+    detached: false
+  });
+  child.stderr?.on("data", (data) => {
+    const msg = data.toString().trim();
+    if (msg) logger.dim(`[next:${port}] ${msg}`);
+  });
+  await waitForServer(url, 6e4);
+  logger.success(`Server ready at ${url}`);
+  return { port, process: child, url };
+}
+async function stopServer(server) {
+  logger.dim(`Stopping server on port ${server.port}`);
+  server.process.kill("SIGTERM");
+  await new Promise((resolve3) => {
+    const timeout = setTimeout(() => {
+      server.process.kill("SIGKILL");
+      resolve3();
+    }, 5e3);
+    server.process.on("exit", () => {
+      clearTimeout(timeout);
+      resolve3();
+    });
+  });
+}
+
+// src/stages/capture.ts
+import { join as join5 } from "path";
+import { chromium } from "playwright";
+function routeToDir(route) {
+  if (route === "/") return "_root";
+  return route.replace(/^\//, "").replace(/\//g, "_");
+}
+async function captureRoutes(routes, beforeUrl, afterUrl, outputDir) {
+  logger.info(`Capturing ${routes.length} route(s)`);
+  const browser = await chromium.launch();
+  const results = [];
+  try {
+    const context = await browser.newContext({
+      viewport: { width: 1280, height: 720 }
+    });
+    const page = await context.newPage();
+    for (const route of routes) {
+      const dirName = routeToDir(route);
+      const routeDir = join5(outputDir, dirName);
+      await ensureDir(routeDir);
+      const beforePath = join5(routeDir, "before.png");
+      const afterPath = join5(routeDir, "after.png");
+      logger.dim(`Capturing before: ${route}`);
+      await page.goto(`${beforeUrl}${route}`, { waitUntil: "networkidle" });
+      await page.waitForTimeout(500);
+      await page.screenshot({ path: beforePath, fullPage: true });
+      logger.dim(`Capturing after: ${route}`);
+      await page.goto(`${afterUrl}${route}`, { waitUntil: "networkidle" });
+      await page.waitForTimeout(500);
+      await page.screenshot({ path: afterPath, fullPage: true });
+      results.push({ route, beforePath, afterPath });
+      logger.success(`Captured ${route}`);
+    }
+    await context.close();
+  } finally {
+    await browser.close();
+  }
+  return results;
+}
+
+// src/stages/compare.ts
+import { readFileSync as readFileSync3 } from "fs";
+import { writeFileSync } from "fs";
+import { join as join6, dirname as dirname2 } from "path";
+import { PNG } from "pngjs";
+import pixelmatch from "pixelmatch";
+import sharp from "sharp";
+function readPng(filePath) {
+  const buffer = readFileSync3(filePath);
+  return PNG.sync.read(buffer);
+}
+function normalizeDimensions(img1, img2) {
+  const width = Math.max(img1.width, img2.width);
+  const height = Math.max(img1.height, img2.height);
+  const pad = (src) => {
+    if (src.width === width && src.height === height) return src;
+    const padded = new PNG({ width, height });
+    for (let i = 0; i < padded.data.length; i += 4) {
+      padded.data[i] = 255;
+      padded.data[i + 1] = 255;
+      padded.data[i + 2] = 255;
+      padded.data[i + 3] = 255;
+    }
+    PNG.bitblt(src, padded, 0, 0, src.width, src.height, 0, 0);
+    return padded;
+  };
+  return [pad(img1), pad(img2)];
+}
+async function generateSideBySide(beforePath, afterPath, outputPath) {
+  const labelHeight = 32;
+  const gap = 4;
+  const beforeImg = sharp(beforePath);
+  const afterImg = sharp(afterPath);
+  const [beforeMeta, afterMeta] = await Promise.all([
+    beforeImg.metadata(),
+    afterImg.metadata()
+  ]);
+  const bw = beforeMeta.width;
+  const bh = beforeMeta.height;
+  const aw = afterMeta.width;
+  const ah = afterMeta.height;
+  const totalWidth = bw + gap + aw;
+  const totalHeight = labelHeight + Math.max(bh, ah);
+  const labelSvg = (text, w) => Buffer.from(
+    `<svg width="${w}" height="${labelHeight}">
+        <rect width="${w}" height="${labelHeight}" fill="#f3f4f6"/>
+        <text x="${w / 2}" y="${labelHeight / 2 + 5}" text-anchor="middle"
+              font-family="sans-serif" font-size="14" font-weight="bold" fill="#374151">${text}</text>
+      </svg>`
+  );
+  const beforeLabel = await sharp(labelSvg("Before", bw)).png().toBuffer();
+  const afterLabel = await sharp(labelSvg("After", aw)).png().toBuffer();
+  const beforeWithLabel = await sharp({
+    create: {
+      width: bw,
+      height: labelHeight + bh,
+      channels: 4,
+      background: { r: 255, g: 255, b: 255, alpha: 1 }
+    }
+  }).composite([
+    { input: beforeLabel, top: 0, left: 0 },
+    { input: await sharp(beforePath).png().toBuffer(), top: labelHeight, left: 0 }
+  ]).png().toBuffer();
+  const afterWithLabel = await sharp({
+    create: {
+      width: aw,
+      height: labelHeight + ah,
+      channels: 4,
+      background: { r: 255, g: 255, b: 255, alpha: 1 }
+    }
+  }).composite([
+    { input: afterLabel, top: 0, left: 0 },
+    { input: await sharp(afterPath).png().toBuffer(), top: labelHeight, left: 0 }
+  ]).png().toBuffer();
+  await sharp({
+    create: {
+      width: totalWidth,
+      height: totalHeight,
+      channels: 4,
+      background: { r: 229, g: 231, b: 235, alpha: 1 }
+    }
+  }).composite([
+    { input: beforeWithLabel, top: 0, left: 0 },
+    { input: afterWithLabel, top: 0, left: bw + gap }
+  ]).png().toFile(outputPath);
+}
+async function compareScreenshots(captures, outputDir, threshold = 0.1) {
+  logger.info(`Comparing ${captures.length} route(s)`);
+  const results = [];
+  for (const capture of captures) {
+    const routeDir = dirname2(capture.beforePath);
+    const diffPath = join6(routeDir, "diff.png");
+    const sideBySidePath = join6(routeDir, "side-by-side.png");
+    const sliderPath = join6(routeDir, "slider.html");
+    await ensureDir(routeDir);
+    const beforeImg = readPng(capture.beforePath);
+    const afterImg = readPng(capture.afterPath);
+    const [normBefore, normAfter] = normalizeDimensions(beforeImg, afterImg);
+    const { width, height } = normBefore;
+    const totalPixels = width * height;
+    const diffImg = new PNG({ width, height });
+    const diffPixels = pixelmatch(
+      normBefore.data,
+      normAfter.data,
+      diffImg.data,
+      width,
+      height,
+      { threshold: 0.1 }
+    );
+    writeFileSync(diffPath, PNG.sync.write(diffImg));
+    await generateSideBySide(
+      capture.beforePath,
+      capture.afterPath,
+      sideBySidePath
+    );
+    const diffPercentage = diffPixels / totalPixels * 100;
+    const changed = diffPercentage > threshold;
+    if (changed) {
+      logger.warn(
+        `${capture.route}: ${diffPercentage.toFixed(2)}% changed (${diffPixels} pixels)`
+      );
+    } else {
+      logger.success(`${capture.route}: no visual changes`);
+    }
+    results.push({
+      route: capture.route,
+      beforePath: capture.beforePath,
+      afterPath: capture.afterPath,
+      diffPath,
+      sideBySidePath,
+      sliderPath,
+      diffPixels,
+      totalPixels,
+      diffPercentage,
+      changed
+    });
+  }
+  return results;
+}
+
+// src/stages/report.ts
+import { writeFileSync as writeFileSync2 } from "fs";
+import { join as join7 } from "path";
+import { execSync as execSync3 } from "child_process";
+
+// src/templates/report.html.ts
+import { readFileSync as readFileSync4 } from "fs";
+function toBase64(filePath) {
+  return readFileSync4(filePath).toString("base64");
+}
+function imgSrc(filePath) {
+  return `data:image/png;base64,${toBase64(filePath)}`;
+}
+function generateReportHtml(results) {
+  const changed = results.filter((r) => r.changed);
+  const unchanged = results.filter((r) => !r.changed);
+  const card = (r) => `
+    <div class="card ${r.changed ? "changed" : "unchanged"}">
+      <div class="card-header">
+        <span class="route">${r.route}</span>
+        <span class="badge ${r.changed ? "badge-changed" : "badge-unchanged"}">
+          ${r.changed ? `${r.diffPercentage.toFixed(2)}% changed` : "No change"}
+        </span>
+      </div>
+      <div class="images">
+        <div class="img-col">
+          <div class="label">Before</div>
+          <img src="${imgSrc(r.beforePath)}" alt="Before" />
+        </div>
+        <div class="img-col">
+          <div class="label">After</div>
+          <img src="${imgSrc(r.afterPath)}" alt="After" />
+        </div>
+        <div class="img-col">
+          <div class="label">Diff</div>
+          <img src="${imgSrc(r.diffPath)}" alt="Diff" />
+        </div>
+      </div>
+      ${r.changed ? `<a class="slider-link" href="${r.sliderPath}">Open slider view</a>` : ""}
+    </div>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>afterbefore Report</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9fafb; color: #111827; padding: 24px; }
+  h1 { font-size: 24px; margin-bottom: 8px; }
+  .summary { color: #6b7280; margin-bottom: 24px; font-size: 14px; }
+  .grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
+  .card { background: #fff; border-radius: 8px; border: 1px solid #e5e7eb; overflow: hidden; }
+  .card.changed { border-color: #fbbf24; }
+  .card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+  .route { font-weight: 600; font-size: 16px; font-family: monospace; }
+  .badge { font-size: 12px; padding: 2px 8px; border-radius: 9999px; font-weight: 500; }
+  .badge-changed { background: #fef3c7; color: #92400e; }
+  .badge-unchanged { background: #d1fae5; color: #065f46; }
+  .images { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: #e5e7eb; }
+  .img-col { background: #fff; padding: 8px; }
+  .img-col img { width: 100%; height: auto; display: block; border-radius: 4px; }
+  .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 4px; font-weight: 600; }
+  .slider-link { display: block; padding: 8px 16px; text-align: center; font-size: 13px; color: #2563eb; text-decoration: none; border-top: 1px solid #e5e7eb; }
+  .slider-link:hover { background: #eff6ff; }
+  .section-title { font-size: 18px; font-weight: 600; margin: 24px 0 12px; }
+</style>
+</head>
+<body>
+<h1>afterbefore Report</h1>
+<p class="summary">${results.length} route(s) captured, ${changed.length} with visual changes.</p>
+
+${changed.length > 0 ? `<h2 class="section-title">Changed (${changed.length})</h2><div class="grid">${changed.map(card).join("")}</div>` : ""}
+${unchanged.length > 0 ? `<h2 class="section-title">Unchanged (${unchanged.length})</h2><div class="grid">${unchanged.map(card).join("")}</div>` : ""}
+
+</body>
+</html>`;
+}
+
+// src/templates/slider.html.ts
+import { readFileSync as readFileSync5 } from "fs";
+function toBase642(filePath) {
+  return readFileSync5(filePath).toString("base64");
+}
+function imgSrc2(filePath) {
+  return `data:image/png;base64,${toBase642(filePath)}`;
+}
+function generateSliderHtml(result) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>afterbefore Slider - ${result.route}</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9fafb; color: #111827; padding: 24px; }
+  h1 { font-size: 20px; margin-bottom: 4px; }
+  .meta { color: #6b7280; font-size: 13px; margin-bottom: 16px; }
+  .container { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; user-select: none; cursor: ew-resize; }
+  .container img { display: block; width: 100%; height: auto; }
+  .before-wrap { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
+  .before-wrap img { display: block; height: 100%; width: auto; min-width: 100%; object-fit: cover; }
+  .slider-line { position: absolute; top: 0; width: 3px; height: 100%; background: #2563eb; cursor: ew-resize; z-index: 10; }
+  .slider-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #2563eb; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
+  .slider-handle::before { content: '\\2194'; color: #fff; font-size: 18px; }
+  .labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+</style>
+</head>
+<body>
+<h1>${result.route}</h1>
+<p class="meta">${result.diffPercentage.toFixed(2)}% changed (${result.diffPixels.toLocaleString()} pixels)</p>
+
+<div class="container" id="slider">
+  <img src="${imgSrc2(result.afterPath)}" alt="After" draggable="false" />
+  <div class="before-wrap" id="beforeWrap">
+    <img src="${imgSrc2(result.beforePath)}" alt="Before" draggable="false" />
+  </div>
+  <div class="slider-line" id="sliderLine">
+    <div class="slider-handle"></div>
+  </div>
+</div>
+<div class="labels"><span>Before</span><span>After</span></div>
+
+<script>
+(function() {
+  const container = document.getElementById('slider');
+  const beforeWrap = document.getElementById('beforeWrap');
+  const sliderLine = document.getElementById('sliderLine');
+  let dragging = false;
+
+  function setPosition(x) {
+    const rect = container.getBoundingClientRect();
+    let pct = ((x - rect.left) / rect.width) * 100;
+    pct = Math.max(0, Math.min(100, pct));
+    beforeWrap.style.width = pct + '%';
+    sliderLine.style.left = pct + '%';
+  }
+
+  // Start at 50%
+  beforeWrap.style.width = '50%';
+  sliderLine.style.left = '50%';
+
+  container.addEventListener('mousedown', function(e) { dragging = true; setPosition(e.clientX); });
+  window.addEventListener('mousemove', function(e) { if (dragging) setPosition(e.clientX); });
+  window.addEventListener('mouseup', function() { dragging = false; });
+
+  container.addEventListener('touchstart', function(e) { dragging = true; setPosition(e.touches[0].clientX); }, { passive: true });
+  window.addEventListener('touchmove', function(e) { if (dragging) setPosition(e.touches[0].clientX); }, { passive: true });
+  window.addEventListener('touchend', function() { dragging = false; });
+})();
+</script>
+</body>
+</html>`;
+}
+
+// src/templates/summary.md.ts
+function generateSummaryMd(results) {
+  const changed = results.filter((r) => r.changed);
+  const lines = [];
+  lines.push("<!-- afterbefore -->");
+  lines.push("");
+  lines.push("## afterbefore Report");
+  lines.push("");
+  if (changed.length === 0) {
+    lines.push("No visual changes detected.");
+    lines.push("");
+    lines.push(`${results.length} route(s) captured, all unchanged.`);
+    return lines.join("\n");
+  }
+  lines.push(
+    `${results.length} route(s) captured, **${changed.length}** with visual changes.`
+  );
+  lines.push("");
+  lines.push("| Route | Diff % | Status |");
+  lines.push("|-------|--------|--------|");
+  for (const r of results) {
+    const status = r.changed ? "Changed" : "Unchanged";
+    const pct = r.changed ? `${r.diffPercentage.toFixed(2)}%` : "0%";
+    lines.push(`| \`${r.route}\` | ${pct} | ${status} |`);
+  }
+  return lines.join("\n");
+}
+
+// src/stages/report.ts
+var COMMENT_MARKER = "<!-- afterbefore -->";
+function findPrNumber() {
+  try {
+    const output = execSync3("gh pr view --json number -q .number", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    return output || null;
+  } catch {
+    return null;
+  }
+}
+function findExistingCommentId(prNumber) {
+  try {
+    const output = execSync3(
+      `gh api repos/{owner}/{repo}/issues/${prNumber}/comments --jq '.[] | select(.body | contains("${COMMENT_MARKER}")) | .id'`,
+      { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] }
+    ).trim();
+    const ids = output.split("\n").filter(Boolean);
+    return ids[0] || null;
+  } catch {
+    return null;
+  }
+}
+function postOrUpdateComment(prNumber, body) {
+  const existingId = findExistingCommentId(prNumber);
+  if (existingId) {
+    logger.info(`Updating existing PR comment (id: ${existingId})`);
+    execSync3(
+      `gh api repos/{owner}/{repo}/issues/comments/${existingId} -X PATCH -f body=@-`,
+      {
+        input: body,
+        encoding: "utf-8",
+        stdio: ["pipe", "pipe", "pipe"]
+      }
+    );
+  } else {
+    logger.info(`Creating new PR comment`);
+    execSync3(
+      `gh api repos/{owner}/{repo}/issues/${prNumber}/comments -f body=@-`,
+      {
+        input: body,
+        encoding: "utf-8",
+        stdio: ["pipe", "pipe", "pipe"]
+      }
+    );
+  }
+}
+async function generateReport(results, outputDir, options) {
+  await ensureDir(outputDir);
+  const summaryMd = generateSummaryMd(results);
+  const summaryPath = join7(outputDir, "summary.md");
+  writeFileSync2(summaryPath, summaryMd, "utf-8");
+  logger.success(`Written summary to ${summaryPath}`);
+  const reportHtml = generateReportHtml(results);
+  const indexPath = join7(outputDir, "index.html");
+  writeFileSync2(indexPath, reportHtml, "utf-8");
+  logger.success(`Written report to ${indexPath}`);
+  for (const result of results) {
+    if (!result.changed) continue;
+    const sliderHtml = generateSliderHtml(result);
+    writeFileSync2(result.sliderPath, sliderHtml, "utf-8");
+    logger.dim(`Written slider for ${result.route}`);
+  }
+  if (options.post) {
+    const prNumber = findPrNumber();
+    if (!prNumber) {
+      logger.warn(
+        "Could not find PR number. Make sure you are on a branch with an open PR and `gh` is authenticated."
+      );
+      return;
+    }
+    postOrUpdateComment(prNumber, summaryMd);
+    logger.success(`Posted results to PR #${prNumber}`);
+  }
+}
+
+// src/pipeline.ts
+async function runPipeline(options) {
+  const { base, output, post, cwd } = options;
+  const outputDir = resolve2(cwd, output);
+  try {
+    const spinner = logger.spin("Analyzing git diff...");
+    const diffFiles = getChangedFiles(base, cwd);
+    spinner.stop();
+    if (diffFiles.length === 0) {
+      logger.success("No changed files detected. Nothing to do.");
+      return;
+    }
+    logger.info(`Found ${diffFiles.length} changed file(s)`);
+    const classified = classifyFiles(diffFiles);
+    const visualFiles = filterVisuallyRelevant(classified);
+    const impactfulFiles = classified.filter(
+      (f) => f.category !== "test" && f.category !== "other"
+    );
+    if (impactfulFiles.length === 0) {
+      logger.success(
+        "No visually relevant changes detected (only test/other files changed)."
+      );
+      return;
+    }
+    logger.info(
+      `${visualFiles.length} visually relevant file(s), ${impactfulFiles.length} potentially impactful`
+    );
+    const graphSpinner = logger.spin("Building import graph...");
+    const graph = await buildImportGraph(cwd);
+    graphSpinner.stop();
+    const changedPaths = impactfulFiles.map((f) => f.path);
+    const affectedRoutes = findAffectedRoutes(changedPaths, graph, cwd);
+    if (affectedRoutes.length === 0) {
+      logger.success(
+        "No affected routes found. Changed files don't impact any pages."
+      );
+      return;
+    }
+    logger.info(
+      `Affected routes: ${affectedRoutes.map((r) => r.route).join(", ")}`
+    );
+    await ensureDir(outputDir);
+    const worktree = await createWorktree(base, cwd);
+    const beforePort = await findAvailablePort();
+    const afterPort = await findAvailablePort(/* @__PURE__ */ new Set([beforePort]));
+    const beforeServer = await startServer(worktree.path, beforePort);
+    cleanupRegistry.register(() => stopServer(beforeServer));
+    const afterServer = await startServer(cwd, afterPort);
+    cleanupRegistry.register(() => stopServer(afterServer));
+    const routes = affectedRoutes.map((r) => r.route);
+    const captures = await captureRoutes(
+      routes,
+      beforeServer.url,
+      afterServer.url,
+      outputDir
+    );
+    const results = await compareScreenshots(captures, outputDir, options.threshold);
+    await generateReport(results, outputDir, { post });
+    const changedCount = results.filter((r) => r.changed).length;
+    logger.success(
+      `Done! ${results.length} route(s) captured, ${changedCount} with visual changes.`
+    );
+    logger.info(`Output: ${outputDir}`);
+    logger.dim(`Open ${resolve2(outputDir, "index.html")} in your browser to view the report.`);
+  } finally {
+    await cleanupRegistry.runAll();
+  }
+}
+
+// src/cli.ts
+var program = new Command();
+program.name("afterbefore").description(
+  "Automatic before/after screenshot capture for PRs. Git diff is the config."
+).version("0.1.0").option("--base <ref>", "Base branch or ref to compare against", "main").option("--output <dir>", "Output directory for screenshots", ".afterbefore").option("--post", "Post results as a PR comment via gh CLI", false).option(
+  "--threshold <percent>",
+  "Diff threshold percentage (changes below this are ignored)",
+  "0.1"
+).action(async (opts) => {
+  const cwd = process.cwd();
+  if (!isGitRepo(cwd)) {
+    logger.error("Not a git repository. Run this from inside a git repo.");
+    process.exit(1);
+  }
+  const options = {
+    base: opts.base,
+    output: opts.output,
+    post: opts.post,
+    threshold: parseFloat(opts.threshold),
+    cwd
+  };
+  try {
+    await runPipeline(options);
+  } catch (err) {
+    logger.error(
+      err instanceof Error ? err.message : `Unexpected error: ${String(err)}`
+    );
+    process.exit(1);
+  }
+});
+program.parse();
+//# sourceMappingURL=cli.js.map