web-corders-vrt 0.1.2 → 0.1.4

package/.claude/settings.local.json

@@ -7,7 +7,16 @@
       "Bash(node dist/bin/vrt.js init --help)",
       "Bash(npm install -D prettier)",
       "Bash(npx prettier --write .)",
-      "Bash(npm test)"
+      "Bash(npm test)",
+      "Bash(node dist/bin/vrt.js run --before https://www.video.unext.jp --after http://localhost:3000 --paths /lp/ppd_contents_h --no-open)",
+      "Bash(open vrt-results/2026-03-02T05-02-45/report.html)",
+      "Bash(open vrt-results/2026-03-02T06-41-44/report.html)",
+      "Bash(open vrt-results/2026-03-02T06-49-09/report.html)",
+      "Bash(node dist/bin/vrt.js run --before https://www.video.unext.jp --after http://localhost:3000 --paths /lp/unext_mobile_a263 --no-open)",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''before:'', t.comparison.dimensions.beforeHeight, ''after:'', t.comparison.dimensions.afterHeight, ''aligned:'', t.comparison.alignmentUsed ?? false, ''shifted:'', t.comparison.shiftedRows ?? 0, ''diff:'', t.comparison.diffPercentage.toFixed\\(2\\)+''%''\\) }\\)\")",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''width:'', t.comparison.dimensions.width, ''beforeH:'', t.comparison.dimensions.beforeHeight, ''afterH:'', t.comparison.dimensions.afterHeight\\) }\\)\")",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''aligned:'', t.comparison.alignmentUsed, ''shifted:'', t.comparison.shiftedRows, ''diff:'', t.comparison.diffPercentage.toFixed\\(2\\)+''%'', ''beforeH:'', t.comparison.dimensions.beforeHeight, ''afterH:'', t.comparison.dimensions.afterHeight\\) }\\)\")",
+      "Bash(open vrt-results/2026-03-02T07-22-33/report.html)"
     ]
   }
 }

package/README.md

@@ -2,7 +2,8 @@
 
 Webページのビジュアルリグレッションテスト (VRT) を行うCLIツール。
 
-本番環境と開発環境のスクリーンショットをピクセル単位で比較し、差分を検出する。テスト結果は人間向け（HTMLレポート）とLLM/Claude向け（JSONレポート + diff画像）の両方で出力される。
+本番環境と開発環境のスクリーンショットの差分を検出する。
+テスト結果は人間向け（HTMLレポート + diff画像）とLLM/Claude向け（JSONレポート）の両方で出力される。
 
 ## セットアップ
 
@@ -62,25 +63,11 @@ vrt-results/2026-02-28T10-00-00/
         "diffPercentage": 2.35,
         "diffPixelCount": 12040,
       },
