afterbefore 0.1.17 → 0.1.18

package/dist/cli.js

@@ -2,6 +2,7 @@
 
 // src/cli.ts
 import { Command } from "commander";
+import chalk3 from "chalk";
 
 // src/logger.ts
 import { writeFileSync } from "fs";
@@ -119,6 +120,18 @@ var Logger = class {
     this.spinner.text = text;
     this.spinner.render();
   }
+  stageComplete(name, detail, durationMs) {
+    const duration = durationMs < 1e3 ? `${Math.round(durationMs)}ms` : `${(durationMs / 1e3).toFixed(1)}s`;
+    const line = `  ${chalk.green("\u2713")} ${name.padEnd(12)} ${chalk.dim(detail.padEnd(50))} ${chalk.dim(duration)}`;
+    this.log("stage", `${name}: ${detail} (${duration})`);
+    if (this.isTTY && this.spinner) {
+      this.spinner.clear();
+      console.log(line);
+      this.spinner.render();
+    } else {
+      console.log(line);
+    }
+  }
   completePipeline(finished = false) {
     this.pipelineActive = false;
     this.log("info", `Pipeline ${finished ? "completed" : "stopped"}`);
@@ -217,11 +230,22 @@ var cleanupRegistry = new CleanupRegistry();
 // 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();
+  try {
+    return execSync(`git ${args}`, {
+      cwd,
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    if (message.includes("ENOENT") || message.includes("not found")) {
+      throw new AfterbeforeError(
+        "Git is not installed or not in PATH.",
+        "Install git: https://git-scm.com/downloads"
+      );
+    }
+    throw err;
+  }
 }
 function isGitRepo(cwd) {
   try {
@@ -232,7 +256,14 @@ function isGitRepo(cwd) {
   }
 }
 function getMergeBase(base, cwd) {
-  return git(`merge-base ${base} HEAD`, cwd);
+  try {
+    return git(`merge-base ${base} HEAD`, cwd);
+  } catch {
+    throw new AfterbeforeError(
+      `Could not find merge base for "${base}". The branch or ref may not exist.`,
+      `Run "git branch -a" to see available branches. Did you mean "master" instead of "main"?`
+    );
+  }
 }
 function getDiffNameStatus(base, cwd) {
   const mergeBase = getMergeBase(base, cwd);
@@ -247,8 +278,10 @@ function getCurrentBranch(cwd) {
 }
 
 // src/pipeline.ts
-import { resolve as resolve4 } from "path";
-import { unlinkSync as unlinkSync2 } from "fs";
+import { resolve as resolve4, basename } from "path";
+import { writeFileSync as writeFileSync2, unlinkSync as unlinkSync2 } from "fs";
+import { execSync as execSync5 } from "child_process";
+import chalk2 from "chalk";
 
 // src/config.ts
 import { resolve } from "path";
@@ -736,8 +769,8 @@ function sanitizeLabel(label, maxLength = 40) {
 }
 
 // src/stages/impact.ts
-var MAX_DEPTH = 3;
-function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
+var DEFAULT_MAX_DEPTH = 10;
+function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0, maxDepth = DEFAULT_MAX_DEPTH) {
   const routeMap = /* @__PURE__ */ new Map();
   for (const file of changedFiles) {
     const visited = /* @__PURE__ */ new Set();
@@ -759,7 +792,7 @@ function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
           });
         }
       }
-      if (depth >= MAX_DEPTH) continue;
+      if (depth >= maxDepth) continue;
       const importers = graph.reverse.get(path);
       if (!importers) continue;
       for (const importer of importers) {
@@ -802,7 +835,7 @@ function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
   logger.dim(`Found ${routes.length} affected route(s)`);
   return routes;
 }
-function findRoutesForFile(file, graph) {
+function findRoutesForFile(file, graph, maxDepth = DEFAULT_MAX_DEPTH) {
   const routes = /* @__PURE__ */ new Set();
   const start = normalizePath(file);
   const queue = [{ path: start, depth: 0 }];
@@ -813,7 +846,7 @@ function findRoutesForFile(file, graph) {
       const route = pagePathToRoute(path);
       if (route) routes.add(route);
     }
-    if (depth >= MAX_DEPTH) continue;
+    if (depth >= maxDepth) continue;
     const importers = graph.reverse.get(path);
     if (!importers) continue;
     for (const importer of importers) {
@@ -1118,10 +1151,17 @@ async function launchBrowser() {
     return await chromium.launch();
   } catch {
     logger.dim("Chromium not found, installing...");
-    execSync3("npx playwright install chromium", {
-      stdio: ["pipe", "pipe", "pipe"]
-    });
-    return await chromium.launch();
+    try {
+      execSync3("npx playwright install chromium", {
+        stdio: ["pipe", "pipe", "pipe"]
+      });
+      return await chromium.launch();
+    } catch {
+      throw new AfterbeforeError(
+        "Could not install or launch Playwright Chromium.",
+        'Run "npx playwright install chromium" manually, then try again.'
+      );
+    }
   }
 }
 var MAX_COMPONENT_INSTANCES_PER_SOURCE = 5;
@@ -1671,55 +1711,101 @@ async function trimImage(path) {
   const { data, info } = await sharp(path).trim({ threshold: 50 }).toBuffer({ resolveWithObject: true });
   return { data, width: info.width, height: info.height };
 }
-async function generateComposite(beforePath, afterPath, outputPath, bgColor) {
+function roundCornersSvg(w, h, r) {
+  return Buffer.from(
+    `<svg width="${w}" height="${h}"><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" ry="${r}" fill="white"/></svg>`
+  );
+}
+async function roundImage(buf, width, height, radius) {
+  const mask = roundCornersSvg(width, height, radius);
+  return sharp(buf).resize(width, height, { fit: "fill" }).composite([{ input: mask, blend: "dest-in" }]).png().toBuffer();
+}
+async function generateComposite(beforePath, afterPath, outputPath, bgColor, metadata) {
   const [beforeTrimmed, afterTrimmed] = await Promise.all([
     trimImage(beforePath),
     trimImage(afterPath)
   ]);
+  const CANVAS_W = 1200;
+  const PADDING = 32;
+  const GAP = 24;
+  const HEADER_H = 48;
+  const BADGE_H = 40;
+  const FOOTER_H = 24;
+  const CORNER_R = 12;
+  const contentW = CANVAS_W - PADDING * 2;
+  const colW = Math.floor((contentW - GAP) / 2);
   const imgW = Math.max(beforeTrimmed.width, afterTrimmed.width);
   const imgH = Math.max(beforeTrimmed.height, afterTrimmed.height);
-  const PADDING = 40;
-  const GAP = 40;
-  const LABEL_H = 70;
-  const canvasW = Math.max(600, Math.min(2400, imgW * 2 + GAP + PADDING * 2));
-  const canvasH = Math.max(300, Math.min(2400, imgH + LABEL_H + PADDING * 2));
-  const maxImgH = canvasH - PADDING * 2 - LABEL_H;
-  const colW = Math.floor((canvasW - PADDING * 2 - GAP) / 2);
+  const imgAspect = imgH / (imgW || 1);
+  const scaledH = Math.min(Math.round(colW * imgAspect), 520);
+  const CANVAS_H = PADDING + HEADER_H + scaledH + BADGE_H + FOOTER_H + PADDING;
   const [beforeBuf, afterBuf] = await Promise.all(
     [beforeTrimmed, afterTrimmed].map(async (trimmed) => {
-      return await sharp(trimmed.data).resize(colW, maxImgH, { fit: "inside" }).toBuffer({ resolveWithObject: true });
+      const resized = await sharp(trimmed.data).resize(colW, scaledH, { fit: "contain", background: bgColor }).toBuffer({ resolveWithObject: true });
+      return {
+        data: await roundImage(resized.data, resized.info.width, resized.info.height, CORNER_R),
+        width: resized.info.width,
+        height: resized.info.height
+      };
     })
   );
-  const beforeLeft = PADDING + Math.floor((colW - beforeBuf.info.width) / 2);
-  const beforeTop = PADDING + Math.floor((maxImgH - beforeBuf.info.height) / 2);
-  const afterLeft = PADDING + colW + GAP + Math.floor((colW - afterBuf.info.width) / 2);
-  const afterTop = PADDING + Math.floor((maxImgH - afterBuf.info.height) / 2);
-  const labelY = PADDING + maxImgH + 20;
-  const beforeLabelX = PADDING + Math.floor(colW / 2);
-  const afterLabelX = PADDING + colW + GAP + Math.floor(colW / 2);
-  const labelSvg = Buffer.from(
-    `<svg width="${canvasW}" height="${canvasH}">
-      <text x="${beforeLabelX}" y="${labelY}" text-anchor="middle"
-            font-family="system-ui, sans-serif" font-size="30" font-weight="500"
-            fill="#888">Before</text>
-      <text x="${afterLabelX}" y="${labelY}" text-anchor="middle"
-            font-family="system-ui, sans-serif" font-size="30" font-weight="500"
+  const imgTop = PADDING + HEADER_H;
+  const beforeLeft = PADDING;
+  const afterLeft = PADDING + colW + GAP;
+  const badgeY = imgTop + scaledH + 8;
+  const beforeBadgeCX = PADDING + Math.floor(colW / 2);
+  const afterBadgeCX = PADDING + colW + GAP + Math.floor(colW / 2);
+  const diffPct = metadata.diffPercentage.toFixed(1);
+  const diffBadgeW = Math.max(80, diffPct.length * 12 + 40);
+  const overlaySvg = Buffer.from(
+    `<svg width="${CANVAS_W}" height="${CANVAS_H}" xmlns="http://www.w3.org/2000/svg">
+      <!-- Header: route name + diff badge -->
+      <text x="${PADDING}" y="${PADDING + 28}"
+            font-family="'SF Mono', 'Fira Code', 'Consolas', monospace" font-size="18" font-weight="600"
+            fill="#e0e0e0">${escapeXml(metadata.route)}</text>
+
+      <rect x="${CANVAS_W - PADDING - diffBadgeW}" y="${PADDING + 6}" width="${diffBadgeW}" height="28" rx="14"
+            fill="#f59e0b" fill-opacity="0.2"/>
+      <text x="${CANVAS_W - PADDING - diffBadgeW / 2}" y="${PADDING + 25}"
+            font-family="system-ui, sans-serif" font-size="13" font-weight="700" text-anchor="middle"
+            fill="#f59e0b">${diffPct}% changed</text>
+
+      <!-- "Before" pill badge -->
+      <rect x="${beforeBadgeCX - 44}" y="${badgeY}" width="88" height="28" rx="14"
+            fill="#555" fill-opacity="0.5"/>
+      <text x="${beforeBadgeCX}" y="${badgeY + 19}"
+            font-family="system-ui, sans-serif" font-size="13" font-weight="600" text-anchor="middle"
+            fill="#ccc">Before</text>
+
+      <!-- "After" pill badge -->
+      <rect x="${afterBadgeCX - 40}" y="${badgeY}" width="80" height="28" rx="14"
+            fill="#22c55e" fill-opacity="0.25"/>
+      <text x="${afterBadgeCX}" y="${badgeY + 19}"
+            font-family="system-ui, sans-serif" font-size="13" font-weight="600" text-anchor="middle"
             fill="#22c55e">After</text>
+
+      <!-- Branding -->
+      <text x="${CANVAS_W - PADDING}" y="${CANVAS_H - 10}"
+            font-family="system-ui, sans-serif" font-size="10" text-anchor="end"
+            fill="#444">afterbefore</text>
     </svg>`
   );
   await sharp({
     create: {
-      width: canvasW,
-      height: canvasH,
+      width: CANVAS_W,
+      height: CANVAS_H,
       channels: 4,
-      background: bgColor
+      background: "#1a1a2e"
     }
   }).composite([
-    { input: beforeBuf.data, left: beforeLeft, top: beforeTop },
-    { input: afterBuf.data, left: afterLeft, top: afterTop },
-    { input: labelSvg, left: 0, top: 0 }
+    { input: beforeBuf.data, left: beforeLeft, top: imgTop },
+    { input: afterBuf.data, left: afterLeft, top: imgTop },
+    { input: overlaySvg, left: 0, top: 0 }
   ]).png().toFile(outputPath);
 }
+function escapeXml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
 async function compareOne(capture, outputDir, threshold, server, options) {
   const diffPath = join7(outputDir, `${capture.prefix}-diff.png`);
   const dir = dirname2(capture.beforePath);
@@ -1747,18 +1833,30 @@ async function compareOne(capture, outputDir, threshold, server, options) {
     diffPercentage = 100;
     changed = true;
   }
-  await generateComposite(
-    capture.beforePath,
-    capture.afterPath,
-    comparePath,
-    options.bgColor
-  );
+  if (changed) {
+    await generateComposite(
+      capture.beforePath,
+      capture.afterPath,
+      comparePath,
+      options.bgColor,
+      { route: capture.route, diffPercentage }
+    );
+  } else {
+    try {
+      unlinkSync(capture.beforePath);
+    } catch {
+    }
+    try {
+      unlinkSync(capture.afterPath);
+    } catch {
+    }
+  }
   return {
     route: capture.route,
     prefix: capture.prefix,
     beforePath: capture.beforePath,
     afterPath: capture.afterPath,
-    comparePath,
+    comparePath: changed ? comparePath : "",
     diffPixels,
     totalPixels,
     diffPercentage,
@@ -1830,7 +1928,21 @@ function generateSummaryMd(results, gitDiff, options) {
 
 // src/stages/report.ts
 var COMMENT_MARKER = "<!-- afterbefore -->";
+function isGhInstalled() {
+  try {
+    execSync4("gh --version", { stdio: ["pipe", "pipe", "pipe"] });
+    return true;
+  } catch {
+    return false;
+  }
+}
 function findPrNumber() {
+  if (!isGhInstalled()) {
+    logger.warn(
+      "GitHub CLI (gh) is not installed. Install it from https://cli.github.com"
+    );
+    return null;
+  }
   try {
     const output = execSync4("gh pr view --json number -q .number", {
       encoding: "utf-8",
@@ -1882,7 +1994,7 @@ async function generateReport(results, outputDir, options) {
     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."
+        "No open PR found for this branch. Push your branch and open a PR first, then run `npx afterbefore --post` again."
       );
       return;
     }
@@ -1892,6 +2004,317 @@ async function generateReport(results, outputDir, options) {
   }
 }
 
+// src/templates/report.html.ts
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function generateReportHtml(results, sessionName) {
+  const changed = results.filter((r) => r.changed);
+  const unchanged = results.filter((r) => !r.changed);
+  const totalChecked = results.length;
+  const changedCount = changed.length;
+  const changedCards = changed.map((r) => {
+    const diffPct = r.diffPercentage.toFixed(2);
+    const beforeFile = r.beforePath.split("/").pop() || "";
+    const afterFile = r.afterPath.split("/").pop() || "";
+    const compareFile = r.comparePath ? r.comparePath.split("/").pop() || "" : "";
+    return `
+    <div class="card">
+      <div class="card-header">
+        <span class="route">${escapeHtml(r.route)}</span>
+        <span class="badge">${diffPct}% changed</span>
+      </div>
+      ${compareFile ? `
+      <div class="compare-wrap">
+        <img src="${escapeHtml(compareFile)}" alt="Side-by-side comparison of ${escapeHtml(r.route)}" class="compare-img" loading="lazy">
+      </div>
+      ` : ""}
+      <div class="slider-section">
+        <p class="slider-label">Interactive comparison \u2014 drag the divider</p>
+        <div class="slider" style="--pos: 50%">
+          <img src="${escapeHtml(beforeFile)}" alt="Before" class="slider-img">
+          <img src="${escapeHtml(afterFile)}" alt="After" class="slider-img slider-after" style="clip-path: inset(0 0 0 var(--pos))">
+          <input type="range" min="0" max="100" value="50" class="slider-range"
+                 oninput="this.parentElement.style.setProperty('--pos', this.value + '%')">
+          <div class="slider-labels">
+            <span>Before</span>
+            <span>After</span>
+          </div>
+        </div>
+      </div>
+    </div>`;
+  }).join("\n");
+  const unchangedSection = unchanged.length > 0 ? `
+    <details class="unchanged-section">
+      <summary>${unchanged.length} route${unchanged.length === 1 ? "" : "s"} unchanged</summary>
+      <ul>
+        ${unchanged.map((r) => `<li><code>${escapeHtml(r.route)}</code></li>`).join("\n        ")}
+      </ul>
+    </details>` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>afterbefore report \u2014 ${escapeHtml(sessionName)}</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0f0f17;
+      color: #e0e0e0;
+      padding: 2rem;
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+
+    .subtitle {
+      color: #888;
+      font-size: 0.9rem;
+      margin-bottom: 2rem;
+    }
+
+    .summary {
+      display: flex;
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+    }
+
+    .stat {
+      background: #1a1a2e;
+      border-radius: 8px;
+      padding: 1rem 1.5rem;
+      min-width: 140px;
+    }
+
+    .stat-value {
+      font-size: 1.8rem;
+      font-weight: 700;
+    }
+
+    .stat-value.changed { color: #f59e0b; }
+    .stat-value.total { color: #3b82f6; }
+    .stat-value.unchanged { color: #22c55e; }
+
+    .stat-label {
+      color: #888;
+      font-size: 0.8rem;
+      margin-top: 0.25rem;
+    }
+
+    .card {
+      background: #1a1a2e;
+      border-radius: 12px;
+      margin-bottom: 2rem;
+      overflow: hidden;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.5rem;
+      border-bottom: 1px solid #2a2a3e;
+    }
+
+    .route {
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 1.1rem;
+      font-weight: 600;
+    }
+
+    .badge {
+      background: #f59e0b20;
+      color: #f59e0b;
+      padding: 0.25rem 0.75rem;
+      border-radius: 999px;
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+
+    .compare-wrap {
+      padding: 1rem;
+    }
+
+    .compare-img {
+      width: 100%;
+      border-radius: 8px;
+    }
+
+    .slider-section {
+      padding: 1rem 1.5rem 1.5rem;
+    }
+
+    .slider-label {
+      color: #666;
+      font-size: 0.75rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .slider {
+      position: relative;
+      overflow: hidden;
+      border-radius: 8px;
+      background: #111;
+    }
+
+    .slider-img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    .slider-after {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .slider-range {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: col-resize;
+      z-index: 2;
+    }
+
+    .slider-labels {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.5rem 0;
+      color: #666;
+      font-size: 0.75rem;
+    }
+
+    .unchanged-section {
+      background: #1a1a2e;
+      border-radius: 12px;
+      padding: 1rem 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .unchanged-section summary {
+      cursor: pointer;
+      color: #888;
+      font-size: 0.9rem;
+    }
+
+    .unchanged-section ul {
+      margin-top: 0.75rem;
+      padding-left: 1.5rem;
+    }
+
+    .unchanged-section li {
+      color: #666;
+      margin-bottom: 0.25rem;
+    }
+
+    .unchanged-section code {
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 0.85rem;
+    }
+
+    .summary-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 2rem;
+    }
+
+    .summary-table th {
+      text-align: left;
+      padding: 0.5rem 1rem;
+      border-bottom: 2px solid #2a2a3e;
+      color: #888;
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .summary-table td {
+      padding: 0.5rem 1rem;
+      border-bottom: 1px solid #1a1a2e;
+      font-size: 0.9rem;
+    }
+
+    .summary-table code {
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 0.85rem;
+    }
+
+    .status-changed { color: #f59e0b; }
+    .status-unchanged { color: #22c55e; }
+
+    footer {
+      text-align: center;
+      padding: 2rem 0;
+      color: #444;
+      font-size: 0.75rem;
+    }
+
+    footer a {
+      color: #555;
+      text-decoration: none;
+    }
+
+    footer a:hover {
+      color: #888;
+    }
+  </style>
+</head>
+<body>
+  <h1>afterbefore report</h1>
+  <p class="subtitle">${escapeHtml(sessionName)}</p>
+
+  <div class="summary">
+    <div class="stat">
+      <div class="stat-value total">${totalChecked}</div>
+      <div class="stat-label">Routes checked</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value changed">${changedCount}</div>
+      <div class="stat-label">With visual changes</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value unchanged">${unchanged.length}</div>
+      <div class="stat-label">Unchanged</div>
+    </div>
+  </div>
+
+  <table class="summary-table">
+    <thead>
+      <tr><th>Route</th><th>Diff %</th><th>Status</th></tr>
+    </thead>
+    <tbody>
+      ${results.map((r) => {
+    const status = r.changed ? "Changed" : "Unchanged";
+    const statusClass = r.changed ? "status-changed" : "status-unchanged";
+    const pct = r.changed ? `${r.diffPercentage.toFixed(2)}%` : "0%";
+    return `<tr><td><code>${escapeHtml(r.route)}</code></td><td>${pct}</td><td class="${statusClass}">${status}</td></tr>`;
+  }).join("\n      ")}
+    </tbody>
+  </table>
+
+  ${changedCards}
+  ${unchangedSection}
+
+  <footer>
+    Generated by <a href="https://github.com/kairevicius/afterbefore">afterbefore</a>
+  </footer>
+</body>
+</html>`;
+}
+
 // src/pipeline.ts
 function generateSessionName(cwd) {
   const branch = getCurrentBranch(cwd);
@@ -1943,26 +2366,60 @@ function expandRoutes(routes, config, routeComponentMap) {
   }
   return tasks;
 }
+function applyConfigDefaults(options, config) {
+  if (!config?.defaults) return;
+  const defaults = config.defaults;
+  const cliDefaults = {
+    base: "main",
+    output: ".afterbefore",
+    post: false,
+    threshold: 0.1,
+    maxRoutes: 6,
+    width: 1280,
+    height: 720,
+    delay: 0,
+    autoTabs: true,
+    maxTabsPerRoute: 5,
+    autoSections: true,
+    maxSectionsPerRoute: 10,
+    maxDepth: 10,
+    dryRun: false,
+    verbose: false,
+    open: false
+  };
+  const opts = options;
+  for (const [key, value] of Object.entries(defaults)) {
+    if (key === "cwd" || value === void 0) continue;
+    if (key in cliDefaults && opts[key] === cliDefaults[key]) {
+      opts[key] = value;
+    }
+  }
+}
 async function runPipeline(options) {
   const { base, output, post, cwd } = options;
   const sessionName = generateSessionName(cwd);
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.17" : "dev";
+    const version = true ? "0.1.18" : "dev";
+    const mode = options.dryRun ? "Dry run" : "Comparing";
     console.log(`
-afterbefore v${version} \xB7 Comparing against ${base}
+afterbefore v${version} \xB7 ${mode} against ${base}
 `);
     const config = await loadConfig(cwd);
-    logger.startPipeline(8);
+    applyConfigDefaults(options, config);
+    logger.startPipeline(options.dryRun ? 3 : 8);
+    const t1 = Date.now();
     logger.pipeline(1, "Analyzing diff...");
     const diffFiles = getChangedFiles(base, cwd);
-    const gitDiff = getGitDiff(base, cwd);
+    const gitDiff = options.dryRun ? "" : getGitDiff(base, cwd);
+    logger.stageComplete("Diff", `${diffFiles.length} files changed`, Date.now() - t1);
     if (diffFiles.length === 0) {
       logger.completePipeline();
       logger.success("No changed files detected. Nothing to do.");
       return;
     }
+    const t2 = Date.now();
     const classified = classifyFiles(diffFiles);
     const impactfulFiles = classified.filter(
       (f) => f.category !== "test" && f.category !== "other"
@@ -1975,11 +2432,14 @@ afterbefore v${version} \xB7 Comparing against ${base}
       return;
     }
     logger.pipeline(2, "Building import graph...");
-    const worktreePromise = createWorktree(base, cwd);
+    const worktreePromise = options.dryRun ? null : createWorktree(base, cwd);
     const graph = await buildImportGraph(cwd);
+    const graphEdges = Array.from(graph.forward.values()).reduce((sum, deps) => sum + deps.size, 0);
+    logger.stageComplete("Graph", `${graph.forward.size} modules, ${graphEdges} edges`, Date.now() - t2);
+    const t3 = Date.now();
     logger.pipeline(3, "Finding affected routes...");
     const changedPaths = impactfulFiles.map((f) => f.path);
-    let affectedRoutes = findAffectedRoutes(changedPaths, graph, cwd, options.maxRoutes);
+    let affectedRoutes = findAffectedRoutes(changedPaths, graph, cwd, options.maxRoutes, options.maxDepth);
     const changedComponentFiles = impactfulFiles.filter((f) => f.category === "component").map((f) => f.path);
     const routeComponentMap = mapRouteToChangedComponents(changedComponentFiles, graph);
     if (affectedRoutes.length === 0) {
@@ -2006,8 +2466,21 @@ afterbefore v${version} \xB7 Comparing against ${base}
         }
       }
     }
+    const directCount = affectedRoutes.filter((r) => r.reason === "direct").length;
+    const transitiveCount = affectedRoutes.length - directCount;
+    const impactDetail = directCount > 0 && transitiveCount > 0 ? `${affectedRoutes.length} routes (${directCount} direct, ${transitiveCount} transitive)` : `${affectedRoutes.length} routes`;
+    logger.stageComplete("Impact", impactDetail, Date.now() - t3);
+    if (options.verbose) {
+      console.log("");
+      for (const r of affectedRoutes) {
+        const chain = r.triggerChain.map((f) => basename(f)).join(" \u2192 ");
+        const depthLabel = r.depth === 0 ? "direct" : `depth ${r.depth}`;
+        console.log(chalk2.dim(`  ${r.route.padEnd(24)} ${depthLabel.padEnd(10)} ${chain}`));
+      }
+      console.log("");
+    }
     if (affectedRoutes.length === 0) {
-      worktreePromise.then((w) => w.cleanup()).catch(() => {
+      worktreePromise?.then((w) => w.cleanup()).catch(() => {
       });
       logger.completePipeline();
       logger.success(
@@ -2015,8 +2488,29 @@ afterbefore v${version} \xB7 Comparing against ${base}
       );
       return;
     }
+    if (options.dryRun) {
+      worktreePromise?.then((w) => w.cleanup()).catch(() => {
+      });
+      logger.completePipeline();
+      console.log(`
+${affectedRoutes.length} route(s) would be captured:
+`);
+      for (const r of affectedRoutes) {
+        const chain = r.triggerChain.map((f) => basename(f)).join(" \u2192 ");
+        const depthLabel = r.depth === 0 ? "direct" : `depth ${r.depth}`;
+        console.log(`  ${r.route.padEnd(24)} ${chalk2.dim(depthLabel.padEnd(10))} ${chalk2.dim(chain)}`);
+      }
+      const elapsed2 = ((Date.now() - startTime) / 1e3).toFixed(1);
+      console.log(chalk2.dim(`
+  Completed in ${elapsed2}s (dry run \u2014 no screenshots captured)
+`));
+      return;
+    }
+    const t4 = Date.now();
     logger.pipeline(4, "Setting up worktree...");
     const worktree = await worktreePromise;
+    logger.stageComplete("Worktree", "created + dependencies installed", Date.now() - t4);
+    const t5 = Date.now();
     logger.pipeline(5, "Starting servers...");
     await ensureDir(outputDir);
     const beforePort = await findAvailablePort();
@@ -2029,6 +2523,8 @@ afterbefore v${version} \xB7 Comparing against ${base}
     cleanupRegistry.register(() => stopServer(beforeServer));
     cleanupRegistry.register(() => stopServer(afterServer));
     cleanupRegistry.register(() => browser.close());
+    logger.stageComplete("Servers", `ready on :${beforePort} and :${afterPort}`, Date.now() - t5);
+    const t6 = Date.now();
     logger.pipeline(6, "Capturing screenshots...");
     const tasks = expandRoutes(affectedRoutes, config, routeComponentMap);
     const captures = await captureRoutes(
@@ -2049,38 +2545,60 @@ afterbefore v${version} \xB7 Comparing against ${base}
         onProgress: (i, label) => logger.pipeline(6, `Capturing ${label} (${i}/${tasks.length})...`)
       }
     );
+    logger.stageComplete("Capture", `${captures.length} screenshots from ${tasks.length} routes`, Date.now() - t6);
+    const t7 = Date.now();
     logger.pipeline(7, "Comparing screenshots...");
     const bgColor = detectBgColor(cwd);
     const allResults = await compareScreenshots(captures, outputDir, options.threshold, { bgColor });
     const results = allResults.filter((r) => {
       const isSubCapture = r.prefix.includes("~");
       if (isSubCapture && !r.changed) {
-        try {
-          unlinkSync2(r.beforePath);
-        } catch {
-        }
-        try {
-          unlinkSync2(r.afterPath);
-        } catch {
-        }
-        try {
-          unlinkSync2(r.comparePath);
-        } catch {
+        if (r.comparePath) {
+          try {
+            unlinkSync2(r.comparePath);
+          } catch {
+          }
         }
         return false;
       }
       return true;
     });
+    const changedCount = results.filter((r) => r.changed).length;
+    const unchangedCount = results.length - changedCount;
+    logger.stageComplete("Compare", `${changedCount} changed, ${unchangedCount} unchanged`, Date.now() - t7);
+    const t8 = Date.now();
     logger.pipeline(8, "Generating report...");
     await generateReport(results, outputDir, { post });
+    const reportHtml = generateReportHtml(results, sessionName);
+    const reportPath = resolve4(outputDir, "report.html");
+    writeFileSync2(reportPath, reportHtml, "utf-8");
+    logger.stageComplete("Report", reportPath.replace(cwd + "/", ""), Date.now() - t8);
     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 in ${elapsed}s \u2014 ${results.length} route(s) captured, ${changedCount} with visual changes`
+      `Done in ${elapsed}s \u2014 ${results.length} route(s) checked, ${changedCount} with visual changes`
     );
+    const changedResults = results.filter((r) => r.changed);
+    if (changedResults.length > 0) {
+      const hero = changedResults.reduce((best, r) => r.diffPercentage > best.diffPercentage ? r : best);
+      if (hero.comparePath) {
+        console.log(chalk2.dim(`
+  Biggest change: ${hero.route} (${hero.diffPercentage.toFixed(1)}%) \u2014 ${hero.comparePath.replace(cwd + "/", "")}`));
+      }
+    }
+    if (!post) {
+      console.log(chalk2.dim(`  View report: open ${reportPath.replace(cwd + "/", "")}`));
+      console.log(chalk2.dim("  Post to your PR: npx afterbefore --post\n"));
+    }
+    if (options.open) {
+      try {
+        const openCmd = process.platform === "darwin" ? "open" : "xdg-open";
+        execSync5(`${openCmd} "${reportPath}"`, { stdio: "ignore" });
+      } catch {
+      }
+    }
   } finally {
     try {
       logger.writeLogFile(resolve4(outputDir, "debug.log"));
@@ -2094,7 +2612,7 @@ afterbefore v${version} \xB7 Comparing against ${base}
 var program = new Command();
 program.name("afterbefore").description(
   "Automatic before/after screenshot capture for PRs. Git diff is the config."
-).version("0.1.17").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(
+).version("0.1.18").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"
@@ -2102,7 +2620,7 @@ program.name("afterbefore").description(
   "--max-routes <count>",
   "Maximum routes to capture (0 = unlimited)",
   "6"
-).option("--width <pixels>", "Viewport width", "1280").option("--height <pixels>", "Viewport height", "720").option("--device <name>", 'Playwright device descriptor (e.g. "iPhone 14")').option("--delay <ms>", "Extra wait time (ms) after page load", "0").option("--no-auto-tabs", "Disable auto-detection of ARIA tab states").option("--max-tabs <count>", "Max auto-detected tabs per route", "5").option("--no-auto-sections", "Disable auto-detection of heading-labeled sections").option("--max-sections <count>", "Max auto-detected sections per page state", "10").action(async (opts) => {
+).option("--width <pixels>", "Viewport width", "1280").option("--height <pixels>", "Viewport height", "720").option("--device <name>", 'Playwright device descriptor (e.g. "iPhone 14")').option("--delay <ms>", "Extra wait time (ms) after page load", "0").option("--no-auto-tabs", "Disable auto-detection of ARIA tab states").option("--max-tabs <count>", "Max auto-detected tabs per route", "5").option("--no-auto-sections", "Disable auto-detection of heading-labeled sections").option("--max-sections <count>", "Max auto-detected sections per page state", "10").option("--max-depth <n>", "Max import graph traversal depth", "10").option("--dry-run", "Show affected routes without capturing", false).option("--verbose", "Show detailed import graph traversal", false).option("--open", "Open HTML report in browser after capture", false).action(async (opts) => {
   const cwd = process.cwd();
   if (!isGitRepo(cwd)) {
     logger.error("Not a git repository. Run this from inside a git repo.");
@@ -2122,6 +2640,10 @@ program.name("afterbefore").description(
     maxTabsPerRoute: parseInt(opts.maxTabs, 10),
     autoSections: opts.autoSections,
     maxSectionsPerRoute: parseInt(opts.maxSections, 10),
+    maxDepth: parseInt(opts.maxDepth, 10),
+    dryRun: opts.dryRun,
+    verbose: opts.verbose,
+    open: opts.open,
     cwd
   };
   try {
@@ -2134,6 +2656,8 @@ program.name("afterbefore").description(
       logger.error(
         err instanceof Error ? err.message : `Unexpected error: ${String(err)}`
       );
+      console.error(chalk3.dim("\n  Help us fix this: https://github.com/kairevicius/afterbefore/issues/new"));
+      console.error(chalk3.dim("  Include the debug.log file from your output directory.\n"));
     }
     await cleanupRegistry.runAll();
     process.exit(1);