@vizzly-testing/cli 0.14.0 → 0.15.0

package/dist/services/test-runner.js

@@ -3,12 +3,14 @@
  * Orchestrates the test execution flow
  */
 
-import { BaseService } from './base-service.js';
+import { EventEmitter } from 'events';
 import { VizzlyError } from '../errors/vizzly-error.js';
 import { spawn } from 'child_process';
-export class TestRunner extends BaseService {
-  constructor(config, logger, buildManager, serverManager, tddService) {
-    super(config, logger);
+import * as output from '../utils/output.js';
+export class TestRunner extends EventEmitter {
+  constructor(config, buildManager, serverManager, tddService) {
+    super();
+    this.config = config;
     this.buildManager = buildManager;
     this.serverManager = serverManager;
     this.tddService = tddService;
@@ -36,7 +38,7 @@ export class TestRunner extends BaseService {
         tdd: true
       });
     } catch (error) {
-      this.logger.error('Failed to initialize TDD daemon server:', error);
+      output.error('Failed to initialize TDD daemon server:', error);
       throw error;
     }
   }
@@ -80,10 +82,12 @@ export class TestRunner extends BaseService {
             const build = await apiService.getBuild(buildId);
             buildUrl = build.url;
             if (buildUrl) {
-              this.logger.info(`Build URL: ${buildUrl}`);
+              output.info(`Build URL: ${buildUrl}`);
             }
           } catch (error) {
-            this.logger.debug('Could not retrieve build URL:', error.message);
+            output.debug('build', 'could not retrieve url', {
+              error: error.message
+            });
           }
         }
       }
@@ -123,7 +127,7 @@ export class TestRunner extends BaseService {
         try {
           await this.finalizeBuild(buildId, tdd, testSuccess, executionTime);
         } catch (finalizeError) {
-          this.logger.error('Failed to finalize build:', finalizeError);
+          output.error('Failed to finalize build:', finalizeError);
         }
       }
 
