@artemiskit/cli 0.1.4 → 0.1.6

package/src/__tests__/integration/ui.test.ts

@@ -0,0 +1,230 @@
+/**
+ * Integration tests for CLI UI components
+ */
+
+import { describe, expect, it } from 'bun:test';
+import {
+  renderProgressBar,
+  renderSummaryPanel,
+  renderError,
+  renderInfoBox,
+  createSpinner,
+  icons,
+  colors,
+  padText,
+  formatDuration,
+} from '../../ui/index.js';
+
+describe('UI Components', () => {
+  describe('renderProgressBar', () => {
+    it('should render empty progress bar at 0%', () => {
+      const bar = renderProgressBar(0, 10);
+      expect(bar).toContain('0/10');
+      expect(bar).toContain('0%');
+    });
+
+    it('should render full progress bar at 100%', () => {
+      const bar = renderProgressBar(10, 10);
+      expect(bar).toContain('10/10');
+      expect(bar).toContain('100%');
+    });
+
+    it('should render partial progress bar', () => {
+      const bar = renderProgressBar(5, 10);
+      expect(bar).toContain('5/10');
+      expect(bar).toContain('50%');
+    });
+
+    it('should respect custom width option', () => {
+      const bar = renderProgressBar(5, 10, { width: 30 });
+      expect(bar).toContain('5/10');
+    });
+
+    it('should handle edge case of 0 total', () => {
+      const bar = renderProgressBar(0, 0);
+      expect(bar).toBeDefined();
+    });
+  });
+
+  describe('renderSummaryPanel', () => {
+    it('should render all metrics', () => {
+      const panel = renderSummaryPanel({
+        passed: 8,
+        failed: 2,
+        skipped: 0,
+        successRate: 80,
+        duration: 12500,
+      });
+
+      expect(panel).toContain('8');
+      expect(panel).toContain('2');
+      expect(panel).toContain('80');
+      expect(panel).toContain('TEST RESULTS');
+    });
+
+    it('should use box drawing characters', () => {
+      const panel = renderSummaryPanel({
+        passed: 5,
+        failed: 0,
+        skipped: 1,
+        successRate: 100,
+        duration: 5000,
+      });
+
+      expect(panel).toContain('╔');
+      expect(panel).toContain('╗');
+      expect(panel).toContain('╚');
+      expect(panel).toContain('╝');
+      expect(panel).toContain('║');
+    });
+
+    it('should support custom title', () => {
+      const panel = renderSummaryPanel({
+        passed: 5,
+        failed: 0,
+        skipped: 0,
+        successRate: 100,
+        duration: 1000,
+        title: 'CUSTOM TITLE',
+      });
+
+      expect(panel).toContain('CUSTOM TITLE');
+    });
+  });
+
+  describe('renderError', () => {
+    it('should render error title and reason', () => {
+      const error = renderError({
+        title: 'Connection Failed',
+        reason: 'Network timeout',
+      });
+
+      expect(error).toContain('Connection Failed');
+      expect(error).toContain('Network timeout');
+      expect(error).toContain('ERROR');
+    });
+
+    it('should render suggestions when provided', () => {
+      const error = renderError({
+        title: 'Auth Failed',
+        reason: 'Invalid API key',
+        suggestions: ['Check your API key', 'Verify environment variables'],
+      });
+
+      expect(error).toContain('Check your API key');
+      expect(error).toContain('Verify environment variables');
+      expect(error).toContain('Suggestions');
+    });
+
+    it('should use box drawing characters', () => {
+      const error = renderError({
+        title: 'Test Error',
+        reason: 'Test reason',
+      });
+
+      expect(error).toContain('┌');
+      expect(error).toContain('┐');
+      expect(error).toContain('└');
+      expect(error).toContain('┘');
+    });
+  });
+
+  describe('renderInfoBox', () => {
+    it('should render title and content', () => {
+      const box = renderInfoBox('Info Title', ['Line 1', 'Line 2']);
+
+      expect(box).toContain('Info Title');
+      expect(box).toContain('Line 1');
+      expect(box).toContain('Line 2');
+    });
+
+    it('should use box drawing characters', () => {
+      const box = renderInfoBox('Test', ['content']);
+
+      // Uses standard box drawing (may be rounded or square depending on implementation)
+      expect(box).toContain('┌');
+      expect(box).toContain('┐');
+      expect(box).toContain('└');
+      expect(box).toContain('┘');
+    });
+  });
+
+  describe('createSpinner', () => {
+    it('should create a spinner with text', () => {
+      const spinner = createSpinner('Loading...');
+      expect(spinner).toBeDefined();
+      expect(typeof spinner.start).toBe('function');
+      expect(typeof spinner.succeed).toBe('function');
+      expect(typeof spinner.fail).toBe('function');
+      expect(typeof spinner.info).toBe('function');
+    });
+  });
+
+  describe('icons', () => {
+    it('should have all required icons', () => {
+      expect(icons.passed).toBeDefined();
+      expect(icons.failed).toBeDefined();
+      expect(icons.skipped).toBeDefined();
+      expect(icons.running).toBeDefined();
+      expect(icons.info).toBeDefined();
+      expect(icons.warning).toBeDefined();
+    });
+  });
+
+  describe('colors', () => {
+    it('should have all required color functions', () => {
+      expect(typeof colors.success).toBe('function');
+      expect(typeof colors.error).toBe('function');
+      expect(typeof colors.warning).toBe('function');
+      expect(typeof colors.info).toBe('function');
+      expect(typeof colors.muted).toBe('function');
+    });
+
+    it('should apply colors to text', () => {
+      const colored = colors.success('test');
+      expect(colored).toContain('test');
+    });
+  });
+
+  describe('padText', () => {
+    it('should pad text to specified width', () => {
+      const padded = padText('hello', 10);
+      expect(padded.length).toBe(10);
+      expect(padded).toBe('hello     ');
+    });
+
+    it('should right-align text', () => {
+      const padded = padText('hello', 10, 'right');
+      expect(padded.length).toBe(10);
+      expect(padded).toBe('     hello');
+    });
+
+    it('should center text', () => {
+      const padded = padText('hi', 10, 'center');
+      expect(padded.length).toBe(10);
+      expect(padded).toContain('hi');
+    });
+
+    it('should not truncate text longer than width by default', () => {
+      // padText does not truncate by default, it just pads shorter text
+      const padded = padText('hello world', 5);
+      expect(padded).toBe('hello world'); // text unchanged if longer than width
+    });
+  });
+
+  describe('formatDuration', () => {
+    it('should format milliseconds', () => {
+      expect(formatDuration(500)).toBe('500ms');
+      expect(formatDuration(50)).toBe('50ms');
+    });
+
+    it('should format seconds', () => {
+      expect(formatDuration(1500)).toBe('1.5s');
+      expect(formatDuration(2000)).toBe('2.0s');
+    });
+
+    it('should handle zero', () => {
+      expect(formatDuration(0)).toBe('0ms');
+    });
+  });
+});

