@vizzly-testing/cli 0.16.4 → 0.18.0

package/dist/commands/init.js

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
-import fs from 'fs/promises';
-import path from 'path';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { z } from 'zod';
 import { VizzlyError } from '../errors/vizzly-error.js';
-import * as output from '../utils/output.js';
 import { loadPlugins } from '../plugin-loader.js';
 import { loadConfig } from '../utils/config-loader.js';
-import { z } from 'zod';
+import * as output from '../utils/output.js';
 
 /**
  * Simple configuration setup for Vizzly CLI
@@ -19,8 +19,8 @@ export class InitCommand {
     output.blank();
     try {
       // Check for existing config
-      let configPath = path.join(process.cwd(), 'vizzly.config.js');
-      let hasConfig = await this.fileExists(configPath);
+      const configPath = path.join(process.cwd(), 'vizzly.config.js');
+      const hasConfig = await this.fileExists(configPath);
       if (hasConfig && !options.force) {
         output.info('❌ A vizzly.config.js file already exists. Use --force to overwrite.');
         return;
@@ -60,9 +60,9 @@ export class InitCommand {
     timeout: 30000
   },
 
-  // Comparison configuration
+  // Comparison configuration (CIEDE2000 Delta E: 0=exact, 1=JND, 2=recommended)
   comparison: {
-    threshold: 0.1
+    threshold: 2.0
   },
 
   // TDD configuration
@@ -71,16 +71,16 @@ export class InitCommand {
   }`;
 
     // Add plugin configurations
-    let pluginConfigs = this.generatePluginConfigs();
+    const pluginConfigs = this.generatePluginConfigs();
     if (pluginConfigs) {
-      coreConfig += ',\n\n' + pluginConfigs;
+      coreConfig += `,\n\n${pluginConfigs}`;
     }
     coreConfig += '\n};\n';
     await fs.writeFile(configPath, coreConfig, 'utf8');
     output.info(`📄 Created vizzly.config.js`);
 
     // Log discovered plugins
-    let pluginsWithConfig = this.plugins.filter(p => p.configSchema);
+    const pluginsWithConfig = this.plugins.filter(p => p.configSchema);
     if (pluginsWithConfig.length > 0) {
       output.info(`   Added config for ${pluginsWithConfig.length} plugin(s):`);
       pluginsWithConfig.forEach(p => {
@@ -94,10 +94,10 @@ export class InitCommand {
    * @returns {string} Plugin config sections as formatted string
    */
   generatePluginConfigs() {
-    let sections = [];
-    for (let plugin of this.plugins) {
+    const sections = [];
+    for (const plugin of this.plugins) {
       if (plugin.configSchema) {
-        let configStr = this.formatPluginConfig(plugin);
+        const configStr = this.formatPluginConfig(plugin);
         if (configStr) {
           sections.push(configStr);
         }
@@ -114,18 +114,18 @@ export class InitCommand {
   formatPluginConfig(plugin) {
     try {
       // Validate config schema structure with Zod (defensive check)
-      let configValueSchema = z.lazy(() => z.union([z.string(), z.number(), z.boolean(), z.null(), z.array(configValueSchema), z.record(configValueSchema)]));
-      let configSchemaValidator = z.record(configValueSchema);
+      const configValueSchema = z.lazy(() => z.union([z.string(), z.number(), z.boolean(), z.null(), z.array(configValueSchema), z.record(configValueSchema)]));
+      const configSchemaValidator = z.record(configValueSchema);
       configSchemaValidator.parse(plugin.configSchema);
-      let configEntries = [];
-      for (let [key, value] of Object.entries(plugin.configSchema)) {
-        let formattedValue = this.formatValue(value, 1);
+      const configEntries = [];
+      for (const [key, value] of Object.entries(plugin.configSchema)) {
+        const formattedValue = this.formatValue(value, 1);
         configEntries.push(`  // ${plugin.name} plugin configuration\n  ${key}: ${formattedValue}`);
       }
       return configEntries.join(',\n\n');
     } catch (error) {
       if (error instanceof z.ZodError) {
-        let messages = error.errors.map(e => `${e.path.join('.')}: ${e.message}`);
+        const messages = error.errors.map(e => `${e.path.join('.')}: ${e.message}`);
         output.warn(`Invalid config schema for plugin ${plugin.name}: ${messages.join(', ')}`);
       } else {
         output.warn(`Failed to format config for plugin ${plugin.name}: ${error.message}`);
@@ -141,25 +141,25 @@ export class InitCommand {
    * @returns {string} Formatted value
    */
   formatValue(value, depth = 0) {
-    let indent = '  '.repeat(depth);
-    let nextIndent = '  '.repeat(depth + 1);
+    const indent = '  '.repeat(depth);
+    const nextIndent = '  '.repeat(depth + 1);
     if (value === null) return 'null';
     if (value === undefined) return 'undefined';
     if (typeof value === 'string') return `'${value.replace(/'/g, "\\'")}'`;
     if (typeof value === 'number' || typeof value === 'boolean') return String(value);
     if (Array.isArray(value)) {
       if (value.length === 0) return '[]';
-      let items = value.map(item => {
-        let formatted = this.formatValue(item, depth + 1);
+      const items = value.map(item => {
+        const formatted = this.formatValue(item, depth + 1);
         return `${nextIndent}${formatted}`;
       });
       return `[\n${items.join(',\n')}\n${indent}]`;
     }
     if (typeof value === 'object') {
-      let entries = Object.entries(value);
+      const entries = Object.entries(value);
       if (entries.length === 0) return '{}';
-      let props = entries.map(([k, v]) => {
-        let formatted = this.formatValue(v, depth + 1);
+      const props = entries.map(([k, v]) => {
+        const formatted = this.formatValue(v, depth + 1);
         return `${nextIndent}${k}: ${formatted}`;
       });
       return `{\n${props.join(',\n')}\n${indent}}`;
@@ -188,7 +188,7 @@ export class InitCommand {
 
 // Export factory function for CLI
 export function createInitCommand(options) {
-  let command = new InitCommand(options.plugins);
+  const command = new InitCommand(options.plugins);
   return () => command.run(options);
 }
 
@@ -204,7 +204,7 @@ export async function init(options = {}) {
   // Try to load plugins if not provided
   if (!options.plugins) {
     try {
-      let config = await loadConfig(options.config, {});
+      const config = await loadConfig(options.config, {});
       plugins = await loadPlugins(options.config, config, null);
     } catch {
       // Silent fail - plugins are optional for init
@@ -212,6 +212,6 @@ export async function init(options = {}) {
   } else {
     plugins = options.plugins;
   }
-  let command = new InitCommand(plugins);
+  const command = new InitCommand(plugins);
   return await command.run(options);
 }

package/dist/commands/login.js

@@ -3,10 +3,10 @@
  * Authenticates user via OAuth device flow
  */
 
-import * as output from '../utils/output.js';
 import { AuthService } from '../services/auth-service.js';
-import { getApiUrl } from '../utils/environment-config.js';
 import { openBrowser } from '../utils/browser.js';
+import { getApiUrl } from '../utils/environment-config.js';
+import * as output from '../utils/output.js';
 
 /**
  * Login command implementation using OAuth device flow
@@ -19,31 +19,31 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     verbose: globalOptions.verbose,
     color: !globalOptions.noColor
   });
-  let colors = output.getColors();
+  const colors = output.getColors();
   try {
     output.info('Starting Vizzly authentication...');
     output.blank();
 
     // Create auth service
-    let authService = new AuthService({
+    const authService = new AuthService({
       baseUrl: options.apiUrl || getApiUrl()
     });
 
     // Initiate device flow
     output.startSpinner('Connecting to Vizzly...');
-    let deviceFlow = await authService.initiateDeviceFlow();
+    const deviceFlow = await authService.initiateDeviceFlow();
     output.stopSpinner();
 
     // Handle both snake_case and camelCase field names
-    let verificationUri = deviceFlow.verification_uri || deviceFlow.verificationUri;
-    let userCode = deviceFlow.user_code || deviceFlow.userCode;
-    let deviceCode = deviceFlow.device_code || deviceFlow.deviceCode;
+    const verificationUri = deviceFlow.verification_uri || deviceFlow.verificationUri;
+    const userCode = deviceFlow.user_code || deviceFlow.userCode;
+    const deviceCode = deviceFlow.device_code || deviceFlow.deviceCode;
     if (!verificationUri || !userCode || !deviceCode) {
       throw new Error('Invalid device flow response from server');
     }
 
     // Build URL with pre-filled code
-    let urlWithCode = `${verificationUri}?code=${userCode}`;
+    const urlWithCode = `${verificationUri}?code=${userCode}`;
 
     // Display user code prominently
     output.blank();
@@ -61,7 +61,7 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     output.blank();
 
     // Try to open browser with pre-filled code
-    let browserOpened = await openBrowser(urlWithCode);
+    const browserOpened = await openBrowser(urlWithCode);
     if (browserOpened) {
       output.info('Opening browser...');
     } else {
@@ -83,12 +83,12 @@ export async function loginCommand(options = {}, globalOptions = {}) {
 
     // Check authorization status
     output.startSpinner('Checking authorization status...');
-    let pollResponse = await authService.pollDeviceAuthorization(deviceCode);
+    const pollResponse = await authService.pollDeviceAuthorization(deviceCode);
     output.stopSpinner();
     let tokenData = null;
 
     // Check if authorization was successful by looking for tokens
-    if (pollResponse.tokens && pollResponse.tokens.accessToken) {
+    if (pollResponse.tokens?.accessToken) {
       // Success! We got tokens
       tokenData = pollResponse;
     } else if (pollResponse.status === 'pending') {
@@ -103,10 +103,10 @@ export async function loginCommand(options = {}, globalOptions = {}) {
 
     // Complete device flow and save tokens
     // Handle both snake_case and camelCase for token data, and nested tokens object
-    let tokensData = tokenData.tokens || tokenData;
-    let tokenExpiresIn = tokensData.expiresIn || tokensData.expires_in;
-    let tokenExpiresAt = tokenExpiresIn ? new Date(Date.now() + tokenExpiresIn * 1000).toISOString() : tokenData.expires_at || tokenData.expiresAt;
-    let tokens = {
+    const tokensData = tokenData.tokens || tokenData;
+    const tokenExpiresIn = tokensData.expiresIn || tokensData.expires_in;
+    const tokenExpiresAt = tokenExpiresIn ? new Date(Date.now() + tokenExpiresIn * 1000).toISOString() : tokenData.expires_at || tokenData.expiresAt;
+    const tokens = {
       accessToken: tokensData.accessToken || tokensData.access_token,
       refreshToken: tokensData.refreshToken || tokensData.refresh_token,
       expiresAt: tokenExpiresAt,
@@ -129,7 +129,7 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     if (tokens.organizations && tokens.organizations.length > 0) {
       output.blank();
       output.info('Organizations:');
-      for (let org of tokens.organizations) {
+      for (const org of tokens.organizations) {
         output.print(`  - ${org.name}${org.slug ? ` (@${org.slug})` : ''}`);
       }
     }
@@ -137,11 +137,11 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     // Show token expiry info
     if (tokens.expiresAt) {
       output.blank();
-      let expiresAt = new Date(tokens.expiresAt);
-      let msUntilExpiry = expiresAt.getTime() - Date.now();
-      let daysUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60 * 24));
-      let hoursUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60));
-      let minutesUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60));
+      const expiresAt = new Date(tokens.expiresAt);
+      const msUntilExpiry = expiresAt.getTime() - Date.now();
+      const daysUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60 * 24));
+      const hoursUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60));
+      const minutesUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60));
       if (daysUntilExpiry > 0) {
         output.info(`Token expires in ${daysUntilExpiry} day${daysUntilExpiry !== 1 ? 's' : ''} (${expiresAt.toLocaleDateString()})`);
       } else if (hoursUntilExpiry > 0) {
@@ -180,7 +180,7 @@ export async function loginCommand(options = {}, globalOptions = {}) {
  * @param {Object} options - Command options
  */
 export function validateLoginOptions() {
-  let errors = [];
+  const errors = [];
 
   // No specific validation needed for login command
   // OAuth device flow handles everything via browser

package/dist/commands/logout.js

@@ -3,10 +3,10 @@
  * Clears stored authentication tokens
  */
 
-import * as output from '../utils/output.js';
 import { AuthService } from '../services/auth-service.js';
 import { getApiUrl } from '../utils/environment-config.js';
 import { getAuthTokens } from '../utils/global-config.js';
+import * as output from '../utils/output.js';
 
 /**
  * Logout command implementation
@@ -21,7 +21,7 @@ export async function logoutCommand(options = {}, globalOptions = {}) {
   });
   try {
     // Check if user is logged in
-    let auth = await getAuthTokens();
+    const auth = await getAuthTokens();
     if (!auth || !auth.accessToken) {
       output.info('You are not logged in');
       output.cleanup();
@@ -30,7 +30,7 @@ export async function logoutCommand(options = {}, globalOptions = {}) {
 
     // Logout
     output.startSpinner('Logging out...');
-    let authService = new AuthService({
+    const authService = new AuthService({
       baseUrl: options.apiUrl || getApiUrl()
     });
     await authService.logout();
@@ -58,7 +58,7 @@ export async function logoutCommand(options = {}, globalOptions = {}) {
  * @param {Object} options - Command options
  */
 export function validateLogoutOptions() {
-  let errors = [];
+  const errors = [];
 
   // No specific validation needed for logout command
 

package/dist/commands/project.js

@@ -3,12 +3,12 @@
  * Select, list, and manage project tokens
  */
 
-import * as output from '../utils/output.js';
+import { resolve } from 'node:path';
+import readline from 'node:readline';
 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';
+import { deleteProjectMapping, getAuthTokens, getProjectMapping, getProjectMappings, saveProjectMapping } from '../utils/global-config.js';
+import * as output from '../utils/output.js';
 
 /**
  * Project select command - configure project for current directory
@@ -23,20 +23,20 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
   });
   try {
     // Check authentication
-    let auth = await getAuthTokens();
+    const auth = await getAuthTokens();
     if (!auth || !auth.accessToken) {
       output.error('Not authenticated');
       output.blank();
       output.info('Run "vizzly login" to authenticate first');
       process.exit(1);
     }
-    let authService = new AuthService({
+    const authService = new AuthService({
       baseUrl: options.apiUrl || getApiUrl()
     });
 
     // Get user info to show organizations
     output.startSpinner('Fetching organizations...');
-    let userInfo = await authService.whoami();
+    const userInfo = await authService.whoami();
     output.stopSpinner();
     if (!userInfo.organizations || userInfo.organizations.length === 0) {
       output.error('No organizations found');
@@ -53,12 +53,12 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
       output.print(`  ${index + 1}. ${org.name} (@${org.slug})`);
     });
     output.blank();
-    let orgChoice = await promptNumber('Enter number', 1, userInfo.organizations.length);
-    let selectedOrg = userInfo.organizations[orgChoice - 1];
+    const orgChoice = await promptNumber('Enter number', 1, userInfo.organizations.length);
+    const selectedOrg = userInfo.organizations[orgChoice - 1];
 
     // List projects for organization
     output.startSpinner(`Fetching projects for ${selectedOrg.name}...`);
-    let response = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project`, {
+    const response = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project`, {
       headers: {
         Authorization: `Bearer ${auth.accessToken}`,
         'X-Organization': selectedOrg.slug
@@ -67,7 +67,7 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
     output.stopSpinner();
 
     // Handle both array response and object with projects property
-    let projects = Array.isArray(response) ? response : response.projects || [];
+    const projects = Array.isArray(response) ? response : response.projects || [];
     if (projects.length === 0) {
       output.error('No projects found');
       output.blank();
@@ -83,12 +83,12 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
       output.print(`  ${index + 1}. ${project.name} (${project.slug})`);
     });
     output.blank();
-    let projectChoice = await promptNumber('Enter number', 1, projects.length);
-    let selectedProject = projects[projectChoice - 1];
+    const projectChoice = await promptNumber('Enter number', 1, projects.length);
+    const selectedProject = projects[projectChoice - 1];
 
     // Create API token for project
     output.startSpinner(`Creating API token for ${selectedProject.name}...`);
-    let tokenResponse = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project/${selectedProject.slug}/tokens`, {
+    const tokenResponse = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project/${selectedProject.slug}/tokens`, {
       method: 'POST',
       headers: {
         Authorization: `Bearer ${auth.accessToken}`,
@@ -103,7 +103,7 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
     output.stopSpinner();
 
     // Save project mapping
-    let currentDir = resolve(process.cwd());
+    const currentDir = resolve(process.cwd());
     await saveProjectMapping(currentDir, {
       token: tokenResponse.token,
       projectSlug: selectedProject.slug,
@@ -135,8 +135,8 @@ export async function projectListCommand(_options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
-    let mappings = await getProjectMappings();
-    let paths = Object.keys(mappings);
+    const mappings = await getProjectMappings();
+    const paths = Object.keys(mappings);
     if (paths.length === 0) {
       output.info('No projects configured');
       output.blank();
@@ -151,14 +151,14 @@ export async function projectListCommand(_options = {}, globalOptions = {}) {
     }
     output.info('Configured projects:');
     output.blank();
-    let currentDir = resolve(process.cwd());
-    for (let path of paths) {
-      let mapping = mappings[path];
-      let isCurrent = path === currentDir;
-      let marker = isCurrent ? '→' : ' ';
+    const currentDir = resolve(process.cwd());
+    for (const path of paths) {
+      const mapping = mappings[path];
+      const isCurrent = path === currentDir;
+      const marker = isCurrent ? '→' : ' ';
 
       // Extract token string (handle both string and object formats)
-      let tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
+      const tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
       output.print(`${marker} ${path}`);
       output.print(`  Project: ${mapping.projectName} (${mapping.projectSlug})`);
       output.print(`  Organization: ${mapping.organizationSlug}`);
@@ -187,8 +187,8 @@ export async function projectTokenCommand(_options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
-    let currentDir = resolve(process.cwd());
-    let mapping = await getProjectMapping(currentDir);
+    const currentDir = resolve(process.cwd());
+    const mapping = await getProjectMapping(currentDir);
     if (!mapping) {
       output.error('No project configured for this directory');
       output.blank();
@@ -197,7 +197,7 @@ export async function projectTokenCommand(_options = {}, globalOptions = {}) {
     }
 
     // Extract token string (handle both string and object formats)
-    let tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
+    const tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
     if (globalOptions.json) {
       output.data({
         token: tokenStr,
@@ -224,11 +224,11 @@ export async function projectTokenCommand(_options = {}, globalOptions = {}) {
  * Helper to make authenticated API request
  */
 async function makeAuthenticatedRequest(url, options = {}) {
-  let response = await fetch(url, options);
+  const response = await fetch(url, options);
   if (!response.ok) {
     let errorText = '';
     try {
-      let errorData = await response.json();
+      const errorData = await response.json();
       errorText = errorData.error || errorData.message || '';
     } catch {
       errorText = await response.text();
@@ -243,14 +243,14 @@ async function makeAuthenticatedRequest(url, options = {}) {
  */
 function promptNumber(message, min, max) {
   return new Promise(resolve => {
-    let rl = readline.createInterface({
+    const rl = readline.createInterface({
       input: process.stdin,
       output: process.stdout
     });
-    let ask = () => {
+    const ask = () => {
       rl.question(`${message} (${min}-${max}): `, answer => {
-        let num = parseInt(answer, 10);
-        if (isNaN(num) || num < min || num > max) {
+        const num = parseInt(answer, 10);
+        if (Number.isNaN(num) || num < min || num > max) {
           output.print(`Please enter a number between ${min} and ${max}`);
           ask();
         } else {
@@ -275,8 +275,8 @@ export async function projectRemoveCommand(_options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
-    let currentDir = resolve(process.cwd());
-    let mapping = await getProjectMapping(currentDir);
+    const currentDir = resolve(process.cwd());
+    const mapping = await getProjectMapping(currentDir);
     if (!mapping) {
       output.info('No project configured for this directory');
       output.cleanup();
@@ -290,7 +290,7 @@ export async function projectRemoveCommand(_options = {}, globalOptions = {}) {
     output.print(`  Organization: ${mapping.organizationSlug}`);
     output.print(`  Directory: ${currentDir}`);
     output.blank();
-    let confirmed = await promptConfirm('Remove this project configuration?');
+    const confirmed = await promptConfirm('Remove this project configuration?');
     if (!confirmed) {
       output.info('Cancelled');
       output.cleanup();
@@ -312,7 +312,7 @@ export async function projectRemoveCommand(_options = {}, globalOptions = {}) {
  */
 function promptConfirm(message) {
   return new Promise(resolve => {
-    let rl = readline.createInterface({
+    const rl = readline.createInterface({
       input: process.stdin,
       output: process.stdout
     });