afterbefore 0.1.6 → 0.1.7

package/README.md

@@ -1,7 +1,7 @@
 # afterbefore
 
 [![npm version](https://img.shields.io/npm/v/afterbefore?color=blue)](https://www.npmjs.com/package/afterbefore)
-[![npm downloads](https://img.shields.io/npm/dm/afterbefore?color=green)](https://www.npmjs.com/package/afterbefore)
+[![npm downloads](https://img.shields.io/npm/dm/afterbefore)](https://www.npmjs.com/package/afterbefore)
 
 Automatic before/after screenshot capture for Next.js pull requests.
 
@@ -17,15 +17,13 @@ Run it from a feature branch in any Next.js app router project:
 npx afterbefore
 ```
 
-It spins up two dev servers (your branch and the base branch), captures screenshots of affected routes, diffs them pixel by pixel, and generates an HTML report with interactive before/after sliders.
+It spins up two dev servers (your branch and the base branch), captures screenshots of affected routes, and diffs them pixel by pixel.
 
 Output lands in `.afterbefore/`:
 
 ```
 .afterbefore/
 └── feature-branch_2026-02-26/
-    ├── index.html          # visual report
-    ├── summary.md          # markdown table
     ├── about-before.png
     ├── about-after.png
     ├── about-diff.png
@@ -33,12 +31,6 @@ Output lands in `.afterbefore/`:
     └── about-slider.html   # interactive slider
 ```
 
-Open the report automatically:
-
-```bash
-npx afterbefore --open
-```
-
 ## How it works
 
 1. Reads `git diff` to find changed files
@@ -49,7 +41,6 @@ npx afterbefore --open
 6. Starts two Next.js dev servers in parallel (base branch + current branch)
 7. Captures full-page screenshots of each affected route on both servers using Playwright
 8. Compares screenshots with pixelmatch and generates diff images
-9. Builds an HTML report with side-by-side comparisons and interactive sliders
 
 Layouts work the same way. Edit `app/dashboard/layout.tsx` and it captures every page under `app/dashboard/`.
 
@@ -64,7 +55,6 @@ If only global files changed (like `globals.css` or `tailwind.config.ts`) and no
 | `--post` | `false` | Post results as a GitHub PR comment |
 | `--threshold <percent>` | `0.1` | Ignore diffs below this percentage |
 | `--max-routes <count>` | `6` | Cap the number of routes captured (0 = unlimited) |
-| `--open` | `false` | Open the HTML report in your browser |
 | `--width <pixels>` | `1280` | Viewport width |
 | `--height <pixels>` | `720` | Viewport height |
 | `--device <name>` | — | Playwright device, e.g. `"iPhone 14"` |

package/dist/cli.js

@@ -116,14 +116,14 @@ var Logger = class {
     if (this.spinner) {
       if (finished) {
         this.spinner.stop();
-        const bar = "#".repeat(BAR_WIDTH);
+        const bar = "\u2588".repeat(BAR_WIDTH);
         console.log(`${chalk.green("\u2714")}  ${bar}`);
       } else {
         this.spinner.stop();
       }
       this.spinner = null;
     } else if (finished) {
-      const bar = "#".repeat(BAR_WIDTH);
+      const bar = "\u2588".repeat(BAR_WIDTH);
       console.log(`${chalk.green("\u2714")} ${bar}`);
     }
     this.pipelineTotal = 0;
@@ -138,7 +138,7 @@ var Logger = class {
     const total = this.pipelineTotal || 1;
     const clampedStep = Math.max(0, Math.min(step, total));
     const filled = Math.round(clampedStep / total * BAR_WIDTH);
-    const bar = "#".repeat(filled) + "-".repeat(BAR_WIDTH - filled);
+    const bar = "\u2588".repeat(filled) + "\u2591".repeat(BAR_WIDTH - filled);
     return `  ${bar} ${clampedStep}/${total} ${label}`;
   }
   clearSpinner() {
@@ -241,7 +241,6 @@ function getCurrentBranch(cwd) {
 // src/pipeline.ts
 import { resolve as resolve4 } from "path";
 import { unlinkSync } from "fs";
-import { exec } from "child_process";
 
 // src/config.ts
 import { resolve } from "path";
@@ -900,8 +899,8 @@ function waitForServer(url, timeoutMs) {
 async function startServer(projectDir, port) {
   const url = `http://localhost:${port}`;
   const pm = detectPackageManager(projectDir);
-  const exec2 = pmExec(pm);
-  const [cmd, ...baseArgs] = exec2.split(" ");
+  const exec = pmExec(pm);
+  const [cmd, ...baseArgs] = exec.split(" ");
   const lockFile = join5(projectDir, ".next", "dev", "lock");
   if (existsSync5(lockFile)) {
     throw new AfterbeforeError(
@@ -1201,6 +1200,49 @@ async function tagChangedComponentInstances(page, changedComponents, maxPerSourc
         });
         bySource.set(match.source, list);
       }
+      for (const target of targets) {
+        if (bySource.has(target.original) && bySource.get(target.original).length > 0) continue;
+        const fileName = target.original.split("/").pop() ?? "";
+        const componentName = fileName.replace(/\.[a-z0-9]+$/i, "");
+        if (!componentName || componentName.length < 2) continue;
+        const pattern = new RegExp("\\b" + componentName + "\\b", "i");
+        const headings = Array.from(document.querySelectorAll("h1, h2, h3, h4"));
+        for (const heading of headings) {
+          const text = (heading.textContent ?? "").trim();
+          if (!pattern.test(text)) continue;
+          let container = heading;
+          const headingTag = heading.tagName.toLowerCase();
+          let walkParent = heading.parentElement;
+          while (walkParent && walkParent !== document.body) {
+            const parentTag = walkParent.tagName.toLowerCase();
+            if (parentTag === "section" || parentTag === "article") {
+              container = walkParent;
+              break;
+            }
+            if (walkParent.getAttribute("role") === "region") {
+              container = walkParent;
+              break;
+            }
+            if (parentTag === "body" || parentTag === "main") break;
+            const siblingHeadings = walkParent.querySelectorAll(`:scope > * ${headingTag}, :scope > ${headingTag}`);
+            if (siblingHeadings.length > 1) break;
+            container = walkParent;
+            walkParent = walkParent.parentElement;
+          }
+          const rect = container.getBoundingClientRect();
+          if (rect.width < 4 || rect.height < 4) continue;
+          const list = bySource.get(target.original) ?? [];
+          list.push({
+            el: container,
+            parent: pickParentContainer(container),
+            name: componentName,
+            top: rect.top + window.scrollY,
+            left: rect.left + window.scrollX
+          });
+          bySource.set(target.original, list);
+          break;
+        }
+      }
       const tagged = [];
       for (let sourceIndex = 0; sourceIndex < targets.length; sourceIndex++) {
         const source = targets[sourceIndex].original;
@@ -1227,6 +1269,94 @@ async function tagChangedComponentInstances(page, changedComponents, maxPerSourc
     { changed: normalized, maxPerSource }
   );
 }
+async function captureComponentInstances(afterPage, beforePage, changedComponents, capturePrefix, captureLabel, outputDir, contextBeforePath, contextAfterPath, results) {
+  const deduped = Array.from(new Set(changedComponents.map(normalizePath)));
+  const [afterInstances, beforeInstances] = await Promise.all([
+    tagChangedComponentInstances(afterPage, deduped),
+    tagChangedComponentInstances(beforePage, deduped)
+  ]);
+  logger.dim(`  Component detection on ${captureLabel}: ${deduped.length} source(s), ${afterInstances.length} after / ${beforeInstances.length} before instance(s)`);
+  const afterBySource = groupBySource(afterInstances);
+  const beforeBySource = groupBySource(beforeInstances);
+  for (const source of deduped) {
+    const afterList = afterBySource.get(source) ?? [];
+    const beforeList = beforeBySource.get(source) ?? [];
+    const pairCount = Math.min(afterList.length, beforeList.length);
+    if (pairCount === 0) {
+      if (afterList.length > 0 || beforeList.length > 0) {
+        logger.dim(`  ${source}: ${afterList.length} after / ${beforeList.length} before (skipping unpaired)`);
+      }
+      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 = `${captureLabel} [${componentName} #${pairIndex + 1}]`;
+      const parentPrefix = `${capturePrefix}~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 = `${capturePrefix}~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 (parentBeforeOk && parentAfterOk || componentBeforeOk && componentAfterOk) {
+        const contextPrefix = `${capturePrefix}~cmp.${itemSlug}~context`;
+        results.push({
+          route: `${baseLabel} [context]`,
+          prefix: contextPrefix,
+          beforePath: contextBeforePath,
+          afterPath: contextAfterPath
+        });
+      }
+    }
+  }
+}
 async function captureAutoSections(afterPage, beforePage, parentPrefix, parentLabel, outputDir, options, settle, results) {
   const sections = await detectSections(afterPage, options.maxSectionsPerRoute);
   if (sections.length === 0) return;
@@ -1323,94 +1453,17 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
       ]);
       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))
+        await captureComponentInstances(
+          afterPage,
+          beforePage,
+          task.changedComponents,
+          task.prefix,
+          task.label,
+          outputDir,
+          beforePath,
+          afterPath,
+          results
         );
-        const [afterInstances, beforeInstances] = await Promise.all([
-          tagChangedComponentInstances(afterPage, changedComponents),
-          tagChangedComponentInstances(beforePage, changedComponents)
-        ]);
-        logger.dim(`  Component detection on ${task.route}: ${changedComponents.length} source(s), ${afterInstances.length} after / ${beforeInstances.length} before instance(s)`);
-        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) {
-            if (afterList.length > 0 || beforeList.length > 0) {
-              logger.dim(`  ${source}: ${afterList.length} after / ${beforeList.length} before (skipping unpaired)`);
-            }
-            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 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 (parentBeforeOk && parentAfterOk || componentBeforeOk && componentAfterOk) {
-              const contextPrefix = `${task.prefix}~cmp.${itemSlug}~context`;
-              results.push({
-                route: `${baseLabel} [context]`,
-                prefix: contextPrefix,
-                beforePath,
-                afterPath
-              });
-            }
-          }
-        }
       }
       if (options.autoSections && !task.actions && !task.selector && !task.skipAutoSections) {
         await captureAutoSections(
@@ -1470,6 +1523,19 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
               beforePath: tabBeforePath,
               afterPath: tabAfterPath
             });
