@vizzly-testing/cli 0.8.0 → 0.9.0

package/dist/types/reporter/src/utils/constants.d.ts

@@ -0,0 +1,37 @@
+export namespace VIEW_MODES {
+    let OVERLAY: string;
+    let TOGGLE: string;
+    let ONION: string;
+    let SIDE_BY_SIDE: string;
+}
+export namespace FILTER_TYPES {
+    let ALL: string;
+    let FAILED: string;
+    let PASSED: string;
+    let NEW: string;
+}
+export namespace SORT_TYPES {
+    let PRIORITY: string;
+    let NAME: string;
+    let TIME: string;
+}
+export namespace CONNECTION_STATUS {
+    let CONNECTING: string;
+    let CONNECTED: string;
+    let DISCONNECTED: string;
+}
+export namespace COMPARISON_STATUS {
+    let PASSED_1: string;
+    export { PASSED_1 as PASSED };
+    let FAILED_1: string;
+    export { FAILED_1 as FAILED };
+    let NEW_1: string;
+    export { NEW_1 as NEW };
+    export let BASELINE_CREATED: string;
+    export let ERROR: string;
+}
+export namespace USER_ACTION {
+    let ACCEPTING: string;
+    let ACCEPTED: string;
+    let REJECTED: string;
+}

package/dist/types/reporter/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/types/reporter/vite.dev.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/types/sdk/index.d.ts

@@ -48,7 +48,7 @@ export function createVizzly(config?: any, options?: {}): Promise<VizzlySDK>;
  * @class
  * @extends {EventEmitter}
  */