@@ -134,13 +138,13 @@ export class TestRunner extends BaseService {
       try {
         await this.serverManager.stop();
       } catch (stopError) {
-        this.logger.error('Failed to stop server:', stopError);
+        output.error('Failed to stop server:', stopError);
       }
     }
 
     // If there was a test error, throw it now (after cleanup)
     if (testError) {
-      this.logger.error('Test run failed:', testError);
+      output.error('Test run failed:', testError);
       throw testError;
     }
     return {
@@ -154,13 +158,11 @@ export class TestRunner extends BaseService {
   async createBuild(options, tdd) {
     if (tdd) {
       // TDD mode: create local build
-      this.logger.debug('TDD mode: creating local build...');
       const build = await this.buildManager.createBuild(options);
-      this.logger.debug(`TDD build created with ID: ${build.id}`);
+      output.debug('build', `created ${build.id.substring(0, 8)}`);
       return build.id;
     } else {
       // API mode: create build via API
-      this.logger.debug('Creating build via API...');
       const apiService = await this.createApiService();
       if (apiService) {
         const buildResult = await apiService.createBuild({
@@ -172,7 +174,7 @@ export class TestRunner extends BaseService {
           github_pull_request_number: options.pullRequestNumber,
           parallel_id: options.parallelId
         });
-        this.logger.debug(`Build created with ID: ${buildResult.id}`);
+        output.debug('build', `created ${buildResult.id}`);
 
         // Emit build created event
         this.emit('build-created', {
@@ -199,7 +201,6 @@ export class TestRunner extends BaseService {
   }
   async finalizeBuild(buildId, isTddMode, success, executionTime) {
     if (!buildId) {
-      this.logger.debug('No buildId to finalize');
       return;
     }
     try {
@@ -207,32 +208,30 @@ export class TestRunner extends BaseService {
         // TDD mode: use server handler to finalize (local-only)
         if (this.serverManager.server?.finishBuild) {
           await this.serverManager.server.finishBuild(buildId);
-          this.logger.debug(`TDD build ${buildId} finalized with success: ${success}`);
-        } else {
-          // In TDD mode without a server, just log that finalization is skipped
-          this.logger.debug(`TDD build ${buildId} finalization skipped (local-only mode)`);
+          output.debug('build', `finalized`, {
+            success
+          });
         }
       } else {
         // API mode: flush uploads first, then finalize build
         if (this.serverManager.server?.finishBuild) {
-          this.logger.debug(`Flushing uploads for build ${buildId}...`);
           await this.serverManager.server.finishBuild(buildId);
-          this.logger.debug(`Upload flush complete for build ${buildId}`);
         }
 
         // Then update build status via API
-        this.logger.debug(`Finalizing build ${buildId} via API...`);
         const apiService = await this.createApiService();
         if (apiService) {
           await apiService.finalizeBuild(buildId, success, executionTime);
-          this.logger.debug(`Build ${buildId} finalized successfully`);
+          output.debug('build', 'finalized via api', {
+            success
+          });
         } else {
-          this.logger.warn(`No API service available to finalize build ${buildId}`);
+          output.warn(`No API service available to finalize build ${buildId}`);
         }
       }
     } catch (error) {
       // Don't fail the entire run if build finalization fails
-      this.logger.warn(`Failed to finalize build ${buildId}:`, error.message);
+      output.warn(`Failed to finalize build ${buildId}:`, error.message);
       // Emit event for UI handling
       this.emit('build-finalize-failed', {
         buildId,

package/dist/services/uploader.js

@@ -7,7 +7,7 @@ import { glob } from 'glob';
 import { readFile, stat } from 'fs/promises';
 import { basename } from 'path';
 import crypto from 'crypto';
-import { createUploaderLogger } from '../utils/logger-factory.js';
+import * as output from '../utils/output.js';
 import { ApiService } from './api-service.js';
 import { getDefaultBranch } from '../utils/git.js';
 import { UploadError, TimeoutError, ValidationError } from '../errors/vizzly-error.js';
@@ -25,8 +25,7 @@ export function createUploader({
   command,
   upload: uploadConfig = {}
 }, options = {}) {
-  const logger = options.logger || createUploaderLogger(options);
-  const signal = options.signal || new AbortController().signal;
+  let signal = options.signal || new AbortController().signal;
   const api = new ApiService({
     baseUrl: apiUrl,
     token: apiKey,
@@ -156,7 +155,9 @@ export function createUploader({
         }
       };
     } catch (error) {
-      logger.error('Upload failed:', error);
+      output.debug('upload', 'failed', {
+        error: error.message
+      });
 
       // Re-throw if already a VizzlyError
       if (error.name && error.name.includes('Error') && error.code) {

package/dist/types/commands/init.d.ts

@@ -5,8 +5,7 @@ export function init(options?: {}): Promise<void>;
  * Simple configuration setup for Vizzly CLI
  */
 export class InitCommand {
-    constructor(logger: any, plugins?: any[]);
-    logger: any;
+    constructor(plugins?: any[]);
     plugins: any[];
     run(options?: {}): Promise<void>;
     generateConfigFile(configPath: any): Promise<void>;

package/dist/types/index.d.ts

@@ -1,10 +1,9 @@
 export { createVizzly } from "./sdk/index.js";
 export { createUploader } from "./services/uploader.js";
 export { createTDDService } from "./services/tdd-service.js";
-export { BaseService } from "./services/base-service.js";
+export { createServices } from "./services/index.js";
 export { loadConfig } from "./utils/config-loader.js";
-export { createLogger } from "./utils/logger.js";
+export * as output from "./utils/output.js";
 export { defineConfig } from "./utils/config-helpers.js";
 export { UploadError } from "./errors/vizzly-error.js";
 export { vizzlyScreenshot, configure, setEnabled } from "./client/index.js";
-export { ServiceContainer, container } from "./container/index.js";

package/dist/types/plugin-loader.d.ts

@@ -2,7 +2,6 @@
  * Load and register plugins from node_modules and config
  * @param {string|null} configPath - Path to config file
  * @param {Object} config - Loaded configuration
- * @param {Object} logger - Logger instance
  * @returns {Promise<Array>} Array of loaded plugins
  */
-export function loadPlugins(configPath: string | null, config: any, logger: any): Promise<any[]>;
+export function loadPlugins(configPath: string | null, config: any): Promise<any[]>;

package/dist/types/reporter/src/api/client.d.ts

@@ -0,0 +1,178 @@
+export namespace tdd {
+    /**
+     * Get current report data with comparisons
+     * @returns {Promise<Object|null>}
+     */
+    function getReportData(): Promise<any | null>;
+    /**
+     * Get real-time status
+     * @returns {Promise<Object>}
+     */
+    function getStatus(): Promise<any>;
+    /**
+     * Accept a single baseline
+     * @param {string} id - Comparison ID
+     * @returns {Promise<Object>}
+     */
+    function acceptBaseline(id: string): Promise<any>;
+    /**
+     * Accept all baselines
+     * @returns {Promise<Object>}
+     */
+    function acceptAllBaselines(): Promise<any>;
+    /**
+     * Reset baselines to previous state
+     * @returns {Promise<Object>}
+     */
+    function resetBaselines(): Promise<any>;
+    /**
+     * Download baselines from a remote build
+     * @param {string} buildId - Build ID to download from
+     * @param {string} [organizationSlug] - Organization slug for OAuth auth
+     * @param {string} [projectSlug] - Project slug for OAuth auth
+     * @returns {Promise<Object>}
+     */
+    function downloadBaselines(buildId: string, organizationSlug?: string, projectSlug?: string): Promise<any>;
+}
+export namespace cloud {
+    /**
+     * List all user's projects
+     * @returns {Promise<Object>}
+     */
+    function listProjects(): Promise<any>;
+    /**
+     * Get builds for a specific project
+     * @param {string} organizationSlug
+     * @param {string} projectSlug
+     * @param {Object} options
+     * @param {number} [options.limit=20]
+     * @param {string} [options.branch]
+     * @returns {Promise<Object>}
+     */
+    function getBuilds(organizationSlug: string, projectSlug: string, options?: {
+        limit?: number;
+        branch?: string;
+    }): Promise<any>;
+    /**
+     * Download baselines from cloud build
+     * @param {string} buildId
+     * @param {string[]} [screenshotNames] - Optional specific screenshots
+     * @returns {Promise<Object>}
+     */
+    function downloadBaselines(buildId: string, screenshotNames?: string[]): Promise<any>;
+}
+export namespace config {
+    /**
+     * Get merged configuration
+     * @returns {Promise<Object>}
+     */
+    function get(): Promise<any>;
+    /**
+     * Get project-level configuration
+     * @returns {Promise<Object>}
+     */
+    function getProject(): Promise<any>;
+    /**
+     * Get global configuration
+     * @returns {Promise<Object>}
+     */
+    function getGlobal(): Promise<any>;
+    /**
+     * Update project configuration
+     * @param {Object} data - Config data to update
+     * @returns {Promise<Object>}
+     */
+    function updateProject(data: any): Promise<any>;
+    /**
+     * Update global configuration
+     * @param {Object} data - Config data to update
+     * @returns {Promise<Object>}
+     */
+    function updateGlobal(data: any): Promise<any>;
+    /**
+     * Validate configuration
+     * @param {Object} data - Config to validate
+     * @returns {Promise<Object>}
+     */
+    function validate(data: any): Promise<any>;
+}
+export namespace auth {
+    /**
+     * Get authentication status
+     * @returns {Promise<{authenticated: boolean, user: Object|null}>}
+     */
+    function getStatus(): Promise<{
+        authenticated: boolean;
+        user: any | null;
+    }>;
+    /**
+     * Initiate device flow login
+     * @returns {Promise<{deviceCode: string, userCode: string, verificationUri: string, expiresIn: number}>}
+     */
+    function initiateLogin(): Promise<{
+        deviceCode: string;
+        userCode: string;
+        verificationUri: string;
+        expiresIn: number;
+    }>;
+    /**
+     * Poll device authorization status
+     * @param {string} deviceCode
+     * @returns {Promise<{status: 'pending'|'complete', user?: Object}>}
+     */
+    function pollAuthorization(deviceCode: string): Promise<{
+        status: "pending" | "complete";
+        user?: any;
+    }>;
+    /**
+     * Logout user
+     * @returns {Promise<Object>}
+     */
+    function logout(): Promise<any>;
+}
+export namespace projects {
+    /**
+     * List projects from API
+     * @returns {Promise<Object>}
+     */
+    function list(): Promise<any>;
+    /**
+     * List project directory mappings
+     * @returns {Promise<Object>}
+     */
+    function listMappings(): Promise<any>;
+    /**
+     * Create or update project mapping
+     * @param {Object} data
+     * @returns {Promise<Object>}
+     */
+    function createMapping(data: any): Promise<any>;
+    /**
+     * Delete project mapping
+     * @param {string} directory
+     * @returns {Promise<Object>}
+     */
+    function deleteMapping(directory: string): Promise<any>;
+    /**
+     * Get recent builds for current project
+     * @param {Object} options
+     * @returns {Promise<Object>}
+     */
+    function getRecentBuilds(options?: any): Promise<any>;
+    /**
+     * Get builds for a specific project
+     * @param {string} organizationSlug
+     * @param {string} projectSlug
+     * @param {Object} options
+     * @returns {Promise<Object>}
+     */
+    function getBuilds(organizationSlug: string, projectSlug: string, options?: any): Promise<any>;
+}
+export namespace api {
+    export { tdd };
+    export { cloud };
+    export { config };
+    export { auth };
+    export { projects };
+}
+export default api;

package/dist/types/reporter/src/components/app-router.d.ts

@@ -1,3 +1 @@
-export default function AppRouter({ initialData }: {
-    initialData: any;
-}): any;
+export default function AppRouter(): any;

package/dist/types/reporter/src/components/code-block.d.ts

@@ -0,0 +1,4 @@
+export default function CodeBlock({ code, language }: {
+    code: any;
+    language?: string;
+}): any;

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

@@ -0,0 +1,10 @@
+export function OnionSkinMode({ baselineImageUrl, currentImageUrl, sliderPosition, onSliderChange, screenshot, onImageError, onImageLoad, imageErrors, }: {
+    baselineImageUrl: any;
+    currentImageUrl: any;
+    sliderPosition?: number;
+    onSliderChange: any;
+    screenshot: any;
+    onImageError: any;
+    onImageLoad: any;
+    imageErrors?: Set<any>;
+}): any;

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

@@ -0,0 +1,11 @@
+export function OverlayMode({ baselineImageUrl, currentImageUrl, diffImageUrl, showDiffOverlay, screenshot, onImageError, onImageLoad, imageErrors, onDiffToggle, }: {
+    baselineImageUrl: any;
+    currentImageUrl: any;
+    diffImageUrl: any;
+    showDiffOverlay?: boolean;
+    screenshot: any;
+    onImageError: any;
+    onImageLoad: any;
+    imageErrors: any;
+    onDiffToggle: any;
+}): any;

package/dist/types/reporter/src/components/comparison/comparison-modes/shared/base-comparison-mode.d.ts

@@ -0,0 +1,14 @@
+export function BaseComparisonMode({ children, containerClassName, onClick, style, ...props }: {
+    [x: string]: any;
+    children: any;
+    containerClassName?: string;
+    onClick: any;
+    style?: {};
+}): any;
+export function ComparisonContainer({ children, containerClassName, interactive, onClick, style, }: {
+    children: any;
+    containerClassName?: string;
+    interactive?: boolean;
+    onClick: any;
+    style?: {};
+}): any;

package/dist/types/reporter/src/components/comparison/comparison-modes/shared/image-renderer.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Simple, reliable image renderer for screenshot comparisons
+ * Zoom is handled at the container level, not here
+ */
+export function ImageRenderer({ imageKey, url, alt, position, className, onError, onLoad, imageErrors, style, loading, ...props }: {
+    [x: string]: any;
+    imageKey: any;
+    url: any;
+    alt: any;
+    position?: string;
+    className?: string;
+    onError: any;
+    onLoad: any;
+    imageErrors: any;
+    style?: {};
+    loading?: string;
+}): any;
+export function ImageWithErrorBoundary({ imageKey, url, alt, position, className, onError, onLoad, imageErrors, showErrorPlaceholder, loading, ...props }: {
+    [x: string]: any;
+    imageKey: any;
+    url: any;
+    alt: any;
+    position?: string;
+    className?: string;
+    onError: any;
+    onLoad: any;
+    imageErrors: any;
+    showErrorPlaceholder?: boolean;
+    loading?: string;
+}): any;

package/dist/types/reporter/src/components/comparison/comparison-modes/toggle-view.d.ts

@@ -0,0 +1,8 @@
+export function ToggleView({ baselineImageUrl, currentImageUrl, screenshot, onImageError, onImageLoad, imageErrors, }: {
+    baselineImageUrl: any;
+    currentImageUrl: any;
+    screenshot: any;
+    onImageError: any;
+    onImageLoad: any;
+    imageErrors?: Set<any>;
+}): any;

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

@@ -1,3 +1,7 @@
+/**
+ * Comparison Viewer for inline card display
+ * Simpler than ScreenshotDisplay - no zoom, just renders comparison modes
+ */
 export default function ComparisonViewer({ comparison, viewMode }: {
     comparison: any;
     viewMode: any;

package/dist/types/reporter/src/components/comparison/screenshot-display.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Unified Screenshot Display Component - matches Observatory architecture
+ * Handles zoom calculations and renders the appropriate comparison mode
+ * inside a zoom wrapper so all modes scale together
+ */
+export function ScreenshotDisplay({ comparison, viewMode, showDiffOverlay, onionSkinPosition, onOnionSkinChange, onDiffToggle, disableLoadingOverlay, zoom, className, }: {
+    comparison: any;
+    viewMode?: string;
+    showDiffOverlay?: boolean;
+    onionSkinPosition?: number;
+    onOnionSkinChange: any;
+    onDiffToggle: any;
+    disableLoadingOverlay?: boolean;
+    zoom?: string;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/alert.d.ts

@@ -0,0 +1,9 @@
+export function Alert({ variant, title, children, icon: CustomIcon, dismissible, onDismiss, className, }: {
+    variant?: string;
+    title: any;
+    children: any;
+    icon: any;
+    dismissible?: boolean;
+    onDismiss: any;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/badge.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Badge Component
+ * Observatory Design System
+ *
+ * For status indicators, labels, and counts
+ * Variants: default, success, warning, danger, info, purple
+ * Sizes: sm, md
+ */
+export function Badge({ children, variant, size, dot, pulseDot, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    variant?: string;
+    size?: string;
+    dot?: boolean;
+    pulseDot?: boolean;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/button.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Button Component
+ * Observatory Design System
+ *
+ * Variants: primary, secondary, ghost, danger, warning, success
+ * Sizes: sm, md, lg
+ */
+export function Button({ children, variant, size, disabled, loading, icon: Icon, iconPosition, fullWidth, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon: any;
+    iconPosition?: string;
+    fullWidth?: boolean;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/card.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Card Component
+ * Observatory Design System
+ *
+ * Container component with optional accent borders
+ * Variants: default, success, warning, danger, info, purple
+ */
+export function Card({ children, variant, hover, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    variant: any;
+    hover?: boolean;
+    className?: string;
+}): any;
+export function CardHeader({ icon: Icon, title, description, iconColor, actions, className, }: {
+    icon: any;
+    title: any;
+    description: any;
+    iconColor?: string;
+    actions: any;
+    className?: string;
+}): any;
+export function CardBody({ children, className, padding }: {
+    children: any;
+    className?: string;
+    padding?: string;
+}): any;
+export function CardFooter({ children, className }: {
+    children: any;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/empty-state.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Empty State Component
+ * Observatory Design System
+ *
+ * For empty lists, waiting states, errors
+ */
+export function EmptyState({ icon: Icon, title, description, action, className, }: {
+    icon: any;
+    title: any;
+    description: any;
+    action: any;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/form-controls.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Form Controls
+ * Observatory Design System
+ *
+ * Input, Select, Checkbox, Toggle
+ */
+export function Input({ label, hint, error, icon: Icon, size, className, ...props }: {
+    [x: string]: any;
+    label: any;
+    hint: any;
+    error: any;
+    icon: any;
+    size?: string;
+    className?: string;
+}): any;
+export function Select({ label, hint, error, options, placeholder, size, className, ...props }: {
+    [x: string]: any;
+    label: any;
+    hint: any;
+    error: any;
+    options?: any[];
+    placeholder?: string;
+    size?: string;
+    className?: string;
+}): any;
+export function Checkbox({ label, description, checked, onChange, disabled, className, ...props }: {
+    [x: string]: any;
+    label: any;
+    description: any;
+    checked: any;
+    onChange: any;
+    disabled?: boolean;
+    className?: string;
+}): any;
+export function Toggle({ label, description, checked, onChange, disabled, size, className, ...props }: {
+    [x: string]: any;
+    label: any;
+    description: any;
+    checked: any;
+    onChange: any;
+    disabled?: boolean;
+    size?: string;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/health-ring.d.ts

@@ -0,0 +1,7 @@
+export function HealthRing({ value, label, size, strokeWidth, className, }: {
+    value?: number;
+    label: any;
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+}): any;

package/dist/types/reporter/src/components/design-system/index.d.ts

@@ -0,0 +1,11 @@
+export { Button } from "./button.jsx";
+export { Badge } from "./badge.jsx";
+export { Alert } from "./alert.jsx";
+export { HealthRing } from "./health-ring.jsx";
+export { Tabs } from "./tabs.jsx";
+export { EmptyState } from "./empty-state.jsx";
+export { Modal } from "./modal.jsx";
+export { Spinner } from "./spinner.jsx";
+export { Input, Select, Checkbox, Toggle } from "./form-controls.jsx";
+export { Card, CardHeader, CardBody, CardFooter } from "./card.jsx";
+export { Skeleton, SkeletonCard, SkeletonTable } from "./skeleton.jsx";