+            if ((task.changedComponents?.length ?? 0) > 0) {
+              await captureComponentInstances(
+                afterPage,
+                beforePage,
+                task.changedComponents,
+                tabPrefix,
+                tabLabel,
+                outputDir,
+                tabBeforePath,
+                tabAfterPath,
+                results
+              );
+            }
             if (options.autoSections && !task.skipAutoSections) {
               await captureAutoSections(
                 afterPage,
@@ -1598,79 +1664,8 @@ async function compareScreenshots(captures, outputDir, threshold = 0.1, options)
 }
 
 // src/stages/report.ts
-import { writeFileSync as writeFileSync2 } from "fs";
-import { join as join8 } from "path";
 import { execSync as execSync4 } from "child_process";
 
-// src/templates/report.html.ts
-import { readFileSync as readFileSync6 } from "fs";
-function toBase64(filePath) {
-  return readFileSync6(filePath).toString("base64");
-}
-function imgSrc(filePath) {
-  return `data:image/png;base64,${toBase64(filePath)}`;
-}
-function generateReportHtml(results, outputDir) {
-  const changed = results.filter((r) => r.changed);
-  const unchanged = results.filter((r) => !r.changed);
-  const card = (r) => {
-    return `
-    <div class="card ${r.changed ? "changed" : "unchanged"}">
-      <div class="card-header">
-        <span class="route">${r.route}</span>
-        <span class="badge ${r.changed ? "badge-changed" : "badge-unchanged"}">
-          ${r.changed ? `${r.diffPercentage.toFixed(2)}% changed` : "No change"}
-        </span>
-      </div>
-      <div class="images">
-        <div class="img-col">
-          <div class="label">Before</div>
-          <img src="${imgSrc(r.beforePath)}" alt="Before" />
-        </div>
-        <div class="img-col">
-          <div class="label">After</div>
-          <img src="${imgSrc(r.afterPath)}" alt="After" />
-        </div>
-      </div>
-    </div>`;
-  };
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>afterbefore Report</title>
-<style>
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9fafb; color: #111827; padding: 24px; }
-  h1 { font-size: 24px; margin-bottom: 8px; }
-  .summary { color: #6b7280; margin-bottom: 24px; font-size: 14px; }
-  .grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
-  .card { background: #fff; border-radius: 8px; border: 1px solid #e5e7eb; overflow: hidden; }
-  .card.changed { border-color: #fbbf24; }
-  .card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
-  .route { font-weight: 600; font-size: 16px; font-family: monospace; }
-  .badge { font-size: 12px; padding: 2px 8px; border-radius: 9999px; font-weight: 500; }
-  .badge-changed { background: #fef3c7; color: #92400e; }
-  .badge-unchanged { background: #d1fae5; color: #065f46; }
-  .images { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e5e7eb; }
-  .img-col { background: #fff; padding: 8px; }
-  .img-col img { width: 100%; height: auto; display: block; border-radius: 4px; }
-  .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 4px; font-weight: 600; }
-  .section-title { font-size: 18px; font-weight: 600; margin: 24px 0 12px; }
-</style>
-</head>
-<body>
-<h1>afterbefore Report</h1>
-<p class="summary">${results.length} route(s) captured, ${changed.length} with visual changes.</p>
-
-${changed.length > 0 ? `<h2 class="section-title">Changed (${changed.length})</h2><div class="grid">${changed.map(card).join("")}</div>` : ""}
-${unchanged.length > 0 ? `<h2 class="section-title">Unchanged (${unchanged.length})</h2><div class="grid">${unchanged.map(card).join("")}</div>` : ""}
-
-</body>
-</html>`;
-}
-
 // src/templates/summary.md.ts
 function generateSummaryMd(results, gitDiff, options) {
   const includeFilePaths = options?.includeFilePaths ?? true;
@@ -1768,15 +1763,6 @@ function postOrUpdateComment(prNumber, body) {
   }
 }
 async function generateReport(results, outputDir, options) {
-  await ensureDir(outputDir);
-  const summaryMd = generateSummaryMd(results);
-  const summaryPath = join8(outputDir, "summary.md");
-  writeFileSync2(summaryPath, summaryMd, "utf-8");
-  logger.success(`Written summary to ${summaryPath}`);
-  const reportHtml = generateReportHtml(results, outputDir);
-  const indexPath = join8(outputDir, "index.html");
-  writeFileSync2(indexPath, reportHtml, "utf-8");
-  logger.success(`Written report to ${indexPath}`);
   if (options.post) {
     const prNumber = findPrNumber();
     if (!prNumber) {
@@ -1868,17 +1854,13 @@ function expandRoutes(routes, config, routeComponentMap) {
   }
   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 sessionName = generateSessionName(cwd);
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.6" : "dev";
+    const version = true ? "0.1.7" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -2011,10 +1993,6 @@ afterbefore v${version} \xB7 Comparing against ${base}
     logger.success(
       `Done in ${elapsed}s \u2014 ${results.length} route(s) captured, ${changedCount} with visual changes`
     );
-    logger.dim(`  Report: ${outputDir}/index.html`);
-    if (options.open) {
-      openInBrowser(resolve4(outputDir, "index.html"));
-    }
   } finally {
     try {
       logger.writeLogFile(resolve4(outputDir, "debug.log"));
@@ -2028,7 +2006,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.6").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.7").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"
@@ -2036,7 +2014,7 @@ program.name("afterbefore").description(
   "--max-routes <count>",
   "Maximum routes to capture (0 = unlimited)",
   "6"
-).option("--open", "Auto-open the HTML report in your browser", false).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("--auto-sections", "Auto-detect and capture 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("--auto-sections", "Auto-detect and capture heading-labeled sections").option("--max-sections <count>", "Max auto-detected sections per page state", "10").action(async (opts) => {
   const cwd = process.cwd();
   if (!isGitRepo(cwd)) {
     logger.error("Not a git repository. Run this from inside a git repo.");
@@ -2048,7 +2026,6 @@ program.name("afterbefore").description(
     post: opts.post,
     threshold: parseFloat(opts.threshold),
     maxRoutes: parseInt(opts.maxRoutes, 10),
-    open: opts.open,
     width: parseInt(opts.width, 10),
     height: parseInt(opts.height, 10),
     device: opts.device,