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

package/dist/tdd/tdd-service.js

@@ -11,7 +11,6 @@
 import { existsSync as defaultExistsSync, mkdirSync as defaultMkdirSync, readFileSync as defaultReadFileSync, writeFileSync as defaultWriteFileSync } from 'node:fs';
 import { createApiClient as defaultCreateApiClient, getBatchHotspots as defaultGetBatchHotspots, getBuilds as defaultGetBuilds, getComparison as defaultGetComparison, getTddBaselines as defaultGetTddBaselines } from '../api/index.js';
 import { NetworkError } from '../errors/vizzly-error.js';
-import { StaticReportGenerator as DefaultStaticReportGenerator } from '../services/static-report-generator.js';
 import { colors as defaultColors } from '../utils/colors.js';
 import { fetchWithTimeout as defaultFetchWithTimeout } from '../utils/fetch-utils.js';
 import { getDefaultBranch as defaultGetDefaultBranch } from '../utils/git.js';
@@ -62,8 +61,7 @@ export class TddService {
       // Result building
       results = {},
       // Other
-      calculateHotspotCoverage = defaultCalculateHotspotCoverage,
-      StaticReportGenerator = DefaultStaticReportGenerator
+      calculateHotspotCoverage = defaultCalculateHotspotCoverage
     } = deps;
 
     // Merge grouped deps with defaults
