@vizzly-testing/cli 0.13.4 → 0.15.0

package/dist/server/middleware/cors.js

@@ -0,0 +1,22 @@
+/**
+ * CORS Middleware
+ * Handles cross-origin requests and preflight OPTIONS
+ */
+
+/**
+ * Apply CORS headers and handle OPTIONS preflight
+ * @param {http.IncomingMessage} req
+ * @param {http.ServerResponse} res
+ * @returns {boolean} True if request was handled (OPTIONS), false to continue
+ */
+export function corsMiddleware(req, res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  if (req.method === 'OPTIONS') {
+    res.statusCode = 200;
+    res.end();
+    return true;
+  }
+  return false;
+}

package/dist/server/middleware/json-parser.js

@@ -0,0 +1,35 @@
+/**
+ * JSON Body Parser Middleware
+ * Parses JSON request bodies for POST requests
+ */
+
+/**
+ * Parse JSON body from request
+ * @param {http.IncomingMessage} req
+ * @returns {Promise<Object|null>} Parsed JSON body or null for non-POST
+ */
+export function parseJsonBody(req) {
+  return new Promise((resolve, reject) => {
+    if (req.method !== 'POST' && req.method !== 'PUT' && req.method !== 'PATCH') {
+      resolve(null);
+      return;
+    }
+    let body = '';
+    req.on('data', chunk => {
+      body += chunk.toString();
+    });
+    req.on('end', () => {
+      if (!body) {
+        resolve({});
+        return;
+      }
+      try {
+        let data = JSON.parse(body);
+        resolve(data);
+      } catch {
+        reject(new Error('Invalid JSON'));
+      }
+    });
+    req.on('error', reject);
+  });
+}

package/dist/server/middleware/response.js

@@ -0,0 +1,79 @@
+/**
+ * Response Helpers
+ * Standardized response utilities for consistent API responses
+ */
+
+/**
+ * Send JSON response
+ * @param {http.ServerResponse} res
+ * @param {number} statusCode
+ * @param {Object} data
+ */
+export function sendJson(res, statusCode, data) {
+  res.setHeader('Content-Type', 'application/json');
+  res.statusCode = statusCode;
+  res.end(JSON.stringify(data));
+}
+
+/**
+ * Send success response
+ * @param {http.ServerResponse} res
+ * @param {Object} data
+ */
+export function sendSuccess(res, data = {}) {
+  sendJson(res, 200, data);
+}
+
+/**
+ * Send error response
+ * @param {http.ServerResponse} res
+ * @param {number} statusCode
+ * @param {string} message
+ */
+export function sendError(res, statusCode, message) {
+  sendJson(res, statusCode, {
+    error: message
+  });
+}
+
+/**
+ * Send 404 Not Found
+ * @param {http.ServerResponse} res
+ * @param {string} message
+ */
+export function sendNotFound(res, message = 'Not found') {
+  sendError(res, 404, message);
+}
+
+/**
+ * Send 503 Service Unavailable
+ * @param {http.ServerResponse} res
+ * @param {string} serviceName
+ */
+export function sendServiceUnavailable(res, serviceName) {
+  sendError(res, 503, `${serviceName} not available`);
+}
+
+/**
+ * Send HTML response
+ * @param {http.ServerResponse} res
+ * @param {number} statusCode
+ * @param {string} html
+ */
+export function sendHtml(res, statusCode, html) {
+  res.setHeader('Content-Type', 'text/html');
+  res.statusCode = statusCode;
+  res.end(html);
+}
+
+/**
+ * Send file response with specified content type
+ * @param {http.ServerResponse} res
+ * @param {Buffer|string} content
+ * @param {string} contentType
+ */
+export function sendFile(res, content, contentType) {
+  res.setHeader('Content-Type', contentType);
+  res.statusCode = 200;
+  res.end(content);
+}

package/dist/server/routers/assets.js

