@vizzly-testing/cli 0.39.0 → 0.39.2

package/dist/{project/operations.js → domains/projects/project.service.js}

@@ -1,3 +1,10 @@
+import { createAuthClient } from '../auth/auth-client.js';
+import { getAuthTokens } from '../auth/token-store.js';
+import { getApiUrl } from '../config/environment.js';
+import { enrichProjectsWithOrg, extractBuilds, extractOrganizations, extractProject, extractProjects, extractToken, extractTokens } from './project.normalizers.js';
+import { buildNoApiServiceError, buildNoAuthError, buildProjectFetchError, buildTokenCreateError, buildTokenRevokeError, buildTokensFetchError } from './project-errors.js';
+import { buildBuildsUrl, buildOrgHeader, buildProjectUrl, buildTokensUrl } from './project-requests.js';
+
 /**
  * Project Operations - Project operations with dependency injection
  *
@@ -7,11 +14,89 @@
  * This makes them trivially testable without mocking modules.
  */
 
-import { buildBuildsUrl, buildNoApiServiceError, buildNoAuthError, buildOrgHeader, buildProjectFetchError, buildProjectUrl, buildTokenCreateError, buildTokenRevokeError, buildTokensFetchError, buildTokensUrl, enrichProjectsWithOrg, extractBuilds, extractOrganizations, extractProject, extractProjects, extractToken, extractTokens } from './core.js';
+/**
+ * Project Service
+ * Wraps project operations for use by the HTTP server
+ *
+ * Provides the interface expected by src/domains/projects/projects.routes.js:
+ * - listProjects() - Returns [] if not authenticated
+ * - getRecentBuilds(projectSlug, organizationSlug, options) - Returns [] if not authenticated
+ *
+ * Error handling:
+ * - API methods (listProjects, getRecentBuilds) return empty arrays when not authenticated
+ */
+
+/**
+ * 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 {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
+  });
+
+  // Allow injection of getAuthTokens for testing
+  let tokenGetter = options.getAuthTokens || getAuthTokens;
 
-// ============================================================================
-// API Operations - List Projects
-// ============================================================================
+  /**
+   * 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();
+      // listProjects handles null oauthClient by returning []
+      return listProjects({
+        oauthClient,
+        apiClient: null
+      });
+    },
+    /**
+     * 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();
+      // getRecentBuilds handles null oauthClient by returning []
+      return getRecentBuilds({
+        oauthClient,
+        apiClient: null,
+        projectSlug,
+        organizationSlug,
+        limit: options.limit,
+        branch: options.branch
+      });
+    }
+  };
+}
 
 /**
  * List all projects from API using OAuth authentication
@@ -91,10 +176,6 @@ export async function listProjects({
   return [];
 }
 
-// ============================================================================
-// API Operations - Get Project
-// ============================================================================
-
 /**
  * Get project details using OAuth authentication
  * @param {Object} oauthClient - OAuth HTTP client
@@ -160,10 +241,6 @@ export async function getProject({
   throw buildNoAuthError();
 }
 
-// ============================================================================
-// API Operations - Recent Builds
-// ============================================================================
-
 /**
  * Get recent builds for a project using OAuth authentication
  * @param {Object} oauthClient - OAuth HTTP client
@@ -242,10 +319,6 @@ export async function getRecentBuilds({
   return [];
 }
 
-// ============================================================================
-// API Operations - Project Tokens
-// ============================================================================
-
 /**
  * Create a project token
  * @param {Object} apiClient - API HTTP client with request method

package/dist/domains/projects/project.validations.js

@@ -0,0 +1,31 @@
+export function parseProjectSelector(selector, options = {}) {
+  let organizationSlug = options.org || null;
+  let projectSlug = options.project || null;
+  if (selector) {
+    let parts = selector.split('/');
+    if (parts.length === 2) {
+      organizationSlug = organizationSlug || parts[0];
+      projectSlug = projectSlug || parts[1];
+    } else if (parts.length === 1) {
+      projectSlug = projectSlug || parts[0];
+    }
+  }
+  return {
+    organizationSlug,
+    projectSlug
+  };
+}
+export function validateProjectLinkOptions(selector, options = {}) {
+  let errors = [];
+  let {
+    organizationSlug,
+    projectSlug
+  } = parseProjectSelector(selector, options);
+  if (!organizationSlug) {
+    errors.push('Organization is required. Use <org>/<project> or --org <slug>.');
+  }
+  if (!projectSlug) {
+    errors.push('Project is required. Use <org>/<project> or --project <slug>.');
+  }
+  return errors;
+}

package/dist/{commands/projects.js → domains/projects/projects.commands.js}

@@ -1,13 +1,12 @@
+import * as defaultOutput from '../../shared/output.js';
+import { createApiClient as defaultCreateApiClient } from '../auth/cloud-client.js';
+import { loadConfig as defaultLoadConfig } from '../config/config-loader.js';
+import { getApiUrl as defaultGetApiUrl } from '../config/environment.js';
+
 /**
  * Projects command - List projects the user has access to
  */
 
