cbrowser 6.4.0 → 7.0.0

package/dist/browser.js

@@ -33,6 +33,23 @@ exports.loadPerformanceBaseline = loadPerformanceBaseline;
 exports.deletePerformanceBaseline = deletePerformanceBaseline;
 exports.detectPerformanceRegression = detectPerformanceRegression;
 exports.formatPerformanceRegressionReport = formatPerformanceRegressionReport;
+exports.parseTestFilesForCoverage = parseTestFilesForCoverage;
+exports.parseSitemap = parseSitemap;
+exports.crawlSiteForCoverage = crawlSiteForCoverage;
+exports.identifyCoverageGaps = identifyCoverageGaps;
+exports.calculateCoverageAnalysis = calculateCoverageAnalysis;
+exports.generateCoverageMap = generateCoverageMap;
+exports.formatCoverageReport = formatCoverageReport;
+exports.generateCoverageHtmlReport = generateCoverageHtmlReport;
+exports.loadVisualBaselines = loadVisualBaselines;
+exports.captureVisualBaseline = captureVisualBaseline;
+exports.listVisualBaselines = listVisualBaselines;
+exports.getVisualBaseline = getVisualBaseline;
+exports.deleteVisualBaseline = deleteVisualBaseline;
+exports.runVisualRegression = runVisualRegression;
+exports.runVisualRegressionSuite = runVisualRegressionSuite;
+exports.formatVisualRegressionReport = formatVisualRegressionReport;
+exports.generateVisualRegressionHtmlReport = generateVisualRegressionHtmlReport;
 const playwright_1 = require("playwright");
 const fs_1 = require("fs");
 const path_1 = require("path");
@@ -4506,4 +4523,1300 @@ function formatPerformanceRegressionReport(result) {
     }
     return lines.join("\n");
 }
