laxy-verify 1.1.8 → 1.1.9

package/dist/cli.js

@@ -52,6 +52,8 @@ const status_js_1 = require("./status.js");
 const auth_js_1 = require("./auth.js");
 const entitlement_js_1 = require("./entitlement.js");
 const multi_viewport_js_1 = require("./multi-viewport.js");
+const e2e_js_1 = require("./e2e.js");
+const visual_diff_js_1 = require("./visual-diff.js");
 const index_js_1 = require("./verification-core/index.js");
 const package_json_1 = __importDefault(require("../package.json"));
 function exitGracefully(code) {
@@ -188,6 +190,12 @@ function consoleOutput(result) {
     else {
         console.log(`  Lighthouse: skipped`);
     }
+    if (result.e2e) {
+        console.log(`  E2E: ${result.e2e.passed}/${result.e2e.total} passed`);
+    }
+    if (result.visualDiff) {
+        console.log(`  Visual diff: ${result.visualDiff.diffPercentage}% (${result.visualDiff.verdict})`);
+    }
     if (result.verification) {
         const view = result.verification.view;
         console.log(`  Verification tier: ${view.tier}`);
@@ -401,11 +409,15 @@ async function run() {
     // Phase 2: Dev server + Lighthouse (only if build succeeded and not skipped)
     let multiViewportScores = null;
     let allViewportsOk = false;
+    let e2eResult;
+    let visualDiffResult = null;
     if (buildResult.success && !args.skipLighthouse) {
         let servePid;
         try {
             const serve = await (0, serve_js_1.startDevServer)(devCmd, port, config.dev_timeout, args.projectDir);
             servePid = serve.pid;
+            const verifyUrl = `http://127.0.0.1:${port}/`;
+            const verificationTier = (0, index_js_1.planToVerificationTier)(features.plan);
             try {
                 const lhResult = await (0, lighthouse_js_1.runLighthouse)(port, config.lighthouse_runs);
                 scores = lhResult.scores ?? undefined;
@@ -436,6 +448,26 @@ async function run() {
                     console.error(`Multi-viewport error: ${mvErr instanceof Error ? mvErr.message : String(mvErr)}`);
                 }
             }
+            try {
+                const e2eRuns = await (0, e2e_js_1.runVerifyE2E)(verifyUrl, verificationTier);
+                e2eResult = {
+                    passed: e2eRuns.passed,
+                    failed: e2eRuns.failed,
+                    total: e2eRuns.results.length,
+                    results: e2eRuns.results,
+                };
+            }
+            catch (e2eErr) {
+                console.error(`E2E error: ${e2eErr instanceof Error ? e2eErr.message : String(e2eErr)}`);
+            }
+            if (verificationTier === "pro_plus") {
+                try {
+                    visualDiffResult = await (0, visual_diff_js_1.runVisualDiff)(args.projectDir, verifyUrl, "verify");
+                }
+                catch (visualErr) {
+                    console.error(`Visual diff error: ${visualErr instanceof Error ? visualErr.message : String(visualErr)}`);
+                }
+            }
         }
         catch (serveErr) {
             console.error(`Dev server error: ${serveErr instanceof Error ? serveErr.message : String(serveErr)}`);
@@ -446,28 +478,38 @@ async function run() {
             }
         }
     }
-    // Calculate grade
-    const gradeResult = (0, grade_js_1.calculateGrade)({
-        buildSuccess: buildResult.success,
-        scores,
-        thresholds: adjustedThresholds,
-        failOn: config.fail_on,
-        goldEligible: features.gold_grade && allViewportsOk,
-    });
     const verificationTier = (0, index_js_1.planToVerificationTier)(features.plan);
     const viewportSummary = summarizeViewportIssues(multiViewportScores, adjustedThresholds);
     const failureEvidence = [
         ...buildResult.errors.slice(0, 3).map((error) => `Build: ${error}`),
+        ...(e2eResult
+            ? e2eResult.results
+                .filter((scenario) => !scenario.passed)
+                .slice(0, 2)
+                .map((scenario) => `E2E: ${scenario.name}${scenario.error ? ` - ${scenario.error}` : ""}`)
+            : []),
         ...(viewportSummary.count > 0 && viewportSummary.summary
             ? [`Viewport: ${viewportSummary.summary}`]
             : []),
+        ...(visualDiffResult
+            ? [
+                visualDiffResult.hasBaseline
+                    ? `Visual diff: ${visualDiffResult.diffPercentage}% (${visualDiffResult.verdict})`
+                    : "Visual diff: baseline seeded",
+            ]
+            : []),
     ];
     const verificationReport = (0, index_js_1.buildVerificationReport)({
         buildSuccess: buildResult.success,
         buildErrors: buildResult.errors,
+        e2ePassed: e2eResult?.passed,
+        e2eTotal: e2eResult?.total,
         viewportIssues: multiViewportScores ? viewportSummary.count : undefined,
         multiViewportPassed: multiViewportScores ? allViewportsOk : undefined,
         multiViewportSummary: multiViewportScores ? viewportSummary.summary : undefined,
+        visualDiffVerdict: visualDiffResult?.verdict,
+        visualDiffPercentage: visualDiffResult?.diffPercentage,
+        hasVisualBaseline: visualDiffResult?.hasBaseline,
         lighthouseScores: scores,
         failureEvidence,
     }, {
@@ -475,20 +517,28 @@ async function run() {
         thresholds: adjustedThresholds,
     });
     const verificationView = (0, index_js_1.getTierVerificationView)(verificationReport);
+    const unifiedGrade = verificationReport.grade;
+    const exitCode = config.fail_on === "unverified"
+        ? 0
+        : (0, grade_js_1.isWorseOrEqual)(unifiedGrade, config.fail_on)
+            ? 1
+            : 0;
     // Build result object
     const resultObj = {
-        grade: gradeResult.grade.charAt(0).toUpperCase() + gradeResult.grade.slice(1), // Capitalize
+        grade: unifiedGrade.charAt(0).toUpperCase() + unifiedGrade.slice(1),
         timestamp: new Date().toISOString(),
         build: {
             success: buildResult.success,
             durationMs: buildResult.durationMs,
             errors: buildResult.errors,
         },
+        e2e: e2eResult,
         lighthouse: lighthouseResult,
+        visualDiff: visualDiffResult,
         thresholds: adjustedThresholds,
         ciMode: config.ciMode,
         framework: detected.framework,
-        exitCode: gradeResult.exitCode,
+        exitCode,
         config_fail_on: config.fail_on,
         _plan: features.plan,
         verification: {
@@ -524,7 +574,7 @@ async function run() {
     if (inGitHubActions && process.env.GITHUB_OUTPUT) {
         fs.appendFileSync(process.env.GITHUB_OUTPUT, `grade=${resultObj.grade}\n`);
     }
-    exitGracefully(gradeResult.exitCode);
+    exitGracefully(exitCode);
 }
 run().catch((err) => {
     console.error(`Fatal error: ${err instanceof Error ? err.message : String(err)}`);

package/dist/e2e.d.ts

@@ -0,0 +1,29 @@
+import type { VerificationTier } from "./verification-core/types.js";
+export interface E2EStep {
+    type: "click" | "fill" | "check_visible" | "wait" | "scroll" | "clear_fill";
+    selector?: string;
+    value?: string;
+    duration?: number;
+    description: string;
+}
+export interface E2EScenario {
+    name: string;
+    steps: E2EStep[];
+}
+export interface E2EStepResult {
+    description: string;
+    passed: boolean;
+    error?: string;
+}
+export interface E2EScenarioResult {
+    name: string;
+    passed: boolean;
+    steps: E2EStepResult[];
+    error?: string;
+}
+export declare function runVerifyE2E(url: string, tier: VerificationTier): Promise<{
+    scenarios: E2EScenario[];
+    results: E2EScenarioResult[];
+    passed: number;
+    failed: number;
+}>;

package/dist/e2e.js

@@ -0,0 +1,304 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runVerifyE2E = runVerifyE2E;
+const puppeteer_1 = __importDefault(require("puppeteer"));
+function normalize(value) {
+    return value.toLowerCase().replace(/\s+/g, " ").trim();
+}
+function pickSelector(candidates, patterns) {
+    for (const pattern of patterns) {
+        const match = candidates.find((candidate) => pattern.test(normalize(candidate)));
+        if (match)
+            return match;
+    }
+    return undefined;
+}
+function getScenarioLimit(tier) {
+    switch (tier) {
+        case "pro":
+            return 4;
+        case "pro_plus":
+            return 5;
+        default:
+            return 2;
+    }
+}
+function getVisibleAnchor(selectors) {
+    return pickSelector(selectors, [/^main$/, /^form$/, /^section$/, /^h1$/, /^h2$/, /^button/, /^a\[href/]) || "body";
+}
+function getClickTarget(selectors) {
+    return pickSelector(selectors, [
+        /^button\[type=['"]submit['"]\]/,
+        /^input\[type=['"]submit['"]\]/,
+        /^button\[aria-label.*(submit|continue|login|sign in|save|start|search|next)/,
+        /^input\[type=['"]checkbox['"]\]/,
+        /^\[role=['"]checkbox['"]\]$/,
+        /^a\[href=['"]\//,
+        /^button/,
+        /^\[role=['"]button['"]\]$/,
+    ]);
+}
+function getFillTarget(selectors) {
+    return pickSelector(selectors, [
+        /^input\[type=['"]email['"]\]/,
+        /^input\[type=['"]text['"]\]/,
+        /^input\[name.*(email|query|search|name)/,
+        /^input\[placeholder.*(email|search|name|message|title)/,
+        /^textarea$/,
+        /^input/,
+    ]);
+}
+function getFeedbackTarget(selectors) {
+    return pickSelector(selectors, [
+        /^\[role=['"]alert['"]\]$/,
+        /^\[role=['"]status['"]\]$/,
+        /^\[aria-live=['"](polite|assertive)['"]\]$/,
+        /^\[data-testid.*(error|success|toast|alert|notice|result)/,
+        /^\.(error|alert|toast|notice|success|status)/,
+    ]);
+}
+function getValidationProbeSelector(feedbackTarget) {
+    return (feedbackTarget ||
+        "[role='alert'], [role='status'], [aria-live='polite'], [aria-live='assertive'], [data-testid*='error'], [data-testid*='success']");
+}
+function buildVerifyScenarios(snapshot, tier) {
+    const selectors = [...snapshot.selectors, ...snapshot.structures];
+    const visibleAnchor = getVisibleAnchor(selectors);
+    const fillTarget = getFillTarget(selectors);
+    const clickTarget = getClickTarget(selectors);
+    const feedbackTarget = getFeedbackTarget(selectors);
+    const localLinkTarget = pickSelector(selectors, [/^a\[href=['"]\//]);
+    const likelyFormSurface = selectors.some((selector) => /^form$/.test(normalize(selector))) ||
+        selectors.some((selector) => /^input|^textarea/.test(normalize(selector)));
+    const scenarios = [
+        {
+            name: "Initial render",
+            steps: [
+                { type: "wait", duration: 1200, description: "Wait for hydration" },
+                { type: "check_visible", selector: "body", description: "Body should render" },
+                { type: "check_visible", selector: visibleAnchor, description: "Core UI should stay visible" },
+            ],
+        },
+    ];
+    if (fillTarget && likelyFormSurface) {
+        const formScenario = {
+            name: "Primary form interaction",
+            steps: [
+                { type: "check_visible", selector: fillTarget, description: "Input surface should be visible" },
+                { type: "clear_fill", selector: fillTarget, value: "laxy verify", description: "Fill a core input field" },
+            ],
+        };
+        if (clickTarget) {
+            formScenario.steps.push({ type: "click", selector: clickTarget, description: "Trigger the primary CTA" }, { type: "wait", duration: 800, description: "Wait for UI response" }, { type: "check_visible", selector: feedbackTarget || visibleAnchor, description: "Feedback or surface should remain visible" });
+        }
+        scenarios.push(formScenario);
+    }
+    else if (clickTarget) {
+        scenarios.push({
+            name: "Primary CTA interaction",
+            steps: [
+                { type: "check_visible", selector: clickTarget, description: "CTA should be visible" },
+                { type: "click", selector: clickTarget, description: "Trigger the primary CTA" },
+                { type: "wait", duration: 800, description: "Wait for UI response" },
+                { type: "check_visible", selector: feedbackTarget || visibleAnchor, description: "Core surface should stay visible" },
+            ],
+        });
+    }
+    if (tier !== "free" && fillTarget && clickTarget) {
+        scenarios.push({
+            name: "Validation feedback",
+            steps: [
+                { type: "clear_fill", selector: fillTarget, value: "", description: "Clear the required input" },
+                { type: "click", selector: clickTarget, description: "Try the CTA without valid input" },
+                { type: "wait", duration: 700, description: "Wait for validation" },
+                { type: "check_visible", selector: getValidationProbeSelector(feedbackTarget), description: "Validation feedback should appear" },
+            ],
+        });
+    }
+    if (tier !== "free" && localLinkTarget) {
+        scenarios.push({
+            name: "Internal navigation",
+            steps: [
+                { type: "check_visible", selector: localLinkTarget, description: "Internal link should be visible" },
+                { type: "click", selector: localLinkTarget, description: "Navigate using an internal link" },
+                { type: "wait", duration: 1000, description: "Wait for navigation" },
+                { type: "check_visible", selector: "body", description: "Destination page should render" },
+            ],
+        });
+    }
+    if (tier === "pro_plus" && clickTarget && fillTarget && clickTarget !== fillTarget) {
+        scenarios.push({
+            name: "Repeated interaction stability",
+            steps: [
+                { type: "check_visible", selector: fillTarget, description: "Input surface should still exist" },
+                { type: "clear_fill", selector: fillTarget, value: "release confidence", description: "Repeat the core input" },
+                { type: "click", selector: clickTarget, description: "Trigger the CTA again" },
+                { type: "wait", duration: 800, description: "Wait for repeated interaction response" },
+                { type: "check_visible", selector: feedbackTarget || visibleAnchor, description: "Surface should still hold after repeat" },
+            ],
+        });
+    }
+    scenarios.push({
+        name: "Scroll stability",
+        steps: [
+            { type: "check_visible", selector: visibleAnchor, description: "Initial content should render" },
+            { type: "scroll", selector: "body", description: "Page should scroll" },
+            { type: "wait", duration: 500, description: "Wait after scrolling" },
+            { type: "check_visible", selector: "body", description: "Page should remain stable after scroll" },
+        ],
+    });
+    return scenarios.slice(0, getScenarioLimit(tier));
+}
+async function captureDomSnapshot(url) {
+    const browser = await puppeteer_1.default.launch({ headless: true, args: ["--no-sandbox", "--disable-setuid-sandbox"] });
+    try {
+        const page = await browser.newPage();
+        await page.setViewport({ width: 1280, height: 720 });
+        await page.goto(url, { waitUntil: "networkidle2", timeout: 20000 });
+        await page.waitForSelector("body", { timeout: 5000 });
+        const snapshot = await page.evaluate(() => {
+            const selectors = [];
+            const structures = [];
+            const nodes = Array.from(document.querySelectorAll("*")).slice(0, 250);
+            for (const node of nodes) {
+                const tag = node.tagName.toLowerCase();
+                const role = node.getAttribute("role");
+                const type = node.getAttribute("type");
+                const name = node.getAttribute("name");
+                const placeholder = node.getAttribute("placeholder");
+                const href = node.getAttribute("href");
+                const ariaLabel = node.getAttribute("aria-label");
+                const dataTestId = node.getAttribute("data-testid");
+                const ariaLive = node.getAttribute("aria-live");
+                if (["main", "form", "section", "header", "nav", "footer", "h1", "h2"].includes(tag)) {
+                    structures.push(tag);
+                }
+                if (tag === "button")
+                    selectors.push("button");
+                if (role === "button")
+                    selectors.push("[role='button']");
+                if (type === "submit")
+                    selectors.push(`${tag}[type='submit']`);
+                if (type === "checkbox")
+                    selectors.push(`${tag}[type='checkbox']`);
+                if (tag === "input" || tag === "textarea")
+                    selectors.push(tag);
+                if (type)
+                    selectors.push(`${tag}[type='${type}']`);
+                if (name)
+                    selectors.push(`${tag}[name='${name}']`);
+                if (placeholder)
+                    selectors.push(`${tag}[placeholder='${placeholder}']`);
+                if (href && href.startsWith("/"))
+                    selectors.push(`a[href='${href}']`);
+                if (ariaLabel)
+                    selectors.push(`${tag}[aria-label='${ariaLabel}']`);
+                if (role === "alert" || role === "status")
+                    selectors.push(`[role='${role}']`);
+                if (ariaLive)
+                    selectors.push(`[aria-live='${ariaLive}']`);
+                if (dataTestId)
+                    selectors.push(`[data-testid='${dataTestId}']`);
+            }
+            return {
+                selectors: Array.from(new Set(selectors)),
+                structures: Array.from(new Set(structures)),
+            };
+        });
+        return snapshot;
+    }
+    finally {
+        await browser.close();
+    }
+}
+async function executeScenario(url, scenario) {
+    const browser = await puppeteer_1.default.launch({ headless: true, args: ["--no-sandbox", "--disable-setuid-sandbox"] });
+    const stepResults = [];
+    try {
+        const page = await browser.newPage();
+        await page.setViewport({ width: 1280, height: 720 });
+        await page.goto(url, { waitUntil: "networkidle2", timeout: 20000 });
+        await page.waitForSelector("body", { timeout: 5000 });
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        for (const step of scenario.steps) {
+            const result = { description: step.description, passed: false };
+            try {
+                switch (step.type) {
+                    case "click":
+                        if (!step.selector)
+                            throw new Error("Missing selector");
+                        await page.waitForSelector(step.selector, { visible: true, timeout: 8000 });
+                        await page.click(step.selector);
+                        break;
+                    case "fill":
+                    case "clear_fill":
+                        if (!step.selector)
+                            throw new Error("Missing selector");
+                        await page.waitForSelector(step.selector, { visible: true, timeout: 8000 });
+                        await page.click(step.selector, { clickCount: 3 });
+                        await page.keyboard.press("Backspace");
+                        if (step.value) {
+                            await page.type(step.selector, step.value);
+                        }
+                        break;
+                    case "check_visible":
+                        if (!step.selector)
+                            throw new Error("Missing selector");
+                        await page.waitForSelector(step.selector, { visible: true, timeout: 8000 });
+                        break;
+                    case "wait":
+                        await new Promise((resolve) => setTimeout(resolve, step.duration ?? 1000));
+                        break;
+                    case "scroll":
+                        if (step.selector && step.selector !== "body") {
+                            await page.$eval(step.selector, (element) => {
+                                element.scrollIntoView({ behavior: "instant", block: "center" });
+                            });
+                        }
+                        else {
+                            await page.evaluate(() => window.scrollBy(0, 300));
+                        }
+                        break;
+                }
+                result.passed = true;
+            }
+            catch (error) {
+                result.passed = false;
+                result.error = error instanceof Error ? error.message.slice(0, 200) : String(error).slice(0, 200);
+            }
+            stepResults.push(result);
+            if (!result.passed)
+                break;
+        }
+        return {
+            name: scenario.name,
+            passed: stepResults.every((step) => step.passed),
+            steps: stepResults,
+        };
+    }
+    catch (error) {
+        return {
+            name: scenario.name,
+            passed: false,
+            steps: stepResults,
+            error: error instanceof Error ? error.message.slice(0, 200) : String(error).slice(0, 200),
+        };
+    }
+    finally {
+        await browser.close();
+    }
+}
+async function runVerifyE2E(url, tier) {
+    const snapshot = await captureDomSnapshot(url);
+    const scenarios = buildVerifyScenarios(snapshot, tier);
+    const results = [];
+    for (const scenario of scenarios) {
+        results.push(await executeScenario(url, scenario));
+    }
+    const passed = results.filter((result) => result.passed).length;
+    const failed = results.length - passed;
+    return { scenarios, results, passed, failed };
+}

package/dist/visual-diff.d.ts

@@ -0,0 +1,11 @@
+export interface VisualDiffResult {
+    hasBaseline: boolean;
+    diffPercentage: number;
+    verdict: "pass" | "warn" | "rollback";
+    diffPixels: number;
+    totalPixels: number;
+    baselinePath: string;
+    currentPath: string;
+    diffPath: string;
+}
+export declare function runVisualDiff(projectDir: string, url: string, label?: string): Promise<VisualDiffResult>;

package/dist/visual-diff.js

@@ -0,0 +1,126 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runVisualDiff = runVisualDiff;
+const fs = __importStar(require("node:fs"));
+const path = __importStar(require("node:path"));
+const puppeteer_1 = __importDefault(require("puppeteer"));
+const pngjs_1 = require("pngjs");
+const pixelmatch_1 = __importDefault(require("pixelmatch"));
+function ensureDir(dir) {
+    fs.mkdirSync(dir, { recursive: true });
+}
+async function captureScreenshot(url, outputPath) {
+    const browser = await puppeteer_1.default.launch({ headless: true, args: ["--no-sandbox", "--disable-setuid-sandbox"] });
+    try {
+        const page = await browser.newPage();
+        await page.setViewport({ width: 1440, height: 960 });
+        await page.goto(url, { waitUntil: "networkidle2", timeout: 20000 });
+        await page.waitForSelector("body", { timeout: 5000 });
+        await page.screenshot({ path: outputPath, fullPage: true, type: "png" });
+    }
+    finally {
+        await browser.close();
+    }
+}
+function compareImages(baselinePath, currentPath, diffOutputPath) {
+    const baselinePng = pngjs_1.PNG.sync.read(fs.readFileSync(baselinePath));
+    const currentPng = pngjs_1.PNG.sync.read(fs.readFileSync(currentPath));
+    const width = Math.min(baselinePng.width, currentPng.width);
+    const height = Math.min(baselinePng.height, currentPng.height);
+    const cropData = (png, w, h) => {
+        if (png.width === w && png.height === h)
+            return png.data;
+        const cropped = Buffer.alloc(w * h * 4);
+        for (let y = 0; y < h; y++) {
+            png.data.copy(cropped, y * w * 4, y * png.width * 4, y * png.width * 4 + w * 4);
+        }
+        return cropped;
+    };
+    const baseData = cropData(baselinePng, width, height);
+    const currData = cropData(currentPng, width, height);
+    const diff = new pngjs_1.PNG({ width, height });
+    const diffPixels = (0, pixelmatch_1.default)(baseData, currData, diff.data, width, height, { threshold: 0.1 });
+    ensureDir(path.dirname(diffOutputPath));
+    fs.writeFileSync(diffOutputPath, pngjs_1.PNG.sync.write(diff));
+    const totalPixels = width * height;
+    const diffPercentage = Math.round((diffPixels / totalPixels) * 10000) / 100;
+    return { diffPixels, totalPixels, diffPercentage };
+}
+async function runVisualDiff(projectDir, url, label = "current") {
+    const dir = path.join(projectDir, ".laxy-verify", "visual");
+    ensureDir(dir);
+    const baselinePath = path.join(dir, "baseline.png");
+    const currentPath = path.join(dir, `${label}.png`);
+    const diffPath = path.join(dir, `${label}.diff.png`);
+    await captureScreenshot(url, currentPath);
+    if (!fs.existsSync(baselinePath)) {
+        fs.copyFileSync(currentPath, baselinePath);
+        return {
+            hasBaseline: false,
+            diffPercentage: 0,
+            verdict: "pass",
+            diffPixels: 0,
+            totalPixels: 0,
+            baselinePath,
+            currentPath,
+            diffPath: "",
+        };
+    }
+    const comparison = compareImages(baselinePath, currentPath, diffPath);
+    let verdict = "pass";
+    if (comparison.diffPercentage >= 60) {
+        verdict = "rollback";
+    }
+    else if (comparison.diffPercentage >= 30) {
+        verdict = "warn";
+    }
+    if (verdict === "pass") {
+        fs.copyFileSync(currentPath, baselinePath);
+    }
+    return {
+        hasBaseline: true,
+        diffPercentage: comparison.diffPercentage,
+        verdict,
+        diffPixels: comparison.diffPixels,
+        totalPixels: comparison.totalPixels,
+        baselinePath,
+        currentPath,
+        diffPath,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "laxy-verify",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "Frontend quality gate: build + Lighthouse verification",
   "type": "commonjs",
   "bin": {
@@ -18,6 +18,9 @@
   "dependencies": {
     "@lhci/cli": "^0.14.0",
     "js-yaml": "^4.1.0",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
+    "puppeteer": "^24.40.0",
     "tree-kill": "^1.2.2"
   },
   "devDependencies": {