@vizzly-testing/cli 0.29.2 → 0.29.4

package/dist/reporter-ssr/ssr-entry.js

@@ -1,5 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { renderToString } from "react-dom/server";
+function isNewComparisonStatus(status) {
+  return status === "new" || status === "baseline-created";
+}
 const statusConfig = {
   failed: {
     label: "Changed",
@@ -430,11 +433,11 @@ function StaticReportView({ reportData }) {
     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,
+    new: comparisons.filter((c) => isNewComparisonStatus(c.status)).length,
     error: comparisons.filter((c) => c.status === "error").length
   };
   let failed = comparisons.filter((c) => c.status === "failed");
-  let newItems = comparisons.filter((c) => c.status === "new");
+  let newItems = comparisons.filter((c) => isNewComparisonStatus(c.status));
   let passed = comparisons.filter((c) => c.status === "passed");
   let errors = comparisons.filter((c) => c.status === "error");
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-900 text-white", children: [

package/dist/server/routers/events.js

@@ -58,6 +58,78 @@ export function createEventsRouter(context) {
     res.write(`event: ${eventType}\n`);
     res.write(`data: ${JSON.stringify(data)}\n\n`);
   };
+
+  /**
+   * Build a lookup map from comparisons array keyed by id
+   */
+  const buildComparisonMap = comparisons => {
+    let map = new Map();
+    for (let c of comparisons) {
+      map.set(c.id, c);
+    }
+    return map;
+  };
+  const comparisonChanged = (oldComp, newComp) => {
+    return JSON.stringify(oldComp) !== JSON.stringify(newComp);
+  };
+
+  /**
+   * Extract summary fields (everything except comparisons) for diffing
+   */
+  const extractSummary = data => {
+    let {
+      comparisons: _c,
+      ...summary
+    } = data;
+    return summary;
+  };
+
+  /**
+   * Check if summary-level fields changed between old and new data
+   */
+  const summaryChanged = (oldData, newData) => {
+    let oldSummary = extractSummary(oldData);
+    let newSummary = extractSummary(newData);
+    return JSON.stringify(oldSummary) !== JSON.stringify(newSummary);
+  };
+
+  /**
+   * Send incremental updates by diffing old vs new report data.
+   * Returns true if any events were sent.
+   */
+  const sendIncrementalUpdates = (res, oldData, newData) => {
+    let sent = false;
+    let oldComparisons = oldData.comparisons || [];
+    let newComparisons = newData.comparisons || [];
+    let oldMap = buildComparisonMap(oldComparisons);
+    let newMap = buildComparisonMap(newComparisons);
+
+    // New or changed comparisons — sends the full comparison object, not a partial delta
+    for (let [id, newComp] of newMap) {
+      let oldComp = oldMap.get(id);
+      if (!oldComp || comparisonChanged(oldComp, newComp)) {
+        sendEvent(res, 'comparisonUpdate', newComp);
+        sent = true;
+      }
+    }
+
+    // Removed comparisons
+    for (let [id] of oldMap) {
+      if (!newMap.has(id)) {
+        sendEvent(res, 'comparisonRemoved', {
+          id
+        });
+        sent = true;
+      }
+    }
+
+    // Summary-level changes (total, passed, failed, etc.)
+    if (summaryChanged(oldData, newData)) {
+      sendEvent(res, 'summaryUpdate', extractSummary(newData));
+      sent = true;
+    }
+    return sent;
+  };
   return async function handleEventsRoute(req, res, pathname) {
     if (req.method !== 'GET' || pathname !== '/api/events') {
       return false;
@@ -71,20 +143,28 @@ export function createEventsRouter(context) {
       'X-Accel-Buffering': 'no' // Disable nginx buffering
     });
 
-    // Send initial data immediately
-    const initialData = readReportData();
-    if (initialData) {
-      sendEvent(res, 'reportData', initialData);
+    // Send initial full data immediately
+    let lastSentData = readReportData();
+    if (lastSentData) {
+      sendEvent(res, 'reportData', lastSentData);
     }
 
     // Debounce file change events (fs.watch can fire multiple times)
     let debounceTimer = null;
     let watcher = null;
     const sendUpdate = () => {
-      const data = readReportData();
-      if (data) {
-        sendEvent(res, 'reportData', data);
+      const newData = readReportData();
+      if (!newData) return;
+      if (!lastSentData) {
+        // No previous data — send full payload
+        sendEvent(res, 'reportData', newData);
+      } else {
+        // Diff and send incremental updates
+        let sent = sendIncrementalUpdates(res, lastSentData, newData);
+        // If nothing changed, skip (no event needed)
+        if (!sent) return;
       }
+      lastSentData = newData;
     };
 
     // Watch for file changes

package/dist/tdd/tdd-service.js

@@ -1038,9 +1038,9 @@ export class TddService {
     }
 
     // Baseline exists - compare
+    let effectiveThreshold = typeof validatedProperties.threshold === 'number' && validatedProperties.threshold >= 0 ? validatedProperties.threshold : this.threshold;
+    let effectiveMinClusterSize = Number.isInteger(validatedProperties.minClusterSize) && validatedProperties.minClusterSize >= 1 ? validatedProperties.minClusterSize : this.minClusterSize;
     try {
-      let effectiveThreshold = typeof validatedProperties.threshold === 'number' && validatedProperties.threshold >= 0 ? validatedProperties.threshold : this.threshold;
-      let effectiveMinClusterSize = Number.isInteger(validatedProperties.minClusterSize) && validatedProperties.minClusterSize >= 1 ? validatedProperties.minClusterSize : this.minClusterSize;
       let honeydiffResult = await compareImages(baselineImagePath, currentImagePath, diffImagePath, {
         threshold: effectiveThreshold,
         minClusterSize: effectiveMinClusterSize
@@ -1088,29 +1088,25 @@ export class TddService {
       }
     } catch (error) {
       if (isDimensionMismatchError(error)) {
-        output.debug('comparison', `${sanitizedName}: dimension mismatch, creating new baseline`);
-        saveBaseline(this.baselinePath, filename, imageBuffer);
-        if (!this.baselineData) {
-          this.baselineData = createEmptyBaselineMetadata({
-            threshold: this.threshold,
-            signatureProperties: this.signatureProperties
-          });
-        }
-        let screenshotEntry = {
-          name: sanitizedName,
-          properties: validatedProperties,
-          path: baselineImagePath,
-          signature
-        };
-        upsertScreenshotInMetadata(this.baselineData, screenshotEntry, signature);
-        saveBaselineMetadata(this.baselinePath, this.baselineData);
-        let result = buildNewComparison({
+        output.debug('comparison', `${sanitizedName}: dimension mismatch, marking comparison as failed`, {
+          error: error.message
+        });
+        let result = buildFailedComparison({
           name: sanitizedName,
           signature,
           baselinePath: baselineImagePath,
           currentPath: currentImagePath,
-          properties: validatedProperties
+          diffPath: null,
+          properties: validatedProperties,
+          threshold: effectiveThreshold,
+          minClusterSize: effectiveMinClusterSize,
+          honeydiffResult: {
+            isDifferent: true,
+            diffClusters: []
+          }
         });
+        result.reason = 'dimension-mismatch';
+        result.error = error.message;
         this._upsertComparison(result);
         return result;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.29.2",
+  "version": "0.29.4",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -122,6 +122,7 @@
     "@vitejs/plugin-react": "^5.0.3",
     "@vizzly-testing/observatory": "^0.3.3",
     "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "postcss": "^8.5.6",
     "react": "^19.1.1",