@vizzly-testing/cli 0.1.0

package/dist/utils/config-loader.js

@@ -0,0 +1,120 @@
+import { cosmiconfigSync } from 'cosmiconfig';
+import { resolve } from 'path';
+import { getApiToken, getApiUrl } from './environment-config.js';
+const DEFAULT_CONFIG = {
+  // API Configuration
+  apiKey: getApiToken(),
+  apiUrl: getApiUrl(),
+  // Server Configuration (for run command)
+  server: {
+    port: 47392,
+    timeout: 30000,
+    screenshotPath: '/screenshot'
+  },
+  // Build Configuration
+  build: {
+    name: 'Build {timestamp}',
+    environment: 'test'
+  },
+  // Upload Configuration (for upload command)
+  upload: {
+    screenshotsDir: './screenshots',
+    batchSize: 10,
+    timeout: 30000
+  },
+  // Comparison Configuration
+  comparison: {
+    threshold: 0.1
+  }
+};
+export async function loadConfig(configPath = null, cliOverrides = {}) {
+  // Create a proper clone of the default config to avoid shared object references
+  const config = {
+    ...DEFAULT_CONFIG,
+    server: {
+      ...DEFAULT_CONFIG.server
+    },
+    build: {
+      ...DEFAULT_CONFIG.build
+    },
+    upload: {
+      ...DEFAULT_CONFIG.upload
+    },
+    comparison: {
+      ...DEFAULT_CONFIG.comparison
+    }
+  };
+
+  // 1. Load from config file using cosmiconfig
+  const explorer = cosmiconfigSync('vizzly');
+  const result = configPath ? explorer.load(configPath) : explorer.search();
+  if (result && result.config) {
+    mergeConfig(config, result.config);
+  }
+
+  // 2. Override with environment variables
+  const envApiKey = getApiToken();
+  const envApiUrl = getApiUrl();
+  if (envApiKey) config.apiKey = envApiKey;
+  if (envApiUrl !== 'https://vizzly.dev') config.apiUrl = envApiUrl;
+
+  // 3. Apply CLI overrides (highest priority)
+  applyCLIOverrides(config, cliOverrides);
+  return config;
+}
+
+/**
+ * Apply CLI option overrides to config
+ * @param {Object} config - The config object to modify
+ * @param {Object} cliOverrides - CLI options to apply
+ */
+function applyCLIOverrides(config, cliOverrides = {}) {
+  // Global overrides
+  if (cliOverrides.token) config.apiKey = cliOverrides.token;
+
+  // Build-related overrides
+  if (cliOverrides.buildName) config.build.name = cliOverrides.buildName;
+  if (cliOverrides.environment) config.build.environment = cliOverrides.environment;
+  if (cliOverrides.branch) config.build.branch = cliOverrides.branch;
+  if (cliOverrides.commit) config.build.commit = cliOverrides.commit;
+  if (cliOverrides.message) config.build.message = cliOverrides.message;
+
+  // Server overrides
+  if (cliOverrides.port) config.server.port = parseInt(cliOverrides.port, 10);
+  if (cliOverrides.timeout) config.server.timeout = parseInt(cliOverrides.timeout, 10);
+
+  // Upload overrides
+  if (cliOverrides.batchSize !== undefined) {
+    config.upload.batchSize = parseInt(cliOverrides.batchSize, 10);
+  }
+  if (cliOverrides.uploadTimeout !== undefined) {
+    config.upload.timeout = parseInt(cliOverrides.uploadTimeout, 10);
+  }
+
+  // Comparison overrides
+  if (cliOverrides.threshold !== undefined) config.comparison.threshold = cliOverrides.threshold;
+
+  // Baseline overrides
+  if (cliOverrides.baselineBuild) config.baselineBuildId = cliOverrides.baselineBuild;
+  if (cliOverrides.baselineComparison) config.baselineComparisonId = cliOverrides.baselineComparison;
+
+  // Behavior flags
+  if (cliOverrides.eager !== undefined) config.eager = cliOverrides.eager;
+  if (cliOverrides.wait !== undefined) config.wait = cliOverrides.wait;
+  if (cliOverrides.allowNoToken !== undefined) config.allowNoToken = cliOverrides.allowNoToken;
+}
+function mergeConfig(target, source) {
+  for (const key in source) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      if (!target[key]) target[key] = {};
+      mergeConfig(target[key], source[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+}
+export function getScreenshotPaths(config) {
+  const screenshotsDir = config.upload?.screenshotsDir || './screenshots';
+  const paths = Array.isArray(screenshotsDir) ? screenshotsDir : [screenshotsDir];
+  return paths.map(p => resolve(process.cwd(), p));
+}

package/dist/utils/console-ui.js

@@ -0,0 +1,226 @@
+import { createColors } from './colors.js';
+
+/**
+ * Simple console UI utilities for CLI output
+ */
+export class ConsoleUI {
+  constructor(options = {}) {
+    this.colors = createColors({
+      useColor: options.color !== false
+    });
+    this.json = options.json || false;
+    this.verbose = options.verbose || false;
+    this.spinner = null;
+    this.lastLine = '';
+  }
+
+  /**
+   * Show a success message
+   */
+  success(message, data = {}) {
+    this.stopSpinner();
+    if (this.json) {
+      console.log(JSON.stringify({
+        status: 'success',
+        message,
+        timestamp: new Date().toISOString(),
+        ...data
+      }));
+    } else {
+      console.log(this.colors.green(`✓ ${message}`));
+    }
+  }
+
+  /**
+   * Show an error message and exit
+   */
+  error(message, error = {}, exitCode = 1) {
+    this.stopSpinner();
+    if (this.json) {
+      const errorData = {
+        status: 'error',
+        message,
+        timestamp: new Date().toISOString()
+      };
+      if (error instanceof Error) {
+        errorData.error = {
+          name: error.name,
+          message: error.message,
+          ...(this.verbose && {
+            stack: error.stack
+          })
+        };
+      } else if (typeof error === 'object') {
+        errorData.error = error;
+      }
+      console.error(JSON.stringify(errorData));
+    } else {
+      console.error(this.colors.red(`✖ ${message}`));
+      if (this.verbose && error.stack) {
+        console.error(this.colors.dim(error.stack));
+      }
+    }
+    if (exitCode > 0) {
+      process.exit(exitCode);
+    }
+  }
+
+  /**
+   * Show an info message
+   */
+  info(message, data = {}) {
+    if (this.json) {
+      console.log(JSON.stringify({
+        status: 'info',
+        message,
+        timestamp: new Date().toISOString(),
+        ...data
+      }));
+    } else {
+      console.log(this.colors.cyan(`ℹ ${message}`));
+    }
+  }
+
+  /**
+   * Show a warning message
+   */
+  warning(message, data = {}) {
+    if (this.json) {
+      console.log(JSON.stringify({
+        status: 'warning',
+        message,
+        timestamp: new Date().toISOString(),
+        ...data
+      }));
+    } else {
+      console.log(this.colors.yellow(`⚠ ${message}`));
+    }
+  }
+
+  /**
+   * Show progress with spinner
+   */
+  progress(message, current = 0, total = 0) {
+    if (this.json) {
+      console.log(JSON.stringify({
+        status: 'progress',
+        message,
+        progress: {
+          current,
+          total
+        },
+        timestamp: new Date().toISOString()
+      }));
+    } else {
+      this.updateSpinner(message, current, total);
+    }
+  }
+
+  /**
+   * Update a status line in place (for dynamic updates)
+   */
+  updateStatus(line, message) {
+    if (this.json) {
+      console.log(JSON.stringify({
+        status: 'update',
+        line,
+        message,
+        timestamp: new Date().toISOString()
+      }));
+    } else {
+      // Move cursor up to the target line and overwrite it
+      process.stdout.write(`\u001b[${line}A`); // Move up
+      process.stdout.write('\u001b[2K'); // Clear line
+      process.stdout.write('\r'); // Move to beginning
+      console.log(this.colors.blue(`ℹ ${message}`));
+      process.stdout.write(`\u001b[${line}B`); // Move back down
+    }
+  }
+
+  /**
+   * Output structured data
+   */
+  data(data) {
+    if (this.json) {
+      console.log(JSON.stringify({
+        status: 'data',
+        data,
+        timestamp: new Date().toISOString()
+      }));
+    } else {
+      console.log(JSON.stringify(data, null, 2));
+    }
+  }
+
+  /**
+   * Start a spinner with message
+   */
+  startSpinner(message) {
+    if (this.json || !process.stdout.isTTY) return;
+    this.stopSpinner();
+    const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    let i = 0;
+    this.spinner = setInterval(() => {
+      const frame = frames[i++ % frames.length];
+      const line = `${this.colors.blue(frame)} ${message}`;
+
+      // Clear previous line and write new one
+      process.stdout.write('\r' + ' '.repeat(this.lastLine.length) + '\r');
+      process.stdout.write(line);
+      this.lastLine = line;
+    }, 80);
+  }
+
+  /**
+   * Update spinner message and progress
+   */
+  updateSpinner(message, current = 0, total = 0) {
+    if (this.json || !process.stdout.isTTY) return;
+    if (!this.spinner) {
+      this.startSpinner(message);
+      return;
+    }
+    const progressText = total > 0 ? ` (${current}/${total})` : '';
+    const fullMessage = `${message}${progressText}`;
+
+    // The spinner will pick up the new message on next frame
+    this.currentMessage = fullMessage;
+  }
+
+  /**
+   * Stop the spinner
+   */
+  stopSpinner() {
+    if (this.spinner) {
+      clearInterval(this.spinner);
+      this.spinner = null;
+
+      // Clear the spinner line
+      if (process.stdout.isTTY) {
+        process.stdout.write('\r' + ' '.repeat(this.lastLine.length) + '\r');
+      }
+      this.lastLine = '';
+    }
+  }
+
+  /**
+   * Clean up on exit
+   */
+  cleanup() {
+    this.stopSpinner();
+  }
+}
+
+// Ensure spinner is cleaned up on process exit
+process.on('exit', () => {
+  // Clear any remaining spinner
+  if (process.stdout.isTTY) {
+    process.stdout.write('\r' + ' '.repeat(80) + '\r');
+  }
+});
+process.on('SIGINT', () => {
+  if (process.stdout.isTTY) {
+    process.stdout.write('\r' + ' '.repeat(80) + '\r');
+  }
+  process.exit(1);
+});

package/dist/utils/diagnostics.js

@@ -0,0 +1,184 @@
+/**
+ * Diagnostics utilities for the doctor command
+ */
+import { spawn } from 'child_process';
+import { access, constants } from 'fs/promises';
+import { getApiToken } from './environment-config.js';
+
+/**
+ * Check if required dependencies are available
+ */
+export async function checkDependencies() {
+  const dependencies = {
+    node: await checkNodeVersion(),
+    npm: await checkCommandAvailable('npm'),
+    git: await checkCommandAvailable('git'),
+    odiff: await checkOdiffBinary()
+  };
+  const allOk = Object.values(dependencies).every(dep => dep.available);
+  return {
+    all_ok: allOk,
+    details: dependencies
+  };
+}
+
+/**
+ * Check Node.js version
+ */
+async function checkNodeVersion() {
+  try {
+    const version = process.version;
+    const majorVersion = parseInt(version.slice(1).split('.')[0]);
+    const supported = majorVersion >= 20;
+    return {
+      available: true,
+      version,
+      supported,
+      message: supported ? 'OK' : 'Node.js 20+ required'
+    };
+  } catch (error) {
+    return {
+      available: false,
+      error: error.message
+    };
+  }
+}
+
+/**
+ * Check if a command is available
+ */
+async function checkCommandAvailable(command) {
+  return new Promise(resolve => {
+    const child = spawn(command, ['--version'], {
+      stdio: 'pipe'
+    });
+    let output = '';
+    child.stdout.on('data', data => {
+      output += data.toString();
+    });
+    child.on('close', code => {
+      resolve({
+        available: code === 0,
+        version: output.trim().split('\n')[0] || 'Unknown',
+        message: code === 0 ? 'OK' : `Command '${command}' not found`
+      });
+    });
+    child.on('error', () => {
+      resolve({
+        available: false,
+        message: `Command '${command}' not found`
+      });
+    });
+  });
+}
+
+/**
+ * Check if odiff binary is available
+ */
+async function checkOdiffBinary() {
+  try {
+    // Check if odiff-bin package is installed and binary is accessible
+    const {
+      findOdiffBin
+    } = await import('odiff-bin');
+    const odiffPath = findOdiffBin();
+    await access(odiffPath, constants.F_OK | constants.X_OK);
+    return {
+      available: true,
+      path: odiffPath,
+      message: 'OK'
+    };
+  } catch (error) {
+    return {
+      available: false,
+      error: error.message,
+      message: 'odiff binary not found or not executable'
+    };
+  }
+}
+
+/**
+ * Check API connectivity
+ */
+
+export async function checkApiConnectivity(config) {
+  try {
+    const apiUrl = config?.apiUrl || 'https://vizzly.dev';
+    const apiKey = config?.apiKey || getApiToken();
+
+    // Basic URL validation
+    try {
+      new globalThis.URL(apiUrl);
+    } catch {
+      throw new Error(`Invalid API URL: ${apiUrl}`);
+    }
+    const result = {
+      url: apiUrl,
+      has_token: !!apiKey,
+      reachable: false,
+      authenticated: false
+    };
+
+    // Try to reach the API
+    try {
+      const response = await fetch(`${apiUrl}/health`, {
+        method: 'GET',
+        timeout: 5000
+      });
+      result.reachable = response.ok;
+      result.status_code = response.status;
+
+      // Test authentication if we have a token
+      if (apiKey && result.reachable) {
+        const authResponse = await fetch(`${apiUrl}/api/user`, {
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${apiKey}`,
+            'Content-Type': 'application/json'
+          },
+          timeout: 5000
+        });
+        result.authenticated = authResponse.ok;
+        result.auth_status_code = authResponse.status;
+      }
+    } catch (fetchError) {
+      result.reachable = false;
+      result.error = fetchError.message;
+    }
+    return result;
+  } catch (error) {
+    return {
+      error: error.message,
+      reachable: false,
+      authenticated: false
+    };
+  }
+}
+
+/**
+ * Check terminal capabilities
+ */
+export function checkTerminalCapabilities() {
+  return {
+    stdout_is_tty: Boolean(process.stdout.isTTY),
+    stdin_is_tty: Boolean(process.stdin.isTTY),
+    supports_color: Boolean(process.stdout.isTTY && process.env.TERM !== 'dumb'),
+    terminal_type: process.env.TERM || 'unknown',
+    columns: process.stdout.columns || 0,
+    rows: process.stdout.rows || 0
+  };
+}
+
+/**
+ * Get system information
+ */
+export function getSystemInfo() {
+  return {
+    platform: process.platform,
+    arch: process.arch,
+    node_version: process.version,
+    memory_usage: process.memoryUsage(),
+    uptime: process.uptime(),
+    working_directory: process.cwd()
+  };
+}

package/dist/utils/environment-config.js

@@ -0,0 +1,93 @@
+/**
+ * Environment Configuration Utility
+ * Centralized access to environment variables with proper defaults
+ */
+
+/**
+ * Get API token from environment
+ * @returns {string|undefined} API token
+ */
+export function getApiToken() {
+  return process.env.VIZZLY_TOKEN;
+}
+
+/**
+ * Get API URL from environment
+ * @returns {string} API URL with default
+ */
+export function getApiUrl() {
+  return process.env.VIZZLY_API_URL || 'https://vizzly.dev';
+}
+
+/**
+ * Get log level from environment
+ * @returns {string} Log level with default
+ */
+export function getLogLevel() {
+  return process.env.VIZZLY_LOG_LEVEL || 'info';
+}
+
+/**
+ * Get user agent from environment
+ * @returns {string|undefined} User agent string
+ */
+export function getUserAgent() {
+  return process.env.VIZZLY_USER_AGENT;
+}
+
+/**
+ * Check if Vizzly is enabled in client
+ * @returns {boolean} Whether Vizzly is enabled
+ */
+export function isVizzlyEnabled() {
+  return process.env.VIZZLY_ENABLED === 'true';
+}
+
+/**
+ * Get server URL from environment
+ * @returns {string|undefined} Server URL
+ */
+export function getServerUrl() {
+  return process.env.VIZZLY_SERVER_URL;
+}
+
+/**
+ * Get build ID from environment
+ * @returns {string|undefined} Build ID
+ */
+export function getBuildId() {
+  return process.env.VIZZLY_BUILD_ID;
+}
+
+/**
+ * Check if TDD mode is enabled
+ * @returns {boolean} Whether TDD mode is enabled
+ */
+export function isTddMode() {
+  return process.env.VIZZLY_TDD === 'true';
+}
+
+/**
+ * Set Vizzly enabled state (for client)
+ * @param {boolean} enabled - Whether to enable Vizzly
+ */
+export function setVizzlyEnabled(enabled) {
+  process.env.VIZZLY_ENABLED = enabled ? 'true' : 'false';
+}
+
+/**
+ * Get all Vizzly environment variables
+ * @returns {Object} All environment configuration
+ */
+export function getAllEnvironmentConfig() {
+  return {
+    apiToken: getApiToken(),
+    apiUrl: getApiUrl(),
+    logLevel: getLogLevel(),
+    userAgent: getUserAgent(),
+    enabled: isVizzlyEnabled(),
+    serverUrl: getServerUrl(),
+    buildId: getBuildId(),
+    tddMode: isTddMode()
+  };
+}