@@ -135,7 +133,6 @@ export class TddService {
       validatePathSecurity,
       initializeDirectories,
       calculateHotspotCoverage,
-      StaticReportGenerator,
       ...fsOps,
       ...apiOps,
       ...metadataOps,
@@ -177,8 +174,11 @@ export class TddService {
 
     // Hotspot data (loaded lazily from disk or downloaded from cloud)
     this.hotspotData = null;
+
+    // Track whether results have been printed (to avoid duplicate output)
+    this._resultsPrinted = false;
     if (this.setBaseline) {
-      output.info('🐻 Baseline update mode - will overwrite existing baselines with new ones');
+      output.info('[vizzly] Baseline update mode - will overwrite existing baselines with new ones');
     }
   }
 
@@ -191,7 +191,7 @@ export class TddService {
       branch = await getDefaultBranch();
       if (!branch) {
         branch = 'main';
-        output.warn(`⚠️  Could not detect default branch, using 'main' as fallback`);
+        output.warn(`Could not detect default branch, using 'main' as fallback`);
       } else {
         output.debug('tdd', `detected default branch: ${branch}`);
       }
@@ -221,10 +221,10 @@ export class TddService {
         }
         baselineBuild = apiResponse.build;
         if (baselineBuild.status === 'failed') {
-          output.warn(`⚠️  Build ${buildId} is marked as FAILED - falling back to local baselines`);
+          output.warn(`Build ${buildId} is marked as FAILED - falling back to local baselines`);
           return await this.handleLocalBaselines();
         } else if (baselineBuild.status !== 'completed') {
-          output.warn(`⚠️  Build ${buildId} has status: ${baselineBuild.status} (expected: completed)`);
+          output.warn(`Build ${buildId} has status: ${baselineBuild.status} (expected: completed)`);
         }
         baselineBuild.screenshots = apiResponse.screenshots;
       } else if (comparisonId) {
@@ -284,8 +284,8 @@ export class TddService {
           limit: 1
         });
         if (!builds.data || builds.data.length === 0) {
-          output.warn(`⚠️  No baseline builds found for ${environment}/${branch}`);
-          output.info('💡 Run a build in normal mode first to create baselines');
+          output.warn(`No baseline builds found for ${environment}/${branch}`);
+          output.info('Tip: Run a build in normal mode first to create baselines');
           return null;
         }
         let apiResponse = await getTddBaselines(this.client, builds.data[0].id);
@@ -303,7 +303,7 @@ export class TddService {
       }
       let buildDetails = baselineBuild;
       if (!buildDetails.screenshots || buildDetails.screenshots.length === 0) {
-        output.warn('⚠️  No screenshots found in baseline build');
+        output.warn('No screenshots found in baseline build');
         return null;
       }
       output.info(`Using baseline from build: ${colors.cyan(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
@@ -337,7 +337,7 @@ export class TddService {
         }
         let filename = screenshot.filename;
         if (!filename) {
-          output.warn(`⚠️  Screenshot ${sanitizedName} has no filename from API - skipping`);
+          output.warn(`Screenshot ${sanitizedName} has no filename from API - skipping`);
           errorCount++;
           continue;
         }
@@ -354,7 +354,7 @@ export class TddService {
         }
         let downloadUrl = screenshot.original_url || screenshot.url;
         if (!downloadUrl) {
-          output.warn(`⚠️  Screenshot ${sanitizedName} has no download URL - skipping`);
+          output.warn(`Screenshot ${sanitizedName} has no download URL - skipping`);
           errorCount++;
           continue;
         }
@@ -393,7 +393,7 @@ export class TddService {
                 name: sanitizedName
               };
             } catch (error) {
-              output.warn(`⚠️  Failed to download ${sanitizedName}: ${error.message}`);
+              output.warn(`Failed to download ${sanitizedName}: ${error.message}`);
               return {
                 success: false,
                 name: sanitizedName,
@@ -409,7 +409,7 @@ export class TddService {
         }
       }
       if (downloadedCount === 0 && skippedCount === 0) {
-        output.error('❌ No screenshots were successfully downloaded');
+        output.error('No screenshots were successfully downloaded');
         return null;
       }
 
@@ -468,19 +468,19 @@ export class TddService {
       let actualDownloads = downloadedCount - skippedCount;
       if (skippedCount > 0) {
         if (actualDownloads === 0) {
-          output.info(`✅ All ${skippedCount} baselines up-to-date`);
+          output.info(`All ${skippedCount} baselines up-to-date`);
         } else {
-          output.info(`✅ Downloaded ${actualDownloads} new screenshots, ${skippedCount} already up-to-date`);
+          output.info(`Downloaded ${actualDownloads} new screenshots, ${skippedCount} already up-to-date`);
         }
       } else {
-        output.info(`✅ Downloaded ${downloadedCount}/${buildDetails.screenshots.length} screenshots successfully`);
+        output.info(`Downloaded ${downloadedCount}/${buildDetails.screenshots.length} screenshots successfully`);
       }
       if (errorCount > 0) {
-        output.warn(`⚠️  ${errorCount} screenshots failed to download`);
+        output.warn(`${errorCount} screenshots failed to download`);
       }
       return this.baselineData;
     } catch (error) {
-      output.error(`❌ Failed to download baseline: ${error.message}`);
+      output.error(`Failed to download baseline: ${error.message}`);
       throw error;
     }
   }
@@ -512,10 +512,10 @@ export class TddService {
       saveHotspotMetadata(this.workingDir, response.hotspots, response.summary);
       let hotspotCount = Object.keys(response.hotspots).length;
       let totalRegions = Object.values(response.hotspots).reduce((sum, h) => sum + (h.regions?.length || 0), 0);
-      output.info(`✅ Downloaded hotspot data for ${hotspotCount} screenshots (${totalRegions} regions total)`);
+      output.info(`Downloaded hotspot data for ${hotspotCount} screenshots (${totalRegions} regions total)`);
     } catch (error) {
       output.debug('tdd', `Hotspot download failed: ${error.message}`);
-      output.warn('⚠️  Could not fetch hotspot data - comparisons will run without noise filtering');
+      output.warn('Could not fetch hotspot data - comparisons will run without noise filtering');
     }
   }
 
@@ -578,11 +578,11 @@ export class TddService {
         output.info('📥 No local baseline found, but API key available');
         output.info('🆕 Current run will create new local baselines');
       } else {
-        output.info('📝 No local baseline found - all screenshots will be marked as new');
+        output.info('No local baseline found - all screenshots will be marked as new');
       }
       return null;
     } else {
-      output.info(`✅ Using existing baseline: ${colors.cyan(baseline.buildName)}`);
+      output.info(`Using existing baseline: ${colors.cyan(baseline.buildName)}`);
       return baseline;
     }
   }
@@ -637,8 +637,7 @@ export class TddService {
       buildPassedComparison,
       buildFailedComparison,
       buildErrorComparison,
-      isDimensionMismatchError,
-      colors
+      isDimensionMismatchError
     } = this._deps;
 
     // Sanitize and validate
@@ -749,26 +748,20 @@ export class TddService {
           hotspotAnalysis
         });
 
-        // Log result
-        let diffInfo = ` (${honeydiffResult.diffPercentage.toFixed(2)}% different, ${honeydiffResult.diffPixels} pixels)`;
+        // Log at debug level only (shown with --verbose)
+        let diffInfo = `${honeydiffResult.diffPercentage.toFixed(2)}% diff, ${honeydiffResult.diffPixels} pixels`;
         if (honeydiffResult.diffClusters?.length > 0) {
-          diffInfo += `, ${honeydiffResult.diffClusters.length} region${honeydiffResult.diffClusters.length > 1 ? 's' : ''}`;
-        }
-        if (result.hotspotAnalysis?.coverage > 0) {
-          diffInfo += `, ${Math.round(result.hotspotAnalysis.coverage * 100)}% in hotspots`;
-        }
-        if (result.status === 'passed') {
-          output.info(`✅ ${colors.green('PASSED')} ${sanitizedName} - differences in known hotspots${diffInfo}`);
-        } else {
-          output.warn(`❌ ${colors.red('FAILED')} ${sanitizedName} - differences detected${diffInfo}`);
-          output.info(`    Diff saved to: ${diffImagePath}`);
+          diffInfo += `, ${honeydiffResult.diffClusters.length} regions`;
         }
+        output.debug('comparison', `${sanitizedName}: ${result.status}`, {
+          diff: diffInfo
+        });
         this.comparisons.push(result);
         return result;
       }
     } catch (error) {
       if (isDimensionMismatchError(error)) {
-        output.warn(`⚠️  Dimension mismatch for ${sanitizedName} - creating new baseline`);
+        output.debug('comparison', `${sanitizedName}: dimension mismatch, creating new baseline`);
         saveBaseline(this.baselinePath, filename, imageBuffer);
         if (!this.baselineData) {
           this.baselineData = createEmptyBaselineMetadata({
@@ -784,7 +777,6 @@ export class TddService {
         };
         upsertScreenshotInMetadata(this.baselineData, screenshotEntry, signature);
         saveBaselineMetadata(this.baselinePath, this.baselineData);
-        output.info(`✅ Created new baseline for ${sanitizedName} (different dimensions)`);
         let result = buildNewComparison({
           name: sanitizedName,
           signature,
@@ -795,7 +787,7 @@ export class TddService {
         this.comparisons.push(result);
         return result;
       }
-      output.error(`❌ Error comparing ${sanitizedName}: ${error.message}`);
+      output.debug('comparison', `${sanitizedName}: error - ${error.message}`);
       let result = buildErrorComparison({
         name: sanitizedName,
         signature,
@@ -821,106 +813,145 @@ export class TddService {
 
   /**
    * Print results to console
+   * Only prints once per test run to avoid duplicate output
    */
   async printResults() {
-    let results = this.getResults();
-    output.info('\n📊 TDD Results:');
-    output.info(`Total: ${colors.cyan(results.total)}`);
-    output.info(`Passed: ${colors.green(results.passed)}`);
-    if (results.failed > 0) {
-      output.info(`Failed: ${colors.red(results.failed)}`);
-    }
-    if (results.new > 0) {
-      output.info(`New: ${colors.yellow(results.new)}`);
-    }
-    if (results.errors > 0) {
-      output.info(`Errors: ${colors.red(results.errors)}`);
+    // Skip if already printed (prevents duplicate output from vizzlyFlush)
+    if (this._resultsPrinted) {
+      return this.getResults();
     }
+    this._resultsPrinted = true;
+    let {
+      output,
+      colors,
+      getFailedComparisons,
+      getNewComparisons,
+      existsSync,
+      readFileSync
+    } = this._deps;
+    let results = this.getResults();
     let failedComparisons = getFailedComparisons(this.comparisons);
+    let newComparisons = getNewComparisons(this.comparisons);
+    let passedComparisons = this.comparisons.filter(c => c.status === 'passed' || c.status === 'baseline-created' || c.status === 'baseline-updated');
+    let hasChanges = failedComparisons.length > 0 || newComparisons.length > 0;
+
+    // Header with summary - use bear emoji as Vizzly mascot
+    output.blank();
+    output.print(`🐻 ${colors.bold(results.total)} screenshot${results.total !== 1 ? 's' : ''} compared`);
+    output.blank();
+
+    // Passed section - use Observatory success color
+    if (results.passed > 0) {
+      let successColor = colors.brand?.success || colors.green;
+      if (output.isVerbose()) {
+        // Verbose mode: show each screenshot
+        for (let comp of passedComparisons) {
+          output.print(`  ${successColor('✓')} ${comp.name}`);
+        }
+      } else {
+        // Default mode: just show count with green checkmark and number
+        output.print(`  ${successColor('✓')} ${successColor(results.passed)} passed`);
+      }
+      output.blank();
+    }
+
+    // Failed comparisons with diff bars - use Observatory warning/danger colors
     if (failedComparisons.length > 0) {
-      output.info('\n❌ Failed comparisons:');
+      let warningColor = colors.brand?.warning || colors.yellow;
+      let dangerColor = colors.brand?.danger || colors.red;
+      output.print(`  ${warningColor('◐')} ${warningColor(failedComparisons.length)} visual change${failedComparisons.length !== 1 ? 's' : ''} detected`);
+
+      // Find longest name for alignment
+      let maxNameLen = Math.max(...failedComparisons.map(c => c.name.length));
+      let textMuted = colors.brand?.textMuted || colors.dim;
       for (let comp of failedComparisons) {
-        output.info(`  • ${comp.name}`);
+        let diffDisplay = '';
+        if (comp.diffPercentage !== undefined) {
+          // Use the new diffBar helper for visual representation
+          let bar = output.diffBar(comp.diffPercentage, 10);
+          let paddedName = comp.name.padEnd(maxNameLen);
+          diffDisplay = ` ${bar} ${textMuted(`${comp.diffPercentage.toFixed(1)}%`)}`;
+          output.print(`    ${dangerColor('✗')} ${paddedName}${diffDisplay}`);
+        } else {
+          output.print(`    ${dangerColor('✗')} ${comp.name}`);
+        }
       }
+      output.blank();
     }
-    let newComparisons = getNewComparisons(this.comparisons);
+
+    // New screenshots - use Observatory info color
     if (newComparisons.length > 0) {
-      output.info('\n📸 New screenshots:');
+      let infoColor = colors.brand?.info || colors.cyan;
+      let textMuted = colors.brand?.textMuted || colors.dim;
+      output.print(`  ${infoColor('+')} ${infoColor(newComparisons.length)} new screenshot${newComparisons.length !== 1 ? 's' : ''}`);
       for (let comp of newComparisons) {
-        output.info(`  • ${comp.name}`);
+        output.print(`    ${textMuted('○')} ${comp.name}`);
       }
+      output.blank();
     }
-    await this.generateHtmlReport(results);
-    return results;
-  }
 
-  /**
-   * Generate HTML report using React reporter
-   */
-  async generateHtmlReport(results) {
-    try {
-      let reportGenerator = new StaticReportGenerator(this.workingDir, this.config);
-
-      // Transform results to React reporter format
-      let reportData = {
-        buildId: this.baselineData?.buildId || 'local-tdd',
-        summary: {
-          passed: results.passed,
-          failed: results.failed,
-          total: results.total,
-          new: results.new,
-          errors: results.errors
-        },
-        comparisons: results.comparisons,
-        baseline: this.baselineData,
-        threshold: this.threshold
-      };
-      let reportPath = await reportGenerator.generateReport(reportData);
-      output.info(`\n🐻 View detailed report: ${colors.cyan(`file://${reportPath}`)}`);
-      if (this.config.tdd?.openReport) {
-        await this.openReport(reportPath);
+    // Errors - use Observatory danger color
+    if (results.errors > 0) {
+      let dangerColor = colors.brand?.danger || colors.red;
+      let errorComparisons = this.comparisons.filter(c => c.status === 'error');
+      output.print(`  ${dangerColor('!')} ${dangerColor(results.errors)} error${results.errors !== 1 ? 's' : ''}`);
+      for (let comp of errorComparisons) {
+        output.print(`    ${dangerColor('✗')} ${comp.name}`);
       }
-      return reportPath;
-    } catch (error) {
-      output.warn(`Failed to generate HTML report: ${error.message}`);
+      output.blank();
     }
-  }
 
-  /**
-   * Open report in browser
-   */
-  async openReport(reportPath) {
-    try {
-      let {
-        exec
-      } = await import('node:child_process');
-      let {
-        promisify
-      } = await import('node:util');
-      let execAsync = promisify(exec);
-      let command;
-      switch (process.platform) {
-        case 'darwin':
-          command = `open "${reportPath}"`;
-          break;
-        case 'win32':
-          command = `start "" "${reportPath}"`;
-          break;
-        default:
-          command = `xdg-open "${reportPath}"`;
-          break;
+    // Dashboard link with prominent styling - detect if server is running
+    if (hasChanges) {
+      let infoColor = colors.brand?.info || colors.cyan;
+      let textTertiary = colors.brand?.textTertiary || colors.dim;
+
+      // Check if TDD server is already running
+      let serverFile = `${this.workingDir}/.vizzly/server.json`;
+      let serverRunning = false;
+      let serverPort = 47392;
+      try {
+        if (existsSync(serverFile)) {
+          let serverInfo = JSON.parse(readFileSync(serverFile, 'utf8'));
+          if (serverInfo.port) {
+            serverPort = serverInfo.port;
+            serverRunning = true;
+          }
+        }
+      } catch {
+        // Ignore errors reading server file
       }
-      await execAsync(command);
-      output.info('📖 Report opened in browser');
-    } catch {
-      // Browser open may fail silently
+      if (serverRunning) {
+        // Server is running - show the dashboard URL
+        output.print(`  ${textTertiary('→')} Review changes: ${infoColor(colors.underline(`http://localhost:${serverPort}`))}`);
+      } else {
+        // Server not running - suggest starting it
+        output.print(`  ${textTertiary('→')} Review changes: ${infoColor(colors.underline('vizzly tdd start --open'))}`);
+      }
+      output.blank();
     }
+    return results;
   }
 
   /**
    * Update all baselines with current screenshots
    */
   updateBaselines() {
+    // Destructure dependencies
+    let {
+      output,
+      generateScreenshotSignature,
+      generateBaselineFilename,
+      sanitizeScreenshotName,
+      validateScreenshotProperties,
+      getBaselinePath,
+      existsSync,
+      readFileSync,
+      writeFileSync,
+      createEmptyBaselineMetadata,
+      upsertScreenshotInMetadata,
+      saveBaselineMetadata
+    } = this._deps;
     if (this.comparisons.length === 0) {
       output.warn('No comparisons found - nothing to update');
       return 0;
@@ -963,17 +994,17 @@ export class TddService {
         };
         upsertScreenshotInMetadata(this.baselineData, screenshotEntry, signature);
         updatedCount++;
-        output.info(`✅ Updated baseline for ${sanitizedName}`);
+        output.info(`Updated baseline for ${sanitizedName}`);
       } catch (error) {
-        output.error(`❌ Failed to update baseline for ${sanitizedName}: ${error.message}`);
+        output.error(`Failed to update baseline for ${sanitizedName}: ${error.message}`);
       }
     }
     if (updatedCount > 0) {
       try {
         saveBaselineMetadata(this.baselinePath, this.baselineData);
-        output.info(`✅ Updated ${updatedCount} baseline(s)`);
+        output.info(`Updated ${updatedCount} baseline(s)`);
       } catch (error) {
-        output.error(`❌ Failed to save baseline metadata: ${error.message}`);
+        output.error(`Failed to save baseline metadata: ${error.message}`);
       }
     }
     return updatedCount;
@@ -983,6 +1014,21 @@ export class TddService {
    * Accept a single baseline
    */
   async acceptBaseline(idOrComparison) {
+    // Destructure dependencies
+    let {
+      output,
+      generateScreenshotSignature,
+      generateBaselineFilename,
+      sanitizeScreenshotName,
+      safePath,
+      existsSync,
+      readFileSync,
+      mkdirSync,
+      writeFileSync,
+      createEmptyBaselineMetadata,
+      upsertScreenshotInMetadata,
+      saveBaselineMetadata
+    } = this._deps;
     let comparison;
     if (typeof idOrComparison === 'string') {
       comparison = this.comparisons.find(c => c.id === idOrComparison);
@@ -992,7 +1038,15 @@ export class TddService {
     } else {
       comparison = idOrComparison;
     }
-    let sanitizedName = comparison.name;
+
+    // Sanitize name for consistency, even though comparison.name is typically pre-sanitized
+    let sanitizedName;
+    try {
+      sanitizedName = sanitizeScreenshotName(comparison.name);
+    } catch (error) {
+      output.error(`Invalid screenshot name '${comparison.name}': ${error.message}`);
+      throw new Error(`Screenshot name validation failed: ${error.message}`);
+    }
     let properties = comparison.properties || {};
 
     // Generate signature from properties (don't rely on comparison.signature)
@@ -1016,8 +1070,8 @@ export class TddService {
       });
     }
 
-    // Update the baseline
-    let baselineImagePath = safePath(this.baselinePath, `${filename}.png`);
+    // Update the baseline (filename already includes .png extension)
+    let baselineImagePath = safePath(this.baselinePath, filename);
     writeFileSync(baselineImagePath, imageBuffer);
 
     // Update baseline metadata
@@ -1047,7 +1101,17 @@ export class TddService {
    * @private
    */
   createNewBaseline(name, imageBuffer, properties, currentImagePath, baselineImagePath) {
-    output.info(`🐻 Creating baseline for ${name}`);
+    // Destructure dependencies
+    let {
+      output,
+      generateScreenshotSignature,
+      generateComparisonId,
+      writeFileSync,
+      createEmptyBaselineMetadata,
+      upsertScreenshotInMetadata,
+      saveBaselineMetadata
+    } = this._deps;
+    output.info(`Creating baseline for ${name}`);
     writeFileSync(baselineImagePath, imageBuffer);
     if (!this.baselineData) {
       this.baselineData = createEmptyBaselineMetadata({
@@ -1075,7 +1139,7 @@ export class TddService {
       signature
     };
     this.comparisons.push(result);
-    output.info(`✅ Baseline created for ${name}`);
+    output.info(`Baseline created for ${name}`);
     return result;
   }
 }

package/dist/types/client.d.ts

@@ -42,14 +42,37 @@ export function vizzlyScreenshot(
 ): Promise<void>;
 
 /**
- * Wait for all queued screenshots to be processed
+ * Flush result summary returned by vizzlyFlush
+ */
+export interface FlushResult {
+  success: boolean;
+  summary: {
+    total: number;
+    passed: number;
+    failed: number;
+    new: number;
+    errors: number;
+  };
+}
+
+/**
+ * Signal test completion and trigger the results summary.
+ * Call this in your test framework's global teardown to see a summary of all visual comparisons.
+ *
+ * @returns The flush result with summary, or null if no server is connected
+ *
+ * @example
+ * // In Playwright global teardown
+ * import { vizzlyFlush } from '@vizzly-testing/cli/client';
+ * export default async () => await vizzlyFlush();
  *
  * @example
+ * // In Jest/Vitest
  * afterAll(async () => {
  *   await vizzlyFlush();
  * });
  */
-export function vizzlyFlush(): Promise<void>;
+export function vizzlyFlush(): Promise<FlushResult | null>;
 
 /**
  * Check if the Vizzly client is initialized and ready