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

package/dist/utils/colors.js

@@ -1,66 +1,214 @@
-// Zero-dependency color helper using raw ANSI codes.
-// Detects terminal color support and emits codes only when enabled.
+// Color utility using ansis for rich terminal styling.
+// Detects terminal color support and provides chainable color functions.
 
+import ansis from 'ansis';
+
+// =============================================================================
+// Vizzly Observatory Design System Colors
+// Aligned with @vizzly-testing/observatory color tokens
+// =============================================================================
+
+export let brand = {
+  // Primary brand color - Amber is Observatory's signature
+  amber: '#F59E0B',
+  // Primary brand, actions, highlights
+  amberLight: '#FBBF24',
+  // Hover states, emphasis
+
+  // Accent colors (semantic)
+  success: '#10B981',
+  // Approved, passed, active (--accent-success)
+  warning: '#F59E0B',
+  // Pending, attention (--accent-warning)
+  danger: '#EF4444',
+  // Rejected, failed, errors (--accent-danger)
+  info: '#3B82F6',
+  // Processing, informational (--accent-info)
+
+  // Surface colors (dark theme)
+  bg: '#0F172A',
+  // Page background (--vz-bg)
+  surface: '#1A2332',
+  // Cards, panels (--vz-surface)
+  elevated: '#1E293B',
+  // Dropdowns, modals (--vz-elevated)
+  border: '#374151',
+  // Primary borders (--vz-border)
+  borderSubtle: '#2D3748',
+  // Subtle dividers (--vz-border-subtle)
+
+  // Text hierarchy
+  textPrimary: '#FFFFFF',
+  // Headings, important (--text-primary)
+  textSecondary: '#9CA3AF',
+  // Body text (--text-secondary)
+  textTertiary: '#6B7280',
+  // 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'
+};
 function supportsColorDefault() {
   // Respect NO_COLOR: https://no-color.org/
   if ('NO_COLOR' in process.env) return false;
 
   // Respect FORCE_COLOR if set to a truthy value (except '0')
   if ('FORCE_COLOR' in process.env) {
-    const v = process.env.FORCE_COLOR;
+    let v = process.env.FORCE_COLOR;
     if (v && v !== '0') return true;
     if (v === '0') return false;
   }
 
+  // COLORTERM indicates truecolor support
+  if (process.env.COLORTERM === 'truecolor' || process.env.COLORTERM === '24bit') {
+    return true;
+  }
+
   // If stdout is not a TTY, assume no color
   if (!process.stdout || !process.stdout.isTTY) return false;
 
   // Prefer getColorDepth when available
   try {
-    const depth = typeof process.stdout.getColorDepth === 'function' ? process.stdout.getColorDepth() : 1;
+    let depth = typeof process.stdout.getColorDepth === 'function' ? process.stdout.getColorDepth() : 1;
     return depth && depth > 1;
   } catch {
     // Fallback heuristic
     return true;
   }
 }
