@vizzly-testing/cli 0.21.0 → 0.21.2

package/dist/server/routers/baseline.js

@@ -12,11 +12,13 @@ import { sendError, sendServiceUnavailable, sendSuccess } from '../middleware/re
  * @param {Object} context - Router context
  * @param {Object} context.screenshotHandler - Screenshot handler
  * @param {Object} context.tddService - TDD service for baseline downloads
+ * @param {Object} context.authService - Auth service for OAuth requests
  * @returns {Function} Route handler
  */
 export function createBaselineRouter({
   screenshotHandler,
-  tddService
+  tddService,
+  authService
 }) {
   return async function handleBaselineRoute(req, res, pathname) {
     // Accept a single screenshot as baseline
@@ -154,12 +156,51 @@ export function createBaselineRouter({
       try {
         let body = await parseJsonBody(req);
         let {
-          buildId
+          buildId,
+          organizationSlug,
+          projectSlug
         } = body;
         if (!buildId) {
           sendError(res, 400, 'buildId is required');
           return true;
         }
+
+        // Try OAuth authentication first (allows access to any project user has membership to)
+        // This is the preferred method when user is logged in via the dashboard
+        if (authService && organizationSlug && projectSlug) {
+          try {
+            output.info(`Downloading baselines from build ${buildId}...`);
+            output.debug('baseline', `Using OAuth for ${organizationSlug}/${projectSlug}`);
+
+            // Use the CLI endpoint which accepts OAuth and checks project membership
+            let apiResponse = await authService.authenticatedRequest(`/api/cli/${projectSlug}/builds/${buildId}/tdd-baselines`, {
+              method: 'GET',
+              headers: {
+                'X-Organization': organizationSlug
+              }
+            });
+            if (!apiResponse) {
+              throw new Error(`Build ${buildId} not found or API returned null`);
+            }
+
+            // Process the baselines through tddService
+            let result = await tddService.processDownloadedBaselines(apiResponse, buildId);
+            sendSuccess(res, {
+              success: true,
+              message: `Baselines downloaded from build ${buildId}`,
+              ...result
+            });
+            return true;
+          } catch (oauthError) {
+            // If OAuth fails with auth error, fall through to other methods
+            if (!oauthError.message?.includes('Not authenticated') && !oauthError.message?.includes('401')) {
+              throw oauthError;
+            }
+            output.debug('baseline', `OAuth failed, trying other auth methods: ${oauthError.message}`);
+          }
+        }
+
+        // Fall back to using tddService directly (requires VIZZLY_TOKEN env var)
         output.info(`Downloading baselines from build ${buildId}...`);
         let result = await tddService.downloadBaselines('test',
         // environment

package/dist/services/config-service.js

@@ -20,7 +20,8 @@ import * as output from '../utils/output.js';
  */
 let DEFAULT_CONFIG = {
   comparison: {
-    threshold: 2.0
+    threshold: 2.0,
+    minClusterSize: 2
   },
   server: {
     port: 47392,
@@ -102,6 +103,10 @@ export function createConfigService({
       config.comparison.threshold = parseFloat(process.env.VIZZLY_THRESHOLD);
       sources.comparison = 'env';
     }
+    if (process.env.VIZZLY_MIN_CLUSTER_SIZE) {
+      config.comparison.minClusterSize = parseInt(process.env.VIZZLY_MIN_CLUSTER_SIZE, 10);
+      sources.comparison = 'env';
+    }
     if (process.env.VIZZLY_PORT) {
       config.server.port = parseInt(process.env.VIZZLY_PORT, 10);
       sources.server = 'env';
@@ -243,6 +248,16 @@ export default defineConfig(${JSON.stringify(newConfig, null, 2)});
       }
     }
 
+    // Validate minClusterSize
+    if (config.comparison?.minClusterSize !== undefined) {
+      let minClusterSize = config.comparison.minClusterSize;
+      if (!Number.isInteger(minClusterSize) || minClusterSize < 1) {
+        errors.push('comparison.minClusterSize must be a positive integer (1 or greater)');
+      } else if (minClusterSize > 100) {
+        warnings.push('comparison.minClusterSize above 100 may filter out most differences');
+      }
+    }
+
     // Validate port
     if (config.server?.port !== undefined) {
       let port = config.server.port;

package/dist/tdd/tdd-service.js

@@ -186,6 +186,25 @@ export class TddService {
    * Download baselines from cloud
    */
   async downloadBaselines(environment = 'test', branch = null, buildId = null, comparisonId = null) {
+    // Destructure dependencies
+    let {
+      output,
+      colors,
+      getDefaultBranch,
+      getTddBaselines,
+      getBuilds,
+      getComparison,
+      clearBaselineData,
+      generateScreenshotSignature,
+      generateBaselineFilename,
+      sanitizeScreenshotName,
+      safePath,
+      existsSync,
+      fetchWithTimeout,
+      writeFileSync,
+      saveBaselineMetadata
+    } = this._deps;
+
     // If no branch specified, detect default branch
     if (!branch) {
       branch = await getDefaultBranch();
@@ -485,10 +504,242 @@ export class TddService {
     }
   }
 
+  /**
+   * Process already-fetched baseline data (for use when caller handles auth)
+   * This allows the baseline router to fetch with a project token and pass the response here
+   * @param {Object} apiResponse - Response from getTddBaselines API call
+   * @param {string} buildId - Build ID for reference
+   * @returns {Promise<Object>} Baseline data
+   */
+  async processDownloadedBaselines(apiResponse, buildId) {
+    // Destructure dependencies
+    let {
+      output,
+      colors,
+      clearBaselineData,
+      sanitizeScreenshotName,
+      safePath,
+      existsSync,
+      fetchWithTimeout,
+      writeFileSync,
+      saveBaselineMetadata
+    } = this._deps;
+
+    // Clear local state before downloading
+    output.info('Clearing local state before downloading baselines...');
+    clearBaselineData({
+      baselinePath: this.baselinePath,
+      currentPath: this.currentPath,
+      diffPath: this.diffPath
+    });
+
+    // Extract signature properties
+    if (apiResponse.signatureProperties && Array.isArray(apiResponse.signatureProperties)) {
+      this.signatureProperties = apiResponse.signatureProperties;
+      if (this.signatureProperties.length > 0) {
+        output.info(`Using signature properties: ${this.signatureProperties.join(', ')}`);
+      }
+    }
+    let baselineBuild = apiResponse.build;
+    if (baselineBuild.status === 'failed') {
+      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)`);
+    }
+    baselineBuild.screenshots = apiResponse.screenshots;
+    let buildDetails = baselineBuild;
+    if (!buildDetails.screenshots || buildDetails.screenshots.length === 0) {
+      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'})`);
+    output.info(`Checking ${colors.cyan(buildDetails.screenshots.length)} baseline screenshots...`);
+
+    // Check existing baseline metadata for SHA comparison
+    let existingBaseline = await this.loadBaseline();
+    let existingShaMap = new Map();
+    if (existingBaseline) {
+      existingBaseline.screenshots.forEach(s => {
+        if (s.sha256 && s.filename) {
+          existingShaMap.set(s.filename, s.sha256);
+        }
+      });
+    }
+
+    // Download screenshots
+    let downloadedCount = 0;
+    let skippedCount = 0;
+    let errorCount = 0;
+    let batchSize = 5;
+    let screenshotsToProcess = [];
+    for (let screenshot of buildDetails.screenshots) {
+      let sanitizedName;
+      try {
+        sanitizedName = sanitizeScreenshotName(screenshot.name);
+      } catch (error) {
+        output.warn(`Skipping screenshot with invalid name '${screenshot.name}': ${error.message}`);
+        errorCount++;
+        continue;
+      }
+      let filename = screenshot.filename;
+      if (!filename) {
+        output.warn(`Screenshot ${sanitizedName} has no filename from API - skipping`);
+        errorCount++;
+        continue;
+      }
+      let imagePath = safePath(this.baselinePath, filename);
+
+      // Check SHA
+      if (existsSync(imagePath) && screenshot.sha256) {
+        let storedSha = existingShaMap.get(filename);
+        if (storedSha === screenshot.sha256) {
+          downloadedCount++;
+          skippedCount++;
+          continue;
+        }
+      }
+      let downloadUrl = screenshot.original_url || screenshot.url;
+      if (!downloadUrl) {
+        output.warn(`Screenshot ${sanitizedName} has no download URL - skipping`);
+        errorCount++;
+        continue;
+      }
+      screenshotsToProcess.push({
+        screenshot,
+        sanitizedName,
+        imagePath,
+        downloadUrl,
+        filename
+      });
+    }
+
+    // Process downloads in batches
+    if (screenshotsToProcess.length > 0) {
+      output.info(`📥 Downloading ${screenshotsToProcess.length} new/updated screenshots...`);
+      for (let i = 0; i < screenshotsToProcess.length; i += batchSize) {
+        let batch = screenshotsToProcess.slice(i, i + batchSize);
+        let batchNum = Math.floor(i / batchSize) + 1;
+        let totalBatches = Math.ceil(screenshotsToProcess.length / batchSize);
+        output.info(`📦 Processing batch ${batchNum}/${totalBatches}`);
+        let downloadPromises = batch.map(async ({
+          sanitizedName,
+          imagePath,
+          downloadUrl
+        }) => {
+          try {
+            let response = await fetchWithTimeout(downloadUrl);
+            if (!response.ok) {
+              throw new Error(`Failed to download ${sanitizedName}: ${response.statusText}`);
+            }
+            let arrayBuffer = await response.arrayBuffer();
+            let imageBuffer = Buffer.from(arrayBuffer);
+            writeFileSync(imagePath, imageBuffer);
+            return {
+              success: true,
+              name: sanitizedName
+            };
+          } catch (error) {
+            output.warn(`Failed to download ${sanitizedName}: ${error.message}`);
+            return {
+              success: false,
+              name: sanitizedName,
+              error: error.message
+            };
+          }
+        });
+        let batchResults = await Promise.all(downloadPromises);
+        let batchSuccesses = batchResults.filter(r => r.success).length;
+        let batchFailures = batchResults.filter(r => !r.success).length;
+        downloadedCount += batchSuccesses;
+        errorCount += batchFailures;
+      }
+    }
+    if (downloadedCount === 0 && skippedCount === 0) {
+      output.error('No screenshots were successfully downloaded');
+      return null;
+    }
+
+    // Store baseline metadata
+    this.baselineData = {
+      buildId: baselineBuild.id,
+      buildName: baselineBuild.name,
+      environment: 'test',
+      branch: null,
+      threshold: this.threshold,
+      signatureProperties: this.signatureProperties,
+      createdAt: new Date().toISOString(),
+      buildInfo: {
+        commitSha: baselineBuild.commit_sha,
+        commitMessage: baselineBuild.commit_message,
+        approvalStatus: baselineBuild.approval_status,
+        completedAt: baselineBuild.completed_at
+      },
+      screenshots: buildDetails.screenshots.filter(s => s.filename).map(s => ({
+        name: sanitizeScreenshotName(s.name),
+        originalName: s.name,
+        sha256: s.sha256,
+        id: s.id,
+        filename: s.filename,
+        path: safePath(this.baselinePath, s.filename),
+        browser: s.browser,
+        viewport_width: s.viewport_width,
+        originalUrl: s.original_url,
+        fileSize: s.file_size_bytes,
+        dimensions: {
+          width: s.width,
+          height: s.height
+        }
+      }))
+    };
+    saveBaselineMetadata(this.baselinePath, this.baselineData);
+
+    // Download hotspots if API key is available (requires SDK auth)
+    // OAuth-only users won't get hotspots since the hotspot endpoint requires project token
+    if (this.config.apiKey && buildDetails.screenshots?.length > 0) {
+      await this.downloadHotspots(buildDetails.screenshots);
+    }
+
+    // Save baseline build metadata for MCP plugin
+    let baselineMetadataPath = safePath(this.workingDir, '.vizzly', 'baseline-metadata.json');
+    writeFileSync(baselineMetadataPath, JSON.stringify({
+      buildId: baselineBuild.id,
+      buildName: baselineBuild.name,
+      branch: null,
+      environment: 'test',
+      commitSha: baselineBuild.commit_sha,
+      commitMessage: baselineBuild.commit_message,
+      approvalStatus: baselineBuild.approval_status,
+      completedAt: baselineBuild.completed_at,
+      downloadedAt: new Date().toISOString()
+    }, null, 2));
+
+    // Summary
+    let actualDownloads = downloadedCount - skippedCount;
+    if (skippedCount > 0) {
+      if (actualDownloads === 0) {
+        output.info(`All ${skippedCount} baselines up-to-date`);
+      } else {
+        output.info(`Downloaded ${actualDownloads} new screenshots, ${skippedCount} already up-to-date`);
+      }
+    } else {
+      output.info(`Downloaded ${downloadedCount}/${buildDetails.screenshots.length} screenshots successfully`);
+    }
+    if (errorCount > 0) {
+      output.warn(`${errorCount} screenshots failed to download`);
+    }
+    return this.baselineData;
+  }
+
   /**
    * Download hotspot data for screenshots
    */
   async downloadHotspots(screenshots) {
+    let {
+      output,
+      getBatchHotspots,
+      saveHotspotMetadata
+    } = this._deps;
     if (!this.config.apiKey) {
       output.debug('tdd', 'Skipping hotspot download - no API token configured');
       return;
@@ -612,6 +863,20 @@ export class TddService {
     return metadata;
   }
 
+  /**
+   * Upsert a comparison result - replaces existing if same ID, otherwise appends.
+   * This prevents stale results from accumulating in daemon mode.
+   * @private
+   */
+  _upsertComparison(result) {
+    let existingIndex = this.comparisons.findIndex(c => c.id === result.id);
+    if (existingIndex >= 0) {
+      this.comparisons[existingIndex] = result;
+    } else {
+      this.comparisons.push(result);
+    }
+  }
+
   /**
    * Compare a screenshot against baseline
    */
@@ -708,7 +973,7 @@ export class TddService {
         currentPath: currentImagePath,
         properties: validatedProperties
       });
-      this.comparisons.push(result);
+      this._upsertComparison(result);
       return result;
     }
 
@@ -731,7 +996,7 @@ export class TddService {
           minClusterSize: effectiveMinClusterSize,
           honeydiffResult
         });
-        this.comparisons.push(result);
+        this._upsertComparison(result);
         return result;
       } else {
         let hotspotAnalysis = this.getHotspotForScreenshot(name);
@@ -756,7 +1021,7 @@ export class TddService {
         output.debug('comparison', `${sanitizedName}: ${result.status}`, {
           diff: diffInfo
         });
-        this.comparisons.push(result);
+        this._upsertComparison(result);
         return result;
       }
     } catch (error) {
@@ -784,7 +1049,7 @@ export class TddService {
           currentPath: currentImagePath,
           properties: validatedProperties
         });
-        this.comparisons.push(result);
+        this._upsertComparison(result);
         return result;
       }
       output.debug('comparison', `${sanitizedName}: error - ${error.message}`);
@@ -796,7 +1061,7 @@ export class TddService {
         properties: validatedProperties,
         errorMessage: error.message
       });
-      this.comparisons.push(result);
+      this._upsertComparison(result);
       return result;
     }
   }
@@ -1138,7 +1403,7 @@ export class TddService {
       properties,
       signature
     };
-    this.comparisons.push(result);
+    this._upsertComparison(result);
     output.info(`Baseline created for ${name}`);
     return result;
   }