@vizzly-testing/cli 0.22.0 → 0.22.2

package/dist/sdk/index.js

@@ -247,6 +247,7 @@ export class VizzlySDK extends EventEmitter {
       buildId,
       name,
       image: imageBase64,
+      type: 'base64',
       properties: options.properties || {}
     };
 

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

@@ -47,7 +47,7 @@ export const createApiHandler = (client, {
   let vizzlyDisabled = false;
   let screenshotCount = 0;
   let uploadPromises = [];
-  const handleScreenshot = async (buildId, name, image, properties = {}) => {
+  const handleScreenshot = async (buildId, name, image, properties = {}, type) => {
     if (vizzlyDisabled) {
       output.debug('upload', `${name} (disabled)`);
       return {
@@ -73,8 +73,11 @@ export const createApiHandler = (client, {
     }
 
     // Support both base64 encoded images and file paths
+    // Use explicit type from client if provided (fast path), otherwise detect (slow path)
+    // Only accept valid type values to prevent invalid types from bypassing detection
     let imageBuffer;
-    const inputType = detectImageInputType(image);
+    let validTypes = ['base64', 'file-path'];
+    const inputType = type && validTypes.includes(type) ? type : detectImageInputType(image);
     if (inputType === 'file-path') {
       // It's a file path - resolve and read the file
       const filePath = resolve(image.replace('file://', ''));

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

@@ -267,7 +267,7 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       output.debug('tdd', `baseline: ${baseline.buildName}`);
     }
   };
-  const handleScreenshot = async (_buildId, name, image, properties = {}) => {
+  const handleScreenshot = async (_buildId, name, image, properties = {}, type) => {
     // Validate and sanitize screenshot name
     let sanitizedName;
     try {
@@ -306,8 +306,11 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
 
     // Support both base64 encoded images and file paths
     // Vitest browser mode returns file paths, so we need to handle both
+    // Use explicit type from client if provided (fast path), otherwise detect (slow path)
+    // Only accept valid type values to prevent invalid types from bypassing detection
     let imageBuffer;
-    const inputType = detectImageInputType(image);
+    let validTypes = ['base64', 'file-path'];
+    const inputType = type && validTypes.includes(type) ? type : detectImageInputType(image);
     if (inputType === 'file-path') {
       // It's a file path - resolve and read the file
       const filePath = resolve(image.replace('file://', ''));

package/dist/server/routers/screenshot.js

@@ -31,7 +31,8 @@ export function createScreenshotRouter({
           buildId,
           name,
           properties,
-          image
+          image,
+          type
         } = body;
         if (!name || !image) {
           sendError(res, 400, 'name and image are required');
@@ -40,14 +41,15 @@ export function createScreenshotRouter({
 
         // Use buildId from request body, or fall back to server's buildId
         const effectiveBuildId = buildId || defaultBuildId;
-        const result = await screenshotHandler.handleScreenshot(effectiveBuildId, name, image, properties);
+        const result = await screenshotHandler.handleScreenshot(effectiveBuildId, name, image, properties, type);
         sendJson(res, result.statusCode, result.body);
         return true;
       } catch (error) {
         output.debug('Screenshot processing error:', {
-          error: error.message
+          error: error.message,
+          stack: error.stack
         });
-        sendError(res, 500, 'Failed to process screenshot');
+        sendError(res, 500, `Failed to process screenshot: ${error.message}`);
         return true;
       }
     }

package/dist/utils/browser.js

@@ -11,7 +11,7 @@ import { platform } from 'node:os';
  * @param {string} url - URL to validate
  * @returns {boolean} True if safe
  */
-function isValidUrl(url) {
+export function isValidBrowserUrl(url) {
   if (typeof url !== 'string' || url.length === 0) {
     return false;
   }
@@ -28,7 +28,7 @@ function isValidUrl(url) {
  */
 export async function openBrowser(url) {
   // Validate URL to prevent command injection
-  if (!isValidUrl(url)) {
+  if (!isValidBrowserUrl(url)) {
     return false;
   }
   return new Promise(resolve => {

package/dist/utils/image-input-detector.js

@@ -27,17 +27,32 @@ export function isBase64(str) {
   // Strip data URI prefix if present (e.g., data:image/png;base64,...)
   let base64Content = str;
   if (str.startsWith('data:')) {
-    const match = str.match(/^data:[a-zA-Z0-9+/.-]+;base64,(.+)$/);
+    let match = str.match(/^data:[a-zA-Z0-9+/.-]+;base64,(.+)$/);
     if (!match) {
       return false; // Has data: prefix but invalid format
     }
     base64Content = match[1];
   }
 
-  // Base64 regex: groups of 4 chars [A-Za-z0-9+/], with optional padding
-  // Valid endings: no padding, or 2/3 chars + padding (= or ==)
-  const base64Pattern = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
-  return base64Pattern.test(base64Content);
+  // Quick check: base64 only contains these characters
+  // Use a simple character class check instead of a complex regex to avoid
+  // catastrophic backtracking on large strings
+  if (!/^[A-Za-z0-9+/=]+$/.test(base64Content)) {
+    return false;
+  }
+
+  // Check length is valid (must be multiple of 4, accounting for padding)
+  let len = base64Content.length;
+  if (len % 4 !== 0) {
+    return false;
+  }
+
+  // Check padding is valid (only at end, max 2 = chars)
+  let paddingMatch = base64Content.match(/=+$/);
+  if (paddingMatch && paddingMatch[0].length > 2) {
+    return false;
+  }
+  return true;
 }
 
 /**
@@ -66,41 +81,46 @@ export function looksLikeFilePath(str) {
     return false;
   }
 
-  // 0. Explicitly reject data URIs first (they contain : and / which would match path patterns)
+  // 0. Length check - file paths are short, base64 screenshots are huge
+  // Even the longest realistic file path is < 500 chars
+  // This makes detection O(1) for large base64 strings
+  // Use same threshold (1000) as detectImageInputType for consistency
+  if (str.length > 1000) {
+    return false;
+  }
+
+  // 1. Explicitly reject data URIs (they contain : and / which would match path patterns)
   if (str.startsWith('data:')) {
     return false;
   }
 
-  // 1. Check for file:// URI scheme
+  // 2. Check for file:// URI scheme
   if (str.startsWith('file://')) {
     return true;
   }
 
-  // 2. Check for absolute paths (Unix or Windows)
-  // Unix: starts with /
-  // Windows: starts with drive letter like C:\ or C:/
-  if (str.startsWith('/') || /^[A-Za-z]:[/\\]/.test(str)) {
+  // 3. Windows absolute paths (C:\ or C:/) - base64 never starts with drive letter
+  if (/^[A-Za-z]:[/\\]/.test(str)) {
     return true;
   }
 
-  // 3. Check for relative path indicators
-  // ./ or ../ or .\ or ..\
+  // 4. Relative path indicators (./ or ../) - base64 never starts with dot
   if (/^\.\.?[/\\]/.test(str)) {
     return true;
   }
 
-  // 4. Check for path separators (forward or back slash)
-  // This catches paths like: subdirectory/file.png or subdirectory\file.png
-  if (/[/\\]/.test(str)) {
-    return true;
-  }
-
   // 5. Check for common image file extensions
-  // This catches simple filenames like: screenshot.png
-  // Common extensions: png, jpg, jpeg, gif, webp, bmp, svg, tiff, ico
+  // This is the safest check - base64 never ends with .png/.jpg/etc
+  // Catches: /path/file.png, subdir/file.png, file.png
   if (/\.(png|jpe?g|gif|webp|bmp|svg|tiff?|ico)$/i.test(str)) {
     return true;
   }
+
+  // Note: We intentionally don't check for bare "/" prefix or "/" anywhere
+  // because JPEG base64 starts with "/9j/" which would false-positive
+  // File paths without extensions are rare for images and will fall through
+  // to base64 detection, which is acceptable for backwards compat
+
   return false;
 }
 
@@ -112,14 +132,13 @@ export function looksLikeFilePath(str) {
  * - 'file-path': A file path (relative or absolute)
  * - 'unknown': Cannot determine (ambiguous or invalid)
  *
- * Strategy:
- * 1. First check if it's valid base64 (can contain / which might look like paths)
- * 2. Then check if it looks like a file path (more specific patterns)
- * 3. Otherwise return 'unknown'
+ * Strategy (optimized for performance):
+ * 1. Check for data URI prefix first (O(1), definitive)
+ * 2. Check file path patterns (O(1) prefix/suffix checks)
+ * 3. For large non-path strings, assume base64 (skip expensive validation)
+ * 4. Only run full base64 validation on small ambiguous strings
  *
- * This order prevents base64 strings (which can contain /) from being
- * misidentified as file paths. Base64 validation is stricter and should
- * be checked first.
+ * This avoids O(n) regex validation on large screenshot buffers.
  *
  * @param {string} str - String to detect
  * @returns {'base64' | 'file-path' | 'unknown'} Detected input type
@@ -136,15 +155,26 @@ export function detectImageInputType(str) {
     return 'unknown';
   }
 
-  // Check base64 FIRST - base64 strings can contain / which looks like paths
-  // Base64 validation is stricter and more deterministic
-  if (isBase64(str)) {
+  // 1. Data URIs are definitively base64 (O(1) check)
+  if (str.startsWith('data:')) {
     return 'base64';
   }
 
-  // Then check file path - catch patterns that aren't valid base64
+  // 2. Check file path patterns (O(1) prefix/suffix checks)
   if (looksLikeFilePath(str)) {
     return 'file-path';
   }
+
+  // 3. For large strings that aren't file paths, assume base64
+  // Screenshots are typically 100KB+ as base64, file paths are <1KB
+  // Skip expensive O(n) validation for large strings
+  if (str.length > 1000) {
+    return 'base64';
+  }
+
+  // 4. Full validation only for small ambiguous strings
+  if (isBase64(str)) {
+    return 'base64';
+  }
   return 'unknown';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -87,7 +87,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@vizzly-testing/honeydiff": "^0.7.1",
+    "@vizzly-testing/honeydiff": "^0.8.0",
     "ansis": "^4.2.0",
     "commander": "^14.0.0",
     "cosmiconfig": "^9.0.0",