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

package/dist/commands/project.js

@@ -22,12 +22,13 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
+    output.header('project:select');
+
     // Check authentication
-    const auth = await getAuthTokens();
+    let auth = await getAuthTokens();
     if (!auth || !auth.accessToken) {
       output.error('Not authenticated');
-      output.blank();
-      output.info('Run "vizzly login" to authenticate first');
+      output.hint('Run "vizzly login" to authenticate first');
       process.exit(1);
     }
     let client = createAuthClient({
@@ -41,25 +42,22 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
     output.stopSpinner();
     if (!userInfo.organizations || userInfo.organizations.length === 0) {
       output.error('No organizations found');
-      output.blank();
-      output.info('Create an organization at https://vizzly.dev');
+      output.hint('Create an organization at https://vizzly.dev');
       process.exit(1);
     }
 
     // Select organization
-    output.blank();
-    output.info('Select an organization:');
-    output.blank();
+    output.labelValue('Organizations', '');
     userInfo.organizations.forEach((org, index) => {
       output.print(`  ${index + 1}. ${org.name} (@${org.slug})`);
     });
     output.blank();
-    const orgChoice = await promptNumber('Enter number', 1, userInfo.organizations.length);
-    const selectedOrg = userInfo.organizations[orgChoice - 1];
+    let orgChoice = await promptNumber('Enter number', 1, userInfo.organizations.length);
+    let selectedOrg = userInfo.organizations[orgChoice - 1];
 
     // List projects for organization
     output.startSpinner(`Fetching projects for ${selectedOrg.name}...`);
-    const response = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project`, {
+    let response = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project`, {
       headers: {
         Authorization: `Bearer ${auth.accessToken}`,
         'X-Organization': selectedOrg.slug
@@ -68,28 +66,26 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
     output.stopSpinner();
 
     // Handle both array response and object with projects property
-    const projects = Array.isArray(response) ? response : response.projects || [];
+    let projects = Array.isArray(response) ? response : response.projects || [];
     if (projects.length === 0) {
       output.error('No projects found');
-      output.blank();
-      output.info(`Create a project in ${selectedOrg.name} at https://vizzly.dev`);
+      output.hint(`Create a project in ${selectedOrg.name} at https://vizzly.dev`);
       process.exit(1);
     }
 
     // Select project
     output.blank();
-    output.info('Select a project:');
-    output.blank();
+    output.labelValue('Projects', '');
     projects.forEach((project, index) => {
       output.print(`  ${index + 1}. ${project.name} (${project.slug})`);
     });
     output.blank();
-    const projectChoice = await promptNumber('Enter number', 1, projects.length);
-    const selectedProject = projects[projectChoice - 1];
+    let projectChoice = await promptNumber('Enter number', 1, projects.length);
+    let selectedProject = projects[projectChoice - 1];
 
     // Create API token for project
     output.startSpinner(`Creating API token for ${selectedProject.name}...`);
-    const tokenResponse = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project/${selectedProject.slug}/tokens`, {
+    let tokenResponse = await makeAuthenticatedRequest(`${options.apiUrl || getApiUrl()}/api/project/${selectedProject.slug}/tokens`, {
       method: 'POST',
       headers: {
         Authorization: `Bearer ${auth.accessToken}`,
@@ -104,18 +100,20 @@ export async function projectSelectCommand(options = {}, globalOptions = {}) {
     output.stopSpinner();
 
     // Save project mapping
-    const currentDir = resolve(process.cwd());
+    let currentDir = resolve(process.cwd());
     await saveProjectMapping(currentDir, {
       token: tokenResponse.token,
       projectSlug: selectedProject.slug,
       projectName: selectedProject.name,
       organizationSlug: selectedOrg.slug
     });
-    output.success('Project configured!');
+    output.complete('Project configured');
     output.blank();
-    output.info(`Project: ${selectedProject.name}`);
-    output.info(`Organization: ${selectedOrg.name}`);
-    output.info(`Directory: ${currentDir}`);
+    output.keyValue({
+      Project: selectedProject.name,
+      Organization: selectedOrg.name,
+      Directory: currentDir
+    });
     output.cleanup();
   } catch (error) {
     output.stopSpinner();
@@ -136,12 +134,17 @@ export async function projectListCommand(_options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
-    const mappings = await getProjectMappings();
-    const paths = Object.keys(mappings);
+    let mappings = await getProjectMappings();
+    let paths = Object.keys(mappings);
     if (paths.length === 0) {
-      output.info('No projects configured');
-      output.blank();
-      output.info('Run "vizzly project:select" to configure a project');
+      if (globalOptions.json) {
+        output.data({});
+      } else {
+        output.header('project:list');
+        output.print('  No projects configured');
+        output.blank();
+        output.hint('Run "vizzly project:select" to configure a project');
+      }
       output.cleanup();
       return;
     }
@@ -150,22 +153,29 @@ export async function projectListCommand(_options = {}, globalOptions = {}) {
       output.cleanup();
       return;
     }
-    output.info('Configured projects:');
-    output.blank();
-    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)
-      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}`);
+    output.header('project:list');
+    let colors = output.getColors();
+    let currentDir = resolve(process.cwd());
+    for (let path of paths) {
+      let mapping = mappings[path];
+      let isCurrent = path === currentDir;
+      let marker = isCurrent ? colors.brand.amber('→') : ' ';
+      output.print(`${marker} ${isCurrent ? colors.bold(path) : path}`);
+      output.keyValue({
+        Project: `${mapping.projectName} (${mapping.projectSlug})`,
+        Org: mapping.organizationSlug
+      }, {
+        indent: 4
+      });
       if (globalOptions.verbose) {
-        output.print(`  Token: ${tokenStr.substring(0, 20)}...`);
-        output.print(`  Created: ${new Date(mapping.createdAt).toLocaleString()}`);
+        // Extract token string (handle both string and object formats)
+        let tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
+        output.hint(`Token: ${tokenStr.substring(0, 20)}...`, {
+          indent: 4
+        });
+        output.hint(`Created: ${new Date(mapping.createdAt).toLocaleString()}`, {
+          indent: 4
+        });
       }
       output.blank();
     }
@@ -188,17 +198,16 @@ export async function projectTokenCommand(_options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
-    const currentDir = resolve(process.cwd());
-    const mapping = await getProjectMapping(currentDir);
+    let currentDir = resolve(process.cwd());
+    let mapping = await getProjectMapping(currentDir);
     if (!mapping) {
       output.error('No project configured for this directory');
-      output.blank();
-      output.info('Run "vizzly project:select" to configure a project');
+      output.hint('Run "vizzly project:select" to configure a project');
       process.exit(1);
     }
 
     // Extract token string (handle both string and object formats)
-    const tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
+    let tokenStr = typeof mapping.token === 'string' ? mapping.token : mapping.token?.token || '[invalid token]';
     if (globalOptions.json) {
       output.data({
         token: tokenStr,
@@ -208,12 +217,15 @@ export async function projectTokenCommand(_options = {}, globalOptions = {}) {
       output.cleanup();
       return;
     }
-    output.info('Project token:');
-    output.blank();
-    output.print(`  ${tokenStr}`);
+    output.header('project:token');
+    output.printBox(tokenStr, {
+      title: 'Token'
+    });
     output.blank();
-    output.info(`Project: ${mapping.projectName} (${mapping.projectSlug})`);
-    output.info(`Organization: ${mapping.organizationSlug}`);
+    output.keyValue({
+      Project: `${mapping.projectName} (${mapping.projectSlug})`,
+      Org: mapping.organizationSlug
+    });
     output.cleanup();
   } catch (error) {
     output.error('Failed to get project token', error);
@@ -276,31 +288,47 @@ export async function projectRemoveCommand(_options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
-    const currentDir = resolve(process.cwd());
-    const mapping = await getProjectMapping(currentDir);
+    let currentDir = resolve(process.cwd());
+    let mapping = await getProjectMapping(currentDir);
     if (!mapping) {
-      output.info('No project configured for this directory');
+      if (globalOptions.json) {
+        output.data({
+          removed: false,
+          reason: 'not_configured'
+        });
+      } else {
+        output.header('project:remove');
+        output.print('  No project configured for this directory');
+      }
       output.cleanup();
       return;
     }
 
     // Confirm removal
+    output.header('project:remove');
+    output.labelValue('Current configuration', '');
+    output.keyValue({
+      Project: `${mapping.projectName} (${mapping.projectSlug})`,
+      Org: mapping.organizationSlug,
+      Directory: currentDir
+    });
     output.blank();
-    output.info('Current project configuration:');
-    output.print(`  Project: ${mapping.projectName} (${mapping.projectSlug})`);
-    output.print(`  Organization: ${mapping.organizationSlug}`);
-    output.print(`  Directory: ${currentDir}`);
-    output.blank();
-    const confirmed = await promptConfirm('Remove this project configuration?');
+    let confirmed = await promptConfirm('Remove this project configuration?');
     if (!confirmed) {
-      output.info('Cancelled');
+      output.print('  Cancelled');
       output.cleanup();
       return;
     }
     await deleteProjectMapping(currentDir);
-    output.success('Project configuration removed');
-    output.blank();
-    output.info('Run "vizzly project:select" to configure a different project');
+    if (globalOptions.json) {
+      output.data({
+        removed: true
+      });
+    } else {
+      output.complete('Project configuration removed');
+      output.blank();
+      output.hint('Run "vizzly project:select" to configure a different project');
+    }
     output.cleanup();
   } catch (error) {
     output.error('Failed to remove project configuration', error);

package/dist/commands/run.js

@@ -4,7 +4,7 @@
  */
 
 import { spawn as defaultSpawn } from 'node:child_process';
-import { createBuild as defaultCreateApiBuild, createApiClient as defaultCreateApiClient, finalizeBuild as defaultFinalizeApiBuild, getBuild as defaultGetBuild } from '../api/index.js';
+import { createBuild as defaultCreateApiBuild, createApiClient as defaultCreateApiClient, finalizeBuild as defaultFinalizeApiBuild, getBuild as defaultGetBuild, getTokenContext as defaultGetTokenContext } from '../api/index.js';
 import { VizzlyError } from '../errors/vizzly-error.js';
 import { createServerManager as defaultCreateServerManager } from '../server-manager/index.js';
 import { createBuildObject as defaultCreateBuildObject } from '../services/build-manager.js';
@@ -28,6 +28,7 @@ export async function runCommand(testCommand, options = {}, globalOptions = {},
     createApiBuild = defaultCreateApiBuild,
     finalizeApiBuild = defaultFinalizeApiBuild,
     getBuild = defaultGetBuild,
+    getTokenContext = defaultGetTokenContext,
     createServerManager = defaultCreateServerManager,
     createBuildObject = defaultCreateBuildObject,
     createUploader = defaultCreateUploader,
@@ -257,13 +258,38 @@ export async function runCommand(testCommand, options = {}, globalOptions = {},
       if (result.buildId) {
         buildId = result.buildId;
       }
-      output.success('Test run completed successfully');
+      output.complete('Test run completed');
 
-      // Show Vizzly summary
+      // Show Vizzly summary with link to results
       if (result.buildId) {
-        output.print(`🐻 Vizzly: Captured ${result.screenshotsCaptured} screenshots in build ${result.buildId}`);
-        if (result.url) {
-          output.print(`🔗 Vizzly: View results at ${result.url}`);
+        output.blank();
+        let colors = output.getColors();
+        output.print(`  ${colors.brand.textTertiary('Screenshots')}  ${colors.white(result.screenshotsCaptured)}`);
+
+        // Get URL from result, or construct one as fallback
+        let displayUrl = result.url;
+        if (!displayUrl && config.apiKey) {
+          try {
+            let client = createApiClient({
+              baseUrl: config.apiUrl,
+              token: config.apiKey,
+              command: 'run'
+            });
+            let tokenContext = await getTokenContext(client);
+            let baseUrl = config.apiUrl.replace(/\/api.*$/, '');
+            if (tokenContext.organization?.slug && tokenContext.project?.slug) {
+              displayUrl = `${baseUrl}/${tokenContext.organization.slug}/${tokenContext.project.slug}/builds/${result.buildId}`;
+            }
+          } catch {
+            // Fallback to simple URL if context fetch fails
+            let baseUrl = config.apiUrl.replace(/\/api.*$/, '');
+            displayUrl = `${baseUrl}/builds/${result.buildId}`;
+          }
+        }
+        if (displayUrl) {
+          output.print(`  ${colors.brand.textTertiary('Results')}      ${colors.cyan(colors.underline(displayUrl))}`);
+        } else {
+          output.print(`  ${colors.brand.textTertiary('Build')}        ${colors.dim(result.buildId)}`);
         }
       }
     } catch (error) {

package/dist/commands/status.js

@@ -21,8 +21,6 @@ export async function statusCommand(buildId, options = {}, globalOptions = {}) {
     color: !globalOptions.noColor
   });
   try {
-    output.info(`Checking status for build: ${buildId}`);
-
     // Load configuration with CLI overrides
     let allOptions = {
       ...globalOptions,
@@ -49,45 +47,7 @@ export async function statusCommand(buildId, options = {}, globalOptions = {}) {
     // Extract build data from API response
     let build = buildStatus.build || buildStatus;
 
-    // Display build summary
-    output.success(`Build: ${build.name || build.id}`);
-    output.info(`Status: ${build.status.toUpperCase()}`);
-    output.info(`Environment: ${build.environment}`);
-    if (build.branch) {
-      output.info(`Branch: ${build.branch}`);
-    }
-    if (build.commit_sha) {
-      output.info(`Commit: ${build.commit_sha.substring(0, 8)} - ${build.commit_message || 'No message'}`);
-    }
-
-    // Show screenshot and comparison stats
-    output.info(`Screenshots: ${build.screenshot_count || 0} total`);
-    output.info(`Comparisons: ${build.total_comparisons || 0} total (${build.new_comparisons || 0} new, ${build.changed_comparisons || 0} changed, ${build.identical_comparisons || 0} identical)`);
-    if (build.approval_status) {
-      output.info(`Approval Status: ${build.approval_status}`);
-    }
-
-    // Show timing information
-    if (build.created_at) {
-      output.info(`Created: ${new Date(build.created_at).toLocaleString()}`);
-    }
-    if (build.completed_at) {
-      output.info(`Completed: ${new Date(build.completed_at).toLocaleString()}`);
-    } else if (build.status !== 'completed' && build.status !== 'failed') {
-      output.info(`Started: ${new Date(build.started_at || build.created_at).toLocaleString()}`);
-    }
-    if (build.execution_time_ms) {
-      output.info(`Execution Time: ${Math.round(build.execution_time_ms / 1000)}s`);
-    }
-
-    // Show build URL if we can construct it
-    let baseUrl = config.baseUrl || getApiUrl();
-    if (baseUrl && build.project_id) {
-      let buildUrl = baseUrl.replace('/api', '') + `/projects/${build.project_id}/builds/${build.id}`;
-      output.info(`View Build: ${buildUrl}`);
-    }
-
-    // Output JSON data for --json mode
+    // Output in JSON mode
     if (globalOptions.json) {
       let statusData = {
         buildId: build.id,
@@ -111,26 +71,96 @@ export async function statusCommand(buildId, options = {}, globalOptions = {}) {
         userAgent: build.user_agent
       };
       output.data(statusData);
+      output.cleanup();
+      return;
+    }
+
+    // Human-readable output
+    output.header('status', build.status);
+
+    // Build info section
+    let buildInfo = {
+      Name: build.name || build.id,
+      Status: build.status.toUpperCase(),
+      Environment: build.environment
+    };
+    if (build.branch) {
+      buildInfo.Branch = build.branch;
+    }
+    if (build.commit_sha) {
+      buildInfo.Commit = `${build.commit_sha.substring(0, 8)} - ${build.commit_message || 'No message'}`;
+    }
+    output.keyValue(buildInfo);
+    output.blank();
+
+    // Comparison stats with visual indicators
+    let colors = output.getColors();
+    let stats = [];
+    let newCount = build.new_comparisons || 0;
+    let changedCount = build.changed_comparisons || 0;
+    let identicalCount = build.identical_comparisons || 0;
+    let screenshotCount = build.screenshot_count || 0;
+    output.labelValue('Screenshots', String(screenshotCount));
+    if (newCount > 0) {
+      stats.push(`${colors.brand.info(newCount)} new`);
+    }
+    if (changedCount > 0) {
+      stats.push(`${colors.brand.warning(changedCount)} changed`);
+    }
+    if (identicalCount > 0) {
+      stats.push(`${colors.brand.success(identicalCount)} identical`);
+    }
+    if (stats.length > 0) {
+      output.labelValue('Comparisons', stats.join(colors.brand.textMuted(' · ')));
+    }
+    if (build.approval_status) {
+      output.labelValue('Approval', build.approval_status);
+    }
+    output.blank();
+
+    // Timing info
+    if (build.created_at) {
+      output.hint(`Created ${new Date(build.created_at).toLocaleString()}`);
+    }
+    if (build.completed_at) {
+      output.hint(`Completed ${new Date(build.completed_at).toLocaleString()}`);
+    } else if (build.status !== 'completed' && build.status !== 'failed') {
+      output.hint(`Started ${new Date(build.started_at || build.created_at).toLocaleString()}`);
+    }
+    if (build.execution_time_ms) {
+      output.hint(`Took ${Math.round(build.execution_time_ms / 1000)}s`);
+    }
+
+    // Show build URL if we can construct it
+    let baseUrl = config.baseUrl || getApiUrl();
+    if (baseUrl && build.project_id) {
+      let buildUrl = baseUrl.replace('/api', '') + `/projects/${build.project_id}/builds/${build.id}`;
+      output.blank();
+      output.labelValue('View', output.link('Build', buildUrl));
     }
 
     // Show additional info in verbose mode
     if (globalOptions.verbose) {
-      output.info('\n--- Additional Details ---');
+      output.blank();
+      output.divider();
+      output.blank();
+      let verboseInfo = {};
       if (build.approved_screenshots > 0 || build.rejected_screenshots > 0 || build.pending_screenshots > 0) {
-        output.info(`Screenshot Approvals: ${build.approved_screenshots || 0} approved, ${build.rejected_screenshots || 0} rejected, ${build.pending_screenshots || 0} pending`);
+        verboseInfo.Approvals = `${build.approved_screenshots || 0} approved, ${build.rejected_screenshots || 0} rejected, ${build.pending_screenshots || 0} pending`;
       }
       if (build.avg_diff_percentage !== null) {
-        output.info(`Average Diff: ${(build.avg_diff_percentage * 100).toFixed(2)}%`);
+        verboseInfo['Avg Diff'] = `${(build.avg_diff_percentage * 100).toFixed(2)}%`;
       }
       if (build.github_pull_request_number) {
-        output.info(`GitHub PR: #${build.github_pull_request_number}`);
+        verboseInfo['GitHub PR'] = `#${build.github_pull_request_number}`;
       }
       if (build.is_baseline) {
-        output.info('This build is marked as a baseline');
+        verboseInfo.Baseline = 'Yes';
       }
-      output.info(`User Agent: ${build.user_agent || 'Unknown'}`);
-      output.info(`Build ID: ${build.id}`);
-      output.info(`Project ID: ${build.project_id}`);
+      verboseInfo['User Agent'] = build.user_agent || 'Unknown';
+      verboseInfo['Build ID'] = build.id;
+      verboseInfo['Project ID'] = build.project_id;
+      output.keyValue(verboseInfo);
     }
 
     // Show progress if build is still processing
@@ -138,7 +168,8 @@ export async function statusCommand(buildId, options = {}, globalOptions = {}) {
       let totalJobs = build.completed_jobs + build.failed_jobs + build.processing_screenshots;
       if (totalJobs > 0) {
         let progress = (build.completed_jobs + build.failed_jobs) / totalJobs;
-        output.info(`Progress: ${Math.round(progress * 100)}% complete`);
+        output.blank();
+        output.print(`  ${output.progressBar(progress * 100, 100)} ${Math.round(progress * 100)}%`);
       }
     }
     output.cleanup();