@vizzly-testing/cli 0.20.0 → 0.20.1-beta.1

package/dist/commands/tdd-daemon.js

@@ -20,8 +20,14 @@ export async function tddStartCommand(options = {}, globalOptions = {}) {
   // Check if server already running
   if (await isServerRunning(options.port || 47392)) {
     const port = options.port || 47392;
-    output.info(`TDD server already running at http://localhost:${port}`);
-    output.info(`Dashboard: http://localhost:${port}/dashboard`);
+    let colors = output.getColors();
+    output.header('tdd', 'local');
+    output.print(`  ${output.statusDot('success')} Already running`);
+    output.blank();
+    output.printBox(colors.brand.info(colors.underline(`http://localhost:${port}`)), {
+      title: 'Dashboard',
+      style: 'branded'
+    });
     if (options.open) {
       openDashboard(port);
     }
@@ -37,6 +43,9 @@ export async function tddStartCommand(options = {}, globalOptions = {}) {
     }
     const port = options.port || 47392;
 
+    // Show header first so debug messages appear below it
+    output.header('tdd', 'local');
+
     // Show loading indicator if downloading baselines (but not in verbose mode since child shows progress)
     if (options.baselineBuild && !globalOptions.verbose) {
       output.startSpinner(`Downloading baselines from build ${options.baselineBuild}...`);
@@ -109,7 +118,6 @@ export async function tddStartCommand(options = {}, globalOptions = {}) {
       output.error('Failed to start TDD server - server not responding to health checks');
       process.exit(1);
     }
-    output.success(`TDD server started at http://localhost:${port}`);
 
     // Write server info to global location for SDK discovery (iOS/Swift can read this)
     try {
@@ -129,22 +137,29 @@ export async function tddStartCommand(options = {}, globalOptions = {}) {
     } catch {
       // Non-fatal, SDK can still use health check
     }
+
+    // Get colors for styled output
+    let colors = output.getColors();
+
+    // Show dashboard URL in a branded box
+    let dashboardUrl = `http://localhost:${port}`;
+    output.printBox(colors.brand.info(colors.underline(dashboardUrl)), {
+      title: 'Dashboard',
+      style: 'branded'
+    });
+
+    // Verbose mode: show next steps
+    if (globalOptions.verbose) {
+      output.blank();
+      output.print(`  ${colors.brand.textTertiary('Next steps')}`);
+      output.print(`    ${colors.brand.textMuted('1.')} Run tests in watch mode ${colors.brand.textMuted('(npm test -- --watch)')}`);
+      output.print(`    ${colors.brand.textMuted('2.')} Review visual changes in the dashboard`);
+      output.print(`    ${colors.brand.textMuted('3.')} Accept or reject baseline updates`);
+    }
+
+    // Always show stop hint
     output.blank();
-    output.info('Dashboard:');
-    output.info(`  http://localhost:${port}/`);
-    output.blank();
-    output.info('Available views:');
-    output.info(`  Comparisons: http://localhost:${port}/`);
-    output.info(`  Stats:       http://localhost:${port}/stats`);
-    output.info(`  Settings:    http://localhost:${port}/settings`);
-    output.info(`  Projects:    http://localhost:${port}/projects`);
-    output.blank();
-    output.info('Next steps:');
-    output.info('  1. Run your tests in watch mode (e.g., npm test -- --watch)');
-    output.info('  2. View live visual comparisons in the dashboard');
-    output.info('  3. Accept/reject baselines directly in the UI');
-    output.blank();
-    output.info('Stop server: npx vizzly dev stop');
+    output.hint('Stop with: vizzly tdd stop');
     if (options.open) {
       openDashboard(port);
     }
@@ -289,9 +304,11 @@ export async function tddStopCommand(options = {}, globalOptions = {}) {
     return;
   }
   try {
+    let _colors = output.getColors();
+
     // Try to kill the process gracefully
     process.kill(pid, 'SIGTERM');
-    output.info(`Stopping TDD server (PID: ${pid})...`);
+    output.startSpinner('Stopping TDD server...');
 
     // Give it a moment to shut down gracefully
     await new Promise(resolve => setTimeout(resolve, 2000));
@@ -301,15 +318,16 @@ export async function tddStopCommand(options = {}, globalOptions = {}) {
       process.kill(pid, 0); // Just check if process exists
       // If we get here, process is still running, force kill it
       process.kill(pid, 'SIGKILL');
-      output.info('Force killed TDD server');
+      output.stopSpinner();
+      output.debug('tdd', 'Force killed process');
     } catch {
       // Process is gone, which is what we want
+      output.stopSpinner();
     }
 
     // Clean up files
     if (existsSync(pidFile)) unlinkSync(pidFile);
     if (existsSync(serverFile)) unlinkSync(serverFile);
-    output.success('TDD server stopped');
   } catch (error) {
     if (error.code === 'ESRCH') {
       // Process not found - clean up stale files
@@ -356,25 +374,36 @@ export async function tddStatusCommand(_options, globalOptions = {}) {
     // Try to check health endpoint
     const health = await checkServerHealth(serverInfo.port);
     if (health.running) {
-      output.success(`TDD server running (PID: ${pid})`);
-      output.info(`Dashboard: http://localhost:${serverInfo.port}/`);
-      output.blank();
-      output.info('Available views:');
-      output.info(`  Comparisons: http://localhost:${serverInfo.port}/`);
-      output.info(`  Stats:       http://localhost:${serverInfo.port}/stats`);
-      output.info(`  Settings:    http://localhost:${serverInfo.port}/settings`);
-      output.info(`  Projects:    http://localhost:${serverInfo.port}/projects`);
+      let colors = output.getColors();
+
+      // Show header
+      output.header('tdd', 'local');
+
+      // Show running status with uptime
+      let uptimeStr = '';
       if (serverInfo.startTime) {
         const uptime = Math.floor((Date.now() - serverInfo.startTime) / 1000);
         const hours = Math.floor(uptime / 3600);
         const minutes = Math.floor(uptime % 3600 / 60);
         const seconds = uptime % 60;
-        let uptimeStr = '';
         if (hours > 0) uptimeStr += `${hours}h `;
         if (minutes > 0 || hours > 0) uptimeStr += `${minutes}m `;
         uptimeStr += `${seconds}s`;
+      }
+      output.print(`  ${output.statusDot('success')} Running ${uptimeStr ? colors.brand.textTertiary(`· ${uptimeStr}`) : ''}`);
+      output.blank();
+
+      // Show dashboard URL in a branded box
+      let dashboardUrl = `http://localhost:${serverInfo.port}`;
+      output.printBox(colors.brand.info(colors.underline(dashboardUrl)), {
+        title: 'Dashboard',
+        style: 'branded'
+      });
+
+      // Verbose mode: show PID
+      if (globalOptions.verbose) {
         output.blank();
-        output.info(`Uptime: ${uptimeStr}`);
+        output.print(`  ${colors.brand.textTertiary('PID:')} ${pid}`);
       }
     } else {
       output.warn('TDD server process exists but not responding to health checks');
@@ -430,7 +459,7 @@ async function checkServerHealth(port = 47392) {
  * @private
  */
 function openDashboard(port = 47392) {
-  const url = `http://localhost:${port}/dashboard`;
+  const url = `http://localhost:${port}`;
 
   // Cross-platform open command
   let openCmd;

package/dist/commands/tdd.js

@@ -1,43 +1,73 @@
-import { createServices } from '../services/index.js';
-import { loadConfig } from '../utils/config-loader.js';
-import { detectBranch, detectCommit } from '../utils/git.js';
-import * as output from '../utils/output.js';
+/**
+ * TDD command implementation
+ * Uses functional operations directly - no class wrappers needed
+ */
+
+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 { VizzlyError } from '../errors/vizzly-error.js';
+import { createServerManager as defaultCreateServerManager } from '../server-manager/index.js';
+import { createBuildObject as defaultCreateBuildObject } from '../services/build-manager.js';
+import { initializeDaemon as defaultInitializeDaemon, runTests as defaultRunTests } from '../test-runner/index.js';
+import { loadConfig as defaultLoadConfig } from '../utils/config-loader.js';
+import { detectBranch as defaultDetectBranch, detectCommit as defaultDetectCommit } from '../utils/git.js';
+import * as defaultOutput from '../utils/output.js';
 
 /**
  * TDD command implementation
  * @param {string} testCommand - Test command to execute
  * @param {Object} options - Command options
  * @param {Object} globalOptions - Global CLI options
+ * @param {Object} deps - Dependencies for testing
  * @returns {Promise<{result: Object, cleanup: Function}>} Result and cleanup function
  */
-export async function tddCommand(testCommand, options = {}, globalOptions = {}) {
+export async function tddCommand(testCommand, options = {}, globalOptions = {}, deps = {}) {
+  let {
+    loadConfig = defaultLoadConfig,
+    createApiClient = defaultCreateApiClient,
+    createApiBuild = defaultCreateApiBuild,
+    finalizeApiBuild = defaultFinalizeApiBuild,
+    getBuild = defaultGetBuild,
+    createServerManager = defaultCreateServerManager,
+    createBuildObject = defaultCreateBuildObject,
+    initializeDaemon = defaultInitializeDaemon,
+    runTests = defaultRunTests,
+    detectBranch = defaultDetectBranch,
+    detectCommit = defaultDetectCommit,
+    spawn = defaultSpawn,
+    output = defaultOutput
+  } = deps;
   output.configure({
     json: globalOptions.json,
     verbose: globalOptions.verbose,
     color: !globalOptions.noColor
   });
-  let testRunner = null;
+  let serverManager = null;
+  let testProcess = null;
   let isCleanedUp = false;
 
   // Create cleanup function that can be called by the caller
-  const cleanup = async () => {
+  let cleanup = async () => {
     if (isCleanedUp) return;
     isCleanedUp = true;
     output.cleanup();
-    if (testRunner?.cancel) {
-      await testRunner.cancel();
+    if (testProcess && !testProcess.killed) {
+      testProcess.kill('SIGKILL');
+    }
+    if (serverManager) {
+      await serverManager.stop();
     }
   };
   try {
     // Load configuration with CLI overrides
-    const allOptions = {
+    let allOptions = {
       ...globalOptions,
       ...options
     };
-    const config = await loadConfig(globalOptions.config, allOptions);
+    let config = await loadConfig(globalOptions.config, allOptions);
 
     // Dev mode works locally by default - only needs token for baseline download
-    const needsToken = options.baselineBuild || options.baselineComparison;
+    let needsToken = options.baselineBuild || options.baselineComparison;
     if (!config.apiKey && needsToken) {
       throw new Error('API token required when using --baseline-build or --baseline-comparison flags');
     }
@@ -46,97 +76,65 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {})
     config.allowNoToken = true;
 
     // Collect git metadata
-    const branch = await detectBranch(options.branch);
-    const commit = await detectCommit(options.commit);
+    let branch = await detectBranch(options.branch);
+    let commit = await detectCommit(options.commit);
 
     // Show header (skip in daemon mode)
     if (!options.daemon) {
-      const mode = config.apiKey ? 'local' : 'local';
+      let mode = config.apiKey ? 'local' : 'local';
       output.header('tdd', mode);
 
       // Show config in verbose mode
-      output.debug('config', 'loaded', {
-        port: config.server.port,
-        branch,
-        threshold: config.comparison.threshold
-      });
+      output.debug('config', `port=${config.server.port} threshold=${config.comparison.threshold}`);
     }
 
-    // Create services
+    // Create functional dependencies
     output.startSpinner('Initializing TDD server...');
-    const configWithVerbose = {
+    let configWithVerbose = {
       ...config,
       verbose: globalOptions.verbose
     };
-    const services = createServices(configWithVerbose, 'tdd');
-    testRunner = services.testRunner;
-    output.stopSpinner();
 
-    // Set up event handlers for user feedback
-    testRunner.on('progress', progressData => {
-      const {
-        message: progressMessage
-      } = progressData;
-      output.progress(progressMessage || 'Running tests...');
-    });
-    testRunner.on('test-output', data => {
-      // In non-JSON mode, show test output directly
-      if (!globalOptions.json) {
-        output.stopSpinner();
-        output.print(data.data);
-      }
-    });
-    testRunner.on('server-ready', serverInfo => {
-      // Only show in non-daemon mode (daemon shows its own startup message)
-      if (!options.daemon) {
-        output.debug('server', `listening on :${serverInfo.port}`);
-      }
-    });
-    testRunner.on('screenshot-captured', screenshotInfo => {
-      output.debug('capture', screenshotInfo.name);
-    });
-    testRunner.on('comparison-result', comparisonInfo => {
-      const {
-        name,
-        status,
-        pixelDifference
-      } = comparisonInfo;
-      if (status === 'passed') {
-        output.debug('compare', `${name} passed`);
-      } else if (status === 'failed') {
-        output.warn(`${name}: ${pixelDifference}% difference`);
-      } else if (status === 'new') {
-        output.debug('compare', `${name} (new baseline)`);
+    // Create server manager (functional object)
+    serverManager = createServerManager(configWithVerbose, {});
+
+    // Create build manager (functional object that provides the interface runTests expects)
+    let buildManager = {
+      async createBuild(buildOptions) {
+        return createBuildObject(buildOptions);
       }
-    });
-    testRunner.on('error', error => {
-      output.error('Test runner error', error);
-    });
-    const runOptions = {
+    };
+    output.stopSpinner();
+    let runOptions = {
       testCommand,
       port: config.server.port,
       timeout: config.server.timeout,
       tdd: true,
       daemon: options.daemon || false,
-      // Daemon mode flag
       setBaseline: options.setBaseline || false,
-      // Pass through baseline update mode
       branch,
       commit,
       environment: config.build.environment,
       threshold: config.comparison.threshold,
       allowNoToken: config.allowNoToken || false,
-      // Pass through the allow-no-token setting
       baselineBuildId: config.baselineBuildId,
       baselineComparisonId: config.baselineComparisonId,
-      wait: false // No build to wait for in dev mode
+      wait: false
     };
 
     // In daemon mode, just start the server without running tests
     if (options.daemon) {
-      await testRunner.initialize(runOptions);
-
-      // Return immediately so daemon can set up its lifecycle
+      await initializeDaemon({
+        initOptions: runOptions,
+        deps: {
+          serverManager,
+          createError: (msg, code) => new VizzlyError(msg, code),
+          output,
+          onServerReady: data => {
+            output.debug('server', `ready on :${data.port}`);
+          }
+        }
+      });
       return {
         result: {
           success: true,
@@ -149,30 +147,38 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {})
 
     // Normal dev mode - run tests
     output.debug('run', testCommand);
-    const runResult = await testRunner.run(runOptions);
-
-    // Show summary
-    const {
-      screenshotsCaptured,
-      comparisons
-    } = runResult;
-
-    // Determine success based on comparison results
-    const hasFailures = runResult.failed || runResult.comparisons?.some(c => c.status === 'failed');
-    if (comparisons && comparisons.length > 0) {
-      const passed = comparisons.filter(c => c.status === 'passed').length;
-      const failed = comparisons.filter(c => c.status === 'failed').length;
-      if (hasFailures) {
-        output.error(`${failed} visual difference${failed !== 1 ? 's' : ''} detected`);
-        output.info(`Check .vizzly/diffs/ for diff images`);
-      } else {
-        output.result(`${screenshotsCaptured} screenshot${screenshotsCaptured !== 1 ? 's' : ''} · ${passed} passed`);
+    let runResult = await runTests({
+      runOptions,
+      config: configWithVerbose,
+      deps: {
+        serverManager,
+        buildManager,
+        spawn: (command, spawnOptions) => {
+          let proc = spawn(command, spawnOptions);
+          testProcess = proc;
+          return proc;
+        },
+        createApiClient,
+        createApiBuild,
+        getBuild,
+        finalizeApiBuild,
+        createError: (msg, code) => new VizzlyError(msg, code),
+        output,
+        onBuildCreated: data => {
+          output.debug('build', `created ${data.buildId?.substring(0, 8)}`);
+        },
+        onServerReady: data => {
+          output.debug('server', `ready on :${data.port}`);
+        },
+        onFinalizeFailed: data => {
+          output.warn(`Failed to finalize build: ${data.error}`);
+        }
       }
-    } else {
-      output.result(`${screenshotsCaptured} screenshot${screenshotsCaptured !== 1 ? 's' : ''}`);
-    }
+    });
 
-    // Return result and cleanup function
+    // Determine success based on comparison results
+    // (Summary is printed by printResults() in tdd-service.js, called from getTddResults)
+    let hasFailures = runResult.failed || runResult.comparisons?.some(c => c.status === 'failed');
     return {
       result: {
         success: !hasFailures,
@@ -200,24 +206,24 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {})
  * @param {Object} options - Command options
  */
 export function validateTddOptions(testCommand, options) {
-  const errors = [];
+  let errors = [];
   if (!testCommand || testCommand.trim() === '') {
     errors.push('Test command is required');
   }
   if (options.port) {
-    const port = parseInt(options.port, 10);
+    let port = parseInt(options.port, 10);
     if (Number.isNaN(port) || port < 1 || port > 65535) {
       errors.push('Port must be a valid number between 1 and 65535');
     }
   }
   if (options.timeout) {
-    const timeout = parseInt(options.timeout, 10);
+    let timeout = parseInt(options.timeout, 10);
     if (Number.isNaN(timeout) || timeout < 1000) {
       errors.push('Timeout must be at least 1000 milliseconds');
     }
   }
   if (options.threshold !== undefined) {
-    const threshold = parseFloat(options.threshold);
+    let threshold = parseFloat(options.threshold);
     if (Number.isNaN(threshold) || threshold < 0) {
       errors.push('Threshold must be a non-negative number (CIEDE2000 Delta E)');
     }

package/dist/commands/upload.js

@@ -1,25 +1,31 @@
-import { ApiService } from '../services/api-service.js';
-import { createServices } from '../services/index.js';
-import { loadConfig } from '../utils/config-loader.js';
-import { detectBranch, detectCommit, detectCommitMessage, detectPullRequestNumber, generateBuildNameWithGit } from '../utils/git.js';
-import * as output from '../utils/output.js';
+import { createApiClient as defaultCreateApiClient, finalizeBuild as defaultFinalizeBuild, getTokenContext as defaultGetTokenContext } from '../api/index.js';
+import { createUploader as defaultCreateUploader } from '../services/uploader.js';
+import { loadConfig as defaultLoadConfig } from '../utils/config-loader.js';
+import { detectBranch as defaultDetectBranch, detectCommit as defaultDetectCommit, detectCommitMessage as defaultDetectCommitMessage, detectPullRequestNumber as defaultDetectPullRequestNumber, generateBuildNameWithGit as defaultGenerateBuildNameWithGit } from '../utils/git.js';
+import * as defaultOutput from '../utils/output.js';
 
 /**
  * Construct proper build URL with org/project context
  * @param {string} buildId - Build ID
  * @param {string} apiUrl - API base URL
  * @param {string} apiToken - API token
+ * @param {Object} deps - Dependencies
  * @returns {Promise<string>} Proper build URL
  */
-async function constructBuildUrl(buildId, apiUrl, apiToken) {
+export async function constructBuildUrl(buildId, apiUrl, apiToken, deps = {}) {
+  let {
+    createApiClient = defaultCreateApiClient,
+    getTokenContext = defaultGetTokenContext,
+    output = defaultOutput
+  } = deps;
   try {
-    const apiService = new ApiService({
+    let client = createApiClient({
       baseUrl: apiUrl,
       token: apiToken,
       command: 'upload'
     });
-    const tokenContext = await apiService.getTokenContext();
-    const baseUrl = apiUrl.replace(/\/api.*$/, '');
+    let tokenContext = await getTokenContext(client);
+    let baseUrl = apiUrl.replace(/\/api.*$/, '');
     if (tokenContext.organization?.slug && tokenContext.project?.slug) {
       return `${baseUrl}/${tokenContext.organization.slug}/${tokenContext.project.slug}/builds/${buildId}`;
     }
@@ -31,7 +37,7 @@ async function constructBuildUrl(buildId, apiUrl, apiToken) {
   }
 
   // Fallback URL construction
-  const baseUrl = apiUrl.replace(/\/api.*$/, '');
+  let baseUrl = apiUrl.replace(/\/api.*$/, '');
   return `${baseUrl}/builds/${buildId}`;
 }
 
@@ -40,8 +46,23 @@ async function constructBuildUrl(buildId, apiUrl, apiToken) {
  * @param {string} screenshotsPath - Path to screenshots
  * @param {Object} options - Command options
  * @param {Object} globalOptions - Global CLI options
+ * @param {Object} deps - Dependencies for testing
  */
-export async function uploadCommand(screenshotsPath, options = {}, globalOptions = {}) {
+export async function uploadCommand(screenshotsPath, options = {}, globalOptions = {}, deps = {}) {
+  let {
+    loadConfig = defaultLoadConfig,
+    createApiClient = defaultCreateApiClient,
+    finalizeBuild = defaultFinalizeBuild,
+    createUploader = defaultCreateUploader,
+    detectBranch = defaultDetectBranch,
+    detectCommit = defaultDetectCommit,
+    detectCommitMessage = defaultDetectCommitMessage,
+    detectPullRequestNumber = defaultDetectPullRequestNumber,
+    generateBuildNameWithGit = defaultGenerateBuildNameWithGit,
+    output = defaultOutput,
+    exit = code => process.exit(code),
+    buildUrlConstructor = constructBuildUrl
+  } = deps;
   output.configure({
     json: globalOptions.json,
     verbose: globalOptions.verbose,
@@ -63,7 +84,11 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
     // Validate API token
     if (!config.apiKey) {
       output.error('API token required. Use --token or set VIZZLY_TOKEN environment variable');
-      process.exit(1);
+      exit(1);
+      return {
+        success: false,
+        reason: 'no-api-key'
+      };
     }
 
     // Collect git metadata if not provided
@@ -83,10 +108,12 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
       });
     }
 
-    // Get uploader service
+    // Create uploader
     output.startSpinner('Initializing uploader...');
-    const services = createServices(config, 'upload');
-    const uploader = services.uploader;
+    let uploader = createUploader({
+      ...config,
+      command: 'upload'
+    });
 
     // Prepare upload options with progress callback
     const uploadOptions = {
@@ -135,64 +162,81 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
     if (result.buildId) {
       output.progress('Finalizing build...');
       try {
-        const apiService = new ApiService({
+        let client = createApiClient({
           baseUrl: config.apiUrl,
           token: config.apiKey,
           command: 'upload'
         });
-        const executionTime = Date.now() - uploadStartTime;
-        await apiService.finalizeBuild(result.buildId, true, executionTime);
+        let executionTime = Date.now() - uploadStartTime;
+        await finalizeBuild(client, result.buildId, true, executionTime);
       } catch (error) {
         output.warn(`Failed to finalize build: ${error.message}`);
       }
     }
-    output.success('Upload completed successfully');
+    output.complete('Upload completed');
 
     // Show Vizzly summary
     if (result.buildId) {
-      output.info(`🐻 Vizzly: Uploaded ${result.stats.uploaded} of ${result.stats.total} screenshots to build ${result.buildId}`);
+      output.blank();
+      output.keyValue({
+        Uploaded: `${result.stats.uploaded} of ${result.stats.total}`,
+        Build: result.buildId
+      });
       // Use API-provided URL or construct proper URL with org/project context
-      const buildUrl = result.url || (await constructBuildUrl(result.buildId, config.apiUrl, config.apiKey));
-      output.info(`🔗 Vizzly: View results at ${buildUrl}`);
+      let buildUrl = result.url || (await buildUrlConstructor(result.buildId, config.apiUrl, config.apiKey, deps));
+      output.blank();
+      output.labelValue('View', output.link('Results', buildUrl));
     }
 
     // Wait for build completion if requested
     if (options.wait && result.buildId) {
-      output.info('Waiting for build completion...');
       output.startSpinner('Processing comparisons...');
-      const buildResult = await uploader.waitForBuild(result.buildId);
-      output.success('Build processing completed');
+      let buildResult = await uploader.waitForBuild(result.buildId);
+      output.stopSpinner();
+      output.complete('Build processing completed');
 
       // Show build processing results
+      let colors = output.getColors();
       if (buildResult.failedComparisons > 0) {
-        output.warn(`${buildResult.failedComparisons} visual comparisons failed`);
+        output.blank();
+        output.print(`  ${colors.brand.danger(buildResult.failedComparisons)} visual comparisons failed`);
       } else {
-        output.success(`All ${buildResult.passedComparisons} visual comparisons passed`);
+        output.blank();
+        output.print(`  ${colors.brand.success(buildResult.passedComparisons)} visual comparisons passed`);
       }
       // Use API-provided URL or construct proper URL with org/project context
-      const buildUrl = buildResult.url || (await constructBuildUrl(result.buildId, config.apiUrl, config.apiKey));
-      output.info(`🔗 Vizzly: View results at ${buildUrl}`);
+      let waitBuildUrl = buildResult.url || (await buildUrlConstructor(result.buildId, config.apiUrl, config.apiKey, deps));
+      output.blank();
+      output.labelValue('View', output.link('Results', waitBuildUrl));
     }
     output.cleanup();
+    return {
+      success: true,
+      result
+    };
   } catch (error) {
     // Mark build as failed if we have a buildId and config
     if (buildId && config) {
       try {
-        const apiService = new ApiService({
+        let client = createApiClient({
           baseUrl: config.apiUrl,
           token: config.apiKey,
           command: 'upload'
         });
-        const executionTime = Date.now() - uploadStartTime;
-        await apiService.finalizeBuild(buildId, false, executionTime);
+        let executionTime = Date.now() - uploadStartTime;
+        await finalizeBuild(client, buildId, false, executionTime);
       } catch {
         // Silent fail on cleanup
       }
     }
     // Use user-friendly error message if available
-    const errorMessage = error?.getUserMessage ? error.getUserMessage() : error.message;
+    let errorMessage = error?.getUserMessage ? error.getUserMessage() : error.message;
     output.error(errorMessage || 'Upload failed', error);
-    process.exit(1);
+    exit(1);
+    return {
+      success: false,
+      error
+    };
   }
 }