@vizzly-testing/cli 0.35.3-beta.2 → 0.35.3-beta.4

package/dist/screenshot-server/core.js

@@ -4,6 +4,8 @@
  * No I/O, no side effects - just data transformations.
  */
 
+import { getScreenshotOptionsPayload } from '../utils/screenshot-options.js';
+
 // ============================================================================
 // Request Validation
 // ============================================================================
@@ -149,9 +151,11 @@ export function buildServerStoppedMessage() {
  * @returns {{ name: string, image: string, properties?: Object }}
  */
 export function extractScreenshotData(body) {
-  return {
+  let screenshotData = {
     name: body.name,
     image: body.image,
     properties: body.properties
   };
+  Object.assign(screenshotData, getScreenshotOptionsPayload(body));
+  return screenshotData;
 }

package/dist/sdk/index.js

@@ -19,7 +19,7 @@ import { createUploader } from '../uploader/index.js';
 import { loadConfig } from '../utils/config-loader.js';
 import { resolveImageBuffer } from '../utils/file-helpers.js';
 import * as output from '../utils/output.js';
-import { normalizeScreenshotOptions } from '../utils/screenshot-options.js';
+import { getScreenshotOptionsPayload, normalizeScreenshotOptions } from '../utils/screenshot-options.js';
 
 /**
  * Create a new Vizzly instance with custom configuration
@@ -314,6 +314,7 @@ export class VizzlySDK extends EventEmitter {
       type: 'base64',
       properties: normalizedOptions.properties
     };
+    Object.assign(screenshotData, getScreenshotOptionsPayload(normalizedOptions));
     if (normalizedOptions.warnings.length > 0) {
       screenshotData.warnings = normalizedOptions.warnings;
     }

package/dist/server/handlers/api-handler.js

@@ -4,6 +4,7 @@ import { resolve } from 'node:path';
 import { uploadScreenshot as defaultUploadScreenshot } from '../../api/index.js';
 import { detectImageInputType } from '../../utils/image-input-detector.js';
 import * as output from '../../utils/output.js';
+import { normalizeScreenshotOptions } from '../../utils/screenshot-options.js';
 
 /**
  * API Handler - Non-blocking screenshot upload
@@ -47,8 +48,23 @@ export const createApiHandler = (client, {
   let vizzlyDisabled = false;
   let screenshotCount = 0;
   let uploadPromises = [];
-  const handleScreenshot = async (buildId, name, image, properties = {}, type, warnings = []) => {
+  const handleScreenshot = async (buildId, name, image, properties = {}, type, warnings = [], screenshotOptions = {}) => {
     let handlerStart = Date.now();
+    let normalizedOptions = normalizeScreenshotOptions({
+      ...screenshotOptions,
+      properties
+    });
+    properties = normalizedOptions.properties;
+    screenshotOptions = {
+      ...screenshotOptions,
+      threshold: normalizedOptions.threshold,
+      minClusterSize: normalizedOptions.minClusterSize,
+      fullPage: normalizedOptions.fullPage,
+      captureMode: normalizedOptions.captureMode,
+      deviceScaleFactor: normalizedOptions.deviceScaleFactor,
+      selector: normalizedOptions.selector
+    };
+    warnings = [...(warnings || []), ...normalizedOptions.warnings];
     output.debug('upload', `${name} received`, {
       buildId: buildId?.slice(0, 8)
     });
@@ -131,7 +147,7 @@ export const createApiHandler = (client, {
     let uploadStart = Date.now();
 
     // Fire upload in background - DON'T AWAIT!
-    let uploadPromise = uploadScreenshot(client, buildId, name, imageBuffer, properties ?? {}).then(result => {
+    let uploadPromise = uploadScreenshot(client, buildId, name, imageBuffer, properties ?? {}, false, screenshotOptions).then(result => {
       let duration = Date.now() - uploadStart;
       if (!result.skipped) {
         output.debug('upload', `${name} completed`, {

package/dist/server/handlers/tdd-handler.js

@@ -5,6 +5,7 @@ import { getDimensionsSync as defaultGetDimensionsSync } from '@vizzly-testing/h
 import { TddService as DefaultTddService } from '../../tdd/tdd-service.js';
 import { detectImageInputType as defaultDetectImageInputType } from '../../utils/image-input-detector.js';
 import * as defaultOutput from '../../utils/output.js';
+import { normalizeScreenshotOptions } from '../../utils/screenshot-options.js';
 import { safePath as defaultSafePath, sanitizeScreenshotName as defaultSanitizeScreenshotName, validateScreenshotProperties as defaultValidateScreenshotProperties } from '../../utils/security.js';
 
 /**
@@ -305,7 +306,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       output.debug('tdd', `baseline: ${baseline.buildName}`);
     }
   };
-  const handleScreenshot = async (_buildId, name, image, properties = {}, type, warnings = []) => {
+  const handleScreenshot = async (_buildId, name, image, properties = {}, type, warnings = [], screenshotOptions = {}) => {
     let handlerStart = Date.now();
     output.debug('tdd', `${name} received`);
 
@@ -324,13 +325,18 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       };
     }
 
-    // Unwrap double-nested properties if needed (client SDK wraps options in properties field)
+    // Preserve the old nested wrapper for older clients, then filter user
+    // properties before local comparison/report serialization.
     let unwrappedProperties = unwrapProperties(properties);
+    let normalizedProperties = normalizeScreenshotOptions({
+      properties: unwrappedProperties
+    });
+    warnings = [...(warnings || []), ...normalizedProperties.warnings];
 
     // Validate and sanitize properties
     let validatedProperties;
     try {
-      validatedProperties = validateScreenshotProperties(unwrappedProperties);
+      validatedProperties = validateScreenshotProperties(normalizedProperties.properties);
     } catch (error) {
       return {
         statusCode: 400,
@@ -419,7 +425,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
 
     // Use the sanitized name as-is (no modification with browser/viewport)
     // Baseline matching uses signature logic (name + viewport_width + browser)
-    const comparison = await tddService.compareScreenshot(sanitizedName, imageBuffer, extractedProperties);
+    const comparison = await tddService.compareScreenshot(sanitizedName, imageBuffer, extractedProperties, screenshotOptions);
 
     // Comparison tracked by tdd.js event handler
 
@@ -450,9 +456,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       warnings,
       originalName: name,
       timestamp: Date.now(),
-      // Boolean hints so UI can show toggle buttons without fetching heavy data
-      hasDiffClusters: comparison.diffClusters?.length > 0,
-      hasConfirmedRegions: comparison.confirmedRegions?.length > 0
+      hasDiffClusters: comparison.diffClusters?.length > 0
     };
 
     // Update lightweight comparison in report-data.json (triggers SSE broadcast)
@@ -462,10 +466,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     updateComparisonDetails(comparison.id, {
       diffClusters: comparison.diffClusters,
       intensityStats: comparison.intensityStats,
-      boundingBox: comparison.boundingBox,
-      regionAnalysis: comparison.regionAnalysis,
-      hotspotAnalysis: comparison.hotspotAnalysis,
-      confirmedRegions: comparison.confirmedRegions
+      boundingBox: comparison.boundingBox
     });
 
     // Log screenshot event for menubar

package/dist/server/routers/dashboard.js

@@ -10,6 +10,10 @@ import { sendError, sendHtml, sendSuccess } from '../middleware/response.js';
 
 // SPA routes that should serve the dashboard HTML
 const SPA_ROUTES = ['/', '/stats', '/settings', '/projects', '/builds'];
+let COMPARISON_DETAIL_FIELDS = new Set(['boundingBox', 'diffClusters', 'intensityStats']);
+function presentComparisonDetails(details = {}) {
+  return Object.fromEntries(Object.entries(details).filter(([field]) => COMPARISON_DETAIL_FIELDS.has(field)));
+}
 
 /**
  * Create dashboard router
@@ -99,7 +103,7 @@ export function createDashboardRouter(context) {
             if (heavy) {
               comparison = {
                 ...comparison,
-                ...heavy
+                ...presentComparisonDetails(heavy)
               };
             }
           } catch (error) {

package/dist/server/routers/screenshot.js

@@ -4,6 +4,7 @@
  */
 
 import * as output from '../../utils/output.js';
+import { normalizeScreenshotOptions } from '../../utils/screenshot-options.js';
 import { parseJsonBody } from '../middleware/json-parser.js';
 import { sendError, sendJson } from '../middleware/response.js';
 
@@ -33,7 +34,13 @@ export function createScreenshotRouter({
           properties,
           image,
           type,
-          warnings
+          warnings,
+          threshold,
+          minClusterSize,
+          fullPage,
+          captureMode,
+          deviceScaleFactor,
+          selector
         } = body;
         if (!name || !image) {
           sendError(res, 400, 'name and image are required');
@@ -42,7 +49,23 @@ export function createScreenshotRouter({
 
         // Use buildId from request body, or fall back to server's buildId
         const effectiveBuildId = buildId || defaultBuildId;
-        const result = await screenshotHandler.handleScreenshot(effectiveBuildId, name, image, properties, type, warnings);
+        const normalizedOptions = normalizeScreenshotOptions({
+          properties,
+          threshold,
+          minClusterSize,
+          fullPage,
+          captureMode,
+          deviceScaleFactor,
+          selector
+        });
+        const result = await screenshotHandler.handleScreenshot(effectiveBuildId, name, image, normalizedOptions.properties, type, [...(warnings || []), ...normalizedOptions.warnings], {
+          threshold: normalizedOptions.threshold,
+          minClusterSize: normalizedOptions.minClusterSize,
+          fullPage: normalizedOptions.fullPage,
+          captureMode: normalizedOptions.captureMode,
+          deviceScaleFactor: normalizedOptions.deviceScaleFactor,
+          selector: normalizedOptions.selector
+        });
         sendJson(res, result.statusCode, result.body);
         return true;
       } catch (error) {

package/dist/tdd/runtime-context.js

@@ -9,7 +9,6 @@ export function buildTddDependencyOps(deps = {}, defaults = {}) {
     colors = defaults.colors,
     validatePathSecurity = defaults.validatePathSecurity,
     initializeDirectories = defaults.initializeDirectories,
-    calculateHotspotCoverage = defaults.calculateHotspotCoverage,
     fs = {},
     api = {},
     metadata = {},
@@ -51,7 +50,6 @@ export function buildTddDependencyOps(deps = {}, defaults = {}) {
     colors,
     validatePathSecurity,
     initializeDirectories,
-    calculateHotspotCoverage,
     ...fsOps,
     ...apiOps,
     ...metadataOps,

package/dist/tdd/services/comparison-service.js

@@ -5,8 +5,6 @@
  */
 
 import { analyze } from '@vizzly-testing/honeydiff';
-import { calculateHotspotCoverage } from '../core/hotspot-coverage.js';
-import { calculateRegionCoverage, shouldAutoApproveFromRegions } from '../core/region-coverage.js';
 import { generateComparisonId } from '../core/signature.js';
 
 /**
@@ -149,8 +147,6 @@ export function buildNewComparison(params) {
  * @param {number} params.threshold - Effective threshold used
  * @param {number} params.minClusterSize - Effective minClusterSize used
  * @param {Object} params.honeydiffResult - Result from honeydiff
- * @param {Object} params.hotspotAnalysis - Hotspot data for this screenshot (optional)
- * @param {Object} params.regionData - User-defined region data { confirmed: [], candidates: [] } (optional)
  * @returns {Object} Comparison result
  */
 export function buildFailedComparison(params) {
@@ -163,49 +159,13 @@ export function buildFailedComparison(params) {
     properties,
     threshold,
     minClusterSize,
-    honeydiffResult,
-    hotspotAnalysis,
-    regionData
+    honeydiffResult
   } = params;
   let diffClusters = honeydiffResult.diffClusters || [];
-  let ssimScore = honeydiffResult.perceptualScore ?? honeydiffResult.ssimScore ?? honeydiffResult.ssim_score ?? null;
-  let isFiltered = false;
-  let filterReason = 'pixel-diff';
-
-  // Region analysis (user-confirmed 2D boxes) - check FIRST (takes priority)
-  let regionCoverage = null;
-  let isRegionFiltered = false;
-  let confirmedRegions = regionData?.confirmed || [];
-  if (confirmedRegions.length > 0 && diffClusters.length > 0) {
-    regionCoverage = calculateRegionCoverage(diffClusters, confirmedRegions);
-    if (shouldAutoApproveFromRegions(confirmedRegions, regionCoverage, {
-      ssimScore
-    })) {
-      isRegionFiltered = true;
-      isFiltered = true;
-      filterReason = 'region-filtered';
-    }
-  }
-
-  // Hotspot analysis (1D Y-bands from historical data) - check SECOND
-  let hotspotCoverage = null;
-  let isHotspotFiltered = false;
-  if (!isFiltered && hotspotAnalysis && diffClusters.length > 0) {
-    hotspotCoverage = calculateHotspotCoverage(diffClusters, hotspotAnalysis);
-
-    // Check if diff should be filtered as hotspot noise
-    // (cloud uses confidence_score >= 70 which is >0.7 when normalized)
-    let isHighConfidence = hotspotAnalysis.confidence === 'high' || hotspotAnalysis.confidence_score !== undefined && hotspotAnalysis.confidence_score >= 70;
-    if (isHighConfidence && hotspotCoverage.coverage >= 0.8) {
-      isHotspotFiltered = true;
-      isFiltered = true;
-      filterReason = 'hotspot-filtered';
-    }
-  }
   return {
     id: generateComparisonId(signature),
     name,
-    status: isFiltered ? 'passed' : 'failed',
+    status: 'failed',
     baseline: baselinePath,
     current: currentPath,
     diff: diffPath,
@@ -215,38 +175,14 @@ export function buildFailedComparison(params) {
     minClusterSize,
     diffPercentage: honeydiffResult.diffPercentage,
     diffCount: honeydiffResult.diffPixels,
-    reason: filterReason,
+    reason: 'pixel-diff',
     totalPixels: honeydiffResult.totalPixels,
     aaPixelsIgnored: honeydiffResult.aaPixelsIgnored,
     aaPercentage: honeydiffResult.aaPercentage,
     boundingBox: honeydiffResult.boundingBox,
     heightDiff: honeydiffResult.heightDiff,
     intensityStats: honeydiffResult.intensityStats,
-    diffClusters,
-    // User-defined region analysis (2D boxes)
-    regionAnalysis: regionCoverage ? {
-      coverage: regionCoverage.coverage,
-      clustersInRegions: regionCoverage.clustersInRegions,
-      totalClusters: regionCoverage.totalClusters,
-      pixelsInRegions: regionCoverage.pixelsInRegions,
-      totalPixels: regionCoverage.totalPixels,
-      matchedRegions: regionCoverage.matchedRegions,
-      confirmedCount: confirmedRegions.length,
-      ssimScore,
-      isFiltered: isRegionFiltered
-    } : null,
-    // Include confirmed regions for visualization in UI
-    confirmedRegions: confirmedRegions.length > 0 ? confirmedRegions : null,
-    // Historical hotspot analysis (1D Y-bands)
-    hotspotAnalysis: hotspotCoverage ? {
-      coverage: hotspotCoverage.coverage,
-      linesInHotspots: hotspotCoverage.linesInHotspots,
-      totalLines: hotspotCoverage.totalLines,
-      confidence: hotspotAnalysis?.confidence,
-      confidenceScore: hotspotAnalysis?.confidence_score,
-      regionCount: hotspotAnalysis?.regions?.length || 0,
-      isFiltered: isHotspotFiltered
-    } : null
+    diffClusters
   };
 }