-import { createApiClient as defaultCreateApiClient } from '../api/client.js';
-import { loadConfig as defaultLoadConfig } from '../utils/config-loader.js';
-import { getApiUrl as defaultGetApiUrl } from '../utils/environment-config.js';
-import { getAccessToken as defaultGetAccessToken } from '../utils/global-config.js';
-import * as defaultOutput from '../utils/output.js';
-
 /**
  * Projects command implementation
  * @param {Object} options - Command options
@@ -19,7 +18,6 @@ export async function projectsCommand(options = {}, globalOptions = {}, deps = {
     loadConfig = defaultLoadConfig,
     createApiClient = defaultCreateApiClient,
     getApiUrl = defaultGetApiUrl,
-    getAccessToken = defaultGetAccessToken,
     output = defaultOutput,
     exit = code => process.exit(code)
   } = deps;
@@ -33,7 +31,7 @@ export async function projectsCommand(options = {}, globalOptions = {}, deps = {
 
     // Prefer user auth token for listing projects (project tokens are org-scoped).
     // Falls back to config.apiKey which may be: VIZZLY_TOKEN, --token flag, or project token.
-    let token = (await getAccessToken()) || config.apiKey;
+    let token = config.userToken || config.apiKey;
     if (!token) {
       output.error('API token required. Use --token, set VIZZLY_TOKEN, or run "vizzly login"');
       output.cleanup();

package/dist/{server/routers/projects.js → domains/projects/projects.routes.js}

@@ -1,11 +1,11 @@
+import { sendError, sendServiceUnavailable, sendSuccess } from '../../adapters/http/middleware/response.js';
+import * as output from '../../shared/output.js';
+
 /**
  * Projects Router
  * Handles project listing and builds endpoints
  */
 