package/src/commands/compare.ts

@@ -3,16 +3,129 @@
  */
 
 import chalk from 'chalk';
-import Table from 'cli-table3';
 import { Command } from 'commander';
-import { loadConfig } from '../config/loader';
-import { createStorage } from '../utils/storage';
+import { loadConfig } from '../config/loader.js';
+import { createSpinner, renderError, icons, isTTY, padText } from '../ui/index.js';
+import { createStorage } from '../utils/storage.js';
 
 interface CompareOptions {
   threshold?: number;
   config?: string;
 }
 
+function renderComparisonPanel(
+  baseline: { metrics: { success_rate: number; median_latency_ms: number; total_tokens: number } },
+  current: { metrics: { success_rate: number; median_latency_ms: number; total_tokens: number } },
+  delta: { successRate: number; latency: number; tokens: number }
+): string {
+  // Column widths
+  const labelWidth = 18;
+  const baseWidth = 12;
+  const currWidth = 12;
+  const deltaWidth = 14;
+
+  // Calculate total width: ║ + space + columns + space + ║
+  // innerContent = labelWidth + baseWidth + currWidth + deltaWidth = 56
+  // total = 2 (borders) + 2 (padding) + 56 = 60
+  const innerWidth = labelWidth + baseWidth + currWidth + deltaWidth;
+  const width = innerWidth + 4; // +4 for "║ " and " ║"
+  const border = '═'.repeat(width - 2);
+
+  const formatDeltaValue = (value: number, suffix = '') => {
+    const sign = value > 0 ? '+' : '';
+    return `${sign}${value.toFixed(2)}${suffix}`;
+  };
+
+  const colorDelta = (value: number, inverse: boolean, formatted: string) => {
+    const improved = inverse ? value < 0 : value > 0;
+    if (improved) return chalk.green(formatted);
+    if (value === 0) return chalk.dim(formatted);
+    return chalk.red(formatted);
+  };
+
+  const formatRow = (label: string, baseVal: string, currVal: string, deltaContent: string) => {
+    const labelPad = padText(label, labelWidth);
+    const basePad = padText(baseVal, baseWidth, 'right');
+    const currPad = padText(currVal, currWidth, 'right');
+    const deltaPad = padText(deltaContent, deltaWidth, 'right');
+    return `║ ${labelPad}${basePad}${currPad}${deltaPad} ║`;
+  };
+
+  const formatDataRow = (
+    label: string,
+    baseVal: string,
+    currVal: string,
+    deltaVal: number,
+    inverse: boolean,
+    suffix: string
+  ) => {
+    const labelPad = padText(label, labelWidth);
+    const basePad = padText(baseVal, baseWidth, 'right');
+    const currPad = padText(currVal, currWidth, 'right');
+    // Pad first, then apply color (color codes don't affect visual width)
+    const deltaStr = formatDeltaValue(deltaVal, suffix);
+    const deltaPad = padText(deltaStr, deltaWidth, 'right');
+    const deltaColored = colorDelta(deltaVal, inverse, deltaPad);
+    return `║ ${labelPad}${basePad}${currPad}${deltaColored} ║`;
+  };
+
+  const lines = [
+    `╔${border}╗`,
+    `║${padText('COMPARISON RESULTS', width - 2, 'center')}║`,
+    `╠${border}╣`,
+    formatRow('Metric', 'Baseline', 'Current', 'Delta'),
+    `╟${'─'.repeat(width - 2)}╢`,
+    formatDataRow(
+      'Success Rate',
+      `${(baseline.metrics.success_rate * 100).toFixed(1)}%`,
+      `${(current.metrics.success_rate * 100).toFixed(1)}%`,
+      delta.successRate * 100,
+      false,
+      '%'
+    ),
+    formatDataRow(
+      'Median Latency',
+      `${baseline.metrics.median_latency_ms}ms`,
+      `${current.metrics.median_latency_ms}ms`,
+      delta.latency,
+      true,
+      'ms'
+    ),
+    formatDataRow(
+      'Total Tokens',
+      baseline.metrics.total_tokens.toLocaleString(),
+      current.metrics.total_tokens.toLocaleString(),
+      delta.tokens,
+      true,
+      ''
+    ),
+    `╚${border}╝`,
+  ];
+
+  return lines.join('\n');
+}
+
+function renderPlainComparison(
+  baseline: { metrics: { success_rate: number; median_latency_ms: number; total_tokens: number } },
+  current: { metrics: { success_rate: number; median_latency_ms: number; total_tokens: number } },
+  delta: { successRate: number; latency: number; tokens: number }
+): string {
+  const formatDelta = (value: number, _inverse = false, suffix = '') => {
+    const sign = value > 0 ? '+' : '';
+    return `${sign}${value.toFixed(2)}${suffix}`;
+  };
+
+  const lines = [
+    '=== COMPARISON RESULTS ===',
+    '',
+    `Success Rate:   ${(baseline.metrics.success_rate * 100).toFixed(1)}% -> ${(current.metrics.success_rate * 100).toFixed(1)}%  (${formatDelta(delta.successRate * 100, false, '%')})`,
+    `Median Latency: ${baseline.metrics.median_latency_ms}ms -> ${current.metrics.median_latency_ms}ms  (${formatDelta(delta.latency, true, 'ms')})`,
+    `Total Tokens:   ${baseline.metrics.total_tokens} -> ${current.metrics.total_tokens}  (${formatDelta(delta.tokens, true)})`,
+  ];
+
+  return lines.join('\n');
+}
+
 export function compareCommand(): Command {
   const cmd = new Command('compare');
 
@@ -23,61 +136,45 @@ export function compareCommand(): Command {
     .option('--threshold <number>', 'Regression threshold (0-1)', '0.05')
     .option('--config <path>', 'Path to config file')
     .action(async (baselineId: string, currentId: string, options: CompareOptions) => {
+      const spinner = createSpinner('Loading runs...');
+      spinner.start();
+
       try {
         const config = await loadConfig(options.config);
         const storage = createStorage({ fileConfig: config });
 
         if (!storage.compare) {
-          console.error(chalk.red('Storage adapter does not support comparison'));
+          spinner.fail('Error');
+          console.log();
+          console.log(
+            renderError({
+              title: 'Comparison Not Supported',
+              reason: 'Storage adapter does not support comparison',
+              suggestions: [
+                'Use local storage which supports comparison',
+                'Check your storage configuration',
+              ],
+            })
+          );
           process.exit(1);
         }
 
-        console.log(chalk.bold('Comparing runs...'));
+        spinner.succeed('Loaded runs');
         console.log();
 
         const comparison = await storage.compare(baselineId, currentId);
         const { baseline, current, delta } = comparison;
 
-        // Summary table
-        const summaryTable = new Table({
-          head: [
-            chalk.bold('Metric'),
-            chalk.bold('Baseline'),
-            chalk.bold('Current'),
-            chalk.bold('Delta'),
-          ],
-          style: { head: [], border: [] },
-        });
-
-        const formatDelta = (value: number, inverse = false) => {
-          const improved = inverse ? value < 0 : value > 0;
-          const color = improved ? chalk.green : value === 0 ? chalk.dim : chalk.red;
-          const sign = value > 0 ? '+' : '';
-          return color(`${sign}${value.toFixed(2)}`);
-        };
-
-        summaryTable.push(
-          [
-            'Success Rate',
-            `${(baseline.metrics.success_rate * 100).toFixed(1)}%`,
-            `${(current.metrics.success_rate * 100).toFixed(1)}%`,
-            `${formatDelta(delta.successRate * 100)}%`,
-          ],
-          [
-            'Median Latency',
-            `${baseline.metrics.median_latency_ms}ms`,
-            `${current.metrics.median_latency_ms}ms`,
-            `${formatDelta(delta.latency, true)}ms`,
-          ],
-          [
-            'Total Tokens',
-            baseline.metrics.total_tokens.toLocaleString(),
-            current.metrics.total_tokens.toLocaleString(),
-            formatDelta(delta.tokens, true),
-          ]
-        );
+        // Show comparison panel
+        if (isTTY) {
+          console.log(renderComparisonPanel(baseline, current, delta));
+        } else {
+          console.log(renderPlainComparison(baseline, current, delta));
+        }
 
-        console.log(summaryTable.toString());
+        console.log();
+        console.log(chalk.dim(`Baseline: ${baselineId}`));
+        console.log(chalk.dim(`Current:  ${currentId}`));
         console.log();
 
         // Check for regression
@@ -86,16 +183,28 @@ export function compareCommand(): Command {
 
         if (hasRegression) {
           console.log(
-            chalk.red('⚠ Regression detected!'),
-            `Success rate dropped by ${Math.abs(delta.successRate * 100).toFixed(1)}%`,
-            `(threshold: ${threshold * 100}%)`
+            `${icons.failed} ${chalk.red('Regression detected!')} ` +
+              `Success rate dropped by ${chalk.bold(Math.abs(delta.successRate * 100).toFixed(1) + '%')} ` +
+              chalk.dim(`(threshold: ${threshold * 100}%)`)
           );
           process.exit(1);
         } else {
-          console.log(chalk.green('✓ No regression detected'));
+          console.log(`${icons.passed} ${chalk.green('No regression detected')}`);
         }
       } catch (error) {
-        console.error(chalk.red('Error:'), (error as Error).message);
+        spinner.fail('Error');
+        console.log();
+        console.log(
+          renderError({
+            title: 'Failed to Compare Runs',
+            reason: (error as Error).message,
+            suggestions: [
+              'Check that both run IDs exist',
+              'Run "artemiskit history" to see available runs',
+              'Verify storage configuration in artemis.config.yaml',
+            ],
+          })
+        );
         process.exit(1);
       }
     });

package/src/commands/history.ts

@@ -3,10 +3,10 @@
  */
 
 import chalk from 'chalk';
-import Table from 'cli-table3';
 import { Command } from 'commander';
-import { loadConfig } from '../config/loader';
-import { createStorage } from '../utils/storage';
+import { loadConfig } from '../config/loader.js';
+import { createSpinner, renderError, isTTY, padText } from '../ui/index.js';
+import { createStorage } from '../utils/storage.js';
 
 interface HistoryOptions {
   project?: string;
@@ -15,6 +15,88 @@ interface HistoryOptions {
   config?: string;
 }
 
+function renderHistoryTable(
+  runs: Array<{
+    runId: string;
+    scenario: string;
+    successRate: number;
+    createdAt: string;
+  }>
+): string {
+  // Column widths
+  const runIdWidth = 16;
+  const scenarioWidth = 30;
+  const rateWidth = 12;
+  const dateWidth = 20;
+
+  // Total width = borders(4) + columns + spacing(3 spaces between 4 columns)
+  const width = 2 + runIdWidth + 1 + scenarioWidth + 1 + rateWidth + 1 + dateWidth + 2;
+  const border = '═'.repeat(width - 2);
+
+  const formatHeaderRow = () => {
+    const runIdPad = padText('Run ID', runIdWidth);
+    const scenarioPad = padText('Scenario', scenarioWidth);
+    const ratePad = padText('Success Rate', rateWidth, 'right');
+    const datePad = padText('Date', dateWidth, 'right');
+    return `║ ${runIdPad} ${scenarioPad} ${ratePad} ${datePad} ║`;
+  };
+
+  const lines = [
+    `╔${border}╗`,
+    `║${padText('RUN HISTORY', width - 2, 'center')}║`,
+    `╠${border}╣`,
+    formatHeaderRow(),
+    `╟${'─'.repeat(width - 2)}╢`,
+  ];
+
+  for (const run of runs) {
+    const rateColor =
+      run.successRate >= 0.9 ? chalk.green : run.successRate >= 0.7 ? chalk.yellow : chalk.red;
+
+    // Pad values first, then apply color to rate
+    const runIdPad = padText(run.runId, runIdWidth);
+    const truncScenario =
+      run.scenario.length > scenarioWidth - 2
+        ? run.scenario.slice(0, scenarioWidth - 3) + '…'
+        : run.scenario;
+    const scenarioPad = padText(truncScenario, scenarioWidth);
+
+    // Pad rate before coloring so ANSI codes don't affect width
+    const rateValue = `${(run.successRate * 100).toFixed(1)}%`;
+    const ratePad = padText(rateValue, rateWidth, 'right');
+    const rateColored = rateColor(ratePad);
+
+    const dateObj = new Date(run.createdAt);
+    const dateStr = `${dateObj.toLocaleDateString()} ${dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+    const datePad = padText(dateStr, dateWidth, 'right');
+
+    lines.push(`║ ${runIdPad} ${scenarioPad} ${rateColored} ${datePad} ║`);
+  }
+
+  lines.push(`╚${border}╝`);
+
+  return lines.join('\n');
+}
+
+function renderPlainHistory(
+  runs: Array<{
+    runId: string;
+    scenario: string;
+    successRate: number;
+    createdAt: string;
+  }>
+): string {
+  const lines = ['=== RUN HISTORY ===', ''];
+
+  for (const run of runs) {
+    const rate = `${(run.successRate * 100).toFixed(1)}%`;
+    const date = new Date(run.createdAt).toLocaleString();
+    lines.push(`${run.runId}  ${run.scenario}  ${rate}  ${date}`);
+  }
+
+  return lines.join('\n');
+}
+
 export function historyCommand(): Command {
   const cmd = new Command('history');
 
@@ -25,6 +107,9 @@ export function historyCommand(): Command {
     .option('-l, --limit <number>', 'Limit number of results', '20')
     .option('--config <path>', 'Path to config file')
     .action(async (options: HistoryOptions) => {
+      const spinner = createSpinner('Loading history...');
+      spinner.start();
+
       try {
         const config = await loadConfig(options.config);
         const storage = createStorage({ fileConfig: config });
@@ -36,42 +121,58 @@ export function historyCommand(): Command {
           limit,
         });
 
+        spinner.succeed('Loaded history');
+        console.log();
+
         if (runs.length === 0) {
           console.log(chalk.dim('No runs found.'));
+
+          if (options.project || options.scenario) {
+            console.log();
+            console.log(chalk.dim('Filters applied:'));
+            if (options.project) console.log(chalk.dim(`  Project: ${options.project}`));
+            if (options.scenario) console.log(chalk.dim(`  Scenario: ${options.scenario}`));
+            console.log();
+            console.log(chalk.dim('Try removing filters or run some tests first.'));
+          }
           return;
         }
 
-        const table = new Table({
-          head: [
-            chalk.bold('Run ID'),
-            chalk.bold('Scenario'),
-            chalk.bold('Success Rate'),
-            chalk.bold('Date'),
-          ],
-          style: { head: [], border: [] },
-        });
-
-        for (const run of runs) {
-          const successColor =
-            run.successRate >= 0.9
-              ? chalk.green
-              : run.successRate >= 0.7
-                ? chalk.yellow
-                : chalk.red;
-
-          table.push([
-            run.runId,
-            run.scenario,
-            successColor(`${(run.successRate * 100).toFixed(1)}%`),
-            new Date(run.createdAt).toLocaleString(),
-          ]);
+        // Show history table
+        if (isTTY) {
+          console.log(renderHistoryTable(runs));
+        } else {
+          console.log(renderPlainHistory(runs));
         }
 
-        console.log(table.toString());
         console.log();
-        console.log(chalk.dim(`Showing ${runs.length} runs`));
+        console.log(
+          chalk.dim(
+            `Showing ${runs.length} run${runs.length === 1 ? '' : 's'}${options.limit ? ` (limit: ${limit})` : ''}`
+          )
+        );
+
+        if (options.project || options.scenario) {
+          console.log(
+            chalk.dim('Filters:') +
+              (options.project ? chalk.dim(` project=${options.project}`) : '') +
+              (options.scenario ? chalk.dim(` scenario=${options.scenario}`) : '')
+          );
+        }
       } catch (error) {
-        console.error(chalk.red('Error:'), (error as Error).message);
+        spinner.fail('Error');
+        console.log();
+        console.log(
+          renderError({
+            title: 'Failed to Load History',
+            reason: (error as Error).message,
+            suggestions: [
+              'Check storage configuration in artemis.config.yaml',
+              'Verify the storage directory exists',
+              'Run some tests first with "artemiskit run"',
+            ],
+          })
+        );
         process.exit(1);
       }
     });