@vizzly-testing/cli 0.20.1-beta.0 → 0.20.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

@@ -8,6 +8,7 @@ import { createBuild as defaultCreateApiBuild, createApiClient as defaultCreateA
 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 { createConfigService as defaultCreateConfigService } from '../services/config-service.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';
@@ -30,6 +31,7 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {},
     getBuild = defaultGetBuild,
     createServerManager = defaultCreateServerManager,
     createBuildObject = defaultCreateBuildObject,
+    createConfigService = defaultCreateConfigService,
     initializeDaemon = defaultInitializeDaemon,
     runTests = defaultRunTests,
     detectBranch = defaultDetectBranch,
@@ -85,11 +87,7 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {},
       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 functional dependencies
@@ -99,8 +97,15 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {},
       verbose: globalOptions.verbose
     };
 
+    // Create config service for dashboard settings page
+    let configService = createConfigService({
+      workingDir: process.cwd()
+    });
+
     // Create server manager (functional object)
-    serverManager = createServerManager(configWithVerbose, {});
+    serverManager = createServerManager(configWithVerbose, {
+      configService
+    });
 
     // Create build manager (functional object that provides the interface runTests expects)
     let buildManager = {
@@ -135,7 +140,7 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {},
           createError: (msg, code) => new VizzlyError(msg, code),
           output,
           onServerReady: data => {
-            output.debug('server', `listening on :${data.port}`);
+            output.debug('server', `ready on :${data.port}`);
           }
         }
       });
@@ -172,7 +177,7 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {},
           output.debug('build', `created ${data.buildId?.substring(0, 8)}`);
         },
         onServerReady: data => {
-          output.debug('server', `listening on :${data.port}`);
+          output.debug('server', `ready on :${data.port}`);
         },
         onFinalizeFailed: data => {
           output.warn(`Failed to finalize build: ${data.error}`);
@@ -180,26 +185,9 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {},
       }
     });
 
-    // Show summary
-    let {
-      screenshotsCaptured,
-      comparisons
-    } = runResult;
-
     // 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');
-    if (comparisons && comparisons.length > 0) {
-      let passed = comparisons.filter(c => c.status === 'passed').length;
-      let 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`);
-      }
-    } else {
-      output.result(`${screenshotsCaptured} screenshot${screenshotsCaptured !== 1 ? 's' : ''}`);
-    }
     return {
       result: {
         success: !hasFailures,

package/dist/commands/upload.js

@@ -173,32 +173,41 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
         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
       let buildUrl = result.url || (await buildUrlConstructor(result.buildId, config.apiUrl, config.apiKey, deps));
-      output.info(`🔗 Vizzly: View results at ${buildUrl}`);
+      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
       let waitBuildUrl = buildResult.url || (await buildUrlConstructor(result.buildId, config.apiUrl, config.apiKey, deps));
-      output.info(`🔗 Vizzly: View results at ${waitBuildUrl}`);
+      output.blank();
+      output.labelValue('View', output.link('Results', waitBuildUrl));
     }
     output.cleanup();
     return {

package/dist/commands/whoami.js

@@ -20,16 +20,17 @@ export async function whoamiCommand(options = {}, globalOptions = {}) {
   });
   try {
     // Check if user is logged in
-    const auth = await getAuthTokens();
+    let auth = await getAuthTokens();
     if (!auth || !auth.accessToken) {
       if (globalOptions.json) {
         output.data({
           authenticated: false
         });
       } else {
-        output.info('You are not logged in');
+        output.header('whoami');
+        output.print('  Not logged in');
         output.blank();
-        output.info('Run "vizzly login" to authenticate');
+        output.hint('Run "vizzly login" to authenticate');
       }
       output.cleanup();
       return;
@@ -57,36 +58,39 @@ export async function whoamiCommand(options = {}, globalOptions = {}) {
     }
 
     // Human-readable output
-    output.success('Authenticated');
-    output.blank();
+    output.header('whoami');
 
-    // Show user info
+    // Show user info using keyValue
     if (response.user) {
-      output.info(`User: ${response.user.name || response.user.username}`);
-      output.info(`Email: ${response.user.email}`);
+      let userInfo = {
+        User: response.user.name || response.user.username,
+        Email: response.user.email
+      };
       if (response.user.username) {
-        output.info(`Username: ${response.user.username}`);
+        userInfo.Username = response.user.username;
       }
       if (globalOptions.verbose && response.user.id) {
-        output.info(`User ID: ${response.user.id}`);
+        userInfo['User ID'] = response.user.id;
       }
+      output.keyValue(userInfo);
     }
 
-    // Show organizations
+    // Show organizations as a list
     if (response.organizations && response.organizations.length > 0) {
       output.blank();
-      output.info('Organizations:');
-      for (const org of response.organizations) {
-        let orgInfo = `  - ${org.name}`;
-        if (org.slug) {
-          orgInfo += ` (@${org.slug})`;
-        }
-        if (org.role) {
-          orgInfo += ` [${org.role}]`;
-        }
-        output.print(orgInfo);
-        if (globalOptions.verbose && org.id) {
-          output.print(`    ID: ${org.id}`);
+      output.labelValue('Organizations', '');
+      let orgItems = response.organizations.map(org => {
+        let parts = [org.name];
+        if (org.slug) parts.push(`@${org.slug}`);
+        if (org.role) parts.push(`[${org.role}]`);
+        return parts.join(' ');
+      });
+      output.list(orgItems);
+      if (globalOptions.verbose) {
+        for (let org of response.organizations) {
+          if (org.id) {
+            output.hint(`  ${org.name} ID: ${org.id}`);
+          }
         }
       }
     }
@@ -94,29 +98,27 @@ export async function whoamiCommand(options = {}, globalOptions = {}) {
     // Show token expiry info
     if (auth.expiresAt) {
       output.blank();
-      const expiresAt = new Date(auth.expiresAt);
-      const now = new Date();
-      const msUntilExpiry = expiresAt.getTime() - now.getTime();
-      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(auth.expiresAt);
+      let now = new Date();
+      let msUntilExpiry = expiresAt.getTime() - now.getTime();
+      let daysUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60 * 24));
+      let hoursUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60 * 60));
+      let minutesUntilExpiry = Math.floor(msUntilExpiry / (1000 * 60));
       if (msUntilExpiry <= 0) {
         output.warn('Token has expired');
-        output.blank();
-        output.info('Run "vizzly login" to refresh your authentication');
+        output.hint('Run "vizzly login" to refresh your authentication');
       } else 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' : ''} (${expiresAt.toLocaleDateString()})`);
       } else if (hoursUntilExpiry > 0) {
-        output.info(`Token expires in ${hoursUntilExpiry} hour${hoursUntilExpiry !== 1 ? 's' : ''} (${expiresAt.toLocaleString()})`);
+        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' : ''}`);
       } else {
         output.warn('Token expires in less than a minute');
-        output.blank();
-        output.info('Run "vizzly login" to refresh your authentication');
+        output.hint('Run "vizzly login" to refresh your authentication');
       }
       if (globalOptions.verbose) {
-        output.info(`Token expires at: ${expiresAt.toISOString()}`);
+        output.hint(`Token expires at: ${expiresAt.toISOString()}`);
       }
     }
     output.cleanup();
@@ -133,7 +135,7 @@ export async function whoamiCommand(options = {}, globalOptions = {}) {
       } else {
         output.error('Authentication token is invalid or expired', error);
         output.blank();
-        output.info('Run "vizzly login" to authenticate again');
+        output.hint('Run "vizzly login" to authenticate again');
       }
       output.cleanup();
       process.exit(1);