@benzsiangco/jarvis 1.0.0 → 1.1.0

package/src/utils/table-integration-examples.ts

@@ -0,0 +1,617 @@
+/**
+ * Jarvis Table Integration Examples
+ * Practical examples for using tables in the Jarvis project
+ */
+
+import { TerminalTable, createTable, createStatusTable, formatters } from './table-utils';
+import chalk from 'chalk';
+
+// ============================================
+// 1. Session History Table
+// ============================================
+
+export interface Session {
+  id: string;
+  timestamp: Date;
+  command: string;
+  provider: string;
+  tokens: number;
+  cost: number;
+  duration: number;
+  success: boolean;
+}
+
+export function displaySessionHistory(sessions: Session[]) {
+  console.log(chalk.bold.blue('\n📜 Session History\n'));
+
+  const table = new TerminalTable([
+    { key: 'id', header: 'ID', width: 8 },
+    { key: 'time', header: 'Time', width: 10 },
+    { key: 'command', header: 'Command', width: 30 },
+    { key: 'provider', header: 'Provider', width: 12, align: 'center' },
+    { key: 'tokens', header: 'Tokens', width: 10, align: 'right' },
+    { key: 'cost', header: 'Cost', width: 10, align: 'right' },
+    { key: 'duration', header: 'Duration', width: 10, align: 'right' },
+    { 
+      key: 'status', 
+      header: 'Status', 
+      width: 8, 
+      align: 'center',
+      color: (value) => value === '✓' ? chalk.green(value) : chalk.red(value),
+    },
+  ]);
+
+  table.addRows(sessions.map(s => ({
+    id: s.id.slice(0, 6),
+    time: s.timestamp.toLocaleTimeString(),
+    command: formatters.truncate(s.command, 28),
+    provider: s.provider,
+    tokens: formatters.number(s.tokens),
+    cost: formatters.currency(s.cost),
+    duration: formatters.duration(s.duration),
+    status: s.success ? '✓' : '✗',
+  })));
+
+  table.print();
+
+  // Summary
+  const totalTokens = sessions.reduce((sum, s) => sum + s.tokens, 0);
+  const totalCost = sessions.reduce((sum, s) => sum + s.cost, 0);
+  const successRate = (sessions.filter(s => s.success).length / sessions.length) * 100;
+
+  console.log(chalk.dim('\n───────────────────────────────────────────────'));
+  console.log(chalk.bold('Summary:'));
+  console.log(`  Total Sessions: ${chalk.cyan(sessions.length)}`);
+  console.log(`  Total Tokens: ${chalk.cyan(formatters.number(totalTokens))}`);
+  console.log(`  Total Cost: ${chalk.cyan(formatters.currency(totalCost))}`);
+  console.log(`  Success Rate: ${chalk.cyan(formatters.percent(successRate))}`);
+  console.log(chalk.dim('───────────────────────────────────────────────\n'));
+}
+
+// ============================================
+// 2. Model Comparison Table
+// ============================================
+
+export interface ModelInfo {
+  name: string;
+  provider: string;
+  contextWindow: number;
+  inputCost: number;
+  outputCost: number;
+  speed: 'slow' | 'medium' | 'fast' | 'very-fast';
+  quality: number; // 1-5
+  recommended: boolean;
+}
+
+export function displayModelComparison(models: ModelInfo[]) {
+  console.log(chalk.bold.blue('\n🤖 Available Models\n'));
+
+  const speedEmojis = {
+    'slow': '🐌',
+    'medium': '🚶',
+    'fast': '🏃',
+    'very-fast': '⚡',
+  };
+
+  const table = new TerminalTable([
+    { 
+      key: 'name', 
+      header: 'Model',
+      color: (value, row) => row.recommended ? chalk.bold.green(value + ' ⭐') : value,
+    },
+    { key: 'provider', header: 'Provider', align: 'center' },
+    { key: 'context', header: 'Context', align: 'right' },
+    { key: 'inputCost', header: 'Input Cost', align: 'right' },
+    { key: 'outputCost', header: 'Output Cost', align: 'right' },
+    { key: 'speed', header: 'Speed', align: 'center' },
+    { key: 'quality', header: 'Quality', align: 'center' },
+  ]);
+
+  table.addRows(models.map(m => ({
+    name: m.name,
+    provider: m.provider,
+    context: m.contextWindow >= 1000000 
+      ? `${m.contextWindow / 1000000}M`
+      : `${m.contextWindow / 1000}K`,
+    inputCost: `$${m.inputCost.toFixed(2)}/M`,
+    outputCost: `$${m.outputCost.toFixed(2)}/M`,
+    speed: speedEmojis[m.speed] + ' ' + m.speed,
+    quality: '⭐'.repeat(m.quality),
+    recommended: m.recommended,
+  })));
+
+  table.print();
+
+  console.log(chalk.dim('\nℹ️  Costs are per million tokens. ⭐ indicates recommended model.\n'));
+}
+
+// ============================================
+// 3. File Browser Table
+// ============================================
+
+export interface FileInfo {
+  name: string;
+  type: 'file' | 'directory';
+  size: number;
+  modified: Date;
+  permissions: string;
+}
+
+export function displayFileBrowser(files: FileInfo[], currentPath: string) {
+  console.log(chalk.bold.blue(`\n📁 ${currentPath}\n`));
+
+  const table = new TerminalTable([
+    { 
+      key: 'icon', 
+      header: '', 
+      width: 4,
+    },
+    { key: 'name', header: 'Name', width: 40 },
+    { key: 'size', header: 'Size', width: 12, align: 'right' },
+    { key: 'modified', header: 'Modified', width: 20 },
+    { key: 'permissions', header: 'Permissions', width: 12, align: 'center' },
+  ]);
+
+  table.addRows(files.map(f => ({
+    icon: f.type === 'directory' ? '📁' : '📄',
+    name: f.type === 'directory' ? chalk.bold.cyan(f.name) : f.name,
+    size: f.type === 'directory' ? '-' : formatters.bytes(f.size),
+    modified: formatters.datetime(f.modified),
+    permissions: f.permissions,
+  })));
+
+  table.print();
+
+  console.log(chalk.dim(`\nTotal: ${files.length} items\n`));
+}
+
+// ============================================
+// 4. Task Queue Table
+// ============================================
+
+export interface Task {
+  id: string;
+  name: string;
+  status: 'pending' | 'running' | 'completed' | 'failed';
+  progress: number; // 0-100
+  priority: 'low' | 'medium' | 'high';
+  assignedTo?: string;
+  estimatedTime?: number;
+}
+
+export function displayTaskQueue(tasks: Task[]) {
+  console.log(chalk.bold.blue('\n📋 Task Queue\n'));
+
+  const statusColors = {
+    pending: (text: string) => chalk.gray(text),
+    running: (text: string) => chalk.blue(text),
+    completed: (text: string) => chalk.green(text),
+    failed: (text: string) => chalk.red(text),
+  };
+
+  const priorityColors = {
+    low: (text: string) => chalk.gray(text),
+    medium: (text: string) => chalk.yellow(text),
+    high: (text: string) => chalk.red.bold(text),
+  };
+
+  const table = new TerminalTable([
+    { key: 'id', header: 'ID', width: 10 },
+    { key: 'name', header: 'Task', width: 30 },
+    { 
+      key: 'status', 
+      header: 'Status', 
+      width: 12, 
+      align: 'center',
+    },
+    { key: 'progress', header: 'Progress', width: 20 },
+    { key: 'priority', header: 'Priority', width: 10, align: 'center' },
+    { key: 'assignedTo', header: 'Assigned To', width: 15 },
+    { key: 'eta', header: 'ETA', width: 10, align: 'right' },
+  ]);
+
+  table.addRows(tasks.map(t => {
+    const progressBar = createProgressBar(t.progress);
+    const statusText = statusColors[t.status](t.status.toUpperCase());
+    const priorityText = priorityColors[t.priority](t.priority.toUpperCase());
+
+    return {
+      id: t.id,
+      name: formatters.truncate(t.name, 28),
+      status: statusText,
+      progress: progressBar,
+      priority: priorityText,
+      assignedTo: t.assignedTo || '-',
+      eta: t.estimatedTime ? formatters.duration(t.estimatedTime) : '-',
+    };
+  }));
+
+  table.print();
+
+  // Statistics
+  const stats = {
+    pending: tasks.filter(t => t.status === 'pending').length,
+    running: tasks.filter(t => t.status === 'running').length,
+    completed: tasks.filter(t => t.status === 'completed').length,
+    failed: tasks.filter(t => t.status === 'failed').length,
+  };
+
+  console.log(chalk.dim('\n───────────────────────────────────────────────'));
+  console.log(chalk.bold('Status Summary:'));
+  console.log(`  ${chalk.gray('Pending')}: ${stats.pending}`);
+  console.log(`  ${chalk.blue('Running')}: ${stats.running}`);
+  console.log(`  ${chalk.green('Completed')}: ${stats.completed}`);
+  console.log(`  ${chalk.red('Failed')}: ${stats.failed}`);
+  console.log(chalk.dim('───────────────────────────────────────────────\n'));
+}
+
+function createProgressBar(percent: number, width: number = 15): string {
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+  const bar = '█'.repeat(filled) + '░'.repeat(empty);
+  
+  if (percent === 100) {
+    return chalk.green(bar + ' ' + percent + '%');
+  } else if (percent > 50) {
+    return chalk.blue(bar + ' ' + percent + '%');
+  } else if (percent > 0) {
+    return chalk.yellow(bar + ' ' + percent + '%');
+  } else {
+    return chalk.gray(bar + ' ' + percent + '%');
+  }
+}
+
+// ============================================
+// 5. Performance Metrics Dashboard
+// ============================================
+
+export interface PerformanceMetrics {
+  responseTime: number;
+  tokensPerSecond: number;
+  memoryUsage: number;
+  cpuUsage: number;
+  requestsPerMinute: number;
+  errorRate: number;
+  uptime: number;
+}
+
+export function displayPerformanceDashboard(metrics: PerformanceMetrics) {
+  console.log(chalk.bold.blue('\n⚡ Performance Dashboard\n'));
+
+  const getStatus = (value: number, threshold: number, inverted = false) => {
+    const exceeded = inverted ? value < threshold : value > threshold;
+    return exceeded ? chalk.red('⚠ Warning') : chalk.green('✓ Good');
+  };
+
+  const table = new TerminalTable([
+    { key: 'metric', header: 'Metric', width: 25 },
+    { key: 'value', header: 'Value', width: 20, align: 'right' },
+    { key: 'status', header: 'Status', width: 15, align: 'center' },
+  ]);
+
+  table.addRows([
+    {
+      metric: 'Response Time',
+      value: formatters.duration(metrics.responseTime),
+      status: getStatus(metrics.responseTime, 1000),
+    },
+    {
+      metric: 'Tokens/Second',
+      value: formatters.number(metrics.tokensPerSecond),
+      status: getStatus(metrics.tokensPerSecond, 10, true),
+    },
+    {
+      metric: 'Memory Usage',
+      value: formatters.bytes(metrics.memoryUsage),
+      status: getStatus(metrics.memoryUsage, 1024 * 1024 * 512),
+    },
+    {
+      metric: 'CPU Usage',
+      value: formatters.percent(metrics.cpuUsage),
+      status: getStatus(metrics.cpuUsage, 80),
+    },
+    {
+      metric: 'Requests/Minute',
+      value: formatters.number(metrics.requestsPerMinute),
+      status: chalk.blue('ℹ Info'),
+    },
+    {
+      metric: 'Error Rate',
+      value: formatters.percent(metrics.errorRate, 2),
+      status: getStatus(metrics.errorRate, 1),
+    },
+    {
+      metric: 'Uptime',
+      value: formatters.duration(metrics.uptime),
+      status: chalk.green('✓ Online'),
+    },
+  ]);
+
+  table.print();
+}
+
+// ============================================
+// 6. Plugin/Extension Table
+// ============================================
+
+export interface Plugin {
+  name: string;
+  version: string;
+  enabled: boolean;
+  author: string;
+  description: string;
+  size: number;
+}
+
+export function displayPluginList(plugins: Plugin[]) {
+  console.log(chalk.bold.blue('\n🔌 Installed Plugins\n'));
+
+  const table = new TerminalTable([
+    { key: 'status', header: '', width: 4 },
+    { key: 'name', header: 'Plugin Name', width: 25 },
+    { key: 'version', header: 'Version', width: 10, align: 'center' },
+    { key: 'author', header: 'Author', width: 20 },
+    { key: 'size', header: 'Size', width: 10, align: 'right' },
+    { key: 'description', header: 'Description', width: 35 },
+  ]);
+
+  table.addRows(plugins.map(p => ({
+    status: p.enabled ? chalk.green('✓') : chalk.gray('○'),
+    name: p.enabled ? chalk.bold(p.name) : chalk.dim(p.name),
+    version: p.version,
+    author: p.author,
+    size: formatters.bytes(p.size),
+    description: formatters.truncate(p.description, 33),
+  })));
+
+  table.print();
+
+  const enabledCount = plugins.filter(p => p.enabled).length;
+  console.log(chalk.dim(`\n${enabledCount}/${plugins.length} plugins enabled\n`));
+}
+
+// ============================================
+// 7. Git Status Table
+// ============================================
+
+export interface GitFile {
+  path: string;
+  status: 'modified' | 'added' | 'deleted' | 'renamed' | 'untracked';
+  additions: number;
+  deletions: number;
+}
+
+export function displayGitStatus(files: GitFile[], branch: string) {
+  console.log(chalk.bold.blue(`\n🌿 Git Status (${branch})\n`));
+
+  const statusIcons = {
+    modified: chalk.yellow('M'),
+    added: chalk.green('A'),
+    deleted: chalk.red('D'),
+    renamed: chalk.blue('R'),
+    untracked: chalk.gray('?'),
+  };
+
+  const table = new TerminalTable([
+    { key: 'status', header: '', width: 4, align: 'center' },
+    { key: 'path', header: 'File', width: 50 },
+    { key: 'changes', header: 'Changes', width: 20, align: 'right' },
+  ]);
+
+  table.addRows(files.map(f => ({
+    status: statusIcons[f.status],
+    path: f.path,
+    changes: f.status === 'untracked' 
+      ? chalk.gray('new file')
+      : `${chalk.green('+' + f.additions)} ${chalk.red('-' + f.deletions)}`,
+  })));
+
+  table.print();
+
+  const totalAdd = files.reduce((sum, f) => sum + f.additions, 0);
+  const totalDel = files.reduce((sum, f) => sum + f.deletions, 0);
+  
+  console.log(chalk.dim('\n───────────────────────────────────────────────'));
+  console.log(`Total: ${chalk.green('+' + totalAdd)} ${chalk.red('-' + totalDel)} across ${files.length} files`);
+  console.log(chalk.dim('───────────────────────────────────────────────\n'));
+}
+
+// ============================================
+// 8. Environment Variables Table
+// ============================================
+
+export function displayEnvironmentVariables(env: Record<string, string>) {
+  console.log(chalk.bold.blue('\n🔐 Environment Variables\n'));
+
+  const table = new TerminalTable([
+    { key: 'name', header: 'Variable', width: 30 },
+    { key: 'value', header: 'Value', width: 50 },
+    { key: 'source', header: 'Source', width: 15, align: 'center' },
+  ]);
+
+  const entries = Object.entries(env).map(([name, value]) => {
+    // Mask sensitive values
+    const isSensitive = name.toLowerCase().includes('key') || 
+                       name.toLowerCase().includes('secret') ||
+                       name.toLowerCase().includes('password') ||
+                       name.toLowerCase().includes('token');
+    
+    const displayValue = isSensitive 
+      ? chalk.gray('••••••••' + value.slice(-4))
+      : formatters.truncate(value, 48);
+
+    const source = process.env[name] ? 'system' : 'custom';
+
+    return {
+      name: isSensitive ? chalk.yellow(name) : name,
+      value: displayValue,
+      source,
+    };
+  });
+
+  table.addRows(entries);
+  table.print();
+
+  console.log(chalk.dim(`\nTotal: ${entries.length} variables\n`));
+}
+
+// ============================================
+// Demo: Run All Examples
+// ============================================
+
+export function runAllExamples() {
+  // 1. Session History
+  const sessions: Session[] = [
+    {
+      id: 'sess-001',
+      timestamp: new Date(Date.now() - 3600000),
+      command: 'Create a new React component',
+      provider: 'OpenAI',
+      tokens: 1523,
+      cost: 0.0456,
+      duration: 3200,
+      success: true,
+    },
+    {
+      id: 'sess-002',
+      timestamp: new Date(Date.now() - 1800000),
+      command: 'Debug the authentication issue',
+      provider: 'Anthropic',
+      tokens: 2341,
+      cost: 0.0702,
+      duration: 5100,
+      success: true,
+    },
+    {
+      id: 'sess-003',
+      timestamp: new Date(Date.now() - 900000),
+      command: 'Refactor the database queries',
+      provider: 'Google',
+      tokens: 1876,
+      cost: 0.0375,
+      duration: 4500,
+      success: false,
+    },
+  ];
+  displaySessionHistory(sessions);
+
+  // 2. Model Comparison
+  const models: ModelInfo[] = [
+    {
+      name: 'GPT-4 Turbo',
+      provider: 'OpenAI',
+      contextWindow: 128000,
+      inputCost: 10.00,
+      outputCost: 30.00,
+      speed: 'fast',
+      quality: 5,
+      recommended: true,
+    },
+    {
+      name: 'Claude 3 Opus',
+      provider: 'Anthropic',
+      contextWindow: 200000,
+      inputCost: 15.00,
+      outputCost: 75.00,
+      speed: 'medium',
+      quality: 5,
+      recommended: false,
+    },
+    {
+      name: 'Gemini 1.5 Pro',
+      provider: 'Google',
+      contextWindow: 1000000,
+      inputCost: 3.50,
+      outputCost: 10.50,
+      speed: 'very-fast',
+      quality: 4,
+      recommended: false,
+    },
+  ];
+  displayModelComparison(models);
+
+  // 3. Task Queue
+  const tasks: Task[] = [
+    {
+      id: 'TASK-001',
+      name: 'Implement user authentication',
+      status: 'completed',
+      progress: 100,
+      priority: 'high',
+      assignedTo: 'Alice',
+      estimatedTime: 0,
+    },
+    {
+      id: 'TASK-002',
+      name: 'Design homepage mockup',
+      status: 'running',
+      progress: 65,
+      priority: 'medium',
+      assignedTo: 'Bob',
+      estimatedTime: 7200000,
+    },
+    {
+      id: 'TASK-003',
+      name: 'Write API documentation',
+      status: 'pending',
+      progress: 0,
+      priority: 'low',
+      assignedTo: 'Carol',
+      estimatedTime: 14400000,
+    },
+    {
+      id: 'TASK-004',
+      name: 'Fix critical bug in payment flow',
+      status: 'failed',
+      progress: 45,
+      priority: 'high',
+      assignedTo: 'Dave',
+    },
+  ];
+  displayTaskQueue(tasks);
+
+  // 4. Performance Dashboard
+  const metrics: PerformanceMetrics = {
+    responseTime: 245,
+    tokensPerSecond: 45,
+    memoryUsage: 256 * 1024 * 1024,
+    cpuUsage: 34.5,
+    requestsPerMinute: 120,
+    errorRate: 0.05,
+    uptime: 86400000 * 7,
+  };
+  displayPerformanceDashboard(metrics);
+
+  // 5. File Browser
+  const files: FileInfo[] = [
+    {
+      name: 'src',
+      type: 'directory',
+      size: 0,
+      modified: new Date(),
+      permissions: 'rwxr-xr-x',
+    },
+    {
+      name: 'package.json',
+      type: 'file',
+      size: 2048,
+      modified: new Date(Date.now() - 86400000),
+      permissions: 'rw-r--r--',
+    },
+    {
+      name: 'README.md',
+      type: 'file',
+      size: 4096,
+      modified: new Date(Date.now() - 172800000),
+      permissions: 'rw-r--r--',
+    },
+  ];
+  displayFileBrowser(files, '/home/user/project');
+
+  console.log(chalk.bold.green('\n✨ All examples completed!\n'));
+}
+
+// Run examples if executed directly
+if (import.meta.main) {
+  runAllExamples();
+}