@vizzly-testing/cli 0.10.3 → 0.11.0

package/dist/commands/project.js

@@ -0,0 +1,351 @@
+/**
+ * Project management commands
+ * Select, list, and manage project tokens
+ */
+
+import { ConsoleUI } from '../utils/console-ui.js';
+import { AuthService } from '../services/auth-service.js';
+import { getApiUrl } from '../utils/environment-config.js';
+import { getAuthTokens, saveProjectMapping, getProjectMapping, getProjectMappings, deleteProjectMapping } from '../utils/global-config.js';
+import { resolve } from 'path';
+import readline from 'readline';
+
+/**
+ * Project select command - configure project for current directory
+ * @param {Object} options - Command options
+ * @param {Object} globalOptions - Global CLI options
+ */
+export async function projectSelectCommand(options = {}, globalOptions = {}) {
+  let ui = new ConsoleUI({
+    json: globalOptions.json,
+    verbose: globalOptions.verbose,
+    color: !globalOptions.noColor
+  });
+  try {
+    // Check authentication
+    let auth = await getAuthTokens();
+    if (!auth || !auth.accessToken) {
+      ui.error('Not authenticated', null, 0);
+      console.log(''); // Empty line for spacing
+      ui.info('Run "vizzly login" to authenticate first');
+      process.exit(1);
+    }
+    let authService = new AuthService({
+      baseUrl: options.apiUrl || getApiUrl()
+    });
+
+    // Get user info to show organizations
+    ui.startSpinner('Fetching organizations...');
+    let userInfo = await authService.whoami();
+    ui.stopSpinner();
+    if (!userInfo.organizations || userInfo.organizations.length === 0) {
+      ui.error('No organizations found', null, 0);
+      console.log(''); // Empty line for spacing
+      ui.info('Create an organization at https://vizzly.dev');
+      process.exit(1);
+    }
+
+    // Select organization
+    console.log(''); // Empty line for spacing
+    ui.info('Select an organization:');
+    console.log(''); // Empty line for spacing
+
+    userInfo.organizations.forEach((org, index) => {
+      console.log(`  ${index + 1}. ${org.name} (@${org.slug})`);
+    });
+    console.log(''); // Empty line for spacing
+    let orgChoice = await promptNumber('Enter number', 1, userInfo.organizations.length);
+    let selectedOrg = userInfo.organizations[orgChoice - 1];
+
+    // List projects for organization
+    ui.startSpinner(`Fetching projects for ${selectedOrg.name}...`);
+    let response = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project`, {
+      headers: {
+        Authorization: `Bearer ${auth.accessToken}`,
+        'X-Organization': selectedOrg.slug
+      }
+    });
+    ui.stopSpinner();
+
+    // Handle both array response and object with projects property
+    let projects = Array.isArray(response) ? response : response.projects || [];
+    if (projects.length === 0) {
+      ui.error('No projects found', null, 0);
+      console.log(''); // Empty line for spacing
+      ui.info(`Create a project in ${selectedOrg.name} at https://vizzly.dev`);
+      process.exit(1);
+    }
+
+    // Select project
+    console.log(''); // Empty line for spacing
+    ui.info('Select a project:');
+    console.log(''); // Empty line for spacing
+
+    projects.forEach((project, index) => {
+      console.log(`  ${index + 1}. ${project.name} (${project.slug})`);
+    });
+    console.log(''); // Empty line for spacing
+    let projectChoice = await promptNumber('Enter number', 1, projects.length);
+    let selectedProject = projects[projectChoice - 1];
+
+    // Create API token for project
+    ui.startSpinner(`Creating API token for ${selectedProject.name}...`);
+    let tokenResponse = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project/${selectedProject.slug}/tokens`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${auth.accessToken}`,
+        'X-Organization': selectedOrg.slug,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        name: `CLI Token - ${new Date().toLocaleDateString()}`,
+        description: `Generated by vizzly CLI for ${process.cwd()}`
+      })
+    });
+    ui.stopSpinner();
+
+    // Save project mapping
+    let currentDir = resolve(process.cwd());
+    await saveProjectMapping(currentDir, {
+      token: tokenResponse.token,
+      projectSlug: selectedProject.slug,
+      projectName: selectedProject.name,
+      organizationSlug: selectedOrg.slug
+    });
+    ui.success('Project configured!');
+    console.log(''); // Empty line for spacing
+    ui.info(`Project: ${selectedProject.name}`);
+    ui.info(`Organization: ${selectedOrg.name}`);
+    ui.info(`Directory: ${currentDir}`);
+    ui.cleanup();
+  } catch (error) {
+    ui.stopSpinner();
+    ui.error('Failed to configure project', error, 0);
+    if (globalOptions.verbose && error.stack) {
+      console.error(''); // Empty line for spacing
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * Project list command - show all configured projects
+ * @param {Object} _options - Command options (unused)
+ * @param {Object} globalOptions - Global CLI options
+ */
+export async function projectListCommand(_options = {}, globalOptions = {}) {
+  let ui = new ConsoleUI({
+    json: globalOptions.json,
+    verbose: globalOptions.verbose,
+    color: !globalOptions.noColor
+  });
+  try {
+    let mappings = await getProjectMappings();
+    let paths = Object.keys(mappings);
+    if (paths.length === 0) {
+      ui.info('No projects configured');
+      console.log(''); // Empty line for spacing
+      ui.info('Run "vizzly project:select" to configure a project');
+      ui.cleanup();
+      return;
+    }
+    if (globalOptions.json) {
+      ui.data(mappings);
+      ui.cleanup();
+      return;
+    }
+    ui.info('Configured projects:');
+    console.log(''); // Empty line for spacing
+
+    let currentDir = resolve(process.cwd());
+    for (let path of paths) {
+      let mapping = mappings[path];
+      let isCurrent = path === currentDir;
+      let marker = isCurrent ? '→' : ' ';
+
+      // Extract token string (handle both string and object formats)
+      let tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
+      console.log(`${marker} ${path}`);
+      console.log(`  Project: ${mapping.projectName} (${mapping.projectSlug})`);
+      console.log(`  Organization: ${mapping.organizationSlug}`);
+      if (globalOptions.verbose) {
+        console.log(`  Token: ${tokenStr.substring(0, 20)}...`);
+        console.log(`  Created: ${new Date(mapping.createdAt).toLocaleString()}`);
+      }
+      console.log(''); // Empty line for spacing
+    }
+    ui.cleanup();
+  } catch (error) {
+    ui.error('Failed to list projects', error, 0);
+    if (globalOptions.verbose && error.stack) {
+      console.error(''); // Empty line for spacing
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * Project token command - show/regenerate token for current directory
+ * @param {Object} _options - Command options (unused)
+ * @param {Object} globalOptions - Global CLI options
+ */
+export async function projectTokenCommand(_options = {}, globalOptions = {}) {
+  let ui = new ConsoleUI({
+    json: globalOptions.json,
+    verbose: globalOptions.verbose,
+    color: !globalOptions.noColor
+  });
+  try {
+    let currentDir = resolve(process.cwd());
+    let mapping = await getProjectMapping(currentDir);
+    if (!mapping) {
+      ui.error('No project configured for this directory', null, 0);
+      console.log(''); // Empty line for spacing
+      ui.info('Run "vizzly project:select" to configure a project');
+      process.exit(1);
+    }
+
+    // Extract token string (handle both string and object formats)
+    let tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
+    if (globalOptions.json) {
+      ui.data({
+        token: tokenStr,
+        projectSlug: mapping.projectSlug,
+        organizationSlug: mapping.organizationSlug
+      });
+      ui.cleanup();
+      return;
+    }
+    ui.info('Project token:');
+    console.log(''); // Empty line for spacing
+    console.log(`  ${tokenStr}`);
+    console.log(''); // Empty line for spacing
+    ui.info(`Project: ${mapping.projectName} (${mapping.projectSlug})`);
+    ui.info(`Organization: ${mapping.organizationSlug}`);
+    ui.cleanup();
+  } catch (error) {
+    ui.error('Failed to get project token', error, 0);
+    if (globalOptions.verbose && error.stack) {
+      console.error(''); // Empty line for spacing
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * Helper to make authenticated API request
+ */
+async function makeAuthenticatedRequest(url, options = {}) {
+  let response = await fetch(url, options);
+  if (!response.ok) {
+    let errorText = '';
+    try {
+      let errorData = await response.json();
+      errorText = errorData.error || errorData.message || '';
+    } catch {
+      errorText = await response.text();
+    }
+    throw new Error(`API request failed: ${response.status}${errorText ? ` - ${errorText}` : ''}`);
+  }
+  return response.json();
+}
+
+/**
+ * Helper to prompt for a number
+ */
+function promptNumber(message, min, max) {
+  return new Promise(resolve => {
+    let rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    let ask = () => {
+      rl.question(`${message} (${min}-${max}): `, answer => {
+        let num = parseInt(answer, 10);
+        if (isNaN(num) || num < min || num > max) {
+          console.log(`Please enter a number between ${min} and ${max}`);
+          ask();
+        } else {
+          rl.close();
+          resolve(num);
+        }
+      });
+    };
+    ask();
+  });
+}
+
+/**
+ * Project remove command - remove project configuration for current directory
+ * @param {Object} _options - Command options (unused)
+ * @param {Object} globalOptions - Global CLI options
+ */
+export async function projectRemoveCommand(_options = {}, globalOptions = {}) {
+  let ui = new ConsoleUI({
+    json: globalOptions.json,
+    verbose: globalOptions.verbose,
+    color: !globalOptions.noColor
+  });
+  try {
+    let currentDir = resolve(process.cwd());
+    let mapping = await getProjectMapping(currentDir);
+    if (!mapping) {
+      ui.info('No project configured for this directory');
+      ui.cleanup();
+      return;
+    }
+
+    // Confirm removal
+    console.log(''); // Empty line for spacing
+    ui.info('Current project configuration:');
+    console.log(`  Project: ${mapping.projectName} (${mapping.projectSlug})`);
+    console.log(`  Organization: ${mapping.organizationSlug}`);
+    console.log(`  Directory: ${currentDir}`);
+    console.log(''); // Empty line for spacing
+
+    let confirmed = await promptConfirm('Remove this project configuration?');
+    if (!confirmed) {
+      ui.info('Cancelled');
+      ui.cleanup();
+      return;
+    }
+    await deleteProjectMapping(currentDir);
+    ui.success('Project configuration removed');
+    console.log(''); // Empty line for spacing
+    ui.info('Run "vizzly project:select" to configure a different project');
+    ui.cleanup();
+  } catch (error) {
+    ui.error('Failed to remove project configuration', error, 0);
+    if (globalOptions.verbose && error.stack) {
+      console.error(''); // Empty line for spacing
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * Helper to prompt for confirmation
+ */
+function promptConfirm(message) {
+  return new Promise(resolve => {
+    let rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    rl.question(`${message} (y/n): `, answer => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+    });
+  });
+}
+
+/**
+ * Validate project command options
+ */
+export function validateProjectOptions() {
+  return [];
+}

package/dist/commands/run.js

@@ -57,8 +57,30 @@ export async function runCommand(testCommand, options = {}, globalOptions = {})
       ...globalOptions,
       ...options
     };
+
+    // Debug: Check options before loadConfig
+    if (process.env.DEBUG_CONFIG) {
+      console.log('[RUN] allOptions.token:', allOptions.token ? allOptions.token.substring(0, 8) + '***' : 'NONE');
+    }
     const config = await loadConfig(globalOptions.config, allOptions);
 
+    // Debug: Check config immediately after loadConfig
+    if (process.env.DEBUG_CONFIG) {
+      console.log('[RUN] Config after loadConfig:', {
+        hasApiKey: !!config.apiKey,
+        apiKeyPrefix: config.apiKey ? config.apiKey.substring(0, 8) + '***' : 'NONE'
+      });
+    }
+    if (globalOptions.verbose) {
+      ui.info('Token check:', {
+        hasApiKey: !!config.apiKey,
+        apiKeyType: typeof config.apiKey,
+        apiKeyPrefix: typeof config.apiKey === 'string' && config.apiKey ? config.apiKey.substring(0, 10) + '...' : 'none',
+        projectSlug: config.projectSlug || 'none',
+        organizationSlug: config.organizationSlug || 'none'
+      });
+    }
+
     // Validate API token (unless --allow-no-token is set)
     if (!config.apiKey && !config.allowNoToken) {
       ui.error('API token required. Use --token, set VIZZLY_TOKEN environment variable, or use --allow-no-token to run without uploading');
@@ -92,6 +114,14 @@ export async function runCommand(testCommand, options = {}, globalOptions = {})
       verbose: globalOptions.verbose,
       uploadAll: options.uploadAll || false
     };
+
+    // Debug: Check config before creating container
+    if (process.env.DEBUG_CONFIG) {
+      console.log('[RUN] Config before container:', {
+        hasApiKey: !!configWithVerbose.apiKey,
+        apiKeyPrefix: configWithVerbose.apiKey ? configWithVerbose.apiKey.substring(0, 8) + '***' : 'NONE'
+      });
+    }
     const command = 'run';
     const container = await createServiceContainer(configWithVerbose, command);
     testRunner = await container.get('testRunner'); // Assign to outer scope variable

package/dist/commands/whoami.js

@@ -0,0 +1,162 @@
+/**
+ * Whoami command implementation
+ * Shows current user and authentication status
+ */
+
+import { ConsoleUI } from '../utils/console-ui.js';
+import { AuthService } from '../services/auth-service.js';
+import { getApiUrl } from '../utils/environment-config.js';
+import { getAuthTokens } from '../utils/global-config.js';
+
+/**
+ * Whoami command implementation
+ * @param {Object} options - Command options
+ * @param {Object} globalOptions - Global CLI options
+ */
+export async function whoamiCommand(options = {}, globalOptions = {}) {
+  // Create UI handler
+  let ui = new ConsoleUI({
+    json: globalOptions.json,
+    verbose: globalOptions.verbose,
+    color: !globalOptions.noColor
+  });
+  try {
+    // Check if user is logged in
+    let auth = await getAuthTokens();
+    if (!auth || !auth.accessToken) {
+      if (globalOptions.json) {
+        ui.data({
+          authenticated: false
+        });
+      } else {
+        ui.info('You are not logged in');
+        console.log(''); // Empty line for spacing
+        ui.info('Run "vizzly login" to authenticate');
+      }
+      ui.cleanup();
+      return;
+    }
+
+    // Get current user info
+    ui.startSpinner('Fetching user information...');
+    let authService = new AuthService({
+      baseUrl: options.apiUrl || getApiUrl()
+    });
+    let response = await authService.whoami();
+    ui.stopSpinner();
+
+    // Output in JSON mode
+    if (globalOptions.json) {
+      ui.data({
+        authenticated: true,
+        user: response.user,
+        organizations: response.organizations || [],
+        tokenExpiresAt: auth.expiresAt
+      });
+      ui.cleanup();
+      return;
+    }
+
+    // Human-readable output
+    ui.success('Authenticated');
+    console.log(''); // Empty line for spacing
+
+    // Show user info
+    if (response.user) {
+      ui.info(`User: ${response.user.name || response.user.username}`);
+      ui.info(`Email: ${response.user.email}`);
+      if (response.user.username) {
+        ui.info(`Username: ${response.user.username}`);
+      }
+      if (globalOptions.verbose && response.user.id) {
+        ui.info(`User ID: ${response.user.id}`);
+      }
+    }
+
+    // Show organizations
+    if (response.organizations && response.organizations.length > 0) {
+      console.log(''); // Empty line for spacing
+      ui.info('Organizations:');
+      for (let org of response.organizations) {
+        let orgInfo = `  - ${org.name}`;
+        if (org.slug) {
+          orgInfo += ` (@${org.slug})`;
+        }
+        if (org.role) {
+          orgInfo += ` [${org.role}]`;
+        }
+        console.log(orgInfo);
+        if (globalOptions.verbose && org.id) {
+          console.log(`    ID: ${org.id}`);
+        }
+      }
+    }
+
+    // Show token expiry info
+    if (auth.expiresAt) {
+      console.log(''); // Empty line for spacing
+      let expiresAt = new Date(auth.expiresAt);
+      let now = new Date();
+      let msUntilExpiry = expiresAt.getTime() - now.getTime();
+      let daysUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60 * 24));
+      let hoursUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60));
+      let minutesUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60));
+      if (msUntilExpiry <= 0) {
+        ui.warning('Token has expired');
+        console.log(''); // Empty line for spacing
+        ui.info('Run "vizzly login" to refresh your authentication');
+      } else if (daysUntilExpiry > 0) {
+        ui.info(`Token expires in ${daysUntilExpiry} day${daysUntilExpiry !== 1 ? 's' : ''} (${expiresAt.toLocaleDateString()})`);
+      } else if (hoursUntilExpiry > 0) {
+        ui.info(`Token expires in ${hoursUntilExpiry} hour${hoursUntilExpiry !== 1 ? 's' : ''} (${expiresAt.toLocaleString()})`);
+      } else if (minutesUntilExpiry > 0) {
+        ui.info(`Token expires in ${minutesUntilExpiry} minute${minutesUntilExpiry !== 1 ? 's' : ''}`);
+      } else {
+        ui.warning('Token expires in less than a minute');
+        console.log(''); // Empty line for spacing
+        ui.info('Run "vizzly login" to refresh your authentication');
+      }
+      if (globalOptions.verbose) {
+        ui.info(`Token expires at: ${expiresAt.toISOString()}`);
+      }
+    }
+    ui.cleanup();
+  } catch (error) {
+    ui.stopSpinner();
+
+    // Handle authentication errors with helpful messages
+    if (error.name === 'AuthError') {
+      if (globalOptions.json) {
+        ui.data({
+          authenticated: false,
+          error: error.message
+        });
+      } else {
+        ui.error('Authentication token is invalid or expired', error, 0);
+        console.log(''); // Empty line for spacing
+        ui.info('Run "vizzly login" to authenticate again');
+      }
+      ui.cleanup();
+      process.exit(1);
+    } else {
+      ui.error('Failed to get user information', error, 0);
+      if (globalOptions.verbose && error.stack) {
+        console.error(''); // Empty line for spacing
+        console.error(error.stack);
+      }
+      process.exit(1);
+    }
+  }
+}
+
+/**
+ * Validate whoami options
+ * @param {Object} options - Command options
+ */
+export function validateWhoamiOptions() {
+  let errors = [];
+
+  // No specific validation needed for whoami command
+
+  return errors;
+}

package/dist/plugin-loader.js

@@ -135,7 +135,9 @@ async function loadPlugin(pluginPath) {
 const pluginSchema = z.object({
   name: z.string().min(1, 'Plugin name is required'),
   version: z.string().optional(),
-  register: z.function(z.tuple([z.any(), z.any()]), z.void()),
+  register: z.custom(val => typeof val === 'function', {
+    message: 'register must be a function'
+  }),
   configSchema: z.record(z.any()).optional()
 });
 
@@ -162,7 +164,7 @@ function validatePluginStructure(plugin) {
     }
   } catch (error) {
     if (error instanceof z.ZodError) {
-      let messages = error.errors.map(e => `${e.path.join('.')}: ${e.message}`);
+      let messages = error.issues.map(e => `${e.path.join('.')}: ${e.message}`);
       throw new Error(`Invalid plugin structure: ${messages.join(', ')}`);
     }
     throw error;

package/dist/sdk/index.js

@@ -11,6 +11,7 @@
  */
 
 import { EventEmitter } from 'events';
+import { resolveImageBuffer } from '../utils/file-helpers.js';
 import { createUploader } from '../services/uploader.js';
 import { createTDDService } from '../services/tdd-service.js';
 import { ScreenshotServer } from '../services/screenshot-server.js';
@@ -226,21 +227,27 @@ export class VizzlySDK extends EventEmitter {
   /**
    * Capture a screenshot
    * @param {string} name - Screenshot name
-   * @param {Buffer} imageBuffer - Image data
+   * @param {Buffer|string} imageBuffer - Image data as a Buffer, or a file path to an image
    * @param {import('../types').ScreenshotOptions} [options] - Options
    * @returns {Promise<void>}
+   * @throws {VizzlyError} When server is not running
+   * @throws {VizzlyError} When file path is provided but file doesn't exist
+   * @throws {VizzlyError} When file cannot be read due to permissions or I/O errors
    */
   async screenshot(name, imageBuffer, options = {}) {
     if (!this.server || !this.server.isRunning()) {
       throw new VizzlyError('Server not running. Call start() first.', 'SERVER_NOT_RUNNING');
     }
 
+    // Resolve Buffer or file path using shared utility
+    const buffer = resolveImageBuffer(imageBuffer, 'screenshot');
+
     // Generate or use provided build ID
     const buildId = options.buildId || this.currentBuildId || 'default';
     this.currentBuildId = buildId;
 
     // Convert Buffer to base64 for JSON transport
-    const imageBase64 = imageBuffer.toString('base64');
+    const imageBase64 = buffer.toString('base64');
     const screenshotData = {
       buildId,
       name,
@@ -331,8 +338,10 @@ export class VizzlySDK extends EventEmitter {
   /**
    * Run local comparison in TDD mode
    * @param {string} name - Screenshot name
-   * @param {Buffer} imageBuffer - Current image
+   * @param {Buffer|string} imageBuffer - Current image as a Buffer, or a file path to an image
    * @returns {Promise<import('../types').ComparisonResult>} Comparison result
+   * @throws {VizzlyError} When file path is provided but file doesn't exist
+   * @throws {VizzlyError} When file cannot be read due to permissions or I/O errors
    */
   async compare(name, imageBuffer) {
     if (!this.services?.tddService) {
@@ -341,8 +350,11 @@ export class VizzlySDK extends EventEmitter {
         logger: this.logger
       });
     }
+
+    // Resolve Buffer or file path using shared utility
+    const buffer = resolveImageBuffer(imageBuffer, 'compare');
     try {
-      const result = await this.services.tddService.compareScreenshot(name, imageBuffer);
+      const result = await this.services.tddService.compareScreenshot(name, buffer);
       this.emit('comparison:completed', result);
       return result;
     } catch (error) {