web-corders-vrt 0.1.1

package/dist/bin/vrt.js

@@ -0,0 +1,917 @@
+#!/usr/bin/env node
+
+// bin/vrt.ts
+import { Command } from "commander";
+
+// src/schemas.ts
+import { z } from "zod";
+var cliOptionsSchema = z.object({
+  before: z.string().url("--before must be a valid URL"),
+  after: z.string().url("--after must be a valid URL"),
+  paths: z.string().transform((val) => val.split(",").map((p) => p.trim())),
+  threshold: z.coerce.number().min(0).max(100).default(0.1),
+  hide: z.string().optional().transform((val) => val ? val.split(",").map((s) => s.trim()) : []),
+  html: z.boolean().default(true),
+  open: z.boolean().default(true)
+});
+
+// src/commands/run.ts
+import { mkdir, writeFile as writeFile3 } from "fs/promises";
+import { join as join3 } from "path";
+import ora from "ora";
+import chalk2 from "chalk";
+
+// src/core/screenshotter.ts
+import { chromium } from "playwright";
+
+// src/constants.ts
+var DEFAULT_SP_VIEWPORT = { width: 375, height: 812 };
+var DEFAULT_PC_VIEWPORT = { width: 1440, height: 900 };
+var DEFAULT_THRESHOLD = 0.1;
+var DEFAULT_DELAY = 1e3;
+var DEFAULT_CONCURRENCY = 3;
+var DEFAULT_OUT_DIR = "./vrt-results";
+var SP_USER_AGENT = "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1";
+var BLOCKED_DOMAINS = [
+  "googletagmanager.com",
+  "google-analytics.com",
+  "googleadservices.com",
+  "googlesyndication.com",
+  "doubleclick.net",
+  "facebook.net",
+  "fbcdn.net",
+  "analytics.yahoo.co.jp",
+  "clarity.ms",
+  "hotjar.com",
+  "newrelic.com",
+  "sentry.io",
+  "datadoghq.com"
+];
+var DISABLE_ANIMATIONS_CSS = `
+*, *::before, *::after {
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+  scroll-behavior: auto !important;
+  caret-color: transparent !important;
+}
+`;
+
+// src/core/stabilizer.ts
+async function stabilizePage(page, options) {
+  if (options.disableAnimations !== false) {
+    await page.addStyleTag({ content: DISABLE_ANIMATIONS_CSS });
+  }
+  if (options.hideSelectors && options.hideSelectors.length > 0) {
+    const hideCSS = options.hideSelectors.map((s) => `${s} { visibility: hidden !important; }`).join("\n");
+    await page.addStyleTag({ content: hideCSS });
+  }
+  if (options.delay && options.delay > 0) {
+    await page.waitForTimeout(options.delay);
+  }
+}
+function getDateMockScript() {
+  return `
+    (() => {
+      const fixedDate = new Date('2025-01-01T00:00:00Z');
+      const OrigDate = Date;
+      const MockDate = class extends OrigDate {
+        constructor(...args) {
+          if (args.length === 0) {
+            super(fixedDate.getTime());
+          } else {
+            super(...args);
+          }
+        }
+        static now() { return fixedDate.getTime(); }
+      };
+      globalThis.Date = MockDate;
+    })();
+  `;
+}
+
+// src/core/screenshotter.ts
+var Screenshotter = class {
+  browser = null;
+  async initialize() {
+    this.browser = await chromium.launch();
+  }
+  /**
+   * 指定URLのスクリーンショットを取得する。
+   */
+  async capture(url, pagePath, viewportType, hideSelectors) {
+    if (!this.browser) {
+      throw new Error("Browser not initialized. Call initialize() first.");
+    }
+    const viewport = viewportType === "sp" ? { ...DEFAULT_SP_VIEWPORT } : { ...DEFAULT_PC_VIEWPORT };
+    const context = await this.browser.newContext({
+      viewport,
+      deviceScaleFactor: viewportType === "sp" ? 2 : 1,
+      userAgent: viewportType === "sp" ? SP_USER_AGENT : void 0
+    });
+    const page = await context.newPage();
+    await page.addInitScript(getDateMockScript());
+    await page.route("**/*", (route) => {
+      const reqUrl = route.request().url();
+      const shouldBlock = BLOCKED_DOMAINS.some(
+        (domain) => reqUrl.includes(domain)
+      );
+      if (shouldBlock) {
+        return route.abort();
+      }
+      return route.continue();
+    });
+    await page.goto(url, { waitUntil: "load", timeout: 6e4 });
+    await stabilizePage(page, {
+      hideSelectors,
+      delay: DEFAULT_DELAY
+    });
+    const buffer = await page.screenshot({
+      fullPage: true,
+      type: "png"
+    });
+    const width = buffer.readUInt32BE(16);
+    const height = buffer.readUInt32BE(20);
+    await context.close();
+    const pageName = pagePath === "/" ? "top" : pagePath.replace(/^\//, "").replace(/\//g, "-");
+    return {
+      pagePath,
+      pageName,
+      viewportType,
+      buffer: Buffer.from(buffer),
+      width,
+      height
+    };
+  }
+  /**
+   * 複数のページ・ビューポートのスクリーンショットを並行で取得する。
+   */
+  async captureAll(baseUrl, paths, viewports, hideSelectors) {
+    const tasks = [];
+    for (const pagePath of paths) {
+      const url = new URL(pagePath, baseUrl).toString();
+      for (const viewport of viewports) {
+        tasks.push({ url, path: pagePath, viewport });
+      }
+    }
+    const results = [];
+    for (let i = 0; i < tasks.length; i += DEFAULT_CONCURRENCY) {
+      const batch = tasks.slice(i, i + DEFAULT_CONCURRENCY);
+      const batchResults = await Promise.all(
+        batch.map(
+          (task) => this.capture(task.url, task.path, task.viewport, hideSelectors)
+        )
+      );
+      results.push(...batchResults);
+    }
+    return results;
+  }
+  async cleanup() {
+    await this.browser?.close();
+    this.browser = null;
+  }
+};
+
+// src/core/comparator.ts
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+function compareImages(beforeBuffer, afterBuffer, threshold = 0.1) {
+  const before = PNG.sync.read(beforeBuffer);
+  const after = PNG.sync.read(afterBuffer);
+  const width = Math.max(before.width, after.width);
+  const height = Math.max(before.height, after.height);
+  const normalizedBefore = normalizeImage(before, width, height);
+  const normalizedAfter = normalizeImage(after, width, height);
+  const diff = new PNG({ width, height });
+  const diffCount = pixelmatch(
+    normalizedBefore.data,
+    normalizedAfter.data,
+    diff.data,
+    width,
+    height,
+    {
+      threshold: 0.1,
+      includeAA: false,
+      alpha: 0.1,
+      diffColor: [255, 0, 0],
+      diffColorAlt: [0, 200, 0]
+    }
+  );
+  const totalPixels = width * height;
+  const diffPercentage = diffCount / totalPixels * 100;
+  return {
+    diffCount,
+    totalPixels,
+    diffPercentage,
+    diffImage: PNG.sync.write(diff),
+    passed: diffPercentage <= threshold,
+    dimensions: {
+      width,
+      height,
+      beforeHeight: before.height,
+      afterHeight: after.height
+    }
+  };
+}
+function normalizeImage(png, targetWidth, targetHeight) {
+  if (png.width === targetWidth && png.height === targetHeight) {
+    return png;
+  }
+  const normalized = new PNG({ width: targetWidth, height: targetHeight });
+  for (let i = 0; i < normalized.data.length; i += 4) {
+    normalized.data[i] = 255;
+    normalized.data[i + 1] = 255;
+    normalized.data[i + 2] = 255;
+    normalized.data[i + 3] = 255;
+  }
+  for (let y = 0; y < png.height; y++) {
+    for (let x = 0; x < png.width; x++) {
+      const srcIdx = (y * png.width + x) * 4;
+      const dstIdx = (y * targetWidth + x) * 4;
+      normalized.data[dstIdx] = png.data[srcIdx];
+      normalized.data[dstIdx + 1] = png.data[srcIdx + 1];
+      normalized.data[dstIdx + 2] = png.data[srcIdx + 2];
+      normalized.data[dstIdx + 3] = png.data[srcIdx + 3];
+    }
+  }
+  return normalized;
+}
+
+// src/core/region-detector.ts
+import { PNG as PNG2 } from "pngjs";
+function detectDiffRegions(diffImageBuffer, options = {}) {
+  const { minRegionSize = 10, mergingDistance = 50 } = options;
+  const png = PNG2.sync.read(diffImageBuffer);
+  const { width, height, data } = png;
+  const diffPixels = [];
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const idx = (y * width + x) * 4;
+      const r = data[idx];
+      const g = data[idx + 1];
+      const b = data[idx + 2];
+      const a = data[idx + 3];
+      if (a > 100 && (r > 200 && g < 100 && b < 100 || r < 100 && g > 150 && b < 100)) {
+        diffPixels.push({ x, y });
+      }
+    }
+  }
+  if (diffPixels.length === 0) {
+    return [];
+  }
+  const clusters = clusterPixels(diffPixels, mergingDistance);
+  const regions = clusters.map((cluster, idx) => {
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+    for (const p of cluster) {
+      if (p.x < minX) minX = p.x;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.y > maxY) maxY = p.y;
+    }
+    const regionWidth = maxX - minX + 1;
+    const regionHeight = maxY - minY + 1;
+    return {
+      id: idx + 1,
+      boundingBox: {
+        x: minX,
+        y: minY,
+        width: regionWidth,
+        height: regionHeight
+      },
+      diffPixelCount: cluster.length,
+      diffPercentageInRegion: cluster.length / (regionWidth * regionHeight) * 100,
+      locationHint: estimatePosition(
+        minX,
+        minY,
+        regionWidth,
+        regionHeight,
+        width,
+        height
+      )
+    };
+  }).filter((r) => r.diffPixelCount >= minRegionSize).sort((a, b) => b.diffPixelCount - a.diffPixelCount);
+  return regions.map((r, i) => ({ ...r, id: i + 1 }));
+}
+function clusterPixels(pixels, distance) {
+  const cellSize = Math.max(distance, 1);
+  const grid = /* @__PURE__ */ new Map();
+  for (const p of pixels) {
+    const cellX = Math.floor(p.x / cellSize);
+    const cellY = Math.floor(p.y / cellSize);
+    const key = `${cellX},${cellY}`;
+    if (!grid.has(key)) {
+      grid.set(key, []);
+    }
+    grid.get(key).push(p);
+  }
+  const cellKeys = Array.from(grid.keys());
+  const parent = /* @__PURE__ */ new Map();
+  function find(key) {
+    if (!parent.has(key)) parent.set(key, key);
+    let root = key;
+    while (parent.get(root) !== root) {
+      root = parent.get(root);
+    }
+    let current = key;
+    while (current !== root) {
+      const next = parent.get(current);
+      parent.set(current, root);
+      current = next;
+    }
+    return root;
+  }
+  function union(a, b) {
+    const ra = find(a);
+    const rb = find(b);
+    if (ra !== rb) parent.set(ra, rb);
+  }
+  for (const key of cellKeys) {
+    const [cx, cy] = key.split(",").map(Number);
+    for (let dx = -1; dx <= 1; dx++) {
+      for (let dy = -1; dy <= 1; dy++) {
+        if (dx === 0 && dy === 0) continue;
+        const neighborKey = `${cx + dx},${cy + dy}`;
+        if (grid.has(neighborKey)) {
+          union(key, neighborKey);
+        }
+      }
+    }
+  }
+  const clusters = /* @__PURE__ */ new Map();
+  for (const key of cellKeys) {
+    const root = find(key);
+    if (!clusters.has(root)) {
+      clusters.set(root, []);
+    }
+    clusters.get(root).push(...grid.get(key));
+  }
+  return Array.from(clusters.values());
+}
+function estimatePosition(x, y, regionWidth, regionHeight, pageWidth, pageHeight) {
+  const centerY = y + regionHeight / 2;
+  const yRatio = centerY / pageHeight;
+  let verticalPosition;
+  if (yRatio < 0.1) verticalPosition = "top";
+  else if (yRatio < 0.3) verticalPosition = "upper";
+  else if (yRatio < 0.7) verticalPosition = "middle";
+  else if (yRatio < 0.9) verticalPosition = "lower";
+  else verticalPosition = "bottom";
+  const centerX = x + regionWidth / 2;
+  const widthRatio = regionWidth / pageWidth;
+  let horizontalPosition;
+  if (widthRatio > 0.8) {
+    horizontalPosition = "full-width";
+  } else if (centerX < pageWidth * 0.33) {
+    horizontalPosition = "left";
+  } else if (centerX > pageWidth * 0.67) {
+    horizontalPosition = "right";
+  } else {
+    horizontalPosition = "center";
+  }
+  const estimatedElement = guessElement(
+    verticalPosition,
+    horizontalPosition,
+    regionWidth,
+    regionHeight,
+    pageWidth,
+    y
+  );
+  return {
+    verticalPosition,
+    horizontalPosition,
+    fromTopPx: y,
+    fromLeftPx: x,
+    estimatedElement
+  };
+}
+function guessElement(vPos, hPos, width, height, pageWidth, fromTop) {
+  if (vPos === "top" && hPos === "full-width" && fromTop < 100) {
+    return "Likely a header or navigation bar";
+  }
+  if (vPos === "bottom" && hPos === "full-width") {
+    return "Likely a footer";
+  }
+  if (vPos === "upper" && hPos === "full-width" && height > 200) {
+    return "Likely a hero section or banner";
+  }
+  if (width < 200 && height < 60) {
+    return "Likely a button or small UI element";
+  }
+  if (width > pageWidth * 0.5 && height < 40) {
+    return "Likely a text line or heading";
+  }
+  if (width > 200 && width < 500 && height > 100 && height < 400) {
+    return "Likely a card or content block";
+  }
+  if (width > 100 && height > 100 && width < pageWidth * 0.8) {
+    return "Likely an image or media element";
+  }
+  return `UI element at ~${fromTop}px from top`;
+}
+
+// src/reporters/terminal.ts
+import chalk from "chalk";
+function printTerminalReport(report) {
+  const { meta, summary, results } = report;
+  console.log("");
+  console.log(chalk.bold(`VRT Results - ${meta.timestamp}`));
+  console.log("=".repeat(50));
+  console.log("");
+  console.log(
+    `Comparing: ${chalk.cyan(meta.beforeUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`
+  );
+  console.log("");
+  const groupedByPage = /* @__PURE__ */ new Map();
+  for (const result of results) {
+    const key = result.page.path;
+    if (!groupedByPage.has(key)) {
+      groupedByPage.set(key, []);
+    }
+    groupedByPage.get(key).push(result);
+  }
+  for (const [pagePath, pageResults] of groupedByPage) {
+    const pageName = pageResults[0].page.name;
+    console.log(`  Page: ${chalk.bold(pageName)} (${pagePath})`);
+    for (const result of pageResults) {
+      const vpLabel = `${result.viewport.type.toUpperCase()} (${result.viewport.width}x${result.viewport.height})`;
+      if (result.status === "error") {
+        console.log(
+          `    ${vpLabel}  ${chalk.yellow("\u26A0 ERROR")}  ${result.error || "Unknown error"}`
+        );
+        continue;
+      }
+      const diffStr = `diff: ${result.comparison.diffPercentage.toFixed(2)}%`;
+      if (result.status === "pass") {
+        console.log(
+          `    ${vpLabel}  ${chalk.green("\u2705 PASS")}  ${chalk.dim(diffStr)}`
+        );
+      } else {
+        const thresholdStr = `(threshold: ${result.comparison.threshold}%)`;
+        console.log(
+          `    ${vpLabel}  ${chalk.red("\u274C FAIL")}  ${chalk.red(diffStr)}  ${chalk.dim(thresholdStr)}`
+        );
+        for (const region of result.diffRegions.slice(0, 5)) {
+          const { boundingBox: bb, locationHint: lh } = region;
+          console.log(
+            chalk.dim(
+              `      \u2192 Region ${region.id}: ${bb.width}x${bb.height} at (${bb.x}, ${bb.y}) - ${lh.estimatedElement}`
+            )
+          );
+        }
+        if (result.diffRegions.length > 5) {
+          console.log(
+            chalk.dim(
+              `      \u2192 ...and ${result.diffRegions.length - 5} more regions`
+            )
+          );
+        }
+      }
+    }
+    console.log("");
+  }
+  const statusColor = summary.overallStatus === "pass" ? chalk.green : chalk.red;
+  console.log(
+    `Summary: ${chalk.green(`${summary.passed} passed`)}, ${summary.failed > 0 ? chalk.red(`${summary.failed} failed`) : `${summary.failed} failed`}${summary.errored > 0 ? `, ${chalk.yellow(`${summary.errored} errored`)}` : ""} / ${summary.totalTests} total`
+  );
+  console.log(`Overall: ${statusColor(summary.overallStatus.toUpperCase())}`);
+  console.log(`Duration: ${(meta.duration / 1e3).toFixed(1)}s`);
+  console.log("");
+}
+
+// src/reporters/json.ts
+import { writeFile } from "fs/promises";
+import { join } from "path";
+async function writeJsonReport(report, outDir) {
+  const filePath = join(outDir, "report.json");
+  await writeFile(filePath, JSON.stringify(report, null, 2), "utf-8");
+  return filePath;
+}
+
+// src/reporters/html.ts
+import { writeFile as writeFile2 } from "fs/promises";
+import { join as join2 } from "path";
+async function writeHtmlReport(report, outDir) {
+  const html = generateHtml(report, outDir);
+  const filePath = join2(outDir, "report.html");
+  await writeFile2(filePath, html, "utf-8");
+  return filePath;
+}
+function generateHtml(report, outDir) {
+  const { meta, summary, results } = report;
+  const resultCards = results.map((r) => generateResultCard(r, outDir)).join("\n");
+  return `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VRT Report - ${meta.timestamp}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; }
+    .header { background: #1a1a2e; color: white; padding: 24px 32px; }
+    .header h1 { font-size: 20px; margin-bottom: 8px; }
+    .header .meta { font-size: 13px; color: #aaa; }
+    .header .meta a { color: #7eb8da; }
+    .summary { display: flex; gap: 16px; padding: 16px 32px; background: white; border-bottom: 1px solid #e0e0e0; }
+    .summary .stat { padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; }
+    .stat.pass { background: #e8f5e9; color: #2e7d32; }
+    .stat.fail { background: #ffebee; color: #c62828; }
+    .stat.total { background: #e3f2fd; color: #1565c0; }
+    .results { padding: 24px 32px; display: flex; flex-direction: column; gap: 24px; }
+    .card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
+    .card-header { padding: 16px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
+    .card-header h3 { font-size: 15px; }
+    .badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
+    .badge.pass { background: #e8f5e9; color: #2e7d32; }
+    .badge.fail { background: #ffebee; color: #c62828; }
+    .badge.error { background: #fff3e0; color: #e65100; }
+    .comparison { padding: 16px 20px; }
+    .comparison-controls { display: flex; gap: 8px; margin-bottom: 12px; }
+    .comparison-controls button { padding: 6px 14px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer; font-size: 12px; }
+    .comparison-controls button.active { background: #1a1a2e; color: white; border-color: #1a1a2e; }
+    .images { display: flex; gap: 8px; }
+    .images.side-by-side { flex-direction: row; }
+    .images.diff-only .img-before, .images.diff-only .img-after { display: none; }
+    .images.before-only .img-after, .images.before-only .img-diff { display: none; }
+    .images.after-only .img-before, .images.after-only .img-diff { display: none; }
+    .img-container { flex: 1; min-width: 0; }
+    .img-container img { width: 100%; height: auto; border: 1px solid #eee; border-radius: 4px; }
+    .img-container .label { font-size: 11px; color: #888; margin-bottom: 4px; text-transform: uppercase; font-weight: 600; }
+    .diff-info { padding: 8px 20px 16px; font-size: 13px; color: #666; }
+    .diff-info .region { margin: 4px 0; padding-left: 16px; }
+    .slider-container { position: relative; overflow: hidden; }
+    .slider-container img { width: 100%; display: block; }
+    .slider-overlay { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; border-right: 2px solid #ff0000; }
+    .slider-overlay img { width: 100%; height: 100%; object-fit: cover; object-position: left; }
+    input[type="range"].slider { width: 100%; margin-top: 8px; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>VRT Report</h1>
+    <div class="meta">
+      ${meta.timestamp} | Duration: ${(meta.duration / 1e3).toFixed(1)}s<br>
+      Before: ${meta.beforeUrl} \u2192 After: ${meta.afterUrl}
+    </div>
+  </div>
+  <div class="summary">
+    <div class="stat total">${summary.totalTests} Total</div>
+    <div class="stat pass">${summary.passed} Passed</div>
+    ${summary.failed > 0 ? `<div class="stat fail">${summary.failed} Failed</div>` : ""}
+  </div>
+  <div class="results">
+    ${resultCards}
+  </div>
+  <script>
+    document.querySelectorAll('.comparison-controls button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const card = btn.closest('.card');
+        const images = card.querySelector('.images');
+        const buttons = card.querySelectorAll('.comparison-controls button');
+        buttons.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        images.className = 'images ' + btn.dataset.mode;
+      });
+    });
+
+    document.querySelectorAll('.slider').forEach(slider => {
+      slider.addEventListener('input', (e) => {
+        const container = e.target.closest('.comparison').querySelector('.slider-overlay');
+        if (container) {
+          container.style.width = e.target.value + '%';
+        }
+      });
+    });
+  </script>
+</body>
+</html>`;
+}
+function generateResultCard(result, outDir) {
+  const { page, viewport, status, comparison, diffRegions, screenshots } = result;
+  const vpLabel = `${viewport.type.toUpperCase()} ${viewport.width}x${viewport.height}`;
+  const regionsHtml = diffRegions.length > 0 ? diffRegions.slice(0, 5).map(
+    (r) => `<div class="region">Region ${r.id}: ${r.boundingBox.width}x${r.boundingBox.height} at (${r.boundingBox.x}, ${r.boundingBox.y}) \u2014 ${r.locationHint.estimatedElement}</div>`
+  ).join("\n") + (diffRegions.length > 5 ? `<div class="region">...and ${diffRegions.length - 5} more</div>` : "") : "";
+  return `
+    <div class="card">
+      <div class="card-header">
+        <h3>${page.name} (${page.path}) \u2014 ${vpLabel}</h3>
+        <span class="badge ${status}">${status.toUpperCase()} ${status !== "error" ? `${comparison.diffPercentage.toFixed(2)}%` : ""}</span>
+      </div>
+      <div class="comparison">
+        <div class="comparison-controls">
+          <button class="active" data-mode="side-by-side">Side by Side</button>
+          <button data-mode="diff-only">Diff Only</button>
+          <button data-mode="before-only">Before</button>
+          <button data-mode="after-only">After</button>
+        </div>
+        <div class="images side-by-side">
+          <div class="img-container img-before">
+            <div class="label">Before</div>
+            <img src="${screenshots.before}" alt="Before" loading="lazy">
+          </div>
+          <div class="img-container img-after">
+            <div class="label">After</div>
+            <img src="${screenshots.after}" alt="After" loading="lazy">
+          </div>
+          <div class="img-container img-diff">
+            <div class="label">Diff</div>
+            <img src="${screenshots.diff}" alt="Diff" loading="lazy">
+          </div>
+        </div>
+      </div>
+      ${regionsHtml ? `<div class="diff-info">${regionsHtml}</div>` : ""}
+    </div>`;
+}
+
+// src/commands/run.ts
+var VIEWPORTS = ["sp", "pc"];
+async function runVrt(options) {
+  const startTime = Date.now();
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+  const runDir = join3(DEFAULT_OUT_DIR, timestamp);
+  const screenshotsDir = join3(runDir, "screenshots");
+  await mkdir(screenshotsDir, { recursive: true });
+  const screenshotter = new Screenshotter();
+  const spinner = ora("Initializing browser...").start();
+  try {
+    await screenshotter.initialize();
+    spinner.text = `Taking screenshots of ${chalk2.cyan(options.beforeUrl)}...`;
+    const beforeScreenshots = await screenshotter.captureAll(
+      options.beforeUrl,
+      options.paths,
+      VIEWPORTS,
+      options.hideSelectors
+    );
+    spinner.text = `Taking screenshots of ${chalk2.cyan(options.afterUrl)}...`;
+    const afterScreenshots = await screenshotter.captureAll(
+      options.afterUrl,
+      options.paths,
+      VIEWPORTS,
+      options.hideSelectors
+    );
+    spinner.text = "Comparing screenshots...";
+    const results = [];
+    for (const beforeShot of beforeScreenshots) {
+      const afterShot = afterScreenshots.find(
+        (a) => a.pagePath === beforeShot.pagePath && a.viewportType === beforeShot.viewportType
+      );
+      if (!afterShot) {
+        results.push(
+          createErrorResult(
+            beforeShot.pagePath,
+            beforeShot.viewportType,
+            options,
+            "After screenshot not found"
+          )
+        );
+        continue;
+      }
+      try {
+        const comparison = compareImages(
+          beforeShot.buffer,
+          afterShot.buffer,
+          options.threshold
+        );
+        const diffRegions = comparison.passed ? [] : detectDiffRegions(comparison.diffImage);
+        const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;
+        const beforePath = join3("screenshots", `${filePrefix}--before.png`);
+        const afterPath = join3("screenshots", `${filePrefix}--after.png`);
+        const diffPath = join3("screenshots", `${filePrefix}--diff.png`);
+        await writeFile3(join3(runDir, beforePath), beforeShot.buffer);
+        await writeFile3(join3(runDir, afterPath), afterShot.buffer);
+        await writeFile3(join3(runDir, diffPath), comparison.diffImage);
+        const pageName = beforeShot.pagePath === "/" ? "\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8" : beforeShot.pagePath.replace(/^\//, "");
+        const viewport = getViewportDimensions(beforeShot.viewportType);
+        results.push({
+          page: {
+            path: beforeShot.pagePath,
+            name: pageName,
+            url: {
+              before: new URL(
+                beforeShot.pagePath,
+                options.beforeUrl
+              ).toString(),
+              after: new URL(beforeShot.pagePath, options.afterUrl).toString()
+            }
+          },
+          viewport: {
+            type: beforeShot.viewportType,
+            ...viewport
+          },
+          status: comparison.passed ? "pass" : "fail",
+          comparison: {
+            diffPercentage: comparison.diffPercentage,
+            diffPixelCount: comparison.diffCount,
+            totalPixels: comparison.totalPixels,
+            threshold: options.threshold,
+            dimensions: comparison.dimensions
+          },
+          diffRegions,
+          screenshots: {
+            before: beforePath,
+            after: afterPath,
+            diff: diffPath
+          }
+        });
+      } catch (error) {
+        results.push(
+          createErrorResult(
+            beforeShot.pagePath,
+            beforeShot.viewportType,
+            options,
+            error instanceof Error ? error.message : String(error)
+          )
+        );
+      }
+    }
+    const duration = Date.now() - startTime;
+    const passed = results.filter((r) => r.status === "pass").length;
+    const failed = results.filter((r) => r.status === "fail").length;
+    const errored = results.filter((r) => r.status === "error").length;
+    const report = {
+      version: "1.0",
+      meta: {
+        timestamp,
+        beforeUrl: options.beforeUrl,
+        afterUrl: options.afterUrl,
+        duration,
+        command: buildCommandString(options)
+      },
+      summary: {
+        totalTests: results.length,
+        passed,
+        failed,
+        errored,
+        overallStatus: failed > 0 || errored > 0 ? "fail" : "pass"
+      },
+      results
+    };
+    spinner.stop();
+    printTerminalReport(report);
+    const jsonPath = await writeJsonReport(report, runDir);
+    console.log(`JSON report: ${chalk2.dim(jsonPath)}`);
+    if (options.html) {
+      const htmlPath = await writeHtmlReport(report, runDir);
+      console.log(`HTML report: ${chalk2.dim(htmlPath)}`);
+      if (options.open) {
+        const { exec } = await import("child_process");
+        exec(`open "${htmlPath}"`);
+      }
+    }
+    console.log(`Output dir:  ${chalk2.dim(runDir)}`);
+    return report;
+  } finally {
+    await screenshotter.cleanup();
+  }
+}
+function getViewportDimensions(type) {
+  return type === "sp" ? { ...DEFAULT_SP_VIEWPORT } : { ...DEFAULT_PC_VIEWPORT };
+}
+function createErrorResult(pagePath, viewportType, options, error) {
+  const viewport = getViewportDimensions(viewportType);
+  const pageName = pagePath === "/" ? "\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8" : pagePath.replace(/^\//, "");
+  return {
+    page: {
+      path: pagePath,
+      name: pageName,
+      url: {
+        before: new URL(pagePath, options.beforeUrl).toString(),
+        after: new URL(pagePath, options.afterUrl).toString()
+      }
+    },
+    viewport: { type: viewportType, ...viewport },
+    status: "error",
+    comparison: {
+      diffPercentage: 0,
+      diffPixelCount: 0,
+      totalPixels: 0,
+      threshold: options.threshold,
+      dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 }
+    },
+    diffRegions: [],
+    screenshots: { before: "", after: "", diff: "" },
+    error
+  };
+}
+function buildCommandString(options) {
+  const parts = ["npx vrt run"];
+  parts.push(`--before ${options.beforeUrl}`);
+  parts.push(`--after ${options.afterUrl}`);
+  parts.push(`--paths ${options.paths.join(",")}`);
+  if (options.threshold !== DEFAULT_THRESHOLD) {
+    parts.push(`--threshold ${options.threshold}`);
+  }
+  if (options.hideSelectors.length > 0) {
+    parts.push(`--hide "${options.hideSelectors.join(",")}"`);
+  }
+  return parts.join(" \\\n  ");
+}
+
+// src/commands/init.ts
+import { mkdir as mkdir2, writeFile as writeFile4, access } from "fs/promises";
+import { join as join4 } from "path";
+import chalk3 from "chalk";
+async function runInit(options) {
+  const outDir = join4(process.cwd(), ".claude", "commands");
+  const outFile = join4(outDir, "vrt.md");
+  try {
+    await access(outFile);
+    console.log(chalk3.yellow(`\u26A0 ${outFile} already exists. Overwriting...`));
+  } catch {
+  }
+  await mkdir2(outDir, { recursive: true });
+  const content = generateSkillFile(options);
+  await writeFile4(outFile, content, "utf-8");
+  console.log(chalk3.green(`\u2705 Created ${outFile}`));
+  console.log("");
+  console.log(
+    "This skill file allows Claude Code to run VRT with the /vrt command."
+  );
+  console.log(
+    "Review and customize the file, then commit it to your repository."
+  );
+}
+function generateSkillFile(options) {
+  const cmdParts = ["npx vrt run"];
+  cmdParts.push(`  --before ${options.before}`);
+  cmdParts.push(`  --after ${options.after}`);
+  cmdParts.push(`  --paths ${options.paths}`);
+  if (options.threshold !== void 0 && options.threshold !== DEFAULT_THRESHOLD) {
+    cmdParts.push(`  --threshold ${options.threshold}`);
+  }
+  if (options.hide) {
+    cmdParts.push(`  --hide "${options.hide}"`);
+  }
+  cmdParts.push("  --no-open");
+  const command = cmdParts.join(" \\\n");
+  return `VRT\u3092\u5B9F\u884C\u3057\u3066\u672C\u756A\u74B0\u5883\u3068\u306E\u30D3\u30B8\u30E5\u30A2\u30EB\u5DEE\u5206\u3092\u691C\u51FA\u3059\u308B\u3002
+
+## \u624B\u9806
+
+1. \u958B\u767A\u30B5\u30FC\u30D0\u30FC\u304C\u8D77\u52D5\u3057\u3066\u3044\u306A\u3051\u308C\u3070 \`npm run dev\` \u3067\u8D77\u52D5\u3057\u3066\u5F85\u6A5F\u3059\u308B
+2. \u4EE5\u4E0B\u306E\u30B3\u30DE\u30F3\u30C9\u3067VRT\u3092\u5B9F\u884C:
+
+\`\`\`bash
+${command}
+\`\`\`
+
+3. \`./vrt-results/\` \u5185\u306E\u6700\u65B0\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA\u306B\u3042\u308B \`report.json\` \u3092\u8AAD\u3080
+4. \`status: "fail"\` \u306E\u30C6\u30B9\u30C8\u7D50\u679C\u306B\u6CE8\u76EE\u3059\u308B
+5. \u8A72\u5F53\u3059\u308Bdiff\u753B\u50CF\uFF08\`*--diff.png\`\uFF09\u3092Read\u30C4\u30FC\u30EB\u3067\u8996\u899A\u7684\u306B\u78BA\u8A8D\u3059\u308B
+6. \`diffRegions\` \u306E \`locationHint\` \u304B\u3089\u4FEE\u6B63\u3059\u3079\u304DCSS\u3084HTML\u306E\u5834\u6240\u3092\u7279\u5B9A\u3059\u308B
+7. \u30BD\u30FC\u30B9\u30B3\u30FC\u30C9\u3092\u4FEE\u6B63\u3059\u308B
+8. \u518D\u5EA6VRT\u3092\u5B9F\u884C\u3057\u3066\u4FEE\u6B63\u304C\u53CD\u6620\u3055\u308C\u305F\u3053\u3068\u3092\u78BA\u8A8D\u3059\u308B
+`;
+}
+
+// bin/vrt.ts
+var program = new Command();
+program.name("vrt").description("Visual Regression Testing CLI - Compare web pages visually").version("0.1.0");
+program.command("run").description("Run visual regression tests").requiredOption("--before <url>", "Baseline URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").option("--no-html", "Skip HTML report generation").option("--no-open", "Do not open HTML report in browser").action(async (rawOptions) => {
+  try {
+    const parsed = cliOptionsSchema.parse(rawOptions);
+    const options = {
+      beforeUrl: parsed.before,
+      afterUrl: parsed.after,
+      paths: parsed.paths,
+      threshold: parsed.threshold,
+      hideSelectors: parsed.hide,
+      html: parsed.html,
+      open: parsed.open
+    };
+    const report = await runVrt(options);
+    process.exit(report.summary.overallStatus === "pass" ? 0 : 1);
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error(`Error: ${error.message}`);
+    } else {
+      console.error("An unexpected error occurred");
+    }
+    process.exit(2);
+  }
+});
+program.command("init").description(
+  "Generate .claude/commands/vrt.md skill file for this repository"
+).requiredOption("--before <url>", "Baseline URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").action(async (options) => {
+  try {
+    await runInit({
+      before: options.before,
+      after: options.after,
+      paths: options.paths,
+      threshold: parseFloat(options.threshold),
+      hide: options.hide
+    });
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error(`Error: ${error.message}`);
+    }
+    process.exit(1);
+  }
+});
+program.parse();
+//# sourceMappingURL=vrt.js.map