afterbefore 0.1.3 → 0.1.4

package/dist/cli.js

@@ -100,11 +100,9 @@ var Logger = class {
     this.pipelineActive = false;
     if (this.spinner) {
       if (finished) {
+        this.spinner.stop();
         const bar = "\u2588".repeat(BAR_WIDTH);
-        this.spinner.stopAndPersist({
-          symbol: chalk.green("\u2714"),
-          text: bar
-        });
+        console.log(`${chalk.green("\u2714")}  ${bar}`);
       } else {
         this.spinner.stop();
       }
@@ -223,8 +221,8 @@ function getCurrentBranch(cwd) {
 
 // src/pipeline.ts
 import { resolve as resolve4 } from "path";
+import { unlinkSync } from "fs";
 import { exec } from "child_process";
-import chalk2 from "chalk";
 
 // src/config.ts
 import { resolve } from "path";
@@ -1480,7 +1478,6 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
 
 // src/stages/compare.ts
 import { readFileSync as readFileSync5 } from "fs";
-import { writeFileSync } from "fs";
 import { join as join7, dirname as dirname2 } from "path";
 import { PNG } from "pngjs";
 import pixelmatch from "pixelmatch";
@@ -1528,9 +1525,7 @@ async function generateComposite(beforePath, afterPath, outputPath, browser, bgC
 }
 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);
@@ -1538,35 +1533,29 @@ async function compareOne(capture, outputDir, threshold, options) {
   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,
+    new Uint8Array(width * height * 4),
     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,
-      comparePath,
-      options.browser,
-      options.bgColor
-    );
-  }
+  await generateComposite(
+    capture.beforePath,
+    capture.afterPath,
+    comparePath,
+    options.browser,
+    options.bgColor
+  );
   return {
     route: capture.route,
     prefix: capture.prefix,
     beforePath: capture.beforePath,
     afterPath: capture.afterPath,
-    diffPath,
     comparePath,
-    sliderPath,
     diffPixels,
     totalPixels,
     diffPercentage,
@@ -1582,13 +1571,12 @@ async function compareScreenshots(captures, outputDir, threshold = 0.1, options)
 }
 
 // src/stages/report.ts
-import { writeFileSync as writeFileSync2 } from "fs";
+import { writeFileSync } 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";
-import { relative as relative2 } from "path";
 function toBase64(filePath) {
   return readFileSync6(filePath).toString("base64");
 }
@@ -1599,7 +1587,6 @@ function generateReportHtml(results, outputDir) {
   const changed = results.filter((r) => r.changed);
   const unchanged = results.filter((r) => !r.changed);
   const card = (r) => {
-    const sliderHref = outputDir ? relative2(outputDir, r.sliderPath) : r.sliderPath;
     return `
     <div class="card ${r.changed ? "changed" : "unchanged"}">
       <div class="card-header">
@@ -1617,12 +1604,7 @@ function generateReportHtml(results, outputDir) {
           <div class="label">After</div>
           <img src="${imgSrc(r.afterPath)}" alt="After" />
         </div>
-        <div class="img-col">
-          <div class="label">Diff</div>
-          <img src="${imgSrc(r.diffPath)}" alt="Diff" />
-        </div>
       </div>
-      ${r.changed ? `<a class="slider-link" href="${sliderHref}">Open slider view</a>` : ""}
     </div>`;
   };
   return `<!DOCTYPE html>
@@ -1644,12 +1626,10 @@ function generateReportHtml(results, outputDir) {
   .badge { font-size: 12px; padding: 2px 8px; border-radius: 9999px; font-weight: 500; }
   .badge-changed { background: #fef3c7; color: #92400e; }
   .badge-unchanged { background: #d1fae5; color: #065f46; }
-  .images { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: #e5e7eb; }
+  .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; }
-  .slider-link { display: block; padding: 8px 16px; text-align: center; font-size: 13px; color: #2563eb; text-decoration: none; border-top: 1px solid #e5e7eb; }
-  .slider-link:hover { background: #eff6ff; }
   .section-title { font-size: 18px; font-weight: 600; margin: 24px 0 12px; }
 </style>
 </head>
@@ -1664,83 +1644,6 @@ ${unchanged.length > 0 ? `<h2 class="section-title">Unchanged (${unchanged.lengt
 </html>`;
 }
 
-// src/templates/slider.html.ts
-import { readFileSync as readFileSync7 } from "fs";
-function toBase642(filePath) {
-  return readFileSync7(filePath).toString("base64");
-}
-function imgSrc2(filePath) {
-  return `data:image/png;base64,${toBase642(filePath)}`;
-}
-function generateSliderHtml(result) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>afterbefore Slider - ${result.route}</title>
-<style>
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9fafb; color: #111827; padding: 24px; }
-  h1 { font-size: 20px; margin-bottom: 4px; }
-  .meta { color: #6b7280; font-size: 13px; margin-bottom: 16px; }
-  .container { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; user-select: none; cursor: ew-resize; }
-  .container img { display: block; width: 100%; height: auto; }
-  .before-wrap { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
-  .before-wrap img { display: block; height: 100%; width: auto; min-width: 100%; object-fit: cover; }
-  .slider-line { position: absolute; top: 0; width: 3px; height: 100%; background: #2563eb; cursor: ew-resize; z-index: 10; }
-  .slider-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #2563eb; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
-  .slider-handle::before { content: '\\2194'; color: #fff; font-size: 18px; }
-  .labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
-</style>
-</head>
-<body>
-<h1>${result.route}</h1>
-<p class="meta">${result.diffPercentage.toFixed(2)}% changed (${result.diffPixels.toLocaleString()} pixels)</p>
-
-<div class="container" id="slider">
-  <img src="${imgSrc2(result.afterPath)}" alt="After" draggable="false" />
-  <div class="before-wrap" id="beforeWrap">
-    <img src="${imgSrc2(result.beforePath)}" alt="Before" draggable="false" />
-  </div>
-  <div class="slider-line" id="sliderLine">
-    <div class="slider-handle"></div>
-  </div>
-</div>
-<div class="labels"><span>Before</span><span>After</span></div>
-
-<script>
-(function() {
-  const container = document.getElementById('slider');
-  const beforeWrap = document.getElementById('beforeWrap');
-  const sliderLine = document.getElementById('sliderLine');
-  let dragging = false;
-
-  function setPosition(x) {
-    const rect = container.getBoundingClientRect();
-    let pct = ((x - rect.left) / rect.width) * 100;
-    pct = Math.max(0, Math.min(100, pct));
-    beforeWrap.style.width = pct + '%';
-    sliderLine.style.left = pct + '%';
-  }
-
-  // Start at 50%
-  beforeWrap.style.width = '50%';
-  sliderLine.style.left = '50%';
-
-  container.addEventListener('mousedown', function(e) { dragging = true; setPosition(e.clientX); });
-  window.addEventListener('mousemove', function(e) { if (dragging) setPosition(e.clientX); });
-  window.addEventListener('mouseup', function() { dragging = false; });
-
-  container.addEventListener('touchstart', function(e) { dragging = true; setPosition(e.touches[0].clientX); }, { passive: true });
-  window.addEventListener('touchmove', function(e) { if (dragging) setPosition(e.touches[0].clientX); }, { passive: true });
-  window.addEventListener('touchend', function() { dragging = false; });
-})();
-</script>
-</body>
-</html>`;
-}
-
 // src/templates/summary.md.ts
 function generateSummaryMd(results, gitDiff, options) {
   const includeFilePaths = options?.includeFilePaths ?? true;
@@ -1841,18 +1744,12 @@ async function generateReport(results, outputDir, options) {
   await ensureDir(outputDir);
   const summaryMd = generateSummaryMd(results);
   const summaryPath = join8(outputDir, "summary.md");
-  writeFileSync2(summaryPath, summaryMd, "utf-8");
+  writeFileSync(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");
+  writeFileSync(indexPath, reportHtml, "utf-8");
   logger.success(`Written report to ${indexPath}`);
-  for (const result of results) {
-    if (!result.changed) continue;
-    const sliderHtml = generateSliderHtml(result);
-    writeFileSync2(result.sliderPath, sliderHtml, "utf-8");
-    logger.dim(`Written slider for ${result.route}`);
-  }
   if (options.post) {
     const prNumber = findPrNumber();
     if (!prNumber) {
@@ -1868,10 +1765,6 @@ async function generateReport(results, outputDir, options) {
 }
 
 // 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)\//, "");
@@ -1958,7 +1851,7 @@ async function runPipeline(options) {
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.3" : "dev";
+    const version = true ? "0.1.4" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -2025,13 +1918,6 @@ afterbefore v${version} \xB7 Comparing against ${base}
       );
       return;
     }
-    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...");
@@ -2068,7 +1954,26 @@ afterbefore v${version} \xB7 Comparing against ${base}
     );
     logger.pipeline(7, "Comparing screenshots...");
     const bgColor = detectBgColor(cwd);
-    const results = await compareScreenshots(captures, outputDir, options.threshold, { browser, bgColor });
+    const allResults = await compareScreenshots(captures, outputDir, options.threshold, { browser, bgColor });
+    const results = allResults.filter((r) => {
+      const isSubCapture = r.prefix.includes("~");
+      if (isSubCapture && !r.changed) {
+        try {
+          unlinkSync(r.beforePath);
+        } catch {
+        }
+        try {
+          unlinkSync(r.afterPath);
+        } catch {
+        }
+        try {
+          unlinkSync(r.comparePath);
+        } catch {
+        }
+        return false;
+      }
+      return true;
+    });
     logger.pipeline(8, "Generating report...");
     await generateReport(results, outputDir, { post });
     const summary = generateSummaryMd(results, gitDiff);
@@ -2092,7 +1997,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.3").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.4").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"