@vizzly-testing/cli 0.29.0 → 0.29.2

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

@@ -156,18 +156,51 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
   } = deps;
   const tddService = new TddService(config, workingDir, setBaseline);
   const reportPath = join(workingDir, '.vizzly', 'report-data.json');
+  const detailsPath = join(workingDir, '.vizzly', 'comparison-details.json');
+
+  /**
+   * Read heavy comparison details from comparison-details.json
+   * Returns a map of comparison ID -> heavy fields
+   */
+  const readComparisonDetails = () => {
+    try {
+      if (!existsSync(detailsPath)) return {};
+      return JSON.parse(readFileSync(detailsPath, 'utf8'));
+    } catch (error) {
+      output.debug('Failed to read comparison details:', error);
+      return {};
+    }
+  };
+
+  /**
+   * Persist heavy fields for a comparison to comparison-details.json
+   * This file is NOT watched by SSE, so writes here don't trigger broadcasts
+   * Skips writing if all heavy fields are empty (passed comparisons)
+   */
+  const updateComparisonDetails = (id, heavyFields) => {
+    let hasData = Object.values(heavyFields).some(v => v != null && (!Array.isArray(v) || v.length > 0));
+    if (!hasData) return;
+    let details = readComparisonDetails();
+    details[id] = heavyFields;
+    writeFileSync(detailsPath, JSON.stringify(details));
+  };
+
+  /**
+   * Remove a comparison's heavy fields from comparison-details.json
+   */
+  const removeComparisonDetails = id => {
+    let details = readComparisonDetails();
+    delete details[id];
+    writeFileSync(detailsPath, JSON.stringify(details));
+  };
   const readReportData = () => {
     try {
       if (!existsSync(reportPath)) {
         return {
           timestamp: Date.now(),
           comparisons: [],
-          // Internal flat list for easy updates
-          groups: [],
-          // Grouped structure for UI
           summary: {
             total: 0,
-            groups: 0,
             passed: 0,
             failed: 0,
             errors: 0
@@ -181,10 +214,8 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       return {
         timestamp: Date.now(),
         comparisons: [],
-        groups: [],
         summary: {
           total: 0,
-          groups: 0,
           passed: 0,
           failed: 0,
           errors: 0
@@ -220,20 +251,16 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
         });
       }
 
-      // Generate grouped structure from flat comparisons
-      reportData.groups = groupComparisons(reportData.comparisons);
-
-      // Update summary
+      // Update summary (groups computed client-side from comparisons)
       reportData.timestamp = Date.now();
       reportData.summary = {
         total: reportData.comparisons.length,
-        groups: reportData.groups.length,
         passed: reportData.comparisons.filter(c => c.status === 'passed' || c.status === 'baseline-created' || c.status === 'new').length,
         failed: reportData.comparisons.filter(c => c.status === 'failed').length,
         rejected: reportData.comparisons.filter(c => c.status === 'rejected').length,
         errors: reportData.comparisons.filter(c => c.status === 'error').length
       };
-      writeFileSync(reportPath, JSON.stringify(reportData, null, 2));
+      writeFileSync(reportPath, JSON.stringify(reportData));
     } catch (error) {
       output.error('Failed to update comparison:', error);
     }
@@ -389,22 +416,46 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     const vizzlyDir = join(workingDir, '.vizzly');
 
     // Record the comparison for the dashboard
-    // Spread the full comparison to include regionAnalysis, confirmedRegions, hotspotAnalysis, etc.
+    // Only include lightweight fields in report-data.json (broadcast via SSE)
     const newComparison = {
-      ...comparison,
-      originalName: name,
-      // Convert absolute file paths to web-accessible URLs
+      id: comparison.id,
+      name: comparison.name,
+      status: comparison.status,
+      signature: comparison.signature,
       baseline: convertPathToUrl(comparison.baseline, vizzlyDir),
       current: convertPathToUrl(comparison.current, vizzlyDir),
       diff: convertPathToUrl(comparison.diff, vizzlyDir),
-      // Use extracted properties with top-level viewport_width/browser
       properties: extractedProperties,
-      timestamp: Date.now()
+      threshold: comparison.threshold,
+      minClusterSize: comparison.minClusterSize,
+      diffPercentage: comparison.diffPercentage,
+      diffCount: comparison.diffCount,
+      reason: comparison.reason,
+      totalPixels: comparison.totalPixels,
+      aaPixelsIgnored: comparison.aaPixelsIgnored,
+      aaPercentage: comparison.aaPercentage,
+      heightDiff: comparison.heightDiff,
+      error: comparison.error,
+      originalName: name,
+      timestamp: Date.now(),
+      // Boolean hints so UI can show toggle buttons without fetching heavy data
+      hasDiffClusters: comparison.diffClusters?.length > 0,
+      hasConfirmedRegions: comparison.confirmedRegions?.length > 0
     };
 
-    // Update comparison in report data file
+    // Update lightweight comparison in report-data.json (triggers SSE broadcast)
     updateComparison(newComparison);
 
+    // Persist heavy fields separately (NOT broadcast via SSE)
+    updateComparisonDetails(comparison.id, {
+      diffClusters: comparison.diffClusters,
+      intensityStats: comparison.intensityStats,
+      boundingBox: comparison.boundingBox,
+      regionAnalysis: comparison.regionAnalysis,
+      hotspotAnalysis: comparison.hotspotAnalysis,
+      confirmedRegions: comparison.confirmedRegions
+    });
+
     // Log screenshot event for menubar
     // Normalize status to match HTTP response ('failed' -> 'diff')
     let logStatus = comparison.status === 'failed' ? 'diff' : comparison.status;
@@ -653,16 +704,19 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       const freshReportData = {
         timestamp: Date.now(),
         comparisons: [],
-        groups: [],
         summary: {
           total: 0,
-          groups: 0,
           passed: 0,
           failed: 0,
           errors: 0
         }
       };
-      writeFileSync(reportPath, JSON.stringify(freshReportData, null, 2));
+      writeFileSync(reportPath, JSON.stringify(freshReportData));
+
+      // Clear comparison details
+      if (existsSync(detailsPath)) {
+        writeFileSync(detailsPath, JSON.stringify({}));
+      }
       output.info(`Baselines reset - ${deletedBaselines} baselines deleted, ${deletedCurrents} current screenshots deleted, ${deletedDiffs} diffs deleted`);
       return {
         success: true,
@@ -728,21 +782,22 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       output.warn(`Failed to update baseline metadata: ${error.message}`);
     }
 
+    // Remove heavy fields from comparison-details.json
+    removeComparisonDetails(comparisonId);
+
     // Remove comparison from report data
     reportData.comparisons = reportData.comparisons.filter(c => c.id !== comparisonId);
 
-    // Regenerate groups and summary
-    reportData.groups = groupComparisons(reportData.comparisons);
+    // Regenerate summary (groups computed client-side)
     reportData.timestamp = Date.now();
     reportData.summary = {
       total: reportData.comparisons.length,
-      groups: reportData.groups.length,
       passed: reportData.comparisons.filter(c => c.status === 'passed' || c.status === 'baseline-created' || c.status === 'new').length,
       failed: reportData.comparisons.filter(c => c.status === 'failed').length,
       rejected: reportData.comparisons.filter(c => c.status === 'rejected').length,
       errors: reportData.comparisons.filter(c => c.status === 'error').length
     };
-    writeFileSync(reportPath, JSON.stringify(reportData, null, 2));
+    writeFileSync(reportPath, JSON.stringify(reportData));
     output.info(`Deleted comparison ${comparisonId} (${comparison.name})`);
     return {
       success: true,

package/dist/server/routers/dashboard.js

@@ -6,7 +6,7 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import * as output from '../../utils/output.js';
-import { sendHtml, sendSuccess } from '../middleware/response.js';
+import { sendError, sendHtml, sendSuccess } from '../middleware/response.js';
 
 // SPA routes that should serve the dashboard HTML
 const SPA_ROUTES = ['/', '/stats', '/settings', '/projects', '/builds'];
@@ -69,6 +69,55 @@ export function createDashboardRouter(context) {
       }
     }
 
+    // API endpoint for fetching full comparison details (lightweight + heavy fields)
+    let comparisonMatch = pathname.match(/^\/api\/comparison\/(.+)$/);
+    if (comparisonMatch) {
+      let comparisonId = decodeURIComponent(comparisonMatch[1]);
+      if (!comparisonId) {
+        sendError(res, 400, 'Comparison ID is required');
+        return true;
+      }
+      let reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
+      if (!existsSync(reportDataPath)) {
+        sendError(res, 404, 'No report data found');
+        return true;
+      }
+      try {
+        let reportData = JSON.parse(readFileSync(reportDataPath, 'utf8'));
+        let comparison = (reportData.comparisons || []).find(c => c.id === comparisonId || c.signature === comparisonId || c.name === comparisonId);
+        if (!comparison) {
+          sendError(res, 404, 'Comparison not found');
+          return true;
+        }
+
+        // Merge with heavy fields from comparison-details.json
+        let detailsPath = join(workingDir, '.vizzly', 'comparison-details.json');
+        if (existsSync(detailsPath)) {
+          try {
+            let details = JSON.parse(readFileSync(detailsPath, 'utf8'));
+            let heavy = details[comparison.id];
+            if (heavy) {
+              comparison = {
+                ...comparison,
+                ...heavy
+              };
+            }
+          } catch (error) {
+            output.debug('Failed to read comparison details:', {
+              error: error.message
+            });
+          }
+        }
+        sendSuccess(res, comparison);
+      } catch (error) {
+        output.debug('Error reading comparison data:', {
+          error: error.message
+        });
+        sendError(res, 500, 'Failed to read comparison data');
+      }
+      return true;
+    }
+
     // Serve React SPA for dashboard routes
     if (SPA_ROUTES.includes(pathname) || pathname.startsWith('/comparison/')) {
       const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",