@vizzly-testing/cli 0.7.1 → 0.8.0

package/README.md

@@ -368,7 +368,7 @@ Check if Vizzly is enabled in the current environment.
 
 ### Core Configuration
 - `VIZZLY_TOKEN`: API authentication token. Example: `export VIZZLY_TOKEN=your-token`.
-- `VIZZLY_API_URL`: Override API base URL. Default: `https://vizzly.dev`.
+- `VIZZLY_API_URL`: Override API base URL. Default: `https://app.vizzly.dev`.
 - `VIZZLY_LOG_LEVEL`: Logger level. One of `debug`, `info`, `warn`, `error`. Example: `export VIZZLY_LOG_LEVEL=debug`.
 
 ### Parallel Builds

package/dist/commands/upload.js

@@ -190,7 +190,9 @@ export async function uploadCommand(screenshotsPath, options = {}, globalOptions
         // Silent fail on cleanup
       }
     }
-    ui.error('Upload failed', error);
+    // Use user-friendly error message if available
+    const errorMessage = error?.getUserMessage ? error.getUserMessage() : error.message;
+    ui.error(errorMessage || 'Upload failed', error);
   }
 }
 

package/dist/sdk/index.js

@@ -30,7 +30,7 @@ import { VizzlyError } from '../errors/vizzly-error.js';
  *
  * const vizzly = await createVizzly({
  *   apiKey: process.env.VIZZLY_TOKEN,
- *   apiUrl: 'https://vizzly.dev',
+ *   apiUrl: 'https://app.vizzly.dev',
  *   server: {
  *     port: 3003,
  *     enabled: true

package/dist/services/api-service.js

@@ -4,7 +4,7 @@
  */
 
 import { URLSearchParams } from 'url';
-import { VizzlyError } from '../errors/vizzly-error.js';
+import { VizzlyError, AuthError } from '../errors/vizzly-error.js';
 import crypto from 'crypto';
 import { getPackageVersion } from '../utils/package-info.js';
 import { getApiUrl, getApiToken, getUserAgent } from '../utils/environment-config.js';
@@ -58,6 +58,11 @@ export class ApiService {
       } catch {
         // ignore
       }
+
+      // Handle authentication errors with user-friendly messages
+      if (response.status === 401) {
+        throw new AuthError('Invalid or expired API token. Please check your VIZZLY_TOKEN environment variable and ensure it is valid.');
+      }
       throw new VizzlyError(`API request failed: ${response.status}${errorText ? ` - ${errorText}` : ''} (URL: ${url})`);
     }
     return response.json();
@@ -113,29 +118,44 @@ export class ApiService {
 
   /**
    * Check if SHAs already exist on the server
-   * @param {string[]} shas - Array of SHA256 hashes to check
+   * @param {string[]|Object[]} shas - Array of SHA256 hashes to check, or array of screenshot objects with metadata
    * @param {string} buildId - Build ID for screenshot record creation
    * @returns {Promise<Object>} Response with existing SHAs and screenshot data
    */
   async checkShas(shas, buildId) {
     try {
+      let requestBody;
+
+      // Check if we're using the new signature-based format (array of objects) or legacy format (array of strings)
+      if (Array.isArray(shas) && shas.length > 0 && typeof shas[0] === 'object' && shas[0].sha256) {
+        // New signature-based format
+        requestBody = {
+          buildId,
+          screenshots: shas
+        };
+      } else {
+        // Legacy SHA-only format
+        requestBody = {
+          shas,
+          buildId
+        };
+      }
       const response = await this.request('/api/sdk/check-shas', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify({
-          shas,
-          buildId
-        })
+        body: JSON.stringify(requestBody)
       });
       return response;
     } catch (error) {
       // Continue without deduplication on error
       console.debug('SHA check failed, continuing without deduplication:', error.message);
+      // Extract SHAs for fallback response regardless of format
+      const shaList = Array.isArray(shas) && shas.length > 0 && typeof shas[0] === 'object' ? shas.map(s => s.sha256) : shas;
       return {
         existing: [],
-        missing: shas,
+        missing: shaList,
         screenshots: []
       };
     }
@@ -167,13 +187,22 @@ export class ApiService {
       });
     }
 
-    // Normal flow with SHA deduplication
+    // Normal flow with SHA deduplication using signature-based format
     const sha256 = crypto.createHash('sha256').update(buffer).digest('hex');
 
-    // Check if this SHA already exists
-    const checkResult = await this.checkShas([sha256], buildId);
+    // Create screenshot object with signature data for checking
+    const screenshotCheck = [{
+      sha256,
+      name,
+      browser: metadata?.browser || 'chrome',
+      viewport_width: metadata?.viewport?.width || 1920,
+      viewport_height: metadata?.viewport?.height || 1080
+    }];
+
+    // Check if this SHA with signature already exists
+    const checkResult = await this.checkShas(screenshotCheck, buildId);
     if (checkResult.existing && checkResult.existing.includes(sha256)) {
-      // File already exists, screenshot record was automatically created
+      // File already exists with same signature, screenshot record was automatically created
       const screenshot = checkResult.screenshots?.find(s => s.sha256 === sha256);
       return {
         message: 'Screenshot already exists, skipped upload',
@@ -184,7 +213,7 @@ export class ApiService {
       };
     }
 
-    // File doesn't exist, proceed with upload
+    // File doesn't exist or has different signature, proceed with upload
     return this.request(`/api/sdk/builds/${buildId}/screenshots`, {
       method: 'POST',
       headers: {

package/dist/services/uploader.js

@@ -274,29 +274,31 @@ async function processFiles(files, signal, onProgress) {
 }
 
 /**
- * Check which files already exist on the server
+ * Check which files already exist on the server using signature-based deduplication
  */
 async function checkExistingFiles(fileMetadata, api, signal, buildId) {
-  const allShas = fileMetadata.map(f => f.sha256);
   const existingShas = new Set();
   const allScreenshots = [];
 
-  // Check in batches
-  for (let i = 0; i < allShas.length; i += DEFAULT_SHA_CHECK_BATCH_SIZE) {
+  // Check in batches using the new signature-based format
+  for (let i = 0; i < fileMetadata.length; i += DEFAULT_SHA_CHECK_BATCH_SIZE) {
     if (signal.aborted) throw new UploadError('Operation cancelled');
-    const batch = allShas.slice(i, i + DEFAULT_SHA_CHECK_BATCH_SIZE);
+    const batch = fileMetadata.slice(i, i + DEFAULT_SHA_CHECK_BATCH_SIZE);
+
+    // Convert file metadata to screenshot objects with signature data
+    const screenshotBatch = batch.map(file => ({
+      sha256: file.sha256,
+      name: file.filename.replace(/\.png$/, ''),
+      // Remove .png extension for name
+      // Extract browser from filename if available (e.g., "homepage-chrome.png" -> "chrome")
+      browser: extractBrowserFromFilename(file.filename) || 'chrome',
+      // Default to chrome
+      // Default viewport dimensions (these could be extracted from filename or metadata if available)
+      viewport_width: 1920,
+      viewport_height: 1080
+    }));
     try {
-      const res = await api.request('/api/sdk/check-shas', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          shas: batch,
-          buildId
-        }),
-        signal
-      });
+      const res = await api.checkShas(screenshotBatch, buildId);
       const {
         existing = [],
         screenshots = []
@@ -315,6 +317,22 @@ async function checkExistingFiles(fileMetadata, api, signal, buildId) {
   };
 }
 
+/**
+ * Extract browser name from filename
+ * @param {string} filename - The screenshot filename
+ * @returns {string|null} Browser name or null if not found
+ */
+function extractBrowserFromFilename(filename) {
+  const browsers = ['chrome', 'firefox', 'safari', 'edge', 'webkit'];
+  const lowerFilename = filename.toLowerCase();
+  for (const browser of browsers) {
+    if (lowerFilename.includes(browser)) {
+      return browser;
+    }
+  }
+  return null;
+}
+
 /**
  * Upload files to Vizzly
  */

package/dist/types/sdk/index.d.ts

@@ -10,7 +10,7 @@
  *
  * const vizzly = await createVizzly({
  *   apiKey: process.env.VIZZLY_TOKEN,
- *   apiUrl: 'https://vizzly.dev',
+ *   apiUrl: 'https://app.vizzly.dev',
  *   server: {
  *     port: 3003,
  *     enabled: true

package/dist/types/services/api-service.d.ts

@@ -41,11 +41,11 @@ export class ApiService {
     createBuild(metadata: any): Promise<any>;
     /**
      * Check if SHAs already exist on the server
-     * @param {string[]} shas - Array of SHA256 hashes to check
+     * @param {string[]|Object[]} shas - Array of SHA256 hashes to check, or array of screenshot objects with metadata
      * @param {string} buildId - Build ID for screenshot record creation
      * @returns {Promise<Object>} Response with existing SHAs and screenshot data
      */
-    checkShas(shas: string[], buildId: string): Promise<any>;
+    checkShas(shas: string[] | any[], buildId: string): Promise<any>;
     /**
      * Upload a screenshot with SHA checking
      * @param {string} buildId - Build ID

package/dist/utils/config-loader.js

@@ -64,7 +64,7 @@ export async function loadConfig(configPath = null, cliOverrides = {}) {
   const envApiUrl = getApiUrl();
   const envParallelId = getParallelId();
   if (envApiKey) config.apiKey = envApiKey;
-  if (envApiUrl !== 'https://vizzly.dev') config.apiUrl = envApiUrl;
+  if (envApiUrl !== 'https://app.vizzly.dev') config.apiUrl = envApiUrl;
   if (envParallelId) config.parallelId = envParallelId;
 
   // 3. Apply CLI overrides (highest priority)

package/dist/utils/console-ui.js

@@ -43,9 +43,10 @@ export class ConsoleUI {
         timestamp: new Date().toISOString()
       };
       if (error instanceof Error) {
+        const errorMessage = error.getUserMessage ? error.getUserMessage() : error.message;
         errorData.error = {
           name: error.name,
-          message: error.message,
+          message: errorMessage,
           ...(this.verbose && {
             stack: error.stack
           })

package/dist/utils/environment-config.js

@@ -16,7 +16,7 @@ export function getApiToken() {
  * @returns {string} API URL with default
  */
 export function getApiUrl() {
-  return process.env.VIZZLY_API_URL || 'https://vizzly.dev';
+  return process.env.VIZZLY_API_URL || 'https://app.vizzly.dev';
 }
 
 /**

package/docs/api-reference.md

@@ -470,7 +470,7 @@ Configuration loaded via cosmiconfig in this order:
 {
   // API Configuration
   apiKey: string,              // API token (from VIZZLY_TOKEN)
-  apiUrl: string,              // API base URL (default: 'https://vizzly.dev')
+  apiUrl: string,              // API base URL (default: 'https://app.vizzly.dev')
   project: string,             // Project ID override
 
   // Server Configuration (for run command)

package/docs/doctor-command.md

@@ -30,7 +30,7 @@ vizzly doctor --json
 
 ## Environment Variables
 
-- `VIZZLY_API_URL` — Override the API base URL (default: `https://vizzly.dev`)
+- `VIZZLY_API_URL` — Override the API base URL (default: `https://app.vizzly.dev`)
 - `VIZZLY_TOKEN` — API token used only when `--api` is provided
 
 ## Exit Codes

package/package.json

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