@vizzly-testing/cli 0.31.0 → 0.33.0

package/dist/tdd/core/region-coverage.js

@@ -9,6 +9,8 @@
  * 2D boxes that users have manually confirmed via the cloud UI.
  */
 
+let REGION_CENTER_TOLERANCE = 10;
+
 /**
  * Check if a diff cluster intersects with a region (2D box intersection)
  *
@@ -41,13 +43,77 @@ export function clusterIntersectsRegion(cluster, region) {
   let noOverlap = clusterX2 < region.x1 || clusterX1 > region.x2 || clusterY2 < region.y1 || clusterY1 > region.y2;
   return !noOverlap;
 }
+function normalizeBoundingBox(cluster) {
+  let box = cluster?.boundingBox || cluster;
+  if (!box) {
+    return null;
+  }
+  if (Number.isFinite(box.x) && Number.isFinite(box.y) && Number.isFinite(box.width) && Number.isFinite(box.height)) {
+    return {
+      x1: box.x,
+      y1: box.y,
+      x2: box.x + box.width,
+      y2: box.y + box.height,
+      width: Math.abs(box.width),
+      height: Math.abs(box.height)
+    };
+  }
+  if (Number.isFinite(box.x1) && Number.isFinite(box.y1) && Number.isFinite(box.x2) && Number.isFinite(box.y2)) {
+    let width = Math.abs(box.x2 - box.x1);
+    let height = Math.abs(box.y2 - box.y1);
+    return {
+      x1: box.x1,
+      y1: box.y1,
+      x2: box.x2,
+      y2: box.y2,
+      width,
+      height
+    };
+  }
+  return null;
+}
+function getBoundingBoxCenter(box) {
+  return {
+    x: (box.x1 + box.x2) / 2,
+    y: (box.y1 + box.y2) / 2
+  };
+}
+function getRegionLabel(region) {
+  return region.id || region.label || null;
+}
+function clusterMatchesRegion(cluster, region) {
+  let clusterBox = normalizeBoundingBox(cluster);
+  let regionBox = normalizeBoundingBox(region);
+  if (!clusterBox || !regionBox) {
+    return false;
+  }
+  let clusterCenter = getBoundingBoxCenter(clusterBox);
+  let regionCenter = getBoundingBoxCenter(regionBox);
+  let distance = Math.sqrt((clusterCenter.x - regionCenter.x) ** 2 + (clusterCenter.y - regionCenter.y) ** 2);
+  return distance <= REGION_CENTER_TOLERANCE;
+}
+function estimateClusterPixels(cluster) {
+  if (Number.isFinite(cluster?.pixelCount)) {
+    return cluster.pixelCount;
+  }
+  let box = normalizeBoundingBox(cluster);
+  if (!box) {
+    return 0;
+  }
+  return box.width * box.height * 0.5;
+}
 
 /**
- * Calculate what percentage of diff clusters fall within region boxes
+ * Calculate what percentage of changed pixels match confirmed regions.
+ *
+ * This mirrors cloud dynamic-region approval: clusters match confirmed regions
+ * by center proximity, then coverage is weighted by changed pixels. A huge
+ * unmatched change should not be hidden just because several tiny clusters
+ * match confirmed regions.
  *
  * @param {Array} diffClusters - Array of diff clusters from honeydiff
  * @param {Array} regions - Array of confirmed regions { x1, y1, x2, y2 }
- * @returns {{ coverage: number, clustersInRegions: number, totalClusters: number, matchedRegions: string[] }}
+ * @returns {{ coverage: number, clustersInRegions: number, totalClusters: number, matchedRegions: string[], pixelsInRegions: number, totalPixels: number }}
  */
 export function calculateRegionCoverage(diffClusters, regions) {
   if (!diffClusters || diffClusters.length === 0) {
@@ -55,7 +121,9 @@ export function calculateRegionCoverage(diffClusters, regions) {
       coverage: 0,
       clustersInRegions: 0,
       totalClusters: 0,
-      matchedRegions: []
+      matchedRegions: [],
+      pixelsInRegions: 0,
+      totalPixels: 0
     };
   }
   if (!regions || regions.length === 0) {
@@ -63,35 +131,41 @@ export function calculateRegionCoverage(diffClusters, regions) {
       coverage: 0,
       clustersInRegions: 0,
       totalClusters: diffClusters.length,
-      matchedRegions: []
+      matchedRegions: [],
+      pixelsInRegions: 0,
+      totalPixels: 0
     };
   }
   let clustersInRegions = 0;
   let matchedRegionIds = new Set();
+  let pixelsInRegions = 0;
+  let totalPixels = 0;
   for (let cluster of diffClusters) {
-    // Check if this cluster intersects any region
-    let intersectsAnyRegion = false;
+    let pixelCount = estimateClusterPixels(cluster);
+    totalPixels += pixelCount;
+    let matchedAnyRegion = false;
     for (let region of regions) {
-      if (clusterIntersectsRegion(cluster, region)) {
-        intersectsAnyRegion = true;
-        // Track which regions were matched (for debugging/display)
-        if (region.id) {
-          matchedRegionIds.add(region.id);
-        } else if (region.label) {
-          matchedRegionIds.add(region.label);
+      if (clusterMatchesRegion(cluster, region)) {
+        matchedAnyRegion = true;
+        let regionLabel = getRegionLabel(region);
+        if (regionLabel) {
+          matchedRegionIds.add(regionLabel);
         }
       }
     }
-    if (intersectsAnyRegion) {
+    if (matchedAnyRegion) {
       clustersInRegions++;
+      pixelsInRegions += pixelCount;
     }
   }
-  let coverage = clustersInRegions / diffClusters.length;
+  let coverage = totalPixels > 0 ? pixelsInRegions / totalPixels : 0;
   return {
     coverage,
     clustersInRegions,
     totalClusters: diffClusters.length,
-    matchedRegions: [...matchedRegionIds]
+    matchedRegions: [...matchedRegionIds],
+    pixelsInRegions,
+    totalPixels
   };
 }
 
@@ -99,17 +173,31 @@ export function calculateRegionCoverage(diffClusters, regions) {
  * Determine if a comparison should auto-pass based on region coverage
  *
  * Unlike hotspots which require confidence scoring, user-defined regions
- * are already confirmed by humans, so we only need the 80% threshold.
+ * are already confirmed by humans. Cloud still requires strong structural
+ * similarity so a layout shift cannot hide inside a confirmed box.
  *
  * @param {Array} regions - Confirmed regions (already filtered to confirmed status)
  * @param {{ coverage: number }} coverageResult - Result from calculateRegionCoverage
+ * @param {Object} options - Approval thresholds
+ * @param {number|null} options.ssimScore - Honeydiff SSIM/perceptual score
+ * @param {number} options.coverageThreshold - Required region coverage
+ * @param {number} options.ssimThreshold - Required structural similarity
  * @returns {boolean} True if diff should auto-pass as region-filtered
  */
-export function shouldAutoApproveFromRegions(regions, coverageResult) {
+export function shouldAutoApproveFromRegions(regions, coverageResult, options = {}) {
   if (!regions || regions.length === 0 || !coverageResult) {
     return false;
   }
-
-  // Need at least 80% of diff clusters in confirmed regions
-  return coverageResult.coverage >= 0.8;
+  let {
+    ssimScore = null,
+    coverageThreshold = 0.9,
+    ssimThreshold = 0.95
+  } = options;
+  if (coverageResult.coverage < coverageThreshold) {
+    return false;
+  }
+  if (ssimScore === null || ssimScore === undefined) {
+    return false;
+  }
+  return ssimScore >= ssimThreshold;
 }

package/dist/tdd/services/comparison-service.js

@@ -32,6 +32,9 @@ export async function compareImages(baselinePath, currentPath, diffPath, options
     diffPath,
     overwrite: true,
     includeClusters: true,
+    includeSSIM: true,
+    includeGMSD: true,
+    clusterMerge: true,
     minClusterSize
   });
 }
@@ -141,6 +144,7 @@ export function buildFailedComparison(params) {
     regionData
   } = params;
   let diffClusters = honeydiffResult.diffClusters || [];
+  let ssimScore = honeydiffResult.perceptualScore ?? honeydiffResult.ssimScore ?? honeydiffResult.ssim_score ?? null;
   let isFiltered = false;
   let filterReason = 'pixel-diff';
 
@@ -150,7 +154,9 @@ export function buildFailedComparison(params) {
   let confirmedRegions = regionData?.confirmed || [];
   if (confirmedRegions.length > 0 && diffClusters.length > 0) {
     regionCoverage = calculateRegionCoverage(diffClusters, confirmedRegions);
-    if (shouldAutoApproveFromRegions(confirmedRegions, regionCoverage)) {
+    if (shouldAutoApproveFromRegions(confirmedRegions, regionCoverage, {
+      ssimScore
+    })) {
       isRegionFiltered = true;
       isFiltered = true;
       filterReason = 'region-filtered';
@@ -198,8 +204,11 @@ export function buildFailedComparison(params) {
       coverage: regionCoverage.coverage,
       clustersInRegions: regionCoverage.clustersInRegions,
       totalClusters: regionCoverage.totalClusters,
+      pixelsInRegions: regionCoverage.pixelsInRegions,
+      totalPixels: regionCoverage.totalPixels,
       matchedRegions: regionCoverage.matchedRegions,
       confirmedCount: confirmedRegions.length,
+      ssimScore,
       isFiltered: isRegionFiltered
     } : null,
     // Include confirmed regions for visualization in UI

package/dist/tdd/tdd-service.js

@@ -9,7 +9,7 @@
  */
 
 import { existsSync as defaultExistsSync, mkdirSync as defaultMkdirSync, readFileSync as defaultReadFileSync, writeFileSync as defaultWriteFileSync } from 'node:fs';
-import { createApiClient as defaultCreateApiClient, getBatchHotspots as defaultGetBatchHotspots, getBuilds as defaultGetBuilds, getComparison as defaultGetComparison, getTddBaselines as defaultGetTddBaselines } from '../api/index.js';
+import { createApiClient as defaultCreateApiClient, getBatchHotspots as defaultGetBatchHotspots, getBuilds as defaultGetBuilds, getComparison as defaultGetComparison, getComparisonContext as defaultGetComparisonContext, getTddBaselines as defaultGetTddBaselines } from '../api/index.js';
 import { NetworkError } from '../errors/vizzly-error.js';
 import { colors as defaultColors } from '../utils/colors.js';
 import { fetchWithTimeout as defaultFetchWithTimeout } from '../utils/fetch-utils.js';
@@ -58,6 +58,7 @@ export class TddService {
         getTddBaselines: defaultGetTddBaselines,
         getBuilds: defaultGetBuilds,
         getComparison: defaultGetComparison,
+        getComparisonContext: defaultGetComparisonContext,
         getBatchHotspots: defaultGetBatchHotspots,
         fetchWithTimeout: defaultFetchWithTimeout,
         getDefaultBranch: defaultGetDefaultBranch
@@ -169,6 +170,7 @@ export class TddService {
       getTddBaselines,
       getBuilds,
       getComparison,
+      getComparisonContext,
       clearBaselineData,
       generateScreenshotSignature,
       generateBaselineFilename,
@@ -221,10 +223,19 @@ export class TddService {
           output.warn(`Build ${buildId} has status: ${baselineBuild.status} (expected: completed)`);
         }
         baselineBuild.screenshots = apiResponse.screenshots;
+        this.saveDynamicMetadataFromBaselineResponse(apiResponse);
       } else if (comparisonId) {
         // Handle specific comparison download
         output.info(`Using comparison: ${comparisonId}`);
         let comparison = await getComparison(this.client, comparisonId);
+        let comparisonContext = null;
+        if (!comparison.dynamic_content && getComparisonContext) {
+          try {
+            comparisonContext = await getComparisonContext(this.client, comparisonId);
+          } catch (error) {
+            output.debug('tdd', `comparison context unavailable for ${comparisonId}: ${error.message}`);
+          }
+        }
         if (!comparison.baseline_screenshot) {
           throw new Error(`Comparison ${comparisonId} has no baseline screenshot. This comparison may be a "new" screenshot.`);
         }
@@ -255,6 +266,11 @@ export class TddService {
           }
         }
         let screenshotName = comparison.baseline_name || comparison.current_name;
+        let dynamicContent = comparison.dynamic_content || {
+          hotspot_analysis: comparisonContext?.history?.hotspot_analysis,
+          confirmed_regions: comparisonContext?.history?.confirmed_regions
+        };
+        this.saveDynamicMetadataForScreenshot(screenshotName, dynamicContent);
         let signature = generateScreenshotSignature(screenshotName, screenshotProperties, this.signatureProperties);
         let filename = generateBaselineFilename(screenshotName, signature);
         baselineBuild = {
@@ -294,24 +310,15 @@ export class TddService {
         }
         baselineBuild = apiResponse.build;
         baselineBuild.screenshots = apiResponse.screenshots;
-
-        // Store bundled hotspots and regions from API response
-        if (apiResponse.hotspots && Object.keys(apiResponse.hotspots).length > 0) {
-          this.hotspotData = apiResponse.hotspots;
-          saveHotspotMetadata(this.workingDir, apiResponse.hotspots, apiResponse.summary);
-        }
-        if (apiResponse.regions && Object.keys(apiResponse.regions).length > 0) {
-          this.regionData = apiResponse.regions;
-          saveRegionMetadata(this.workingDir, apiResponse.regions, apiResponse.summary);
-        }
+        this.saveDynamicMetadataFromBaselineResponse(apiResponse);
       }
       let buildDetails = baselineBuild;
       if (!buildDetails.screenshots || buildDetails.screenshots.length === 0) {
         output.warn('No screenshots found in baseline build');
         return null;
       }
-      output.info(`Using baseline from build: ${colors.cyan(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
-      output.info(`Checking ${colors.cyan(buildDetails.screenshots.length)} baseline screenshots...`);
+      output.info(`Using baseline from build: ${colors.info(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
+      output.info(`Checking ${colors.info(buildDetails.screenshots.length)} baseline screenshots...`);
 
       // Check existing baseline metadata for SHA comparison
       let existingBaseline = await this.loadBaseline();
@@ -488,6 +495,49 @@ export class TddService {
       throw error;
     }
   }
+  saveDynamicMetadataFromBaselineResponse(apiResponse = {}) {
+    let {
+      saveHotspotMetadata,
+      saveRegionMetadata
+    } = this._deps;
+    let hasHotspots = Object.keys(apiResponse.hotspots || {}).length > 0;
+    let hasRegions = Object.keys(apiResponse.regions || {}).length > 0;
+    if (hasHotspots) {
+      this.hotspotData = apiResponse.hotspots;
+      saveHotspotMetadata(this.workingDir, apiResponse.hotspots, apiResponse.summary);
+    }
+    if (hasRegions) {
+      this.regionData = apiResponse.regions;
+      saveRegionMetadata(this.workingDir, apiResponse.regions, apiResponse.summary);
+    }
+  }
+  saveDynamicMetadataForScreenshot(screenshotName, dynamicContent = {}) {
+    if (!screenshotName) {
+      return;
+    }
+    let hotspotAnalysis = dynamicContent.hotspot_analysis;
+    let confirmedRegions = dynamicContent.confirmed_regions || [];
+    let hasHotspotAnalysis = hotspotAnalysis?.total_builds_analyzed > 0;
+    let hasConfirmedRegions = confirmedRegions.length > 0;
+    let summary = {
+      screenshots: 1,
+      hotspots: hasHotspotAnalysis ? 1 : 0,
+      regions: hasConfirmedRegions ? 1 : 0,
+      total_regions: confirmedRegions.length
+    };
+    this.saveDynamicMetadataFromBaselineResponse({
+      hotspots: hasHotspotAnalysis ? {
+        [screenshotName]: hotspotAnalysis
+      } : {},
+      regions: hasConfirmedRegions ? {
+        [screenshotName]: {
+          confirmed: confirmedRegions,
+          candidates: []
+        }
+      } : {},
+      summary
+    });
+  }
 
   /**
    * Process already-fetched baseline data (for use when caller handles auth)
@@ -526,20 +576,7 @@ export class TddService {
       }
     }
     let baselineBuild = apiResponse.build;
-
-    // Store bundled hotspots and regions from API response
-    let {
-      saveHotspotMetadata,
-      saveRegionMetadata
-    } = this._deps;
-    if (apiResponse.hotspots && Object.keys(apiResponse.hotspots).length > 0) {
-      this.hotspotData = apiResponse.hotspots;
-      saveHotspotMetadata(this.workingDir, apiResponse.hotspots, apiResponse.summary);
-    }
-    if (apiResponse.regions && Object.keys(apiResponse.regions).length > 0) {
-      this.regionData = apiResponse.regions;
-      saveRegionMetadata(this.workingDir, apiResponse.regions, apiResponse.summary);
-    }
+    this.saveDynamicMetadataFromBaselineResponse(apiResponse);
     if (baselineBuild.status === 'failed') {
       output.warn(`Build ${buildId} is marked as FAILED - falling back to local baselines`);
       return await this.handleLocalBaselines();
@@ -552,8 +589,8 @@ export class TddService {
       output.warn('No screenshots found in baseline build');
       return null;
     }
-    output.info(`Using baseline from build: ${colors.cyan(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
-    output.info(`Checking ${colors.cyan(buildDetails.screenshots.length)} baseline screenshots...`);
+    output.info(`Using baseline from build: ${colors.info(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
+    output.info(`Checking ${colors.info(buildDetails.screenshots.length)} baseline screenshots...`);
 
     // Check existing baseline metadata for SHA comparison
     let existingBaseline = await this.loadBaseline();
@@ -862,7 +899,7 @@ export class TddService {
       }
       return null;
     } else {
-      output.info(`Using existing baseline: ${colors.cyan(baseline.buildName)}`);
+      output.info(`Using existing baseline: ${colors.info(baseline.buildName)}`);
       return baseline;
     }
   }
@@ -1132,9 +1169,9 @@ export class TddService {
     output.print(`🐻 ${colors.bold(results.total)} screenshot${results.total !== 1 ? 's' : ''} compared`);
     output.blank();
 
-    // Passed section - use Observatory success color
+    // Passed section - use BearDen success color
     if (results.passed > 0) {
-      let successColor = colors.brand?.success || colors.green;
+      let successColor = colors.brand?.success || colors.success;
       if (output.isVerbose()) {
         // Verbose mode: show each screenshot
         for (let comp of passedComparisons) {
@@ -1147,10 +1184,10 @@ export class TddService {
       output.blank();
     }
 
-    // Failed comparisons with diff bars - use Observatory warning/danger colors
+    // Failed comparisons with diff bars - use BearDen warning/danger colors
     if (failedComparisons.length > 0) {
       let warningColor = colors.brand?.warning || colors.yellow;
-      let dangerColor = colors.brand?.danger || colors.red;
+      let dangerColor = colors.brand?.danger || colors.error;
       output.print(`  ${warningColor('◐')} ${warningColor(failedComparisons.length)} visual change${failedComparisons.length !== 1 ? 's' : ''} detected`);
 
       // Find longest name for alignment
@@ -1171,9 +1208,9 @@ export class TddService {
       output.blank();
     }
 
-    // New screenshots - use Observatory info color
+    // New screenshots - use BearDen info color
     if (newComparisons.length > 0) {
-      let infoColor = colors.brand?.info || colors.cyan;
+      let infoColor = colors.brand?.info || colors.info;
       let textMuted = colors.brand?.textMuted || colors.dim;
       output.print(`  ${infoColor('+')} ${infoColor(newComparisons.length)} new screenshot${newComparisons.length !== 1 ? 's' : ''}`);
       for (let comp of newComparisons) {
@@ -1182,9 +1219,9 @@ export class TddService {
       output.blank();
     }
 
-    // Errors - use Observatory danger color
+    // Errors - use BearDen danger color
     if (results.errors > 0) {
-      let dangerColor = colors.brand?.danger || colors.red;
+      let dangerColor = colors.brand?.danger || colors.error;
       let errorComparisons = this.comparisons.filter(c => c.status === 'error');
       output.print(`  ${dangerColor('!')} ${dangerColor(results.errors)} error${results.errors !== 1 ? 's' : ''}`);
       for (let comp of errorComparisons) {
@@ -1195,7 +1232,7 @@ export class TddService {
 
     // Dashboard link with prominent styling - detect if server is running
     if (hasChanges) {
-      let infoColor = colors.brand?.info || colors.cyan;
+      let infoColor = colors.brand?.info || colors.info;
       let textTertiary = colors.brand?.textTertiary || colors.dim;
 
       // Check if TDD server is already running

package/dist/utils/colors.js

@@ -4,56 +4,47 @@
 import { Ansis } from 'ansis';
 
 // =============================================================================
-// Vizzly Observatory Design System Colors
-// Aligned with @vizzly-testing/observatory color tokens
+// Vizzly BearDen Design System Colors
+// Aligned with the reporter design system color tokens.
 // =============================================================================
 
 export let brand = {
-  // Primary brand color - Amber is Observatory's signature
-  amber: '#F59E0B',
+  // Primary brand color - restrained brass on graphite
+  amber: '#D69A35',
   // Primary brand, actions, highlights
-  amberLight: '#FBBF24',
+  amberLight: '#E0AD55',
   // Hover states, emphasis
 
   // Accent colors (semantic)
-  success: '#10B981',
+  success: '#7FD990',
   // Approved, passed, active (--accent-success)
-  warning: '#F59E0B',
+  warning: '#DCAD5F',
   // Pending, attention (--accent-warning)
-  danger: '#EF4444',
+  danger: '#D77782',
   // Rejected, failed, errors (--accent-danger)
-  info: '#3B82F6',
+  info: '#B7BDC6',
   // Processing, informational (--accent-info)
 
   // Surface colors (dark theme)
-  bg: '#0F172A',
+  bg: '#07080A',
   // Page background (--vz-bg)
-  surface: '#1A2332',
+  surface: '#101216',
   // Cards, panels (--vz-surface)
-  elevated: '#1E293B',
+  elevated: '#111318',
   // Dropdowns, modals (--vz-elevated)
-  border: '#374151',
+  border: '#30343B',
   // Primary borders (--vz-border)
-  borderSubtle: '#2D3748',
+  borderSubtle: '#252930',
   // Subtle dividers (--vz-border-subtle)
 
   // Text hierarchy
-  textPrimary: '#FFFFFF',
+  textPrimary: '#F4F6F8',
   // Headings, important (--text-primary)
-  textSecondary: '#9CA3AF',
+  textSecondary: '#C8CDD3',
   // Body text (--text-secondary)
-  textTertiary: '#6B7280',
+  textTertiary: '#A0A6AF',
   // Captions, metadata (--text-tertiary)
-  textMuted: '#4B5563',
-  // Disabled, placeholders (--text-muted)
-
-  // Legacy aliases (for backward compatibility)
-  green: '#10B981',
-  red: '#EF4444',
-  cyan: '#06B6D4',
-  // Still useful for links in terminals
-  slate: '#64748B',
-  dark: '#1E293B'
+  textMuted: '#7A828D' // Disabled, placeholders (--text-muted)
 };
 function supportsColorDefault() {
   // Respect NO_COLOR: https://no-color.org/
@@ -124,7 +115,7 @@ export function createColors(options = {}) {
       hex: () => noop,
       bgRgb: () => noop,
       bgHex: () => noop,
-      // Observatory brand colors (noop versions)
+      // BearDen brand colors (noop versions)
       brand: {
         // Primary
         amber: noop,
@@ -133,6 +124,7 @@ export function createColors(options = {}) {
         success: noop,
         warning: noop,
         danger: noop,
+        error: noop,
         info: noop,
         // Text hierarchy
         textPrimary: noop,
@@ -144,12 +136,7 @@ export function createColors(options = {}) {
         bgSuccess: noop,
         bgWarning: noop,
         bgDanger: noop,
-        bgInfo: noop,
-        // Legacy aliases
-        green: noop,
-        red: noop,
-        cyan: noop,
-        slate: noop
+        bgInfo: noop
       }
     };
   }
@@ -173,16 +160,16 @@ export function createColors(options = {}) {
     gray: colors.gray,
     black: colors.black,
     // Semantic aliases (basic)
-    success: colors.green,
-    error: colors.red,
-    warning: colors.yellow,
-    info: colors.blue,
+    success: colors.hex(brand.success),
+    error: colors.hex(brand.danger),
+    warning: colors.hex(brand.warning),
+    info: colors.hex(brand.info),
     // Extended colors for rich styling
     rgb: colors.rgb.bind(colors),
     hex: colors.hex.bind(colors),
     bgRgb: colors.bgRgb.bind(colors),
     bgHex: colors.bgHex.bind(colors),
-    // Observatory brand colors (Truecolor) - aligned with design system
+    // BearDen brand colors (Truecolor) - aligned with design system
     brand: {
       // Primary brand color
       amber: colors.hex(brand.amber),
@@ -191,6 +178,7 @@ export function createColors(options = {}) {
       success: colors.hex(brand.success),
       warning: colors.hex(brand.warning),
       danger: colors.hex(brand.danger),
+      error: colors.hex(brand.danger),
       info: colors.hex(brand.info),
       // Text hierarchy
       textPrimary: colors.hex(brand.textPrimary),
@@ -202,12 +190,7 @@ export function createColors(options = {}) {
       bgSuccess: colors.bgHex(brand.success),
       bgWarning: colors.bgHex(brand.warning),
       bgDanger: colors.bgHex(brand.danger),
-      bgInfo: colors.bgHex(brand.info),
-      // Legacy aliases (backward compatibility)
-      green: colors.hex(brand.green),
-      red: colors.hex(brand.red),
-      cyan: colors.hex(brand.cyan),
-      slate: colors.hex(brand.slate)
+      bgInfo: colors.bgHex(brand.info)
     }
   };
 }

package/dist/utils/global-config.js

@@ -121,7 +121,7 @@ export async function clearGlobalConfig() {
 
 /**
  * Save user's PATH for menubar app to use
- * This auto-configures the menubar app so it can find npx/node
+ * This auto-configures the menubar app so it can find package runners/node
  * @returns {Promise<void>}
  */
 export async function saveUserPath() {