@vizzly-testing/cli 0.20.1-beta.1 → 0.21.0

package/dist/server/http-server.js

@@ -15,6 +15,7 @@ import { createBaselineRouter } from './routers/baseline.js';
 import { createCloudProxyRouter } from './routers/cloud-proxy.js';
 import { createConfigRouter } from './routers/config.js';
 import { createDashboardRouter } from './routers/dashboard.js';
+import { createEventsRouter } from './routers/events.js';
 // Routers
 import { createHealthRouter } from './routers/health.js';
 import { createProjectsRouter } from './routers/projects.js';
@@ -46,7 +47,9 @@ export const createHttpServer = (port, screenshotHandler, services = {}) => {
   };
 
   // Initialize routers
-  const routers = [createHealthRouter(routerContext), createAssetsRouter(routerContext), createScreenshotRouter(routerContext), createBaselineRouter(routerContext), createConfigRouter(routerContext), createAuthRouter(routerContext), createProjectsRouter(routerContext), createCloudProxyRouter(routerContext), createDashboardRouter(routerContext) // Catch-all for SPA routes - must be last
+  const routers = [createHealthRouter(routerContext), createAssetsRouter(routerContext), createScreenshotRouter(routerContext), createBaselineRouter(routerContext), createConfigRouter(routerContext), createAuthRouter(routerContext), createProjectsRouter(routerContext), createCloudProxyRouter(routerContext), createEventsRouter(routerContext),
+  // SSE for real-time updates
+  createDashboardRouter(routerContext) // Catch-all for SPA routes - must be last
   ];
   const handleRequest = async (req, res) => {
     // Apply CORS middleware

package/dist/server/routers/dashboard.js

@@ -21,6 +21,21 @@ export function createDashboardRouter(context) {
   const {
     workingDir = process.cwd()
   } = context || {};
+
+  /**
+   * Read baseline metadata from baselines/metadata.json
+   */
+  const readBaselineMetadata = () => {
+    const metadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
+    if (!existsSync(metadataPath)) {
+      return null;
+    }
+    try {
+      return JSON.parse(readFileSync(metadataPath, 'utf8'));
+    } catch {
+      return null;
+    }
+  };
   return async function handleDashboardRoute(req, res, pathname) {
     if (req.method !== 'GET') {
       return false;
@@ -31,10 +46,12 @@ export function createDashboardRouter(context) {
       const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
       if (existsSync(reportDataPath)) {
         try {
-          const data = readFileSync(reportDataPath, 'utf8');
+          const data = JSON.parse(readFileSync(reportDataPath, 'utf8'));
+          // Include baseline metadata for stats view
+          data.baseline = readBaselineMetadata();
           res.setHeader('Content-Type', 'application/json');
           res.statusCode = 200;
-          res.end(data);
+          res.end(JSON.stringify(data));
           return true;
         } catch (error) {
           output.debug('Error reading report data:', {
@@ -52,40 +69,6 @@ export function createDashboardRouter(context) {
       }
     }
 
-    // API endpoint for real-time status
-    if (pathname === '/api/status') {
-      const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
-      const baselineMetadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
-      let reportData = null;
-      let baselineInfo = null;
-      if (existsSync(reportDataPath)) {
-        try {
-          reportData = JSON.parse(readFileSync(reportDataPath, 'utf8'));
-        } catch {
-          // Ignore
-        }
-      }
-      if (existsSync(baselineMetadataPath)) {
-        try {
-          baselineInfo = JSON.parse(readFileSync(baselineMetadataPath, 'utf8'));
-        } catch {
-          // Ignore
-        }
-      }
-      sendSuccess(res, {
-        timestamp: Date.now(),
-        baseline: baselineInfo,
-        comparisons: reportData?.comparisons || [],
-        summary: reportData?.summary || {
-          total: 0,
-          passed: 0,
-          failed: 0,
-          errors: 0
-        }
-      });
-      return true;
-    }
-
     // Serve React SPA for dashboard routes
     if (SPA_ROUTES.includes(pathname) || pathname.startsWith('/comparison/')) {
       const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
@@ -94,6 +77,8 @@ export function createDashboardRouter(context) {
         try {
           const data = readFileSync(reportDataPath, 'utf8');
           reportData = JSON.parse(data);
+          // Include baseline metadata for stats view
+          reportData.baseline = readBaselineMetadata();
         } catch (error) {
           output.debug('Could not read report data:', {
             error: error.message

package/dist/server/routers/events.js

@@ -0,0 +1,134 @@
+/**
+ * Events Router
+ * Server-Sent Events endpoint for real-time dashboard updates
+ */
+
+import { existsSync, readFileSync, watch } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Create events router for SSE
+ * @param {Object} context - Router context
+ * @param {string} context.workingDir - Working directory for report data
+ * @returns {Function} Route handler
+ */
+export function createEventsRouter(context) {
+  const {
+    workingDir = process.cwd()
+  } = context || {};
+  const reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
+  const baselineMetadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
+
+  /**
+   * Read and parse baseline metadata, returning null on error
+   */
+  const readBaselineMetadata = () => {
+    if (!existsSync(baselineMetadataPath)) {
+      return null;
+    }
+    try {
+      return JSON.parse(readFileSync(baselineMetadataPath, 'utf8'));
+    } catch {
+      return null;
+    }
+  };
+
+  /**
+   * Read and parse report data with baseline metadata included
+   */
+  const readReportData = () => {
+    if (!existsSync(reportDataPath)) {
+      return null;
+    }
+    try {
+      const data = JSON.parse(readFileSync(reportDataPath, 'utf8'));
+      // Include baseline metadata for stats view
+      data.baseline = readBaselineMetadata();
+      return data;
+    } catch {
+      return null;
+    }
+  };
+
+  /**
+   * Send SSE event to response
+   */
+  const sendEvent = (res, eventType, data) => {
+    if (res.writableEnded) return;
+    res.write(`event: ${eventType}\n`);
+    res.write(`data: ${JSON.stringify(data)}\n\n`);
+  };
+  return async function handleEventsRoute(req, res, pathname) {
+    if (req.method !== 'GET' || pathname !== '/api/events') {
+      return false;
+    }
+
+    // Set SSE headers
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'X-Accel-Buffering': 'no' // Disable nginx buffering
+    });
+
+    // Send initial data immediately
+    const initialData = readReportData();
+    if (initialData) {
+      sendEvent(res, 'reportData', initialData);
+    }
+
+    // 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);
+      }
+    };
+
+    // Watch for file changes
+    const vizzlyDir = join(workingDir, '.vizzly');
+    if (existsSync(vizzlyDir)) {
+      try {
+        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);
+          }
+        });
+      } catch {
+        // File watching not available, client will fall back to polling
+      }
+    }
+
+    // Heartbeat to keep connection alive (every 30 seconds)
+    const heartbeatInterval = setInterval(() => {
+      if (!res.writableEnded) {
+        sendEvent(res, 'heartbeat', {
+          timestamp: Date.now()
+        });
+      }
+    }, 30000);
+
+    // Cleanup on connection close
+    const cleanup = () => {
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+      clearInterval(heartbeatInterval);
+      if (watcher) {
+        watcher.close();
+      }
+    };
+    req.on('close', cleanup);
+    req.on('error', cleanup);
+    return true;
+  };
+}

package/dist/services/auth-service.js

@@ -0,0 +1,117 @@
+/**
+ * Auth Service
+ * Wraps auth operations for use by the HTTP server
+ *
+ * Provides the interface expected by src/server/routers/auth.js:
+ * - isAuthenticated() - Returns boolean, false if no tokens or API call fails
+ * - whoami() - Throws if not authenticated or tokens invalid
+ * - initiateDeviceFlow() - Throws on API error
+ * - pollDeviceAuthorization(deviceCode) - Returns pending status or tokens, throws on error
+ * - completeDeviceFlow(tokens) - Saves tokens to global config
+ * - logout() - Clears local tokens, may warn if server revocation fails
+ * - authenticatedRequest(endpoint, options) - Throws 'Not authenticated' if no tokens
+ *
+ * Error handling:
+ * - isAuthenticated() never throws, returns false on any error
+ * - whoami() throws if tokens are missing/invalid (caller should check isAuthenticated first)
+ * - authenticatedRequest() throws 'Not authenticated' if no access token
+ * - Device flow methods throw on API errors (network, server errors)
+ */
+
+import { createAuthClient } from '../auth/client.js';
+import * as authOps from '../auth/operations.js';
+import { getApiUrl } from '../utils/environment-config.js';
+import { clearAuthTokens, getAuthTokens, saveAuthTokens } from '../utils/global-config.js';
+
+/**
+ * Create an auth service instance
+ * @param {Object} [options]
+ * @param {string} [options.apiUrl] - API base URL (defaults to VIZZLY_API_URL or https://app.vizzly.dev)
+ * @param {Object} [options.httpClient] - Injectable HTTP client (for testing)
+ * @param {Object} [options.tokenStore] - Injectable token store (for testing)
+ * @returns {Object} Auth service
+ */
+export function createAuthService(options = {}) {
+  let apiUrl = options.apiUrl || getApiUrl();
+
+  // Create HTTP client for API requests (uses auth client for proper auth handling)
+  // Allow injection for testing
+  let httpClient = options.httpClient || createAuthClient({
+    baseUrl: apiUrl
+  });
+
+  // Create token store adapter for global config
+  // Allow injection for testing
+  let tokenStore = options.tokenStore || {
+    getTokens: getAuthTokens,
+    saveTokens: saveAuthTokens,
+    clearTokens: clearAuthTokens
+  };
+  return {
+    /**
+     * Check if user is authenticated
+     * @returns {Promise<boolean>}
+     */
+    async isAuthenticated() {
+      return authOps.isAuthenticated(httpClient, tokenStore);
+    },
+    /**
+     * Get current user information
+     * @returns {Promise<Object>} User and organization data
+     */
+    async whoami() {
+      return authOps.whoami(httpClient, tokenStore);
+    },
+    /**
+     * Initiate OAuth device flow
+     * @returns {Promise<Object>} Device code info
+     */
+    async initiateDeviceFlow() {
+      return authOps.initiateDeviceFlow(httpClient);
+    },
+    /**
+     * Poll for device authorization
+     * @param {string} deviceCode
+     * @returns {Promise<Object>} Token data or pending status
+     */
+    async pollDeviceAuthorization(deviceCode) {
+      return authOps.pollDeviceAuthorization(httpClient, deviceCode);
+    },
+    /**
+     * Complete device flow and save tokens
+     * @param {Object} tokens - Token data
+     * @returns {Promise<Object>}
+     */
+    async completeDeviceFlow(tokens) {
+      return authOps.completeDeviceFlow(tokenStore, tokens);
+    },
+    /**
+     * Logout and revoke tokens
+     * @returns {Promise<void>}
+     */
+    async logout() {
+      return authOps.logout(httpClient, tokenStore);
+    },
+    /**
+     * Refresh access token
+     * @returns {Promise<Object>} New tokens
+     */
+    async refresh() {
+      return authOps.refresh(httpClient, tokenStore);
+    },
+    /**
+     * Make an authenticated request to the API
+     * Used by cloud-proxy router for proxying requests
+     * @param {string} endpoint - API endpoint
+     * @param {Object} options - Fetch options
+     * @returns {Promise<Object>} Response data
+     */
+    async authenticatedRequest(endpoint, options = {}) {
+      let auth = await tokenStore.getTokens();
+      if (!auth?.accessToken) {
+        throw new Error('Not authenticated');
+      }
+      return httpClient.authenticatedRequest(endpoint, auth.accessToken, options);
+    }
+  };
+}

package/dist/services/config-service.js

@@ -0,0 +1,306 @@
+/**
+ * Config Service
+ * Manages configuration for the TDD dashboard settings page
+ *
+ * Provides read/write access to:
+ * - Merged config (read-only combination of all sources)
+ * - Project config (vizzly.config.js in working directory)
+ * - Global config (~/.vizzly/config.json)
+ */
+
+import { existsSync } from 'node:fs';
+import { writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { cosmiconfigSync } from 'cosmiconfig';
+import { loadGlobalConfig, saveGlobalConfig } from '../utils/global-config.js';
+import * as output from '../utils/output.js';
+
+/**
+ * Default configuration values
+ */
+let DEFAULT_CONFIG = {
+  comparison: {
+    threshold: 2.0
+  },
+  server: {
+    port: 47392,
+    timeout: 30000
+  },
+  build: {
+    name: 'Build {timestamp}',
+    environment: 'test'
+  },
+  tdd: {
+    openReport: false
+  }
+};
+
+/**
+ * Create a config service instance
+ * @param {Object} options
+ * @param {string} options.workingDir - Working directory for project config
+ * @returns {Object} Config service with getConfig, updateConfig, validateConfig methods
+ */
+export function createConfigService({
+  workingDir
+}) {
+  let projectConfigPath = null;
+  let projectConfigFormat = 'js'; // 'js' or 'json'
+
+  // Find project config file
+  let explorer = cosmiconfigSync('vizzly');
+  let searchResult = explorer.search(workingDir);
+  if (searchResult?.filepath) {
+    projectConfigPath = searchResult.filepath;
+    projectConfigFormat = searchResult.filepath.endsWith('.json') ? 'json' : 'js';
+  }
+
+  /**
+   * Get configuration by type
+   * @param {'merged'|'project'|'global'} type
+   * @returns {Promise<Object>}
+   */
+  async function getConfig(type) {
+    if (type === 'merged') {
+      return getMergedConfig();
+    } else if (type === 'project') {
+      return getProjectConfig();
+    } else if (type === 'global') {
+      return getGlobalConfigData();
+    }
+    throw new Error(`Unknown config type: ${type}`);
+  }
+
+  /**
+   * Get merged configuration with source tracking
+   */
+  async function getMergedConfig() {
+    let config = {
+      ...DEFAULT_CONFIG
+    };
+    let sources = {};
+
+    // Layer 1: Global config
+    let globalConfig = await loadGlobalConfig();
+    if (globalConfig.settings) {
+      mergeWithTracking(config, globalConfig.settings, sources, 'global');
+    }
+
+    // Layer 2: Project config
+    if (projectConfigPath && existsSync(projectConfigPath)) {
+      try {
+        let result = explorer.load(projectConfigPath);
+        let projectConfig = result?.config?.default || result?.config || {};
+        mergeWithTracking(config, projectConfig, sources, 'project');
+      } catch (error) {
+        output.debug('config-service', `Error loading project config: ${error.message}`);
+      }
+    }
+
+    // Layer 3: Environment variables
+    if (process.env.VIZZLY_THRESHOLD) {
+      config.comparison.threshold = parseFloat(process.env.VIZZLY_THRESHOLD);
+      sources.comparison = 'env';
+    }
+    if (process.env.VIZZLY_PORT) {
+      config.server.port = parseInt(process.env.VIZZLY_PORT, 10);
+      sources.server = 'env';
+    }
+    return {
+      config,
+      sources
+    };
+  }
+
+  /**
+   * Get project-level configuration only
+   */
+  async function getProjectConfig() {
+    if (!projectConfigPath || !existsSync(projectConfigPath)) {
+      return {
+        config: {},
+        path: null
+      };
+    }
+    try {
+      let result = explorer.load(projectConfigPath);
+      let config = result?.config?.default || result?.config || {};
+      return {
+        config,
+        path: projectConfigPath
+      };
+    } catch (error) {
+      output.debug('config-service', `Error loading project config: ${error.message}`);
+      return {
+        config: {},
+        path: projectConfigPath,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * Get global configuration only
+   */
+  async function getGlobalConfigData() {
+    let globalConfig = await loadGlobalConfig();
+    return {
+      config: globalConfig.settings || {},
+      path: join(process.env.VIZZLY_HOME || join(process.env.HOME || '', '.vizzly'), 'config.json')
+    };
+  }
+
+  /**
+   * Update configuration by type
+   * @param {'project'|'global'} type
+   * @param {Object} updates - Config updates to apply
+   * @returns {Promise<Object>}
+   */
+  async function updateConfig(type, updates) {
+    if (type === 'project') {
+      return updateProjectConfig(updates);
+    } else if (type === 'global') {
+      return updateGlobalConfig(updates);
+    }
+    throw new Error(`Cannot update config type: ${type}`);
+  }
+
+  /**
+   * Update project configuration (vizzly.config.js)
+   */
+  async function updateProjectConfig(updates) {
+    // If no project config exists, create one
+    if (!projectConfigPath) {
+      projectConfigPath = join(workingDir, 'vizzly.config.js');
+      projectConfigFormat = 'js';
+    }
+
+    // Read existing config
+    let existingConfig = {};
+    if (existsSync(projectConfigPath)) {
+      try {
+        let result = explorer.load(projectConfigPath);
+        existingConfig = result?.config?.default || result?.config || {};
+      } catch {
+        // Start fresh if corrupted
+      }
+    }
+
+    // Merge updates
+    let newConfig = mergeDeep(existingConfig, updates);
+
+    // Write based on format
+    if (projectConfigFormat === 'json') {
+      await writeFile(projectConfigPath, JSON.stringify(newConfig, null, 2));
+    } else {
+      // Write as ES module
+      let content = `import { defineConfig } from '@vizzly-testing/cli/config';
+
+export default defineConfig(${JSON.stringify(newConfig, null, 2)});
+`;
+      await writeFile(projectConfigPath, content);
+    }
+
+    // Clear cosmiconfig cache so next read gets fresh data
+    explorer.clearCaches();
+    return {
+      success: true,
+      path: projectConfigPath
+    };
+  }
+
+  /**
+   * Update global configuration (~/.vizzly/config.json)
+   */
+  async function updateGlobalConfig(updates) {
+    let globalConfig = await loadGlobalConfig();
+    if (!globalConfig.settings) {
+      globalConfig.settings = {};
+    }
+    globalConfig.settings = mergeDeep(globalConfig.settings, updates);
+    await saveGlobalConfig(globalConfig);
+    return {
+      success: true
+    };
+  }
+
+  /**
+   * Validate configuration
+   * @param {Object} config - Config to validate
+   * @returns {Promise<Object>}
+   */
+  async function validateConfig(config) {
+    let errors = [];
+    let warnings = [];
+
+    // Validate threshold
+    if (config.comparison?.threshold !== undefined) {
+      let threshold = config.comparison.threshold;
+      if (typeof threshold !== 'number' || threshold < 0) {
+        errors.push('comparison.threshold must be a non-negative number');
+      } else if (threshold > 100) {
+        warnings.push('comparison.threshold above 100 may cause all comparisons to pass');
+      }
+    }
+
+    // Validate port
+    if (config.server?.port !== undefined) {
+      let port = config.server.port;
+      if (!Number.isInteger(port) || port < 1 || port > 65535) {
+        errors.push('server.port must be an integer between 1 and 65535');
+      } else if (port < 1024) {
+        warnings.push('server.port below 1024 may require elevated privileges');
+      }
+    }
+
+    // Validate timeout
+    if (config.server?.timeout !== undefined) {
+      let timeout = config.server.timeout;
+      if (!Number.isInteger(timeout) || timeout < 0) {
+        errors.push('server.timeout must be a non-negative integer');
+      }
+    }
+    return {
+      valid: errors.length === 0,
+      errors,
+      warnings
+    };
+  }
+  return {
+    getConfig,
+    updateConfig,
+    validateConfig
+  };
+}
+
+/**
+ * Deep merge two objects
+ */
+function mergeDeep(target, source) {
+  let result = {
+    ...target
+  };
+  for (let key in source) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      result[key] = mergeDeep(result[key] || {}, source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Merge config with source tracking
+ */
+function mergeWithTracking(target, source, sources, sourceName) {
+  for (let key in source) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      if (!target[key]) target[key] = {};
+      mergeWithTracking(target[key], source[key], sources, sourceName);
+    } else {
+      target[key] = source[key];
+      sources[key] = sourceName;
+    }
+  }
+}