@@ -0,0 +1,91 @@
+/**
+ * Assets Router
+ * Serves static assets (bundle files, images)
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { sendFile, sendError, sendNotFound } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+let __filename = fileURLToPath(import.meta.url);
+let __dirname = dirname(__filename);
+let PROJECT_ROOT = join(__dirname, '..', '..', '..');
+
+/**
+ * Create assets router
+ * @param {Object} context - Router context
+ * @returns {Function} Route handler
+ */
+export function createAssetsRouter() {
+  return async function handleAssetsRoute(req, res, pathname) {
+    if (req.method !== 'GET') {
+      return false;
+    }
+
+    // Serve React bundle JS
+    if (pathname === '/reporter-bundle.js') {
+      let bundlePath = join(PROJECT_ROOT, 'dist', 'reporter', 'reporter-bundle.iife.js');
+      if (existsSync(bundlePath)) {
+        try {
+          let bundle = readFileSync(bundlePath, 'utf8');
+          sendFile(res, bundle, 'application/javascript');
+          return true;
+        } catch (error) {
+          output.debug('Error serving reporter bundle:', {
+            error: error.message
+          });
+          sendError(res, 500, 'Error loading reporter bundle');
+          return true;
+        }
+      } else {
+        sendNotFound(res, 'Reporter bundle not found');
+        return true;
+      }
+    }
+
+    // Serve React bundle CSS
+    if (pathname === '/reporter-bundle.css') {
+      let cssPath = join(PROJECT_ROOT, 'dist', 'reporter', 'reporter-bundle.css');
+      if (existsSync(cssPath)) {
+        try {
+          let css = readFileSync(cssPath, 'utf8');
+          sendFile(res, css, 'text/css');
+          return true;
+        } catch (error) {
+          output.debug('Error serving reporter CSS:', {
+            error: error.message
+          });
+          sendError(res, 500, 'Error loading reporter CSS');
+          return true;
+        }
+      } else {
+        sendNotFound(res, 'Reporter CSS not found');
+        return true;
+      }
+    }
+
+    // Serve images from .vizzly directory
+    if (pathname.startsWith('/images/')) {
+      let imagePath = pathname.replace('/images/', '');
+      let fullImagePath = join(process.cwd(), '.vizzly', imagePath);
+      if (existsSync(fullImagePath)) {
+        try {
+          let imageData = readFileSync(fullImagePath);
+          sendFile(res, imageData, 'image/png');
+          return true;
+        } catch (error) {
+          output.debug('Error serving image:', {
+            error: error.message
+          });
+          sendError(res, 500, 'Error loading image');
+          return true;
+        }
+      } else {
+        sendNotFound(res, 'Image not found');
+        return true;
+      }
+    }
+    return false;
+  };
+}

package/dist/server/routers/auth.js