-export class VizzlySDK extends EventEmitter<[never]> {
+export class VizzlySDK {
     /**
      * @param {import('../types').VizzlyConfig} config - Configuration
      * @param {import('../utils/logger').Logger} logger - Logger instance
@@ -104,5 +104,4 @@ export { loadConfig } from "../utils/config-loader.js";
 export { createLogger } from "../utils/logger.js";
 export { createUploader } from "../services/uploader.js";
 export { createTDDService } from "../services/tdd-service.js";
-import { EventEmitter } from 'events';
 import { ScreenshotServer } from '../services/screenshot-server.js';

package/dist/types/server/handlers/api-handler.d.ts

@@ -8,7 +8,6 @@ export function createApiHandler(apiService: any): {
             message: string;
             error?: undefined;
             name?: undefined;
-            skipped?: undefined;
         };
     } | {
         statusCode: number;
@@ -19,31 +18,23 @@ export function createApiHandler(apiService: any): {
             count?: undefined;
             message?: undefined;
             name?: undefined;
-            skipped?: undefined;
         };
     } | {
         statusCode: number;
         body: {
             success: boolean;
             name: any;
-            skipped: any;
             count: number;
             disabled?: undefined;
             message?: undefined;
             error?: undefined;
         };
-    } | {
-        statusCode: number;
-        body: {
-            success: boolean;
-            name: any;
-            disabled: boolean;
-            message: string;
-            count?: undefined;
-            error?: undefined;
-            skipped?: undefined;
-        };
     }>;
     getScreenshotCount: () => number;
+    flush: () => Promise<{
+        uploaded: number;
+        failed: number;
+        total: number;
+    }>;
     cleanup: () => void;
 };

package/dist/types/server/handlers/tdd-handler.d.ts

@@ -1,6 +1,5 @@
 export function createTddHandler(config: any, workingDir: any, baselineBuild: any, baselineComparison: any, setBaseline?: boolean): {
     initialize: () => Promise<void>;
-    registerBuild: (buildId: any) => void;
     handleScreenshot: (buildId: any, name: any, image: any, properties?: {}) => Promise<{
         statusCode: number;
         body: {
@@ -81,22 +80,24 @@ export function createTddHandler(config: any, workingDir: any, baselineBuild: an
             message?: undefined;
         };
     }>;
-    getScreenshotCount: (buildId: any) => any;
-    finishBuild: (buildId: any) => Promise<{
-        id: any;
-        name: any;
-        tddMode: boolean;
-        results: {
-            total: number;
-            passed: number;
-            failed: number;
-            new: number;
-            errors: number;
-            comparisons: any[];
-            baseline: any;
-        };
-        url: any;
-        passed: boolean;
+    getResults: () => Promise<{
+        total: number;
+        passed: number;
+        failed: number;
+        new: number;
+        errors: number;
+        comparisons: any[];
+        baseline: any;
+    }>;
+    acceptBaseline: (screenshotName: any) => Promise<any>;
+    acceptAllBaselines: () => Promise<{
+        count: number;
+    }>;
+    resetBaselines: () => Promise<{
+        success: boolean;
+        deletedBaselines: number;
+        deletedCurrents: number;
+        deletedDiffs: number;
     }>;
     cleanup: () => void;
 };

package/dist/types/server/http-server.d.ts

@@ -1,5 +1,6 @@
-export function createHttpServer(port: any, screenshotHandler: any, emitter?: any): {
+export function createHttpServer(port: any, screenshotHandler: any): {
     start: () => Promise<any>;
     stop: () => Promise<any>;
+    finishBuild: (buildId: any) => Promise<any>;
     getServer: () => any;
 };

package/dist/types/services/base-service.d.ts

@@ -7,7 +7,7 @@
  * Base class for all services
  * @extends EventEmitter
  */
-export class BaseService extends EventEmitter<[never]> {
+export class BaseService {
     /**
      * @param {Object} config - Service configuration
      * @param {ServiceOptions} options - Service options
@@ -69,4 +69,3 @@ export type ServiceOptions = {
      */
     signal?: AbortSignal;
 };
-import { EventEmitter } from 'events';

package/dist/types/services/html-report-generator.d.ts

@@ -2,9 +2,9 @@ export class HtmlReportGenerator {
     constructor(workingDir: any, config: any);
     workingDir: any;
     config: any;
-    reportDir: string;
-    reportPath: string;
-    cssPath: string;
+    reportDir: any;
+    reportPath: any;
+    cssPath: any;
     /**
      * Sanitize HTML content to prevent XSS attacks
      * @param {string} text - Text to sanitize

package/dist/types/services/screenshot-server.d.ts

@@ -1,7 +1,7 @@
 export class ScreenshotServer extends BaseService {
     constructor(config: any, logger: any, buildManager: any);
     buildManager: any;
-    server: import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>;
+    server: any;
     onStart(): Promise<any>;
     onStop(): Promise<any>;
     handleRequest(req: any, res: any): Promise<void>;

package/dist/types/services/server-manager.d.ts

@@ -3,11 +3,11 @@ export class ServerManager extends BaseService {
     httpServer: {
         start: () => Promise<any>;
         stop: () => Promise<any>;
+        finishBuild: (buildId: any) => Promise<any>;
         getServer: () => any;
     };
     handler: {
         initialize: () => Promise<void>;
-        registerBuild: (buildId: any) => void;
         handleScreenshot: (buildId: any, name: any, image: any, properties?: {}) => Promise<{
             statusCode: number;
             body: {
@@ -88,22 +88,24 @@ export class ServerManager extends BaseService {
                 message?: undefined;
             };
         }>;
-        getScreenshotCount: (buildId: any) => any;
-        finishBuild: (buildId: any) => Promise<{
-            id: any;
-            name: any;
-            tddMode: boolean;
-            results: {
-                total: number;
-                passed: number;
-                failed: number;
-                new: number;
-                errors: number;
-                comparisons: any[];
-                baseline: any;
-            };
-            url: any;
-            passed: boolean;
+        getResults: () => Promise<{
+            total: number;
+            passed: number;
+            failed: number;
+            new: number;
+            errors: number;
+            comparisons: any[];
+            baseline: any;
+        }>;
+        acceptBaseline: (screenshotName: any) => Promise<any>;
+        acceptAllBaselines: () => Promise<{
+            count: number;
+        }>;
+        resetBaselines: () => Promise<{
+            success: boolean;
+            deletedBaselines: number;
+            deletedCurrents: number;
+            deletedDiffs: number;
         }>;
         cleanup: () => void;
     } | {
@@ -116,7 +118,6 @@ export class ServerManager extends BaseService {
                 message: string;
                 error?: undefined;
                 name?: undefined;
-                skipped?: undefined;
             };
         } | {
             statusCode: number;
@@ -127,45 +128,34 @@ export class ServerManager extends BaseService {
                 count?: undefined;
                 message?: undefined;
                 name?: undefined;
-                skipped?: undefined;
             };
         } | {
             statusCode: number;
             body: {
                 success: boolean;
                 name: any;
-                skipped: any;
                 count: number;
                 disabled?: undefined;
                 message?: undefined;
                 error?: undefined;
             };
-        } | {
-            statusCode: number;
-            body: {
-                success: boolean;
-                name: any;
-                disabled: boolean;
-                message: string;
-                count?: undefined;
-                error?: undefined;
-                skipped?: undefined;
-            };
         }>;
         getScreenshotCount: () => number;
+        flush: () => Promise<{
+            uploaded: number;
+            failed: number;
+            total: number;
+        }>;
         cleanup: () => void;
     };
-    emitter: EventEmitter<[never]>;
     start(buildId?: any, tddMode?: boolean, setBaseline?: boolean): Promise<void>;
     buildId: any;
     tddMode: boolean;
     setBaseline: boolean;
     createApiService(): Promise<import("./api-service.js").ApiService>;
     get server(): {
-        emitter: EventEmitter<[never]>;
         getScreenshotCount: (buildId: any) => any;
-        finishBuild: (buildId: any) => any;
+        finishBuild: (buildId: any) => Promise<any>;
     };
 }
 import { BaseService } from './base-service.js';
-import { EventEmitter } from 'events';

package/dist/types/services/tdd-service.d.ts

@@ -3,7 +3,7 @@
  */
 export function createTDDService(config: any, options?: {}): TddService;
 export class TddService {
-    constructor(config: any, workingDir?: string, setBaseline?: boolean);
+    constructor(config: any, workingDir?: any, setBaseline?: boolean);
     config: any;
     setBaseline: boolean;
     api: ApiService;
@@ -72,5 +72,11 @@ export class TddService {
      * @private
      */
     private updateSingleBaseline;
+    /**
+     * Accept a current screenshot as the new baseline
+     * @param {string} name - Screenshot name to accept
+     * @returns {Object} Result object
+     */
+    acceptBaseline(name: string): any;
 }
 import { ApiService } from '../services/api-service.js';

package/dist/types/services/test-runner.d.ts

@@ -3,7 +3,12 @@ export class TestRunner extends BaseService {
     buildManager: any;
     serverManager: any;
     tddService: any;
-    testProcess: import("child_process").ChildProcess;
+    testProcess: any;
+    /**
+     * Initialize server for daemon mode (no test execution)
+     * @param {Object} options - Options for server initialization
+     */
+    initialize(options: any): Promise<void>;
     run(options: any): Promise<{
         testsPassed: number;
         testsFailed: number;

package/dist/types/utils/build-history.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Archive a build to history directory
+ * @param {string} workingDir - Working directory
+ * @param {string} buildId - Build ID to archive
+ * @param {Array} builds - Build data
+ * @param {Array} comparisons - Comparison data
+ * @param {Object} summary - Summary stats
+ * @param {number} maxHistory - Maximum number of builds to keep (default: 3)
+ */
+export function archiveBuild(workingDir: string, buildId: string, builds: any[], comparisons: any[], summary: any, maxHistory?: number): void;
+/**
+ * Get list of archived builds
+ * @param {string} workingDir - Working directory
+ * @returns {Array} Array of build metadata
+ */
+export function getArchivedBuilds(workingDir: string): any[];

package/dist/types/utils/config-loader.d.ts

@@ -22,4 +22,4 @@ export function loadConfig(configPath?: any, cliOverrides?: {}): Promise<{
     apiKey: string;
     apiUrl: string;
 }>;
-export function getScreenshotPaths(config: any): string[];
+export function getScreenshotPaths(config: any): any[];

package/dist/types/utils/console-ui.d.ts

@@ -11,7 +11,7 @@ export class ConsoleUI {
     };
     json: any;
     verbose: any;
-    spinner: NodeJS.Timeout;
+    spinner: number;
     lastLine: string;
     /**
      * Show a success message

package/dist/types/utils/git.d.ts

@@ -1,7 +1,7 @@
-export function getCommonAncestor(commit1: any, commit2: any, cwd?: string): Promise<string>;
-export function getCurrentCommitSha(cwd?: string): Promise<string>;
-export function getCurrentBranch(cwd?: string): Promise<string>;
-export function getDefaultBranch(cwd?: string): Promise<string>;
+export function getCommonAncestor(commit1: any, commit2: any, cwd?: any): Promise<any>;
+export function getCurrentCommitSha(cwd?: any): Promise<any>;
+export function getCurrentBranch(cwd?: any): Promise<any>;
+export function getDefaultBranch(cwd?: any): Promise<any>;
 export function generateBuildName(): string;
 /**
  * Get the current commit message

package/dist/types/utils/security.d.ts

@@ -2,9 +2,10 @@
  * Sanitizes a screenshot name to prevent path traversal and ensure safe file naming
  * @param {string} name - Original screenshot name
  * @param {number} maxLength - Maximum allowed length (default: 255)
+ * @param {boolean} allowSlashes - Whether to allow forward slashes (for browser version strings)
  * @returns {string} Sanitized screenshot name
  */
-export function sanitizeScreenshotName(name: string, maxLength?: number): string;
+export function sanitizeScreenshotName(name: string, maxLength?: number, allowSlashes?: boolean): string;
 /**
  * Validates that a path stays within the allowed working directory bounds
  * @param {string} targetPath - Path to validate

package/dist/utils/build-history.js

@@ -0,0 +1,103 @@
+import { existsSync, mkdirSync, writeFileSync, readdirSync, rmSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * Archive a build to history directory
+ * @param {string} workingDir - Working directory
+ * @param {string} buildId - Build ID to archive
+ * @param {Array} builds - Build data
+ * @param {Array} comparisons - Comparison data
+ * @param {Object} summary - Summary stats
+ * @param {number} maxHistory - Maximum number of builds to keep (default: 3)
+ */
+export function archiveBuild(workingDir, buildId, builds, comparisons, summary, maxHistory = 3) {
+  let historyDir = join(workingDir, '.vizzly', 'history');
+
+  // Create history directory if it doesn't exist
+  if (!existsSync(historyDir)) {
+    mkdirSync(historyDir, {
+      recursive: true
+    });
+  }
+
+  // Save current build to history
+  let buildDir = join(historyDir, buildId);
+  if (!existsSync(buildDir)) {
+    mkdirSync(buildDir, {
+      recursive: true
+    });
+  }
+  let buildData = {
+    buildId,
+    timestamp: Date.now(),
+    builds,
+    comparisons,
+    summary
+  };
+  writeFileSync(join(buildDir, 'report.json'), JSON.stringify(buildData, null, 2));
+
+  // Clean up old builds (keep last N)
+  cleanupOldBuilds(historyDir, maxHistory);
+}
+
+/**
+ * Get list of archived builds
+ * @param {string} workingDir - Working directory
+ * @returns {Array} Array of build metadata
+ */
+export function getArchivedBuilds(workingDir) {
+  let historyDir = join(workingDir, '.vizzly', 'history');
+  if (!existsSync(historyDir)) {
+    return [];
+  }
+  try {
+    let buildDirs = readdirSync(historyDir, {
+      withFileTypes: true
+    }).filter(dirent => dirent.isDirectory()).map(dirent => dirent.name).sort().reverse(); // Newest first
+
+    return buildDirs.map(buildId => {
+      let reportPath = join(historyDir, buildId, 'report.json');
+      if (existsSync(reportPath)) {
+        try {
+          let data = JSON.parse(require('fs').readFileSync(reportPath, 'utf8'));
+          return {
+            buildId: data.buildId,
+            timestamp: data.timestamp,
+            summary: data.summary
+          };
+        } catch {
+          return null;
+        }
+      }
+      return null;
+    }).filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Remove old builds, keeping only the last N
+ * @private
+ */
+function cleanupOldBuilds(historyDir, maxHistory) {
+  try {
+    let buildDirs = readdirSync(historyDir, {
+      withFileTypes: true
+    }).filter(dirent => dirent.isDirectory()).map(dirent => dirent.name).sort().reverse(); // Newest first
+
+    // Remove builds beyond maxHistory
+    if (buildDirs.length > maxHistory) {
+      let toRemove = buildDirs.slice(maxHistory);
+      toRemove.forEach(buildId => {
+        let buildDir = join(historyDir, buildId);
+        rmSync(buildDir, {
+          recursive: true,
+          force: true
+        });
+      });
+    }
+  } catch {
+    // Ignore cleanup errors
+  }
+}

package/dist/utils/security.js

@@ -11,9 +11,10 @@ const logger = createServiceLogger('SECURITY');
  * Sanitizes a screenshot name to prevent path traversal and ensure safe file naming
  * @param {string} name - Original screenshot name
  * @param {number} maxLength - Maximum allowed length (default: 255)
+ * @param {boolean} allowSlashes - Whether to allow forward slashes (for browser version strings)
  * @returns {string} Sanitized screenshot name
  */
-export function sanitizeScreenshotName(name, maxLength = 255) {
+export function sanitizeScreenshotName(name, maxLength = 255, allowSlashes = false) {
   if (typeof name !== 'string' || name.length === 0) {
     throw new Error('Screenshot name must be a non-empty string');
   }
@@ -22,7 +23,12 @@ export function sanitizeScreenshotName(name, maxLength = 255) {
   }
 
   // Block directory traversal patterns
-  if (name.includes('..') || name.includes('/') || name.includes('\\')) {
+  if (name.includes('..') || name.includes('\\')) {
+    throw new Error('Screenshot name contains invalid path characters');
+  }
+
+  // Block forward slashes unless explicitly allowed (e.g., for browser version strings)
+  if (!allowSlashes && name.includes('/')) {
     throw new Error('Screenshot name contains invalid path characters');
   }
 
@@ -31,9 +37,10 @@ export function sanitizeScreenshotName(name, maxLength = 255) {
     throw new Error('Screenshot name cannot be an absolute path');
   }
 
-  // Allow only safe characters: alphanumeric, hyphens, underscores, and dots
+  // Allow only safe characters: alphanumeric, hyphens, underscores, dots, and optionally slashes
   // Replace other characters with underscores
-  let sanitized = name.replace(/[^a-zA-Z0-9._-]/g, '_');
+  let allowedChars = allowSlashes ? /[^a-zA-Z0-9._/-]/g : /[^a-zA-Z0-9._-]/g;
+  let sanitized = name.replace(allowedChars, '_');
 
   // Prevent names that start with dots (hidden files)
   if (sanitized.startsWith('.')) {
@@ -116,7 +123,9 @@ export function validateScreenshotProperties(properties = {}) {
   // Validate common properties with safe constraints
   if (properties.browser && typeof properties.browser === 'string') {
     try {
-      validated.browser = sanitizeScreenshotName(properties.browser, 50);
+      // Extract browser name without version (e.g., "Chrome/139.0.7258.138" -> "Chrome")
+      let browserName = properties.browser.split('/')[0];
+      validated.browser = sanitizeScreenshotName(browserName, 50);
     } catch (error) {
       // Skip invalid browser names, don't include them
       logger.warn(`Invalid browser name '${properties.browser}': ${error.message}`);

package/docs/api-reference.md

@@ -496,9 +496,7 @@ Configuration loaded via cosmiconfig in this order:
 
   // Comparison Configuration
   comparison: {
-    threshold: number,         // Pixel difference threshold (default: 0.01)
-    ignoreAntialiasing: boolean, // Ignore antialiasing (default: true)
-    ignoreColors: boolean      // Ignore color differences (default: false)
+    threshold: number         // Pixel difference threshold (default: 0.1)
   }
 }
 ```

package/docs/getting-started.md

@@ -59,7 +59,7 @@ npx vizzly upload ./screenshots --build-name "Release v1.2.3"
 npx vizzly run "npm test"
 
 # Use TDD mode for local development
-npx vizzly tdd "npm test"
+npx vizzly tdd run "npm test"
 ```
 
 ### 6. In your test code