@benzsiangco/jarvis 1.0.0 → 1.1.0

package/src/utils/table-utils.ts

@@ -0,0 +1,401 @@
+/**
+ * Table Utilities for Jarvis Project
+ * Helper functions for creating and formatting tables
+ */
+
+import chalk from 'chalk';
+
+// ============================================
+// Terminal Table Utilities
+// ============================================
+
+export interface TableColumn {
+  key: string;
+  header: string;
+  width?: number;
+  align?: 'left' | 'center' | 'right';
+  color?: (value: any) => string;
+}
+
+export class TerminalTable {
+  private columns: TableColumn[];
+  private rows: any[] = [];
+
+  constructor(columns: TableColumn[]) {
+    this.columns = columns;
+  }
+
+  addRow(row: any) {
+    this.rows.push(row);
+  }
+
+  addRows(rows: any[]) {
+    this.rows.push(...rows);
+  }
+
+  private calculateColumnWidths(): number[] {
+    return this.columns.map((col, i) => {
+      if (col.width) return col.width;
+      
+      const headerWidth = col.header.length;
+      const maxContentWidth = Math.max(
+        ...this.rows.map(row => String(row[col.key] || '').length),
+        0
+      );
+      
+      return Math.max(headerWidth, maxContentWidth) + 2;
+    });
+  }
+
+  private formatCell(value: string, width: number, align: 'left' | 'center' | 'right' = 'left'): string {
+    const strValue = String(value);
+    const padding = width - strValue.length;
+    
+    if (padding <= 0) return strValue.slice(0, width);
+    
+    switch (align) {
+      case 'center':
+        const leftPad = Math.floor(padding / 2);
+        const rightPad = padding - leftPad;
+        return ' '.repeat(leftPad) + strValue + ' '.repeat(rightPad);
+      case 'right':
+        return ' '.repeat(padding) + strValue;
+      default:
+        return strValue + ' '.repeat(padding);
+    }
+  }
+
+  render(): string {
+    const widths = this.calculateColumnWidths();
+    const lines: string[] = [];
+
+    // Top border
+    lines.push('┌' + widths.map(w => '─'.repeat(w)).join('┬') + '┐');
+
+    // Header
+    const headerCells = this.columns.map((col, i) => 
+      chalk.bold.cyan(this.formatCell(col.header, widths[i], 'center'))
+    );
+    lines.push('│' + headerCells.join('│') + '│');
+
+    // Header separator
+    lines.push('├' + widths.map(w => '─'.repeat(w)).join('┼') + '┤');
+
+    // Rows
+    this.rows.forEach((row, rowIndex) => {
+      const cells = this.columns.map((col, i) => {
+        const value = row[col.key] || '';
+        const formatted = this.formatCell(String(value), widths[i], col.align);
+        
+        // Apply color if specified
+        if (col.color) {
+          return col.color(value);
+        }
+        
+        // Alternate row colors for better readability
+        return rowIndex % 2 === 0 ? formatted : chalk.dim(formatted);
+      });
+      
+      lines.push('│' + cells.join('│') + '│');
+    });
+
+    // Bottom border
+    lines.push('└' + widths.map(w => '─'.repeat(w)).join('┴') + '┘');
+
+    return lines.join('\n');
+  }
+
+  print() {
+    console.log(this.render());
+  }
+}
+
+// ============================================
+// Quick Table Functions
+// ============================================
+
+/**
+ * Create a simple table from array of objects
+ */
+export function createTable(data: any[], columns?: string[]): TerminalTable {
+  if (data.length === 0) {
+    throw new Error('Cannot create table from empty data');
+  }
+
+  const keys = columns || Object.keys(data[0]);
+  const tableColumns: TableColumn[] = keys.map(key => ({
+    key,
+    header: key.toUpperCase().replace(/_/g, ' '),
+  }));
+
+  const table = new TerminalTable(tableColumns);
+  table.addRows(data);
+  return table;
+}
+
+/**
+ * Create a comparison table
+ */
+export function createComparisonTable(
+  items: any[],
+  attributes: string[]
+): TerminalTable {
+  const columns: TableColumn[] = [
+    { key: 'attribute', header: 'Attribute', align: 'left' },
+    ...items.map((item, i) => ({
+      key: `item${i}`,
+      header: item.name || `Item ${i + 1}`,
+      align: 'center' as const,
+    })),
+  ];
+
+  const table = new TerminalTable(columns);
+
+  attributes.forEach(attr => {
+    const row: any = { attribute: attr };
+    items.forEach((item, i) => {
+      row[`item${i}`] = item[attr] || '-';
+    });
+    table.addRow(row);
+  });
+
+  return table;
+}
+
+/**
+ * Create a status table with colored status indicators
+ */
+export function createStatusTable(services: Array<{
+  name: string;
+  status: 'online' | 'degraded' | 'offline';
+  [key: string]: any;
+}>): TerminalTable {
+  const statusColors = {
+    online: (text: string) => chalk.green('🟢 ' + text),
+    degraded: (text: string) => chalk.yellow('🟡 ' + text),
+    offline: (text: string) => chalk.red('🔴 ' + text),
+  };
+
+  const keys = Object.keys(services[0]).filter(k => k !== 'status');
+  const columns: TableColumn[] = [
+    ...keys.map(key => ({
+      key,
+      header: key.toUpperCase(),
+    })),
+    {
+      key: 'status',
+      header: 'STATUS',
+      align: 'center' as const,
+      color: (value: any) => statusColors[value as keyof typeof statusColors]?.(value) || value,
+    },
+  ];
+
+  const table = new TerminalTable(columns);
+  table.addRows(services);
+  return table;
+}
+
+// ============================================
+// Data Formatters
+// ============================================
+
+export const formatters = {
+  /**
+   * Format bytes to human-readable size
+   */
+  bytes: (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  },
+
+  /**
+   * Format milliseconds to human-readable duration
+   */
+  duration: (ms: number): string => {
+    if (ms < 1000) return `${ms}ms`;
+    if (ms < 60000) return `${(ms / 1000).toFixed(2)}s`;
+    if (ms < 3600000) return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+    return `${Math.floor(ms / 3600000)}h ${Math.floor((ms % 3600000) / 60000)}m`;
+  },
+
+  /**
+   * Format number as currency
+   */
+  currency: (amount: number, currency = 'USD'): string => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+    }).format(amount);
+  },
+
+  /**
+   * Format date to ISO string
+   */
+  date: (date: Date | string): string => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toISOString().split('T')[0];
+  },
+
+  /**
+   * Format date and time
+   */
+  datetime: (date: Date | string): string => {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleString();
+  },
+
+  /**
+   * Format percentage
+   */
+  percent: (value: number, decimals = 1): string => {
+    return `${value.toFixed(decimals)}%`;
+  },
+
+  /**
+   * Format number with thousand separators
+   */
+  number: (value: number): string => {
+    return value.toLocaleString();
+  },
+
+  /**
+   * Truncate string with ellipsis
+   */
+  truncate: (str: string, maxLength: number): string => {
+    if (str.length <= maxLength) return str;
+    return str.slice(0, maxLength - 3) + '...';
+  },
+
+  /**
+   * Format boolean as checkmark/cross
+   */
+  boolean: (value: boolean): string => {
+    return value ? '✓' : '✗';
+  },
+};
+
+// ============================================
+// Export to CSV
+// ============================================
+
+export function exportToCSV(data: any[], filename = 'export.csv'): string {
+  if (data.length === 0) return '';
+
+  const headers = Object.keys(data[0]);
+  const csvContent = [
+    headers.join(','),
+    ...data.map(row =>
+      headers.map(header => {
+        const value = row[header];
+        // Escape commas and quotes
+        if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
+          return `"${value.replace(/"/g, '""')}"`;
+        }
+        return value;
+      }).join(',')
+    ),
+  ].join('\n');
+
+  return csvContent;
+}
+
+// ============================================
+// Example Usage Functions
+// ============================================
+
+export function exampleUsage() {
+  console.log(chalk.bold.blue('\n📊 Jarvis Table Utilities Examples\n'));
+
+  // Example 1: Simple Data Table
+  console.log(chalk.yellow('1. Simple Data Table:'));
+  const users = [
+    { id: 1, name: 'Alice', email: 'alice@example.com', role: 'Admin' },
+    { id: 2, name: 'Bob', email: 'bob@example.com', role: 'User' },
+    { id: 3, name: 'Carol', email: 'carol@example.com', role: 'Manager' },
+  ];
+  createTable(users).print();
+
+  // Example 2: Comparison Table
+  console.log(chalk.yellow('\n2. Comparison Table:'));
+  const models = [
+    { name: 'GPT-4', speed: '⭐⭐⭐', cost: '$$$$', quality: '⭐⭐⭐⭐⭐' },
+    { name: 'Claude 3', speed: '⭐⭐⭐⭐', cost: '$$$', quality: '⭐⭐⭐⭐⭐' },
+    { name: 'Gemini', speed: '⭐⭐⭐⭐', cost: '$$', quality: '⭐⭐⭐⭐' },
+  ];
+  createComparisonTable(models, ['speed', 'cost', 'quality']).print();
+
+  // Example 3: Status Table
+  console.log(chalk.yellow('\n3. Status Table:'));
+  const services = [
+    { name: 'API Server', status: 'online' as const, uptime: '99.9%' },
+    { name: 'Database', status: 'online' as const, uptime: '99.8%' },
+    { name: 'Cache', status: 'degraded' as const, uptime: '98.5%' },
+  ];
+  createStatusTable(services).print();
+
+  // Example 4: Custom Formatted Table
+  console.log(chalk.yellow('\n4. Custom Formatted Table:'));
+  const files = [
+    { name: 'document.pdf', size: 1048576, modified: new Date('2024-01-15') },
+    { name: 'image.png', size: 524288, modified: new Date('2024-01-16') },
+    { name: 'video.mp4', size: 10485760, modified: new Date('2024-01-17') },
+  ];
+  
+  const fileTable = new TerminalTable([
+    { key: 'name', header: 'File Name' },
+    { key: 'size', header: 'Size', align: 'right' },
+    { key: 'modified', header: 'Modified' },
+  ]);
+  
+  fileTable.addRows(files.map(f => ({
+    name: f.name,
+    size: formatters.bytes(f.size),
+    modified: formatters.date(f.modified),
+  })));
+  
+  fileTable.print();
+
+  console.log(chalk.green('\n✨ Examples Complete!\n'));
+}
+
+// ============================================
+// Performance Metrics Table
+// ============================================
+
+export function createMetricsTable(metrics: Array<{
+  metric: string;
+  value: number;
+  unit: string;
+  threshold?: number;
+}>): TerminalTable {
+  const table = new TerminalTable([
+    { key: 'metric', header: 'Metric' },
+    { key: 'value', header: 'Value', align: 'right' },
+    { key: 'unit', header: 'Unit' },
+    { key: 'status', header: 'Status', align: 'center' },
+  ]);
+
+  table.addRows(metrics.map(m => {
+    let status = '✓';
+    if (m.threshold && m.value > m.threshold) {
+      status = chalk.yellow('⚠');
+    }
+    
+    return {
+      metric: m.metric,
+      value: m.value,
+      unit: m.unit,
+      status,
+    };
+  }));
+
+  return table;
+}
+
+// Run examples if this file is executed directly
+if (import.meta.main) {
+  exampleUsage();
+}

package/src/web/build-ui.ts

@@ -0,0 +1,27 @@
+import { build } from 'bun';
+
+async function buildUI() {
+  console.log('Building Web UI...');
+  
+  const result = await build({
+    entrypoints: ['./src/web/ui/src/main.tsx'],
+    outdir: './src/web/ui/dist',
+    minify: true,
+    target: 'browser',
+    sourcemap: 'none',
+    naming: '[name].[ext]',
+    plugins: [],
+  });
+
+  if (!result.success) {
+    console.error('Build failed');
+    for (const message of result.logs) {
+      console.error(message);
+    }
+    process.exit(1);
+  }
+
+  console.log('Build successful!');
+}
+
+buildUI();