@@ -0,0 +1,144 @@
+/**
+ * Auth Router
+ * Handles authentication endpoints (device flow login, logout, status)
+ */
+
+import { parseJsonBody } from '../middleware/json-parser.js';
+import { sendSuccess, sendError, sendServiceUnavailable } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+
+/**
+ * Create auth router
+ * @param {Object} context - Router context
+ * @param {Object} context.authService - Auth service
+ * @returns {Function} Route handler
+ */
+export function createAuthRouter({
+  authService
+}) {
+  return async function handleAuthRoute(req, res, pathname) {
+    // Check if auth service is available for all auth routes
+    if (pathname.startsWith('/api/auth') && !authService) {
+      sendServiceUnavailable(res, 'Auth service');
+      return true;
+    }
+
+    // Get auth status and user info
+    if (req.method === 'GET' && pathname === '/api/auth/status') {
+      try {
+        let isAuthenticated = await authService.isAuthenticated();
+        let user = null;
+        if (isAuthenticated) {
+          let whoami = await authService.whoami();
+          user = whoami.user;
+        }
+        sendSuccess(res, {
+          authenticated: isAuthenticated,
+          user
+        });
+        return true;
+      } catch (error) {
+        output.error('Error getting auth status:', error);
+        sendSuccess(res, {
+          authenticated: false,
+          user: null
+        });
+        return true;
+      }
+    }
+
+    // Initiate device flow login
+    if (req.method === 'POST' && pathname === '/api/auth/login') {
+      try {
+        let deviceFlow = await authService.initiateDeviceFlow();
+
+        // Transform snake_case to camelCase for frontend
+        let response = {
+          deviceCode: deviceFlow.device_code,
+          userCode: deviceFlow.user_code,
+          verificationUri: deviceFlow.verification_uri,
+          verificationUriComplete: deviceFlow.verification_uri_complete,
+          expiresIn: deviceFlow.expires_in,
+          interval: deviceFlow.interval
+        };
+        sendSuccess(res, response);
+        return true;
+      } catch (error) {
+        output.error('Error initiating device flow:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Poll device authorization status
+    if (req.method === 'POST' && pathname === '/api/auth/poll') {
+      try {
+        let body = await parseJsonBody(req);
+        let {
+          deviceCode
+        } = body;
+        if (!deviceCode) {
+          sendError(res, 400, 'deviceCode is required');
+          return true;
+        }
+        let result;
+        try {
+          result = await authService.pollDeviceAuthorization(deviceCode);
+        } catch (error) {
+          // Handle "Authorization pending" as a valid response
+          if (error.message && error.message.includes('Authorization pending')) {
+            sendSuccess(res, {
+              status: 'pending'
+            });
+            return true;
+          }
+          throw error;
+        }
+
+        // Check if authorization is complete by looking for tokens
+        if (result.tokens && result.tokens.accessToken) {
+          let tokensData = result.tokens;
+          let tokenExpiresIn = tokensData.expiresIn || tokensData.expires_in;
+          let tokenExpiresAt = tokenExpiresIn ? new Date(Date.now() + tokenExpiresIn * 1000).toISOString() : result.expires_at || result.expiresAt;
+          let tokens = {
+            accessToken: tokensData.accessToken || tokensData.access_token,
+            refreshToken: tokensData.refreshToken || tokensData.refresh_token,
+            expiresAt: tokenExpiresAt,
+            user: result.user
+          };
+          await authService.completeDeviceFlow(tokens);
+          sendSuccess(res, {
+            status: 'complete',
+            user: result.user
+          });
+        } else {
+          sendSuccess(res, {
+            status: 'pending'
+          });
+        }
+        return true;
+      } catch (error) {
+        output.error('Error polling device authorization:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Logout user
+    if (req.method === 'POST' && pathname === '/api/auth/logout') {
+      try {
+        await authService.logout();
+        sendSuccess(res, {
+          success: true,
+          message: 'Logged out successfully'
+        });
+        return true;
+      } catch (error) {
+        output.error('Error logging out:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+    return false;
+  };
+}

package/dist/server/routers/baseline.js

@@ -0,0 +1,163 @@
+/**
+ * Baseline Router
+ * Handles baseline management (accept, accept-all, reset)
+ */
+
+import { parseJsonBody } from '../middleware/json-parser.js';
+import { sendSuccess, sendError, sendServiceUnavailable } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+
+/**
+ * Create baseline router
+ * @param {Object} context - Router context
+ * @param {Object} context.screenshotHandler - Screenshot handler
+ * @param {Object} context.tddService - TDD service for baseline downloads
+ * @param {Object} context.authService - Auth service for OAuth requests
+ * @returns {Function} Route handler
+ */
+export function createBaselineRouter({
+  screenshotHandler,
+  tddService,
+  authService
+}) {
+  return async function handleBaselineRoute(req, res, pathname) {
+    // Accept a single screenshot as baseline
+    if (req.method === 'POST' && pathname === '/api/baseline/accept') {
+      if (!screenshotHandler?.acceptBaseline) {
+        sendError(res, 400, 'Baseline management not available');
+        return true;
+      }
+      try {
+        let {
+          id
+        } = await parseJsonBody(req);
+        if (!id) {
+          sendError(res, 400, 'Comparison ID required');
+          return true;
+        }
+        await screenshotHandler.acceptBaseline(id);
+        sendSuccess(res, {
+          success: true,
+          message: `Baseline accepted for comparison ${id}`
+        });
+        return true;
+      } catch (error) {
+        output.error('Error accepting baseline:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Accept all screenshots as baseline
+    if (req.method === 'POST' && pathname === '/api/baseline/accept-all') {
+      if (!screenshotHandler?.acceptAllBaselines) {
+        sendError(res, 400, 'Baseline management not available');
+        return true;
+      }
+      try {
+        let result = await screenshotHandler.acceptAllBaselines();
+        sendSuccess(res, {
+          success: true,
+          message: `Accepted ${result.count} baselines`,
+          count: result.count
+        });
+        return true;
+      } catch (error) {
+        output.error('Error accepting all baselines:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Reset baselines to previous state
+    if (req.method === 'POST' && pathname === '/api/baseline/reset') {
+      if (!screenshotHandler?.resetBaselines) {
+        sendError(res, 400, 'Baseline management not available');
+        return true;
+      }
+      try {
+        await screenshotHandler.resetBaselines();
+        sendSuccess(res, {
+          success: true,
+          message: 'Baselines reset to previous state'
+        });
+        return true;
+      } catch (error) {
+        output.error('Error resetting baselines:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Download baselines from a remote build
+    if (req.method === 'POST' && pathname === '/api/baselines/download') {
+      if (!tddService) {
+        sendServiceUnavailable(res, 'TDD service not available (only available in TDD mode)');
+        return true;
+      }
+      try {
+        let body = await parseJsonBody(req);
+        let {
+          buildId,
+          organizationSlug,
+          projectSlug
+        } = body;
+        if (!buildId) {
+          sendError(res, 400, 'buildId is required');
+          return true;
+        }
+        output.info(`Downloading baselines from build ${buildId}...`);
+
+        // If organizationSlug and projectSlug are provided, use OAuth-based download
+        if (organizationSlug && projectSlug && authService) {
+          try {
+            let result = await tddService.downloadBaselinesWithAuth(buildId, organizationSlug, projectSlug, authService);
+            sendSuccess(res, {
+              success: true,
+              message: `Baselines downloaded from build ${buildId}`,
+              ...result
+            });
+            return true;
+          } catch (authError) {
+            // Log the OAuth error with details
+            output.warn(`OAuth download failed (org=${organizationSlug}, project=${projectSlug}): ${authError.message}`);
+
+            // If the error is a 404, it's likely the build doesn't belong to the project
+            // or the project/org is incorrect - provide a helpful error
+            if (authError.message?.includes('404')) {
+              sendError(res, 404, `Build not found or does not belong to project "${projectSlug}" in organization "${organizationSlug}". ` + `Please verify the build exists and you have access to it.`);
+              return true;
+            }
+
+            // For auth errors, try API token fallback
+            if (!authError.message?.includes('401')) {
+              // For other errors, don't fall through - report them directly
+              throw authError;
+            }
+          }
+        }
+
+        // Fall back to API token-based download (when no OAuth info or OAuth auth failed)
+        let result = await tddService.downloadBaselines('test',
+        // environment
+        null,
+        // branch (not needed when buildId is specified)
+        buildId,
+        // specific build to download from
+        null // comparisonId (not needed)
+        );
+        sendSuccess(res, {
+          success: true,
+          message: `Baselines downloaded from build ${buildId}`,
+          ...result
+        });
+        return true;
+      } catch (error) {
+        output.error('Error downloading baselines:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+    return false;
+  };
+}

package/dist/server/routers/cloud-proxy.js

@@ -0,0 +1,146 @@
+/**
+ * Cloud Proxy Router
+ * Proxies requests to Vizzly cloud API with OAuth authentication
+ *
+ * This router transparently handles OAuth token management:
+ * - Reads tokens from ~/.vizzly/config.json via authService
+ * - Adds Authorization header to outgoing requests
+ * - Handles token refresh on 401 responses
+ * - Returns proxied response to React app
+ */
+
+import { parseJsonBody } from '../middleware/json-parser.js';
+import { sendSuccess, sendError, sendServiceUnavailable } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+
+/**
+ * Create cloud proxy router
+ * @param {Object} context - Router context
+ * @param {Object} context.authService - Auth service for token management
+ * @param {string} context.apiUrl - Base API URL (default: https://app.vizzly.dev)
+ * @returns {Function} Route handler
+ */
+export function createCloudProxyRouter({
+  authService,
+  apiUrl: _apiUrl = 'https://app.vizzly.dev'
+}) {
+  /**
+   * Make an authenticated request to the cloud API
+   * @param {string} endpoint - API endpoint (e.g., /api/cli/projects)
+   * @param {Object} options - Fetch options
+   * @returns {Promise<Object>} Response data
+   */
+  async function proxyRequest(endpoint, options = {}) {
+    if (!authService) {
+      throw new Error('Auth service not available');
+    }
+
+    // Use authService.authenticatedRequest which handles token refresh
+    return authService.authenticatedRequest(endpoint, options);
+  }
+  return async function handleCloudProxyRoute(req, res, pathname, parsedUrl) {
+    // Only handle /api/cloud/* routes
+    if (!pathname.startsWith('/api/cloud')) {
+      return false;
+    }
+
+    // Check auth service availability
+    if (!authService) {
+      sendServiceUnavailable(res, 'Auth service');
+      return true;
+    }
+
+    // Route: GET /api/cloud/projects - List user's projects
+    if (req.method === 'GET' && pathname === '/api/cloud/projects') {
+      try {
+        let response = await proxyRequest('/api/cli/projects', {
+          method: 'GET'
+        });
+        sendSuccess(res, {
+          projects: response.projects || []
+        });
+        return true;
+      } catch (error) {
+        output.error('Error fetching projects from cloud:', error);
+        // Return empty array instead of error for better UX when not logged in
+        if (error.message?.includes('not authenticated') || error.code === 'AUTH_ERROR') {
+          sendSuccess(res, {
+            projects: [],
+            authenticated: false
+          });
+        } else {
+          sendError(res, 500, error.message);
+        }
+        return true;
+      }
+    }
+
+    // Route: GET /api/cloud/organizations/:org/projects/:project/builds
+    let buildsMatch = pathname.match(/^\/api\/cloud\/organizations\/([^/]+)\/projects\/([^/]+)\/builds$/);
+    if (req.method === 'GET' && buildsMatch) {
+      try {
+        let organizationSlug = decodeURIComponent(buildsMatch[1]);
+        let projectSlug = decodeURIComponent(buildsMatch[2]);
+        let limit = parsedUrl.searchParams.get('limit') || '20';
+        let branch = parsedUrl.searchParams.get('branch');
+        let queryParams = new URLSearchParams();
+        if (limit) queryParams.append('limit', limit);
+        if (branch) queryParams.append('branch', branch);
+        let query = queryParams.toString();
+        let endpoint = `/api/cli/organizations/${organizationSlug}/projects/${projectSlug}/builds${query ? `?${query}` : ''}`;
+        let response = await proxyRequest(endpoint, {
+          method: 'GET'
+        });
+        sendSuccess(res, {
+          builds: response.builds || []
+        });
+        return true;
+      } catch (error) {
+        output.error('Error fetching builds from cloud:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Route: POST /api/cloud/baselines/download - Download baselines from build
+    if (req.method === 'POST' && pathname === '/api/cloud/baselines/download') {
+      try {
+        let body = await parseJsonBody(req);
+        let {
+          buildId,
+          screenshotNames
+        } = body;
+        if (!buildId) {
+          sendError(res, 400, 'buildId is required');
+          return true;
+        }
+
+        // Download baselines from the specified build
+        let response = await proxyRequest('/api/cli/baselines/download', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            buildId,
+            screenshotNames
+          })
+        });
+        sendSuccess(res, {
+          success: true,
+          message: `Baselines downloaded from build ${buildId}`,
+          ...response
+        });
+        return true;
+      } catch (error) {
+        output.error('Error downloading baselines from cloud:', error);
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Unknown cloud route
+    sendError(res, 404, 'Cloud API endpoint not found');
+    return true;
+  };
+}