@vizzly-testing/cli 0.20.0 → 0.20.1-beta.1

package/dist/uploader/operations.js

@@ -0,0 +1,412 @@
+/**
+ * Uploader Operations - I/O operations with dependency injection
+ *
+ * Each operation takes its dependencies as parameters for testability.
+ */
+
+import { buildBuildInfo, buildCompletedProgress, buildDeduplicationProgress, buildFileMetadata, buildProcessingProgress, buildScanningProgress, buildScreenshotPattern, buildUploadingProgress, buildUploadResult, buildWaitResult, DEFAULT_SHA_CHECK_BATCH_SIZE, extractStatusCodeFromError, fileToScreenshotFormat, getElapsedTime, isTimedOut, partitionFilesByExistence, validateApiKey, validateDirectoryStats, validateFilesFound, validateScreenshotsDir } from './core.js';
+
+// ============================================================================
+// File Discovery
+// ============================================================================
+
+/**
+ * Find all PNG screenshots in a directory
+ * @param {Object} options - Options
+ * @param {string} options.directory - Directory to search
+ * @param {Object} options.deps - Dependencies
+ * @param {Function} options.deps.glob - Glob function
+ * @returns {Promise<Array<string>>} Array of file paths
+ */
+export async function findScreenshots({
+  directory,
+  deps
+}) {
+  let {
+    glob
+  } = deps;
+  let pattern = buildScreenshotPattern(directory);
+  return glob(pattern, {
+    absolute: true
+  });
+}
+
+// ============================================================================
+// File Processing
+// ============================================================================
+
+/**
+ * Process files to extract metadata and compute hashes
+ * @param {Object} options - Options
+ * @param {Array<string>} options.files - File paths
+ * @param {AbortSignal} options.signal - Abort signal
+ * @param {Function} options.onProgress - Progress callback
+ * @param {Object} options.deps - Dependencies
+ * @param {Function} options.deps.readFile - File read function
+ * @param {Function} options.deps.createError - Error factory
+ * @returns {Promise<Array>} File metadata array
+ */
+export async function processFiles({
+  files,
+  signal,
+  onProgress,
+  deps
+}) {
+  let {
+    readFile,
+    createError
+  } = deps;
+  let results = [];
+  let count = 0;
+  for (let filePath of files) {
+    if (signal.aborted) {
+      throw createError('Operation cancelled', 'UPLOAD_CANCELLED');
+    }
+    let buffer = await readFile(filePath);
+    let metadata = buildFileMetadata(filePath, buffer);
+    results.push(metadata);
+    count++;
+    if (count % 10 === 0 || count === files.length) {
+      onProgress(count);
+    }
+  }
+  return results;
+}
+
+// ============================================================================
+// SHA Checking / Deduplication
+// ============================================================================
+
+/**
+ * Check which files already exist on the server
+ * @param {Object} options - Options
+ * @param {Array} options.fileMetadata - File metadata array
+ * @param {Object} options.client - API client
+ * @param {AbortSignal} options.signal - Abort signal
+ * @param {string} options.buildId - Build ID
+ * @param {Object} options.deps - Dependencies
+ * @param {Function} options.deps.checkShas - SHA check API function
+ * @param {Function} options.deps.createError - Error factory
+ * @param {Object} options.deps.output - Output utilities
+ * @returns {Promise<{ toUpload: Array, existing: Array, screenshots: Array }>}
+ */
+export async function checkExistingFiles({
+  fileMetadata,
+  client,
+  signal,
+  buildId,
+  deps
+}) {
+  let {
+    checkShas,
+    createError,
+    output
+  } = deps;
+  let existingShas = new Set();
+  let allScreenshots = [];
+  for (let i = 0; i < fileMetadata.length; i += DEFAULT_SHA_CHECK_BATCH_SIZE) {
+    if (signal.aborted) {
+      throw createError('Operation cancelled', 'UPLOAD_CANCELLED');
+    }
+    let batch = fileMetadata.slice(i, i + DEFAULT_SHA_CHECK_BATCH_SIZE);
+    let screenshotBatch = batch.map(fileToScreenshotFormat);
+    try {
+      let res = await checkShas(client, screenshotBatch, buildId);
+      let {
+        existing = [],
+        screenshots = []
+      } = res || {};
+      for (let sha of existing) {
+        existingShas.add(sha);
+      }
+      allScreenshots.push(...screenshots);
+    } catch (error) {
+      output.debug('upload', 'SHA check failed, continuing without deduplication', {
+        error: error.message
+      });
+    }
+  }
+  let partitioned = partitionFilesByExistence(fileMetadata, existingShas);
+  return {
+    toUpload: partitioned.toUpload,
+    existing: partitioned.existing,
+    screenshots: allScreenshots
+  };
+}
+
+// ============================================================================
+// File Upload
+// ============================================================================
+
+/**
+ * Upload files to Vizzly
+ * @param {Object} options - Options
+ * @param {Array} options.toUpload - Files to upload
+ * @param {string} options.buildId - Build ID
+ * @param {Object} options.client - API client
+ * @param {AbortSignal} options.signal - Abort signal
+ * @param {number} options.batchSize - Batch size
+ * @param {Function} options.onProgress - Progress callback
+ * @param {Object} options.deps - Dependencies
+ * @param {Function} options.deps.createError - Error factory
+ * @returns {Promise<{ buildId: string, url: string|null }>}
+ */
+export async function uploadFiles({
+  toUpload,
+  buildId,
+  client,
+  signal,
+  batchSize,
+  onProgress,
+  deps
+}) {
+  let {
+    createError
+  } = deps;
+  let result = null;
+  if (toUpload.length === 0) {
+    return {
+      buildId,
+      url: null
+    };
+  }
+  for (let i = 0; i < toUpload.length; i += batchSize) {
+    if (signal.aborted) {
+      throw createError('Operation cancelled', 'UPLOAD_CANCELLED');
+    }
+    let batch = toUpload.slice(i, i + batchSize);
+    let form = new FormData();
+    form.append('build_id', buildId);
+    for (let file of batch) {
+      let blob = new Blob([file.buffer], {
+        type: 'image/png'
+      });
+      form.append('screenshots', blob, file.filename);
+    }
+    try {
+      result = await client.request('/api/sdk/upload', {
+        method: 'POST',
+        body: form,
+        signal,
+        headers: {}
+      });
+    } catch (err) {
+      throw createError(`Upload failed: ${err.message}`, 'UPLOAD_FAILED', {
+        batch: Math.floor(i / batchSize) + 1
+      });
+    }
+    onProgress(i + batch.length);
+  }
+  return {
+    buildId,
+    url: result?.build?.url || result?.url
+  };
+}
+
+// ============================================================================
+// Build Waiting
+// ============================================================================
+
+/**
+ * Wait for a build to complete
+ * @param {Object} options - Options
+ * @param {string} options.buildId - Build ID
+ * @param {number} options.timeout - Timeout in ms
+ * @param {AbortSignal} options.signal - Abort signal
+ * @param {Object} options.client - API client
+ * @param {Object} options.deps - Dependencies
+ * @param {Function} options.deps.createError - Error factory
+ * @param {Function} options.deps.createTimeoutError - Timeout error factory
+ * @returns {Promise<Object>} Build result
+ */
+export async function waitForBuild({
+  buildId,
+  timeout,
+  signal,
+  client,
+  deps
+}) {
+  let {
+    createError,
+    createTimeoutError
+  } = deps;
+  let startTime = Date.now();
+  while (!isTimedOut(startTime, timeout)) {
+    if (signal.aborted) {
+      throw createError('Operation cancelled', 'UPLOAD_CANCELLED', {
+        buildId
+      });
+    }
+    let resp;
+    try {
+      resp = await client.request(`/api/sdk/builds/${buildId}`, {
+        signal
+      });
+    } catch (err) {
+      let code = extractStatusCodeFromError(err?.message);
+      throw createError(`Failed to check build status: ${code}`, 'BUILD_STATUS_FAILED');
+    }
+    let build = resp?.build ?? resp;
+    if (build.status === 'completed') {
+      return buildWaitResult(build);
+    }
+    if (build.status === 'failed') {
+      throw createError(`Build failed: ${build.error || 'Unknown error'}`, 'BUILD_FAILED');
+    }
+  }
+  throw createTimeoutError(`Build timed out after ${timeout}ms`, {
+    buildId,
+    timeout,
+    elapsed: getElapsedTime(startTime)
+  });
+}
+
+// ============================================================================
+// Main Upload Operation
+// ============================================================================
+
+/**
+ * Upload screenshots to Vizzly
+ * @param {Object} options - Options
+ * @param {Object} options.uploadOptions - Upload options (screenshotsDir, buildName, etc.)
+ * @param {Object} options.config - Configuration
+ * @param {AbortSignal} options.signal - Abort signal
+ * @param {number} options.batchSize - Batch size
+ * @param {Object} options.deps - Dependencies
+ * @returns {Promise<Object>} Upload result
+ */
+export async function upload({
+  uploadOptions,
+  config,
+  signal,
+  batchSize,
+  deps
+}) {
+  let {
+    client,
+    createBuild,
+    getDefaultBranch,
+    glob,
+    readFile,
+    stat,
+    checkShas,
+    createError,
+    createValidationError,
+    createUploadError,
+    output
+  } = deps;
+  let {
+    screenshotsDir,
+    onProgress = () => {}
+  } = uploadOptions;
+  try {
+    // Validate API key
+    let apiKeyValidation = validateApiKey(config.apiKey);
+    if (!apiKeyValidation.valid) {
+      throw createValidationError(apiKeyValidation.error, {
+        config: {
+          apiKey: config.apiKey,
+          apiUrl: config.apiUrl
+        }
+      });
+    }
+
+    // Validate screenshots directory
+    let dirValidation = validateScreenshotsDir(screenshotsDir);
+    if (!dirValidation.valid) {
+      throw createValidationError(dirValidation.error);
+    }
+    let stats = await stat(screenshotsDir);
+    let statsValidation = validateDirectoryStats(stats, screenshotsDir);
+    if (!statsValidation.valid) {
+      throw createValidationError(statsValidation.error);
+    }
+
+    // Find screenshots
+    let files = await findScreenshots({
+      directory: screenshotsDir,
+      deps: {
+        glob
+      }
+    });
+    let filesValidation = validateFilesFound(files, screenshotsDir);
+    if (!filesValidation.valid) {
+      throw createUploadError(filesValidation.error, filesValidation.context);
+    }
+    onProgress(buildScanningProgress(files.length));
+
+    // Process files
+    let fileMetadata = await processFiles({
+      files,
+      signal,
+      onProgress: current => onProgress(buildProcessingProgress(current, files.length)),
+      deps: {
+        readFile,
+        createError
+      }
+    });
+
+    // Create build
+    let defaultBranch = await getDefaultBranch();
+    let buildInfo = buildBuildInfo(uploadOptions, defaultBranch);
+    let build = await createBuild(client, buildInfo);
+    let buildId = build.id;
+
+    // Check existing files
+    let {
+      toUpload,
+      existing,
+      screenshots
+    } = await checkExistingFiles({
+      fileMetadata,
+      client,
+      signal,
+      buildId,
+      deps: {
+        checkShas,
+        createError,
+        output
+      }
+    });
+    onProgress(buildDeduplicationProgress(toUpload.length, existing.length, files.length));
+
+    // Upload files
+    let result = await uploadFiles({
+      toUpload,
+      existing,
+      screenshots,
+      buildId,
+      buildInfo,
+      client,
+      signal,
+      batchSize,
+      onProgress: current => onProgress(buildUploadingProgress(current, toUpload.length)),
+      deps: {
+        createError
+      }
+    });
+    onProgress(buildCompletedProgress(result.buildId, result.url));
+    return buildUploadResult({
+      buildId: result.buildId,
+      url: result.url,
+      total: files.length,
+      uploaded: toUpload.length,
+      skipped: existing.length
+    });
+  } catch (error) {
+    output.debug('upload', 'failed', {
+      error: error.message
+    });
+
+    // Re-throw if already a VizzlyError
+    if (error.name?.includes('Error') && error.code) {
+      throw error;
+    }
+
+    // Wrap unknown errors
+    throw createUploadError(`Upload failed: ${error.message}`, {
+      originalError: error.message,
+      stack: error.stack
+    });
+  }
+}

