@vizzly-testing/cli 0.20.1-beta.0 → 0.20.1-beta.1

package/dist/utils/output.js

@@ -30,13 +30,14 @@ const config = {
   json: false,
   logLevel: null,
   // null = not yet initialized, will check env var on first configure
-  color: true,
+  color: undefined,
+  // undefined = auto-detect, true = force on, false = force off
   silent: false,
   logFile: null
 };
 let colors = createColors({
   useColor: config.color
-});
+}); // undefined triggers auto-detect
 let spinnerInterval = null;
 let spinnerMessage = '';
 let lastSpinnerLine = '';
@@ -142,16 +143,29 @@ export function isVerbose() {
 }
 
 /**
- * Show command header (e.g., "vizzly · tdd · local")
+ * Show command header with distinctive branding
+ * Uses Observatory's signature amber color for "vizzly"
  * Only shows once per command execution
+ * @param {string} command - Command name (e.g., 'tdd', 'run')
+ * @param {string} [mode] - Optional mode (e.g., 'local', 'cloud')
  */
 export function header(command, mode = null) {
   if (config.json || config.silent || headerShown) return;
   headerShown = true;
-  const parts = ['vizzly', command];
-  if (mode) parts.push(mode);
+  let parts = [];
+
+  // Brand "vizzly" with Observatory's signature amber
+  parts.push(colors.brand.amber(colors.bold('vizzly')));
+
+  // Command in info blue (processing, active)
+  parts.push(colors.brand.info(command));
+
+  // Mode (if provided) in muted text
+  if (mode) {
+    parts.push(colors.brand.textTertiary(mode));
+  }
   console.error('');
-  console.error(colors.dim(parts.join(' · ')));
+  console.error(parts.join(colors.brand.textMuted(' · ')));
   console.error('');
 }
 
