@vizzly-testing/cli 0.24.0 → 0.25.0

package/dist/client/index.js

@@ -191,6 +191,7 @@ function createSimpleClient(serverUrl) {
         let isFilePath = typeof imageBuffer === 'string';
         let image = isFilePath ? imageBuffer : imageBuffer.toString('base64');
         let type = isFilePath ? 'file-path' : 'base64';
+        let httpStart = Date.now();
         const {
           status,
           json
@@ -202,6 +203,10 @@ function createSimpleClient(serverUrl) {
           properties: options,
           fullPage: options.fullPage || false
         }, DEFAULT_TIMEOUT_MS);
+        let httpMs = Date.now() - httpStart;
+        if (shouldLogClient('debug')) {
+          console.debug(`[vizzly-client] ${name} HTTP completed in ${httpMs}ms`);
+        }
         if (status < 200 || status >= 300) {
           // In TDD mode, if we get 422 (visual difference), don't throw
           // This allows all screenshots in the test to be captured and compared

package/dist/plugin-api.js

@@ -9,10 +9,13 @@
  * exposed to plugins to prevent coupling to implementation details.
  */
 
+import { detectBranch, detectCommit, detectCommitMessage, detectPullRequestNumber, generateBuildNameWithGit } from './utils/git.js';
+
 /**
  * Creates a stable plugin services object from the internal services
  *
  * Only exposes:
+ * - git: Git information detection (branch, commit, PR number, etc.)
  * - testRunner: Build lifecycle management (createBuild, finalizeBuild, events)
  * - serverManager: Screenshot server control (start, stop)
  *
@@ -25,6 +28,29 @@ export function createPluginServices(services) {
     serverManager
   } = services;
   return Object.freeze({
+    // Git detection utilities - provides correct git info from CI environments
+    git: Object.freeze({
+      /**
+       * Detect git information for build creation
+       * Handles CI environment variables correctly (GitHub Actions, GitLab, etc.)
+       *
+       * @param {Object} [options] - Detection options
+       * @param {string} [options.buildPrefix] - Prefix for generated build name
+       * @returns {Promise<Object>} Git info: { branch, commit, message, prNumber, buildName }
+       */
+      async detect(options = {}) {
+        let [branch, commit, message] = await Promise.all([detectBranch(), detectCommit(), detectCommitMessage()]);
+        let prNumber = detectPullRequestNumber();
+        let buildName = await generateBuildNameWithGit(options.buildPrefix);
+        return {
+          branch,
+          commit,
+          message,
+          prNumber,
+          buildName
+        };
+      }
+    }),
     testRunner: Object.freeze({
       // EventEmitter methods for build lifecycle events
       once: testRunner.once.bind(testRunner),

package/dist/plugin-loader.js

@@ -68,8 +68,10 @@ async function discoverInstalledPlugins() {
         const packageJson = JSON.parse(readFileSync(pkgPath, 'utf-8'));
 
         // Check if package has a plugin field
-        if (packageJson.vizzly?.plugin) {
-          const pluginRelativePath = packageJson.vizzly.plugin;
+        // Support both new `vizzlyPlugin` and legacy `vizzly.plugin` for backwards compatibility
+        const pluginField = packageJson.vizzlyPlugin || packageJson.vizzly?.plugin;
+        if (pluginField) {
+          const pluginRelativePath = pluginField;
 
           // Security: Ensure plugin path is relative and doesn't traverse up
           if (pluginRelativePath.startsWith('/') || pluginRelativePath.includes('..')) {
@@ -174,11 +176,14 @@ function resolvePluginPath(pluginSpec, configPath) {
     try {
       const packageJsonPath = resolve(process.cwd(), 'node_modules', pluginSpec, 'package.json');
       const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
-      if (packageJson.vizzly?.plugin) {
+
+      // Support both new `vizzlyPlugin` and legacy `vizzly.plugin`
+      const pluginField = packageJson.vizzlyPlugin || packageJson.vizzly?.plugin;
+      if (pluginField) {
         const packageDir = dirname(packageJsonPath);
-        return resolve(packageDir, packageJson.vizzly.plugin);
+        return resolve(packageDir, pluginField);
       }
-      throw new Error('Package does not specify a vizzly.plugin field');
+      throw new Error('Package does not specify a vizzlyPlugin or vizzly.plugin field');
     } catch (error) {
       throw new Error(`Cannot resolve plugin package ${pluginSpec}: ${error.message}`);
     }

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

@@ -48,6 +48,10 @@ export const createApiHandler = (client, {
   let screenshotCount = 0;
   let uploadPromises = [];
   const handleScreenshot = async (buildId, name, image, properties = {}, type) => {
+    let handlerStart = Date.now();
+    output.debug('upload', `${name} received`, {
+      buildId: buildId?.slice(0, 8)
+    });
     if (vizzlyDisabled) {
       output.debug('upload', `${name} (disabled)`);
       return {
@@ -124,27 +128,39 @@ export const createApiHandler = (client, {
       };
     }
     screenshotCount++;
+    let uploadStart = Date.now();
 
     // Fire upload in background - DON'T AWAIT!
     let uploadPromise = uploadScreenshot(client, buildId, name, imageBuffer, properties ?? {}).then(result => {
+      let duration = Date.now() - uploadStart;
       if (!result.skipped) {
-        output.debug('upload', name);
+        output.debug('upload', `${name} completed`, {
+          ms: duration
+        });
+      } else {
+        output.debug('upload', `${name} skipped (dedup)`, {
+          ms: duration
+        });
       }
       return {
         success: true,
         name,
-        result
+        result,
+        duration
       };
     }).catch(uploadError => {
+      let duration = Date.now() - uploadStart;
       output.debug('upload', `${name} failed`, {
-        error: uploadError.message
+        error: uploadError.message,
+        ms: duration
       });
       vizzlyDisabled = true;
       output.warn('Vizzly disabled due to upload error - continuing tests without visual testing');
       return {
         success: false,
         name,
-        error: uploadError
+        error: uploadError,
+        duration
       };
     });
 
@@ -152,6 +168,10 @@ export const createApiHandler = (client, {
     uploadPromises.push(uploadPromise);
 
     // Return immediately - test continues without waiting!
+    let handlerMs = Date.now() - handlerStart;
+    output.debug('upload', `${name} handler returning`, {
+      ms: handlerMs
+    });
     return {
       statusCode: 200,
       body: {

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

@@ -268,6 +268,9 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     }
   };
   const handleScreenshot = async (_buildId, name, image, properties = {}, type) => {
+    let handlerStart = Date.now();
+    output.debug('tdd', `${name} received`);
+
     // Validate and sanitize screenshot name
     let sanitizedName;
     try {
@@ -444,6 +447,11 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
     }
 
     // Match or new baseline
+    let handlerMs = Date.now() - handlerStart;
+    output.debug('tdd', `${name} handler returning`, {
+      ms: handlerMs,
+      status: comparison.status
+    });
     return {
       statusCode: 200,
       body: {

package/dist/utils/config-loader.js

@@ -1,7 +1,7 @@
 import { resolve } from 'node:path';
 import { cosmiconfigSync } from 'cosmiconfig';
 import { validateVizzlyConfigWithDefaults } from './config-schema.js';
-import { getApiToken, getApiUrl, getParallelId } from './environment-config.js';
+import { getApiToken, getApiUrl, getBuildName, getParallelId } from './environment-config.js';
 import { getProjectMapping } from './global-config.js';
 import * as output from './output.js';
 const DEFAULT_CONFIG = {
@@ -98,12 +98,17 @@ export async function loadConfig(configPath = null, cliOverrides = {}) {
   // 4. Override with environment variables (higher priority than fallbacks)
   const envApiKey = getApiToken();
   const envApiUrl = getApiUrl();
+  const envBuildName = getBuildName();
   const envParallelId = getParallelId();
   if (envApiKey) {
     config.apiKey = envApiKey;
     output.debug('config', 'using token from environment');
   }
   if (envApiUrl !== 'https://app.vizzly.dev') config.apiUrl = envApiUrl;
+  if (envBuildName) {
+    config.build.name = envBuildName;
+    output.debug('config', 'using build name from environment');
+  }
   if (envParallelId) config.parallelId = envParallelId;
 
   // 5. Apply CLI overrides (highest priority)

package/dist/utils/environment-config.js

@@ -77,6 +77,14 @@ export function getParallelId() {
   return process.env.VIZZLY_PARALLEL_ID;
 }
 
+/**
+ * Get build name from environment
+ * @returns {string|undefined} Build name
+ */
+export function getBuildName() {
+  return process.env.VIZZLY_BUILD_NAME;
+}
+
 /**
  * Check if TDD mode is enabled
  * @returns {boolean} Whether TDD mode is enabled
@@ -107,6 +115,7 @@ export function getAllEnvironmentConfig() {
     enabled: isVizzlyEnabled(),
     serverUrl: getServerUrl(),
     buildId: getBuildId(),
+    buildName: getBuildName(),
     parallelId: getParallelId(),
     tddMode: isTddMode()
   };

package/package.json

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