package/dist/utils/colors.js

@@ -1,66 +1,214 @@
-// Zero-dependency color helper using raw ANSI codes.
-// Detects terminal color support and emits codes only when enabled.
+// Color utility using ansis for rich terminal styling.
+// Detects terminal color support and provides chainable color functions.
 
+import ansis from 'ansis';
+
+// =============================================================================
+// Vizzly Observatory Design System Colors
+// Aligned with @vizzly-testing/observatory color tokens
+// =============================================================================
+
+export let brand = {
+  // Primary brand color - Amber is Observatory's signature
+  amber: '#F59E0B',
+  // Primary brand, actions, highlights
+  amberLight: '#FBBF24',
+  // Hover states, emphasis
+
+  // Accent colors (semantic)
+  success: '#10B981',
+  // Approved, passed, active (--accent-success)
+  warning: '#F59E0B',
+  // Pending, attention (--accent-warning)
+  danger: '#EF4444',
+  // Rejected, failed, errors (--accent-danger)
+  info: '#3B82F6',
+  // Processing, informational (--accent-info)
+
+  // Surface colors (dark theme)
+  bg: '#0F172A',
+  // Page background (--vz-bg)
+  surface: '#1A2332',
+  // Cards, panels (--vz-surface)
+  elevated: '#1E293B',
+  // Dropdowns, modals (--vz-elevated)
+  border: '#374151',
+  // Primary borders (--vz-border)
+  borderSubtle: '#2D3748',
+  // Subtle dividers (--vz-border-subtle)
+
+  // Text hierarchy
+  textPrimary: '#FFFFFF',
+  // Headings, important (--text-primary)
+  textSecondary: '#9CA3AF',
+  // Body text (--text-secondary)
+  textTertiary: '#6B7280',
+  // Captions, metadata (--text-tertiary)
+  textMuted: '#4B5563',
+  // Disabled, placeholders (--text-muted)
+
+  // Legacy aliases (for backward compatibility)
+  green: '#10B981',
+  red: '#EF4444',
+  cyan: '#06B6D4',
+  // Still useful for links in terminals
+  slate: '#64748B',
+  dark: '#1E293B'
+};
 function supportsColorDefault() {
   // Respect NO_COLOR: https://no-color.org/
   if ('NO_COLOR' in process.env) return false;
 
   // Respect FORCE_COLOR if set to a truthy value (except '0')
   if ('FORCE_COLOR' in process.env) {
-    const v = process.env.FORCE_COLOR;
+    let v = process.env.FORCE_COLOR;
     if (v && v !== '0') return true;
     if (v === '0') return false;
   }
 
+  // COLORTERM indicates truecolor support
+  if (process.env.COLORTERM === 'truecolor' || process.env.COLORTERM === '24bit') {
+    return true;
+  }
+
   // If stdout is not a TTY, assume no color
   if (!process.stdout || !process.stdout.isTTY) return false;
 
   // Prefer getColorDepth when available
   try {
-    const depth = typeof process.stdout.getColorDepth === 'function' ? process.stdout.getColorDepth() : 1;
+    let depth = typeof process.stdout.getColorDepth === 'function' ? process.stdout.getColorDepth() : 1;
     return depth && depth > 1;
   } catch {
     // Fallback heuristic
     return true;
   }
 }
