@vizzly-testing/cli 0.35.3-beta.2 → 0.35.3-beta.4

package/README.md

@@ -153,10 +153,9 @@ test('homepage looks correct', async ({ page }) => {
 
 `properties` is your metadata bag for baseline grouping, filtering, and
 debugging. SDK options such as `threshold`, `minClusterSize`, `fullPage`,
-`requestTimeout`, and `buildId` stay at the top level. If one of those reserved
-SDK options is accidentally placed inside `properties`, Vizzly removes it from
-metadata, applies it as an option when possible, and warns so the call site can
-be cleaned up.
+`requestTimeout`, and `buildId` stay at the top level. Reserved SDK and capture
+fields inside `properties` are ignored and produce a warning; they are never
+interpreted as options or stored as user metadata.
 
 The client SDK is lightweight. It posts screenshots to the local Vizzly server
 or the cloud build wrapper. It works with any test runner.

package/dist/api/core.js

@@ -7,6 +7,7 @@
 
 import crypto from 'node:crypto';
 import { URLSearchParams } from 'node:url';
+import { createScreenshotProperties, getScreenshotOptionsPayload } from '../utils/screenshot-options.js';
 
 // ============================================================================
 // Header Building
@@ -77,11 +78,14 @@ export function buildRequestHeaders({
  * @param {string|null} sha256 - Pre-computed SHA256 hash (optional)
  * @returns {Object} Screenshot upload payload
  */
-export function buildScreenshotPayload(name, buffer, metadata = {}, sha256 = null) {
+export function buildScreenshotPayload(name, buffer, metadata = {}, sha256 = null, screenshotOptions = {}) {
   let payload = {
     name,
-    properties: metadata ?? {}
+    properties: createScreenshotProperties({
+      properties: metadata
+    })
   };
+  Object.assign(payload, getScreenshotOptionsPayload(screenshotOptions));
   if (buffer) {
     payload.image_data = buffer.toString('base64');
   }
@@ -98,8 +102,8 @@ export function buildScreenshotPayload(name, buffer, metadata = {}, sha256 = nul
  * @param {string} sha256 - Pre-computed SHA256 hash
  * @returns {Object} Screenshot resolution payload
  */
-export function buildScreenshotResolvePayload(name, metadata = {}, sha256) {
-  return buildScreenshotPayload(name, null, metadata, sha256);
+export function buildScreenshotResolvePayload(name, metadata = {}, sha256, screenshotOptions = {}) {
+  return buildScreenshotPayload(name, null, metadata, sha256, screenshotOptions);
 }
 
 /**
@@ -180,13 +184,16 @@ export function buildShaCheckPayload(screenshots, buildId) {
  */
 export function buildScreenshotCheckObject(sha256, name, metadata = {}) {
   let meta = metadata || {};
+  let properties = createScreenshotProperties({
+    properties: meta
+  });
   return {
     sha256,
     name,
     browser: meta.browser || 'chrome',
     viewport_width: meta.viewport?.width || meta.viewport_width || 1920,
     viewport_height: meta.viewport?.height || meta.viewport_height || 1080,
-    properties: meta
+    properties
   };
 }
 

package/dist/api/endpoints.js

@@ -38,7 +38,7 @@ export async function getBuild(client, buildId, include = null) {
  *
  * @param {Object} client - API client
  * @param {string} buildId - Build ID
- * @returns {Promise<Object>} Canonical build status bundle
+ * @returns {Promise<Object>} Build status response
  */
 export async function getBuildStatus(client, buildId) {
   return client.request(`/api/sdk/builds/${buildId}/status`);
@@ -179,10 +179,10 @@ function canUploadBytesAfterShaResolveError(error) {
  * @param {boolean} skipDedup - Skip SHA deduplication (uploadAll mode)
  * @returns {Promise<Object>} Upload result
  */
-export async function uploadScreenshot(client, buildId, name, buffer, metadata = {}, skipDedup = false) {
+export async function uploadScreenshot(client, buildId, name, buffer, metadata = {}, skipDedup = false, screenshotOptions = {}) {
   // Skip SHA deduplication if requested
   if (skipDedup) {
-    let payload = buildScreenshotPayload(name, buffer, metadata);
+    let payload = buildScreenshotPayload(name, buffer, metadata, null, screenshotOptions);
     return client.request(`/api/sdk/builds/${buildId}/screenshots`, {
       method: 'POST',
       headers: {
@@ -194,7 +194,7 @@ export async function uploadScreenshot(client, buildId, name, buffer, metadata =
 
   // Normal flow with server-side SHA resolution.
   let sha256 = computeSha256(buffer);
-  let resolvePayload = buildScreenshotResolvePayload(name, metadata, sha256);
+  let resolvePayload = buildScreenshotResolvePayload(name, metadata, sha256, screenshotOptions);
   try {
     let resolveResult = await client.request(`/api/sdk/builds/${buildId}/screenshots`, {
       method: 'POST',
@@ -222,7 +222,7 @@ export async function uploadScreenshot(client, buildId, name, buffer, metadata =
   }
 
   // File doesn't exist, or resolve failed; proceed with upload.
-  let payload = buildScreenshotPayload(name, buffer, metadata, sha256);
+  let payload = buildScreenshotPayload(name, buffer, metadata, sha256, screenshotOptions);
   return client.request(`/api/sdk/builds/${buildId}/screenshots`, {
     method: 'POST',
     headers: {
@@ -343,51 +343,6 @@ export async function searchComparisons(client, name, filters = {}) {
   return client.request(endpoint);
 }
 
-// ============================================================================
-// Hotspot Endpoints
-// ============================================================================
-
-/**
- * Get hotspot analysis for a single screenshot
- * @param {Object} client - API client
- * @param {string} screenshotName - Screenshot name
- * @param {Object} options - Optional settings
- * @returns {Promise<Object>} Hotspot analysis data
- */
-export async function getScreenshotHotspots(client, screenshotName, options = {}) {
-  let {
-    windowSize = 20
-  } = options;
-  let encodedName = encodeURIComponent(screenshotName);
-  let endpoint = buildEndpointWithParams(`/api/sdk/screenshots/${encodedName}/hotspots`, {
-    windowSize: String(windowSize)
-  });
-  return client.request(endpoint);
-}
-
-/**
- * Batch get hotspot analysis for multiple screenshots
- * @param {Object} client - API client
- * @param {string[]} screenshotNames - Array of screenshot names
- * @param {Object} options - Optional settings
- * @returns {Promise<Object>} Hotspots keyed by screenshot name
- */
-export async function getBatchHotspots(client, screenshotNames, options = {}) {
-  let {
-    windowSize = 20
-  } = options;
-  return client.request('/api/sdk/screenshots/hotspots', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      screenshot_names: screenshotNames,
-      windowSize
-    })
-  });
-}
-
 // ============================================================================
 // Auth/Token Endpoints
 // ============================================================================

package/dist/api/index.js

@@ -16,4 +16,4 @@ export { createApiClient, DEFAULT_API_URL } from './client.js';
 export { buildApiUrl, buildAuthHeader, buildBuildPayload, buildEndpointWithParams, buildQueryParams, buildRequestHeaders, buildScreenshotCheckObject, buildScreenshotPayload, buildScreenshotResolvePayload, buildShaCheckPayload, buildUserAgent, computeSha256, extractErrorBody, findScreenshotBySha, isAuthError, isRateLimited, parseApiError, partitionByShaExistence, shaExists, shouldRetryWithRefresh } from './core.js';
 
 // Endpoint functions
-export { checkShas, createBuild, finalizeBuild, finalizeParallelBuild, getBatchHotspots, getBuild, getBuildContext, getBuildStatus, getBuilds, getComparison, getComparisonContext, getPreviewInfo, getReviewQueueContext, getScreenshotContext, getScreenshotHotspots, getSimilarFingerprintContext, getTddBaselines, getTokenContext, searchComparisons, updateBuildStatus, uploadPreviewZip, uploadScreenshot } from './endpoints.js';
+export { checkShas, createBuild, finalizeBuild, finalizeParallelBuild, getBuild, getBuildContext, getBuildStatus, getBuilds, getComparison, getComparisonContext, getPreviewInfo, getReviewQueueContext, getScreenshotContext, getSimilarFingerprintContext, getTddBaselines, getTokenContext, searchComparisons, updateBuildStatus, uploadPreviewZip, uploadScreenshot } from './endpoints.js';

package/dist/cli.js

@@ -681,7 +681,7 @@ Examples:
   }
   await contextComparisonCommand(comparisonId, options, globalOptions);
 });
-contextCmd.command('screenshot').description('Fetch screenshot context and historical memory').argument('<name>', 'Screenshot name').option('--source <source>', 'Context source: auto, cloud, or local', 'auto').option('-p, --project <slug-or-id>', 'Project scope for user auth lookups').option('--org <slug>', 'Organization slug when project slug is ambiguous').option('--recent-limit <n>', 'Maximum recent comparisons to return (1-50)', Number).option('--window-size <n>', 'Historical hotspot analysis window size (1-50)', Number).addHelpText('after', `
+contextCmd.command('screenshot').description('Fetch screenshot context and historical memory').argument('<name>', 'Screenshot name').option('--source <source>', 'Context source: auto, cloud, or local', 'auto').option('-p, --project <slug-or-id>', 'Project scope for user auth lookups').option('--org <slug>', 'Organization slug when project slug is ambiguous').option('--recent-limit <n>', 'Maximum recent comparisons to return (1-50)', Number).addHelpText('after', `
 Examples:
   $ vizzly context screenshot Dashboard --source cloud
   $ vizzly context screenshot Dashboard --source local
@@ -738,15 +738,15 @@ Note: Baselines are stored locally in .vizzly/baselines/ during TDD mode.
   let globalOptions = getGlobalOptions();
   await baselinesCommand(options, globalOptions);
 });
-program.command('api').description('Make raw API requests (for power users)').argument('<endpoint>', 'API endpoint (e.g., /api/sdk/builds)').option('-X, --method <method>', 'HTTP method (GET or POST for approve/reject/comment)', 'GET').option('-d, --data <json>', 'Request body (JSON)').option('-H, --header <header>', 'Add header (key:value), can be repeated', (val, prev) => prev ? [...prev, val] : [val]).option('-q, --query <param>', 'Add query param (key=value), can be repeated', (val, prev) => prev ? [...prev, val] : [val]).addHelpText('after', `
+program.command('api').description('Make raw API requests (for power users)').argument('<endpoint>', 'API endpoint (e.g., /api/sdk/builds)').option('-X, --method <method>', 'HTTP method (GET or POST for build comments)', 'GET').option('-d, --data <json>', 'Request body (JSON)').option('-H, --header <header>', 'Add header (key:value), can be repeated', (val, prev) => prev ? [...prev, val] : [val]).option('-q, --query <param>', 'Add query param (key=value), can be repeated', (val, prev) => prev ? [...prev, val] : [val]).addHelpText('after', `
 Examples:
   $ vizzly api /api/sdk/builds                    # List builds
   $ vizzly api /api/sdk/builds -q limit=5         # With query params
   $ vizzly api /api/sdk/builds/abc123             # Get specific build
-  $ vizzly api /api/sdk/comparisons/abc123/approve -X POST
+  $ vizzly api /api/sdk/builds/abc123/comments -X POST -d '{"content":"Looks good"}'
   $ vizzly api /api/sdk/builds/abc123/comments -X POST -d '{"content":"Nice!"}'
 
-Note: POST is restricted to approve, reject, and comment endpoints.
+Note: POST is restricted to build comment endpoints. Use dedicated approve/reject commands for review decisions.
 Most operations have dedicated commands (builds, comparisons, approve, etc.).
 `).action(async (endpoint, options) => {
   let globalOptions = getGlobalOptions();

package/dist/client/index.js

@@ -8,7 +8,7 @@ import { request as httpRequest } from 'node:http';
 import { request as httpsRequest } from 'node:https';
 import { dirname, join, parse } from 'node:path';
 import { getBuildId, getServerUrl, isTddMode, setVizzlyEnabled } from '../utils/environment-config.js';
-import { normalizeScreenshotOptions } from '../utils/screenshot-options.js';
+import { getScreenshotOptionsPayload, normalizeScreenshotOptions } from '../utils/screenshot-options.js';
 
 // Internal client state
 let currentClient = null;
@@ -219,6 +219,7 @@ function createSimpleClient(serverUrl, clientOptions = {}) {
           type,
           properties: normalizedOptions.properties
         };
+        Object.assign(screenshotData, getScreenshotOptionsPayload(normalizedOptions));
         if (normalizedOptions.warnings.length > 0) {
           screenshotData.warnings = normalizedOptions.warnings;
         }

package/dist/commands/api.js

@@ -5,7 +5,7 @@
 import { createApiClient as defaultCreateApiClient } from '../api/index.js';
 import { loadConfig as defaultLoadConfig } from '../utils/config-loader.js';
 import * as defaultOutput from '../utils/output.js';
-let ALLOWED_POST_ENDPOINTS = [/^\/api\/sdk\/comparisons\/[^/]+\/approve$/, /^\/api\/sdk\/comparisons\/[^/]+\/reject$/, /^\/api\/sdk\/builds\/[^/]+\/comments$/];
+let ALLOWED_POST_ENDPOINTS = [/^\/api\/sdk\/builds\/[^/]+\/comments$/];
 function createApiCommandDeps(deps = {}) {
   return {
     loadConfig: deps.loadConfig || defaultLoadConfig,
@@ -70,11 +70,11 @@ export function validateApiRequest({
 }) {
   let errors = [];
   if (method !== 'GET' && method !== 'POST') {
-    errors.push(`Method ${method} not allowed. Use GET for queries or POST for approve/reject/comment.`);
+    errors.push(`Method ${method} not allowed. Use GET for queries or POST for build comments.`);
     return errors;
   }
   if (method === 'POST' && !isAllowedPostEndpoint(endpoint)) {
-    errors.push(`POST not allowed for ${endpoint}. Only approve, reject, and comment endpoints support POST.`);
+    errors.push(`POST not allowed for ${endpoint}. Only build comment endpoints support POST.`);
   }
   if (hasData && method !== 'POST') {
     errors.push('Request data requires --method POST.');

package/dist/commands/builds.js

@@ -112,13 +112,11 @@ export async function buildsCommand(options = {}, globalOptions = {}, deps = {})
     for (let build of builds) {
       let statusColor = getStatusColor(colors, build.status);
       let statusBadge = statusColor(build.status.toUpperCase());
-
-      // Approval badge
-      let approvalBadge = '';
-      if (build.approval_status && build.status === 'completed') {
-        approvalBadge = ` ${getApprovalBadge(colors, build.approval_status)}`;
+      let reviewBadge = '';
+      if (build.visual_review?.state && build.status === 'completed') {
+        reviewBadge = ` ${getReviewBadge(colors, build.visual_review.state)}`;
       }
-      output.print(`  ${colors.bold(build.name || build.id)} ${statusBadge}${approvalBadge}`);
+      output.print(`  ${colors.bold(build.name || build.id)} ${statusBadge}${reviewBadge}`);
       let details = [];
       if (build.branch) details.push(build.branch);
       if (build.commit_sha) details.push(build.commit_sha.substring(0, 7));
@@ -174,7 +172,7 @@ function formatBuildForJson(build, includeComparisons = false) {
       changed: build.changed_comparisons || 0,
       identical: build.identical_comparisons || 0
     },
-    approvalStatus: build.approval_status,
+    visual_review: build.visual_review || null,
     createdAt: build.created_at,
     completedAt: build.completed_at
   };
@@ -192,7 +190,7 @@ function formatBuildForJson(build, includeComparisons = false) {
         name: c.name || c.current_name,
         status: c.status,
         diffPercentage: c.diff_percentage,
-        approvalStatus: c.approval_status,
+        visual_review: c.visual_review || null,
         urls: {
           baseline: c.baseline_screenshot?.original_url || c.baseline_original_url || c.baseline_screenshot_url || null,
           current: c.current_screenshot?.original_url || c.current_original_url || c.current_screenshot_url || null,
@@ -238,8 +236,8 @@ function displayBuild(output, build, verbose) {
   if (stats.length > 0) {
     output.labelValue('Comparisons', stats.join(colors.dim(' · ')));
   }
-  if (build.approval_status) {
-    output.labelValue('Approval', build.approval_status);
+  if (build.visual_review?.state) {
+    output.labelValue('Review', build.visual_review.state);
   }
   output.blank();
   if (build.created_at) {
@@ -290,19 +288,18 @@ function getStatusColor(colors, status) {
 }
 
 /**
- * Get colored approval badge
+ * Get colored review badge
  */
-function getApprovalBadge(colors, approvalStatus) {
-  switch (approvalStatus) {
+function getReviewBadge(colors, reviewState) {
+  switch (reviewState) {
     case 'approved':
-    case 'auto_approved':
       return colors.brand.success('APPROVED');
     case 'rejected':
       return colors.brand.error('REJECTED');
     case 'pending':
       return colors.brand.warning('PENDING');
     default:
-      return colors.dim(approvalStatus?.toUpperCase() || '');
+      return colors.dim(reviewState?.toUpperCase() || '');
   }
 }
 

package/dist/commands/comparisons.js

@@ -6,7 +6,7 @@ import { createApiClient as defaultCreateApiClient, getBuild as defaultGetBuild,
 import { loadConfig as defaultLoadConfig } from '../utils/config-loader.js';
 import * as defaultOutput from '../utils/output.js';
 import { createWildcardMatcher } from '../utils/patterns.js';
-import { getComparisonBrowser, getComparisonName, getComparisonResult, getComparisonViewport, getVisualReviewState } from '../utils/visual-context-normalizers.js';
+import { getComparisonBrowser, getComparisonName, getComparisonResult, getComparisonViewport } from '../utils/visual-context-normalizers.js';
 
 /**
  * Comparisons command - query comparisons with various filters
@@ -165,19 +165,17 @@ function formatComparisonForJson(comparison) {
   let ssimScore = comparison.ssim_score ?? diffImage.ssim_score ?? null;
   let gmsdScore = comparison.gmsd_score ?? diffImage.gmsd_score ?? null;
   let fingerprintHash = comparison.fingerprint_hash || diffImage.fingerprint_hash || null;
-  let projection = comparison.analysis_projection || comparison.projection || diffImage.analysis_projection || diffImage.projection || null;
+  let analysisDetails = comparison.analysis_details || diffImage.analysis_details || null;
   let diffRegions = comparison.diff_regions ?? diffImage.diff_regions ?? null;
-  let regionCount = comparison.region_count ?? diffImage.region_count ?? projection?.clusters?.count ?? (Array.isArray(diffRegions) ? diffRegions.length : null);
-  let hasHoneydiff = clusterMetadata || ssimScore != null || gmsdScore != null || fingerprintHash || projection || regionCount != null;
+  let regionCount = comparison.region_count ?? diffImage.region_count ?? analysisDetails?.clusters?.count ?? (Array.isArray(diffRegions) ? diffRegions.length : null);
+  let hasHoneydiff = clusterMetadata || ssimScore != null || gmsdScore != null || fingerprintHash || analysisDetails || regionCount != null;
   return {
     id: comparison.id,
     name: getComparisonName(comparison),
     status: comparison.status,
     result: getComparisonResult(comparison),
     diffPercentage: comparison.diff_percentage ?? null,
-    approvalStatus: comparison.approval_status,
-    reviewState: getVisualReviewState(comparison),
-    visualReview: comparison.visual_review || null,
+    visual_review: comparison.visual_review || null,
     viewport: getComparisonViewport(comparison),
     browser: getComparisonBrowser(comparison),
     urls: {
@@ -192,7 +190,7 @@ function formatComparisonForJson(comparison) {
       clusterMetadata,
       fingerprintHash,
       regionCount,
-      projection,
+      details: analysisDetails,
       diffRegions,
       diffLines: comparison.diff_lines ?? diffImage.diff_lines ?? null,
       fingerprintData: comparison.fingerprint_data ?? diffImage.fingerprint_data ?? null
@@ -214,7 +212,7 @@ function displayComparison(output, comparison, verbose) {
     Name: formatted.name,
     Status: formatted.result?.toUpperCase(),
     'Diff %': comparison.diff_percentage != null ? `${(comparison.diff_percentage * 100).toFixed(2)}%` : 'N/A',
-    Review: formatted.reviewState || 'unknown'
+    Review: formatted.visual_review?.state || 'unknown'
   });
   output.blank();
   if (formatted.viewport) {

package/dist/commands/context.js

@@ -571,9 +571,6 @@ function formatNeedsReview(status = {}) {
   }
   return details.length > 0 ? `yes · ${details.join(' · ')}` : 'yes';
 }
-function formatConfirmedRegionLabels(regions = []) {
-  return regions.map(region => region.label).filter(Boolean).slice(0, 3).join(' · ');
-}
 function printComparisonList(output, comparisons = [], {
   limit = 5
 } = {}) {
@@ -741,19 +738,15 @@ function displayComparisonContext(output, context) {
   let statusTone = getStatusTone(colors, displayState);
   let screenshotName = context.comparison.screenshot?.name || context.comparison.id;
   let analysis = context.comparison.analysis || {};
-  let confirmedRegionLabels = formatConfirmedRegionLabels(context.history.confirmed_regions);
   output.print(`  ${colors.bold(screenshotName)} ${statusTone(displayState.toUpperCase())}`);
   output.print(`  ${colors.dim(`@${context.scope.organization.slug}/${context.scope.project.slug}`)}`);
   output.blank();
   output.labelValue('Eyes', `${analysis.diff_image_url ? 'baseline/current/diff' : 'comparison metadata only'}`);
-  output.labelValue('Memory', `${context.history.similar_by_fingerprint.length} similar · ${context.history.recent_by_name.length} recent · ${context.history.confirmed_regions.length} confirmed regions`);
+  output.labelValue('Memory', `${context.history.similar_by_fingerprint.length} similar · ${context.history.recent_by_name.length} recent`);
   output.labelValue('Review', `${context.review.build_comments.length} build comments · ${countScreenshotCommentEntries(context.review.screenshot_comments)} screenshot comments`);
   if (analysis.fingerprint_hash) {
     output.labelValue('Fingerprint', analysis.fingerprint_hash);
   }
-  if (confirmedRegionLabels) {
-    output.labelValue('Known Regions', confirmedRegionLabels);
-  }
   if (context.links?.comparison_url) {
     output.labelValue('Comparison URL', context.links.comparison_url);
   }
@@ -766,20 +759,10 @@ function displayComparisonContext(output, context) {
 function displayScreenshotContext(output, context) {
   output.header('context', 'screenshot');
   let colors = output.getColors();
-  let confirmedRegionLabels = formatConfirmedRegionLabels(context.confirmed_regions);
-  let hotspotAnalysis = context.hotspot_analysis;
   output.print(`  ${colors.bold(context.screenshot.name)}`);
   output.print(`  ${colors.dim(`@${context.scope.organization.slug}/${context.scope.project.slug}`)}`);
   output.blank();
-  output.labelValue('Memory', `${context.history.recent_comparisons.length} recent comparisons · ${context.confirmed_regions.length} confirmed regions`);
-  if (hotspotAnalysis) {
-    output.labelValue('Hotspots', `${hotspotAnalysis.total_builds_analyzed ?? 'unknown'} builds analyzed · ${hotspotAnalysis.confidence ?? 'unknown'}`);
-  } else {
-    output.labelValue('Hotspots', 'unavailable');
-  }
-  if (confirmedRegionLabels) {
-    output.labelValue('Known Regions', confirmedRegionLabels);
-  }
+  output.labelValue('Memory', `${context.history.recent_comparisons.length} recent comparisons`);
   if (context.history.recent_comparisons.length > 0) {
     output.blank();
     output.print('  Recent Comparisons');
@@ -945,8 +928,7 @@ export async function contextScreenshotCommand(screenshotName, options = {}, glo
       return;
     }
     let query = buildScopeQuery(options, {
-      recentLimit: options.recentLimit,
-      windowSize: options.windowSize
+      recentLimit: options.recentLimit
     });
     output.startSpinner('Fetching screenshot context...');
     let context = await runtime.provider.getScreenshotContext(screenshotName, query);
@@ -1063,9 +1045,6 @@ export function validateContextScreenshotOptions(options = {}) {
   errors.push(...validateLimitRange(options.recentLimit, '--recent-limit', {
     max: 50
   }));
-  errors.push(...validateLimitRange(options.windowSize, '--window-size', {
-    max: 50
-  }));
   return errors;
 }
 export function validateContextSimilarOptions(options = {}) {

package/dist/commands/review.js

@@ -2,6 +2,7 @@
  * Review commands - approve, reject, and comment on comparisons/builds
  */
 
+import { randomUUID as defaultRandomUUID } from 'node:crypto';
 import { createApiClient as defaultCreateApiClient } from '../api/index.js';
 import { loadConfig as defaultLoadConfig } from '../utils/config-loader.js';
 import { getAccessToken as defaultGetAccessToken } from '../utils/global-config.js';
@@ -11,6 +12,7 @@ function createReviewDeps(deps = {}) {
     loadConfig: deps.loadConfig || defaultLoadConfig,
     createApiClient: deps.createApiClient || defaultCreateApiClient,
     getAccessToken: deps.getAccessToken || defaultGetAccessToken,
+    randomUUID: deps.randomUUID || defaultRandomUUID,
     output: deps.output || defaultOutput,
     exit: deps.exit || (code => process.exit(code))
   };
@@ -144,12 +146,12 @@ async function runReviewMutation({
 }
 export function createApprovalBody(options = {}) {
   return options.comment ? {
-    comment: options.comment
+    annotation: options.comment.trim()
   } : {};
 }
 export function createRejectionBody(options = {}) {
   return {
-    reason: options.reason
+    annotation: options.reason.trim()
   };
 }
 export function createCommentBody(message, options = {}) {
@@ -158,6 +160,116 @@ export function createCommentBody(message, options = {}) {
     type: options.type || 'general'
   };
 }
+function requireReviewLocator(response) {
+  let locator = response?.review_locator;
+  if (!locator?.comparison_id || !locator?.build_id || !locator?.organization_slug) {
+    let error = new Error('Comparison response did not include review location details');
+    error.code = 'INVALID_REVIEW_CONTEXT';
+    throw error;
+  }
+  return locator;
+}
+async function runComparisonDecision({
+  command,
+  comparisonId,
+  decision,
+  annotation,
+  failureMessage,
+  globalOptions,
+  options,
+  spinnerMessage,
+  writeHumanSuccess,
+  deps,
+  configure = true
+}) {
+  let {
+    loadConfig,
+    createApiClient,
+    getAccessToken,
+    randomUUID,
+    output,
+    exit
+  } = createReviewDeps(deps);
+  if (configure) {
+    configureOutput(output, globalOptions);
+  }
+  try {
+    let config = await loadReviewConfig({
+      loadConfig,
+      options,
+      globalOptions
+    });
+    let token = await getReviewToken(config, getAccessToken);
+    if (!token) {
+      output.error('User login required for review actions');
+      output.hint('Run "vizzly login" to approve, reject, or comment');
+      output.cleanup();
+      exit(1);
+      return;
+    }
+    output.startSpinner(spinnerMessage);
+    let client = createReviewClient({
+      createApiClient,
+      config,
+      command,
+      token
+    });
+    let comparisonResponse = await client.request(`/api/sdk/comparisons/${comparisonId}`);
+    let locator = requireReviewLocator(comparisonResponse);
+    if (locator.comparison_id !== comparisonId) {
+      let error = new Error('Comparison response did not match the requested comparison');
+      error.code = 'INVALID_REVIEW_CONTEXT';
+      throw error;
+    }
+    let organizationHeaders = {
+      'X-Organization': locator.organization_slug
+    };
+    let commandId = randomUUID();
+    let response = await client.request(`/api/visual-review/builds/${locator.build_id}/comparisons/${comparisonId}/decision`, {
+      method: 'POST',
+      headers: {
+        ...organizationHeaders,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        commandId,
+        decision,
+        ...(annotation ? {
+          annotation
+        } : {})
+      })
+    });
+    output.stopSpinner();
+    if (globalOptions.json) {
+      output.data({
+        eventId: response.eventId,
+        idempotent: response.idempotent,
+        review: response.review
+      });
+      output.cleanup();
+      return;
+    }
+    writeHumanSuccess(output);
+    output.cleanup();
+  } catch (error) {
+    output.stopSpinner();
+    if (globalOptions.json) {
+      output.data({
+        comparisonId,
+        error: {
+          message: error.message,
+          code: error.code
+        }
+      });
+      output.cleanup();
+      exit(1);
+      return;
+    }
+    output.error(failureMessage, error);
+    output.cleanup();
+    exit(1);
+  }
+}
 
 /**
  * Approve a comparison
@@ -167,27 +279,15 @@ export function createCommentBody(message, options = {}) {
  * @param {Object} deps - Dependencies for testing
  */
 export async function approveCommand(comparisonId, options = {}, globalOptions = {}, deps = {}) {
-  return await runReviewMutation({
+  return await runComparisonDecision({
     command: 'approve',
-    endpoint: `/api/sdk/comparisons/${comparisonId}/approve`,
+    comparisonId,
+    decision: 'approved',
+    annotation: createApprovalBody(options).annotation,
     failureMessage: 'Failed to approve comparison',
     globalOptions,
     options,
-    requestBody: createApprovalBody(options),
     spinnerMessage: 'Approving comparison...',
-    writeJsonError: (output, error) => output.data({
-      approved: false,
-      comparisonId,
-      error: {
-        message: error.message,
-        code: error.code
-      }
-    }),
-    writeJsonSuccess: (output, response) => output.data({
-      approved: true,
-      comparisonId,
-      comparison: response.comparison
-    }),
     writeHumanSuccess: output => {
       output.complete(`Comparison ${comparisonId} approved`);
       if (options.comment) {
@@ -218,28 +318,15 @@ export async function rejectCommand(comparisonId, options = {}, globalOptions =
     exit(1);
     return;
   }
-  return await runReviewMutation({
+  return await runComparisonDecision({
     command: 'reject',
-    endpoint: `/api/sdk/comparisons/${comparisonId}/reject`,
+    comparisonId,
+    decision: 'rejected',
+    annotation: createRejectionBody(options).annotation,
     failureMessage: 'Failed to reject comparison',
     globalOptions,
     options,
-    requestBody: createRejectionBody(options),
     spinnerMessage: 'Rejecting comparison...',
-    writeJsonError: (output, error) => output.data({
-      rejected: false,
-      comparisonId,
-      error: {
-        message: error.message,
-        code: error.code
-      }
-    }),
-    writeJsonSuccess: (output, response) => output.data({
-      rejected: true,
-      comparisonId,
-      reason: options.reason,
-      comparison: response.comparison
-    }),
     writeHumanSuccess: output => {
       output.complete(`Comparison ${comparisonId} rejected`);
       output.hint(`Reason: "${options.reason}"`);

package/dist/commands/run.js

@@ -493,9 +493,7 @@ export async function runCommand(testCommand, options = {}, globalOptions = {},
           if (Object.keys(comparisons).length > 0) {
             jsonResult.comparisons = comparisons;
           }
-          if (buildResult.approvalStatus !== undefined) {
-            jsonResult.approvalStatus = buildResult.approvalStatus;
-          }
+          jsonResult.visual_review = buildResult.visual_review;
           if (buildResult.build?.conclusion !== undefined) {
             jsonResult.conclusion = buildResult.build.conclusion;
           }