+// ============================================================================
+// Test Coverage Map (v6.5.0)
+// ============================================================================
+/**
+ * Parse test files to extract tested URLs and actions
+ */
+function parseTestFilesForCoverage(testFiles) {
+    const pageMap = new Map();
+    for (const testFile of testFiles) {
+        if (!(0, fs_1.existsSync)(testFile))
+            continue;
+        const content = (0, fs_1.readFileSync)(testFile, "utf-8");
+        const lines = content.split("\n");
+        let currentUrl = null;
+        let lineNumber = 0;
+        for (const line of lines) {
+            lineNumber++;
+            const trimmed = line.trim().toLowerCase();
+            // Skip comments and empty lines
+            if (trimmed.startsWith("#") || !trimmed)
+                continue;
+            // Detect navigation
+            const navMatch = line.match(/(?:go to|navigate to|open|visit)\s+["']?([^"'\s]+)["']?/i);
+            if (navMatch) {
+                currentUrl = navMatch[1];
+                const path = normalizeUrlToPath(currentUrl);
+                if (!pageMap.has(path)) {
+                    pageMap.set(path, {
+                        url: currentUrl,
+                        path,
+                        testFiles: [],
+                        actions: [],
+                        testCount: 0,
+                        coverageScore: 0,
+                    });
+                }
+                const page = pageMap.get(path);
+                if (!page.testFiles.includes(testFile)) {
+                    page.testFiles.push(testFile);
+                    page.testCount++;
+                }
+                page.actions.push({
+                    type: "navigate",
+                    target: currentUrl,
+                    testFile,
+                    lineNumber,
+                });
+            }
+            // Detect click actions
+            const clickMatch = line.match(/click\s+(?:on\s+)?(?:the\s+)?["']?([^"'\n]+)["']?/i);
+            if (clickMatch && currentUrl) {
+                const path = normalizeUrlToPath(currentUrl);
+                const page = pageMap.get(path);
+                if (page) {
+                    page.actions.push({
+                        type: "click",
+                        target: clickMatch[1].trim(),
+                        testFile,
+                        lineNumber,
+                    });
+                }
+            }
+            // Detect fill/type actions
+            const fillMatch = line.match(/(?:type|fill|enter)\s+["']([^"']+)["']\s+(?:in|into)\s+(?:the\s+)?["']?([^"'\n]+)["']?/i);
+            if (fillMatch && currentUrl) {
+                const path = normalizeUrlToPath(currentUrl);
+                const page = pageMap.get(path);
+                if (page) {
+                    page.actions.push({
+                        type: "fill",
+                        target: fillMatch[2].trim(),
+                        value: fillMatch[1],
+                        testFile,
+                        lineNumber,
+                    });
+                }
+            }
+            // Detect verify actions
+            const verifyMatch = line.match(/(?:verify|assert|check|expect|should)\s+(.+)/i);
+            if (verifyMatch && currentUrl) {
+                const path = normalizeUrlToPath(currentUrl);
+                const page = pageMap.get(path);
+                if (page) {
+                    page.actions.push({
+                        type: "verify",
+                        target: verifyMatch[1].trim(),
+                        testFile,
+                        lineNumber,
+                    });
+                }
+            }
+            // Detect wait actions
+            const waitMatch = line.match(/wait\s+(?:for\s+)?(.+)/i);
+            if (waitMatch && currentUrl) {
+                const path = normalizeUrlToPath(currentUrl);
+                const page = pageMap.get(path);
+                if (page) {
+                    page.actions.push({
+                        type: "wait",
+                        target: waitMatch[1].trim(),
+                        testFile,
+                        lineNumber,
+                    });
+                }
+            }
+        }
+    }
+    // Calculate coverage scores
+    for (const page of pageMap.values()) {
+        const hasClicks = page.actions.some(a => a.type === "click");
+        const hasFills = page.actions.some(a => a.type === "fill");
+        const hasVerifies = page.actions.some(a => a.type === "verify");
+        let score = 20; // Base score for visiting
+        if (hasClicks)
+            score += 25;
+        if (hasFills)
+            score += 25;
+        if (hasVerifies)
+            score += 30;
+        page.coverageScore = Math.min(100, score);
+    }
+    return Array.from(pageMap.values());
+}
+/**
+ * Normalize URL to a path for comparison
+ */
+function normalizeUrlToPath(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.pathname.replace(/\/$/, "") || "/";
+    }
+    catch {
+        // Not a full URL, treat as path
+        return url.replace(/\/$/, "") || "/";
+    }
+}
+/**
+ * Fetch and parse sitemap.xml
+ */
+async function parseSitemap(sitemapUrl) {
+    const pages = [];
+    try {
+        const response = await fetch(sitemapUrl);
+        const xml = await response.text();
+        // Simple XML parsing for sitemap
+        const locMatches = xml.matchAll(/<loc>([^<]+)<\/loc>/g);
+        for (const match of locMatches) {
+            const url = match[1].trim();
+            pages.push({
+                url,
+                path: normalizeUrlToPath(url),
+                source: "sitemap",
+            });
+        }
+    }
+    catch (err) {
+        console.error(`Failed to fetch sitemap: ${err}`);
+    }
+    return pages;
+}
+/**
+ * Crawl a site to discover pages
+ */
+async function crawlSiteForCoverage(startUrl, maxPages = 100, includePattern, excludePattern) {
+    const pages = [];
+    const visited = new Set();
+    const queue = [startUrl];
+    const browser = new CBrowser({
+        headless: true,
+        browser: "chromium",
+    });
+    const baseUrl = new URL(startUrl);
+    const includeRegex = includePattern ? new RegExp(includePattern) : null;
+    const excludeRegex = excludePattern ? new RegExp(excludePattern) : null;
+    try {
+        while (queue.length > 0 && pages.length < maxPages) {
+            const url = queue.shift();
+            const path = normalizeUrlToPath(url);
+            if (visited.has(path))
+                continue;
+            visited.add(path);
+            // Check patterns
+            if (includeRegex && !includeRegex.test(path))
+                continue;
+            if (excludeRegex && excludeRegex.test(path))
+                continue;
+            try {
+                const result = await browser.navigate(url);
+                // Count interactive elements
+                const page = await browser.getPage();
+                const interactiveElements = await page.locator("button, a, input, select, textarea, [onclick], [role='button']").count();
+                const formCount = await page.locator("form").count();
+                // Get outbound links
+                const links = await page.locator("a[href]").evaluateAll((els) => els.map(el => el.href).filter(href => href && !href.startsWith("javascript:")));
+                const sitePage = {
+                    url,
+                    path,
+                    title: result.title,
+                    source: pages.length === 0 ? "crawl" : "link",
+                    status: 200,
+                    outboundLinks: links,
+                    interactiveElements,
+                    formCount,
+                };
+                pages.push(sitePage);
+                // Add internal links to queue
+                for (const link of links) {
+                    try {
+                        const linkUrl = new URL(link);
+                        if (linkUrl.hostname === baseUrl.hostname && !visited.has(normalizeUrlToPath(link))) {
+                            queue.push(link);
+                        }
+                    }
+                    catch {
+                        // Invalid URL, skip
+                    }
+                }
+            }
+            catch (err) {
+                // Page failed to load
+                pages.push({
+                    url,
+                    path,
+                    source: "link",
+                    status: 0,
+                });
+            }
+        }
+    }
+    finally {
+        await browser.close();
+    }
+    return pages;
+}
+/**
+ * Identify coverage gaps
+ */
+function identifyCoverageGaps(sitePages, testedPages, minCoverage = 50) {
+    const gaps = [];
+    const testedPaths = new Set(testedPages.map(p => p.path));
+    for (const sitePage of sitePages) {
+        const testedPage = testedPages.find(p => p.path === sitePage.path);
+        // Completely untested
+        if (!testedPage) {
+            const priority = determinePriority(sitePage);
+            gaps.push({
+                page: sitePage,
+                reason: "untested",
+                priority,
+                suggestedTests: generateSuggestedTests(sitePage),
+                similarTestedPages: findSimilarTestedPages(sitePage.path, testedPages),
+            });
+            continue;
+        }
+        // Low coverage
+        if (testedPage.coverageScore < minCoverage) {
+            gaps.push({
+                page: sitePage,
+                reason: "low-coverage",
+                priority: "medium",
+                suggestedTests: generateSuggestedTests(sitePage, testedPage),
+            });
+            continue;
+        }
+        // No interactions tested
+        const hasInteractions = testedPage.actions.some(a => a.type === "click" || a.type === "fill");
+        if (!hasInteractions && sitePage.interactiveElements && sitePage.interactiveElements > 5) {
+            gaps.push({
+                page: sitePage,
+                reason: "no-interactions",
+                priority: "low",
+                suggestedTests: [`Test interactive elements on ${sitePage.path}`],
+            });
+        }
+        // No verifications
+        const hasVerifications = testedPage.actions.some(a => a.type === "verify");
+        if (!hasVerifications) {
+            gaps.push({
+                page: sitePage,
+                reason: "no-verifications",
+                priority: "low",
+                suggestedTests: [`Add assertions to verify ${sitePage.path} content`],
+            });
+        }
+    }
+    // Sort by priority
+    const priorityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
+    gaps.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
+    return gaps;
+}
+/**
+ * Determine priority of an untested page
+ */
+function determinePriority(page) {
+    const path = page.path.toLowerCase();
+    // Critical paths
+    if (path.includes("checkout") || path.includes("payment") || path.includes("login") ||
+        path.includes("register") || path.includes("signup") || path.includes("auth")) {
+        return "critical";
+    }
+    // High priority - user account, settings
+    if (path.includes("account") || path.includes("profile") || path.includes("settings") ||
+        path.includes("dashboard") || path.includes("admin")) {
+        return "high";
+    }
+    // Medium - has forms or many interactive elements
+    if (page.formCount && page.formCount > 0)
+        return "medium";
+    if (page.interactiveElements && page.interactiveElements > 10)
+        return "medium";
+    return "low";
+}
+/**
+ * Generate suggested test steps for a page
+ */
+function generateSuggestedTests(sitePage, existingTests) {
+    const suggestions = [];
+    suggestions.push(`go to ${sitePage.url}`);
+    if (sitePage.formCount && sitePage.formCount > 0) {
+        suggestions.push(`fill form fields with test data`);
+        suggestions.push(`submit form and verify success`);
+    }
+    if (sitePage.interactiveElements && sitePage.interactiveElements > 0) {
+        suggestions.push(`click primary call-to-action`);
+    }
+    suggestions.push(`verify page contains expected content`);
+    suggestions.push(`verify no console errors`);
+    if (existingTests) {
+        // Add specific suggestions based on what's missing
+        const hasClicks = existingTests.actions.some(a => a.type === "click");
+        const hasFills = existingTests.actions.some(a => a.type === "fill");
+        const hasVerifies = existingTests.actions.some(a => a.type === "verify");
+        if (!hasClicks)
+            suggestions.unshift(`# Add click interactions`);
+        if (!hasFills && sitePage.formCount)
+            suggestions.unshift(`# Add form fill tests`);
+        if (!hasVerifies)
+            suggestions.unshift(`# Add verification assertions`);
+    }
+    return suggestions;
+}
+/**
+ * Find similar tested pages for reference
+ */
+function findSimilarTestedPages(path, testedPages) {
+    const segments = path.split("/").filter(Boolean);
+    if (segments.length === 0)
+        return [];
+    const similar = [];
+    const prefix = "/" + segments[0];
+    for (const tested of testedPages) {
+        if (tested.path.startsWith(prefix) && tested.path !== path) {
+            similar.push(tested.path);
+            if (similar.length >= 3)
+                break;
+        }
+    }
+    return similar;
+}
+/**
+ * Calculate overall coverage analysis
+ */
+function calculateCoverageAnalysis(sitePages, testedPages) {
+    const testedPaths = new Set(testedPages.map(p => p.path));
+    // Section coverage
+    const sections = {};
+    for (const page of sitePages) {
+        const segments = page.path.split("/").filter(Boolean);
+        const section = segments.length > 0 ? "/" + segments[0] : "/";
+        if (!sections[section]) {
+            sections[section] = { total: 0, tested: 0 };
+        }
+        sections[section].total++;
+        if (testedPaths.has(page.path)) {
+            sections[section].tested++;
+        }
+    }
+    const sectionCoverage = {};
+    for (const [section, data] of Object.entries(sections)) {
+        sectionCoverage[section] = {
+            ...data,
+            percent: data.total > 0 ? Math.round((data.tested / data.total) * 100) : 0,
+        };
+    }
+    const totalPages = sitePages.length;
+    const testedCount = sitePages.filter(p => testedPaths.has(p.path)).length;
+    return {
+        totalPages,
+        testedPages: testedCount,
+        untestedPages: totalPages - testedCount,
+        coveragePercent: totalPages > 0 ? Math.round((testedCount / totalPages) * 100) : 0,
+        sectionCoverage,
+    };
+}
+/**
+ * Generate complete coverage map
+ */
+async function generateCoverageMap(baseUrl, testFiles, options = {}) {
+    const startTime = Date.now();
+    // Parse test files
+    const testedPages = parseTestFilesForCoverage(testFiles);
+    // Get site pages
+    let sitePages;
+    if (options.sitemapUrl) {
+        sitePages = await parseSitemap(options.sitemapUrl);
+    }
+    else {
+        sitePages = await crawlSiteForCoverage(baseUrl, options.maxPages || 100, options.includePattern, options.excludePattern);
+    }
+    // Identify gaps
+    const gaps = identifyCoverageGaps(sitePages, testedPages, options.minCoverage || 50);
+    // Calculate analysis
+    const analysis = calculateCoverageAnalysis(sitePages, testedPages);
+    // Generate recommendations
+    const recommendations = [];
+    if (analysis.coveragePercent < 50) {
+        recommendations.push("Coverage is below 50% - prioritize testing critical paths");
+    }
+    const criticalGaps = gaps.filter(g => g.priority === "critical");
+    if (criticalGaps.length > 0) {
+        recommendations.push(`${criticalGaps.length} critical pages have no tests (checkout, auth, etc.)`);
+    }
+    const lowCoverageSections = Object.entries(analysis.sectionCoverage)
+        .filter(([_, data]) => data.percent < 30 && data.total > 2)
+        .map(([section]) => section);
+    if (lowCoverageSections.length > 0) {
+        recommendations.push(`Sections with low coverage: ${lowCoverageSections.join(", ")}`);
+    }
+    if (gaps.filter(g => g.reason === "no-verifications").length > 3) {
+        recommendations.push("Many tests lack assertions - add verification steps");
+    }
+    return {
+        baseUrl,
+        timestamp: new Date().toISOString(),
+        duration: Date.now() - startTime,
+        testFiles,
+        sitePages,
+        testedPages,
+        gaps,
+        analysis,
+        recommendations,
+    };
+}
+/**
+ * Format coverage map as text report
+ */
+function formatCoverageReport(result) {
+    const lines = [];
+    lines.push("╔══════════════════════════════════════════════════════════════════════════════╗");
+    lines.push("║                         TEST COVERAGE MAP REPORT                            ║");
+    lines.push("╚══════════════════════════════════════════════════════════════════════════════╝");
+    lines.push("");
+    lines.push(`📊 Site: ${result.baseUrl}`);
+    lines.push(`📅 Generated: ${result.timestamp}`);
+    lines.push(`⏱️  Analysis time: ${(result.duration / 1000).toFixed(1)}s`);
+    lines.push(`📝 Test files analyzed: ${result.testFiles.length}`);
+    lines.push("");
+    // Overall coverage
+    lines.push("═══════════════════════════════════════════════════════════════════════════════");
+    lines.push("📈 OVERALL COVERAGE");
+    lines.push("═══════════════════════════════════════════════════════════════════════════════");
+    lines.push("");
+    const { analysis } = result;
+    const coverageBar = generateCoverageProgressBar(analysis.coveragePercent);
+    lines.push(`  Coverage: ${coverageBar} ${analysis.coveragePercent}%`);
+    lines.push("");
+    lines.push(`  Total pages:    ${analysis.totalPages}`);
+    lines.push(`  Tested pages:   ${analysis.testedPages}`);
+    lines.push(`  Untested pages: ${analysis.untestedPages}`);
+    lines.push("");
+    // Section coverage
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    lines.push("📁 COVERAGE BY SECTION");
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    lines.push("");
+    const sections = Object.entries(analysis.sectionCoverage)
+        .sort((a, b) => b[1].total - a[1].total);
+    for (const [section, data] of sections) {
+        const bar = generateCoverageProgressBar(data.percent, 20);
+        const status = data.percent >= 70 ? "✅" : data.percent >= 40 ? "⚠️" : "❌";
+        lines.push(`  ${status} ${section.padEnd(20)} ${bar} ${data.tested}/${data.total} (${data.percent}%)`);
+    }
+    lines.push("");
+    // Coverage gaps
+    if (result.gaps.length > 0) {
+        lines.push("═══════════════════════════════════════════════════════════════════════════════");
+        lines.push("🕳️  COVERAGE GAPS");
+        lines.push("═══════════════════════════════════════════════════════════════════════════════");
+        lines.push("");
+        const priorityEmoji = { critical: "🚨", high: "🔴", medium: "🟡", low: "🟢" };
+        for (const gap of result.gaps.slice(0, 15)) {
+            const emoji = priorityEmoji[gap.priority];
+            lines.push(`  ${emoji} ${gap.page.path}`);
+            lines.push(`     Reason: ${gap.reason} | Priority: ${gap.priority}`);
+            if (gap.suggestedTests.length > 0) {
+                lines.push(`     Suggested: ${gap.suggestedTests[0]}`);
+            }
+            lines.push("");
+        }
+        if (result.gaps.length > 15) {
+            lines.push(`  ... and ${result.gaps.length - 15} more gaps`);
+            lines.push("");
+        }
+    }
+    // Recommendations
+    if (result.recommendations.length > 0) {
+        lines.push("═══════════════════════════════════════════════════════════════════════════════");
+        lines.push("💡 RECOMMENDATIONS");
+        lines.push("═══════════════════════════════════════════════════════════════════════════════");
+        lines.push("");
+        for (const rec of result.recommendations) {
+            lines.push(`  ${rec}`);
+        }
+        lines.push("");
+    }
+    // Tested pages summary
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    lines.push("✅ TESTED PAGES (Top 10 by coverage)");
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    lines.push("");
+    const topTested = [...result.testedPages]
+        .sort((a, b) => b.coverageScore - a.coverageScore)
+        .slice(0, 10);
+    for (const page of topTested) {
+        const bar = generateCoverageProgressBar(page.coverageScore, 15);
+        lines.push(`  ${bar} ${page.coverageScore}% ${page.path}`);
+        lines.push(`       Actions: ${page.actions.length} | Tests: ${page.testCount}`);
+    }
+    return lines.join("\n");
+}
+/**
+ * Generate HTML coverage report
+ */
+function generateCoverageHtmlReport(result) {
+    const { analysis, gaps, testedPages } = result;
+    const coverageColor = analysis.coveragePercent >= 70 ? "#22c55e" :
+        analysis.coveragePercent >= 40 ? "#eab308" : "#ef4444";
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Test Coverage Map - ${result.baseUrl}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #eee; padding: 2rem; }
+    .container { max-width: 1200px; margin: 0 auto; }
+    h1 { color: #fff; margin-bottom: 0.5rem; }
+    .subtitle { color: #888; margin-bottom: 2rem; }
+    .card { background: #252540; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
+    .card h2 { color: #fff; font-size: 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
+    .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
+    .stat { text-align: center; }
+    .stat-value { font-size: 2rem; font-weight: bold; color: ${coverageColor}; }
+    .stat-label { color: #888; font-size: 0.875rem; }
+    .progress-bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin: 1rem 0; }
+    .progress-fill { height: 100%; background: ${coverageColor}; transition: width 0.5s; }
+    .section-list { list-style: none; }
+    .section-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #333; }
+    .section-name { flex: 1; }
+    .section-bar { width: 150px; height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
+    .section-bar-fill { height: 100%; border-radius: 3px; }
+    .section-percent { width: 60px; text-align: right; font-weight: 500; }
+    .gap-list { list-style: none; }
+    .gap-item { padding: 1rem; margin-bottom: 0.75rem; background: #1a1a2e; border-radius: 8px; border-left: 4px solid; }
+    .gap-critical { border-color: #ef4444; }
+    .gap-high { border-color: #f97316; }
+    .gap-medium { border-color: #eab308; }
+    .gap-low { border-color: #22c55e; }
+    .gap-path { font-weight: 600; color: #fff; }
+    .gap-reason { color: #888; font-size: 0.875rem; margin-top: 0.25rem; }
+    .badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
+    .badge-critical { background: #ef4444; color: #fff; }
+    .badge-high { background: #f97316; color: #fff; }
+    .badge-medium { background: #eab308; color: #000; }
+    .badge-low { background: #22c55e; color: #fff; }
+    .recommendations { list-style: none; }
+    .recommendations li { padding: 0.75rem; background: #1a1a2e; border-radius: 6px; margin-bottom: 0.5rem; }
+    .page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
+    .page-card { background: #1a1a2e; border-radius: 8px; padding: 1rem; }
+    .page-score { font-size: 1.5rem; font-weight: bold; }
+    .page-path { color: #888; font-size: 0.875rem; word-break: break-all; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Test Coverage Map</h1>
+    <p class="subtitle">${result.baseUrl} | Generated ${new Date(result.timestamp).toLocaleString()}</p>
+
+    <div class="card">
+      <h2>📊 Overall Coverage</h2>
+      <div class="stats">
+        <div class="stat">
+          <div class="stat-value">${analysis.coveragePercent}%</div>
+          <div class="stat-label">Coverage</div>
+        </div>
+        <div class="stat">
+          <div class="stat-value">${analysis.totalPages}</div>
+          <div class="stat-label">Total Pages</div>
+        </div>
+        <div class="stat">
+          <div class="stat-value">${analysis.testedPages}</div>
+          <div class="stat-label">Tested</div>
+        </div>
+        <div class="stat">
+          <div class="stat-value">${analysis.untestedPages}</div>
+          <div class="stat-label">Untested</div>
+        </div>
+      </div>
+      <div class="progress-bar">
+        <div class="progress-fill" style="width: ${analysis.coveragePercent}%"></div>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>📁 Coverage by Section</h2>
+      <ul class="section-list">
+        ${Object.entries(analysis.sectionCoverage)
+        .sort((a, b) => b[1].total - a[1].total)
+        .map(([section, data]) => {
+        const color = data.percent >= 70 ? "#22c55e" : data.percent >= 40 ? "#eab308" : "#ef4444";
+        return `
+              <li class="section-item">
+                <span class="section-name">${section}</span>
+                <div class="section-bar">
+                  <div class="section-bar-fill" style="width: ${data.percent}%; background: ${color}"></div>
+                </div>
+                <span class="section-percent" style="color: ${color}">${data.percent}%</span>
+                <span style="color: #666; font-size: 0.875rem">${data.tested}/${data.total}</span>
+              </li>
+            `;
+    }).join("")}
+      </ul>
+    </div>
+
+    ${gaps.length > 0 ? `
+      <div class="card">
+        <h2>🕳️ Coverage Gaps (${gaps.length})</h2>
+        <ul class="gap-list">
+          ${gaps.slice(0, 20).map(gap => `
+            <li class="gap-item gap-${gap.priority}">
+              <div style="display: flex; justify-content: space-between; align-items: center;">
+                <span class="gap-path">${gap.page.path}</span>
+                <span class="badge badge-${gap.priority}">${gap.priority}</span>
+              </div>
+              <div class="gap-reason">Reason: ${gap.reason}</div>
+            </li>
+          `).join("")}
+        </ul>
+        ${gaps.length > 20 ? `<p style="color: #666; text-align: center;">...and ${gaps.length - 20} more gaps</p>` : ""}
+      </div>
+    ` : ""}
+
+    ${result.recommendations.length > 0 ? `
+      <div class="card">
+        <h2>💡 Recommendations</h2>
+        <ul class="recommendations">
+          ${result.recommendations.map(rec => `<li>${rec}</li>`).join("")}
+        </ul>
+      </div>
+    ` : ""}
+
+    <div class="card">
+      <h2>✅ Tested Pages (Top 12)</h2>
+      <div class="page-grid">
+        ${testedPages
+        .sort((a, b) => b.coverageScore - a.coverageScore)
+        .slice(0, 12)
+        .map(page => {
+        const color = page.coverageScore >= 70 ? "#22c55e" : page.coverageScore >= 40 ? "#eab308" : "#ef4444";
+        return `
+              <div class="page-card">
+                <div class="page-score" style="color: ${color}">${page.coverageScore}%</div>
+                <div class="page-path">${page.path}</div>
+                <div style="color: #666; font-size: 0.75rem; margin-top: 0.5rem;">
+                  ${page.actions.length} actions | ${page.testCount} test(s)
+                </div>
+              </div>
+            `;
+    }).join("")}
+      </div>
+    </div>
+
+    <footer style="text-align: center; color: #666; margin-top: 2rem; font-size: 0.875rem;">
+      Generated by CBrowser v6.5.0 | Analysis took ${(result.duration / 1000).toFixed(1)}s
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+/**
+ * Generate a text progress bar for coverage
+ */
+function generateCoverageProgressBar(percent, width = 30) {
+    const filled = Math.round((percent / 100) * width);
+    const empty = width - filled;
+    return "█".repeat(filled) + "░".repeat(empty);
+}
+// =========================================================================
+// Tier 7: AI Visual Regression (v7.0.0)
+// =========================================================================
+/**
+ * Get the path to visual baselines storage
+ */
+function getVisualBaselinesPath() {
+    const baseDir = process.env.CBROWSER_DATA_DIR || (0, path_1.join)(process.cwd(), ".cbrowser");
+    const baselinesDir = (0, path_1.join)(baseDir, "visual-baselines");
+    if (!(0, fs_1.existsSync)(baselinesDir)) {
+        (0, fs_1.mkdirSync)(baselinesDir, { recursive: true });
+    }
+    return baselinesDir;
+}
+/**
+ * Get the path to visual baseline screenshots
+ */
+function getVisualScreenshotsPath() {
+    const baselinesDir = getVisualBaselinesPath();
+    const screenshotsDir = (0, path_1.join)(baselinesDir, "screenshots");
+    if (!(0, fs_1.existsSync)(screenshotsDir)) {
+        (0, fs_1.mkdirSync)(screenshotsDir, { recursive: true });
+    }
+    return screenshotsDir;
+}
+/**
+ * Load all visual baselines from storage
+ */
+function loadVisualBaselines() {
+    const baselinesPath = getVisualBaselinesPath();
+    const indexPath = (0, path_1.join)(baselinesPath, "baselines.json");
+    if (!(0, fs_1.existsSync)(indexPath)) {
+        return [];
+    }
+    try {
+        const data = JSON.parse((0, fs_1.readFileSync)(indexPath, "utf-8"));
+        return data.baselines || [];
+    }
+    catch {
+        return [];
+    }
+}
+/**
+ * Save visual baselines to storage
+ */
+function saveVisualBaselines(baselines) {
+    const baselinesPath = getVisualBaselinesPath();
+    const indexPath = (0, path_1.join)(baselinesPath, "baselines.json");
+    (0, fs_1.writeFileSync)(indexPath, JSON.stringify({ baselines, updated: new Date().toISOString() }, null, 2));
+}
+/**
+ * Capture a visual baseline screenshot
+ */
+async function captureVisualBaseline(url, name, options = {}) {
+    const browser = new CBrowser({
+        device: options.device,
+        viewportWidth: options.viewport?.width || 1920,
+        viewportHeight: options.viewport?.height || 1080,
+    });
+    try {
+        await browser.launch();
+        await browser.navigate(url);
+        // Wait if specified
+        if (options.waitFor) {
+            if (typeof options.waitFor === "number") {
+                await new Promise(resolve => setTimeout(resolve, options.waitFor));
+            }
+            else {
+                const page = await browser.getPage();
+                await page.waitForSelector(options.waitFor, { timeout: 10000 }).catch(() => { });
+            }
+        }
+        // Take screenshot
+        const screenshotsPath = getVisualScreenshotsPath();
+        const id = `${name.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${Date.now()}`;
+        const screenshotPath = (0, path_1.join)(screenshotsPath, `${id}.png`);
+        const page = await browser.getPage();
+        if (options.selector) {
+            const element = page.locator(options.selector).first();
+            await element.screenshot({ path: screenshotPath });
+        }
+        else {
+            await page.screenshot({ path: screenshotPath, fullPage: false });
+        }
+        // Get dimensions
+        const viewport = page.viewportSize() || { width: 1920, height: 1080 };
+        const baseline = {
+            id,
+            name,
+            url,
+            screenshotPath,
+            dimensions: viewport,
+            viewport,
+            device: options.device,
+            timestamp: new Date().toISOString(),
+            selector: options.selector,
+        };
+        // Save to index
+        const baselines = loadVisualBaselines();
+        // Remove existing baseline with same name (update)
+        const filtered = baselines.filter(b => b.name !== name);
+        filtered.push(baseline);
+        saveVisualBaselines(filtered);
+        return baseline;
+    }
+    finally {
+        await browser.close();
+    }
+}
+/**
+ * List all visual baselines
+ */
+function listVisualBaselines() {
+    return loadVisualBaselines();
+}
+/**
+ * Get a visual baseline by name
+ */
+function getVisualBaseline(name) {
+    const baselines = loadVisualBaselines();
+    return baselines.find(b => b.name === name);
+}
+/**
+ * Delete a visual baseline
+ */
+function deleteVisualBaseline(name) {
+    const baselines = loadVisualBaselines();
+    const baseline = baselines.find(b => b.name === name);
+    if (!baseline) {
+        return false;
+    }
+    // Delete screenshot file
+    if ((0, fs_1.existsSync)(baseline.screenshotPath)) {
+        (0, fs_1.unlinkSync)(baseline.screenshotPath);
+    }
+    // Update index
+    const filtered = baselines.filter(b => b.name !== name);
+    saveVisualBaselines(filtered);
+    return true;
+}
+/**
+ * Analyze visual differences using AI
+ */
+async function analyzeVisualDifferences(baselinePath, currentPath, options = {}) {
+    // Read both images as base64
+    const baselineImage = (0, fs_1.readFileSync)(baselinePath).toString("base64");
+    const currentImage = (0, fs_1.readFileSync)(currentPath).toString("base64");
+    // Build the AI prompt for analysis
+    const sensitivityDesc = {
+        low: "Only flag significant, obvious changes that would clearly impact users",
+        medium: "Flag notable changes in layout, content, or style",
+        high: "Flag any visible differences, including subtle spacing or color changes",
+    };
+    const prompt = `You are a visual regression testing AI. Compare these two screenshots and identify any differences.
+
+BASELINE IMAGE: The first/reference screenshot
+CURRENT IMAGE: The second/new screenshot
+
+Sensitivity level: ${options.sensitivity || "medium"} - ${sensitivityDesc[options.sensitivity || "medium"]}
+
+${options.ignoreRegions?.length ? `Ignore changes in these regions: ${JSON.stringify(options.ignoreRegions)}` : ""}
+
+Analyze the visual differences and respond in this exact JSON format:
+{
+  "overallStatus": "pass" | "warning" | "fail",
+  "summary": "Brief 1-2 sentence summary of changes found",
+  "changes": [
+    {
+      "type": "layout" | "content" | "style" | "missing" | "added" | "moved",
+      "severity": "breaking" | "warning" | "info" | "acceptable",
+      "region": { "x": 0, "y": 0, "width": 100, "height": 100 },
+      "description": "What changed",
+      "reasoning": "Why this matters",
+      "confidence": 0.95,
+      "suggestion": "Optional suggestion to fix or accept"
+    }
+  ],
+  "similarityScore": 0.85,
+  "productionReady": true | false,
+  "confidence": 0.9
+}
+
+Change severity guidelines:
+- "breaking": Layout shifts, missing critical elements, broken functionality indicators
+- "warning": Noticeable content changes, significant style differences
+- "info": Minor spacing changes, subtle color adjustments
+- "acceptable": Expected dynamic content (timestamps, ads), minor rendering differences
+
+For overallStatus:
+- "pass": No changes or only acceptable/info-level changes
+- "warning": Some warning-level changes that should be reviewed
+- "fail": Any breaking changes detected
+
+Respond ONLY with the JSON, no other text.`;
+    // Use Claude to analyze the images
+    // For now, we'll use a simulated response since we don't have direct API access
+    // In production, this would call the Anthropic API with vision
+    try {
+        // Try to use the inference tool if available
+        const { execSync } = await import("child_process");
+        const inferenceScript = (0, path_1.join)(process.env.HOME || "", ".claude/skills/Tools/Inference.ts");
+        if ((0, fs_1.existsSync)(inferenceScript)) {
+            // Create a temporary file with the images and prompt
+            const tempDir = (0, path_1.join)(getVisualBaselinesPath(), "temp");
+            if (!(0, fs_1.existsSync)(tempDir)) {
+                (0, fs_1.mkdirSync)(tempDir, { recursive: true });
+            }
+            const requestPath = (0, path_1.join)(tempDir, `analysis-${Date.now()}.json`);
+            (0, fs_1.writeFileSync)(requestPath, JSON.stringify({
+                prompt,
+                images: [
+                    { type: "base64", media_type: "image/png", data: baselineImage },
+                    { type: "base64", media_type: "image/png", data: currentImage },
+                ],
+            }));
+            // For now, perform a heuristic comparison since we can't easily call Claude with images
+            // This can be enhanced when proper API integration is available
+            const analysis = performHeuristicAnalysis(baselinePath, currentPath, options);
+            // Clean up
+            if ((0, fs_1.existsSync)(requestPath)) {
+                (0, fs_1.unlinkSync)(requestPath);
+            }
+            return analysis;
+        }
+    }
+    catch {
+        // Fall back to heuristic analysis
+    }
+    // Fallback: Heuristic analysis based on file comparison
+    return performHeuristicAnalysis(baselinePath, currentPath, options);
+}
+/**
+ * Perform heuristic visual analysis when AI is not available
+ */
+function performHeuristicAnalysis(baselinePath, currentPath, options = {}) {
+    const baselineStats = (0, fs_1.statSync)(baselinePath);
+    const currentStats = (0, fs_1.statSync)(currentPath);
+    // Simple heuristic: compare file sizes
+    const sizeDiff = Math.abs(baselineStats.size - currentStats.size);
+    const sizeRatio = sizeDiff / baselineStats.size;
+    const changes = [];
+    let overallStatus = "pass";
+    let similarityScore = 1.0;
+    // Size-based heuristics
+    if (sizeRatio > 0.3) {
+        changes.push({
+            type: "layout",
+            severity: "breaking",
+            region: { x: 0, y: 0, width: 1920, height: 1080 },
+            description: "Significant visual change detected (>30% size difference)",
+            reasoning: "Large file size difference indicates substantial visual changes",
+            confidence: 0.7,
+            suggestion: "Review the visual changes manually",
+        });
+        overallStatus = "fail";
+        similarityScore = 0.5;
+    }
+    else if (sizeRatio > 0.1) {
+        changes.push({
+            type: "content",
+            severity: "warning",
+            region: { x: 0, y: 0, width: 1920, height: 1080 },
+            description: "Moderate visual change detected (10-30% size difference)",
+            reasoning: "Moderate file size difference suggests some visual changes",
+            confidence: 0.6,
+            suggestion: "Review to confirm changes are expected",
+        });
+        overallStatus = "warning";
+        similarityScore = 0.75;
+    }
+    else if (sizeRatio > 0.02) {
+        changes.push({
+            type: "style",
+            severity: "info",
+            region: { x: 0, y: 0, width: 1920, height: 1080 },
+            description: "Minor visual change detected (2-10% size difference)",
+            reasoning: "Small file size difference indicates minor rendering differences",
+            confidence: 0.5,
+        });
+        similarityScore = 0.9;
+    }
+    // Apply sensitivity adjustments
+    if (options.sensitivity === "low" && overallStatus === "warning") {
+        overallStatus = "pass";
+    }
+    else if (options.sensitivity === "high" && changes.length === 0 && sizeRatio > 0.005) {
+        changes.push({
+            type: "style",
+            severity: "info",
+            region: { x: 0, y: 0, width: 1920, height: 1080 },
+            description: "Very minor visual change detected",
+            reasoning: "Slight file size difference at high sensitivity",
+            confidence: 0.4,
+        });
+        similarityScore = 0.95;
+    }
+    return {
+        overallStatus,
+        summary: changes.length === 0
+            ? "No significant visual changes detected"
+            : `Found ${changes.length} visual change(s) with ${overallStatus} status`,
+        changes,
+        similarityScore,
+        productionReady: overallStatus !== "fail",
+        confidence: 0.6, // Lower confidence for heuristic analysis
+        rawAnalysis: "Heuristic analysis based on file comparison (AI analysis not available)",
+    };
+}
+/**
+ * Run visual regression test against a baseline
+ */
+async function runVisualRegression(url, baselineName, options = {}) {
+    const startTime = Date.now();
+    const baseline = getVisualBaseline(baselineName);
+    if (!baseline) {
+        return {
+            passed: false,
+            baseline: null,
+            currentScreenshotPath: "",
+            analysis: {
+                overallStatus: "fail",
+                summary: `Baseline "${baselineName}" not found`,
+                changes: [],
+                similarityScore: 0,
+                productionReady: false,
+                confidence: 1.0,
+            },
+            duration: Date.now() - startTime,
+        };
+    }
+    // Capture current screenshot with same settings as baseline
+    const browser = new CBrowser({
+        device: baseline.device,
+        viewportWidth: baseline.viewport.width,
+        viewportHeight: baseline.viewport.height,
+    });
+    try {
+        await browser.launch();
+        await browser.navigate(url);
+        // Wait if specified in options
+        if (options.waitBeforeCapture) {
+            await new Promise(resolve => setTimeout(resolve, options.waitBeforeCapture));
+        }
+        // Take screenshot
+        const screenshotsPath = getVisualScreenshotsPath();
+        const currentScreenshotPath = (0, path_1.join)(screenshotsPath, `current-${baseline.id}-${Date.now()}.png`);
+        const page = await browser.getPage();
+        if (baseline.selector) {
+            const element = page.locator(baseline.selector).first();
+            await element.screenshot({ path: currentScreenshotPath });
+        }
+        else {
+            await page.screenshot({ path: currentScreenshotPath, fullPage: false });
+        }
+        // Analyze differences
+        const analysis = await analyzeVisualDifferences(baseline.screenshotPath, currentScreenshotPath, options);
+        // Determine pass/fail based on threshold
+        const threshold = options.threshold ?? 0.9;
+        const passed = analysis.similarityScore >= threshold && analysis.overallStatus !== "fail";
+        // Generate diff image path (if we had pixel-diff capability)
+        const diffImagePath = options.generateDiff
+            ? (0, path_1.join)(screenshotsPath, `diff-${baseline.id}-${Date.now()}.png`)
+            : undefined;
+        return {
+            passed,
+            baseline,
+            currentScreenshotPath,
+            diffImagePath,
+            analysis,
+            duration: Date.now() - startTime,
+        };
+    }
+    finally {
+        await browser.close();
+    }
+}
+/**
+ * Run visual regression on multiple pages
+ */
+async function runVisualRegressionSuite(suite, options = {}) {
+    const startTime = Date.now();
+    const results = [];
+    let passed = 0;
+    let failed = 0;
+    let warnings = 0;
+    console.log(`\n🔍 Running visual regression suite: ${suite.name}`);
+    console.log(`   Testing ${suite.pages.length} page(s)...\n`);
+    for (const page of suite.pages) {
+        console.log(`   📸 Testing: ${page.name}...`);
+        const result = await runVisualRegression(page.url, page.baselineName, { ...options, ...page.options });
+        results.push(result);
+        if (result.passed) {
+            if (result.analysis.overallStatus === "warning") {
+                warnings++;
+                console.log(`      ⚠️  Warning (similarity: ${(result.analysis.similarityScore * 100).toFixed(1)}%)`);
+            }
+            else {
+                passed++;
+                console.log(`      ✅ Passed (similarity: ${(result.analysis.similarityScore * 100).toFixed(1)}%)`);
+            }
+        }
+        else {
+            failed++;
+            console.log(`      ❌ Failed: ${result.analysis.summary}`);
+        }
+    }
+    const duration = Date.now() - startTime;
+    console.log(`\n${"─".repeat(60)}`);
+    console.log(`   Results: ${passed} passed, ${failed} failed, ${warnings} warnings`);
+    console.log(`   Duration: ${(duration / 1000).toFixed(1)}s`);
+    console.log(`${"─".repeat(60)}\n`);
+    return {
+        suite,
+        results,
+        summary: {
+            total: suite.pages.length,
+            passed,
+            failed,
+            warnings,
+        },
+        duration,
+        timestamp: new Date().toISOString(),
+    };
+}
+/**
+ * Format visual regression result as text report
+ */
+function formatVisualRegressionReport(result) {
+    const lines = [];
+    lines.push("╔══════════════════════════════════════════════════════════════════════════════╗");
+    lines.push("║                      AI VISUAL REGRESSION REPORT                             ║");
+    lines.push("╚══════════════════════════════════════════════════════════════════════════════╝");
+    lines.push("");
+    const statusIcon = result.passed ? "✅" : "❌";
+    const statusText = result.passed ? "PASSED" : "FAILED";
+    lines.push(`${statusIcon} Status: ${statusText}`);
+    lines.push(`📊 Similarity: ${(result.analysis.similarityScore * 100).toFixed(1)}%`);
+    lines.push(`🎯 Confidence: ${(result.analysis.confidence * 100).toFixed(0)}%`);
+    lines.push(`⏱️  Duration: ${(result.duration / 1000).toFixed(2)}s`);
+    lines.push("");
+    if (result.baseline) {
+        lines.push("───────────────────────────────────────────────────────────────────────────────");
+        lines.push("📸 BASELINE INFO");
+        lines.push("───────────────────────────────────────────────────────────────────────────────");
+        lines.push(`   Name: ${result.baseline.name}`);
+        lines.push(`   URL: ${result.baseline.url}`);
+        lines.push(`   Captured: ${result.baseline.timestamp}`);
+        lines.push(`   Viewport: ${result.baseline.viewport.width}x${result.baseline.viewport.height}`);
+        if (result.baseline.device) {
+            lines.push(`   Device: ${result.baseline.device}`);
+        }
+        lines.push("");
+    }
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    lines.push("📝 ANALYSIS SUMMARY");
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    lines.push(`   ${result.analysis.summary}`);
+    lines.push("");
+    if (result.analysis.changes.length > 0) {
+        lines.push("───────────────────────────────────────────────────────────────────────────────");
+        lines.push("🔄 DETECTED CHANGES");
+        lines.push("───────────────────────────────────────────────────────────────────────────────");
+        for (const change of result.analysis.changes) {
+            const severityIcon = {
+                breaking: "🚨",
+                warning: "⚠️",
+                info: "ℹ️",
+                acceptable: "✓",
+            }[change.severity];
+            lines.push("");
+            lines.push(`   ${severityIcon} [${change.severity.toUpperCase()}] ${change.type}`);
+            lines.push(`      ${change.description}`);
+            lines.push(`      Reasoning: ${change.reasoning}`);
+            if (change.suggestion) {
+                lines.push(`      Suggestion: ${change.suggestion}`);
+            }
+        }
+        lines.push("");
+    }
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    lines.push(`🚀 Production Ready: ${result.analysis.productionReady ? "YES" : "NO"}`);
+    lines.push("───────────────────────────────────────────────────────────────────────────────");
+    return lines.join("\n");
+}
+/**
+ * Generate HTML report for visual regression suite
+ */
+function generateVisualRegressionHtmlReport(suiteResult) {
+    const { suite, results, summary, duration, timestamp } = suiteResult;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Visual Regression Report - ${suite.name}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f172a; color: #e2e8f0; line-height: 1.6; }
+    .container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+    h2 { font-size: 1.25rem; margin-bottom: 1rem; color: #94a3b8; }
+    .header { text-align: center; margin-bottom: 2rem; }
+    .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
+    .stat { background: #1e293b; padding: 1.5rem; border-radius: 0.5rem; text-align: center; }
+    .stat-value { font-size: 2rem; font-weight: bold; }
+    .stat-label { color: #94a3b8; font-size: 0.875rem; }
+    .passed { color: #22c55e; }
+    .failed { color: #ef4444; }
+    .warning { color: #eab308; }
+    .results { display: flex; flex-direction: column; gap: 1rem; }
+    .result-card { background: #1e293b; border-radius: 0.5rem; overflow: hidden; }
+    .result-header { padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; }
+    .result-body { padding: 1rem; }
+    .badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
+    .badge-pass { background: #166534; color: #22c55e; }
+    .badge-fail { background: #7f1d1d; color: #ef4444; }
+    .badge-warning { background: #713f12; color: #eab308; }
+    .similarity { font-size: 1.5rem; font-weight: bold; }
+    .changes { margin-top: 1rem; }
+    .change { padding: 0.75rem; background: #0f172a; border-radius: 0.25rem; margin-bottom: 0.5rem; }
+    .change-breaking { border-left: 3px solid #ef4444; }
+    .change-warning { border-left: 3px solid #eab308; }
+    .change-info { border-left: 3px solid #3b82f6; }
+    .change-acceptable { border-left: 3px solid #22c55e; }
+    footer { text-align: center; color: #64748b; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #334155; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>🔍 Visual Regression Report</h1>
+      <h2>${suite.name}</h2>
+      <p style="color: #64748b;">Generated: ${new Date(timestamp).toLocaleString()}</p>
+    </div>
+
+    <div class="summary">
+      <div class="stat">
+        <div class="stat-value">${summary.total}</div>
+        <div class="stat-label">Total Tests</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value passed">${summary.passed}</div>
+        <div class="stat-label">Passed</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value failed">${summary.failed}</div>
+        <div class="stat-label">Failed</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value warning">${summary.warnings}</div>
+        <div class="stat-label">Warnings</div>
+      </div>
+    </div>
+
+    <div class="results">
+      ${results.map((result, i) => {
+        const page = suite.pages[i];
+        const statusClass = result.passed ? (result.analysis.overallStatus === "warning" ? "warning" : "passed") : "failed";
+        const badgeClass = result.passed ? (result.analysis.overallStatus === "warning" ? "badge-warning" : "badge-pass") : "badge-fail";
+        const statusText = result.passed ? (result.analysis.overallStatus === "warning" ? "WARNING" : "PASSED") : "FAILED";
+        return `
+          <div class="result-card">
+            <div class="result-header">
+              <div>
+                <strong>${page.name}</strong>
+                <div style="color: #64748b; font-size: 0.875rem;">${page.url}</div>
+              </div>
+              <div style="display: flex; align-items: center; gap: 1rem;">
+                <div class="similarity ${statusClass}">${(result.analysis.similarityScore * 100).toFixed(1)}%</div>
+                <span class="badge ${badgeClass}">${statusText}</span>
+              </div>
+            </div>
+            <div class="result-body">
+              <p>${result.analysis.summary}</p>
+              ${result.analysis.changes.length > 0 ? `
+                <div class="changes">
+                  ${result.analysis.changes.map(change => `
+                    <div class="change change-${change.severity}">
+                      <strong>[${change.severity.toUpperCase()}] ${change.type}</strong>
+                      <p>${change.description}</p>
+                      ${change.suggestion ? `<p style="color: #94a3b8;"><em>Suggestion: ${change.suggestion}</em></p>` : ""}
+                    </div>
+                  `).join("")}
+                </div>
+              ` : ""}
+            </div>
+          </div>
+        `;
+    }).join("")}
+    </div>
+
+    <footer>
+      Generated by CBrowser v7.0.0 | Suite completed in ${(duration / 1000).toFixed(1)}s
+    </footer>
+  </div>
+</body>
+</html>`;
+}
 //# sourceMappingURL=browser.js.map