-function styleFn(open, close, enabled) {
-  return (input = '') => {
-    const str = String(input);
-    if (!enabled) return str;
-    return open + str + close;
-  };
-}
+
+/**
+ * Create a colors API with optional color support detection
+ * @param {Object} options - Configuration options
+ * @param {boolean} [options.useColor] - Force color on/off (auto-detect if undefined)
+ * @returns {Object} Colors API with styling functions
+ */
 export function createColors(options = {}) {
-  const enabled = options.useColor !== undefined ? !!options.useColor : supportsColorDefault();
-  const codes = {
-    reset: ['\x1b[0m', ''],
-    bold: ['\x1b[1m', '\x1b[22m'],
-    dim: ['\x1b[2m', '\x1b[22m'],
-    italic: ['\x1b[3m', '\x1b[23m'],
-    underline: ['\x1b[4m', '\x1b[24m'],
-    strikethrough: ['\x1b[9m', '\x1b[29m'],
-    red: ['\x1b[31m', '\x1b[39m'],
-    green: ['\x1b[32m', '\x1b[39m'],
-    yellow: ['\x1b[33m', '\x1b[39m'],
-    blue: ['\x1b[34m', '\x1b[39m'],
-    magenta: ['\x1b[35m', '\x1b[39m'],
-    cyan: ['\x1b[36m', '\x1b[39m'],
-    white: ['\x1b[37m', '\x1b[39m'],
-    gray: ['\x1b[90m', '\x1b[39m']
-  };
-  const api = {};
-  for (const [name, [open, close]] of Object.entries(codes)) {
-    api[name] = styleFn(open, close || '\x1b[0m', enabled);
+  let enabled = options.useColor !== undefined ? !!options.useColor : supportsColorDefault();
+  if (!enabled) {
+    // Return no-op functions when color disabled
+    let noop = (input = '') => String(input);
+    return {
+      // Modifiers
+      reset: noop,
+      bold: noop,
+      dim: noop,
+      italic: noop,
+      underline: noop,
+      strikethrough: noop,
+      // Colors
+      red: noop,
+      green: noop,
+      yellow: noop,
+      blue: noop,
+      magenta: noop,
+      cyan: noop,
+      white: noop,
+      gray: noop,
+      black: noop,
+      // Semantic aliases
+      success: noop,
+      error: noop,
+      warning: noop,
+      info: noop,
+      // Extended colors (return noop factory for chaining)
+      rgb: () => noop,
+      hex: () => noop,
+      bgRgb: () => noop,
+      bgHex: () => noop,
+      // Observatory brand colors (noop versions)
+      brand: {
+        // Primary
+        amber: noop,
+        amberLight: noop,
+        // Semantic accents
+        success: noop,
+        warning: noop,
+        danger: noop,
+        info: noop,
+        // Text hierarchy
+        textPrimary: noop,
+        textSecondary: noop,
+        textTertiary: noop,
+        textMuted: noop,
+        // Background variants
+        bgAmber: noop,
+        bgSuccess: noop,
+        bgWarning: noop,
+        bgDanger: noop,
+        bgInfo: noop,
+        // Legacy aliases
+        green: noop,
+        red: noop,
+        cyan: noop,
+        slate: noop
+      }
+    };
   }
-
-  // Semantic aliases
-  api.success = api.green;
-  api.error = api.red;
-  api.warning = api.yellow;
-  api.info = api.blue;
-  return api;
+  return {
+    // Modifiers
+    reset: ansis.reset,
+    bold: ansis.bold,
+    dim: ansis.dim,
+    italic: ansis.italic,
+    underline: ansis.underline,
+    strikethrough: ansis.strikethrough,
+    // Basic ANSI colors (fallback)
+    red: ansis.red,
+    green: ansis.green,
+    yellow: ansis.yellow,
+    blue: ansis.blue,
+    magenta: ansis.magenta,
+    cyan: ansis.cyan,
+    white: ansis.white,
+    gray: ansis.gray,
+    black: ansis.black,
+    // Semantic aliases (basic)
+    success: ansis.green,
+    error: ansis.red,
+    warning: ansis.yellow,
+    info: ansis.blue,
+    // Extended colors for rich styling
+    rgb: ansis.rgb,
+    hex: ansis.hex,
+    bgRgb: ansis.bgRgb,
+    bgHex: ansis.bgHex,
+    // Observatory brand colors (Truecolor) - aligned with design system
+    brand: {
+      // Primary brand color
+      amber: ansis.hex(brand.amber),
+      amberLight: ansis.hex(brand.amberLight),
+      // Semantic accents
+      success: ansis.hex(brand.success),
+      warning: ansis.hex(brand.warning),
+      danger: ansis.hex(brand.danger),
+      info: ansis.hex(brand.info),
+      // Text hierarchy
+      textPrimary: ansis.hex(brand.textPrimary),
+      textSecondary: ansis.hex(brand.textSecondary),
+      textTertiary: ansis.hex(brand.textTertiary),
+      textMuted: ansis.hex(brand.textMuted),
+      // Background variants
+      bgAmber: ansis.bgHex(brand.amber),
+      bgSuccess: ansis.bgHex(brand.success),
+      bgWarning: ansis.bgHex(brand.warning),
+      bgDanger: ansis.bgHex(brand.danger),
+      bgInfo: ansis.bgHex(brand.info),
+      // Legacy aliases (backward compatibility)
+      green: ansis.hex(brand.green),
+      red: ansis.hex(brand.red),
+      cyan: ansis.hex(brand.cyan),
+      slate: ansis.hex(brand.slate)
+    }
+  };
 }
 
 // Default export with auto-detected color support
-export const colors = createColors();
+export let colors = createColors();

package/dist/utils/config-loader.js

@@ -91,10 +91,7 @@ export async function loadConfig(configPath = null, cliOverrides = {}) {
       config.apiKey = token;
       config.projectSlug = projectMapping.projectSlug;
       config.organizationSlug = projectMapping.organizationSlug;
-      output.debug('Using project mapping', {
-        project: projectMapping.projectSlug,
-        org: projectMapping.organizationSlug
-      });
+      output.debug('config', `linked to ${projectMapping.projectSlug} (${projectMapping.organizationSlug})`);
     }
   }
 
@@ -104,14 +101,14 @@ export async function loadConfig(configPath = null, cliOverrides = {}) {
   const envParallelId = getParallelId();
   if (envApiKey) {
     config.apiKey = envApiKey;
-    output.debug('Using API token from environment');
+    output.debug('config', 'using token from environment');
   }
   if (envApiUrl !== 'https://app.vizzly.dev') config.apiUrl = envApiUrl;
   if (envParallelId) config.parallelId = envParallelId;
 
   // 5. Apply CLI overrides (highest priority)
   if (cliOverrides.token) {
-    output.debug('Using API token from --token flag');
+    output.debug('config', 'using token from --token flag');
   }
   applyCLIOverrides(config, cliOverrides);
   return config;