modelgrid/test/test.showcase.ts

/**
 * Showcase test for ModelGrid CLI outputs
 * Demonstrates all the beautiful colored output features
 *
 * Run with: deno run --allow-all test/showcase.ts
 */

import { type ITableColumn, logger } from '../ts/logger.ts';
import { theme } from '../ts/colors.ts';

console.log('');
console.log('═'.repeat(80));
logger.highlight('MODELGRID CLI OUTPUT SHOWCASE');
logger.dim('Demonstrating beautiful, colored terminal output');
console.log('═'.repeat(80));
console.log('');

// === 1. Basic Logging Methods ===
logger.logBoxTitle('Basic Logging Methods', 60, 'info');
logger.logBoxLine('');
logger.log('Normal log message (default color)');
logger.success('Success message with ✓ symbol');
logger.error('Error message with ✗ symbol');
logger.warn('Warning message with ⚠ symbol');
logger.info('Info message with ℹ symbol');
logger.dim('Dim/secondary text for less important info');
logger.highlight('Highlighted/bold text for emphasis');
logger.logBoxLine('');
logger.logBoxEnd();

console.log('');

// === 2. Colored Boxes ===
logger.logBoxTitle('Colored Box Styles', 60);
logger.logBoxLine('');
logger.logBoxLine('Boxes can be styled with different colors:');
logger.logBoxEnd();

console.log('');

logger.logBox(
  'Success Box (Green)',
  [
    'Used for successful operations',
    'Container started, model loaded, etc.',
  ],
  60,
  'success',
);

console.log('');

logger.logBox(
  'Error Box (Red)',
  [
    'Used for critical errors and failures',
    'Configuration errors, GPU detection failures, etc.',
  ],
  60,
  'error',
);

console.log('');

logger.logBox(
  'Warning Box (Yellow)',
  [
    'Used for warnings and deprecations',
    'Driver updates needed, low VRAM, etc.',
  ],
  60,
  'warning',
);

console.log('');

logger.logBox(
  'Info Box (Cyan)',
  [
    'Used for informational messages',
    'Version info, model info, etc.',
  ],
  60,
  'info',
);

console.log('');

// === 3. GPU Status Table ===
const gpuColumns: ITableColumn[] = [
  { header: 'ID', key: 'id' },
  { header: 'Model', key: 'model' },
  { header: 'VRAM', key: 'vram', align: 'right' },
  {
    header: 'Status',
    key: 'status',
    color: (v) => {
      if (v.includes('Ready')) return theme.success(v);
      if (v.includes('Busy')) return theme.warning(v);
      return theme.dim(v);
    },
  },
  { header: 'Utilization', key: 'utilization', align: 'right' },
];

const gpuData = [
  {
    id: 'gpu-0',
    model: 'NVIDIA RTX 4090',
    vram: '24 GB',
    status: 'Ready',
    utilization: '15%',
  },
  {
    id: 'gpu-1',
    model: 'NVIDIA RTX 4090',
    vram: '24 GB',
    status: 'Busy',
    utilization: '92%',
  },
  {
    id: 'gpu-2',
    model: 'AMD RX 7900 XTX',
    vram: '24 GB',
    status: 'Ready',
    utilization: '0%',
  },
];

logger.logTable(gpuColumns, gpuData, 'GPU Devices');

console.log('');

// === 4. Container Table ===
const containerColumns: ITableColumn[] = [
  { header: 'ID', key: 'id' },
  { header: 'Type', key: 'type' },
  { header: 'Status', key: 'status' },
  { header: 'GPU', key: 'gpu' },
  { header: 'Models', key: 'models', align: 'right' },
];

const containerData = [
  { id: 'ollama-1', type: 'ollama', status: 'Running', gpu: 'gpu-0', models: '3' },
  { id: 'vllm-1', type: 'vllm', status: 'Running', gpu: 'gpu-1', models: '1' },
];

logger.logTable(containerColumns, containerData, 'AI Containers');

console.log('');

// === 5. Service Status Example ===
logger.logBoxTitle('Service Status', 70, 'success');
logger.logBoxLine('');
logger.logBoxLine(`Status:   ${theme.statusActive('Active (Running)')}`);
logger.logBoxLine(`Enabled:  ${theme.success('Yes')}`);
logger.logBoxLine(`Uptime:   2 days, 5 hours, 23 minutes`);
logger.logBoxLine(`PID:      ${theme.dim('12345')}`);
logger.logBoxLine(`Memory:   ${theme.dim('245.2 MB')}`);
logger.logBoxLine('');
logger.logBoxEnd();

console.log('');

// === 6. Configuration Example ===
logger.logBoxTitle('Configuration', 70);
logger.logBoxLine('');
logger.logBoxLine(`GPUs Detected:    ${theme.highlight('3')}`);
logger.logBoxLine(`Containers:       ${theme.highlight('2')}`);
logger.logBoxLine(`API Port:         ${theme.dim('8080')}`);
logger.logBoxLine(`Config File:      ${theme.path('/etc/modelgrid/config.json')}`);
logger.logBoxLine('');
logger.logBoxEnd();

console.log('');

// === 7. Model List Example ===
const modelColumns: ITableColumn[] = [
  { header: 'Model', key: 'name' },
  { header: 'Container', key: 'container' },
  { header: 'Size', key: 'size', align: 'right' },
  { header: 'Status', key: 'status' },
];

const modelData = [
  { name: 'llama3:8b', container: 'ollama-1', size: '4.7 GB', status: 'Loaded' },
  { name: 'mistral:7b', container: 'ollama-1', size: '4.1 GB', status: 'Loaded' },
  { name: 'llama3:70b', container: 'vllm-1', size: '40 GB', status: 'Loaded' },
];

logger.logTable(modelColumns, modelData, 'Loaded Models');

console.log('');

// === 8. Error Example ===
logger.logBoxTitle('Error Example', 70, 'error');
logger.logBoxLine('');
logger.logBoxLine(`✗ Failed to start container vllm-2`);
logger.logBoxLine('');
logger.logBoxLine('Possible causes:');
logger.logBoxLine(`  ${theme.dim('• Insufficient VRAM on assigned GPU')}`);
logger.logBoxLine(`  ${theme.dim('• Docker daemon not running')}`);
logger.logBoxLine(`  ${theme.dim('• NVIDIA container toolkit not installed')}`);
logger.logBoxLine('');
logger.logBoxLine(`Try: ${theme.command('modelgrid gpu status')}`);
logger.logBoxLine('');
logger.logBoxEnd();

console.log('');

// === Final Summary ===
console.log('═'.repeat(80));
logger.success('CLI Output Showcase Complete!');
logger.dim('All color and formatting features demonstrated');
console.log('═'.repeat(80));
console.log('');