-      "diffRegions": [
-        {
-          "id": 1,
-          "boundingBox": { "x": 0, "y": 480, "width": 750, "height": 200 },
-          "locationHint": {
-            "verticalPosition": "upper",
-            "horizontalPosition": "full-width",
-            "fromTopPx": 480,
-            "estimatedElement": "Likely a hero section or banner",
-          },
-        },
-      ],
     },
   ],
 }
 ```
 
-`diffRegions` の `locationHint` は、差分がページのどの位置にあるかを示す。Claudeがこれを読むことで、修正すべきCSS/HTMLの場所を推定できる。
-
 ## オプション一覧
 
 | オプション           | デフォルト | 説明                                                                    |
@@ -142,7 +129,7 @@ npx web-corders-vrt init \
 2. VRTコマンドを実行
 3. `report.json` を読んで差分を確認
 4. diff画像を視覚的に確認
-5. `locationHint` からCSS/HTMLの修正箇所を特定
+5. diff画像からCSS/HTMLの修正箇所を特定
 6. コードを修正
 7. 再度VRTを実行して確認
 

package/dist/bin/vrt.js

@@ -47,6 +47,7 @@ var BLOCKED_DOMAINS = [
   "sentry.io",
   "datadoghq.com"
 ];
+var DEFAULT_HIDE_SELECTORS = ["#devtools-indicator"];
 var DISABLE_ANIMATIONS_CSS = `
 *, *::before, *::after {
   animation-duration: 0s !important;
@@ -63,13 +64,29 @@ 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");
+  const allHideSelectors = [
+    ...DEFAULT_HIDE_SELECTORS,
+    ...options.hideSelectors ?? []
+  ];
+  if (allHideSelectors.length > 0) {
+    const hideCSS = allHideSelectors.map((s) => `${s} { visibility: hidden !important; }`).join("\n");
     await page.addStyleTag({ content: hideCSS });
   }
   if (options.delay && options.delay > 0) {
     await page.waitForTimeout(options.delay);
   }
+  if (allHideSelectors.length > 0) {
+    await page.evaluate(`
+      for (const sel of ${JSON.stringify(allHideSelectors)}) {
+        document.querySelectorAll(sel).forEach(el => el.remove());
+        document.querySelectorAll("*").forEach(el => {
+          if (el.shadowRoot) {
+            el.shadowRoot.querySelectorAll(sel).forEach(inner => inner.remove());
+          }
+        });
+      }
+    `);
+  }
 }
 function getDateMockScript() {
   return `
@@ -238,181 +255,6 @@ function normalizeImage(png, targetWidth, targetHeight) {
   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) {
@@ -454,21 +296,6 @@ function printTerminalReport(report) {
         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("");
@@ -494,137 +321,54 @@ async function writeJsonReport(report, outDir) {
 // src/reporters/html.ts
 import { writeFile as writeFile2 } from "fs/promises";
 import { join as join2 } from "path";
+
+// src/templates/report.html
+var report_default = '<!doctype html>\n<html lang="ja">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>VRT Report - {{TIMESTAMP}}</title>\n    <style>\n      {{CSS}}\n    </style>\n  </head>\n  <body>\n    <div class="header">\n      <h1>web-corders-vrt</h1>\n      <div class="meta">\n        {{TIMESTAMP}} | Duration: {{DURATION}}s<br />\n        Before: {{BEFORE_URL}} \u2192 After: {{AFTER_URL}}\n      </div>\n    </div>\n    <div class="summary">\n      <div class="stat total">{{TOTAL}} Total</div>\n      <div class="stat pass">{{PASSED}} Passed</div>\n      {{FAILED_STAT}}\n    </div>\n    <div class="results">\n      {{RESULTS}}\n    </div>\n  </body>\n</html>\n';
+
+// src/templates/report.css
+var report_default2 = '* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  background: #f5f5f5;\n  color: #333;\n}\n\n.header {\n  background: #1a1a2e;\n  color: white;\n  padding: 24px 32px;\n  text-align: center;\n}\n\n.header h1 {\n  font-size: 20px;\n  margin-bottom: 8px;\n}\n\n.header .meta {\n  font-size: 13px;\n  color: #aaa;\n}\n\n.summary {\n  display: flex;\n  gap: 16px;\n  padding: 16px 32px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.summary .stat {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.stat.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.stat.total {\n  background: #e3f2fd;\n  color: #1565c0;\n}\n\n.results {\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.card-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.card-header h3 {\n  font-size: 15px;\n}\n\n.badge {\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.badge.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.badge.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.badge.error {\n  background: #fff3e0;\n  color: #e65100;\n}\n\n.comparison {\n  padding: 16px 20px;\n}\n\n.images {\n  display: flex;\n  gap: 8px;\n}\n\n.card.sp .img-container {\n  flex: none;\n  width: 375px;\n}\n\n.card.sp .img-container img {\n  width: 375px;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.card.pc .img-container {\n  flex: 1;\n  min-width: 0;\n}\n\n.card.pc .img-container img {\n  width: 100%;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.img-container .label {\n  font-size: 11px;\n  color: #888;\n  margin-bottom: 4px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.diff-info {\n  padding: 8px 20px 16px;\n  font-size: 13px;\n  color: #666;\n}\n\n.diff-info .region {\n  margin: 4px 0;\n  padding-left: 16px;\n}\n\n/* Accordion for passed tests */\n.screenshot-accordion {\n  border-top: 1px solid #eee;\n}\n\n.screenshot-accordion summary {\n  padding: 12px 20px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 600;\n  color: #666;\n  user-select: none;\n}\n\n.screenshot-accordion summary:hover {\n  background: #fafafa;\n}\n';
+
+// src/reporters/html.ts
 async function writeHtmlReport(report, outDir) {
-  const html = generateHtml(report, outDir);
+  const html = generateHtml(report);
   const filePath = join2(outDir, "report.html");
   await writeFile2(filePath, html, "utf-8");
   return filePath;
 }
-function generateHtml(report, outDir) {
+function generateHtml(report) {
   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>`;
+  const resultCards = results.map((r) => generateResultCard(r)).join("\n");
+  const failedStat = summary.failed > 0 ? `<div class="stat fail">${summary.failed} Failed</div>` : "";
+  return report_default.replace("{{CSS}}", report_default2).replace(/\{\{TIMESTAMP\}\}/g, meta.timestamp).replace("{{DURATION}}", (meta.duration / 1e3).toFixed(1)).replace("{{BEFORE_URL}}", meta.beforeUrl).replace("{{AFTER_URL}}", meta.afterUrl).replace("{{TOTAL}}", String(summary.totalTests)).replace("{{PASSED}}", String(summary.passed)).replace("{{FAILED_STAT}}", failedStat).replace("{{RESULTS}}", resultCards);
 }
-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>
+function generateResultCard(result) {
+  const { page, viewport, status, comparison, screenshots } = result;
+  const vpLabel = viewport.type.toUpperCase();
+  const imagesHtml = `
+    <div class="comparison">
+      <div class="images">
+        <div class="img-container img-before">
+          <div class="label">Before</div>
+          <img src="${screenshots.before}" alt="Before" loading="lazy">
         </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 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>`;
+  const screenshotSection = status === "pass" ? `<details class="screenshot-accordion"><summary>Show</summary>${imagesHtml}</details>` : imagesHtml;
+  return `
+    <div class="card ${viewport.type}">
+      <div class="card-header">
+        <h3>${page.path} - ${vpLabel}</h3>
+        <span class="badge ${status}">${status === "error" ? "ERROR" : `${status.toUpperCase()} ${comparison.diffPercentage.toFixed(2)}%`}</span>
       </div>
-      ${regionsHtml ? `<div class="diff-info">${regionsHtml}</div>` : ""}
+      ${screenshotSection}
     </div>`;
 }
 
@@ -677,7 +421,6 @@ async function runVrt(options) {
           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`);
@@ -711,7 +454,6 @@ async function runVrt(options) {
             threshold: options.threshold,
             dimensions: comparison.dimensions
           },
-          diffRegions,
           screenshots: {
             before: beforePath,
             after: afterPath,
@@ -793,7 +535,6 @@ function createErrorResult(pagePath, viewportType, options, error) {
       threshold: options.threshold,
       dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 }
     },
-    diffRegions: [],
     screenshots: { before: "", after: "", diff: "" },
     error
   };
@@ -863,7 +604,7 @@ ${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
+6. diff\u753B\u50CF\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
 `;