-function styleFn(open, close, enabled) {
-  return (input = '') => {
-    const str = String(input);
-    if (!enabled) return str;
-    return open + str + close;
-  };
-}
+
+/**
+ * Create a colors API with optional color support detection
+ * @param {Object} options - Configuration options
+ * @param {boolean} [options.useColor] - Force color on/off (auto-detect if undefined)
+ * @returns {Object} Colors API with styling functions
+ */
 export function createColors(options = {}) {
-  const enabled = options.useColor !== undefined ? !!options.useColor : supportsColorDefault();
-  const codes = {
-    reset: ['\x1b[0m', ''],
-    bold: ['\x1b[1m', '\x1b[22m'],
-    dim: ['\x1b[2m', '\x1b[22m'],
-    italic: ['\x1b[3m', '\x1b[23m'],
-    underline: ['\x1b[4m', '\x1b[24m'],
-    strikethrough: ['\x1b[9m', '\x1b[29m'],
-    red: ['\x1b[31m', '\x1b[39m'],
-    green: ['\x1b[32m', '\x1b[39m'],
-    yellow: ['\x1b[33m', '\x1b[39m'],
-    blue: ['\x1b[34m', '\x1b[39m'],
-    magenta: ['\x1b[35m', '\x1b[39m'],
-    cyan: ['\x1b[36m', '\x1b[39m'],
-    white: ['\x1b[37m', '\x1b[39m'],
-    gray: ['\x1b[90m', '\x1b[39m']
-  };
-  const api = {};
-  for (const [name, [open, close]] of Object.entries(codes)) {
-    api[name] = styleFn(open, close || '\x1b[0m', enabled);
+  let enabled = options.useColor !== undefined ? !!options.useColor : supportsColorDefault();
+  if (!enabled) {
+    // Return no-op functions when color disabled
+    let noop = (input = '') => String(input);
+    return {
+      // Modifiers
+      reset: noop,
+      bold: noop,
+      dim: noop,
+      italic: noop,
+      underline: noop,
+      strikethrough: noop,
+      // Colors
+      red: noop,
+      green: noop,
+      yellow: noop,
+      blue: noop,
+      magenta: noop,
+      cyan: noop,
+      white: noop,
+      gray: noop,
+      black: noop,
+      // Semantic aliases
+      success: noop,
+      error: noop,
+      warning: noop,
+      info: noop,
+      // Extended colors (return noop factory for chaining)
+      rgb: () => noop,
+      hex: () => noop,
+      bgRgb: () => noop,
+      bgHex: () => noop,
+      // Observatory brand colors (noop versions)
+      brand: {
+        // Primary
+        amber: noop,
+        amberLight: noop,
+        // Semantic accents
+        success: noop,
+        warning: noop,
+        danger: noop,
+        info: noop,
+        // Text hierarchy
+        textPrimary: noop,
+        textSecondary: noop,
+        textTertiary: noop,
+        textMuted: noop,
+        // Background variants
+        bgAmber: noop,
+        bgSuccess: noop,
+        bgWarning: noop,
+        bgDanger: noop,
+        bgInfo: noop,
+        // Legacy aliases
+        green: noop,
+        red: noop,
+        cyan: noop,
+        slate: noop
+      }
+    };
   }
-
-  // Semantic aliases
-  api.success = api.green;
-  api.error = api.red;
-  api.warning = api.yellow;
-  api.info = api.blue;
-  return api;
+  return {
+    // Modifiers
+    reset: ansis.reset,
+    bold: ansis.bold,
+    dim: ansis.dim,
+    italic: ansis.italic,
+    underline: ansis.underline,
+    strikethrough: ansis.strikethrough,
+    // Basic ANSI colors (fallback)
+    red: ansis.red,
+    green: ansis.green,
+    yellow: ansis.yellow,
+    blue: ansis.blue,
+    magenta: ansis.magenta,
+    cyan: ansis.cyan,
+    white: ansis.white,
+    gray: ansis.gray,
+    black: ansis.black,
+    // Semantic aliases (basic)
+    success: ansis.green,
+    error: ansis.red,
+    warning: ansis.yellow,
+    info: ansis.blue,
+    // Extended colors for rich styling
+    rgb: ansis.rgb,
+    hex: ansis.hex,
+    bgRgb: ansis.bgRgb,
+    bgHex: ansis.bgHex,
+    // Observatory brand colors (Truecolor) - aligned with design system
+    brand: {
+      // Primary brand color
+      amber: ansis.hex(brand.amber),
+      amberLight: ansis.hex(brand.amberLight),
+      // Semantic accents
+      success: ansis.hex(brand.success),
+      warning: ansis.hex(brand.warning),
+      danger: ansis.hex(brand.danger),
+      info: ansis.hex(brand.info),
+      // Text hierarchy
+      textPrimary: ansis.hex(brand.textPrimary),
+      textSecondary: ansis.hex(brand.textSecondary),
+      textTertiary: ansis.hex(brand.textTertiary),
+      textMuted: ansis.hex(brand.textMuted),
+      // Background variants
+      bgAmber: ansis.bgHex(brand.amber),
+      bgSuccess: ansis.bgHex(brand.success),
+      bgWarning: ansis.bgHex(brand.warning),
+      bgDanger: ansis.bgHex(brand.danger),
+      bgInfo: ansis.bgHex(brand.info),
+      // Legacy aliases (backward compatibility)
+      green: ansis.hex(brand.green),
+      red: ansis.hex(brand.red),
+      cyan: ansis.hex(brand.cyan),
+      slate: ansis.hex(brand.slate)
+    }
+  };
 }
 
 // Default export with auto-detected color support
-export const colors = createColors();
+export let colors = createColors();

package/dist/utils/config-loader.js

@@ -91,10 +91,7 @@ export async function loadConfig(configPath = null, cliOverrides = {}) {
       config.apiKey = token;
       config.projectSlug = projectMapping.projectSlug;
       config.organizationSlug = projectMapping.organizationSlug;
-      output.debug('Using project mapping', {
-        project: projectMapping.projectSlug,
-        org: projectMapping.organizationSlug
-      });
+      output.debug('config', `linked to ${projectMapping.projectSlug} (${projectMapping.organizationSlug})`);
     }
   }
 
