afterbefore 0.1.12 → 0.1.13

package/dist/cli.js

@@ -240,7 +240,7 @@ function getCurrentBranch(cwd) {
 }
 
 // src/pipeline.ts
-import { resolve as resolve3 } from "path";
+import { resolve as resolve4 } from "path";
 import { unlinkSync as unlinkSync2 } from "fs";
 
 // src/config.ts
@@ -276,7 +276,7 @@ async function ensureDir(dir) {
 // src/utils/port.ts
 import { createServer } from "net";
 function findPort() {
-  return new Promise((resolve4, reject) => {
+  return new Promise((resolve5, reject) => {
     const server = createServer();
     server.listen(0, () => {
       const addr = server.address();
@@ -286,7 +286,7 @@ function findPort() {
         return;
       }
       const port = addr.port;
-      server.close(() => resolve4(port));
+      server.close(() => resolve5(port));
     });
     server.on("error", reject);
   });
@@ -299,6 +299,105 @@ async function findAvailablePort(exclude) {
   throw new Error("Failed to find available port after 5 attempts");
 }
 
+// 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"]);
 function parseDiffOutput(raw) {
@@ -372,13 +471,13 @@ function classifyFiles(files) {
 }
 
 // src/stages/graph.ts
-import { readdirSync, readFileSync as readFileSync3 } 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 as existsSync2, readFileSync as readFileSync2, statSync } from "fs";
-import { resolve as resolve2, 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);
@@ -386,7 +485,7 @@ function createResolver(projectRoot) {
   function cachedExists(p) {
     const cached = existsCache.get(p);
     if (cached !== void 0) return cached;
-    const result = existsSync2(p);
+    const result = existsSync3(p);
     existsCache.set(p, result);
     return result;
   }
@@ -412,14 +511,14 @@ function createResolver(projectRoot) {
   return (specifier, fromFile) => {
     if (specifier.startsWith(".")) {
       const dir = dirname(fromFile);
-      const candidate = resolve2(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 = resolve2(projectRoot, target + rest);
+        const candidate = resolve3(projectRoot, target + rest);
         const result = tryResolve(candidate);
         if (result) return result;
       }
@@ -429,12 +528,12 @@ function createResolver(projectRoot) {
 }
 function loadPathMappings(projectRoot) {
   const tsconfigPath = join(projectRoot, "tsconfig.json");
-  if (!existsSync2(tsconfigPath)) {
+  if (!existsSync3(tsconfigPath)) {
     logger.dim("No tsconfig.json found, skipping path alias resolution");
     return [];
   }
   try {
-    const raw = readFileSync2(tsconfigPath, "utf-8");
+    const raw = readFileSync3(tsconfigPath, "utf-8");
     const cleaned = stripJsonComments(raw);
     const config = JSON.parse(cleaned);
     const paths = config?.compilerOptions?.paths;
@@ -534,7 +633,7 @@ function collectFiles(dir) {
 function parseImports(filePath) {
   let source;
   try {
-    source = readFileSync3(filePath, "utf-8");
+    source = readFileSync4(filePath, "utf-8");
   } catch {
     return [];
   }
@@ -554,7 +653,7 @@ function parseImports(filePath) {
 }
 async function buildImportGraph(projectRoot) {
   await init;
-  const resolve4 = createResolver(projectRoot);
+  const resolve5 = createResolver(projectRoot);
   const allFiles = [];
   for (const dir of SOURCE_DIRS) {
     const fullDir = join2(projectRoot, dir);
@@ -568,7 +667,7 @@ async function buildImportGraph(projectRoot) {
     const specifiers = parseImports(filePath);
     const deps = /* @__PURE__ */ new Set();
     for (const spec of specifiers) {
-      const resolved = resolve4(spec, filePath);
+      const resolved = resolve5(spec, filePath);
       if (!resolved) continue;
       const relResolved = relative(projectRoot, resolved);
       deps.add(relResolved);
@@ -727,13 +826,13 @@ import { join as join4 } from "path";
 import { tmpdir } from "os";
 
 // src/utils/pm.ts
-import { existsSync as existsSync3 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 import { join as join3 } from "path";
 function detectPackageManager(dir) {
-  if (existsSync3(join3(dir, "bun.lockb")) || existsSync3(join3(dir, "bun.lock")))
+  if (existsSync4(join3(dir, "bun.lockb")) || existsSync4(join3(dir, "bun.lock")))
     return "bun";
-  if (existsSync3(join3(dir, "pnpm-lock.yaml"))) return "pnpm";
-  if (existsSync3(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) {
@@ -790,11 +889,11 @@ async function createWorktree(base, cwd) {
 
 // src/stages/server.ts
 import { spawn } from "child_process";
-import { existsSync as existsSync4 } from "fs";
+import { existsSync as existsSync5 } from "fs";
 import { join as join5 } from "path";
 function waitForServer(url, timeoutMs) {
   const start = Date.now();
-  return new Promise((resolve4, reject) => {
+  return new Promise((resolve5, reject) => {
     const poll = async () => {
       if (Date.now() - start > timeoutMs) {
         reject(
@@ -807,7 +906,7 @@ function waitForServer(url, timeoutMs) {
       }
       try {
         await fetch(url);
-        resolve4();
+        resolve5();
       } catch {
         setTimeout(poll, 150);
       }
@@ -821,7 +920,7 @@ async function startServer(projectDir, port) {
   const exec2 = pmExec(pm);
   const [cmd, ...baseArgs] = exec2.split(" ");
   const lockFile = join5(projectDir, ".next", "dev", "lock");
-  if (existsSync4(lockFile)) {
+  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.`
@@ -848,17 +947,17 @@ async function stopServer(server) {
     process.kill(-pid, "SIGTERM");
   } catch {
   }
-  await new Promise((resolve4) => {
+  await new Promise((resolve5) => {
     const timeout = setTimeout(() => {
       try {
         process.kill(-pid, "SIGKILL");
       } catch {
       }
-      resolve4();
+      resolve5();
     }, 5e3);
     server.process.on("exit", () => {
       clearTimeout(timeout);
-      resolve4();
+      resolve5();
     });
   });
 }
@@ -1557,65 +1656,111 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
 }
 
 // src/stages/compare.ts
-import { join as join7 } from "path";
-import { unlinkSync } from "fs";
+import { join as join7, dirname as dirname2 } from "path";
+import { readFileSync as readFileSync5, unlinkSync } from "fs";
 import { ODiffServer } from "odiff-bin";
-async function compareOne(capture, outputDir, threshold, server) {
+import sharp from "sharp";
+function readPngSize(path) {
+  const buf = readFileSync5(path);
+  return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
+}
+async function generateComposite(beforePath, afterPath, outputPath, bgColor) {
+  const beforeSize = readPngSize(beforePath);
+  const afterSize = readPngSize(afterPath);
+  const imgW = Math.max(beforeSize.width, afterSize.width);
+  const imgH = Math.max(beforeSize.height, afterSize.height);
+  const PADDING = 120;
+  const GAP = 80;
+  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 [beforeBuf, afterBuf] = await Promise.all([
+    sharp(beforePath).resize(colW, maxImgH, { fit: "inside" }).toBuffer({ resolveWithObject: true }),
+    sharp(afterPath).resize(colW, maxImgH, { fit: "inside" }).toBuffer({ resolveWithObject: true })
+  ]);
+  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 + 50;
+  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"
+            fill="#22c55e">After</text>
+    </svg>`
+  );
+  await sharp({
+    create: {
+      width: canvasW,
+      height: canvasH,
+      channels: 4,
+      background: bgColor
+    }
+  }).composite([
+    { input: beforeBuf.data, left: beforeLeft, top: beforeTop },
+    { input: afterBuf.data, left: afterLeft, top: afterTop },
+    { input: labelSvg, left: 0, top: 0 }
+  ]).png().toFile(outputPath);
+}
+async function compareOne(capture, outputDir, threshold, server, options) {
   const diffPath = join7(outputDir, `${capture.prefix}-diff.png`);
+  const dir = dirname2(capture.beforePath);
+  const comparePath = join7(dir, `${capture.prefix}-compare.png`);
   const result = await server.compare(
     capture.beforePath,
     capture.afterPath,
     diffPath,
     { threshold: 0.1, antialiasing: true }
   );
-  if (result.match) {
-    return {
-      route: capture.route,
-      prefix: capture.prefix,
-      beforePath: capture.beforePath,
-      afterPath: capture.afterPath,
-      diffPixels: 0,
-      totalPixels: 0,
-      diffPercentage: 0,
-      changed: false
-    };
+  try {
+    unlinkSync(diffPath);
+  } catch {
   }
-  if (result.reason === "pixel-diff") {
-    const changed = result.diffPercentage > threshold;
-    if (!changed) {
-      try {
-        unlinkSync(diffPath);
-      } catch {
-      }
-    }
-    return {
-      route: capture.route,
-      prefix: capture.prefix,
-      beforePath: capture.beforePath,
-      afterPath: capture.afterPath,
-      diffPixels: result.diffCount,
-      totalPixels: 0,
-      diffPercentage: result.diffPercentage,
-      changed
-    };
+  let diffPixels = 0;
+  let totalPixels = 0;
+  let diffPercentage = 0;
+  let changed = false;
+  if (result.match) {
+  } else if (result.reason === "pixel-diff") {
+    diffPixels = result.diffCount;
+    diffPercentage = result.diffPercentage;
+    changed = diffPercentage > threshold;
+  } else {
+    diffPercentage = 100;
+    changed = true;
   }
+  await generateComposite(
+    capture.beforePath,
+    capture.afterPath,
+    comparePath,
+    options.bgColor
+  );
   return {
     route: capture.route,
     prefix: capture.prefix,
     beforePath: capture.beforePath,
     afterPath: capture.afterPath,
-    diffPixels: 0,
-    totalPixels: 0,
-    diffPercentage: 100,
-    changed: true
+    comparePath,
+    diffPixels,
+    totalPixels,
+    diffPercentage,
+    changed
   };
 }
-async function compareScreenshots(captures, outputDir, threshold = 0.1) {
+async function compareScreenshots(captures, outputDir, threshold = 0.1, options) {
   const server = new ODiffServer();
   try {
     const results = [];
     for (const capture of captures) {
-      results.push(await compareOne(capture, outputDir, threshold, server));
+      results.push(await compareOne(capture, outputDir, threshold, server, options));
     }
     return results;
   } finally {
@@ -1662,10 +1807,10 @@ function generateSummaryMd(results, gitDiff, options) {
   if (includeFilePaths) {
     lines.push("");
     lines.push("### Screenshots");
-    lines.push("| Route | Before | After |");
-    lines.push("|-------|--------|-------|");
+    lines.push("| Route | Before | After | Compare |");
+    lines.push("|-------|--------|-------|---------|");
     for (const r of changed) {
-      lines.push(`| \`${r.route}\` | \`${r.beforePath}\` | \`${r.afterPath}\` |`);
+      lines.push(`| \`${r.route}\` | \`${r.beforePath}\` | \`${r.afterPath}\` | \`${r.comparePath}\` |`);
     }
     lines.push("");
     lines.push("Review the before/after screenshots above to verify the visual changes match the code diff.");
@@ -1791,10 +1936,10 @@ function expandRoutes(routes, config, routeComponentMap) {
 async function runPipeline(options) {
   const { base, output, post, cwd } = options;
   const sessionName = generateSessionName(cwd);
-  const outputDir = resolve3(cwd, output, sessionName);
+  const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.12" : "dev";
+    const version = true ? "0.1.13" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -1895,7 +2040,8 @@ afterbefore v${version} \xB7 Comparing against ${base}
       }
     );
     logger.pipeline(7, "Comparing screenshots...");
-    const allResults = await compareScreenshots(captures, outputDir, options.threshold);
+    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) {
@@ -1907,6 +2053,10 @@ afterbefore v${version} \xB7 Comparing against ${base}
           unlinkSync2(r.afterPath);
         } catch {
         }
+        try {
+          unlinkSync2(r.comparePath);
+        } catch {
+        }
         return false;
       }
       return true;
@@ -1923,7 +2073,7 @@ afterbefore v${version} \xB7 Comparing against ${base}
     );
   } finally {
     try {
-      logger.writeLogFile(resolve3(outputDir, "debug.log"));
+      logger.writeLogFile(resolve4(outputDir, "debug.log"));
     } catch {
     }
     await cleanupRegistry.runAll();
@@ -1934,7 +2084,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.12").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.13").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"