@vizzly-testing/cli 0.14.0 → 0.15.1

package/docs/plugins.md

@@ -13,7 +13,7 @@ file.
 ## Benefits
 
 - **Zero Configuration** - Just `npm install` and the plugin is available
-- **Shared Infrastructure** - Plugins get access to config, logger, and services
+- **Shared Infrastructure** - Plugins get access to config, output utilities, and services
 - **Independent Releases** - Plugins can iterate without requiring CLI updates
 - **Smaller Core** - Keep the main CLI lean by moving optional features to plugins
 - **Community Extensible** - Anyone can build and share plugins
@@ -95,14 +95,14 @@ export default {
   name: 'my-plugin',
   version: '1.0.0', // Optional but recommended
 
-  register(program, { config, logger, services }) {
+  register(program, { config, output, services }) {
     // Register your command with Commander.js
     program
       .command('my-command <arg>')
       .description('Description of my command')
       .option('--option <value>', 'An option')
       .action(async (arg, options) => {
-        logger.info(`Running my-command with ${arg}`);
+        output.info(`Running my-command with ${arg}`);
 
         // Access shared services if needed
         let apiService = await services.get('apiService');
@@ -131,14 +131,13 @@ The `register` function receives two arguments:
 1. **`program`** - [Commander.js](https://github.com/tj/commander.js) program instance for registering commands
 2. **`context`** - Object containing:
    - `config` - Merged Vizzly configuration object
-   - `logger` - Shared logger instance with `.debug()`, `.info()`, `.warn()`, `.error()` methods
+   - `output` - Unified output module with `.debug()`, `.info()`, `.warn()`, `.error()`, `.success()` methods
    - `services` - Service container with access to internal Vizzly services
 
 ### Available Services
 
 Plugins can access these services from the container:
 
-- **`logger`** - Component logger for consistent output
 - **`apiService`** - Vizzly API client for interacting with the platform
 - **`uploader`** - Screenshot upload service
 - **`buildManager`** - Build lifecycle management
@@ -149,7 +148,7 @@ Plugins can access these services from the container:
 Example accessing a service:
 
 ```javascript
-register(program, { config, logger, services }) {
+register(program, { config, output, services }) {
   program
     .command('upload-screenshots <dir>')
     .action(async (dir) => {
@@ -177,12 +176,12 @@ touch plugins/my-plugin.js
 export default {
   name: 'my-plugin',
   version: '1.0.0',
-  register(program, { config, logger }) {
+  register(program, { config, output }) {
     program
       .command('greet <name>')
       .description('Greet someone')
       .action((name) => {
-        logger.info(`Hello, ${name}!`);
+        output.info(`Hello, ${name}!`);
       });
   }
 };
@@ -255,33 +254,34 @@ export default {
 Always handle errors gracefully and provide helpful error messages:
 
 ```javascript
-register(program, { logger }) {
+register(program, { output }) {
   program
     .command('process <file>')
     .action(async (file) => {
       try {
         if (!existsSync(file)) {
-          logger.error(`File not found: ${file}`);
+          output.error(`File not found: ${file}`);
           process.exit(1);
         }
         // Process file...
       } catch (error) {
-        logger.error(`Failed to process file: ${error.message}`);
+        output.error(`Failed to process file: ${error.message}`);
         process.exit(1);
       }
     });
 }
 ```
 
-### Logging
+### Output
 
-Use the provided logger for consistent output across all CLI commands:
+Use the provided output module for consistent CLI output:
 
 ```javascript
-logger.debug('Detailed debug info');   // Only shown with --verbose
-logger.info('Normal information');     // Standard output
-logger.warn('Warning message');        // Warning output
-logger.error('Error message');         // Error output
+output.debug('Detailed debug info');   // Only shown with --verbose (stderr)
+output.info('Normal information');     // Info messages (stdout)
+output.success('Completed!');          // Success messages (stdout)
+output.warn('Warning message');        // Warning messages (stderr)
+output.error('Error message');         // Error messages (stderr)
 ```
 
 ### Async Operations
@@ -292,7 +292,7 @@ Use async/await for asynchronous operations:
 .action(async (options) => {
   let service = await services.get('apiService');
   let result = await service.doSomething();
-  logger.info(`Result: ${result}`);
+  output.info(`Result: ${result}`);
 });
 ```
 
@@ -318,13 +318,13 @@ Validate user input and provide helpful error messages:
 ```javascript
 .action(async (path, options) => {
   if (!path) {
-    logger.error('Path is required');
+    output.error('Path is required');
     process.exit(1);
   }
 
   if (!existsSync(path)) {
-    logger.error(`Path not found: ${path}`);
-    logger.info('Please provide a valid path to your build directory');
+    output.error(`Path not found: ${path}`);
+    output.info('Please provide a valid path to your build directory');
     process.exit(1);
   }
 
@@ -337,7 +337,7 @@ Validate user input and provide helpful error messages:
 Import heavy dependencies only when needed to keep CLI startup fast:
 
 ```javascript
-register(program, { logger }) {
+register(program, { output }) {
   program
     .command('process-images <dir>')
     .action(async (dir) => {
@@ -356,7 +356,7 @@ register(program, { logger }) {
 export default {
   name: 'hello',
   version: '1.0.0',
-  register(program, { logger }) {
+  register(program, { output }) {
     program
       .command('hello <name>')
       .description('Say hello')
@@ -366,7 +366,7 @@ export default {
         if (options.loud) {
           greeting = greeting.toUpperCase();
         }
-        logger.info(greeting);
+        output.info(greeting);
       });
   }
 };
@@ -378,13 +378,13 @@ export default {
 export default {
   name: 'storybook',
   version: '1.0.0',
-  register(program, { config, logger, services }) {
+  register(program, { config, output, services }) {
     program
       .command('storybook <path>')
       .description('Capture screenshots from Storybook build')
       .option('--viewports <list>', 'Comma-separated viewports', '1280x720')
       .action(async (path, options) => {
-        logger.info(`Crawling Storybook at ${path}`);
+        output.info(`Crawling Storybook at ${path}`);
 
         // Import dependencies lazily
         let { crawlStorybook } = await import('./crawler.js');
@@ -392,16 +392,15 @@ export default {
         // Capture screenshots
         let screenshots = await crawlStorybook(path, {
           viewports: options.viewports.split(','),
-          logger,
         });
 
-        logger.info(`Captured ${screenshots.length} screenshots`);
+        output.info(`Captured ${screenshots.length} screenshots`);
 
         // Upload using Vizzly's uploader service
         let uploader = await services.get('uploader');
         await uploader.uploadScreenshots(screenshots);
 
-        logger.info('Upload complete!');
+        output.success('Upload complete!');
       });
   }
 };
@@ -413,7 +412,7 @@ export default {
 export default {
   name: 'reports',
   version: '1.0.0',
-  register(program, { logger }) {
+  register(program, { output }) {
     let reports = program
       .command('reports')
       .description('Report generation commands');
@@ -422,14 +421,14 @@ export default {
       .command('generate')
       .description('Generate a new report')
       .action(() => {
-        logger.info('Generating report...');
+        output.info('Generating report...');
       });
 
     reports
       .command('list')
       .description('List all reports')
       .action(() => {
-        logger.info('Listing reports...');
+        output.info('Listing reports...');
       });
   }
 };
@@ -474,10 +473,10 @@ If you're using TypeScript or want better IDE support, you can add JSDoc types:
  * @param {import('commander').Command} program
  * @param {Object} context
  * @param {Object} context.config
- * @param {Object} context.logger
+ * @param {Object} context.output
  * @param {Object} context.services
  */
-function register(program, { config, logger, services }) {
+function register(program, { config, output, services }) {
   // Your plugin code with full autocomplete!
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -84,7 +84,7 @@
     "cosmiconfig": "^9.0.0",
     "dotenv": "^17.2.1",
     "form-data": "^4.0.0",
-    "glob": "^11.0.3",
+    "glob": "^13.0.0",
     "zod": "^4.1.12"
   },
   "devDependencies": {
@@ -98,6 +98,7 @@
     "@modelcontextprotocol/sdk": "^1.0.4",
     "@playwright/test": "^1.55.1",
     "@tailwindcss/postcss": "^4.1.13",
+    "@tanstack/react-query": "^5.90.11",
     "@vitejs/plugin-react": "^5.0.3",
     "@vitest/coverage-v8": "^4.0.3",
     "autoprefixer": "^10.4.21",

package/dist/container/index.js

@@ -1,215 +0,0 @@
-import { EventEmitter } from 'events';
-import { VizzlyError } from '../errors/vizzly-error.js';
-
-/**
- * @typedef {Object} ServiceDefinition
- * @property {Function} factory - Factory function to create service instance
- * @property {boolean} [singleton=true] - Whether to cache the instance
- * @property {string[]} [dependencies=[]] - Array of dependency names
- */
-
-/**
- * Service container for dependency injection and lifecycle management
- */
-export class ServiceContainer extends EventEmitter {
-  constructor() {
-    super();
-    this.services = new Map();
-    this.instances = new Map();
-    this.starting = new Map();
-  }
-
-  /**
-   * Register a service
-   * @param {string} name - Service name
-   * @param {Function|ServiceDefinition} factoryOrDefinition - Factory function or service definition
-   */
-  register(name, factoryOrDefinition) {
-    const definition = typeof factoryOrDefinition === 'function' ? {
-      factory: factoryOrDefinition,
-      singleton: true,
-      dependencies: []
-    } : factoryOrDefinition;
-    this.services.set(name, definition);
-    this.emit('service:registered', {
-      name,
-      definition
-    });
-  }
-
-  /**
-   * Get a service instance
-   * @param {string} name - Service name
-   * @returns {Promise<any>} Service instance
-   */
-  async get(name) {
-    if (!this.services.has(name)) {
-      throw new VizzlyError(`Service '${name}' not registered`, 'SERVICE_NOT_FOUND', {
-        name
-      });
-    }
-    const definition = this.services.get(name);
-
-    // Return cached instance for singletons
-    if (definition.singleton && this.instances.has(name)) {
-      return this.instances.get(name);
-    }
-
-    // Prevent circular dependencies during startup
-    if (this.starting.has(name)) {
-      throw new VizzlyError(`Circular dependency detected for service '${name}'`, 'CIRCULAR_DEPENDENCY', {
-        name
-      });
-    }
-    try {
-      this.starting.set(name, true);
-
-      // Resolve dependencies
-      const deps = await Promise.all((definition.dependencies || []).map(dep => this.get(dep)));
-
-      // Create instance
-      const instance = await definition.factory(...deps);
-
-      // Cache singleton instances
-      if (definition.singleton) {
-        this.instances.set(name, instance);
-      }
-      this.emit('service:created', {
-        name,
-        instance
-      });
-      return instance;
-    } finally {
-      this.starting.delete(name);
-    }
-  }
-
-  /**
-   * Start all registered services
-   */
-  async startAll() {
-    const services = Array.from(this.services.keys());
-    for (const name of services) {
-      const instance = await this.get(name);
-      if (instance && typeof instance.start === 'function') {
-        await instance.start();
-        this.emit('service:started', {
-          name,
-          instance
-        });
-      }
-    }
-  }
-
-  /**
-   * Stop all services in reverse order
-   */
-  async stopAll() {
-    const instances = Array.from(this.instances.entries()).reverse();
-    for (const [name, instance] of instances) {
-      if (instance && typeof instance.stop === 'function') {
-        await instance.stop();
-        this.emit('service:stopped', {
-          name,
-          instance
-        });
-      }
-    }
-  }
-
-  /**
-   * Clear all services and instances
-   */
-  clear() {
-    this.services.clear();
-    this.instances.clear();
-    this.starting.clear();
-  }
-}
-
-// Export singleton instance
-export const container = new ServiceContainer();
-/**
- * Create a configured service container
- * @param {Object} config - Configuration object
- * @returns {ServiceContainer}
- */
-export async function createServiceContainer(config, command = 'run') {
-  const container = new ServiceContainer();
-
-  // Dynamic ESM imports to avoid circular deps
-  const [{
-    createComponentLogger
-  }, {
-    ApiService
-  }, {
-    createUploader
-  }, {
-    createTDDService
-  }, {
-    TestRunner
-  }, {
-    BuildManager
-  }, {
-    ServerManager
-  }, {
-    AuthService
-  }, {
-    ConfigService
-  }, {
-    ProjectService
-  }] = await Promise.all([import('../utils/logger-factory.js'), import('../services/api-service.js'), import('../services/uploader.js'), import('../services/tdd-service.js'), import('../services/test-runner.js'), import('../services/build-manager.js'), import('../services/server-manager.js'), import('../services/auth-service.js'), import('../services/config-service.js'), import('../services/project-service.js')]);
-
-  // Create logger instance once
-  const logger = createComponentLogger('CONTAINER', {
-    level: config.logLevel || (config.verbose ? 'debug' : 'warn'),
-    verbose: config.verbose || false
-  });
-
-  // Register services without circular dependencies
-  container.register('logger', () => logger);
-  container.register('apiService', () => new ApiService(config, {
-    logger,
-    allowNoToken: true
-  }));
-  container.register('authService', () => new AuthService({
-    baseUrl: config.apiUrl
-  }));
-  container.register('configService', () => new ConfigService(config, {
-    logger,
-    projectRoot: process.cwd()
-  }));
-  container.register('projectService', {
-    factory: async apiService => new ProjectService(config, {
-      logger,
-      apiService
-    }),
-    dependencies: ['apiService']
-  });
-  container.register('uploader', () => createUploader({
-    ...config,
-    command
-  }, {
-    logger
-  }));
-  container.register('buildManager', () => new BuildManager(config, logger));
-  container.register('serverManager', {
-    factory: async (configService, authService, projectService) => new ServerManager(config, {
-      logger,
-      services: {
-        configService,
-        authService,
-        projectService
-      }
-    }),
-    dependencies: ['configService', 'authService', 'projectService']
-  });
-  container.register('tddService', () => createTDDService(config, {
-    logger
-  }));
-  container.register('testRunner', {
-    factory: async (buildManager, serverManager, tddService) => new TestRunner(config, logger, buildManager, serverManager, tddService),
-    dependencies: ['buildManager', 'serverManager', 'tddService']
-  });
-  return container;
-}

package/dist/services/base-service.js

@@ -1,154 +0,0 @@
-/**
- * Base Service Class
- * Provides common functionality for all services
- */
-
-import { EventEmitter } from 'events';
-import { VizzlyError } from '../errors/vizzly-error.js';
-import { createStandardLogger } from '../utils/logger-factory.js';
-
-/**
- * @typedef {Object} ServiceOptions
- * @property {Object} logger - Logger instance
- * @property {AbortSignal} [signal] - Abort signal for cancellation
- */
-
-/**
- * Base class for all services
- * @extends EventEmitter
- */
-export class BaseService extends EventEmitter {
-  /**
-   * @param {Object} config - Service configuration
-   * @param {ServiceOptions} options - Service options
-   */
-  constructor(config, options = {}) {
-    super();
-    this.config = config;
-    this.logger = options.logger || createStandardLogger({
-      level: 'info'
-    });
-    this.signal = options.signal;
-    this.started = false;
-    this.stopping = false;
-
-    // Setup signal handling
-    if (this.signal) {
-      this.signal.addEventListener('abort', () => this.stop());
-    }
-  }
-
-  /**
-   * Start the service
-   * @returns {Promise<void>}
-   */
-  async start() {
-    if (this.started) {
-      this.logger.warn(`${this.constructor.name} already started`);
-      return;
-    }
-    try {
-      this.emit('starting');
-      await this.onStart();
-      this.started = true;
-      this.emit('started');
-    } catch (error) {
-      this.emit('error', error);
-      throw new VizzlyError(`Failed to start ${this.constructor.name}`, 'SERVICE_START_FAILED', {
-        service: this.constructor.name,
-        error: error.message
-      });
-    }
-  }
-
-  /**
-   * Stop the service
-   * @returns {Promise<void>}
-   */
-  async stop() {
-    if (!this.started || this.stopping) {
-      return;
-    }
-    this.stopping = true;
-    try {
-      this.emit('stopping');
-      await this.onStop();
-      this.started = false;
-      this.emit('stopped');
-    } catch (error) {
-      this.emit('error', error);
-      throw new VizzlyError(`Failed to stop ${this.constructor.name}`, 'SERVICE_STOP_FAILED', {
-        service: this.constructor.name,
-        error: error.message
-      });
-    } finally {
-      this.stopping = false;
-    }
-  }
-
-  /**
-   * Hook for service-specific start logic
-   * @protected
-   * @returns {Promise<void>}
-   */
-  async onStart() {
-    // Override in subclasses
-  }
-
-  /**
-   * Hook for service-specific stop logic
-   * @protected
-   * @returns {Promise<void>}
-   */
-  async onStop() {
-    // Override in subclasses
-  }
-
-  /**
-   * Emit a progress event
-   * @param {string} phase - Progress phase
-   * @param {string} message - Progress message
-   * @param {Object} [data] - Additional data
-   */
-  emitProgress(phase, message, data = {}) {
-    this.emit('progress', {
-      phase,
-      message,
-      timestamp: new Date().toISOString(),
-      ...data
-    });
-  }
-
-  /**
-   * Check if service is running
-   * @returns {boolean}
-   */
-  isRunning() {
-    return this.started && !this.stopping;
-  }
-
-  /**
-   * Wait for service to be ready
-   * @param {number} [timeout=30000] - Timeout in milliseconds
-   * @returns {Promise<void>}
-   */
-  async waitForReady(timeout = 30000) {
-    if (this.started) return;
-    return new Promise((resolve, reject) => {
-      const timer = setTimeout(() => {
-        reject(new VizzlyError('Service start timeout', 'SERVICE_TIMEOUT', {
-          service: this.constructor.name,
-          timeout
-        }));
-      }, timeout);
-      this.once('started', () => {
-        clearTimeout(timer);
-        resolve();
-      });
-      this.once('error', error => {
-        clearTimeout(timer);
-        reject(error);
-      });
-    });
-  }
-}

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

@@ -1,59 +0,0 @@
-/**
- * Create a configured service container
- * @param {Object} config - Configuration object
- * @returns {ServiceContainer}
- */
-export function createServiceContainer(config: any, command?: string): ServiceContainer;
-/**
- * @typedef {Object} ServiceDefinition
- * @property {Function} factory - Factory function to create service instance
- * @property {boolean} [singleton=true] - Whether to cache the instance
- * @property {string[]} [dependencies=[]] - Array of dependency names
- */
-/**
- * Service container for dependency injection and lifecycle management
- */
-export class ServiceContainer {
-    services: Map<any, any>;
-    instances: Map<any, any>;
-    starting: Map<any, any>;
-    /**
-     * Register a service
-     * @param {string} name - Service name
-     * @param {Function|ServiceDefinition} factoryOrDefinition - Factory function or service definition
-     */
-    register(name: string, factoryOrDefinition: Function | ServiceDefinition): void;
-    /**
-     * Get a service instance
-     * @param {string} name - Service name
-     * @returns {Promise<any>} Service instance
-     */
-    get(name: string): Promise<any>;
-    /**
-     * Start all registered services
-     */
-    startAll(): Promise<void>;
-    /**
-     * Stop all services in reverse order
-     */
-    stopAll(): Promise<void>;
-    /**
-     * Clear all services and instances
-     */
-    clear(): void;
-}
-export const container: ServiceContainer;
-export type ServiceDefinition = {
-    /**
-     * - Factory function to create service instance
-     */
-    factory: Function;
-    /**
-     * - Whether to cache the instance
-     */
-    singleton?: boolean;
-    /**
-     * - Array of dependency names
-     */
-    dependencies?: string[];
-};

package/dist/types/reporter/src/components/comparison/viewer-modes/onion-viewer.d.ts

@@ -1,3 +0,0 @@
-export default function OnionViewer({ comparison }: {
-    comparison: any;
-}): any;

package/dist/types/reporter/src/components/comparison/viewer-modes/overlay-viewer.d.ts

@@ -1,3 +0,0 @@
-export default function OverlayViewer({ comparison }: {
-    comparison: any;
-}): any;

package/dist/types/reporter/src/components/comparison/viewer-modes/side-by-side-viewer.d.ts

@@ -1,3 +0,0 @@
-export default function SideBySideViewer({ comparison }: {
-    comparison: any;
-}): any;