@@ -104,14 +101,14 @@ export async function loadConfig(configPath = null, cliOverrides = {}) {
   const envParallelId = getParallelId();
   if (envApiKey) {
     config.apiKey = envApiKey;
-    output.debug('Using API token from environment');
+    output.debug('config', 'using token from environment');
   }
   if (envApiUrl !== 'https://app.vizzly.dev') config.apiUrl = envApiUrl;
   if (envParallelId) config.parallelId = envParallelId;
 
   // 5. Apply CLI overrides (highest priority)
   if (cliOverrides.token) {
-    output.debug('Using API token from --token flag');
+    output.debug('config', 'using token from --token flag');
   }
   applyCLIOverrides(config, cliOverrides);
   return config;

package/dist/utils/context.js

@@ -0,0 +1,228 @@
+/**
+ * Dynamic context detection for CLI commands
+ *
+ * Detects the current state of Vizzly in the working directory:
+ * - TDD server status
+ * - Project configuration
+ * - Authentication status
+ * - Baseline counts
+ */
+
+import { existsSync, readFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { dirname, join } from 'node:path';
+
+/**
+ * Get dynamic context about the current Vizzly state
+ * Returns an array of context items with type, label, and value
+ *
+ * @returns {Array<{type: 'success'|'warning'|'info', label: string, value: string}>}
+ */
+export function getContext() {
+  let items = [];
+  try {
+    let cwd = process.cwd();
+    let globalConfigPath = join(process.env.VIZZLY_HOME || join(homedir(), '.vizzly'), 'config.json');
+
+    // Load global config once
+    let globalConfig = {};
+    try {
+      if (existsSync(globalConfigPath)) {
+        globalConfig = JSON.parse(readFileSync(globalConfigPath, 'utf8'));
+      }
+    } catch {
+      // Ignore
+    }
+
+    // Check for vizzly.config.js (project config)
+    let hasProjectConfig = existsSync(join(cwd, 'vizzly.config.js'));
+
+    // Check for .vizzly directory (TDD baselines)
+    let baselineCount = 0;
+    try {
+      let metaPath = join(cwd, '.vizzly', 'baselines', 'metadata.json');
+      if (existsSync(metaPath)) {
+        let meta = JSON.parse(readFileSync(metaPath, 'utf8'));
+        baselineCount = meta.screenshots?.length || 0;
+      }
+    } catch {
+      // Ignore
+    }
+
+    // Check for TDD server running
+    let serverRunning = false;
+    let serverPort = null;
+    try {
+      let serverFile = join(cwd, '.vizzly', 'server.json');
+      if (existsSync(serverFile)) {
+        let serverInfo = JSON.parse(readFileSync(serverFile, 'utf8'));
+        serverPort = serverInfo.port;
+        serverRunning = true;
+      }
+    } catch {
+      // Ignore
+    }
+
+    // Check for project mapping (from vizzly project:select)
+    // Traverse up to find project config, with bounds check for Windows compatibility
+    let projectMapping = null;
+    let checkPath = cwd;
+    let prevPath = null;
+    while (checkPath && checkPath !== prevPath) {
+      if (globalConfig.projects?.[checkPath]) {
+        projectMapping = globalConfig.projects[checkPath];
+        break;
+      }
+      prevPath = checkPath;
+      checkPath = dirname(checkPath);
+    }
+
+    // Check for OAuth login (from vizzly login)
+    let isLoggedIn = !!globalConfig.auth?.accessToken;
+    let userName = globalConfig.auth?.user?.name || globalConfig.auth?.user?.email;
+
+    // Check for env token
+    let hasEnvToken = !!process.env.VIZZLY_TOKEN;
+
+    // Build context items - prioritize most useful info
+    if (serverRunning) {
+      items.push({
+        type: 'success',
+        label: 'TDD Server',
+        value: `running on :${serverPort}`
+      });
+    }
+    if (projectMapping) {
+      items.push({
+        type: 'success',
+        label: 'Project',
+        value: `${projectMapping.projectName} (${projectMapping.organizationSlug})`
+      });
+    } else if (isLoggedIn && userName) {
+      items.push({
+        type: 'success',
+        label: 'Logged in',
+        value: userName
+      });
+    } else if (hasEnvToken) {
+      items.push({
+        type: 'success',
+        label: 'API Token',
+        value: 'via VIZZLY_TOKEN'
+      });
+    } else {
+      items.push({
+        type: 'info',
+        label: 'Not connected',
+        value: 'run vizzly login or project:select'
+      });
+    }
+    if (baselineCount > 0) {
+      items.push({
+        type: 'success',
+        label: 'Baselines',
+        value: `${baselineCount} screenshots`
+      });
+    }
+    if (!hasProjectConfig && !serverRunning && baselineCount === 0) {
+      // Only show "no config" hint if there's nothing else useful
+      items.push({
+        type: 'info',
+        label: 'Get started',
+        value: 'run vizzly init'
+      });
+    }
+  } catch {
+    // If anything fails, just return empty - context is optional
+  }
+  return items;
+}
+
+/**
+ * Get detailed context with raw values (for doctor command)
+ * Returns more detailed information suitable for diagnostics
+ *
+ * @returns {Object} Detailed context object
+ */
+export function getDetailedContext() {
+  let cwd = process.cwd();
+  let globalConfigPath = join(process.env.VIZZLY_HOME || join(homedir(), '.vizzly'), 'config.json');
+  let context = {
+    tddServer: {
+      running: false,
+      port: null
+    },
+    project: {
+      hasConfig: false,
+      mapping: null
+    },
+    auth: {
+      loggedIn: false,
+      userName: null,
+      hasEnvToken: false
+    },
+    baselines: {
+      count: 0,
+      path: null
+    }
+  };
+  try {
+    // Load global config
+    let globalConfig = {};
+    try {
+      if (existsSync(globalConfigPath)) {
+        globalConfig = JSON.parse(readFileSync(globalConfigPath, 'utf8'));
+      }
+    } catch {
+      // Ignore
+    }
+
+    // Check for vizzly.config.js
+    context.project.hasConfig = existsSync(join(cwd, 'vizzly.config.js'));
+
+    // Check for baselines
+    try {
+      let metaPath = join(cwd, '.vizzly', 'baselines', 'metadata.json');
+      if (existsSync(metaPath)) {
+        let meta = JSON.parse(readFileSync(metaPath, 'utf8'));
+        context.baselines.count = meta.screenshots?.length || 0;
+        context.baselines.path = join(cwd, '.vizzly', 'baselines');
+      }
+    } catch {
+      // Ignore
+    }
+
+    // Check for TDD server
+    try {
+      let serverFile = join(cwd, '.vizzly', 'server.json');
+      if (existsSync(serverFile)) {
+        let serverInfo = JSON.parse(readFileSync(serverFile, 'utf8'));
+        context.tddServer.running = true;
+        context.tddServer.port = serverInfo.port;
+      }
+    } catch {
+      // Ignore
+    }
+
+    // Check for project mapping
+    // Traverse up to find project config, with bounds check for Windows compatibility
+    let checkPath = cwd;
+    let prevPath = null;
+    while (checkPath && checkPath !== prevPath) {
+      if (globalConfig.projects?.[checkPath]) {
+        context.project.mapping = globalConfig.projects[checkPath];
+        break;
+      }
+      prevPath = checkPath;
+      checkPath = dirname(checkPath);
+    }
+
+    // Check auth status
+    context.auth.loggedIn = !!globalConfig.auth?.accessToken;
+    context.auth.userName = globalConfig.auth?.user?.name || globalConfig.auth?.user?.email;
+    context.auth.hasEnvToken = !!process.env.VIZZLY_TOKEN;
+  } catch {
+    // If anything fails, return defaults
+  }
+  return context;
+}