-import * as output from '../../utils/output.js';
-import { sendError, sendServiceUnavailable, sendSuccess } from '../middleware/response.js';
-
 /**
  * Create projects router
  * @param {Object} context - Router context
@@ -25,7 +25,7 @@ export function createProjectsRouter({
     // List all projects from API
     if (req.method === 'GET' && pathname === '/api/projects') {
       try {
-        const projects = await projectService.listProjects();
+        let projects = await projectService.listProjects();
         sendSuccess(res, {
           projects
         });
@@ -40,7 +40,7 @@ export function createProjectsRouter({
     }
 
     // Get builds for a specific project (used by /builds page)
-    const projectBuildsMatch = pathname.match(/^\/api\/projects\/([^/]+)\/([^/]+)\/builds$/);
+    let projectBuildsMatch = pathname.match(/^\/api\/projects\/([^/]+)\/([^/]+)\/builds$/);
     if (req.method === 'GET' && projectBuildsMatch) {
       try {
         let organizationSlug = decodeURIComponent(projectBuildsMatch[1]);

package/dist/domains/reports/dashboard.routes.js

@@ -0,0 +1,96 @@
+/** Dashboard HTTP projections and the reporter application shell. */
+import { sendError, sendHtml, sendSuccess } from '../../adapters/http/middleware/response.js';
+import * as output from '../../shared/output.js';
+import { presentComparisonDetails } from './report.serializers.js';
+import { createReportStore } from './report-store.js';
+let SPA_ROUTES = ['/', '/stats', '/settings', '/projects', '/builds'];
+export function createDashboardRouter(context) {
+  let {
+    workingDir = process.cwd()
+  } = context || {};
+  let reports = createReportStore(workingDir);
+  return async function handleDashboardRoute(req, res, pathname) {
+    if (req.method !== 'GET') return false;
+    if (pathname === '/api/report-data') {
+      try {
+        sendSuccess(res, reports.readSnapshot());
+      } catch (error) {
+        output.debug('Error reading report data:', {
+          error: error.message
+        });
+        sendError(res, 500, 'Failed to read report data');
+      }
+      return true;
+    }
+    let comparisonMatch = pathname.match(/^\/api\/comparison\/(.+)$/);
+    if (comparisonMatch) {
+      let comparisonId = decodeURIComponent(comparisonMatch[1]);
+      if (!comparisonId) {
+        sendError(res, 400, 'Comparison ID is required');
+        return true;
+      }
+      try {
+        let reportData = reports.readReport();
+        if (!reportData) {
+          sendError(res, 404, 'No report data found');
+          return true;
+        }
+        let comparison = (reportData.comparisons || []).find(candidate => candidate.id === comparisonId || candidate.signature === comparisonId || candidate.name === comparisonId);
+        if (!comparison) {
+          sendError(res, 404, 'Comparison not found');
+          return true;
+        }
+        let heavy = reports.readDetails()[comparison.id];
+        sendSuccess(res, heavy ? {
+          ...comparison,
+          ...presentComparisonDetails(heavy)
+        } : comparison);
+      } catch (error) {
+        output.debug('Error reading comparison data:', {
+          error: error.message
+        });
+        sendError(res, 500, 'Failed to read comparison data');
+      }
+      return true;
+    }
+    if (SPA_ROUTES.includes(pathname) || pathname.startsWith('/comparison/')) {
+      let reportData = null;
+      try {
+        reportData = reports.readSnapshot();
+      } 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/events.js → domains/reports/events.routes.js}

@@ -3,8 +3,9 @@
  * Server-Sent Events endpoint for real-time dashboard updates
  */
 
-import { existsSync, readFileSync, statSync, watch } from 'node:fs';
+import { existsSync, statSync, watch } from 'node:fs';
 import { join } from 'node:path';
+import { createReportStore } from './report-store.js';
 let FILE_WATCH_DEBOUNCE_MS = 25;
 let FILE_POLL_INTERVAL_MS = 50;
 let REPORT_READ_RETRY_MS = 25;
@@ -16,37 +17,6 @@ let defaultTimers = {
   clearInterval
 };
 
-/**
- * Read and parse JSON from disk, returning null on missing or invalid files.
- */
-function readJsonFile(path) {
-  if (!existsSync(path)) {
-    return null;
-  }
-  try {
-    return JSON.parse(readFileSync(path, 'utf8'));
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Read report data and attach baseline metadata for the stats view.
- */
-function readReportDataFile({
-  reportDataPath,
-  baselineMetadataPath
-}) {
-  let data = readJsonFile(reportDataPath);
-  if (!data) {
-    return null;
-  }
-  return {
-    ...data,
-    baseline: readJsonFile(baselineMetadataPath)
-  };
-}
-
 /**
  * Build a lookup map from comparisons array keyed by id
  */
@@ -193,14 +163,22 @@ function watchReportDataFile({
  * @returns {Function} Route handler
  */
 export function createEventsRouter(context) {
+  let workingDir = context?.workingDir || process.cwd();
+  let reports = createReportStore(workingDir);
+  let readSnapshot = () => {
+    try {
+      return reports.readSnapshot();
+    } catch {
+      return null;
+    }
+  };
   let {
-    workingDir = process.cwd(),
-    readReportData = readReportDataFile,
+    readReportData = readSnapshot,
     watchReportData = watchReportDataFile,
     timers = defaultTimers
   } = context || {};
-  let reportDataPath = join(workingDir, '.vizzly', 'report-data.json');
-  let baselineMetadataPath = join(workingDir, '.vizzly', 'baselines', 'metadata.json');
+  let reportDataPath = reports.paths.report;
+  let baselineMetadataPath = reports.paths.baseline;
 
   /**
    * Send SSE event to response

package/dist/domains/reports/report-assets.routes.js

@@ -0,0 +1,81 @@
+/**
+ * Assets Router
+ * Serves static assets (bundle files, images)
+ */
+
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { sendError, sendFile, sendNotFound } from '../../adapters/http/middleware/response.js';
+import * as output from '../../shared/output.js';
+import { getPackageRoot } from '../../shared/package-info.js';
+let reporterAssets = new Map([['/reporter-bundle.js', {
+  filename: 'reporter-bundle.iife.js',
+  contentType: 'application/javascript',
+  label: 'reporter bundle',
+  missing: 'Reporter bundle not found'
+}], ['/reporter-bundle.css', {
+  filename: 'reporter-bundle.css',
+  contentType: 'text/css',
+  label: 'reporter CSS',
+  missing: 'Reporter CSS not found'
+}]]);
+
+/**
+ * Create assets router for a workspace's report and packaged reporter build.
+ * @param {Object} [context] - Router context
+ * @param {string} [context.workingDir] - Workspace containing report artifacts
+ * @returns {Function} Route handler
+ */
+export function createAssetsRouter({
+  workingDir = process.cwd()
+} = {}) {
+  return async function handleAssetsRoute(req, res, pathname) {
+    if (req.method !== 'GET') {
+      return false;
+    }
+    let asset = reporterAssets.get(pathname);
+    if (asset) {
+      let filename = join(getPackageRoot(), 'dist', 'reporter', asset.filename);
+      if (!existsSync(filename)) {
+        sendNotFound(res, asset.missing);
+        return true;
+      }
+      try {
+        sendFile(res, readFileSync(filename, 'utf8'), asset.contentType);
+      } catch (error) {
+        output.debug(`Error serving ${asset.label}:`, {
+          error: error.message
+        });
+        sendError(res, 500, `Error loading ${asset.label}`);
+      }
+      return true;
+    }
+
+    // Serve images from .vizzly directory
+    if (pathname.startsWith('/images/')) {
+      let imagePath = pathname.replace('/images/', '');
+      let fullImagePath = join(workingDir, '.vizzly', imagePath);
+      if (existsSync(fullImagePath)) {
+        try {
+          let imageData = readFileSync(fullImagePath);
+          // Images are rewritten in place between TDD runs, so disable browser caching.
+          res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+          res.setHeader('Pragma', 'no-cache');
+          res.setHeader('Expires', '0');
+          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/domains/reports/report-state.js

@@ -0,0 +1,51 @@
+/** Local review summaries intentionally count new baselines as passing captures. */
+export function summarizeReportComparisons(comparisons = []) {
+  let summary = {
+    total: comparisons.length,
+    passed: 0,
+    failed: 0,
+    rejected: 0,
+    errors: 0
+  };
+  for (let comparison of comparisons) {
+    if (['passed', 'baseline-created', 'new'].includes(comparison.status)) {
+      summary.passed++;
+    } else if (comparison.status === 'failed') {
+      summary.failed++;
+    } else if (comparison.status === 'rejected') {
+      summary.rejected++;
+    } else if (comparison.status === 'error') {
+      summary.errors++;
+    }
+  }
+  return summary;
+}
+export function createEmptyReport(timestamp) {
+  return {
+    timestamp,
+    comparisons: [],
+    summary: summarizeReportComparisons()
+  };
+}
+function withComparisons(report, comparisons, timestamp) {
+  return {
+    ...report,
+    timestamp,
+    comparisons,
+    summary: summarizeReportComparisons(comparisons)
+  };
+}
+export function upsertReportComparison(report, comparison, timestamp) {
+  let previous = report.comparisons || [];
+  let existing = previous.find(candidate => candidate.id === comparison.id);
+  let updated = {
+    ...comparison,
+    initialStatus: existing?.initialStatus || comparison.status
+  };
+  let comparisons = existing ? previous.map(candidate => candidate.id === comparison.id ? updated : candidate) : [...previous, updated];
+  return withComparisons(report, comparisons, timestamp);
+}
+export function removeReportComparison(report, id, timestamp) {
+  let comparisons = (report.comparisons || []).filter(comparison => comparison.id !== id);
+  return withComparisons(report, comparisons, timestamp);
+}

package/dist/domains/reports/report-store.js

@@ -0,0 +1,85 @@
+import { existsSync as defaultExistsSync, readFileSync as defaultReadFileSync, unlinkSync as defaultUnlinkSync, writeFileSync as defaultWriteFileSync } from 'node:fs';
+import { join as defaultJoin } from 'node:path';
+import * as defaultOutput from '../../shared/output.js';
+import { createEmptyReport } from './report-state.js';
+
+/** The local report has one lightweight watched file and one heavy-details file. */
+export function createReportStore(workingDir, io = {}) {
+  let {
+    existsSync = defaultExistsSync,
+    readFileSync = defaultReadFileSync,
+    writeFileSync = defaultWriteFileSync,
+    unlinkSync = defaultUnlinkSync,
+    join = defaultJoin,
+    output = defaultOutput
+  } = io;
+  let paths = {
+    report: join(workingDir, '.vizzly', 'report-data.json'),
+    details: join(workingDir, '.vizzly', 'comparison-details.json'),
+    baseline: join(workingDir, '.vizzly', 'baselines', 'metadata.json')
+  };
+  function readJson(filename) {
+    return existsSync(filename) ? JSON.parse(readFileSync(filename, 'utf8')) : null;
+  }
+  function readReport() {
+    return readJson(paths.report);
+  }
+  function readBaselineMetadata() {
+    try {
+      return readJson(paths.baseline);
+    } catch {
+      return null;
+    }
+  }
+  function readSnapshot() {
+    let report = readReport();
+    return report ? {
+      ...report,
+      baseline: readBaselineMetadata()
+    } : null;
+  }
+  function readDetails() {
+    try {
+      return readJson(paths.details) || {};
+    } catch (error) {
+      output.debug('Failed to read comparison details:', error);
+      return {};
+    }
+  }
+  function writeReport(report) {
+    writeFileSync(paths.report, JSON.stringify(report));
+  }
+  function updateDetails(id, fields) {
+    let hasData = Object.values(fields).some(value => value != null && (!Array.isArray(value) || value.length > 0));
+    if (!hasData) return;
+    let details = readDetails();
+    details[id] = fields;
+    writeFileSync(paths.details, JSON.stringify(details));
+  }
+  function removeDetails(id) {
+    let details = readDetails();
+    delete details[id];
+    writeFileSync(paths.details, JSON.stringify(details));
+  }
+  function reset() {
+    writeReport(createEmptyReport(Date.now()));
+    if (existsSync(paths.details)) writeFileSync(paths.details, JSON.stringify({}));
+  }
+  function clear() {
+    for (let filename of [paths.report, paths.details]) {
+      if (existsSync(filename)) unlinkSync(filename);
+    }
+  }
+  return {
+    paths,
+    readReport,
+    readSnapshot,
+    readBaselineMetadata,
+    readDetails,
+    writeReport,
+    updateDetails,
+    removeDetails,
+    reset,
+    clear
+  };
+}