@vizzly-testing/cli 0.20.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/project-service.js

@@ -0,0 +1,136 @@
+/**
+ * Project Service
+ * Wraps project operations for use by the HTTP server
+ *
+ * Provides the interface expected by src/server/routers/projects.js:
+ * - listProjects() - Returns [] if not authenticated
+ * - listMappings() - Returns [] if no mappings
+ * - getMapping(directory) - Returns null if not found
+ * - createMapping(directory, projectData) - Throws on invalid input
+ * - removeMapping(directory) - Throws on invalid directory
+ * - getRecentBuilds(projectSlug, organizationSlug, options) - Returns [] if not authenticated
+ *
+ * Error handling:
+ * - API methods (listProjects, getRecentBuilds) return empty arrays when not authenticated
+ * - Local methods (listMappings, getMapping) never require authentication
+ * - Validation errors (createMapping, removeMapping) throw with descriptive messages
+ */
+
+import { createAuthClient } from '../auth/client.js';
+import * as projectOps from '../project/operations.js';
+import { getApiUrl } from '../utils/environment-config.js';
+import { deleteProjectMapping, getAuthTokens, getProjectMapping, getProjectMappings, saveProjectMapping } from '../utils/global-config.js';
+
+/**
+ * Create a project 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.mappingStore] - Injectable mapping store (for testing)
+ * @param {Function} [options.getAuthTokens] - Injectable token getter (for testing)
+ * @returns {Object} Project service
+ */
+export function createProjectService(options = {}) {
+  let apiUrl = options.apiUrl || getApiUrl();
+
+  // Create HTTP client once at service creation (not per-request)
+  // Allow injection for testing
+  let httpClient = options.httpClient || createAuthClient({
+    baseUrl: apiUrl
+  });
+
+  // Create mapping store adapter for global config
+  // Allow injection for testing
+  let mappingStore = options.mappingStore || {
+    getMappings: getProjectMappings,
+    getMapping: getProjectMapping,
+    saveMapping: saveProjectMapping,
+    deleteMapping: deleteProjectMapping
+  };
+
+  // Allow injection of getAuthTokens for testing
+  let tokenGetter = options.getAuthTokens || getAuthTokens;
+
+  /**
+   * Create an OAuth client with current access token
+   * @returns {Promise<Object|null>} OAuth client or null if not authenticated
+   */
+  async function createOAuthClient() {
+    let auth = await tokenGetter();
+    if (!auth?.accessToken) {
+      return null;
+    }
+
+    // Wrap authenticatedRequest to auto-inject the access token
+    return {
+      authenticatedRequest: (endpoint, fetchOptions = {}) => httpClient.authenticatedRequest(endpoint, auth.accessToken, fetchOptions)
+    };
+  }
+  return {
+    /**
+     * List all projects from API
+     * Returns empty array if not authenticated (projectOps handles null oauthClient)
+     * @returns {Promise<Array>} Array of projects, empty if not authenticated
+     */
+    async listProjects() {
+      let oauthClient = await createOAuthClient();
+      // projectOps.listProjects handles null oauthClient by returning []
+      return projectOps.listProjects({
+        oauthClient,
+        apiClient: null
+      });
+    },
+    /**
+     * List all project mappings
+     * @returns {Promise<Array>} Array of project mappings
+     */
+    async listMappings() {
+      return projectOps.listMappings(mappingStore);
+    },
+    /**
+     * Get project mapping for a specific directory
+     * @param {string} directory - Directory path
+     * @returns {Promise<Object|null>} Project mapping or null
+     */
+    async getMapping(directory) {
+      return projectOps.getMapping(mappingStore, directory);
+    },
+    /**
+     * Create or update project mapping
+     * @param {string} directory - Directory path
+     * @param {Object} projectData - Project data
+     * @returns {Promise<Object>} Created mapping
+     */
+    async createMapping(directory, projectData) {
+      return projectOps.createMapping(mappingStore, directory, projectData);
+    },
+    /**
+     * Remove project mapping
+     * @param {string} directory - Directory path
+     * @returns {Promise<void>}
+     */
+    async removeMapping(directory) {
+      return projectOps.removeMapping(mappingStore, directory);
+    },
+    /**
+     * Get recent builds for a project
+     * Returns empty array if not authenticated (projectOps handles null oauthClient)
+     * @param {string} projectSlug - Project slug
+     * @param {string} organizationSlug - Organization slug
+     * @param {Object} options - Query options
+     * @returns {Promise<Array>} Array of builds, empty if not authenticated
+     */
+    async getRecentBuilds(projectSlug, organizationSlug, options = {}) {
+      let oauthClient = await createOAuthClient();
+      // projectOps.getRecentBuilds handles null oauthClient by returning []
+      return projectOps.getRecentBuilds({
+        oauthClient,
+        apiClient: null,
+        projectSlug,
+        organizationSlug,
+        limit: options.limit,
+        branch: options.branch
+      });
+    }
+  };
+}

package/package.json

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