@vizzly-testing/cli 0.13.4 → 0.15.0

package/dist/server/routers/config.js

@@ -0,0 +1,126 @@
+/**
+ * Config Router
+ * Handles configuration management endpoints
+ */
+
+import { parseJsonBody } from '../middleware/json-parser.js';
+import { sendSuccess, sendError, sendServiceUnavailable } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+
+/**
+ * Create config router
+ * @param {Object} context - Router context
+ * @param {Object} context.configService - Config service
+ * @returns {Function} Route handler
+ */
+export function createConfigRouter({
+  configService
+}) {
+  return async function handleConfigRoute(req, res, pathname) {
+    // Check if config service is available for all config routes
+    if (pathname.startsWith('/api/config') && !configService) {
+      sendServiceUnavailable(res, 'Config service');
+      return true;
+    }
+
+    // Get merged config with sources
+    if (req.method === 'GET' && pathname === '/api/config') {
+      try {
+        let configData = await configService.getConfig('merged');
+        sendSuccess(res, configData);
+        return true;
+      } catch (error) {
+        output.debug('Error fetching config:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Get project-level config
+    if (req.method === 'GET' && pathname === '/api/config/project') {
+      try {
+        let configData = await configService.getConfig('project');
+        sendSuccess(res, configData);
+        return true;
+      } catch (error) {
+        output.debug('Error fetching project config:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Get global config
+    if (req.method === 'GET' && pathname === '/api/config/global') {
+      try {
+        let configData = await configService.getConfig('global');
+        sendSuccess(res, configData);
+        return true;
+      } catch (error) {
+        output.debug('Error fetching global config:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Update project config
+    if (req.method === 'POST' && pathname === '/api/config/project') {
+      try {
+        let body = await parseJsonBody(req);
+        let result = await configService.updateConfig('project', body);
+        sendSuccess(res, {
+          success: true,
+          ...result
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error updating project config:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Update global config
+    if (req.method === 'POST' && pathname === '/api/config/global') {
+      try {
+        let body = await parseJsonBody(req);
+        let result = await configService.updateConfig('global', body);
+        sendSuccess(res, {
+          success: true,
+          ...result
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error updating global config:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Validate config
+    if (req.method === 'POST' && pathname === '/api/config/validate') {
+      try {
+        let body = await parseJsonBody(req);
+        let result = await configService.validateConfig(body);
+        sendSuccess(res, result);
+        return true;
+      } catch (error) {
+        output.debug('Error validating config:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+    return false;
+  };
+}

package/dist/server/routers/dashboard.js

@@ -0,0 +1,130 @@
+/**
+ * Dashboard Router
+ * Serves the React SPA for all dashboard routes
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import { sendHtml, sendSuccess } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+
+// SPA routes that should serve the dashboard HTML
+let SPA_ROUTES = ['/', '/dashboard', '/stats', '/settings', '/projects', '/builds'];
+
+/**
+ * Create dashboard router
+ * @param {Object} context - Router context
+ * @returns {Function} Route handler
+ */
+export function createDashboardRouter() {
+  return async function handleDashboardRoute(req, res, pathname) {
+    if (req.method !== 'GET') {
+      return false;
+    }
+
+    // API endpoint for fetching report data
+    if (pathname === '/api/report-data') {
+      let reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      if (existsSync(reportDataPath)) {
+        try {
+          let data = readFileSync(reportDataPath, 'utf8');
+          res.setHeader('Content-Type', 'application/json');
+          res.statusCode = 200;
+          res.end(data);
+          return true;
+        } catch (error) {
+          output.debug('Error reading report data:', {
+            error: error.message
+          });
+          res.statusCode = 500;
+          res.end(JSON.stringify({
+            error: 'Failed to read report data'
+          }));
+          return true;
+        }
+      } else {
+        sendSuccess(res, null);
+        return true;
+      }
+    }
+
+    // API endpoint for real-time status
+    if (pathname === '/api/status') {
+      let reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      let baselineMetadataPath = join(process.cwd(), '.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/')) {
+      let reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+      let reportData = null;
+      if (existsSync(reportDataPath)) {
+        try {
+          let data = readFileSync(reportDataPath, 'utf8');
+          reportData = JSON.parse(data);
+        } catch (error) {
+          output.debug('Could not read report data:', {
+            error: error.message
+          });
+        }
+      }
+      let dashboardHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+    <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">
+</head>
+<body>
+    <div id="vizzly-reporter-root">
+        <div class="reporter-loading">
+            <div>
+                <div class="spinner"></div>
+                <p>Loading Vizzly Dev Dashboard...</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Inject report data if available
+        ${reportData ? `window.VIZZLY_REPORTER_DATA = ${JSON.stringify(reportData)};` : ''}
+    </script>
+    <script src="/reporter-bundle.js"></script>
+</body>
+</html>`;
+      sendHtml(res, 200, dashboardHtml);
+      return true;
+    }
+    return false;
+  };
+}

package/dist/server/routers/health.js

@@ -0,0 +1,61 @@
+/**
+ * Health Router
+ * Health check endpoint with diagnostics
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import { sendSuccess } from '../middleware/response.js';
+
+/**
+ * Create health router
+ * @param {Object} context - Router context
+ * @param {number} context.port - Server port
+ * @param {Object} context.screenshotHandler - Screenshot handler
+ * @returns {Function} Route handler
+ */
+export function createHealthRouter({
+  port,
+  screenshotHandler
+}) {
+  return async function handleHealthRoute(req, res, pathname) {
+    if (req.method !== 'GET' || pathname !== '/health') {
+      return false;
+    }
+    let reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
+    let baselineMetadataPath = join(process.cwd(), '.vizzly', 'baselines', 'metadata.json');
+    let reportData = null;
+    let baselineInfo = null;
+    if (existsSync(reportDataPath)) {
+      try {
+        reportData = JSON.parse(readFileSync(reportDataPath, 'utf8'));
+      } catch {
+        // Ignore read errors
+      }
+    }
+    if (existsSync(baselineMetadataPath)) {
+      try {
+        baselineInfo = JSON.parse(readFileSync(baselineMetadataPath, 'utf8'));
+      } catch {
+        // Ignore read errors
+      }
+    }
+    sendSuccess(res, {
+      status: 'ok',
+      port,
+      uptime: process.uptime(),
+      mode: screenshotHandler ? 'tdd' : 'upload',
+      baseline: baselineInfo ? {
+        buildName: baselineInfo.buildName,
+        createdAt: baselineInfo.createdAt
+      } : null,
+      stats: reportData ? {
+        total: reportData.summary?.total || 0,
+        passed: reportData.summary?.passed || 0,
+        failed: reportData.summary?.failed || 0,
+        errors: reportData.summary?.errors || 0
+      } : null
+    });
+    return true;
+  };
+}

package/dist/server/routers/projects.js

@@ -0,0 +1,168 @@
+/**
+ * Projects Router
+ * Handles project management and builds endpoints
+ */
+
+import { parseJsonBody } from '../middleware/json-parser.js';
+import { sendSuccess, sendError, sendServiceUnavailable } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+
+/**
+ * Create projects router
+ * @param {Object} context - Router context
+ * @param {Object} context.projectService - Project service
+ * @returns {Function} Route handler
+ */
+export function createProjectsRouter({
+  projectService
+}) {
+  return async function handleProjectsRoute(req, res, pathname, parsedUrl) {
+    // Check if project service is available for all project routes
+    if (pathname.startsWith('/api/projects') && !projectService) {
+      sendServiceUnavailable(res, 'Project service');
+      return true;
+    }
+
+    // List all projects from API
+    if (req.method === 'GET' && pathname === '/api/projects') {
+      try {
+        let projects = await projectService.listProjects();
+        sendSuccess(res, {
+          projects
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error listing projects:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // List project directory mappings
+    if (req.method === 'GET' && pathname === '/api/projects/mappings') {
+      try {
+        let mappings = await projectService.listMappings();
+        sendSuccess(res, {
+          mappings
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error listing project mappings:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Create or update project mapping
+    if (req.method === 'POST' && pathname === '/api/projects/mappings') {
+      try {
+        let body = await parseJsonBody(req);
+        let {
+          directory,
+          projectSlug,
+          organizationSlug,
+          token,
+          projectName
+        } = body;
+        let mapping = await projectService.createMapping(directory, {
+          projectSlug,
+          organizationSlug,
+          token,
+          projectName
+        });
+        sendSuccess(res, {
+          success: true,
+          mapping
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error creating project mapping:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Delete project mapping
+    if (req.method === 'DELETE' && pathname.startsWith('/api/projects/mappings/')) {
+      try {
+        let directory = decodeURIComponent(pathname.replace('/api/projects/mappings/', ''));
+        await projectService.removeMapping(directory);
+        sendSuccess(res, {
+          success: true,
+          message: 'Mapping deleted'
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error deleting project mapping:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Get recent builds for current project
+    if (req.method === 'GET' && pathname === '/api/builds/recent') {
+      if (!projectService) {
+        sendServiceUnavailable(res, 'Project service');
+        return true;
+      }
+      try {
+        let currentDir = process.cwd();
+        let mapping = await projectService.getMapping(currentDir);
+        if (!mapping || !mapping.projectSlug || !mapping.organizationSlug) {
+          sendError(res, 400, 'No project configured for this directory');
+          return true;
+        }
+        let limit = parseInt(parsedUrl.searchParams.get('limit') || '10', 10);
+        let branch = parsedUrl.searchParams.get('branch') || undefined;
+        let builds = await projectService.getRecentBuilds(mapping.projectSlug, mapping.organizationSlug, {
+          limit,
+          branch
+        });
+        sendSuccess(res, {
+          builds
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error fetching recent builds:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+
+    // Get builds for a specific project (used by /builds page)
+    let projectBuildsMatch = pathname.match(/^\/api\/projects\/([^/]+)\/([^/]+)\/builds$/);
+    if (req.method === 'GET' && projectBuildsMatch) {
+      try {
+        let organizationSlug = decodeURIComponent(projectBuildsMatch[1]);
+        let projectSlug = decodeURIComponent(projectBuildsMatch[2]);
+        let limit = parseInt(parsedUrl.searchParams.get('limit') || '20', 10);
+        let branch = parsedUrl.searchParams.get('branch') || undefined;
+        let builds = await projectService.getRecentBuilds(projectSlug, organizationSlug, {
+          limit,
+          branch
+        });
+        sendSuccess(res, {
+          builds
+        });
+        return true;
+      } catch (error) {
+        output.debug('Error fetching project builds:', {
+          error: error.message
+        });
+        sendError(res, 500, error.message);
+        return true;
+      }
+    }
+    return false;
+  };
+}

package/dist/server/routers/screenshot.js

@@ -0,0 +1,86 @@
+/**
+ * Screenshot Router
+ * Handles screenshot uploads and legacy baseline accept
+ */
+
+import { parseJsonBody } from '../middleware/json-parser.js';
+import { sendJson, sendError } from '../middleware/response.js';
+import * as output from '../../utils/output.js';
+
+/**
+ * Create screenshot router
+ * @param {Object} context - Router context
+ * @param {Object} context.screenshotHandler - Screenshot handler
+ * @param {string|null} context.defaultBuildId - Default build ID
+ * @returns {Function} Route handler
+ */
+export function createScreenshotRouter({
+  screenshotHandler,
+  defaultBuildId
+}) {
+  return async function handleScreenshotRoute(req, res, pathname) {
+    if (req.method !== 'POST') {
+      return false;
+    }
+
+    // Main screenshot upload endpoint
+    if (pathname === '/screenshot') {
+      try {
+        let body = await parseJsonBody(req);
+        let {
+          buildId,
+          name,
+          properties,
+          image
+        } = body;
+        if (!name || !image) {
+          sendError(res, 400, 'name and image are required');
+          return true;
+        }
+
+        // Use buildId from request body, or fall back to server's buildId
+        let effectiveBuildId = buildId || defaultBuildId;
+        let result = await screenshotHandler.handleScreenshot(effectiveBuildId, name, image, properties);
+        sendJson(res, result.statusCode, result.body);
+        return true;
+      } catch (error) {
+        output.debug('Screenshot processing error:', {
+          error: error.message
+        });
+        sendError(res, 500, 'Failed to process screenshot');
+        return true;
+      }
+    }
+
+    // Legacy accept-baseline endpoint
+    if (pathname === '/accept-baseline') {
+      try {
+        let body = await parseJsonBody(req);
+        let {
+          id
+        } = body;
+        if (!id) {
+          sendError(res, 400, 'comparison ID is required');
+          return true;
+        }
+        if (screenshotHandler.acceptBaseline) {
+          let result = await screenshotHandler.acceptBaseline(id);
+          sendJson(res, 200, {
+            success: true,
+            ...result
+          });
+        } else {
+          sendError(res, 501, 'Accept baseline not implemented');
+        }
+        return true;
+      } catch (error) {
+        output.debug('Accept baseline error:', {
+          error: error.message
+        });
+        sendError(res, 500, 'Failed to accept baseline');
+        return true;
+      }
+    }
+    return false;
+  };
+}

package/dist/services/auth-service.js

@@ -95,7 +95,7 @@ export class AuthService {
       if (response.status === 401) {
         throw new AuthError('Authentication token is invalid or expired. Please run "vizzly login" again.');
       }
-      throw new VizzlyError(`API request failed: ${response.status}${errorText ? ` - ${errorText}` : ''}`, 'API_REQUEST_ERROR');
+      throw new VizzlyError(`API request failed: ${response.status}${errorText ? ` - ${errorText}` : ''} (${endpoint})`, 'API_REQUEST_ERROR');
     }
     return response.json();
   }

package/dist/services/build-manager.js

@@ -5,7 +5,6 @@
 
 import crypto from 'crypto';
 import { VizzlyError } from '../errors/vizzly-error.js';
-import { BaseService } from './base-service.js';
 
 /**
  * Generate unique build ID for local build management only.
@@ -121,31 +120,15 @@ export function validateBuildOptions(buildOptions) {
     errors
   };
 }
-export class BuildManager extends BaseService {
-  constructor(config, logger) {
-    super(config, {
-      logger
-    });
+export class BuildManager {
+  constructor(config) {
+    this.config = config;
     this.currentBuild = null;
     this.buildQueue = [];
   }
-  async onStart() {
-    this.emitProgress('initializing', 0);
-  }
-  async onStop() {
-    if (this.currentBuild && this.currentBuild.status === 'pending') {
-      await this.updateBuildStatus(this.currentBuild.id, 'cancelled');
-    }
-    this.buildQueue.length = 0;
-    this.currentBuild = null;
-  }
   async createBuild(buildOptions) {
-    this.emitProgress('creating', 'Creating new build...');
-    const build = createBuildObject(buildOptions);
+    let build = createBuildObject(buildOptions);
     this.currentBuild = build;
-    this.emitProgress('created', `Build created: ${build.name}`, {
-      build
-    });
     return build;
   }
   async updateBuildStatus(buildId, status, updates = {}) {
@@ -153,11 +136,6 @@ export class BuildManager extends BaseService {
       throw new VizzlyError(`Build ${buildId} not found`, 'BUILD_NOT_FOUND');
     }
     this.currentBuild = updateBuild(this.currentBuild, status, updates);
-    this.emitProgress('updated', `Build status: ${status}`, {
-      buildId,
-      status,
-      build: this.currentBuild
-    });
     return this.currentBuild;
   }
   async addScreenshot(buildId, screenshot) {
@@ -165,11 +143,6 @@ export class BuildManager extends BaseService {
       throw new VizzlyError(`Build ${buildId} not found`, 'BUILD_NOT_FOUND');
     }
     this.currentBuild = addScreenshotToBuild(this.currentBuild, screenshot);
-    this.emitProgress('screenshot-added', 'Screenshot added to build', {
-      buildId,
-      screenshotCount: this.currentBuild.screenshots.length,
-      screenshot
-    });
     return this.currentBuild;
   }
   async finalizeBuild(buildId, result = {}) {
@@ -177,22 +150,22 @@ export class BuildManager extends BaseService {
       throw new VizzlyError(`Build ${buildId} not found`, 'BUILD_NOT_FOUND');
     }
     this.currentBuild = finalizeBuildObject(this.currentBuild, result);
-    this.emitProgress('finalized', `Build ${this.currentBuild.status}`, {
-      buildId,
-      build: this.currentBuild,
-      result
-    });
     return this.currentBuild;
   }
   getCurrentBuild() {
     return this.currentBuild;
   }
   queueBuild(buildOptions) {
-    const queuedBuild = createQueuedBuild(buildOptions);
+    let queuedBuild = createQueuedBuild(buildOptions);
     this.buildQueue.push(queuedBuild);
-    this.emitProgress('queued', 'Build queued for processing', {
-      queueLength: this.buildQueue.length
-    });
+  }
+  async clear() {
+    // Cancel pending build if exists
+    if (this.currentBuild && this.currentBuild.status === 'pending') {
+      await this.updateBuildStatus(this.currentBuild.id, 'cancelled');
+    }
+    this.buildQueue.length = 0;
+    this.currentBuild = null;
   }
   async processNextBuild() {
     if (this.buildQueue.length === 0) {