@@ -334,16 +348,20 @@ export function data(obj) {
 
 /**
  * Start a spinner with message
+ * Uses Observatory amber for the spinner animation
  */
 export function startSpinner(message) {
   if (config.json || config.silent || !process.stderr.isTTY) return;
   stopSpinner();
   spinnerMessage = message;
-  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+  // Braille dots spinner - smooth animation
+  let frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
   let i = 0;
   spinnerInterval = setInterval(() => {
-    const frame = frames[i++ % frames.length];
-    const line = `${colors.cyan(frame)} ${spinnerMessage}`;
+    let frame = frames[i++ % frames.length];
+    // Use amber brand color for spinner, plain text for message (better readability)
+    let line = `  ${colors.brand.amber(frame)} ${spinnerMessage}`;
 
     // Clear previous line and write new one
     process.stderr.write(`\r${' '.repeat(lastSpinnerLine.length)}\r`);
@@ -357,7 +375,7 @@ export function startSpinner(message) {
  */
 export function updateSpinner(message, current = 0, total = 0) {
   if (config.json || config.silent || !process.stderr.isTTY) return;
-  const progressText = total > 0 ? ` (${current}/${total})` : '';
+  let progressText = total > 0 ? ` ${colors.brand.textMuted(`(${current}/${total})`)}` : '';
   spinnerMessage = `${message}${progressText}`;
   if (!spinnerInterval) {
     startSpinner(spinnerMessage);
@@ -450,6 +468,33 @@ function formatData(data) {
  * @param {string} message - Debug message
  * @param {Object} data - Optional data object to display inline
  */
+/**
+ * Get a distinctive color for a component name
+ * Uses Observatory design system colors for consistent styling
+ * @param {string} component - Component name
+ * @returns {Function} Color function
+ */
+function getComponentColor(component) {
+  // Map components to Observatory semantic colors
+  let componentColors = {
+    // Server/infrastructure - success green (active, running)
+    server: colors.brand.success,
+    baseline: colors.brand.success,
+    // TDD/comparison - info blue (processing, informational)
+    tdd: colors.brand.info,
+    compare: colors.brand.info,
+    // Config/auth - warning amber (attention, configuration)
+    config: colors.brand.warning,
+    build: colors.brand.warning,
+    auth: colors.brand.warning,
+    // Upload/API - info blue (processing)
+    upload: colors.brand.info,
+    api: colors.brand.info,
+    // Run - amber (primary action)
+    run: colors.brand.amber
+  };
+  return componentColors[component] || colors.brand.info;
+}
 export function debug(component, message, data = {}) {
   if (!shouldLog('debug')) return;
 
@@ -472,12 +517,15 @@ export function debug(component, message, data = {}) {
     let formattedData = formatData(data);
     let dataStr = formattedData ? ` ${colors.dim(formattedData)}` : '';
     if (component) {
-      // Component-based format: "  server    listening on :47392"
+      // Component-based format with distinctive colors
+      // "  server   ready on :47392"
       let paddedComponent = component.padEnd(8);
-      console.error(`  ${colors.cyan(paddedComponent)} ${message}${dataStr}`);
+      let componentColor = getComponentColor(component);
+      // Use plain text for message (better readability on dark backgrounds)
+      console.error(`  ${componentColor(paddedComponent)} ${message}${dataStr}`);
     } else {
       // Simple format for legacy calls
-      console.error(`  ${colors.dim('•')} ${colors.dim(message)}${dataStr}`);
+      console.error(`  ${colors.dim('•')} ${message}${dataStr}`);
     }
   }
   writeLog('debug', message, {
@@ -523,6 +571,393 @@ function writeLog(level, message, data = {}) {
   }
 }
 
+// ============================================================================
+// Visual formatting helpers
+// ============================================================================
+
+/**
+ * Generate a visual diff bar with color coding
+ * Shows percentage as a filled/empty bar with color based on severity
+ * Uses Observatory semantic colors (success → warning → danger)
+ * @param {number} percentage - Diff percentage (0-100)
+ * @param {number} [width=10] - Bar width in characters
+ * @returns {string} Colored diff bar string
+ *
+ * @example
+ * diffBar(4.2)  // Returns "████░░░░░░" in warning amber
+ * diffBar(0.5)  // Returns "█░░░░░░░░░" in success green
+ * diffBar(15.0) // Returns "██░░░░░░░░" in danger red
+ */
+export function diffBar(percentage, width = 10) {
+  if (config.json || config.silent) return '';
+
+  // Calculate filled blocks - ensure at least 1 filled for non-zero percentages
+  let filled = Math.round(percentage / 100 * width);
+  if (percentage > 0 && filled === 0) filled = 1;
+  let empty = width - filled;
+
+  // Color based on severity using Observatory semantic colors
+  let barColor;
+  if (percentage < 1) {
+    barColor = colors.brand.success; // Green - minimal change
+  } else if (percentage < 5) {
+    barColor = colors.brand.warning; // Amber - attention needed
+  } else {
+    barColor = colors.brand.danger; // Red - significant change
+  }
+  let filledPart = barColor('█'.repeat(filled));
+  let emptyPart = colors.brand.textMuted('░'.repeat(empty));
+  return `${filledPart}${emptyPart}`;
+}
+
+/**
+ * Generate a gradient progress bar
+ * Creates a visually appealing progress indicator with color gradient
+ * Default gradient uses Observatory amber → amber-light (signature brand gradient)
+ * @param {number} current - Current progress value
+ * @param {number} total - Total value
+ * @param {number} [width=20] - Bar width in characters
+ * @param {Object} [options] - Gradient options
+ * @param {string} [options.from='#F59E0B'] - Start color (hex) - default: amber
+ * @param {string} [options.to='#FBBF24'] - End color (hex) - default: amber-light
+ * @returns {string} Gradient progress bar string
+ */
+export function progressBar(current, total, width = 20, options = {}) {
+  if (config.json || config.silent) return '';
+
+  // Default to Observatory's signature amber gradient
+  let {
+    from = '#F59E0B',
+    to = '#FBBF24'
+  } = options;
+  let percent = Math.min(100, Math.max(0, current / total * 100));
+  let filled = Math.round(percent / 100 * width);
+  let empty = width - filled;
+
+  // Parse hex colors
+  let fromRgb = hexToRgb(from);
+  let toRgb = hexToRgb(to);
+
+  // Build gradient
+  let bar = '';
+  for (let i = 0; i < filled; i++) {
+    let ratio = filled > 1 ? i / (filled - 1) : 0;
+    let r = Math.round(fromRgb.r + (toRgb.r - fromRgb.r) * ratio);
+    let g = Math.round(fromRgb.g + (toRgb.g - fromRgb.g) * ratio);
+    let b = Math.round(fromRgb.b + (toRgb.b - fromRgb.b) * ratio);
+    bar += colors.rgb(r, g, b)('█');
+  }
+  bar += colors.dim('░'.repeat(empty));
+  return bar;
+}
+
+/**
+ * Parse hex color to RGB object
+ * @param {string} hex - Hex color string (e.g., '#FF0000' or 'FF0000')
+ * @returns {{r: number, g: number, b: number}} RGB values
+ */
+function hexToRgb(hex) {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : {
+    r: 128,
+    g: 128,
+    b: 128
+  };
+}
+
+/**
+ * Create a colored badge/pill for status indicators
+ * Uses Observatory semantic colors for consistent meaning
+ * @param {string} text - Badge text
+ * @param {string} [type='info'] - Badge type: 'success', 'warning', 'error', 'info'
+ * @returns {string} Formatted badge string
+ *
+ * @example
+ * badge('READY', 'success')  // Success green background
+ * badge('FAIL', 'error')     // Danger red background
+ * badge('SYNC', 'warning')   // Warning amber background
+ */
+export function badge(text, type = 'info') {
+  if (config.json || config.silent) return text;
+  let bgColor;
+  let fgColor = colors.black;
+  switch (type) {
+    case 'success':
+      bgColor = colors.brand.bgSuccess;
+      break;
+    case 'warning':
+      bgColor = colors.brand.bgWarning;
+      break;
+    case 'error':
+      bgColor = colors.brand.bgDanger;
+      fgColor = colors.white;
+      break;
+    default:
+      bgColor = colors.brand.bgInfo;
+      fgColor = colors.white;
+      break;
+  }
+  return bgColor(fgColor(` ${text} `));
+}
+
+/**
+ * Create a colored status dot
+ * Uses Observatory semantic colors for consistent meaning
+ * @param {string} [status='info'] - Status type: 'success', 'warning', 'error', 'info'
+ * @returns {string} Colored dot character
+ */
+export function statusDot(status = 'info') {
+  if (config.json || config.silent) return '●';
+  switch (status) {
+    case 'success':
+      return colors.brand.success('●');
+    case 'warning':
+      return colors.brand.warning('●');
+    case 'error':
+      return colors.brand.danger('●');
+    default:
+      return colors.brand.info('●');
+  }
+}
+
+/**
+ * Format a link with styling
+ * @param {string} label - Link label (not currently used, for future OSC 8 support)
+ * @param {string} url - URL to display
+ * @returns {string} Styled URL string
+ */
+export function link(_label, url) {
+  if (config.json) return url;
+  if (config.silent) return '';
+
+  // Style the URL with underline and info blue
+  return colors.brand.info(colors.underline(url));
+}
+
+/**
+ * Print a labeled value with consistent formatting
+ * Useful for displaying key-value pairs in verbose output
+ * @param {string} label - The label (will be styled as tertiary text)
+ * @param {string} value - The value to display
+ * @param {Object} [options] - Display options
+ * @param {number} [options.indent=2] - Number of spaces to indent
+ */
+export function labelValue(label, value, options = {}) {
+  if (config.json || config.silent) return;
+  let {
+    indent = 2
+  } = options;
+  let padding = ' '.repeat(indent);
+  console.log(`${padding}${colors.brand.textTertiary(`${label}:`)} ${value}`);
+}
+
+/**
+ * Print a hint/tip with muted styling
+ * @param {string} text - The hint text
+ * @param {Object} [options] - Display options
+ * @param {number} [options.indent=2] - Number of spaces to indent
+ */
+export function hint(text, options = {}) {
+  if (config.json || config.silent) return;
+  let {
+    indent = 2
+  } = options;
+  let padding = ' '.repeat(indent);
+  console.log(`${padding}${colors.brand.textMuted(text)}`);
+}
+
+/**
+ * Print a list of items with bullet points
+ * @param {string[]} items - Array of items to display
+ * @param {Object} [options] - Display options
+ * @param {number} [options.indent=2] - Number of spaces to indent
+ * @param {string} [options.bullet='•'] - Bullet character
+ * @param {string} [options.style='default'] - Style: 'default', 'success', 'warning', 'error'
+ */
+export function list(items, options = {}) {
+  if (config.json || config.silent) return;
+  let {
+    indent = 2,
+    bullet = '•',
+    style = 'default'
+  } = options;
+  let padding = ' '.repeat(indent);
+  let bulletColor;
+  switch (style) {
+    case 'success':
+      bulletColor = colors.brand.success;
+      bullet = '✓';
+      break;
+    case 'warning':
+      bulletColor = colors.brand.warning;
+      bullet = '!';
+      break;
+    case 'error':
+      bulletColor = colors.brand.danger;
+      bullet = '✗';
+      break;
+    default:
+      bulletColor = colors.brand.textMuted;
+  }
+  for (let item of items) {
+    console.log(`${padding}${bulletColor(bullet)} ${item}`);
+  }
+}
+
+/**
+ * Print a success/completion message with checkmark
+ * @param {string} message - The success message
+ * @param {Object} [options] - Display options
+ * @param {string} [options.detail] - Optional detail text (shown dimmed)
+ */
+export function complete(message, options = {}) {
+  if (config.silent) return;
+  let {
+    detail
+  } = options;
+  let detailStr = detail ? ` ${colors.brand.textMuted(detail)}` : '';
+  if (config.json) {
+    console.log(JSON.stringify({
+      status: 'complete',
+      message,
+      detail
+    }));
+  } else {
+    console.log(`  ${colors.brand.success('✓')} ${message}${detailStr}`);
+  }
+}
+
+/**
+ * Print a simple key-value table
+ * @param {Object} data - Object with key-value pairs to display
+ * @param {Object} [options] - Display options
+ * @param {number} [options.indent=2] - Number of spaces to indent
+ * @param {number} [options.keyWidth=12] - Width for key column
+ */
+export function keyValue(data, options = {}) {
+  if (config.json || config.silent) return;
+  let {
+    indent = 2,
+    keyWidth = 12
+  } = options;
+  let padding = ' '.repeat(indent);
+  for (let [key, value] of Object.entries(data)) {
+    if (value === undefined || value === null) continue;
+    let paddedKey = key.padEnd(keyWidth);
+    console.log(`${padding}${colors.brand.textTertiary(paddedKey)} ${value}`);
+  }
+}
+
+/**
+ * Print a divider line
+ * @param {Object} [options] - Display options
+ * @param {number} [options.width=40] - Width of the divider
+ * @param {string} [options.char='─'] - Character to use for divider
+ */
+export function divider(options = {}) {
+  if (config.json || config.silent) return;
+  let {
+    width = 40,
+    char = '─'
+  } = options;
+  console.log(colors.brand.textMuted(char.repeat(width)));
+}
+
+/**
+ * Create a styled box around content
+ * Uses Unicode box-drawing characters for clean terminal rendering
+ * Features brand-colored borders and titles
+ *
+ * @param {string|string[]} content - Content to display (string or array of lines)
+ * @param {Object} [options] - Box options
+ * @param {string} [options.title] - Optional title for the box
+ * @param {number} [options.padding=1] - Horizontal padding inside the box
+ * @param {Function} [options.borderColor] - Color function for the border
+ * @param {string} [options.style='default'] - Box style: 'default', 'branded'
+ * @returns {string} Formatted box string
+ *
+ * @example
+ * box('Dashboard: http://localhost:47392')
+ * // ╭───────────────────────────────────────╮
+ * // │  Dashboard: http://localhost:47392    │
+ * // ╰───────────────────────────────────────╯
+ *
+ * @example
+ * box(['Line 1', 'Line 2'], { title: 'Info', style: 'branded' })
+ */
+export function box(content, options = {}) {
+  if (config.json || config.silent) return '';
+  let {
+    title = null,
+    padding = 1,
+    borderColor = null,
+    style = 'default'
+  } = options;
+  let lines = Array.isArray(content) ? content : [content];
+
+  // Strip ANSI codes for width calculation
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: intentional ANSI escape sequence matching
+  let stripAnsi = str => str.replace(/\x1b\[[0-9;]*m/g, '');
+
+  // Calculate max width (content + padding on each side)
+  let maxContentWidth = Math.max(...lines.map(line => stripAnsi(line).length));
+  let innerWidth = maxContentWidth + padding * 2;
+
+  // If title provided, ensure box is wide enough
+  if (title) {
+    let titleWidth = stripAnsi(title).length + 4; // " title " with spaces
+    innerWidth = Math.max(innerWidth, titleWidth);
+  }
+
+  // Border styling - use Observatory amber for 'branded' style
+  let border = borderColor || (style === 'branded' ? colors.brand.amber : colors.dim);
+  let titleColor = style === 'branded' ? colors.bold : s => s;
+
+  // Build the box
+  let result = [];
+
+  // Top border with optional title
+  if (title) {
+    let titleStr = ` ${titleColor(title)} `;
+    let leftDash = '─'.repeat(1);
+    let rightDash = '─'.repeat(innerWidth - stripAnsi(title).length - 3);
+    result.push(border(`╭${leftDash}`) + titleStr + border(`${rightDash}╮`));
+  } else {
+    result.push(border(`╭${'─'.repeat(innerWidth)}╮`));
+  }
+
+  // Content lines
+  let paddingStr = ' '.repeat(padding);
+  for (let line of lines) {
+    let lineWidth = stripAnsi(line).length;
+    let rightPad = ' '.repeat(innerWidth - lineWidth - padding * 2);
+    result.push(border('│') + paddingStr + line + rightPad + paddingStr + border('│'));
+  }
+
+  // Bottom border
+  result.push(border(`╰${'─'.repeat(innerWidth)}╯`));
+  return result.join('\n');
+}
+
+/**
+ * Print a box to stderr
+ * Convenience wrapper around box() that prints directly
+ *
+ * @param {string|string[]} content - Content to display
+ * @param {Object} [options] - Box options (see box())
+ */
+export function printBox(content, options = {}) {
+  if (config.json || config.silent) return;
+  let boxStr = box(content, options);
+  if (boxStr) {
+    console.error(boxStr);
+  }
+}
+
 // ============================================================================
 // Cleanup
 // ============================================================================
@@ -542,7 +977,7 @@ export function reset() {
   stopSpinner();
   config.json = false;
   config.logLevel = null;
-  config.color = true;
+  config.color = undefined; // Reset to auto-detect
   config.silent = false;
   config.logFile = null;
   colors = createColors({