@vizzly-testing/cli 0.28.1 → 0.29.1

package/dist/commands/builds.js

@@ -110,11 +110,27 @@ export async function buildsCommand(options = {}, globalOptions = {}, deps = {})
     for (let build of builds) {
       let statusColor = getStatusColor(colors, build.status);
       let statusBadge = statusColor(build.status.toUpperCase());
-      output.print(`  ${colors.bold(build.name || build.id)} ${statusBadge}`);
+
+      // Approval badge
+      let approvalBadge = '';
+      if (build.approval_status && build.status === 'completed') {
+        approvalBadge = ` ${getApprovalBadge(colors, build.approval_status)}`;
+      }
+      output.print(`  ${colors.bold(build.name || build.id)} ${statusBadge}${approvalBadge}`);
       let details = [];
       if (build.branch) details.push(build.branch);
       if (build.commit_sha) details.push(build.commit_sha.substring(0, 7));
       if (build.screenshot_count) details.push(`${build.screenshot_count} screenshots`);
+
+      // Comparison counts summary
+      let compParts = [];
+      let changed = build.changed_comparisons || 0;
+      let identical = build.identical_comparisons || 0;
+      let newCount = build.new_comparisons || 0;
+      if (changed > 0) compParts.push(`${changed} changed`);
+      if (newCount > 0) compParts.push(`${newCount} new`);
+      if (identical > 0) compParts.push(`${identical} identical`);
+      if (compParts.length > 0) details.push(compParts.join(' · '));
       if (details.length > 0) {
         output.print(`    ${colors.dim(details.join(' · '))}`);
       }
@@ -161,13 +177,35 @@ function formatBuildForJson(build, includeComparisons = false) {
     completedAt: build.completed_at
   };
   if (includeComparisons && build.comparisons) {
-    result.comparisonDetails = build.comparisons.map(c => ({
-      id: c.id,
-      name: c.name,
-      status: c.status,
-      diffPercentage: c.diff_percentage,
-      approvalStatus: c.approval_status
-    }));
+    result.comparisonDetails = build.comparisons.map(c => {
+      let diffUrl = c.diff_image?.url || c.diff_image_url || c.diff_url || null;
+      let diffImage = c.diff_image || {};
+      let clusterMetadata = c.cluster_metadata || diffImage.cluster_metadata || null;
+      let ssimScore = c.ssim_score ?? diffImage.ssim_score ?? null;
+      let gmsdScore = c.gmsd_score ?? diffImage.gmsd_score ?? null;
+      let fingerprintHash = c.fingerprint_hash || diffImage.fingerprint_hash || null;
+      let hasHoneydiff = clusterMetadata || ssimScore != null || gmsdScore != null || fingerprintHash;
+      return {
+        id: c.id,
+        name: c.name || c.current_name,
+        status: c.status,
+        diffPercentage: c.diff_percentage,
+        approvalStatus: c.approval_status,
+        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,
+          diff: diffUrl
+        },
+        honeydiff: hasHoneydiff ? {
+          ssimScore,
+          gmsdScore,
+          clusterClassification: clusterMetadata?.classification || null,
+          clusterMetadata,
+          fingerprintHash,
+          diffRegions: c.diff_regions ?? diffImage.diff_regions ?? null
+        } : null
+      };
+    });
   }
   return result;
 }
@@ -214,8 +252,17 @@ function displayBuild(output, build, verbose) {
     output.blank();
     output.labelValue('Comparisons', '');
     for (let comp of build.comparisons.slice(0, verbose ? 50 : 10)) {
-      let statusIcon = getComparisonStatusIcon(colors, comp.status);
-      output.print(`    ${statusIcon} ${comp.name}`);
+      let resultIcon = getComparisonStatusIcon(colors, comp.result || comp.status);
+      let compName = comp.name || comp.current_name || comp.id;
+      let diffInfo = '';
+      if (comp.diff_percentage > 0) {
+        diffInfo = colors.dim(` (${comp.diff_percentage.toFixed(2)}%)`);
+      }
+      let classification = '';
+      if (verbose && comp.cluster_metadata?.classification) {
+        classification = colors.dim(` [${comp.cluster_metadata.classification}]`);
+      }
+      output.print(`    ${resultIcon} ${compName}${diffInfo}${classification}`);
     }
     if (build.comparisons.length > (verbose ? 50 : 10)) {
       output.hint(`  ... and ${build.comparisons.length - (verbose ? 50 : 10)} more`);
@@ -240,6 +287,23 @@ function getStatusColor(colors, status) {
   }
 }
 
+/**
+ * Get colored approval badge
+ */
+function getApprovalBadge(colors, approvalStatus) {
+  switch (approvalStatus) {
+    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() || '');
+  }
+}
+
 /**
  * Get icon for comparison status
  */

package/dist/commands/comparisons.js

