@buoy-design/cli 0.3.32 → 0.3.34

package/dist/output/reports.sync-conflict-20260305-211951-6PCZ3ZU.js

@@ -0,0 +1,393 @@
+// apps/cli/src/output/reports.ts
+// Visual 1-page reports for design system health
+import chalk from 'chalk';
+import { highlight } from './visuals.js';
+// ============================================================================
+// Helper Functions
+// ============================================================================
+function section(title, width = 78) {
+    const line = '─'.repeat(width - title.length - 4);
+    return `┌─ ${title} ${line}┐`;
+}
+function sectionEnd(width = 78) {
+    return `└${'─'.repeat(width - 2)}┘`;
+}
+function progressBar(percent, width = 20) {
+    const filled = Math.round((percent / 100) * width);
+    const empty = width - filled;
+    return highlight.success('\u2588'.repeat(filled)) + highlight.dim('\u2591'.repeat(empty));
+}
+function healthDots(percent) {
+    const filled = Math.round(percent / 20);
+    const empty = 5 - filled;
+    return highlight.success('\u25CF'.repeat(filled)) + highlight.dim('\u25CB'.repeat(empty));
+}
+function trendArrow(trend) {
+    if (typeof trend === 'number') {
+        if (trend > 0)
+            return chalk.green(`↑ ${trend}%`);
+        if (trend < 0)
+            return chalk.red(`↓ ${Math.abs(trend)}%`);
+        return chalk.dim('→ 0%');
+    }
+    switch (trend) {
+        case 'improving': return chalk.green('↓ improving');
+        case 'declining': return chalk.red('↑ declining');
+        default: return chalk.dim('→ stable');
+    }
+}
+function formatMoney(amount) {
+    return '$' + amount.toLocaleString('en-US');
+}
+function formatDate(date) {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24)
+        return `${diffHours}hr ago`;
+    return date.toLocaleDateString();
+}
+// ============================================================================
+// Developer Daily Brief
+// ============================================================================
+export function formatDeveloperBrief(data) {
+    const lines = [];
+    const width = 80;
+    // Header
+    lines.push('');
+    lines.push(chalk.bold.cyan('╭' + '─'.repeat(width - 2) + '╮'));
+    lines.push(chalk.bold.cyan('│') + '  ' + chalk.bold('BUOY DEVELOPER BRIEF') + ' '.repeat(width - 46) + chalk.dim(`${data.branch.target} ← ${data.branch.source}`) + '  ' + chalk.bold.cyan('│'));
+    lines.push(chalk.bold.cyan('│') + '  ' + chalk.dim('Your changes vs. design system') + ' '.repeat(width - 57) + chalk.dim(`Generated: just now`) + '  ' + chalk.bold.cyan('│'));
+    lines.push(chalk.bold.cyan('╰' + '─'.repeat(width - 2) + '╯'));
+    lines.push('');
+    // Your Changes Section
+    lines.push(section('YOUR CHANGES', width));
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push('│  ' + `Files touched: ${chalk.bold(data.filesChanged.length)}`.padEnd(width - 4) + '│');
+    lines.push('│  ' + `Components modified: ${chalk.bold(data.componentsModified.length)}`.padEnd(width - 4) + '│');
+    // Show component status indicators
+    if (data.componentsModified.length > 0) {
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        const componentLine = data.componentsModified.slice(0, 3).map(comp => {
+            const hasDrift = data.drifts.some(d => d.source.entityName === comp);
+            if (hasDrift) {
+                return `  ${chalk.yellow('⚠')} ${comp}`;
+            }
+            return `  ${chalk.green('✓')} ${comp} ${chalk.dim('Clean')}`;
+        }).join('    ');
+        lines.push('│  ' + componentLine.padEnd(width - 4 + 20) + '│'); // Extra padding for ANSI
+    }
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(sectionEnd(width));
+    lines.push('');
+    // Action Needed Section
+    if (data.drifts.length > 0) {
+        lines.push(section('ACTION NEEDED', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        for (const drift of data.drifts.slice(0, 3)) {
+            const icon = drift.severity === 'critical' ? chalk.red('!') : chalk.yellow('⚠');
+            lines.push(`│  ${icon}  ${chalk.bold(drift.source.location || drift.source.entityName)}`.padEnd(width + 8) + '│');
+            lines.push(`│     └─ ${drift.message}`.padEnd(width - 2) + '│');
+            // Show fix suggestion
+            if (drift.type === 'hardcoded-value') {
+                lines.push(`│     └─ ${chalk.dim('Use:')} ${chalk.cyan('var(--color-primary)')} ${chalk.dim('or theme token')}`.padEnd(width + 15) + '│');
+            }
+            lines.push('│' + ' '.repeat(width - 2) + '│');
+        }
+        // Quick actions
+        lines.push('│  ' + chalk.bold.cyan('Quick actions:') + ' '.repeat(width - 18) + '│');
+        lines.push('│  ' + `  ${chalk.cyan('buoy drift fix --interactive')}    ${chalk.dim('Fix with guided prompts')}`.padEnd(width + 10) + '│');
+        lines.push('│  ' + `  ${chalk.cyan('buoy ignore <file>:<line>')} ${chalk.dim('Mark as intentional')}`.padEnd(width + 10) + '│');
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Components You're Using
+    const healthEntries = Object.entries(data.componentHealth).slice(0, 3);
+    if (healthEntries.length > 0) {
+        lines.push(section('COMPONENTS YOU\'RE USING', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        const healthLine = healthEntries.map(([name, stats]) => {
+            return `  ${chalk.bold(name)} ${healthDots(stats.health)} ${stats.health}%`;
+        }).join('   ');
+        lines.push('│' + healthLine.padEnd(width + 25) + '│');
+        const usageLine = healthEntries.map(([_name, stats]) => {
+            return `  └─ ${stats.usageCount} uses, ${stats.driftCount} drift`;
+        }).join('   ');
+        lines.push('│' + chalk.dim(usageLine).padEnd(width + 10) + '│');
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Quick Stats
+    lines.push(section('QUICK STATS', width));
+    const statsLine = `│  Your drift rate: ${chalk.bold(data.personalStats.driftRate + '%')}  │  Team avg: ${chalk.bold(data.personalStats.teamAverage + '%')}  │  Trend: ${trendArrow(data.personalStats.trend)}`;
+    lines.push(statsLine.padEnd(width + 25) + '│');
+    lines.push(sectionEnd(width));
+    return lines.join('\n');
+}
+// ============================================================================
+// Team Dashboard
+// ============================================================================
+export function formatTeamDashboard(data) {
+    const lines = [];
+    const width = 80;
+    // Header
+    lines.push('');
+    lines.push(chalk.bold.blue('╭' + '─'.repeat(width - 2) + '╮'));
+    lines.push(chalk.bold.blue('│') + '  ' + chalk.bold('DESIGN SYSTEM HEALTH REPORT') + ' '.repeat(width - 54) + chalk.dim(data.period.label) + '  ' + chalk.bold.blue('│'));
+    lines.push(chalk.bold.blue('│') + '  ' + chalk.dim(`@acme/design-system v${data.version}`) + ' '.repeat(width - 50) + chalk.dim('vs. last week') + '  ' + chalk.bold.blue('│'));
+    lines.push(chalk.bold.blue('╰' + '─'.repeat(width - 2) + '╯'));
+    lines.push('');
+    // System Health Section
+    lines.push(section('SYSTEM HEALTH', width));
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    // Health metrics
+    const tokenBar = progressBar(data.health.tokenCoverage.current, 14);
+    const componentBar = progressBar(data.health.componentAdoption.current, 14);
+    const patternBar = progressBar(data.health.patternConsistency.current, 14);
+    lines.push(`│     ${chalk.bold('TOKEN COVERAGE')}          ${chalk.bold('COMPONENT ADOPTION')}         ${chalk.bold('PATTERN CONSISTENCY')}   │`);
+    lines.push(`│     ${tokenBar} ${data.health.tokenCoverage.current}%      ${componentBar} ${data.health.componentAdoption.current}%       ${patternBar} ${data.health.patternConsistency.current}%   │`);
+    lines.push(`│          ${trendArrow(data.health.tokenCoverage.change)}                    ${trendArrow(data.health.componentAdoption.change)}                       ${trendArrow(data.health.patternConsistency.change)}             │`);
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(`│     Components: ${data.totals.components}           Instances: ${data.totals.instances.toLocaleString()}    Active repos: ${data.totals.repos}     │`);
+    lines.push(`│     Tokens: ${data.totals.tokens}               Drift signals: ${data.totals.driftSignals}       Contributors: ${data.totals.contributors}    │`);
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(sectionEnd(width));
+    lines.push('');
+    // Drift Distribution
+    const byTypeEntries = Object.entries(data.driftDistribution.byType).slice(0, 5);
+    const byTeamEntries = Object.entries(data.driftDistribution.byTeam).slice(0, 5);
+    if (byTypeEntries.length > 0 || byTeamEntries.length > 0) {
+        lines.push(section('DRIFT DISTRIBUTION', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(`│  ${chalk.bold('By Type')}                              ${chalk.bold('By Team')}`.padEnd(width + 5) + '│');
+        lines.push(`│  ${'─'.repeat(25)}                ${'─'.repeat(25)}`.padEnd(width - 2) + '│');
+        const maxRows = Math.max(byTypeEntries.length, byTeamEntries.length);
+        for (let i = 0; i < maxRows; i++) {
+            const typeEntry = byTypeEntries[i];
+            const teamEntry = byTeamEntries[i];
+            const typePart = typeEntry
+                ? `${typeEntry[0].padEnd(18)} ${chalk.cyan('█'.repeat(Math.min(8, Math.ceil(typeEntry[1] / 50))))} ${typeEntry[1]}`
+                : '';
+            const teamPart = teamEntry
+                ? `${teamEntry[0].padEnd(15)} ${chalk.yellow('█'.repeat(Math.min(8, Math.ceil(teamEntry[1] / 50))))} ${teamEntry[1]}`
+                : '';
+            lines.push(`│  ${typePart.padEnd(38)}      ${teamPart}`.padEnd(width + 15) + '│');
+        }
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Component Health
+    const healthy = data.componentHealth.filter(c => c.category === 'healthy').slice(0, 4);
+    const attention = data.componentHealth.filter(c => c.category === 'attention').slice(0, 4);
+    const critical = data.componentHealth.filter(c => c.category === 'critical').slice(0, 2);
+    if (data.componentHealth.length > 0) {
+        lines.push(section('COMPONENT HEALTH', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(`│  ${chalk.green.bold('✓ HEALTHY (>90%)')}        ${chalk.yellow.bold('⚠ ATTENTION (<70%)')}         ${chalk.red.bold('✗ CRITICAL (<50%)')}       │`);
+        lines.push(`│  ${'───────────────'}        ${'─────────────────'}          ${'────────────────'}        │`);
+        const maxRows = Math.max(healthy.length, attention.length, critical.length);
+        for (let i = 0; i < maxRows; i++) {
+            const h = healthy[i];
+            const a = attention[i];
+            const c = critical[i];
+            const hPart = h ? `${h.name.padEnd(12)} ${h.health}%` : '';
+            const aPart = a ? `${a.name.padEnd(12)} ${a.health}%` : '';
+            const cPart = c ? `${c.name.padEnd(12)} ${c.health}%` : '';
+            lines.push(`│  ${chalk.green(hPart.padEnd(18))}        ${chalk.yellow(aPart.padEnd(18))}         ${chalk.red(cPart.padEnd(18))}       │`);
+        }
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Emerging Patterns
+    if (data.emergingPatterns.length > 0) {
+        lines.push(section('EMERGING PATTERNS', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        for (const pattern of data.emergingPatterns.slice(0, 3)) {
+            lines.push(`│  ${chalk.cyan('🆕')} ${chalk.bold(pattern.name)}    ${pattern.instances} instances across ${pattern.repos} repos    Status: ${chalk.yellow(pattern.status)}`.padEnd(width + 10) + '│');
+            lines.push(`│     First seen: ${pattern.firstSeen.toLocaleDateString()}   Authors: ${pattern.authors.join(', ')}`.padEnd(width - 2) + '│');
+            lines.push('│' + ' '.repeat(width - 2) + '│');
+        }
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Actions
+    if (data.actions.length > 0) {
+        lines.push(section('ACTIONS', width));
+        data.actions.forEach((action, i) => {
+            lines.push(`│  ${i + 1}. ${action}`.padEnd(width - 2) + '│');
+        });
+        lines.push(sectionEnd(width));
+    }
+    return lines.join('\n');
+}
+// ============================================================================
+// Executive Summary
+// ============================================================================
+export function formatExecutiveSummary(data) {
+    const lines = [];
+    const width = 80;
+    // Header
+    lines.push('');
+    lines.push(chalk.bold.magenta('╭' + '─'.repeat(width - 2) + '╮'));
+    lines.push(chalk.bold.magenta('│') + '  ' + chalk.bold('DESIGN SYSTEM EXECUTIVE SUMMARY') + ' '.repeat(width - 52) + chalk.dim(data.period.label) + '  ' + chalk.bold.magenta('│'));
+    lines.push(chalk.bold.magenta('│') + '  ' + chalk.dim('Design-Development Alignment Report') + ' '.repeat(width - 41) + chalk.bold.magenta('│'));
+    lines.push(chalk.bold.magenta('╰' + '─'.repeat(width - 2) + '╯'));
+    lines.push('');
+    // The Headline
+    lines.push(section('THE HEADLINE', width));
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    const alignmentBar = progressBar(data.alignment.current, 30);
+    lines.push(`│     ${alignmentBar}  ${chalk.bold.green(data.alignment.current + '% ALIGNED')}`.padEnd(width + 15) + '│');
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(`│     "${data.alignment.current}% of shipped code matches design intent. Up from ${data.alignment.previous}% last period."`.padEnd(width - 2) + '│');
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(sectionEnd(width));
+    lines.push('');
+    // Business Impact
+    lines.push(section('BUSINESS IMPACT', width));
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(`│     ${chalk.bold('DESIGN REVIEW TIME')}          ${chalk.bold('DEV REWORK REDUCTION')}       ${chalk.bold('BRAND CONSISTENCY')}   │`);
+    lines.push(`│     ${chalk.green('↓ ' + data.impact.designReviewTime.reduction + '%')}                       ${chalk.green('↓ ' + data.impact.devRework.reduction + '%')}                      ${chalk.green('↑ ' + data.impact.brandConsistency.increase + '%')}            │`);
+    lines.push(`│     ${data.impact.designReviewTime.from} → ${data.impact.designReviewTime.to} ${data.impact.designReviewTime.unit}     ${data.impact.devRework.from} → ${data.impact.devRework.to} ${data.impact.devRework.unit}        NPS: ${data.impact.brandConsistency.nps.from} → ${data.impact.brandConsistency.nps.to}       │`);
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(`│     Estimated savings: ${chalk.bold.green(formatMoney(data.impact.estimatedSavings))} in reduced rework and review cycles`.padEnd(width - 2) + '│');
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(sectionEnd(width));
+    lines.push('');
+    // Adoption Trajectory
+    lines.push(section('ADOPTION TRAJECTORY', width));
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(`│  At current velocity: ${chalk.bold(data.trajectory.projected + '%')} alignment achievable by ${chalk.bold(data.trajectory.targetDate)}`.padEnd(width - 2) + '│');
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(sectionEnd(width));
+    lines.push('');
+    // Risk Areas
+    if (data.risks.length > 0) {
+        lines.push(section('RISK AREAS', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        for (const risk of data.risks) {
+            lines.push(`│  ${chalk.yellow('⚠')} ${chalk.bold(risk.title)}`.padEnd(width + 5) + '│');
+            lines.push(`│    ${risk.description}`.padEnd(width - 2) + '│');
+            lines.push(`│    ${chalk.dim('Recommendation:')} ${risk.recommendation}`.padEnd(width - 2) + '│');
+            lines.push('│' + ' '.repeat(width - 2) + '│');
+        }
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Key Decisions Needed
+    if (data.decisions.length > 0) {
+        lines.push(section('KEY DECISIONS NEEDED', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        data.decisions.forEach((decision, i) => {
+            lines.push(`│  ${i + 1}. ${decision}`.padEnd(width - 2) + '│');
+        });
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Team Performance
+    if (data.teamPerformance.leading.length > 0 || data.teamPerformance.needingSupport.length > 0) {
+        const leadingPart = data.teamPerformance.leading.slice(0, 3).map(t => `${chalk.green('🏆')} ${t.name}: ${t.alignment}%`).join('   ');
+        const supportPart = data.teamPerformance.needingSupport.slice(0, 3).map(t => `${chalk.yellow('🔧')} ${t.name}: ${t.alignment}% (${t.reason})`).join('   ');
+        lines.push(`┌─ TEAMS LEADING ──────────────────┬─ TEAMS NEEDING SUPPORT ──────────────────┐`);
+        lines.push(`│  ${leadingPart}`.padEnd(36) + `│  ${supportPart}`.padEnd(45) + '│');
+        lines.push(`└──────────────────────────────────┴──────────────────────────────────────────┘`);
+    }
+    return lines.join('\n');
+}
+// ============================================================================
+// Reality Mirror (Designer Report)
+// ============================================================================
+export function formatRealityMirror(data) {
+    const lines = [];
+    const width = 80;
+    // Header
+    lines.push('');
+    lines.push(chalk.bold.yellow('╭' + '─'.repeat(width - 2) + '╮'));
+    lines.push(chalk.bold.yellow('│') + '  ' + chalk.bold('REALITY MIRROR') + ' '.repeat(width - 42) + chalk.dim(data.designFile) + '  ' + chalk.bold.yellow('│'));
+    lines.push(chalk.bold.yellow('│') + '  ' + chalk.dim('What you designed vs. what shipped') + ' '.repeat(width - 56) + chalk.dim(`Last sync: ${formatDate(data.lastSync)}`) + '  ' + chalk.bold.yellow('│'));
+    lines.push(chalk.bold.yellow('╰' + '─'.repeat(width - 2) + '╯'));
+    lines.push('');
+    // Fidelity Score
+    lines.push(section('FIDELITY SCORE', width));
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    const fidelityBar = progressBar(data.fidelityScore, 20);
+    const fidelityColor = data.fidelityScore >= 90 ? chalk.green : data.fidelityScore >= 70 ? chalk.yellow : chalk.red;
+    lines.push(`│     ${chalk.bold('YOUR DESIGN')}              ${chalk.bold('SHIPPED CODE')}              ${chalk.bold('MATCH')}         │`);
+    lines.push(`│     ┌─────────────┐          ┌─────────────┐          ┌───────────┐   │`);
+    lines.push(`│     │  ${chalk.green('▓▓▓▓▓▓▓▓▓')}  │    →     │  ${fidelityColor('▓▓▓▓▓' + '░'.repeat(4))}  │    =     │  ${fidelityColor.bold(data.fidelityScore + '%')}      │   │`);
+    lines.push(`│     └─────────────┘          └─────────────┘          │  ${fidelityBar.slice(0, 10)}│   │`);
+    lines.push(`│                                                       └───────────┘   │`);
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    if (data.fidelityScore === 100) {
+        lines.push(`│     "${chalk.green('100% of your design intent made it to production unchanged. Perfect match!')}"`.padEnd(width - 2) + '│');
+    }
+    else {
+        lines.push(`│     "${data.fidelityScore}% of your design intent made it to production unchanged."`.padEnd(width - 2) + '│');
+    }
+    lines.push('│' + ' '.repeat(width - 2) + '│');
+    lines.push(sectionEnd(width));
+    lines.push('');
+    // What Changed
+    if (data.changes.length > 0) {
+        lines.push(section('WHAT CHANGED', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        for (const change of data.changes) {
+            lines.push(`│  ${chalk.bold(change.category)}`.padEnd(width + 5) + '│');
+            lines.push(`│  ${'─'.repeat(width - 4)}`.padEnd(width - 2) + '│');
+            lines.push(`│  Your value    →   Shipped as          Why it matters`.padEnd(width - 2) + '│');
+            const designedColor = change.category === 'COLORS' ? chalk.bgHex(change.designed.replace('#', '')).black(' ') : '';
+            const shippedColor = change.category === 'COLORS' ? chalk.bgHex(change.shipped.replace('#', '')).black(' ') : '';
+            lines.push(`│  ${designedColor} ${change.designed}        ${shippedColor} ${change.shipped}        ${change.impact}`.padEnd(width + 10) + '│');
+            lines.push('│' + ' '.repeat(width - 2) + '│');
+        }
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Pattern Drift
+    if (data.patternDrift.length > 0) {
+        lines.push(section('PATTERN DRIFT', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(`│  ${chalk.bold('Component')}        ${chalk.bold('Your Intent')}              ${chalk.bold('Shipped')}`.padEnd(width - 2) + '│');
+        lines.push(`│  ${'─'.repeat(width - 4)}`.padEnd(width - 2) + '│');
+        for (const pattern of data.patternDrift) {
+            lines.push(`│  ${chalk.bold(pattern.component)}`.padEnd(width + 5) + '│');
+            lines.push(`│                   ${pattern.designedAs}`.padEnd(width - 2) + '│');
+            lines.push(`│                   ${chalk.dim('→')} ${pattern.shippedAs}`.padEnd(width - 2) + '│');
+            lines.push('│' + ' '.repeat(width - 2) + '│');
+            lines.push(`│  ${chalk.dim('User Impact:')} ${pattern.userImpact}`.padEnd(width - 2) + '│');
+            if (pattern.devNote) {
+                lines.push(`│  ${chalk.dim('Dev Note:')} "${pattern.devNote.message}" - ${pattern.devNote.author}, ${pattern.devNote.date.toLocaleDateString()}`.padEnd(width - 2) + '│');
+            }
+            lines.push('│' + ' '.repeat(width - 2) + '│');
+        }
+        lines.push(sectionEnd(width));
+        lines.push('');
+    }
+    // Start a Conversation
+    if (data.conversations.length > 0) {
+        lines.push(section('START A CONVERSATION', width));
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(`│  These changes might be intentional improvements. Want to discuss?`.padEnd(width - 2) + '│');
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(`│  ┌${'─'.repeat(width - 6)}┐ │`);
+        for (const conv of data.conversations) {
+            const icon = conv.action === 'discuss' ? '💬' : conv.action === 'accept' ? '✓' : '↩';
+            const target = conv.target ? ` → ${conv.target}` : '';
+            lines.push(`│  │  ${icon} "${conv.label}"${target}`.padEnd(width - 2) + '│ │');
+        }
+        lines.push(`│  └${'─'.repeat(width - 6)}┘ │`);
+        lines.push('│' + ' '.repeat(width - 2) + '│');
+        lines.push(sectionEnd(width));
+    }
+    return lines.join('\n');
+}
+//# sourceMappingURL=reports.js.map

package/dist/output/visuals.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Visual Feedback System
+ *
+ * Centralized visual primitives for CLI output, inspired by react-doctor.
+ * Provides: highlighter, score bar, score gauge, buoy mascot, summary box,
+ * severity icons, and separator.
+ *
+ * All functions are pure (return strings, no side effects).
+ */
+import { type ChalkInstance } from 'chalk';
+export declare const highlight: {
+    readonly error: ChalkInstance;
+    readonly warn: ChalkInstance;
+    readonly info: ChalkInstance;
+    readonly success: ChalkInstance;
+    readonly dim: ChalkInstance;
+    readonly brand: ChalkInstance;
+};
+export interface ScoreThreshold {
+    color: ChalkInstance;
+    label: string;
+    state: 'good' | 'attention' | 'critical';
+}
+export declare function getScoreThreshold(score: number): ScoreThreshold;
+export declare function colorizeByScore(text: string, score: number): string;
+export declare function scoreBar(score: number): string;
+export declare function scoreGauge(score: number): string;
+export declare const severityIcon: {
+    readonly critical: string;
+    readonly warning: string;
+    readonly info: string;
+};
+export declare const driftSeverityIcon: {
+    readonly critical: string;
+    readonly warning: string;
+    readonly info: string;
+};
+export declare function buoyMascot(score: number): string;
+export interface SummaryBoxData {
+    score: number;
+    components: number;
+    tokens: number;
+    drifts: {
+        critical: number;
+        warning: number;
+        info: number;
+        total: number;
+    };
+    elapsed?: string;
+}
+export declare function summaryBox(data: SummaryBoxData): string;
+export declare function separator(width?: number): string;
+//# sourceMappingURL=visuals.d.ts.map

package/dist/output/visuals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visuals.d.ts","sourceRoot":"","sources":["../../src/output/visuals.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAc,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAMlD,eAAO,MAAM,SAAS;;;;;;;CAOZ,CAAC;AASX,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CAC1C;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAQ/D;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGnE;AAQD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM9C;AAMD,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIhD;AAMD,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAuCX,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAWhD;AAQD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA2BD,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CA2DvD;AAMD,wBAAgB,SAAS,CAAC,KAAK,GAAE,MAAW,GAAG,MAAM,CAEpD"}

package/dist/output/visuals.js

@@ -0,0 +1,194 @@
+/**
+ * Visual Feedback System
+ *
+ * Centralized visual primitives for CLI output, inspired by react-doctor.
+ * Provides: highlighter, score bar, score gauge, buoy mascot, summary box,
+ * severity icons, and separator.
+ *
+ * All functions are pure (return strings, no side effects).
+ */
+import chalk from 'chalk';
+// ============================================================================
+// Highlighter (Semantic Color Palette)
+// ============================================================================
+export const highlight = {
+    error: chalk.red,
+    warn: chalk.yellow,
+    info: chalk.cyan,
+    success: chalk.green,
+    dim: chalk.dim,
+    brand: chalk.cyan.bold,
+};
+// ============================================================================
+// Score Thresholds
+// ============================================================================
+const SCORE_GOOD_THRESHOLD = 75;
+const SCORE_ATTENTION_THRESHOLD = 50;
+export function getScoreThreshold(score) {
+    if (score >= SCORE_GOOD_THRESHOLD) {
+        return { color: highlight.success, label: 'Good', state: 'good' };
+    }
+    if (score >= SCORE_ATTENTION_THRESHOLD) {
+        return { color: highlight.warn, label: 'Needs attention', state: 'attention' };
+    }
+    return { color: highlight.error, label: 'Critical', state: 'critical' };
+}
+export function colorizeByScore(text, score) {
+    const { color } = getScoreThreshold(score);
+    return color(text);
+}
+// ============================================================================
+// Score Bar
+// ============================================================================
+const SCORE_BAR_WIDTH = 50;
+export function scoreBar(score) {
+    const clamped = Math.max(0, Math.min(100, Math.round(score)));
+    const filled = Math.round((clamped / 100) * SCORE_BAR_WIDTH);
+    const empty = SCORE_BAR_WIDTH - filled;
+    const { color } = getScoreThreshold(clamped);
+    return color('\u2588'.repeat(filled)) + highlight.dim('\u2591'.repeat(empty));
+}
+// ============================================================================
+// Score Gauge
+// ============================================================================
+export function scoreGauge(score) {
+    const clamped = Math.max(0, Math.min(100, Math.round(score)));
+    const { color, label } = getScoreThreshold(clamped);
+    return `${color(String(clamped))} / 100  ${color(label)}`;
+}
+// ============================================================================
+// Severity Icons
+// ============================================================================
+export const severityIcon = {
+    critical: highlight.error('\u2717'),
+    warning: highlight.warn('\u26A0'),
+    info: highlight.success('\u2714'),
+};
+export const driftSeverityIcon = {
+    critical: highlight.error('\u2717'),
+    warning: highlight.warn('\u26A0'),
+    info: chalk.blue('i'),
+};
+// ============================================================================
+// Buoy ASCII Mascot
+// ============================================================================
+const BUOY_GOOD = [
+    '     .         ',
+    '    /_\\        ',
+    '   / \u25E0 \\       ',
+    '  |\u2500\u2500\u2500\u2500\u2500|      ',
+    '  | BUOY|      ',
+    '  |\u2500\u2500\u2500\u2500\u2500|      ',
+    '~~~\\___/~~~~~~~',
+    '~~~~~~~~~~~~~~~',
+];
+const BUOY_ATTENTION = [
+    '        .      ',
+    '       /_\\     ',
+    '      / \u2022 \\    ',
+    '     |\u2500\u2500\u2500\u2500\u2500|   ',
+    '  ~~~| BUOY|   ',
+    '~~/~~|\u2500\u2500\u2500\u2500\u2500|~~',
+    '~~~~\\___/~~~~~~',
+    '~~~~~~~~~~~~~~~',
+];
+const BUOY_CRITICAL = [
+    '~~~~~~~~~~~~~~~',
+    '~~~~~.~~~~~~~~~',
+    '~~~~/\u2500\\~~~~~~~',
+    '~~~/ x \\~~~~~~',
+    '~~|\u2500\u2500\u2500\u2500\u2500|~~~~~',
+    '~~| BUOY|~~~~~',
+    '~~~~~~~~~~~~~~~',
+    '~~~~~~~~~~~~~~~',
+];
+export function buoyMascot(score) {
+    const { color, state } = getScoreThreshold(score);
+    const mascots = {
+        good: BUOY_GOOD,
+        attention: BUOY_ATTENTION,
+        critical: BUOY_CRITICAL,
+    };
+    const lines = mascots[state] ?? BUOY_GOOD;
+    return lines.map(line => color(line)).join('\n');
+}
+// ============================================================================
+// Framed Summary Box
+// ============================================================================
+const FRAME_WIDTH = 60;
+function stripAnsi(str) {
+    // eslint-disable-next-line no-control-regex
+    return str.replace(/\u001b\[[0-9;]*m/g, '');
+}
+function centerPad(text, width) {
+    const visibleLength = stripAnsi(text).length;
+    const padding = Math.max(0, width - visibleLength);
+    const leftPad = Math.floor(padding / 2);
+    const rightPad = padding - leftPad;
+    return ' '.repeat(leftPad) + text + ' '.repeat(rightPad);
+}
+function frameLine(content, width = FRAME_WIDTH) {
+    const inner = width - 2; // account for border chars
+    const visibleLen = stripAnsi(content).length;
+    const rightPad = Math.max(0, inner - visibleLen);
+    return highlight.dim('\u2502') + content + ' '.repeat(rightPad) + highlight.dim('\u2502');
+}
+function frameEmpty(width = FRAME_WIDTH) {
+    const inner = width - 2;
+    return highlight.dim('\u2502') + ' '.repeat(inner) + highlight.dim('\u2502');
+}
+export function summaryBox(data) {
+    const inner = FRAME_WIDTH - 2;
+    const lines = [];
+    // Top border
+    lines.push(highlight.dim('\u250C' + '\u2500'.repeat(inner) + '\u2510'));
+    // Mascot
+    const mascotLines = buoyMascot(data.score).split('\n');
+    for (const ml of mascotLines) {
+        lines.push(frameLine(centerPad(ml, inner), FRAME_WIDTH));
+    }
+    // Blank
+    lines.push(frameEmpty());
+    // Branding
+    lines.push(frameLine(centerPad(highlight.brand('BUOY'), inner), FRAME_WIDTH));
+    lines.push(frameLine(centerPad(highlight.dim('Design Drift Detection'), inner), FRAME_WIDTH));
+    // Blank
+    lines.push(frameEmpty());
+    // Score gauge
+    lines.push(frameLine(centerPad(scoreGauge(data.score), inner), FRAME_WIDTH));
+    // Blank
+    lines.push(frameEmpty());
+    // Score bar
+    lines.push(frameLine(centerPad(scoreBar(data.score), inner), FRAME_WIDTH));
+    // Blank
+    lines.push(frameEmpty());
+    // Summary stats
+    const driftParts = [];
+    if (data.drifts.critical > 0) {
+        driftParts.push(`${driftSeverityIcon.critical} ${data.drifts.critical} errors`);
+    }
+    if (data.drifts.warning > 0) {
+        driftParts.push(`${driftSeverityIcon.warning} ${data.drifts.warning} warnings`);
+    }
+    let statsLine;
+    if (data.drifts.total > 0) {
+        const driftStr = driftParts.join('  ');
+        const suffix = data.elapsed ? `  in ${data.elapsed}` : '';
+        statsLine = `${driftStr}  across ${data.components} components${suffix}`;
+    }
+    else {
+        const suffix = data.elapsed ? `  in ${data.elapsed}` : '';
+        statsLine = `${data.components} components  ${data.tokens} tokens${suffix}`;
+    }
+    lines.push(frameLine(centerPad(highlight.dim(statsLine), inner), FRAME_WIDTH));
+    // Bottom border
+    lines.push(highlight.dim('\u2514' + '\u2500'.repeat(inner) + '\u2518'));
+    return lines.join('\n');
+}
+// ============================================================================
+// Separator
+// ============================================================================
+export function separator(width = 40) {
+    return highlight.dim('\u2500'.repeat(width));
+}
+//# sourceMappingURL=visuals.js.map