@vizzly-testing/cli 0.20.1-beta.0 → 0.20.1

package/dist/commands/doctor.js

@@ -2,6 +2,7 @@ import { URL } from 'node:url';
 import { createApiClient, getBuilds } from '../api/index.js';
 import { ConfigError } from '../errors/vizzly-error.js';
 import { loadConfig } from '../utils/config-loader.js';
+import { getContext } from '../utils/context.js';
 import { getApiToken } from '../utils/environment-config.js';
 import * as output from '../utils/output.js';
 
@@ -16,7 +17,7 @@ export async function doctorCommand(options = {}, globalOptions = {}) {
     verbose: globalOptions.verbose,
     color: !globalOptions.noColor
   });
-  const diagnostics = {
+  let diagnostics = {
     environment: {
       nodeVersion: null,
       nodeVersionValid: null
@@ -35,72 +36,105 @@ export async function doctorCommand(options = {}, globalOptions = {}) {
     }
   };
   let hasErrors = false;
+  let checks = [];
   try {
     // Determine if we'll attempt remote checks (API connectivity)
-    const willCheckConnectivity = Boolean(options.api || getApiToken());
+    let willCheckConnectivity = Boolean(options.api || getApiToken());
 
-    // Announce preflight, indicating local-only when no token/connectivity is planned
-    output.info(`Running Vizzly preflight${willCheckConnectivity ? '' : ' (local checks only)'}...`);
+    // Show header
+    output.header('doctor', willCheckConnectivity ? 'full' : 'local');
 
     // Node.js version check (require >= 20)
-    const nodeVersion = process.version;
-    const nodeMajor = parseInt(nodeVersion.slice(1).split('.')[0], 10);
+    let nodeVersion = process.version;
+    let nodeMajor = parseInt(nodeVersion.slice(1).split('.')[0], 10);
     diagnostics.environment.nodeVersion = nodeVersion;
     diagnostics.environment.nodeVersionValid = nodeMajor >= 20;
     if (nodeMajor >= 20) {
-      output.success(`Node.js version: ${nodeVersion} (supported)`);
+      checks.push({
+        name: 'Node.js',
+        value: `${nodeVersion} (supported)`,
+        ok: true
+      });
     } else {
+      checks.push({
+        name: 'Node.js',
+        value: `${nodeVersion} (requires >= 20)`,
+        ok: false
+      });
       hasErrors = true;
-      output.error('Node.js version must be >= 20');
     }
 
     // Load configuration (apply global CLI overrides like --config only)
-    const config = await loadConfig(globalOptions.config);
+    let config = await loadConfig(globalOptions.config);
 
     // Validate apiUrl
     diagnostics.configuration.apiUrl = config.apiUrl;
     try {
-      const url = new URL(config.apiUrl);
+      let url = new URL(config.apiUrl);
       if (!['http:', 'https:'].includes(url.protocol)) {
         throw new ConfigError('URL must use http or https');
       }
       diagnostics.configuration.apiUrlValid = true;
-      output.success(`API URL: ${config.apiUrl}`);
-    } catch (e) {
+      checks.push({
+        name: 'API URL',
+        value: config.apiUrl,
+        ok: true
+      });
+    } catch (_e) {
       diagnostics.configuration.apiUrlValid = false;
+      checks.push({
+        name: 'API URL',
+        value: 'invalid (check VIZZLY_API_URL)',
+        ok: false
+      });
       hasErrors = true;
-      output.error('Invalid apiUrl in configuration (set VIZZLY_API_URL or config file)', e);
     }
 
     // Validate threshold (0..1 inclusive)
-    const threshold = Number(config?.comparison?.threshold);
+    let threshold = Number(config?.comparison?.threshold);
     diagnostics.configuration.threshold = threshold;
     // CIEDE2000 threshold: 0 = exact, 1 = JND, 2 = recommended, 3+ = permissive
-    const thresholdValid = Number.isFinite(threshold) && threshold >= 0;
+    let thresholdValid = Number.isFinite(threshold) && threshold >= 0;
     diagnostics.configuration.thresholdValid = thresholdValid;
     if (thresholdValid) {
-      output.success(`Threshold: ${threshold} (CIEDE2000 Delta E)`);
+      checks.push({
+        name: 'Threshold',
+        value: `${threshold} (CIEDE2000)`,
+        ok: true
+      });
     } else {
+      checks.push({
+        name: 'Threshold',
+        value: 'invalid',
+        ok: false
+      });
       hasErrors = true;
-      output.error('Invalid threshold (expected non-negative number)');
     }
 
     // Report effective port without binding
-    const port = config?.server?.port ?? 47392;
+    let port = config?.server?.port ?? 47392;
     diagnostics.configuration.port = port;
-    output.info(`Effective port: ${port}`);
+    checks.push({
+      name: 'Port',
+      value: String(port),
+      ok: true
+    });
 
     // Optional: API connectivity check when --api is provided or VIZZLY_TOKEN is present
-    const autoApi = Boolean(getApiToken());
+    let autoApi = Boolean(getApiToken());
     if (options.api || autoApi) {
       diagnostics.connectivity.checked = true;
       if (!config.apiKey) {
         diagnostics.connectivity.ok = false;
         diagnostics.connectivity.error = 'Missing API token (VIZZLY_TOKEN)';
+        checks.push({
+          name: 'API Token',
+          value: 'missing',
+          ok: false
+        });
         hasErrors = true;
-        output.error('Missing API token for connectivity check');
       } else {
-        output.progress('Checking API connectivity...');
+        output.startSpinner('Checking API connectivity...');
         try {
           let client = createApiClient({
             baseUrl: config.apiUrl,
@@ -111,31 +145,82 @@ export async function doctorCommand(options = {}, globalOptions = {}) {
           await getBuilds(client, {
             limit: 1
           });
+          output.stopSpinner();
           diagnostics.connectivity.ok = true;
-          output.success('API connectivity OK');
+          checks.push({
+            name: 'API',
+            value: 'connected',
+            ok: true
+          });
         } catch (err) {
+          output.stopSpinner();
           diagnostics.connectivity.ok = false;
           diagnostics.connectivity.error = err?.message || String(err);
+          checks.push({
+            name: 'API',
+            value: 'connection failed',
+            ok: false
+          });
           hasErrors = true;
-          output.error('API connectivity failed', err);
         }
       }
     }
 
-    // Summary
-    if (hasErrors) {
-      output.warn('Preflight completed with issues.');
-    } else {
-      output.success('Preflight passed.');
-    }
-
-    // Emit structured data in json/verbose modes
-    if (globalOptions.json || globalOptions.verbose) {
+    // Output results
+    if (globalOptions.json) {
+      // JSON mode - structured output only
       output.data({
         passed: !hasErrors,
         diagnostics,
         timestamp: new Date().toISOString()
       });
+    } else {
+      // Human-readable output - display results as a checklist
+      // Use printErr to match header (both on stderr for consistent ordering)
+      let colors = output.getColors();
+      for (let check of checks) {
+        let icon = check.ok ? colors.brand.success('✓') : colors.brand.danger('✗');
+        let label = colors.brand.textTertiary(check.name.padEnd(12));
+        output.printErr(`  ${icon} ${label} ${check.value}`);
+      }
+      output.printErr('');
+
+      // Summary
+      if (hasErrors) {
+        output.warn('Preflight completed with issues');
+      } else {
+        output.printErr(`  ${colors.brand.success('✓')} Preflight passed`);
+      }
+
+      // Dynamic context section (same as help output)
+      let contextItems = getContext();
+      if (contextItems.length > 0) {
+        output.printErr('');
+        output.printErr(`  ${colors.dim('─'.repeat(52))}`);
+        for (let item of contextItems) {
+          if (item.type === 'success') {
+            output.printErr(`  ${colors.green('✓')} ${colors.gray(item.label)}  ${colors.white(item.value)}`);
+          } else if (item.type === 'warning') {
+            output.printErr(`  ${colors.yellow('!')} ${colors.gray(item.label)}  ${colors.yellow(item.value)}`);
+          } else {
+            output.printErr(`  ${colors.dim('○')} ${colors.gray(item.label)}  ${colors.dim(item.value)}`);
+          }
+        }
+      }
+
+      // Footer with links
+      output.printErr('');
+      output.printErr(`  ${colors.dim('─'.repeat(52))}`);
+      output.printErr(`  ${colors.dim('Docs')} ${colors.cyan(colors.underline('docs.vizzly.dev'))}  ${colors.dim('GitHub')} ${colors.cyan(colors.underline('github.com/vizzly-testing/cli'))}`);
+
+      // Emit structured data in verbose mode (in addition to visual output)
+      if (globalOptions.verbose) {
+        output.data({
+          passed: !hasErrors,
+          diagnostics,
+          timestamp: new Date().toISOString()
+        });
+      }
     }
   } catch (error) {
     hasErrors = true;

package/dist/commands/finalize.js

@@ -64,9 +64,14 @@ export async function finalizeCommand(parallelId, options = {}, globalOptions =
     if (globalOptions.json) {
       output.data(result);
     } else {
-      output.success(`Parallel build ${result.build.id} finalized successfully`);
-      output.info(`Status: ${result.build.status}`);
-      output.info(`Parallel ID: ${result.build.parallel_id}`);
+      output.header('finalize');
+      output.complete(`Parallel build finalized`);
+      output.blank();
+      output.keyValue({
+        Build: result.build.id,
+        Status: result.build.status,
+        'Parallel ID': result.build.parallel_id
+      });
     }
     return {
       success: true,

package/dist/commands/init.js

@@ -15,14 +15,14 @@ export class InitCommand {
     this.plugins = plugins;
   }
   async run(options = {}) {
-    output.info('🎯 Initializing Vizzly configuration...');
-    output.blank();
+    output.header('init');
     try {
       // Check for existing config
-      const configPath = path.join(process.cwd(), 'vizzly.config.js');
-      const hasConfig = await this.fileExists(configPath);
+      let configPath = path.join(process.cwd(), 'vizzly.config.js');
+      let hasConfig = await this.fileExists(configPath);
       if (hasConfig && !options.force) {
-        output.info('❌ A vizzly.config.js file already exists. Use --force to overwrite.');
+        output.warn('A vizzly.config.js file already exists');
+        output.hint('Use --force to overwrite');
         return;
       }
 
@@ -32,7 +32,7 @@ export class InitCommand {
       // Show next steps
       this.showNextSteps();
       output.blank();
-      output.success('Vizzly CLI setup complete!');
+      output.complete('Vizzly CLI setup complete');
     } catch (error) {
       throw new VizzlyError('Failed to initialize Vizzly configuration', 'INIT_FAILED', {
         error: error.message
@@ -77,14 +77,14 @@ export class InitCommand {
     }
     coreConfig += '\n};\n';
     await fs.writeFile(configPath, coreConfig, 'utf8');
-    output.info(`📄 Created vizzly.config.js`);
+    output.complete('Created vizzly.config.js');
 
     // Log discovered plugins
-    const pluginsWithConfig = this.plugins.filter(p => p.configSchema);
+    let pluginsWithConfig = this.plugins.filter(p => p.configSchema);
     if (pluginsWithConfig.length > 0) {
-      output.info(`   Added config for ${pluginsWithConfig.length} plugin(s):`);
-      pluginsWithConfig.forEach(p => {
-        output.info(`   - ${p.name}`);
+      output.hint(`Added config for ${pluginsWithConfig.length} plugin(s):`);
+      output.list(pluginsWithConfig.map(p => p.name), {
+        indent: 4
       });
     }
   }
@@ -168,13 +168,8 @@ export class InitCommand {
   }
   showNextSteps() {
     output.blank();
-    output.info('📚 Next steps:');
-    output.info('   1. Set your API token:');
-    output.info('      export VIZZLY_TOKEN="your-api-key"');
-    output.info('   2. Run your tests with Vizzly:');
-    output.info('      npx vizzly run "npm test"');
-    output.info('   3. Upload screenshots:');
-    output.info('      npx vizzly upload ./screenshots');
+    output.labelValue('Next steps', '');
+    output.list(['Set your API token: export VIZZLY_TOKEN="your-api-key"', 'Run your tests with Vizzly: npx vizzly run "npm test"', 'Upload screenshots: npx vizzly upload ./screenshots']);
   }
   async fileExists(filePath) {
     try {

package/dist/commands/login.js

@@ -19,10 +19,9 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     verbose: globalOptions.verbose,
     color: !globalOptions.noColor
   });
-  const colors = output.getColors();
+  let colors = output.getColors();
   try {
-    output.info('Starting Vizzly authentication...');
-    output.blank();
+    output.header('login');
 
     // Create auth client and token store
     let client = createAuthClient({
@@ -36,40 +35,33 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     output.stopSpinner();
 
     // Handle both snake_case and camelCase field names
-    const verificationUri = deviceFlow.verification_uri || deviceFlow.verificationUri;
-    const userCode = deviceFlow.user_code || deviceFlow.userCode;
-    const deviceCode = deviceFlow.device_code || deviceFlow.deviceCode;
+    let verificationUri = deviceFlow.verification_uri || deviceFlow.verificationUri;
+    let userCode = deviceFlow.user_code || deviceFlow.userCode;
+    let 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
-    const urlWithCode = `${verificationUri}?code=${userCode}`;
+    let urlWithCode = `${verificationUri}?code=${userCode}`;
 
-    // Display user code prominently
-    output.blank();
-    output.print('='.repeat(50));
-    output.blank();
-    output.print('  Please visit the following URL to authorize this device:');
-    output.blank();
-    output.print(`  ${urlWithCode}`);
-    output.blank();
-    output.print('  Your code (pre-filled):');
-    output.blank();
-    output.print(`  ${colors.bold(colors.cyan(userCode))}`);
-    output.blank();
-    output.print('='.repeat(50));
+    // Display user code prominently in a box
+    output.printBox(['Visit this URL to authorize:', '', colors.brand.info(urlWithCode), '', 'Your code:', '', colors.bold(colors.brand.amber(userCode))], {
+      title: 'Authorization',
+      style: 'branded'
+    });
     output.blank();
 
     // Try to open browser with pre-filled code
-    const browserOpened = await openBrowser(urlWithCode);
+    let browserOpened = await openBrowser(urlWithCode);
     if (browserOpened) {
-      output.info('Opening browser...');
+      output.complete('Browser opened');
     } else {
-      output.warn('Could not open browser automatically. Please open the URL manually.');
+      output.warn('Could not open browser automatically');
+      output.hint('Please open the URL manually');
     }
     output.blank();
-    output.info('After authorizing in your browser, press Enter to continue...');
+    output.hint('After authorizing, press Enter to continue...');
 
     // Wait for user to press Enter
     await new Promise(resolve => {
@@ -83,7 +75,7 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     });
 
     // Check authorization status
-    output.startSpinner('Checking authorization status...');
+    output.startSpinner('Checking authorization...');
     let pollResponse = await pollDeviceAuthorization(client, deviceCode);
     output.stopSpinner();
     let tokenData = null;
@@ -104,10 +96,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
-    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 = {
+    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 = {
       accessToken: tokensData.accessToken || tokensData.access_token,
       refreshToken: tokensData.refreshToken || tokensData.refresh_token,
       expiresAt: tokenExpiresAt,
@@ -116,43 +108,44 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     };
     await completeDeviceFlow(tokenStore, tokens);
 
-    // Display success message
-    output.success('Successfully authenticated!');
+    // Display success
+    output.complete('Authenticated');
     output.blank();
 
     // Show user info
     if (tokens.user) {
-      output.info(`User: ${tokens.user.name || tokens.user.username}`);
-      output.info(`Email: ${tokens.user.email}`);
+      output.keyValue({
+        User: tokens.user.name || tokens.user.username,
+        Email: tokens.user.email
+      });
     }
 
     // Show organization info
     if (tokens.organizations && tokens.organizations.length > 0) {
       output.blank();
-      output.info('Organizations:');
-      for (const org of tokens.organizations) {
-        output.print(`  - ${org.name}${org.slug ? ` (@${org.slug})` : ''}`);
-      }
+      output.labelValue('Organizations', '');
+      let orgItems = tokens.organizations.map(org => `${org.name}${org.slug ? ` (@${org.slug})` : ''}`);
+      output.list(orgItems);
     }
 
     // Show token expiry info
     if (tokens.expiresAt) {
       output.blank();
-      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));
+      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));
       if (daysUntilExpiry > 0) {
-        output.info(`Token expires in ${daysUntilExpiry} day${daysUntilExpiry !== 1 ? 's' : ''} (${expiresAt.toLocaleDateString()})`);
+        output.hint(`Token expires in ${daysUntilExpiry} day${daysUntilExpiry !== 1 ? 's' : ''}`);
       } else if (hoursUntilExpiry > 0) {
-        output.info(`Token expires in ${hoursUntilExpiry} hour${hoursUntilExpiry !== 1 ? 's' : ''}`);
+        output.hint(`Token expires in ${hoursUntilExpiry} hour${hoursUntilExpiry !== 1 ? 's' : ''}`);
       } else if (minutesUntilExpiry > 0) {
-        output.info(`Token expires in ${minutesUntilExpiry} minute${minutesUntilExpiry !== 1 ? 's' : ''}`);
+        output.hint(`Token expires in ${minutesUntilExpiry} minute${minutesUntilExpiry !== 1 ? 's' : ''}`);
       }
     }
     output.blank();
-    output.info('You can now use Vizzly CLI commands without setting VIZZLY_TOKEN');
+    output.hint('You can now use Vizzly CLI commands without VIZZLY_TOKEN');
     output.cleanup();
   } catch (error) {
     output.stopSpinner();
@@ -161,13 +154,13 @@ export async function loginCommand(options = {}, globalOptions = {}) {
     if (error.name === 'AuthError') {
       output.error('Authentication failed', error);
       output.blank();
-      output.print('Please try logging in again.');
-      output.print("If you don't have an account, sign up at https://vizzly.dev");
+      output.hint('Please try logging in again');
+      output.hint("If you don't have an account, sign up at https://vizzly.dev");
       process.exit(1);
     } else if (error.code === 'RATE_LIMIT_ERROR') {
       output.error('Too many login attempts', error);
       output.blank();
-      output.print('Please wait a few minutes before trying again.');
+      output.hint('Please wait a few minutes before trying again');
       process.exit(1);
     } else {
       output.error('Login failed', error);

package/dist/commands/logout.js

@@ -20,9 +20,17 @@ export async function logoutCommand(options = {}, globalOptions = {}) {
   });
   try {
     // Check if user is logged in
-    const auth = await getAuthTokens();
+    let auth = await getAuthTokens();
     if (!auth || !auth.accessToken) {
-      output.info('You are not logged in');
+      if (globalOptions.json) {
+        output.data({
+          loggedOut: false,
+          reason: 'not_logged_in'
+        });
+      } else {
+        output.header('logout');
+        output.print('  Not logged in');
+      }
       output.cleanup();
       return;
     }
@@ -35,15 +43,15 @@ export async function logoutCommand(options = {}, globalOptions = {}) {
     let tokenStore = createTokenStore();
     await logout(client, tokenStore);
     output.stopSpinner();
-    output.success('Successfully logged out');
     if (globalOptions.json) {
       output.data({
         loggedOut: true
       });
     } else {
+      output.header('logout');
+      output.complete('Logged out');
       output.blank();
-      output.info('Your authentication tokens have been cleared');
-      output.info('Run "vizzly login" to authenticate again');
+      output.hint('Run "vizzly login" to authenticate again');
     }
     output.cleanup();
   } catch (error) {