@vizzly-testing/cli 0.29.5 → 0.30.0

package/dist/sdk/index.js

@@ -230,7 +230,7 @@ export class VizzlySDK extends EventEmitter {
    * @throws {VizzlyError} When file cannot be read due to permissions or I/O errors
    */
   async screenshot(name, imageBuffer, options = {}) {
-    if (!this.server || !this.server.isRunning()) {
+    if (!this.server?.isRunning()) {
       throw new VizzlyError('Server not running. Call start() first.', 'SERVER_NOT_RUNNING');
     }
 

package/dist/server/routers/assets.js

@@ -72,6 +72,10 @@ export function createAssetsRouter() {
       if (existsSync(fullImagePath)) {
         try {
           const imageData = readFileSync(fullImagePath);
+          // Images are rewritten in place between TDD runs, so disable browser caching.
+          res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+          res.setHeader('Pragma', 'no-cache');
+          res.setHeader('Expires', '0');
           sendFile(res, imageData, 'image/png');
           return true;
         } catch (error) {

package/dist/server/routers/events.js

@@ -3,8 +3,12 @@
  * Server-Sent Events endpoint for real-time dashboard updates
  */
 
-import { existsSync, readFileSync, watch } from 'node:fs';
+import { existsSync, readFileSync, statSync, watch } from 'node:fs';
 import { join } from 'node:path';
+let FILE_WATCH_DEBOUNCE_MS = 25;
+let FILE_POLL_INTERVAL_MS = 50;
+let REPORT_READ_RETRY_MS = 25;
+let MAX_REPORT_READ_RETRIES = 3;
 
 /**
  * Create events router for SSE
@@ -152,9 +156,21 @@ export function createEventsRouter(context) {
     // Debounce file change events (fs.watch can fire multiple times)
     let debounceTimer = null;
     let watcher = null;
-    const sendUpdate = () => {
+    let filePollInterval = null;
+    const scheduleUpdate = () => {
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+      debounceTimer = setTimeout(sendUpdate, FILE_WATCH_DEBOUNCE_MS);
+    };
+    const sendUpdate = (retryCount = 0) => {
       const newData = readReportData();
-      if (!newData) return;
+      if (!newData) {
+        if (existsSync(reportDataPath) && retryCount < MAX_REPORT_READ_RETRIES) {
+          debounceTimer = setTimeout(() => sendUpdate(retryCount + 1), REPORT_READ_RETRY_MS);
+        }
+        return;
+      }
       if (!lastSentData) {
         // No previous data — send full payload
         sendEvent(res, 'reportData', newData);
@@ -174,19 +190,37 @@ export function createEventsRouter(context) {
         watcher = watch(vizzlyDir, {
           recursive: false
         }, (_eventType, filename) => {
-          // Only react to report-data.json changes
-          if (filename === 'report-data.json') {
-            // Debounce: wait 100ms after last change before sending
-            if (debounceTimer) {
-              clearTimeout(debounceTimer);
-            }
-            debounceTimer = setTimeout(sendUpdate, 100);
+          // Some platforms occasionally omit the filename for directory watch
+          // events. In that case, fall back to re-reading report data.
+          if (!filename || filename === 'report-data.json') {
+            scheduleUpdate();
+          }
+        });
+        watcher.on('error', () => {
+          if (watcher) {
+            watcher.close();
+            watcher = null;
           }
         });
       } catch {
         // File watching not available, client will fall back to polling
       }
     }
+    let lastPolledMtime = existsSync(reportDataPath) ? statSync(reportDataPath).mtimeMs : null;
+    filePollInterval = setInterval(() => {
+      let nextMtime = null;
+      if (existsSync(reportDataPath)) {
+        try {
+          nextMtime = statSync(reportDataPath).mtimeMs;
+        } catch {
+          nextMtime = null;
+        }
+      }
+      if (nextMtime !== lastPolledMtime) {
+        lastPolledMtime = nextMtime;
+        scheduleUpdate();
+      }
+    }, FILE_POLL_INTERVAL_MS);
 
     // Heartbeat to keep connection alive (every 30 seconds)
     const heartbeatInterval = setInterval(() => {
@@ -201,10 +235,16 @@ export function createEventsRouter(context) {
     const cleanup = () => {
       if (debounceTimer) {
         clearTimeout(debounceTimer);
+        debounceTimer = null;
       }
       clearInterval(heartbeatInterval);
       if (watcher) {
         watcher.close();
+        watcher = null;
+      }
+      if (filePollInterval) {
+        clearInterval(filePollInterval);
+        filePollInterval = null;
       }
     };
     req.on('close', cleanup);

package/dist/tdd/core/hotspot-coverage.js

@@ -23,7 +23,7 @@ export function calculateHotspotCoverage(diffClusters, hotspotAnalysis) {
       totalLines: 0
     };
   }
-  if (!hotspotAnalysis || !hotspotAnalysis.regions || hotspotAnalysis.regions.length === 0) {
+  if (!hotspotAnalysis?.regions || hotspotAnalysis.regions.length === 0) {
     return {
       coverage: 0,
       linesInHotspots: 0,

package/dist/tdd/services/hotspot-service.js

@@ -31,7 +31,7 @@ export async function downloadHotspots(options) {
   }
   try {
     let response = await api.getHotspots(screenshotNames);
-    if (!response || !response.hotspots) {
+    if (!response?.hotspots) {
       return {
         success: false,
         error: 'API returned no hotspot data'

package/dist/tdd/services/region-service.js

@@ -35,7 +35,7 @@ export async function downloadRegions(options) {
     let response = await api.getRegions(screenshotNames, {
       includeCandidates
     });
-    if (!response || !response.regions) {
+    if (!response?.regions) {
       return {
         success: false,
         error: 'API returned no region data'

package/dist/types/sdk.d.ts

@@ -8,16 +8,16 @@ import { EventEmitter } from 'node:events';
 
 // Re-export common types
 export {
-  VizzlyConfig,
-  ScreenshotOptions,
-  UploadOptions,
-  UploadResult,
+  BaselineData,
   ComparisonResult,
+  OutputUtils,
+  ScreenshotOptions,
   TddResults,
-  BaselineData,
-  Uploader,
   TddService,
-  OutputUtils,
+  Uploader,
+  UploadOptions,
+  UploadResult,
+  VizzlyConfig,
 } from './index';
 
 /**

package/dist/utils/colors.js

@@ -1,7 +1,7 @@
 // Color utility using ansis for rich terminal styling.
 // Detects terminal color support and provides chainable color functions.
 
-import ansis from 'ansis';
+import { Ansis } from 'ansis';
 
 // =============================================================================
 // Vizzly Observatory Design System Colors
@@ -72,7 +72,7 @@ function supportsColorDefault() {
   }
 
   // If stdout is not a TTY, assume no color
-  if (!process.stdout || !process.stdout.isTTY) return false;
+  if (!process.stdout?.isTTY) return false;
 
   // Prefer getColorDepth when available
   try {
@@ -92,6 +92,7 @@ function supportsColorDefault() {
  */
 export function createColors(options = {}) {
   let enabled = options.useColor !== undefined ? !!options.useColor : supportsColorDefault();
+  let level = options.useColor !== undefined ? enabled ? 3 : 0 : enabled ? 3 : 0;
   if (!enabled) {
     // Return no-op functions when color disabled
     let noop = (input = '') => String(input);
@@ -152,60 +153,61 @@ export function createColors(options = {}) {
       }
     };
   }
+  let colors = new Ansis(level);
   return {
     // Modifiers
-    reset: ansis.reset,
-    bold: ansis.bold,
-    dim: ansis.dim,
-    italic: ansis.italic,
-    underline: ansis.underline,
-    strikethrough: ansis.strikethrough,
+    reset: colors.reset,
+    bold: colors.bold,
+    dim: colors.dim,
+    italic: colors.italic,
+    underline: colors.underline,
+    strikethrough: colors.strikethrough,
     // Basic ANSI colors (fallback)
-    red: ansis.red,
-    green: ansis.green,
-    yellow: ansis.yellow,
-    blue: ansis.blue,
-    magenta: ansis.magenta,
-    cyan: ansis.cyan,
-    white: ansis.white,
-    gray: ansis.gray,
-    black: ansis.black,
+    red: colors.red,
+    green: colors.green,
+    yellow: colors.yellow,
+    blue: colors.blue,
+    magenta: colors.magenta,
+    cyan: colors.cyan,
+    white: colors.white,
+    gray: colors.gray,
+    black: colors.black,
     // Semantic aliases (basic)
-    success: ansis.green,
-    error: ansis.red,
-    warning: ansis.yellow,
-    info: ansis.blue,
+    success: colors.green,
+    error: colors.red,
+    warning: colors.yellow,
+    info: colors.blue,
     // Extended colors for rich styling
-    rgb: ansis.rgb,
-    hex: ansis.hex,
-    bgRgb: ansis.bgRgb,
-    bgHex: ansis.bgHex,
+    rgb: colors.rgb.bind(colors),
+    hex: colors.hex.bind(colors),
+    bgRgb: colors.bgRgb.bind(colors),
+    bgHex: colors.bgHex.bind(colors),
     // Observatory brand colors (Truecolor) - aligned with design system
     brand: {
       // Primary brand color
-      amber: ansis.hex(brand.amber),
-      amberLight: ansis.hex(brand.amberLight),
+      amber: colors.hex(brand.amber),
+      amberLight: colors.hex(brand.amberLight),
       // Semantic accents
-      success: ansis.hex(brand.success),
-      warning: ansis.hex(brand.warning),
-      danger: ansis.hex(brand.danger),
-      info: ansis.hex(brand.info),
+      success: colors.hex(brand.success),
+      warning: colors.hex(brand.warning),
+      danger: colors.hex(brand.danger),
+      info: colors.hex(brand.info),
       // Text hierarchy
-      textPrimary: ansis.hex(brand.textPrimary),
-      textSecondary: ansis.hex(brand.textSecondary),
-      textTertiary: ansis.hex(brand.textTertiary),
-      textMuted: ansis.hex(brand.textMuted),
+      textPrimary: colors.hex(brand.textPrimary),
+      textSecondary: colors.hex(brand.textSecondary),
+      textTertiary: colors.hex(brand.textTertiary),
+      textMuted: colors.hex(brand.textMuted),
       // Background variants
-      bgAmber: ansis.bgHex(brand.amber),
-      bgSuccess: ansis.bgHex(brand.success),
-      bgWarning: ansis.bgHex(brand.warning),
-      bgDanger: ansis.bgHex(brand.danger),
-      bgInfo: ansis.bgHex(brand.info),
+      bgAmber: colors.bgHex(brand.amber),
+      bgSuccess: colors.bgHex(brand.success),
+      bgWarning: colors.bgHex(brand.warning),
+      bgDanger: colors.bgHex(brand.danger),
+      bgInfo: colors.bgHex(brand.info),
       // Legacy aliases (backward compatibility)
-      green: ansis.hex(brand.green),
-      red: ansis.hex(brand.red),
-      cyan: ansis.hex(brand.cyan),
-      slate: ansis.hex(brand.slate)
+      green: colors.hex(brand.green),
+      red: colors.hex(brand.red),
+      cyan: colors.hex(brand.cyan),
+      slate: colors.hex(brand.slate)
     }
   };
 }

package/dist/utils/global-config.js

@@ -132,7 +132,7 @@ export async function getUserPath() {
  */
 export async function getAuthTokens() {
   const config = await loadGlobalConfig();
-  if (!config.auth || !config.auth.accessToken) {
+  if (!config.auth?.accessToken) {
     return null;
   }
   return config.auth;
@@ -170,7 +170,7 @@ export async function clearAuthTokens() {
  */
 export async function hasValidTokens() {
   const auth = await getAuthTokens();
-  if (!auth || !auth.accessToken) {
+  if (!auth?.accessToken) {
     return false;
   }
 

package/dist/utils/report-data.js

@@ -0,0 +1,31 @@
+/**
+ * Ensure each comparison has a timestamp for image cache-busting.
+ */
+export function normalizeReportData(reportData) {
+  if (!reportData || !Array.isArray(reportData.comparisons)) {
+    return reportData;
+  }
+  let needsNormalization = reportData.comparisons.some(comparison => comparison && comparison.timestamp == null);
+  if (!needsNormalization) {
+    return reportData;
+  }
+  let fallbackTimestamp = reportData.timestamp ?? Date.now();
+  let comparisons = reportData.comparisons.map(comparison => normalizeComparisonUpdate(comparison, fallbackTimestamp));
+  return {
+    ...reportData,
+    comparisons
+  };
+}
+
+/**
+ * Ensure a single comparison includes a timestamp.
+ */
+export function normalizeComparisonUpdate(comparison, fallbackTimestamp) {
+  if (!comparison || comparison.timestamp != null) {
+    return comparison;
+  }
+  return {
+    ...comparison,
+    timestamp: fallbackTimestamp ?? Date.now()
+  };
+}

package/dist/utils/security.js

@@ -206,8 +206,9 @@ export function validateScreenshotProperties(properties = {}) {
 
     if (typeof key === 'string' && key.length <= 50 && /^[a-zA-Z0-9_-]+$/.test(key)) {
       if (typeof value === 'string' && value.length <= 200) {
-        // Store sanitized version of string values
-        validated[key] = value.replace(/[<>&"']/g, ''); // Basic HTML entity prevention
+        // Preserve safe URL/query characters like '&' in metadata values.
+        // Rendering layers should escape for HTML instead of mutating payload data here.
+        validated[key] = value.replace(/[<>"']/g, '');
       } else if (typeof value === 'number' && !Number.isNaN(value) && Number.isFinite(value)) {
         validated[key] = value;
       } else if (typeof value === 'boolean') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.29.5",
+  "version": "0.30.0",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -119,7 +119,7 @@
     "@tailwindcss/postcss": "^4.1.13",
     "@tanstack/react-query": "^5.90.11",
     "@types/node": "^25.0.2",
-    "@vitejs/plugin-react": "^5.0.3",
+    "@vitejs/plugin-react": "^6.0.1",
     "@vizzly-testing/observatory": "^0.3.3",
     "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "^1.0.0",
@@ -131,8 +131,8 @@
     "tailwindcss": "^4.1.13",
     "tsd": "^0.33.0",
     "tui-driver": "github:vizzly-testing/tui-driver",
-    "typescript": "^5.0.4",
-    "vite": "^7.1.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.0",
     "wouter": "^3.7.1"
   }
 }