@vizzly-testing/cli 0.26.1 → 0.27.0

package/dist/commands/run.js

@@ -271,6 +271,51 @@ export async function runCommand(testCommand, options = {}, globalOptions = {},
       if (result.buildId) {
         buildId = result.buildId;
       }
+
+      // JSON output mode - output structured data and exit
+      if (globalOptions.json) {
+        let executionTimeMs = Date.now() - startTime;
+
+        // 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}`;
+          }
+        }
+        let jsonResult = {
+          buildId: result.buildId,
+          status: 'completed',
+          url: displayUrl,
+          screenshotsCaptured: result.screenshotsCaptured || 0,
+          executionTimeMs,
+          git: {
+            branch,
+            commit,
+            message
+          },
+          exitCode: 0
+        };
+        output.data(jsonResult);
+        output.cleanup();
+        return {
+          success: true,
+          result
+        };
+      }
       output.complete('Test run completed');
 
       // Show Vizzly summary with link to results
@@ -314,14 +359,56 @@ export async function runCommand(testCommand, options = {}, globalOptions = {},
         // Extract exit code from error message if available
         let exitCodeMatch = error.message.match(/exited with code (\d+)/);
         let exitCode = exitCodeMatch ? parseInt(exitCodeMatch[1], 10) : 1;
-        output.error('Test run failed');
+
+        // JSON output for test command failure
+        if (globalOptions.json) {
+          let executionTimeMs = Date.now() - startTime;
+          output.data({
+            buildId: buildId || null,
+            status: 'failed',
+            error: {
+              code: error.code,
+              message: error.message
+            },
+            executionTimeMs,
+            git: {
+              branch,
+              commit,
+              message
+            },
+            exitCode
+          });
+          output.cleanup();
+        } else {
+          output.error('Test run failed');
+        }
         return {
           success: false,
           exitCode
         };
       } else {
         // Setup or other error - VizzlyError.getUserMessage() provides context
-        output.error('Test run failed', error);
+        if (globalOptions.json) {
+          let executionTimeMs = Date.now() - (startTime || Date.now());
+          output.data({
+            buildId: buildId || null,
+            status: 'failed',
+            error: {
+              code: error.code || 'UNKNOWN_ERROR',
+              message: error.getUserMessage ? error.getUserMessage() : error.message
+            },
+            executionTimeMs,
+            git: {
+              branch,
+              commit,
+              message
+            },
+            exitCode: 1
+          });
+          output.cleanup();
+        } else {
+          output.error('Test run failed', error);
+        }
         return {
           success: false,
           exitCode: 1
@@ -336,6 +423,59 @@ export async function runCommand(testCommand, options = {}, globalOptions = {},
         output.info('Waiting for build completion...');
         output.startSpinner('Processing comparisons...');
         let buildResult = await uploader.waitForBuild(result.buildId);
+
+        // JSON output for --wait mode
+        if (globalOptions.json) {
+          let executionTimeMs = Date.now() - startTime;
+
+          // 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 {
+              let baseUrl = config.apiUrl.replace(/\/api.*$/, '');
+              displayUrl = `${baseUrl}/builds/${result.buildId}`;
+            }
+          }
+          let exitCode = buildResult.failedComparisons > 0 ? 1 : 0;
+          let jsonResult = {
+            buildId: result.buildId,
+            status: buildResult.failedComparisons > 0 ? 'failed' : 'completed',
+            url: displayUrl,
+            screenshotsCaptured: result.screenshotsCaptured || 0,
+            executionTimeMs,
+            git: {
+              branch,
+              commit,
+              message
+            },
+            comparisons: {
+              total: buildResult.totalComparisons || 0,
+              new: buildResult.newComparisons || 0,
+              changed: buildResult.failedComparisons || 0,
+              identical: buildResult.identicalComparisons || 0
+            },
+            approvalStatus: buildResult.approvalStatus || 'pending',
+            exitCode
+          };
+          output.data(jsonResult);
+          output.cleanup();
+          return {
+            success: exitCode === 0,
+            exitCode,
+            result: jsonResult
+          };
+        }
         output.success('Build processing completed');
 
         // Exit with appropriate code based on comparison results

package/dist/commands/tdd-daemon.js

@@ -27,6 +27,16 @@ export async function tddStartCommand(options = {}, globalOptions = {}) {
   if (existingServer) {
     // Verify it's actually running
     if (await isServerRunning(existingServer.port)) {
+      // JSON output for already running
+      if (globalOptions.json) {
+        output.data({
+          status: 'already_running',
+          port: existingServer.port,
+          pid: existingServer.pid,
+          dashboardUrl: `http://localhost:${existingServer.port}`
+        });
+        return;
+      }
       output.header('tdd', 'local');
       output.print(`  ${output.statusDot('success')} Already running`);
       output.blank();
@@ -200,6 +210,21 @@ export async function tddStartCommand(options = {}, globalOptions = {}) {
       // Non-fatal, SDK can still use health check
     }
 
+    // JSON output for successful start
+    let dashboardUrl = `http://localhost:${port}`;
+    if (globalOptions.json) {
+      output.data({
+        status: 'started',
+        port,
+        pid: child.pid,
+        dashboardUrl
+      });
+      if (options.open) {
+        openDashboard(port);
+      }
+      return;
+    }
+
     // Show auto-allocated port message if applicable
     if (autoAllocated) {
       output.print(`  ${output.statusDot('info')} Auto-assigned port ${colors.brand.textTertiary(`:${port}`)}`);
@@ -207,7 +232,6 @@ export async function tddStartCommand(options = {}, globalOptions = {}) {
     }
 
     // Show dashboard URL in a branded box
-    let dashboardUrl = `http://localhost:${port}`;
     output.printBox(colors.brand.info(colors.underline(dashboardUrl)), {
       title: 'Dashboard',
       style: 'branded'
@@ -385,7 +409,15 @@ export async function tddStopCommand(options = {}, globalOptions = {}) {
     }
   }
   if (!pid) {
-    output.warn('No TDD server running');
+    // JSON output for not running
+    if (globalOptions.json) {
+      output.data({
+        status: 'not_running',
+        message: 'No TDD server running'
+      });
+    } else {
+      output.warn('No TDD server running');
+    }
 
     // Clean up any stale files
     if (existsSync(pidFile)) unlinkSync(pidFile);
@@ -428,6 +460,16 @@ export async function tddStopCommand(options = {}, globalOptions = {}) {
     } catch {
       // Non-fatal
     }
+
+    // JSON output for successful stop
+    if (globalOptions.json) {
+      output.data({
+        status: 'stopped',
+        pid,
+        port
+      });
+      return;
+    }
     output.print(`  ${output.statusDot('success')} Server stopped`);
   } catch (error) {
     if (error.code === 'ESRCH') {
@@ -467,6 +509,14 @@ export async function tddStatusCommand(_options, globalOptions = {}) {
   const pidFile = join(vizzlyDir, 'server.pid');
   const serverFile = join(vizzlyDir, 'server.json');
   if (!existsSync(pidFile)) {
+    // JSON output for not running
+    if (globalOptions.json) {
+      output.data({
+        running: false,
+        message: 'TDD server not running'
+      });
+      return;
+    }
     output.info('TDD server not running');
     return;
   }
@@ -486,15 +536,12 @@ export async function tddStatusCommand(_options, globalOptions = {}) {
     // Try to check health endpoint
     const health = await checkServerHealth(serverInfo.port);
     if (health.running) {
-      let colors = output.getColors();
-
-      // Show header
-      output.header('tdd', 'local');
-
-      // Show running status with uptime
+      // Calculate uptime
+      let uptimeMs = null;
       let uptimeStr = '';
       if (serverInfo.startTime) {
-        const uptime = Math.floor((Date.now() - serverInfo.startTime) / 1000);
+        uptimeMs = Date.now() - serverInfo.startTime;
+        const uptime = Math.floor(uptimeMs / 1000);
         const hours = Math.floor(uptime / 3600);
         const minutes = Math.floor(uptime % 3600 / 60);
         const seconds = uptime % 60;
@@ -502,11 +549,30 @@ export async function tddStatusCommand(_options, globalOptions = {}) {
         if (minutes > 0 || hours > 0) uptimeStr += `${minutes}m `;
         uptimeStr += `${seconds}s`;
       }
+      let dashboardUrl = `http://localhost:${serverInfo.port}`;
+
+      // JSON output for running status
+      if (globalOptions.json) {
+        output.data({
+          running: true,
+          port: serverInfo.port,
+          pid,
+          uptimeMs,
+          uptime: uptimeStr || null,
+          dashboardUrl
+        });
+        return;
+      }
+      let colors = output.getColors();
+
+      // Show header
+      output.header('tdd', 'local');
+
+      // Show running status with uptime
       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'
@@ -610,9 +676,9 @@ export async function tddListCommand(_options, globalOptions = {}) {
 
   // JSON output
   if (globalOptions.json) {
-    console.log(JSON.stringify({
+    output.data({
       servers
-    }, null, 2));
+    });
     return;
   }
 

package/dist/commands/tdd.js

@@ -196,16 +196,75 @@ export async function tddCommand(testCommand, options = {}, globalOptions = {},
     // 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');
+    let exitCode = hasFailures ? 1 : 0;
+
+    // JSON output mode
+    if (globalOptions.json) {
+      // Build comparison data for JSON output
+      let comparisons = (runResult.comparisons || []).map(c => ({
+        name: c.name,
+        status: c.status,
+        signature: c.signature,
+        diffPercentage: c.diffPercentage ?? c.diff_percentage ?? null,
+        threshold: c.threshold ?? config.comparison.threshold,
+        paths: {
+          baseline: c.baselinePath || c.baseline_path || null,
+          current: c.currentPath || c.current_path || null,
+          diff: c.diffPath || c.diff_path || null
+        },
+        viewport: c.viewport || {
+          width: c.viewportWidth || c.viewport_width,
+          height: c.viewportHeight || c.viewport_height
+        },
+        browser: c.browser || null
+      }));
+
+      // Calculate summary
+      let summary = runResult.summary || {
+        total: comparisons.length,
+        passed: comparisons.filter(c => c.status === 'passed').length,
+        failed: comparisons.filter(c => c.status === 'failed').length,
+        new: comparisons.filter(c => c.status === 'new').length
+      };
+      output.data({
+        status: hasFailures ? 'failed' : 'completed',
+        exitCode,
+        comparisons,
+        summary,
+        reportPath: runResult.reportPath || '.vizzly/report/index.html'
+      });
+      output.cleanup();
+    }
     return {
       result: {
         success: !hasFailures,
-        exitCode: hasFailures ? 1 : 0,
+        exitCode,
         ...runResult
       },
       cleanup
     };
   } catch (error) {
-    output.error('Test failed', error);
+    // JSON output for errors
+    if (globalOptions.json) {
+      output.data({
+        status: 'failed',
+        exitCode: 1,
+        error: {
+          message: error.message,
+          code: error.code || 'UNKNOWN_ERROR'
+        },
+        comparisons: [],
+        summary: {
+          total: 0,
+          passed: 0,
+          failed: 0,
+          new: 0
+        }
+      });
+      output.cleanup();
+    } else {
+      output.error('Test failed', error);
+    }
     return {
       result: {
         success: false,

package/dist/commands/upload.js

@@ -185,6 +185,33 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
         output.warn(`Failed to finalize build: ${error.message}`);
       }
     }
+
+    // JSON output mode
+    if (globalOptions.json) {
+      let executionTimeMs = Date.now() - uploadStartTime;
+      let buildUrl = result.url || (result.buildId ? await buildUrlConstructor(result.buildId, config.apiUrl, config.apiKey, deps) : null);
+      output.data({
+        buildId: result.buildId,
+        url: buildUrl,
+        stats: {
+          total: result.stats?.total || 0,
+          uploaded: result.stats?.uploaded || 0,
+          skipped: result.stats?.skipped || 0,
+          bytes: result.stats?.bytes || 0
+        },
+        git: {
+          branch,
+          commit,
+          message
+        },
+        executionTimeMs
+      });
+      output.cleanup();
+      return {
+        success: true,
+        result
+      };
+    }
     output.complete('Upload completed');
 
     // Show Vizzly summary
@@ -205,6 +232,41 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
       output.startSpinner('Processing comparisons...');
       let buildResult = await uploader.waitForBuild(result.buildId);
       output.stopSpinner();
+
+      // JSON output for --wait mode
+      if (globalOptions.json) {
+        let executionTimeMs = Date.now() - uploadStartTime;
+        let waitBuildUrl = buildResult.url || (await buildUrlConstructor(result.buildId, config.apiUrl, config.apiKey, deps));
+        output.data({
+          buildId: result.buildId,
+          status: buildResult.failedComparisons > 0 ? 'failed' : 'completed',
+          url: waitBuildUrl,
+          stats: {
+            total: result.stats?.total || 0,
+            uploaded: result.stats?.uploaded || 0,
+            skipped: result.stats?.skipped || 0,
+            bytes: result.stats?.bytes || 0
+          },
+          git: {
+            branch,
+            commit,
+            message
+          },
+          comparisons: {
+            total: buildResult.totalComparisons || 0,
+            passed: buildResult.passedComparisons || 0,
+            failed: buildResult.failedComparisons || 0,
+            new: buildResult.newComparisons || 0
+          },
+          approvalStatus: buildResult.approvalStatus || 'pending',
+          executionTimeMs
+        });
+        output.cleanup();
+        return {
+          success: buildResult.failedComparisons === 0,
+          result
+        };
+      }
       output.complete('Build processing completed');
 
       // Show build processing results
@@ -230,8 +292,18 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
     // Don't fail CI for Vizzly infrastructure issues (5xx errors)
     let status = error.context?.status;
     if (status >= 500) {
-      output.warn('Vizzly API unavailable - upload skipped. Your tests still ran.');
-      output.cleanup();
+      if (globalOptions.json) {
+        output.data({
+          buildId: null,
+          status: 'skipped',
+          message: 'Vizzly API unavailable - upload skipped',
+          executionTimeMs: Date.now() - uploadStartTime
+        });
+        output.cleanup();
+      } else {
+        output.warn('Vizzly API unavailable - upload skipped. Your tests still ran.');
+        output.cleanup();
+      }
       return {
         success: true,
         result: {
@@ -254,6 +326,26 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
         // Silent fail on cleanup
       }
     }
+
+    // JSON output for errors
+    if (globalOptions.json) {
+      output.data({
+        buildId: buildId || null,
+        status: 'failed',
+        error: {
+          code: error.code || 'UPLOAD_FAILED',
+          message: error?.getUserMessage ? error.getUserMessage() : error.message
+        },
+        executionTimeMs: Date.now() - uploadStartTime
+      });
+      output.cleanup();
+      exit(1);
+      return {
+        success: false,
+        error
+      };
+    }
+
     // Use user-friendly error message if available
     let errorMessage = error?.getUserMessage ? error.getUserMessage() : error.message;
     output.error(errorMessage || 'Upload failed', error);

package/dist/server/handlers/tdd-handler.js

@@ -405,6 +405,15 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     // Update comparison in report data file
     updateComparison(newComparison);
 
+    // Log screenshot event for menubar
+    // Normalize status to match HTTP response ('failed' -> 'diff')
+    let logStatus = comparison.status === 'failed' ? 'diff' : comparison.status;
+    output.info(`Screenshot: ${sanitizedName}`, {
+      screenshot: sanitizedName,
+      status: logStatus,
+      diffPercentage: comparison.diffPercentage || 0
+    });
+
     // Visual diffs return 200 with status: 'diff' - they're not errors
     // The SDK/user can decide whether to fail tests based on this
     if (comparison.status === 'failed') {
@@ -486,7 +495,13 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
         diff: null
       };
       updateComparison(updatedComparison);
-      output.info(`Baseline accepted for comparison ${comparisonId}`);
+
+      // Log screenshot event for menubar
+      output.info(`Screenshot: ${comparison.name}`, {
+        screenshot: comparison.name,
+        status: 'accepted',
+        diffPercentage: 0
+      });
       return result;
     } catch (error) {
       output.error(`Failed to accept baseline for ${comparisonId}:`, error);
@@ -510,7 +525,13 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
         status: 'rejected'
       };
       updateComparison(updatedComparison);
-      output.info(`Changes rejected for comparison ${comparisonId}`);
+
+      // Log screenshot event for menubar
+      output.info(`Screenshot: ${comparison.name}`, {
+        screenshot: comparison.name,
+        status: 'rejected',
+        diffPercentage: comparison.diffPercentage || 0
+      });
       return {
         success: true,
         id: comparisonId

package/dist/utils/config-loader.js

@@ -2,7 +2,7 @@ import { resolve } from 'node:path';
 import { cosmiconfigSync } from 'cosmiconfig';
 import { validateVizzlyConfigWithDefaults } from './config-schema.js';
 import { getApiToken, getApiUrl, getBuildName, getParallelId } from './environment-config.js';
-import { getProjectMapping } from './global-config.js';
+import { getAccessToken, getProjectMapping } from './global-config.js';
 import * as output from './output.js';
 const DEFAULT_CONFIG = {
   // API Configuration
@@ -116,6 +116,18 @@ export async function loadConfig(configPath = null, cliOverrides = {}) {
     output.debug('config', 'using token from --token flag');
   }
   applyCLIOverrides(config, cliOverrides);
+
+  // 6. Fall back to user auth token if no other token found
+  // This enables interactive commands (builds, comparisons, approve, etc.)
+  // to work without a project token when the user is logged in
+  if (!config.apiKey) {
+    let userToken = await getAccessToken();
+    if (userToken) {
+      config.apiKey = userToken;
+      config.isUserAuth = true; // Flag to indicate this is user auth, not project token
+      output.debug('config', 'using token from user login');
+    }
+  }
   return config;
 }