@@ -154,6 +154,16 @@ export async function comparisonsCommand(options = {}, globalOptions = {}, deps
  * Format a comparison for JSON output
  */
 function formatComparisonForJson(comparison) {
+  // API endpoints return different shapes:
+  // - Single comparison: nested baseline_screenshot/current_screenshot + flat diff_url, honeydiff at top level
+  // - Build comparisons: flat diff_url/diff_image_url, no storage URLs, limited honeydiff
+  // - Search: nested diff_image with honeydiff, no current/baseline URLs
+  let diffImage = comparison.diff_image || {};
+  let clusterMetadata = comparison.cluster_metadata || diffImage.cluster_metadata || null;
+  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 hasHoneydiff = clusterMetadata || ssimScore != null || gmsdScore != null || fingerprintHash;
   return {
     id: comparison.id,
     name: comparison.name,
@@ -166,10 +176,20 @@ function formatComparisonForJson(comparison) {
     } : null,
     browser: comparison.browser || null,
     urls: {
-      baseline: comparison.baseline_screenshot?.original_url || null,
-      current: comparison.current_screenshot?.original_url || null,
-      diff: comparison.diff_image?.url || null
+      baseline: comparison.baseline_screenshot?.original_url || comparison.baseline_original_url || comparison.baseline_screenshot_url || null,
+      current: comparison.current_screenshot?.original_url || comparison.current_original_url || comparison.current_screenshot_url || null,
+      diff: comparison.diff_image?.url || comparison.diff_image_url || comparison.diff_url || null
     },
+    honeydiff: hasHoneydiff ? {
+      ssimScore,
+      gmsdScore,
+      clusterClassification: clusterMetadata?.classification || null,
+      clusterMetadata,
+      fingerprintHash,
+      diffRegions: comparison.diff_regions ?? diffImage.diff_regions ?? null,
+      diffLines: comparison.diff_lines ?? diffImage.diff_lines ?? null,
+      fingerprintData: comparison.fingerprint_data ?? diffImage.fingerprint_data ?? null
+    } : null,
     buildId: comparison.build_id,
     buildName: comparison.build_name,
     buildBranch: comparison.build_branch,
@@ -209,18 +229,40 @@ function displayComparison(output, comparison, verbose) {
     output.labelValue('Commit', comparison.build_commit_sha.substring(0, 8));
   }
 
-  // URLs in verbose mode
+  // Honeydiff analysis in verbose mode
   if (verbose) {
-    output.blank();
-    output.labelValue('URLs', '');
-    if (comparison.baseline_screenshot?.original_url) {
-      output.print(`    Baseline: ${comparison.baseline_screenshot.original_url}`);
-    }
-    if (comparison.current_screenshot?.original_url) {
-      output.print(`    Current: ${comparison.current_screenshot.original_url}`);
+    let clusterMetadata = comparison.cluster_metadata || comparison.diff_image?.cluster_metadata;
+    let ssim = comparison.ssim_score ?? comparison.diff_image?.ssim_score;
+    let gmsd = comparison.gmsd_score ?? comparison.diff_image?.gmsd_score;
+    let fingerprint = comparison.fingerprint_hash || comparison.diff_image?.fingerprint_hash;
+    if (clusterMetadata || ssim != null || gmsd != null || fingerprint) {
+      output.blank();
+      if (clusterMetadata?.classification) {
+        output.labelValue('Classification', clusterMetadata.classification);
+      }
+      if (ssim != null) {
+        output.labelValue('SSIM', ssim.toFixed(4));
+      }
+      if (gmsd != null) {
+        output.labelValue('GMSD', gmsd.toFixed(4));
+      }
+      if (fingerprint) {
+        output.labelValue('Fingerprint', fingerprint);
+      }
     }
-    if (comparison.diff_image?.url) {
-      output.print(`    Diff: ${comparison.diff_image.url}`);
+  }
+
+  // URLs in verbose mode
+  if (verbose) {
+    let baselineUrl = comparison.baseline_screenshot?.original_url || comparison.baseline_original_url || comparison.baseline_screenshot_url;
+    let currentUrl = comparison.current_screenshot?.original_url || comparison.current_original_url || comparison.current_screenshot_url;
+    let diffUrl = comparison.diff_image?.url || comparison.diff_image_url || comparison.diff_url;
+    if (baselineUrl || currentUrl || diffUrl) {
+      output.blank();
+      output.labelValue('URLs', '');
+      if (baselineUrl) output.print(`    Baseline: ${baselineUrl}`);
+      if (currentUrl) output.print(`    Current: ${currentUrl}`);
+      if (diffUrl) output.print(`    Diff: ${diffUrl}`);
     }
   }
   if (comparison.created_at) {
@@ -258,7 +300,8 @@ function displayBuildComparisons(output, build, comparisons, verbose) {
   for (let comp of comparisons.slice(0, verbose ? 100 : 20)) {
     let icon = getStatusIcon(colors, comp.status);
     let diffInfo = comp.diff_percentage != null ? colors.dim(` (${(comp.diff_percentage * 100).toFixed(1)}%)`) : '';
-    output.print(`  ${icon} ${comp.name}${diffInfo}`);
+    let classification = verbose ? getClassificationLabel(colors, comp.cluster_metadata) : '';
+    output.print(`  ${icon} ${comp.name}${diffInfo}${classification}`);
   }
   if (comparisons.length > (verbose ? 100 : 20)) {
     output.blank();
@@ -299,7 +342,8 @@ function displaySearchResults(output, comparisons, searchPattern, pagination, ve
     }
     for (let comp of group.comparisons.slice(0, verbose ? 10 : 3)) {
       let icon = getStatusIcon(colors, comp.status);
-      output.print(`      ${icon} ${comp.name}`);
+      let classification = verbose ? getClassificationLabel(colors, comp.cluster_metadata || comp.diff_image?.cluster_metadata) : '';
+      output.print(`      ${icon} ${comp.name}${classification}`);
     }
     if (group.comparisons.length > (verbose ? 10 : 3)) {
       output.print(`      ${colors.dim(`... and ${group.comparisons.length - (verbose ? 10 : 3)} more`)}`);
@@ -311,6 +355,15 @@ function displaySearchResults(output, comparisons, searchPattern, pagination, ve
   }
 }
 
+/**
+ * Get a classification label for verbose display
+ */
+function getClassificationLabel(colors, clusterMetadata) {
+  let classification = clusterMetadata?.classification;
+  if (!classification) return '';
+  return colors.dim(` [${classification}]`);
+}
+
 /**
  * Get icon for comparison status
  */

package/package.json

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