afterbefore 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,30 +1,66 @@
 // src/pipeline.ts
-import { resolve as resolve2 } from "path";
+import { resolve as resolve4 } from "path";
+import { exec } from "child_process";
+import chalk2 from "chalk";
 
 // src/logger.ts
 import chalk from "chalk";
 import ora from "ora";
+var BAR_WIDTH = 20;
+var BAR_SPINNER = { interval: 80, frames: [" "] };
 var Logger = class {
   spinner = null;
+  pipelineTotal = 0;
+  lastStep = 0;
+  lastLabel = "";
+  pipelineActive = false;
   info(message) {
-    this.clearSpinner();
-    console.log(chalk.blue("\u2139"), message);
+    if (this.pipelineActive) return;
+    if (this.spinner) {
+      this.spinner.clear();
+      console.log(chalk.blue("\u2139"), message);
+      this.spinner.render();
+    } else {
+      console.log(chalk.blue("\u2139"), message);
+    }
   }
   success(message) {
-    this.clearSpinner();
-    console.log(chalk.green("\u2714"), message);
+    if (this.pipelineActive) return;
+    if (this.spinner) {
+      this.spinner.clear();
+      console.log(chalk.green("\u2714"), message);
+      this.spinner.render();
+    } else {
+      console.log(chalk.green("\u2714"), message);
+    }
   }
   warn(message) {
-    this.clearSpinner();
-    console.log(chalk.yellow("\u26A0"), message);
+    if (this.spinner) {
+      this.spinner.clear();
+      console.log(chalk.yellow("\u26A0"), message);
+      this.spinner.render();
+    } else {
+      console.log(chalk.yellow("\u26A0"), message);
+    }
   }
   error(message) {
-    this.clearSpinner();
-    console.error(chalk.red("\u2716"), message);
+    if (this.spinner) {
+      this.spinner.clear();
+      console.error(chalk.red("\u2716"), message);
+      this.spinner.render();
+    } else {
+      console.error(chalk.red("\u2716"), message);
+    }
   }
   dim(message) {
-    this.clearSpinner();
-    console.log(chalk.dim(message));
+    if (this.pipelineActive) return;
+    if (this.spinner) {
+      this.spinner.clear();
+      console.log(chalk.dim(message));
+      this.spinner.render();
+    } else {
+      console.log(chalk.dim(message));
+    }
   }
   spin(message) {
     this.clearSpinner();
@@ -34,6 +70,60 @@ var Logger = class {
   stopSpinner() {
     this.clearSpinner();
   }
+  startPipeline(total) {
+    this.pipelineTotal = total;
+    this.lastStep = 0;
+    this.lastLabel = "";
+    this.pipelineActive = true;
+    this.clearSpinner();
+    const text = this.renderPipeline(0, "Starting...");
+    this.spinner = ora({
+      text: chalk.dim(text),
+      spinner: BAR_SPINNER
+    }).start();
+  }
+  pipeline(step, label) {
+    if (step === this.lastStep && label === this.lastLabel) return;
+    this.lastStep = step;
+    this.lastLabel = label;
+    const text = chalk.dim(this.renderPipeline(step, label));
+    if (!this.spinner) {
+      this.spinner = ora({
+        text,
+        spinner: BAR_SPINNER
+      }).start();
+      return;
+    }
+    this.spinner.text = text;
+  }
+  completePipeline(finished = false) {
+    this.pipelineActive = false;
+    if (this.spinner) {
+      if (finished) {
+        const bar = "\u2588".repeat(BAR_WIDTH);
+        this.spinner.stopAndPersist({
+          symbol: chalk.green("\u2714"),
+          text: bar
+        });
+      } else {
+        this.spinner.stop();
+      }
+      this.spinner = null;
+    } else if (finished) {
+      const bar = "\u2588".repeat(BAR_WIDTH);
+      console.log(`${chalk.green("\u2714")} ${bar}`);
+    }
+    this.pipelineTotal = 0;
+    this.lastStep = 0;
+    this.lastLabel = "";
+  }
+  renderPipeline(step, label) {
+    const total = this.pipelineTotal || 1;
+    const clampedStep = Math.max(0, Math.min(step, total));
+    const filled = Math.round(clampedStep / total * BAR_WIDTH);
+    const bar = "\u2588".repeat(filled) + "\u2591".repeat(BAR_WIDTH - filled);
+    return `  ${bar} ${clampedStep}/${total} ${label}`;
+  }
   clearSpinner() {
     if (this.spinner) {
       this.spinner.stop();
@@ -90,6 +180,30 @@ Received ${signal}, cleaning up...`);
 };
 var cleanupRegistry = new CleanupRegistry();
 
+// src/config.ts
+import { resolve } from "path";
+import { existsSync, readFileSync } from "fs";
+import { pathToFileURL } from "url";
+var CONFIG_FILES = [
+  "afterbefore.config.json",
+  "afterbefore.config.js",
+  "afterbefore.config.mjs"
+];
+async function loadConfig(cwd) {
+  for (const name of CONFIG_FILES) {
+    const filePath = resolve(cwd, name);
+    if (!existsSync(filePath)) continue;
+    logger.dim(`  Config: ${name}`);
+    if (name.endsWith(".json")) {
+      const raw = readFileSync(filePath, "utf-8");
+      return JSON.parse(raw);
+    }
+    const mod = await import(pathToFileURL(filePath).href);
+    return mod.default ?? mod;
+  }
+  return null;
+}
+
 // src/utils/fs.ts
 import { mkdir } from "fs/promises";
 async function ensureDir(dir) {
@@ -99,7 +213,7 @@ async function ensureDir(dir) {
 // src/utils/port.ts
 import { createServer } from "net";
 function findPort() {
-  return new Promise((resolve3, reject) => {
+  return new Promise((resolve5, reject) => {
     const server = createServer();
     server.listen(0, () => {
       const addr = server.address();
@@ -109,7 +223,7 @@ function findPort() {
         return;
       }
       const port = addr.port;
-      server.close(() => resolve3(port));
+      server.close(() => resolve5(port));
     });
     server.on("error", reject);
   });
@@ -138,6 +252,112 @@ function getDiffNameStatus(base, cwd) {
   const mergeBase = getMergeBase(base, cwd);
   return git(`diff --name-status ${mergeBase}`, cwd);
 }
+function getGitDiff(base, cwd) {
+  const mergeBase = getMergeBase(base, cwd);
+  return git(`diff ${mergeBase}`, cwd);
+}
+function getCurrentBranch(cwd) {
+  return git("rev-parse --abbrev-ref HEAD", cwd);
+}
+
+// src/utils/bgcolor.ts
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { resolve as resolve2 } from "path";
+var DEFAULT_BG = "#0a0a0a";
+var GLOBAL_CSS_PATHS = [
+  "app/globals.css",
+  "src/app/globals.css",
+  "styles/globals.css",
+  "src/styles/globals.css",
+  "app/global.css",
+  "src/app/global.css"
+];
+function hslToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function parseColorValue(raw) {
+  const v = raw.trim();
+  if (/^#[0-9a-fA-F]{3,8}$/.test(v)) {
+    if (v.length === 4) {
+      return `#${v[1]}${v[1]}${v[2]}${v[2]}${v[3]}${v[3]}`;
+    }
+    return v.slice(0, 7);
+  }
+  const hslMatch = v.match(
+    /^hsl\(\s*([\d.]+)[,\s]+\s*([\d.]+)%[,\s]+\s*([\d.]+)%/
+  );
+  if (hslMatch) {
+    return hslToHex(
+      parseFloat(hslMatch[1]),
+      parseFloat(hslMatch[2]),
+      parseFloat(hslMatch[3])
+    );
+  }
+  const bareHsl = v.match(/^([\d.]+)\s+([\d.]+)%\s+([\d.]+)%$/);
+  if (bareHsl) {
+    return hslToHex(
+      parseFloat(bareHsl[1]),
+      parseFloat(bareHsl[2]),
+      parseFloat(bareHsl[3])
+    );
+  }
+  const rgbMatch = v.match(
+    /^rgb\(\s*([\d.]+)[,\s]+\s*([\d.]+)[,\s]+\s*([\d.]+)/
+  );
+  if (rgbMatch) {
+    const toHex = (n) => Math.round(parseFloat(n)).toString(16).padStart(2, "0");
+    return `#${toHex(rgbMatch[1])}${toHex(rgbMatch[2])}${toHex(rgbMatch[3])}`;
+  }
+  return null;
+}
+function detectBgColor(cwd) {
+  for (const relPath of GLOBAL_CSS_PATHS) {
+    const absPath = resolve2(cwd, relPath);
+    if (!existsSync2(absPath)) continue;
+    const css = readFileSync2(absPath, "utf-8");
+    const darkBlock = css.match(/\.dark\s*\{([^}]+)\}/);
+    if (darkBlock) {
+      const bgVar = darkBlock[1].match(/--background\s*:\s*([^;]+)/);
+      if (bgVar) {
+        const color = parseColorValue(bgVar[1]);
+        if (color) return color;
+      }
+    }
+    const rootBlock = css.match(/:root\s*\{([^}]+)\}/);
+    if (rootBlock) {
+      const bgVar = rootBlock[1].match(/--background\s*:\s*([^;]+)/);
+      if (bgVar) {
+        const color = parseColorValue(bgVar[1]);
+        if (color) return color;
+      }
+    }
+    const anyBgVar = css.match(/--background\s*:\s*([^;]+)/);
+    if (anyBgVar) {
+      const color = parseColorValue(anyBgVar[1]);
+      if (color) return color;
+    }
+    const bodyBg = css.match(
+      /body\s*\{[^}]*?background(?:-color)?\s*:\s*([^;]+)/
+    );
+    if (bodyBg) {
+      const val = bodyBg[1].trim();
+      if (!val.startsWith("var(")) {
+        const color = parseColorValue(val);
+        if (color) return color;
+      }
+    }
+    break;
+  }
+  return DEFAULT_BG;
+}
 
 // src/stages/diff.ts
 var VALID_STATUSES = /* @__PURE__ */ new Set(["A", "M", "D", "R", "C"]);
@@ -163,6 +383,17 @@ function getChangedFiles(base, cwd) {
 }
 
 // src/stages/classify.ts
+var GLOBAL_FILES = /* @__PURE__ */ new Set([
+  "tailwind.config.ts",
+  "tailwind.config.js",
+  "postcss.config.js",
+  "postcss.config.mjs",
+  "postcss.config.cjs"
+]);
+function isGlobalVisualFile(filePath) {
+  const p = filePath.replace(/^src\//, "");
+  return GLOBAL_FILES.has(p) || /globals?\.(css|scss)$/.test(p);
+}
 var VISUAL_CATEGORIES = /* @__PURE__ */ new Set([
   "page",
   "component",
@@ -210,13 +441,13 @@ function filterVisuallyRelevant(files) {
 }
 
 // src/stages/graph.ts
-import { readdirSync, readFileSync as readFileSync2 } from "fs";
+import { readdirSync, readFileSync as readFileSync4 } 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";
+import { existsSync as existsSync3, readFileSync as readFileSync3, statSync } from "fs";
+import { resolve as resolve3, dirname, join } from "path";
 var EXTENSIONS = [".ts", ".tsx", ".js", ".jsx"];
 function createResolver(projectRoot) {
   const mappings = loadPathMappings(projectRoot);
@@ -224,7 +455,7 @@ function createResolver(projectRoot) {
   function cachedExists(p) {
     const cached = existsCache.get(p);
     if (cached !== void 0) return cached;
-    const result = existsSync(p);
+    const result = existsSync3(p);
     existsCache.set(p, result);
     return result;
   }
@@ -250,14 +481,14 @@ function createResolver(projectRoot) {
   return (specifier, fromFile) => {
     if (specifier.startsWith(".")) {
       const dir = dirname(fromFile);
-      const candidate = resolve(dir, specifier);
+      const candidate = resolve3(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 candidate = resolve3(projectRoot, target + rest);
         const result = tryResolve(candidate);
         if (result) return result;
       }
@@ -267,13 +498,13 @@ function createResolver(projectRoot) {
 }
 function loadPathMappings(projectRoot) {
   const tsconfigPath = join(projectRoot, "tsconfig.json");
-  if (!existsSync(tsconfigPath)) {
+  if (!existsSync3(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 raw = readFileSync3(tsconfigPath, "utf-8");
+    const cleaned = stripJsonComments(raw);
     const config = JSON.parse(cleaned);
     const paths = config?.compilerOptions?.paths;
     if (!paths) return [];
@@ -295,6 +526,52 @@ function loadPathMappings(projectRoot) {
     return [];
   }
 }
+function stripJsonComments(input) {
+  let result = "";
+  let i = 0;
+  const len = input.length;
+  while (i < len) {
+    const ch = input[i];
+    if (ch === '"') {
+      let j = i + 1;
+      while (j < len) {
+        if (input[j] === "\\") {
+          j += 2;
+        } else if (input[j] === '"') {
+          j++;
+          break;
+        } else {
+          j++;
+        }
+      }
+      result += input.slice(i, j);
+      i = j;
+      continue;
+    }
+    if (ch === "/" && input[i + 1] === "/") {
+      i += 2;
+      while (i < len && input[i] !== "\n") i++;
+      continue;
+    }
+    if (ch === "/" && input[i + 1] === "*") {
+      i += 2;
+      while (i < len && !(input[i] === "*" && input[i + 1] === "/")) i++;
+      i += 2;
+      continue;
+    }
+    if (ch === ",") {
+      let j = i + 1;
+      while (j < len && /\s/.test(input[j])) j++;
+      if (input[j] === "}" || input[j] === "]") {
+        i = j;
+        continue;
+      }
+    }
+    result += ch;
+    i++;
+  }
+  return result;
+}
 
 // src/stages/graph.ts
 var SOURCE_EXTENSIONS = /* @__PURE__ */ new Set([".ts", ".tsx", ".js", ".jsx"]);
@@ -326,7 +603,7 @@ function collectFiles(dir) {
 function parseImports(filePath) {
   let source;
   try {
-    source = readFileSync2(filePath, "utf-8");
+    source = readFileSync4(filePath, "utf-8");
   } catch {
     return [];
   }
@@ -346,7 +623,7 @@ function parseImports(filePath) {
 }
 async function buildImportGraph(projectRoot) {
   await init;
-  const resolve3 = createResolver(projectRoot);
+  const resolve5 = createResolver(projectRoot);
   const allFiles = [];
   for (const dir of SOURCE_DIRS) {
     const fullDir = join2(projectRoot, dir);
@@ -360,7 +637,7 @@ async function buildImportGraph(projectRoot) {
     const specifiers = parseImports(filePath);
     const deps = /* @__PURE__ */ new Set();
     for (const spec of specifiers) {
-      const resolved = resolve3(spec, filePath);
+      const resolved = resolve5(spec, filePath);
       if (!resolved) continue;
       const relResolved = relative(projectRoot, resolved);
       deps.add(relResolved);
@@ -415,16 +692,16 @@ function getLayoutDir(filePath) {
 
 // src/stages/impact.ts
 var MAX_DEPTH = 3;
-function findAffectedRoutes(changedFiles, graph, projectRoot) {
+function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
   const routeMap = /* @__PURE__ */ new Map();
   for (const file of changedFiles) {
     const visited = /* @__PURE__ */ new Set();
     const queue = [
-      { path: file, depth: 0 }
+      { path: file, depth: 0, chain: [file] }
     ];
     visited.add(file);
     while (queue.length > 0) {
-      const { path, depth } = queue.shift();
+      const { path, depth, chain } = queue.shift();
       if (isPageFile(path)) {
         const route = pagePathToRoute(path);
         if (route !== null && !routeMap.has(route)) {
@@ -432,7 +709,8 @@ function findAffectedRoutes(changedFiles, graph, projectRoot) {
             pagePath: path,
             route,
             reason: depth === 0 ? "direct" : "transitive",
-            depth
+            depth,
+            triggerChain: chain
           });
         }
       }
@@ -442,7 +720,7 @@ function findAffectedRoutes(changedFiles, graph, projectRoot) {
       for (const importer of importers) {
         if (visited.has(importer)) continue;
         visited.add(importer);
-        queue.push({ path: importer, depth: depth + 1 });
+        queue.push({ path: importer, depth: depth + 1, chain: [...chain, importer] });
       }
     }
   }
@@ -457,13 +735,25 @@ function findAffectedRoutes(changedFiles, graph, projectRoot) {
             pagePath: knownFile,
             route,
             reason: "transitive",
-            depth: 1
+            depth: 1,
+            triggerChain: [file, knownFile]
           });
         }
       }
     }
   }
-  const routes = Array.from(routeMap.values());
+  const routes = Array.from(routeMap.values()).sort(
+    (a, b) => a.depth - b.depth
+  );
+  if (maxRoutes > 0 && routes.length > maxRoutes) {
+    const skipped = routes.length - maxRoutes;
+    logger.warn(
+      `Limiting to ${maxRoutes} route(s), skipping ${skipped} deeper route(s). Use --max-routes 0 for unlimited.`
+    );
+    const limited = routes.slice(0, maxRoutes);
+    logger.dim(`Found ${limited.length} affected route(s) (of ${routes.length} total)`);
+    return limited;
+  }
   logger.dim(`Found ${routes.length} affected route(s)`);
   return routes;
 }
@@ -474,14 +764,23 @@ import { rm, mkdtemp } from "fs/promises";
 import { join as join4 } from "path";
 import { tmpdir } from "os";
 
+// src/errors.ts
+var AfterbeforeError = class extends Error {
+  constructor(message, suggestion) {
+    super(message);
+    this.suggestion = suggestion;
+    this.name = "AfterbeforeError";
+  }
+};
+
 // src/utils/pm.ts
-import { existsSync as existsSync2 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 import { join as join3 } from "path";
 function detectPackageManager(dir) {
-  if (existsSync2(join3(dir, "bun.lockb")) || existsSync2(join3(dir, "bun.lock")))
+  if (existsSync4(join3(dir, "bun.lockb")) || existsSync4(join3(dir, "bun.lock")))
     return "bun";
-  if (existsSync2(join3(dir, "pnpm-lock.yaml"))) return "pnpm";
-  if (existsSync2(join3(dir, "yarn.lock"))) return "yarn";
+  if (existsSync4(join3(dir, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync4(join3(dir, "yarn.lock"))) return "yarn";
   return "npm";
 }
 function pmExec(pm) {
@@ -500,13 +799,20 @@ function pmExec(pm) {
 // 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"]
-  });
+  logger.dim(`Creating worktree for ${base} at ${worktreeDir}`);
+  try {
+    execSync2(`git worktree add "${worktreeDir}" "${base}"`, {
+      cwd,
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+  } catch (err) {
+    throw new AfterbeforeError(
+      `Failed to create worktree for ref "${base}".`,
+      `Make sure the branch/ref "${base}" exists. Run "git branch -a" to see available refs.`
+    );
+  }
   const pm = detectPackageManager(cwd);
-  logger.info(`Installing dependencies with ${pm}`);
+  logger.dim(`Installing dependencies with ${pm}`);
   execSync2(`${pm} install`, {
     cwd: worktreeDir,
     stdio: ["pipe", "pipe", "pipe"]
@@ -536,21 +842,24 @@ async function createWorktree(base, cwd) {
 
 // src/stages/server.ts
 import { spawn } from "child_process";
+import { existsSync as existsSync5 } from "fs";
+import { join as join5 } from "path";
 function waitForServer(url, timeoutMs) {
   const start = Date.now();
-  return new Promise((resolve3, reject) => {
+  return new Promise((resolve5, 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.`
+          new AfterbeforeError(
+            `Server at ${url} did not respond within ${timeoutMs / 1e3}s.`,
+            `Try running "next dev" manually to check for errors. Also check if port ${url.split(":").pop()} is already in use.`
           )
         );
         return;
       }
       try {
         await fetch(url);
-        resolve3();
+        resolve5();
       } catch {
         setTimeout(poll, 500);
       }
@@ -561,13 +870,20 @@ function waitForServer(url, timeoutMs) {
 async function startServer(projectDir, port) {
   const url = `http://localhost:${port}`;
   const pm = detectPackageManager(projectDir);
-  const exec = pmExec(pm);
-  const [cmd, ...baseArgs] = exec.split(" ");
+  const exec2 = pmExec(pm);
+  const [cmd, ...baseArgs] = exec2.split(" ");
+  const lockFile = join5(projectDir, ".next", "dev", "lock");
+  if (existsSync5(lockFile)) {
+    throw new AfterbeforeError(
+      `Another Next.js dev server is running in ${projectDir} (.next/dev/lock exists).`,
+      `Stop the other dev server first, or delete .next/dev/lock if it's stale.`
+    );
+  }
   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
+    detached: true
   });
   child.stderr?.on("data", (data) => {
     const msg = data.toString().trim();
@@ -579,70 +895,582 @@ async function startServer(projectDir, port) {
 }
 async function stopServer(server) {
   logger.dim(`Stopping server on port ${server.port}`);
-  server.process.kill("SIGTERM");
-  await new Promise((resolve3) => {
+  const pid = server.process.pid;
+  try {
+    process.kill(-pid, "SIGTERM");
+  } catch {
+  }
+  await new Promise((resolve5) => {
     const timeout = setTimeout(() => {
-      server.process.kill("SIGKILL");
-      resolve3();
+      try {
+        process.kill(-pid, "SIGKILL");
+      } catch {
+      }
+      resolve5();
     }, 5e3);
     server.process.on("exit", () => {
       clearTimeout(timeout);
-      resolve3();
+      resolve5();
     });
   });
 }
 
 // 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, "_");
+import { join as join6 } from "path";
+import { execSync as execSync3 } from "child_process";
+import { chromium, devices } from "playwright";
+
+// src/utils/tabs.ts
+async function detectTabs(page, maxTabs) {
+  const allTabs = await page.evaluate(() => {
+    const tablists = document.querySelectorAll('[role="tablist"]');
+    const results = [];
+    for (const tablist of tablists) {
+      if (tablist.closest('[role="tabpanel"]')) continue;
+      const tabs = tablist.querySelectorAll('[role="tab"]');
+      for (const tab of tabs) {
+        const label = (tab.textContent ?? "").trim();
+        if (!label) continue;
+        const selected = tab.getAttribute("aria-selected") === "true" || tab.getAttribute("data-state") === "active";
+        results.push({ label, selected });
+      }
+    }
+    return results;
+  });
+  return allTabs.filter((t) => !t.selected).slice(0, maxTabs);
 }
-async function captureRoutes(routes, beforeUrl, afterUrl, outputDir) {
-  logger.info(`Capturing ${routes.length} route(s)`);
-  const browser = await chromium.launch();
-  const results = [];
+function sanitizeTabLabel(label) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
+}
+
+// src/utils/sections.ts
+async function detectSections(page, maxSections) {
+  const sections = await page.evaluate((max) => {
+    const headings = Array.from(document.querySelectorAll("h2, h3"));
+    const valid = headings.filter((h) => (h.textContent ?? "").trim().length > 0);
+    if (valid.length < 3) return [];
+    const results = [];
+    const tagged = /* @__PURE__ */ new Set();
+    let idx = 0;
+    for (const heading of valid) {
+      if (idx >= max) break;
+      const container = findSectionContainer(heading);
+      if (!container || tagged.has(container)) continue;
+      if (container.scrollHeight > document.documentElement.scrollHeight * 0.9) continue;
+      container.setAttribute("data-ab-section", String(idx));
+      tagged.add(container);
+      results.push({
+        label: (heading.textContent ?? "").trim(),
+        index: idx
+      });
+      idx++;
+    }
+    return results;
+    function findSectionContainer(heading) {
+      let el = heading;
+      const headingTag = heading.tagName.toLowerCase();
+      while (el && el !== document.body) {
+        const parentEl = el.parentElement;
+        if (!parentEl) return el;
+        const parentTag = parentEl.tagName.toLowerCase();
+        if (parentTag === "section" || parentTag === "article") return parentEl;
+        if (parentEl.getAttribute("role") === "region") return parentEl;
+        if (parentTag === "body" || parentTag === "main") return el;
+        const siblingHeadings = parentEl.querySelectorAll(`:scope > * ${headingTag}, :scope > ${headingTag}`);
+        if (siblingHeadings.length > 1) return el;
+        el = parentEl;
+      }
+      return el;
+    }
+  }, maxSections);
+  return sections;
+}
+async function tagSectionOnPage(page, headingText, index) {
+  return page.evaluate(
+    ({ text, idx }) => {
+      const headings = Array.from(document.querySelectorAll("h2, h3"));
+      const match = headings.find(
+        (h) => (h.textContent ?? "").trim() === text
+      );
+      if (!match) return false;
+      let el = match;
+      const headingTag = match.tagName.toLowerCase();
+      while (el && el !== document.body) {
+        const parentEl = el.parentElement;
+        if (!parentEl) break;
+        const parentTag = parentEl.tagName.toLowerCase();
+        if (parentTag === "section" || parentTag === "article") {
+          el = parentEl;
+          break;
+        }
+        if (parentEl.getAttribute("role") === "region") {
+          el = parentEl;
+          break;
+        }
+        if (parentTag === "body" || parentTag === "main") break;
+        const siblingHeadings = parentEl.querySelectorAll(
+          `:scope > * ${headingTag}, :scope > ${headingTag}`
+        );
+        if (siblingHeadings.length > 1) break;
+        el = parentEl;
+      }
+      if (el) {
+        el.setAttribute("data-ab-section", String(idx));
+        return true;
+      }
+      return false;
+    },
+    { text: headingText, idx: index }
+  );
+}
+async function cleanupSectionTags(page) {
+  await page.evaluate(() => {
+    const tagged = document.querySelectorAll("[data-ab-section]");
+    for (const el of tagged) {
+      el.removeAttribute("data-ab-section");
+    }
+  });
+}
+function sanitizeSectionLabel(label) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
+}
+
+// src/stages/capture.ts
+async function launchBrowser() {
   try {
-    const context = await browser.newContext({
-      viewport: { width: 1280, height: 720 }
+    return await chromium.launch();
+  } catch {
+    logger.dim("Chromium not found, installing...");
+    execSync3("npx playwright install chromium", {
+      stdio: ["pipe", "pipe", "pipe"]
     });
-    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}`);
+    return await chromium.launch();
+  }
+}
+var MAX_COMPONENT_INSTANCES_PER_SOURCE = 20;
+function normalizePath(filePath) {
+  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
+}
+function sanitizeComponentLabel(label) {
+  return label.toLowerCase().replace(/\.[a-z0-9]+$/i, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 60);
+}
+function groupBySource(instances) {
+  const map = /* @__PURE__ */ new Map();
+  for (const instance of instances) {
+    const list = map.get(instance.source) ?? [];
+    list.push(instance);
+    map.set(instance.source, list);
+  }
+  for (const [source, list] of map.entries()) {
+    list.sort((a, b) => a.index - b.index);
+    map.set(source, list);
+  }
+  return map;
+}
+async function captureByAttr(page, attrName, attrValue, outPath) {
+  try {
+    const locator = page.locator(`[${attrName}="${attrValue}"]`).first();
+    if (await locator.count() === 0) return false;
+    await locator.screenshot({ path: outPath });
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function tagChangedComponentInstances(page, changedComponents, maxPerSource = MAX_COMPONENT_INSTANCES_PER_SOURCE) {
+  const normalized = changedComponents.map(normalizePath);
+  return page.evaluate(
+    ({ changed, maxPerSource: maxPerSource2 }) => {
+      const normalize = (p) => p.replace(/\\/g, "/").replace(/^\.\//, "");
+      const targets = changed.map((original) => {
+        const norm = normalize(original);
+        const noSrc = norm.replace(/^src\//, "");
+        return {
+          original: norm,
+          variants: Array.from(/* @__PURE__ */ new Set([norm, noSrc, `src/${noSrc}`]))
+        };
+      });
+      for (const el of document.querySelectorAll("[data-ab-comp-key]")) {
+        el.removeAttribute("data-ab-comp-key");
+      }
+      for (const el of document.querySelectorAll("[data-ab-parent-key]")) {
+        el.removeAttribute("data-ab-parent-key");
+      }
+      const getFiber = (el) => {
+        const anyEl = el;
+        for (const key in anyEl) {
+          if (key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")) {
+            return anyEl[key];
+          }
+        }
+        return null;
+      };
+      const matchSource = (rawSource) => {
+        const normalizedSource = normalize(rawSource);
+        for (const target of targets) {
+          for (const variant of target.variants) {
+            if (normalizedSource === variant || normalizedSource.endsWith(`/${variant}`)) {
+              return target.original;
+            }
+          }
+        }
+        return null;
+      };
+      const getComponentMatch = (el) => {
+        const fiber = getFiber(el);
+        if (!fiber) return null;
+        let current = fiber;
+        while (current) {
+          const sourceFile = current?._debugSource?.fileName ?? current?.elementType?._debugSource?.fileName ?? current?.type?._debugSource?.fileName;
+          if (typeof sourceFile === "string") {
+            const source = matchSource(sourceFile);
+            if (source) {
+              const type = current?.elementType ?? current?.type;
+              const name = typeof type === "function" && (type.displayName || type.name) || (typeof type === "string" ? type : void 0) || source.split("/").pop() || source;
+              return { source, name };
+            }
+          }
+          current = current.return;
+        }
+        return null;
+      };
+      const pickParentContainer = (el) => {
+        const ownRect = el.getBoundingClientRect();
+        let parent = el.parentElement;
+        while (parent && parent !== document.body) {
+          const rect = parent.getBoundingClientRect();
+          if (rect.width >= ownRect.width * 1.15 || rect.height >= ownRect.height * 1.15) {
+            return parent;
+          }
+          parent = parent.parentElement;
+        }
+        return el.parentElement ?? el;
+      };
+      const bySource = /* @__PURE__ */ new Map();
+      const elements = Array.from(document.querySelectorAll("body *"));
+      for (const el of elements) {
+        const rect = el.getBoundingClientRect();
+        if (rect.width < 4 || rect.height < 4) continue;
+        if (rect.bottom < 0 || rect.right < 0) continue;
+        const match = getComponentMatch(el);
+        if (!match) continue;
+        const parent = el.parentElement;
+        if (parent) {
+          const parentMatch = getComponentMatch(parent);
+          if (parentMatch && parentMatch.source === match.source) {
+            continue;
+          }
+        }
+        const list = bySource.get(match.source) ?? [];
+        list.push({
+          el,
+          parent: pickParentContainer(el),
+          name: match.name,
+          top: rect.top + window.scrollY,
+          left: rect.left + window.scrollX
+        });
+        bySource.set(match.source, list);
+      }
+      const tagged = [];
+      for (let sourceIndex = 0; sourceIndex < targets.length; sourceIndex++) {
+        const source = targets[sourceIndex].original;
+        const list = bySource.get(source) ?? [];
+        list.sort((a, b) => a.top === b.top ? a.left - b.left : a.top - b.top);
+        const limit = Math.min(list.length, maxPerSource2);
+        for (let i = 0; i < limit; i++) {
+          const instance = list[i];
+          const componentKey = `ab-comp-${sourceIndex}-${i}`;
+          const parentKey = `ab-parent-${sourceIndex}-${i}`;
+          instance.el.setAttribute("data-ab-comp-key", componentKey);
+          instance.parent.setAttribute("data-ab-parent-key", parentKey);
+          tagged.push({
+            source,
+            name: instance.name,
+            index: i,
+            componentKey,
+            parentKey
+          });
+        }
+      }
+      return tagged;
+    },
+    { changed: normalized, maxPerSource }
+  );
+}
+async function captureAutoSections(afterPage, beforePage, parentPrefix, parentLabel, outputDir, options, settle, results) {
+  const sections = await detectSections(afterPage, options.maxSectionsPerRoute);
+  if (sections.length === 0) return;
+  const usedSlugs = /* @__PURE__ */ new Set();
+  for (const section of sections) {
+    let slug = sanitizeSectionLabel(section.label);
+    if (!slug) continue;
+    if (usedSlugs.has(slug)) {
+      let suffix = 2;
+      while (usedSlugs.has(`${slug}-${suffix}`)) suffix++;
+      slug = `${slug}-${suffix}`;
     }
-    await context.close();
+    usedSlugs.add(slug);
+    const sectionPrefix = `${parentPrefix}~s.${slug}`;
+    const sectionLabel = `${parentLabel} [${section.label}]`;
+    const sectionAfterPath = join6(outputDir, `${sectionPrefix}-after.png`);
+    const sectionBeforePath = join6(outputDir, `${sectionPrefix}-before.png`);
+    try {
+      const afterEl = afterPage.locator(`[data-ab-section="${section.index}"]`).first();
+      await afterEl.screenshot({ path: sectionAfterPath });
+      const found = await tagSectionOnPage(beforePage, section.label, section.index);
+      if (found) {
+        const beforeEl = beforePage.locator(`[data-ab-section="${section.index}"]`).first();
+        await beforeEl.screenshot({ path: sectionBeforePath });
+      } else {
+        continue;
+      }
+      results.push({
+        route: sectionLabel,
+        prefix: sectionPrefix,
+        beforePath: sectionBeforePath,
+        afterPath: sectionAfterPath
+      });
+    } catch {
+    }
+  }
+  await cleanupSectionTags(afterPage);
+  await cleanupSectionTags(beforePage);
+}
+async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
+  const browser = options.browser ?? await launchBrowser();
+  const ownsBrowser = !options.browser;
+  const results = [];
+  try {
+    const device = options.device ? devices[options.device] : void 0;
+    const contextOpts = device ? { ...device } : {
+      viewport: { width: options.width, height: options.height },
+      deviceScaleFactor: 2
+    };
+    const [beforeCtx, afterCtx] = await Promise.all([
+      browser.newContext(contextOpts),
+      browser.newContext(contextOpts)
+    ]);
+    const [beforePage, afterPage] = await Promise.all([
+      beforeCtx.newPage(),
+      afterCtx.newPage()
+    ]);
+    for (let i = 0; i < tasks.length; i++) {
+      const task = tasks[i];
+      options.onProgress?.(i + 1, task.label);
+      const beforePath = join6(outputDir, `${task.prefix}-before.png`);
+      const afterPath = join6(outputDir, `${task.prefix}-after.png`);
+      const settle = async (page) => {
+        await page.evaluate("document.fonts.ready");
+        if (options.delay > 0) {
+          await page.waitForTimeout(options.delay);
+        }
+      };
+      const performActions = async (page, actions) => {
+        for (const action of actions) {
+          if (action.click) {
+            await page.locator(action.click).first().click();
+          }
+          if (action.scroll) {
+            await page.locator(action.scroll).first().scrollIntoViewIfNeeded();
+          }
+          if (action.wait && action.wait > 0) {
+            await page.waitForTimeout(action.wait);
+          }
+          await settle(page);
+        }
+      };
+      const screenshot = async (page, path) => {
+        if (task.selector) {
+          const el = page.locator(task.selector).first();
+          await el.screenshot({ path });
+        } else {
+          await page.screenshot({ path, fullPage: true });
+        }
+      };
+      await Promise.all([
+        beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }).then(() => settle(beforePage)).then(() => task.actions ? performActions(beforePage, task.actions) : void 0).then(() => screenshot(beforePage, beforePath)),
+        afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" }).then(() => settle(afterPage)).then(() => task.actions ? performActions(afterPage, task.actions) : void 0).then(() => screenshot(afterPage, afterPath))
+      ]);
+      results.push({ route: task.label, prefix: task.prefix, beforePath, afterPath });
+      if ((task.changedComponents?.length ?? 0) > 0 && !task.actions && !task.selector) {
+        const changedComponents = Array.from(
+          new Set(task.changedComponents.map(normalizePath))
+        );
+        const [afterInstances, beforeInstances] = await Promise.all([
+          tagChangedComponentInstances(afterPage, changedComponents),
+          tagChangedComponentInstances(beforePage, changedComponents)
+        ]);
+        const afterBySource = groupBySource(afterInstances);
+        const beforeBySource = groupBySource(beforeInstances);
+        for (const source of changedComponents) {
+          const afterList = afterBySource.get(source) ?? [];
+          const beforeList = beforeBySource.get(source) ?? [];
+          const pairCount = Math.min(afterList.length, beforeList.length);
+          if (pairCount === 0) continue;
+          for (let pairIndex = 0; pairIndex < pairCount; pairIndex++) {
+            const afterInstance = afterList[pairIndex];
+            const beforeInstance = beforeList[pairIndex];
+            const sourceSlug = sanitizeComponentLabel(source) || "component";
+            const itemSlug = `${sourceSlug}-${pairIndex + 1}`;
+            const componentName = afterInstance.name || beforeInstance.name || source.split("/").pop() || source;
+            const baseLabel = `${task.label} [${componentName} #${pairIndex + 1}]`;
+            const contextPrefix = `${task.prefix}~cmp.${itemSlug}~context`;
+            results.push({
+              route: `${baseLabel} [context]`,
+              prefix: contextPrefix,
+              beforePath,
+              afterPath
+            });
+            const parentPrefix = `${task.prefix}~cmp.${itemSlug}~parent`;
+            const parentBeforePath = join6(outputDir, `${parentPrefix}-before.png`);
+            const parentAfterPath = join6(outputDir, `${parentPrefix}-after.png`);
+            const [parentBeforeOk, parentAfterOk] = await Promise.all([
+              captureByAttr(
+                beforePage,
+                "data-ab-parent-key",
+                beforeInstance.parentKey,
+                parentBeforePath
+              ),
+              captureByAttr(
+                afterPage,
+                "data-ab-parent-key",
+                afterInstance.parentKey,
+                parentAfterPath
+              )
+            ]);
+            if (parentBeforeOk && parentAfterOk) {
+              results.push({
+                route: `${baseLabel} [parent]`,
+                prefix: parentPrefix,
+                beforePath: parentBeforePath,
+                afterPath: parentAfterPath
+              });
+            }
+            const componentPrefix = `${task.prefix}~cmp.${itemSlug}~component`;
+            const componentBeforePath = join6(outputDir, `${componentPrefix}-before.png`);
+            const componentAfterPath = join6(outputDir, `${componentPrefix}-after.png`);
+            const [componentBeforeOk, componentAfterOk] = await Promise.all([
+              captureByAttr(
+                beforePage,
+                "data-ab-comp-key",
+                beforeInstance.componentKey,
+                componentBeforePath
+              ),
+              captureByAttr(
+                afterPage,
+                "data-ab-comp-key",
+                afterInstance.componentKey,
+                componentAfterPath
+              )
+            ]);
+            if (componentBeforeOk && componentAfterOk) {
+              results.push({
+                route: `${baseLabel} [component]`,
+                prefix: componentPrefix,
+                beforePath: componentBeforePath,
+                afterPath: componentAfterPath
+              });
+            }
+          }
+        }
+      }
+      if (options.autoSections && !task.actions && !task.selector && !task.skipAutoSections) {
+        await captureAutoSections(
+          afterPage,
+          beforePage,
+          task.prefix,
+          task.label,
+          outputDir,
+          options,
+          settle,
+          results
+        );
+      }
+      if (options.autoTabs && !task.actions && !task.selector && !task.skipAutoTabs) {
+        const tabs = await detectTabs(afterPage, options.maxTabsPerRoute);
+        const usedPrefixes = /* @__PURE__ */ new Set();
+        for (const tab of tabs) {
+          let slug = sanitizeTabLabel(tab.label);
+          if (!slug) continue;
+          if (usedPrefixes.has(slug)) {
+            let suffix = 2;
+            while (usedPrefixes.has(`${slug}-${suffix}`)) suffix++;
+            slug = `${slug}-${suffix}`;
+          }
+          usedPrefixes.add(slug);
+          const tabPrefix = `${task.prefix}~${slug}`;
+          const tabLabel = `${task.label} [${tab.label}]`;
+          const tabBeforePath = join6(outputDir, `${tabPrefix}-before.png`);
+          const tabAfterPath = join6(outputDir, `${tabPrefix}-after.png`);
+          try {
+            const afterUrlBefore = afterPage.url();
+            await afterPage.getByRole("tab", { name: tab.label }).first().click();
+            await settle(afterPage);
+            if (afterPage.url() !== afterUrlBefore) {
+              await afterPage.goBack({ waitUntil: "networkidle" });
+              await settle(afterPage);
+              continue;
+            }
+            await afterPage.screenshot({ path: tabAfterPath, fullPage: true });
+            try {
+              const beforeUrlBefore = beforePage.url();
+              await beforePage.getByRole("tab", { name: tab.label }).first().click({ timeout: 2e3 });
+              await settle(beforePage);
+              if (beforePage.url() !== beforeUrlBefore) {
+                await beforePage.goBack({ waitUntil: "networkidle" });
+                await settle(beforePage);
+                await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+              } else {
+                await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+              }
+            } catch {
+              await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+            }
+            results.push({
+              route: tabLabel,
+              prefix: tabPrefix,
+              beforePath: tabBeforePath,
+              afterPath: tabAfterPath
+            });
+            if (options.autoSections && !task.skipAutoSections) {
+              await captureAutoSections(
+                afterPage,
+                beforePage,
+                tabPrefix,
+                tabLabel,
+                outputDir,
+                options,
+                settle,
+                results
+              );
+            }
+          } catch {
+            logger.dim(`  Skipped tab "${tab.label}" on ${task.route}`);
+          }
+        }
+        if (tabs.length > 0) {
+          await Promise.all([
+            beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }),
+            afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" })
+          ]);
+        }
+      }
+    }
+    await Promise.all([beforeCtx.close(), afterCtx.close()]);
   } finally {
-    await browser.close();
+    if (ownsBrowser) {
+      await browser.close();
+    }
   }
   return results;
 }
 
 // src/stages/compare.ts
-import { readFileSync as readFileSync3 } from "fs";
+import { readFileSync as readFileSync5 } from "fs";
 import { writeFileSync } from "fs";
-import { join as join6, dirname as dirname2 } from "path";
+import { join as join7, 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);
@@ -660,135 +1488,106 @@ function normalizeDimensions(img1, img2) {
   };
   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 generateComposite(beforePath, afterPath, outputPath, browser, bgColor) {
+  const beforeUri = `data:image/png;base64,${readFileSync5(beforePath).toString("base64")}`;
+  const afterUri = `data:image/png;base64,${readFileSync5(afterPath).toString("base64")}`;
+  const page = await browser.newPage({
+    viewport: { width: 2400, height: 1600 },
+    deviceScaleFactor: 1
+  });
+  const html = `<!DOCTYPE html>
+<html><head><style>
+  * { margin: 0; box-sizing: border-box; }
+  body { background: ${bgColor}; display: flex; justify-content: center; align-items: center; width: 2400px; height: 1600px; padding: 120px; gap: 80px; overflow: hidden; }
+  .col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; max-height: 100%; }
+  img { width: 100%; max-height: 1280px; object-fit: contain; }
+  .label { margin-top: 40px; font: 500 30px/1 system-ui, sans-serif; flex-shrink: 0; }
+  .before { color: #888; }
+  .after { color: #22c55e; }
+</style></head><body>
+  <div class="col"><img src="${beforeUri}"><div class="label before">Before</div></div>
+  <div class="col"><img src="${afterUri}"><div class="label after">After</div></div>
+</body></html>`;
+  await page.setContent(html, { waitUntil: "load" });
+  await page.waitForTimeout(200);
+  await page.screenshot({ path: outputPath });
+  await page.close();
 }
-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(
+async function compareOne(capture, outputDir, threshold, options) {
+  const dir = dirname2(capture.beforePath);
+  const diffPath = join7(dir, `${capture.prefix}-diff.png`);
+  const comparePath = join7(dir, `${capture.prefix}-compare.png`);
+  const sliderPath = join7(dir, `${capture.prefix}-slider.html`);
+  const beforeBuffer = readFileSync5(capture.beforePath);
+  const afterBuffer = readFileSync5(capture.afterPath);
+  const beforeImg = PNG.sync.read(beforeBuffer);
+  const afterImg = PNG.sync.read(afterBuffer);
+  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 }
+  );
+  const diffPercentage = diffPixels / totalPixels * 100;
+  const changed = diffPercentage > threshold;
+  writeFileSync(diffPath, PNG.sync.write(diffImg));
+  if (changed) {
+    await generateComposite(
       capture.beforePath,
       capture.afterPath,
-      sideBySidePath
+      comparePath,
+      options.browser,
+      options.bgColor
     );
-    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 {
+    route: capture.route,
+    prefix: capture.prefix,
+    beforePath: capture.beforePath,
+    afterPath: capture.afterPath,
+    diffPath,
+    comparePath,
+    sliderPath,
+    diffPixels,
+    totalPixels,
+    diffPercentage,
+    changed
+  };
+}
+async function compareScreenshots(captures, outputDir, threshold = 0.1, options) {
+  const results = [];
+  for (const capture of captures) {
+    results.push(await compareOne(capture, outputDir, threshold, options));
   }
   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";
+import { join as join8 } from "path";
+import { execSync as execSync4 } from "child_process";
 
 // src/templates/report.html.ts
-import { readFileSync as readFileSync4 } from "fs";
+import { readFileSync as readFileSync6 } from "fs";
+import { relative as relative2 } from "path";
 function toBase64(filePath) {
-  return readFileSync4(filePath).toString("base64");
+  return readFileSync6(filePath).toString("base64");
 }
 function imgSrc(filePath) {
   return `data:image/png;base64,${toBase64(filePath)}`;
 }
-function generateReportHtml(results) {
+function generateReportHtml(results, outputDir) {
   const changed = results.filter((r) => r.changed);
   const unchanged = results.filter((r) => !r.changed);
-  const card = (r) => `
+  const card = (r) => {
+    const sliderHref = outputDir ? relative2(outputDir, r.sliderPath) : r.sliderPath;
+    return `
     <div class="card ${r.changed ? "changed" : "unchanged"}">
       <div class="card-header">
         <span class="route">${r.route}</span>
@@ -810,8 +1609,9 @@ function generateReportHtml(results) {
           <img src="${imgSrc(r.diffPath)}" alt="Diff" />
         </div>
       </div>
-      ${r.changed ? `<a class="slider-link" href="${r.sliderPath}">Open slider view</a>` : ""}
+      ${r.changed ? `<a class="slider-link" href="${sliderHref}">Open slider view</a>` : ""}
     </div>`;
+  };
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -852,9 +1652,9 @@ ${unchanged.length > 0 ? `<h2 class="section-title">Unchanged (${unchanged.lengt
 }
 
 // src/templates/slider.html.ts
-import { readFileSync as readFileSync5 } from "fs";
+import { readFileSync as readFileSync7 } from "fs";
 function toBase642(filePath) {
-  return readFileSync5(filePath).toString("base64");
+  return readFileSync7(filePath).toString("base64");
 }
 function imgSrc2(filePath) {
   return `data:image/png;base64,${toBase642(filePath)}`;
@@ -929,7 +1729,8 @@ function generateSliderHtml(result) {
 }
 
 // src/templates/summary.md.ts
-function generateSummaryMd(results) {
+function generateSummaryMd(results, gitDiff, options) {
+  const includeFilePaths = options?.includeFilePaths ?? true;
   const changed = results.filter((r) => r.changed);
   const lines = [];
   lines.push("<!-- afterbefore -->");
@@ -953,6 +1754,24 @@ function generateSummaryMd(results) {
     const pct = r.changed ? `${r.diffPercentage.toFixed(2)}%` : "0%";
     lines.push(`| \`${r.route}\` | ${pct} | ${status} |`);
   }
+  if (gitDiff) {
+    lines.push("");
+    lines.push("### Changed files");
+    lines.push("```diff");
+    lines.push(gitDiff);
+    lines.push("```");
+  }
+  if (includeFilePaths) {
+    lines.push("");
+    lines.push("### Screenshots");
+    lines.push("| Route | Before | After |");
+    lines.push("|-------|--------|-------|");
+    for (const r of changed) {
+      lines.push(`| \`${r.route}\` | \`${r.beforePath}\` | \`${r.afterPath}\` |`);
+    }
+    lines.push("");
+    lines.push("Review the before/after screenshots above to verify the visual changes match the code diff.");
+  }
   return lines.join("\n");
 }
 
@@ -960,7 +1779,7 @@ function generateSummaryMd(results) {
 var COMMENT_MARKER = "<!-- afterbefore -->";
 function findPrNumber() {
   try {
-    const output = execSync3("gh pr view --json number -q .number", {
+    const output = execSync4("gh pr view --json number -q .number", {
       encoding: "utf-8",
       stdio: ["pipe", "pipe", "pipe"]
     }).trim();
@@ -971,7 +1790,7 @@ function findPrNumber() {
 }
 function findExistingCommentId(prNumber) {
   try {
-    const output = execSync3(
+    const output = execSync4(
       `gh api repos/{owner}/{repo}/issues/${prNumber}/comments --jq '.[] | select(.body | contains("${COMMENT_MARKER}")) | .id'`,
       { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] }
     ).trim();
@@ -985,7 +1804,7 @@ function postOrUpdateComment(prNumber, body) {
   const existingId = findExistingCommentId(prNumber);
   if (existingId) {
     logger.info(`Updating existing PR comment (id: ${existingId})`);
-    execSync3(
+    execSync4(
       `gh api repos/{owner}/{repo}/issues/comments/${existingId} -X PATCH -f body=@-`,
       {
         input: body,
@@ -995,7 +1814,7 @@ function postOrUpdateComment(prNumber, body) {
     );
   } else {
     logger.info(`Creating new PR comment`);
-    execSync3(
+    execSync4(
       `gh api repos/{owner}/{repo}/issues/${prNumber}/comments -f body=@-`,
       {
         input: body,
@@ -1008,11 +1827,11 @@ function postOrUpdateComment(prNumber, body) {
 async function generateReport(results, outputDir, options) {
   await ensureDir(outputDir);
   const summaryMd = generateSummaryMd(results);
-  const summaryPath = join7(outputDir, "summary.md");
+  const summaryPath = join8(outputDir, "summary.md");
   writeFileSync2(summaryPath, summaryMd, "utf-8");
   logger.success(`Written summary to ${summaryPath}`);
-  const reportHtml = generateReportHtml(results);
-  const indexPath = join7(outputDir, "index.html");
+  const reportHtml = generateReportHtml(results, outputDir);
+  const indexPath = join8(outputDir, "index.html");
   writeFileSync2(indexPath, reportHtml, "utf-8");
   logger.success(`Written report to ${indexPath}`);
   for (const result of results) {
@@ -1029,80 +1848,234 @@ async function generateReport(results, outputDir, options) {
       );
       return;
     }
-    postOrUpdateComment(prNumber, summaryMd);
+    const prSummary = generateSummaryMd(results, void 0, { includeFilePaths: false });
+    postOrUpdateComment(prNumber, prSummary);
     logger.success(`Posted results to PR #${prNumber}`);
   }
 }
 
 // src/pipeline.ts
+function formatTriggerChain(chain) {
+  if (chain.length <= 1) return chain[0] ?? "";
+  return chain.join(" \u2192 ");
+}
+function generateSessionName(cwd) {
+  const branch = getCurrentBranch(cwd);
+  const name = branch.replace(/^(feat|fix|perf|chore|refactor|docs|style|test|ci|build)\//, "");
+  const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  return `${name}_${date}`;
+}
+function routeToPrefix(route) {
+  if (route === "/") return "_root";
+  return route.replace(/^\//, "").replace(/\//g, "-");
+}
+var ROUTE_IMPACT_MAX_DEPTH = 3;
+function normalizePath2(filePath) {
+  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
+}
+function findRoutesForChangedFile(changedFile, graph) {
+  const routes = /* @__PURE__ */ new Set();
+  const start = normalizePath2(changedFile);
+  const queue = [{ file: start, depth: 0 }];
+  const visited = /* @__PURE__ */ new Set([start]);
+  while (queue.length > 0) {
+    const { file, depth } = queue.shift();
+    if (isPageFile(file)) {
+      const route = pagePathToRoute(file);
+      if (route) routes.add(route);
+    }
+    if (depth >= ROUTE_IMPACT_MAX_DEPTH) continue;
+    const importers = graph.reverse.get(file);
+    if (!importers) continue;
+    for (const importer of importers) {
+      if (visited.has(importer)) continue;
+      visited.add(importer);
+      queue.push({ file: importer, depth: depth + 1 });
+    }
+  }
+  return Array.from(routes);
+}
+function mapRouteToChangedComponents(changedComponentFiles, graph) {
+  const routeMap = /* @__PURE__ */ new Map();
+  for (const componentPath of changedComponentFiles) {
+    const routes = findRoutesForChangedFile(componentPath, graph);
+    for (const route of routes) {
+      const next = routeMap.get(route) ?? [];
+      next.push(componentPath);
+      routeMap.set(route, next);
+    }
+  }
+  for (const [route, files] of routeMap.entries()) {
+    routeMap.set(route, Array.from(new Set(files)).sort((a, b) => a.localeCompare(b)));
+  }
+  return routeMap;
+}
+function expandRoutes(routes, config, routeComponentMap) {
+  const tasks = [];
+  for (const r of routes) {
+    const scenarios = config?.scenarios?.[r.route] ?? [];
+    const changedComponents = routeComponentMap.get(r.route) ?? [];
+    tasks.push({
+      route: r.route,
+      label: r.route,
+      prefix: routeToPrefix(r.route),
+      skipAutoTabs: scenarios.length > 0,
+      skipAutoSections: scenarios.length > 0,
+      changedComponents
+    });
+    for (const s of scenarios) {
+      tasks.push({
+        route: r.route,
+        label: `${r.route} [${s.name}]`,
+        prefix: `${routeToPrefix(r.route)}~${s.name}`,
+        actions: s.actions,
+        selector: s.selector
+      });
+    }
+  }
+  return tasks;
+}
+function openInBrowser(filePath) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+  exec(`${cmd} "${filePath}"`);
+}
 async function runPipeline(options) {
   const { base, output, post, cwd } = options;
-  const outputDir = resolve2(cwd, output);
+  const sessionName = generateSessionName(cwd);
+  const outputDir = resolve4(cwd, output, sessionName);
+  const startTime = Date.now();
   try {
-    const spinner = logger.spin("Analyzing git diff...");
+    const version = true ? "0.1.2" : "dev";
+    console.log(`
+afterbefore v${version} \xB7 Comparing against ${base}
+`);
+    const config = await loadConfig(cwd);
+    logger.startPipeline(8);
+    logger.pipeline(1, "Analyzing diff...");
     const diffFiles = getChangedFiles(base, cwd);
-    spinner.stop();
+    const gitDiff = getGitDiff(base, cwd);
     if (diffFiles.length === 0) {
+      logger.completePipeline();
       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.completePipeline();
       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...");
+    logger.pipeline(2, "Building import graph...");
+    const worktreePromise = createWorktree(base, cwd);
     const graph = await buildImportGraph(cwd);
-    graphSpinner.stop();
+    logger.pipeline(3, "Finding affected routes...");
     const changedPaths = impactfulFiles.map((f) => f.path);
-    const affectedRoutes = findAffectedRoutes(changedPaths, graph, cwd);
+    let affectedRoutes = findAffectedRoutes(changedPaths, graph, cwd, options.maxRoutes);
+    const changedComponentFiles = impactfulFiles.filter((f) => f.category === "component").map((f) => f.path);
+    const routeComponentMap = mapRouteToChangedComponents(changedComponentFiles, graph);
+    if (affectedRoutes.length === 0) {
+      const hasGlobalChanges = impactfulFiles.some((f) => isGlobalVisualFile(f.path));
+      if (hasGlobalChanges) {
+        const allRoutes = [];
+        for (const file of graph.forward.keys()) {
+          if (!isPageFile(file)) continue;
+          const route = pagePathToRoute(file);
+          if (route === null) continue;
+          allRoutes.push({
+            pagePath: file,
+            route,
+            reason: "transitive",
+            depth: 0,
+            triggerChain: [file]
+          });
+        }
+        allRoutes.sort((a, b) => a.route.localeCompare(b.route));
+        if (options.maxRoutes > 0 && allRoutes.length > options.maxRoutes) {
+          affectedRoutes = allRoutes.slice(0, options.maxRoutes);
+        } else {
+          affectedRoutes = allRoutes;
+        }
+      }
+    }
     if (affectedRoutes.length === 0) {
+      worktreePromise.then((w) => w.cleanup()).catch(() => {
+      });
+      logger.completePipeline();
       logger.success(
         "No affected routes found. Changed files don't impact any pages."
       );
       return;
     }
-    logger.info(
-      `Affected routes: ${affectedRoutes.map((r) => r.route).join(", ")}`
-    );
+    console.log();
+    for (const r of affectedRoutes) {
+      const chain = formatTriggerChain(r.triggerChain);
+      const label = r.reason === "direct" ? "(direct)" : `\u2190 ${chain}`;
+      console.log(chalk2.dim(`  ${r.route}  ${label}`));
+    }
+    console.log();
+    logger.pipeline(4, "Setting up worktree...");
+    const worktree = await worktreePromise;
+    logger.pipeline(5, "Starting servers...");
     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);
+    const [beforeServer, afterServer, browser] = await Promise.all([
+      startServer(worktree.path, beforePort),
+      startServer(cwd, afterPort),
+      launchBrowser()
+    ]);
     cleanupRegistry.register(() => stopServer(beforeServer));
-    const afterServer = await startServer(cwd, afterPort);
     cleanupRegistry.register(() => stopServer(afterServer));
-    const routes = affectedRoutes.map((r) => r.route);
+    cleanupRegistry.register(() => browser.close());
+    logger.pipeline(6, "Capturing screenshots...");
+    const tasks = expandRoutes(affectedRoutes, config, routeComponentMap);
     const captures = await captureRoutes(
-      routes,
+      tasks,
       beforeServer.url,
       afterServer.url,
-      outputDir
+      outputDir,
+      {
+        browser,
+        width: options.width,
+        height: options.height,
+        device: options.device,
+        delay: options.delay,
+        autoTabs: options.autoTabs,
+        maxTabsPerRoute: options.maxTabsPerRoute,
+        autoSections: options.autoSections,
+        maxSectionsPerRoute: options.maxSectionsPerRoute,
+        onProgress: (i, label) => logger.pipeline(6, `Capturing ${label} (${i}/${tasks.length})...`)
+      }
     );
-    const results = await compareScreenshots(captures, outputDir, options.threshold);
+    logger.pipeline(7, "Comparing screenshots...");
+    const bgColor = detectBgColor(cwd);
+    const results = await compareScreenshots(captures, outputDir, options.threshold, { browser, bgColor });
+    logger.pipeline(8, "Generating report...");
     await generateReport(results, outputDir, { post });
+    const summary = generateSummaryMd(results, gitDiff);
+    logger.completePipeline(true);
+    console.log("\n" + summary);
+    const elapsed = ((Date.now() - startTime) / 1e3).toFixed(1);
     const changedCount = results.filter((r) => r.changed).length;
     logger.success(
-      `Done! ${results.length} route(s) captured, ${changedCount} with visual changes.`
+      `Done in ${elapsed}s \u2014 ${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.`);
+    logger.dim(`  Report: ${outputDir}/index.html`);
+    if (options.open) {
+      openInBrowser(resolve4(outputDir, "index.html"));
+    }
   } finally {
     await cleanupRegistry.runAll();
   }
 }
 export {
+  loadConfig,
   runPipeline
 };
 //# sourceMappingURL=index.js.map