codebakers 2.3.7 → 2.5.0

package/src/utils/display.ts

@@ -0,0 +1,325 @@
+import chalk from 'chalk';
+
+// ============================================================================
+// STEP TRACKER - Shows progress through multiple steps
+// ============================================================================
+
+export interface Step {
+  name: string;
+  status: 'pending' | 'running' | 'done' | 'error' | 'skipped';
+}
+
+export class StepTracker {
+  private steps: Step[];
+  private currentIndex: number = -1;
+  private startTime: number = Date.now();
+
+  constructor(stepNames: string[]) {
+    this.steps = stepNames.map(name => ({ name, status: 'pending' }));
+  }
+
+  start(index?: number): void {
+    if (index !== undefined) {
+      this.currentIndex = index;
+    } else {
+      this.currentIndex++;
+    }
+    
+    if (this.currentIndex < this.steps.length) {
+      this.steps[this.currentIndex].status = 'running';
+    }
+    this.render();
+  }
+
+  complete(): void {
+    if (this.currentIndex >= 0 && this.currentIndex < this.steps.length) {
+      this.steps[this.currentIndex].status = 'done';
+    }
+    this.render();
+  }
+
+  error(): void {
+    if (this.currentIndex >= 0 && this.currentIndex < this.steps.length) {
+      this.steps[this.currentIndex].status = 'error';
+    }
+    this.render();
+  }
+
+  skip(): void {
+    if (this.currentIndex >= 0 && this.currentIndex < this.steps.length) {
+      this.steps[this.currentIndex].status = 'skipped';
+    }
+    this.render();
+  }
+
+  private render(): void {
+    // Clear previous output (move up and clear lines)
+    const output: string[] = [];
+    
+    output.push(''); // Empty line for spacing
+
+    for (let i = 0; i < this.steps.length; i++) {
+      const step = this.steps[i];
+      const icon = this.getIcon(step.status);
+      const color = this.getColor(step.status);
+      const suffix = step.status === 'running' ? chalk.dim(' ...') : '';
+      
+      output.push(`  ${icon} ${color(step.name)}${suffix}`);
+    }
+
+    // Progress bar
+    const completed = this.steps.filter(s => s.status === 'done').length;
+    const total = this.steps.length;
+    const percent = Math.round((completed / total) * 100);
+    const barWidth = 30;
+    const filled = Math.round((completed / total) * barWidth);
+    const empty = barWidth - filled;
+    
+    output.push('');
+    output.push(`  ${chalk.green('█'.repeat(filled))}${chalk.gray('░'.repeat(empty))}  ${percent}%`);
+    output.push('');
+
+    console.log(output.join('\n'));
+  }
+
+  private getIcon(status: Step['status']): string {
+    switch (status) {
+      case 'pending': return chalk.gray('○');
+      case 'running': return chalk.blue('●');
+      case 'done': return chalk.green('✓');
+      case 'error': return chalk.red('✗');
+      case 'skipped': return chalk.yellow('⊘');
+    }
+  }
+
+  private getColor(status: Step['status']): (s: string) => string {
+    switch (status) {
+      case 'pending': return chalk.gray;
+      case 'running': return chalk.white;
+      case 'done': return chalk.green;
+      case 'error': return chalk.red;
+      case 'skipped': return chalk.yellow;
+    }
+  }
+
+  getElapsedTime(): string {
+    const elapsed = Math.round((Date.now() - this.startTime) / 1000);
+    const minutes = Math.floor(elapsed / 60);
+    const seconds = elapsed % 60;
+    return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+  }
+}
+
+// ============================================================================
+// ERROR DISPLAY - Beautiful error messages
+// ============================================================================
+
+export interface ErrorInfo {
+  title: string;
+  message: string;
+  fixes?: string[];
+  command?: string;
+  docs?: string;
+}
+
+export function showError(error: ErrorInfo): void {
+  console.log('');
+  console.log(chalk.red(`  ❌ ${error.title}`));
+  console.log('');
+  console.log(chalk.white(`  What went wrong:`));
+  console.log(chalk.gray(`    ${error.message}`));
+  
+  if (error.fixes && error.fixes.length > 0) {
+    console.log('');
+    console.log(chalk.white(`  Possible fixes:`));
+    error.fixes.forEach((fix, i) => {
+      console.log(chalk.gray(`    ${i + 1}. ${fix}`));
+    });
+  }
+
+  if (error.command) {
+    console.log('');
+    console.log(chalk.white(`  Try running:`));
+    console.log(chalk.cyan(`    ${error.command}`));
+  }
+
+  if (error.docs) {
+    console.log('');
+    console.log(chalk.dim(`  Docs: ${error.docs}`));
+  }
+
+  console.log('');
+}
+
+// ============================================================================
+// SUCCESS DISPLAY - Beautiful success messages
+// ============================================================================
+
+export interface SuccessInfo {
+  title: string;
+  message?: string;
+  stats?: { label: string; value: string }[];
+  nextSteps?: string[];
+  command?: string;
+}
+
+export function showSuccess(success: SuccessInfo): void {
+  console.log('');
+  console.log(chalk.green(`  ✅ ${success.title}`));
+  
+  if (success.message) {
+    console.log(chalk.gray(`     ${success.message}`));
+  }
+
+  if (success.stats && success.stats.length > 0) {
+    console.log('');
+    console.log(chalk.white(`  📊 Summary:`));
+    success.stats.forEach(stat => {
+      console.log(chalk.gray(`     ${stat.label}: ${chalk.white(stat.value)}`));
+    });
+  }
+
+  if (success.nextSteps && success.nextSteps.length > 0) {
+    console.log('');
+    console.log(chalk.white(`  Next steps:`));
+    success.nextSteps.forEach(step => {
+      console.log(chalk.cyan(`    ${step}`));
+    });
+  }
+
+  if (success.command) {
+    console.log('');
+    console.log(chalk.white(`  Quick start:`));
+    console.log(chalk.cyan(`    ${success.command}`));
+  }
+
+  console.log('');
+}
+
+// ============================================================================
+// INFO BOX - Boxed information display
+// ============================================================================
+
+export function showBox(title: string, content: string[], style: 'info' | 'warning' | 'success' = 'info'): void {
+  const colors = {
+    info: chalk.cyan,
+    warning: chalk.yellow,
+    success: chalk.green,
+  };
+  const color = colors[style];
+  
+  const maxLength = Math.max(title.length, ...content.map(c => c.length));
+  const width = maxLength + 4;
+  
+  const top = `╭${'─'.repeat(width)}╮`;
+  const bottom = `╰${'─'.repeat(width)}╯`;
+  const titleLine = `│  ${color(title.padEnd(maxLength))}  │`;
+  const separator = `├${'─'.repeat(width)}┤`;
+  
+  console.log('');
+  console.log(color(top));
+  console.log(color(titleLine));
+  console.log(color(separator));
+  content.forEach(line => {
+    console.log(color(`│  ${line.padEnd(maxLength)}  │`));
+  });
+  console.log(color(bottom));
+  console.log('');
+}
+
+// ============================================================================
+// FILE LIST - Show created/modified files
+// ============================================================================
+
+export function showFileList(title: string, files: string[]): void {
+  console.log('');
+  console.log(chalk.white(`  📁 ${title}`));
+  
+  files.forEach((file, i) => {
+    const isLast = i === files.length - 1;
+    const prefix = isLast ? '└──' : '├──';
+    const icon = getFileIcon(file);
+    console.log(chalk.gray(`     ${prefix} ${icon} ${file}`));
+  });
+  
+  console.log('');
+}
+
+function getFileIcon(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  const icons: Record<string, string> = {
+    'tsx': '⚛️',
+    'ts': '📘',
+    'js': '📒',
+    'jsx': '⚛️',
+    'css': '🎨',
+    'json': '📋',
+    'md': '📝',
+    'html': '🌐',
+  };
+  return icons[ext || ''] || '📄';
+}
+
+// ============================================================================
+// COMMON ERROR MESSAGES
+// ============================================================================
+
+export const ERRORS = {
+  nodeNotInstalled: {
+    title: 'Node.js not found',
+    message: 'Node.js 18 or higher is required',
+    fixes: [
+      'Install Node.js from https://nodejs.org',
+      'Use nvm to install: nvm install 18',
+      'Restart your terminal after installing',
+    ],
+    docs: 'https://nodejs.org/en/download',
+  },
+  
+  npmFailed: {
+    title: 'Package installation failed',
+    message: 'npm install encountered an error',
+    fixes: [
+      'Check your internet connection',
+      'Clear npm cache: npm cache clean --force',
+      'Delete node_modules and try again',
+      'Try using yarn instead: yarn install',
+    ],
+  },
+
+  createNextAppFailed: {
+    title: 'Project creation failed',
+    message: 'create-next-app could not complete',
+    fixes: [
+      'Make sure Node.js 18+ is installed',
+      'Check your internet connection',
+      'Try running manually: npx create-next-app@latest',
+    ],
+  },
+
+  apiKeyMissing: {
+    title: 'API key not configured',
+    message: 'Anthropic API key is required for AI features',
+    fixes: [
+      'Run: codebakers setup',
+      'Get an API key at: https://console.anthropic.com',
+    ],
+    command: 'codebakers setup',
+  },
+
+  notConfigured: {
+    title: 'CodeBakers not configured',
+    message: 'Run setup before using this command',
+    command: 'codebakers setup',
+  },
+
+  notInProject: {
+    title: 'Not in a project folder',
+    message: 'This command must be run inside a project',
+    fixes: [
+      'Navigate to your project: cd my-project',
+      'Create a new project: codebakers init',
+      'Or build a website: codebakers website',
+    ],
+  },
+};

package/src/utils/updates.ts

@@ -3,25 +3,6 @@ import chalk from 'chalk';
 const VERSION = '1.0.0';
 
 export async function checkForUpdates(): Promise<void> {
-  try {
-    const response = await fetch('https://registry.npmjs.org/codebakers/latest', {
-      signal: AbortSignal.timeout(3000),
-    });
-    
-    if (!response.ok) return;
-    
-    const data = await response.json();
-    const latestVersion = data.version;
-    
-    if (latestVersion && latestVersion !== VERSION) {
-      console.log(chalk.yellow(`
-╭────────────────────────────────────────────╮
-│  Update available: ${VERSION} → ${latestVersion.padEnd(10)}        │
-│  Run: npm install -g codebakers            │
-╰────────────────────────────────────────────╯
-`));
-    }
-  } catch {
-    // Silently fail - update check is not critical
-  }
+  // Update check disabled - Studio handles updates automatically
+  return;
 }