@vizzly-testing/cli 0.13.0 → 0.13.2

package/dist/server/handlers/tdd-handler.js

@@ -1,54 +1,16 @@
 import { Buffer } from 'buffer';
 import { writeFileSync, readFileSync, existsSync } from 'fs';
 import { join, resolve } from 'path';
+import honeydiff from '@vizzly-testing/honeydiff';
 import { createServiceLogger } from '../../utils/logger-factory.js';
 import { TddService } from '../../services/tdd-service.js';
 import { sanitizeScreenshotName, validateScreenshotProperties } from '../../utils/security.js';
 import { detectImageInputType } from '../../utils/image-input-detector.js';
+let {
+  getDimensionsSync
+} = honeydiff;
 const logger = createServiceLogger('TDD-HANDLER');
 
-/**
- * Detect PNG dimensions by reading the IHDR chunk header
- * PNG spec (ISO/IEC 15948:2004) guarantees width/height at bytes 16-23
- * @param {Buffer} buffer - PNG image buffer
- * @returns {{ width: number, height: number } | null} Dimensions or null if not a valid PNG
- */
-const detectPNGDimensions = buffer => {
-  // Full PNG signature (8 bytes): 89 50 4E 47 0D 0A 1A 0A
-  const PNG_SIGNATURE = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
-
-  // Need at least 24 bytes (8 signature + 4 length + 4 type + 8 width/height)
-  if (!buffer || buffer.length < 24) {
-    return null;
-  }
-
-  // Validate full 8-byte PNG signature
-  for (let i = 0; i < PNG_SIGNATURE.length; i++) {
-    if (buffer[i] !== PNG_SIGNATURE[i]) {
-      return null;
-    }
-  }
-
-  // Validate IHDR chunk type at bytes 12-15 (should be 'IHDR')
-  // 0x49484452 = 'IHDR' in ASCII
-  if (buffer[12] !== 0x49 || buffer[13] !== 0x48 || buffer[14] !== 0x44 || buffer[15] !== 0x52) {
-    return null;
-  }
-
-  // Read width and height from IHDR chunk (guaranteed positions per PNG spec)
-  const width = buffer.readUInt32BE(16); // Bytes 16-19
-  const height = buffer.readUInt32BE(20); // Bytes 20-23
-
-  // Sanity check: dimensions should be positive and reasonable
-  if (width <= 0 || height <= 0 || width > 65535 || height > 65535) {
-    return null;
-  }
-  return {
-    width,
-    height
-  };
-};
-
 /**
  * Group comparisons by screenshot name with variant structure
  * Matches cloud product's grouping logic from comparison.js
@@ -349,18 +311,19 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       };
     }
 
-    // Auto-detect image dimensions from PNG header if viewport not provided
-    // This matches cloud API behavior but without requiring Sharp
+    // Auto-detect image dimensions if viewport not provided
     if (!extractedProperties.viewport_width || !extractedProperties.viewport_height) {
-      const dimensions = detectPNGDimensions(imageBuffer);
-      if (dimensions) {
+      try {
+        const dimensions = getDimensionsSync(imageBuffer);
         if (!extractedProperties.viewport_width) {
           extractedProperties.viewport_width = dimensions.width;
         }
         if (!extractedProperties.viewport_height) {
           extractedProperties.viewport_height = dimensions.height;
         }
-        logger.debug(`Auto-detected dimensions from PNG: ${dimensions.width}x${dimensions.height}`);
+        logger.debug(`Auto-detected dimensions: ${dimensions.width}x${dimensions.height}`);
+      } catch (err) {
+        logger.debug(`Failed to auto-detect dimensions: ${err.message}`);
       }
     }
 
@@ -464,24 +427,24 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
   };
   const acceptBaseline = async comparisonId => {
     try {
-      // Use TDD service to accept the baseline
-      const result = await tddService.acceptBaseline(comparisonId);
-
-      // Read current report data and update the comparison status
+      // Read current report data to get the comparison
       const reportData = readReportData();
       const comparison = reportData.comparisons.find(c => c.id === comparisonId);
-      if (comparison) {
-        // Update the comparison to passed status
-        const updatedComparison = {
-          ...comparison,
-          status: 'passed',
-          diffPercentage: 0,
-          diff: null
-        };
-        updateComparison(updatedComparison);
-      } else {
-        logger.error(`Comparison not found in report data for ID: ${comparisonId}`);
+      if (!comparison) {
+        throw new Error(`Comparison not found with ID: ${comparisonId}`);
       }
+
+      // Pass the comparison object to tddService instead of just the ID
+      const result = await tddService.acceptBaseline(comparison);
+
+      // Update the comparison to passed status
+      const updatedComparison = {
+        ...comparison,
+        status: 'passed',
+        diffPercentage: 0,
+        diff: null
+      };
+      updateComparison(updatedComparison);
       logger.info(`Baseline accepted for comparison ${comparisonId}`);
       return result;
     } catch (error) {
@@ -498,7 +461,9 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       // Accept all failed or new comparisons
       for (const comparison of reportData.comparisons) {
         if (comparison.status === 'failed' || comparison.status === 'new') {
-          await tddService.acceptBaseline(comparison.id);
+          // Pass the comparison object directly instead of just the ID
+          // This allows tddService to work with comparisons from report-data.json
+          await tddService.acceptBaseline(comparison);
 
           // Update the comparison to passed status
           updateComparison({

package/dist/server/http-server.js

@@ -7,8 +7,13 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PROJECT_ROOT = join(__dirname, '..', '..');
 const logger = createServiceLogger('HTTP-SERVER');
-export const createHttpServer = (port, screenshotHandler) => {
+export const createHttpServer = (port, screenshotHandler, services = {}) => {
   let server = null;
+
+  // Extract services for config/auth/project management
+  let configService = services.configService;
+  let authService = services.authService;
+  let projectService = services.projectService;
   const parseRequestBody = req => {
     return new Promise((resolve, reject) => {
       let body = '';
@@ -80,7 +85,7 @@ export const createHttpServer = (port, screenshotHandler) => {
     }
 
     // Serve the main React app for all non-API routes
-    if (req.method === 'GET' && (parsedUrl.pathname === '/' || parsedUrl.pathname === '/dashboard' || parsedUrl.pathname === '/stats')) {
+    if (req.method === 'GET' && (parsedUrl.pathname === '/' || parsedUrl.pathname === '/dashboard' || parsedUrl.pathname === '/stats' || parsedUrl.pathname === '/settings' || parsedUrl.pathname === '/projects')) {
       // Serve React-powered dashboard
       const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
 
@@ -98,7 +103,7 @@ export const createHttpServer = (port, screenshotHandler) => {
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Vizzly TDD Dashboard</title>
+    <title>Vizzly Dev Dashboard</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/reporter-bundle.css">
@@ -108,7 +113,7 @@ export const createHttpServer = (port, screenshotHandler) => {
         <div class="reporter-loading">
             <div>
                 <div class="spinner"></div>
-                <p>Loading Vizzly TDD Dashboard...</p>
+                <p>Loading Vizzly Dev Dashboard...</p>
             </div>
         </div>
     </div>
@@ -401,6 +406,470 @@ export const createHttpServer = (port, screenshotHandler) => {
       }
       return;
     }
+
+    // ===== CONFIG MANAGEMENT ENDPOINTS =====
+
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/config') {
+      // Get merged config with sources
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const configData = await configService.getConfig('merged');
+        res.statusCode = 200;
+        res.end(JSON.stringify(configData));
+      } catch (error) {
+        logger.error('Error fetching config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/config/project') {
+      // Get project-level config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const configData = await configService.getConfig('project');
+        res.statusCode = 200;
+        res.end(JSON.stringify(configData));
+      } catch (error) {
+        logger.error('Error fetching project config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/config/global') {
+      // Get global config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const configData = await configService.getConfig('global');
+        res.statusCode = 200;
+        res.end(JSON.stringify(configData));
+      } catch (error) {
+        logger.error('Error fetching global config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/config/project') {
+      // Update project config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const result = await configService.updateConfig('project', body);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          ...result
+        }));
+      } catch (error) {
+        logger.error('Error updating project config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/config/global') {
+      // Update global config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const result = await configService.updateConfig('global', body);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          ...result
+        }));
+      } catch (error) {
+        logger.error('Error updating global config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/config/validate') {
+      // Validate config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const result = await configService.validateConfig(body);
+        res.statusCode = 200;
+        res.end(JSON.stringify(result));
+      } catch (error) {
+        logger.error('Error validating config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+
+    // ===== AUTH ENDPOINTS =====
+
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/auth/status') {
+      // Get auth status and user info
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        const isAuthenticated = await authService.isAuthenticated();
+        let user = null;
+        if (isAuthenticated) {
+          const whoami = await authService.whoami();
+          user = whoami.user;
+        }
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          authenticated: isAuthenticated,
+          user
+        }));
+      } catch (error) {
+        logger.error('Error getting auth status:', error);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          authenticated: false,
+          user: null
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/auth/login') {
+      // Initiate device flow login
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        const deviceFlow = await authService.initiateDeviceFlow();
+
+        // Transform snake_case to camelCase for frontend
+        const 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
+        };
+        res.statusCode = 200;
+        res.end(JSON.stringify(response));
+      } catch (error) {
+        logger.error('Error initiating device flow:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/auth/poll') {
+      // Poll device authorization status
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const {
+          deviceCode
+        } = body;
+        if (!deviceCode) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({
+            error: 'deviceCode is required'
+          }));
+          return;
+        }
+        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')) {
+            res.statusCode = 200;
+            res.end(JSON.stringify({
+              status: 'pending'
+            }));
+            return;
+          }
+          // Other errors are actual failures
+          throw error;
+        }
+
+        // Check if authorization is complete by looking for tokens
+        if (result.tokens && result.tokens.accessToken) {
+          // Handle both snake_case and camelCase for token data
+          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);
+
+          // Return a simplified response to the client
+          res.statusCode = 200;
+          res.end(JSON.stringify({
+            status: 'complete',
+            user: result.user
+          }));
+        } else {
+          // Still pending or other status
+          res.statusCode = 200;
+          res.end(JSON.stringify({
+            status: 'pending'
+          }));
+        }
+      } catch (error) {
+        logger.error('Error polling device authorization:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/auth/logout') {
+      // Logout user
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        await authService.logout();
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          message: 'Logged out successfully'
+        }));
+      } catch (error) {
+        logger.error('Error logging out:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+
+    // ===== PROJECT MANAGEMENT ENDPOINTS =====
+
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/projects') {
+      // List all projects from API
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const projects = await projectService.listProjects();
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          projects
+        }));
+      } catch (error) {
+        logger.error('Error listing projects:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/projects/mappings') {
+      // List project directory mappings
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const mappings = await projectService.listMappings();
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          mappings
+        }));
+      } catch (error) {
+        logger.error('Error listing project mappings:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/projects/mappings') {
+      // Create or update project mapping
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const {
+          directory,
+          projectSlug,
+          organizationSlug,
+          token,
+          projectName
+        } = body;
+        const mapping = await projectService.createMapping(directory, {
+          projectSlug,
+          organizationSlug,
+          token,
+          projectName
+        });
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          mapping
+        }));
+      } catch (error) {
+        logger.error('Error creating project mapping:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'DELETE' && parsedUrl.pathname.startsWith('/api/projects/mappings/')) {
+      // Delete project mapping
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const directory = decodeURIComponent(parsedUrl.pathname.replace('/api/projects/mappings/', ''));
+        await projectService.removeMapping(directory);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          message: 'Mapping deleted'
+        }));
+      } catch (error) {
+        logger.error('Error deleting project mapping:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/builds/recent') {
+      // Get recent builds for current project
+      if (!projectService || !configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Required services not available'
+        }));
+        return;
+      }
+      try {
+        const config = await configService.getConfig('merged');
+        const {
+          projectSlug,
+          organizationSlug
+        } = config.config;
+        if (!projectSlug || !organizationSlug) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({
+            error: 'No project configured for this directory'
+          }));
+          return;
+        }
+        const limit = parseInt(parsedUrl.searchParams.get('limit') || '10', 10);
+        const branch = parsedUrl.searchParams.get('branch') || undefined;
+        const builds = await projectService.getRecentBuilds(projectSlug, organizationSlug, {
+          limit,
+          branch
+        });
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          builds
+        }));
+      } catch (error) {
+        logger.error('Error fetching recent builds:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
     res.statusCode = 404;
     res.end(JSON.stringify({
       error: 'Not found'