codebakers 2.3.8 → 2.5.3

package/src/commands/website.ts

@@ -1,11 +1,22 @@
 import * as p from '@clack/prompts';
 import chalk from 'chalk';
-import * as fs from 'fs-extra';
+import fs from 'fs-extra';
 import * as path from 'path';
 import Anthropic from '@anthropic-ai/sdk';
 import { execa } from 'execa';
 import { Config } from '../utils/config.js';
 import { textWithVoice } from '../utils/voice.js';
+import { StepTracker, showError, showSuccess, showFileList, ERRORS } from '../utils/display.js';
+import { 
+  showMiniLogo, 
+  box, 
+  doubleBox, 
+  sectionHeader, 
+  showSuccessScreen, 
+  showErrorScreen,
+  showFileTree,
+  colors 
+} from '../utils/ui.js';
 
 // ============================================================================
 // WEBSITE TEMPLATES
@@ -135,39 +146,37 @@ export async function websiteCommand(): Promise<void> {
   const config = new Config();
 
   if (!config.isConfigured()) {
-    console.log(chalk.yellow(`
-  ⚠️  CodeBakers isn't set up yet.
-  
-  Run this first:
-    ${chalk.cyan('codebakers setup')}
-`));
+    showErrorScreen({
+      title: 'CodeBakers not configured',
+      message: 'Run setup first to connect your API keys.',
+      command: 'codebakers setup',
+    });
     return;
   }
 
   const anthropicCreds = config.getCredentials('anthropic');
   if (!anthropicCreds?.apiKey) {
-    console.log(chalk.yellow(`
-  ⚠️  Anthropic API key not configured.
-  
-  The website builder needs Claude AI to generate code.
-  
-  Run this to add your API key:
-    ${chalk.cyan('codebakers setup')}
-  
-  Get an API key at:
-    ${chalk.dim('https://console.anthropic.com/settings/keys')}
-`));
+    showErrorScreen({
+      title: 'Anthropic API key not configured',
+      message: 'The website builder needs Claude AI to generate code.',
+      fixes: [
+        'Run: codebakers setup',
+        'Get an API key at: console.anthropic.com',
+      ],
+      command: 'codebakers setup',
+    });
     return;
   }
 
-  console.log(chalk.cyan(`
-╔═══════════════════════════════════════════════════════════════╗
-║  🌐 WEBSITE BUILDER                                           ║
-║                                                               ║
-║  Describe your website in plain English.                      ║
-║  AI builds it in minutes.                                     ║
-╚═══════════════════════════════════════════════════════════════╝
-`));
+  console.clear();
+  showMiniLogo();
+  
+  doubleBox([
+    colors.primary('🌐 WEBSITE BUILDER'),
+    '',
+    colors.white('Describe your website in plain English.'),
+    colors.muted('AI builds it in minutes.'),
+  ]);
 
   // Step 1: Choose approach
   const approach = await p.select({
@@ -254,7 +263,7 @@ async function describeWebsite(anthropic: Anthropic): Promise<WebsiteSpec | null
   spinner.start('Understanding your vision...');
 
   const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-20250514',
+    model: 'claude-sonnet-4-5-20250929',
     max_tokens: 2048,
     messages: [{
       role: 'user',
@@ -350,7 +359,7 @@ async function templateWebsite(anthropic: Anthropic): Promise<WebsiteSpec | null
   spinner.start('Customizing template...');
 
   const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-20250514',
+    model: 'claude-sonnet-4-5-20250929',
     max_tokens: 2048,
     messages: [{
       role: 'user',
@@ -429,7 +438,7 @@ async function cloneDesign(anthropic: Anthropic): Promise<WebsiteSpec | null> {
   spinner.start('Analyzing design inspiration...');
 
   const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-20250514',
+    model: 'claude-sonnet-4-5-20250929',
     max_tokens: 2048,
     messages: [{
       role: 'user',
@@ -497,48 +506,110 @@ async function buildWebsite(
     await fs.remove(projectPath);
   }
 
-  console.log(chalk.cyan(`\n  🏗️  Building ${spec.name}...\n`));
+  console.log(chalk.cyan(`\n  🏗️  Building ${chalk.bold(spec.name)}\n`));
 
-  const spinner = p.spinner();
+  // Initialize step tracker
+  const steps = new StepTracker([
+    'Create project structure',
+    'Install dependencies',
+    'Set up UI components',
+    'Generate website code',
+    'Create additional pages',
+    'Initialize git repository',
+  ]);
+
+  const createdFiles: string[] = [];
 
   // Step 1: Create project
-  spinner.start('Creating Next.js project...');
+  steps.start();
   
-  await execa('npx', [
-    'create-next-app@latest',
-    spec.name,
-    '--typescript',
-    '--tailwind',
-    '--eslint',
-    '--app',
-    '--src-dir',
-    '--import-alias', '@/*',
-    '--no-git',
-  ], { cwd: process.cwd(), reject: false });
-
-  spinner.stop('Project created');
-
-  // Step 2: Install shadcn
-  spinner.start('Setting up shadcn/ui...');
+  try {
+    await execa('npx', [
+      'create-next-app@latest',
+      spec.name,
+      '--typescript',
+      '--tailwind',
+      '--eslint',
+      '--app',
+      '--src-dir',
+      '--import-alias', '@/*',
+      '--no-git',
+      '--yes',
+    ], { 
+      cwd: process.cwd(), 
+      stdio: 'pipe', // Hide output for cleaner display
+    });
+    steps.complete();
+  } catch (error) {
+    steps.error();
+    showError({
+      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 ' + spec.name,
+      ],
+      command: 'npx create-next-app@latest ' + spec.name,
+    });
+    return;
+  }
+
+  // Verify project was created
+  if (!(await fs.pathExists(projectPath))) {
+    steps.error();
+    showError({
+      title: 'Project folder not created',
+      message: 'The project directory was not found after creation',
+      fixes: [
+        'Check if you have write permissions in this folder',
+        'Try creating the project in a different location',
+      ],
+    });
+    return;
+  }
+
+  // Step 2: Install dependencies
+  steps.start();
   
-  await execa('npx', ['shadcn@latest', 'init', '-y', '-d'], { 
-    cwd: projectPath, 
-    reject: false,
-  });
+  try {
+    await execa('npm', ['install', 'lucide-react'], { 
+      cwd: projectPath, 
+      stdio: 'pipe',
+    });
+    steps.complete();
+  } catch (error) {
+    steps.error();
+    showError({
+      ...ERRORS.npmFailed,
+      command: `cd ${spec.name} && npm install`,
+    });
+    return;
+  }
 
-  // Install common components
-  await execa('npx', ['shadcn@latest', 'add', 'button', 'card', 'input', 'badge', '-y'], {
-    cwd: projectPath,
-    reject: false,
-  });
+  // Step 3: Install shadcn
+  steps.start();
+  
+  try {
+    await execa('npx', ['shadcn@latest', 'init', '-y', '-d'], { 
+      cwd: projectPath, 
+      stdio: 'pipe',
+    });
 
-  spinner.stop('UI components ready');
+    await execa('npx', ['shadcn@latest', 'add', 'button', 'card', 'input', 'badge', '-y'], {
+      cwd: projectPath,
+      stdio: 'pipe',
+    });
+    steps.complete();
+  } catch (error) {
+    steps.skip(); // Not critical, continue anyway
+  }
 
-  // Step 3: Generate pages
-  spinner.start('Generating website code...');
+  // Step 4: Generate pages
+  steps.start();
 
   const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-20250514',
+    model: 'claude-sonnet-4-5-20250929',
     max_tokens: 16000,
     messages: [{
       role: 'user',
@@ -596,7 +667,6 @@ Make it production-quality and visually impressive.`
   // Write files
   const fileRegex = /<<<FILE:\s*(.+?)>>>([\s\S]*?)<<<END_FILE>>>/g;
   let match;
-  let fileCount = 0;
 
   while ((match = fileRegex.exec(text)) !== null) {
     const filePath = path.join(projectPath, match[1].trim());
@@ -604,38 +674,51 @@ Make it production-quality and visually impressive.`
 
     await fs.ensureDir(path.dirname(filePath));
     await fs.writeFile(filePath, content);
-    fileCount++;
+    createdFiles.push(match[1].trim());
   }
 
-  spinner.stop(`Generated ${fileCount} files`);
-
-  // Step 4: Git init
-  spinner.start('Initializing git...');
-  await execa('git', ['init'], { cwd: projectPath, reject: false });
-  await execa('git', ['add', '.'], { cwd: projectPath, reject: false });
-  await execa('git', ['commit', '-m', 'Initial website build by CodeBakers'], { cwd: projectPath, reject: false });
-  spinner.stop('Git initialized');
-
-  // Done!
-  console.log(chalk.green(`
-╔═══════════════════════════════════════════════════════════════╗
-║  ✅ Website built successfully!                               ║
-╠═══════════════════════════════════════════════════════════════╣
-║                                                               ║
-║  ${spec.name.padEnd(55)}║
-║  ${spec.description.substring(0, 55).padEnd(55)}║
-║                                                               ║
-║  Next steps:                                                  ║
-║    cd ${spec.name.padEnd(52)}║
-║    npm run dev                                                ║
-║                                                               ║
-║  Then open http://localhost:3000                              ║
-║                                                               ║
-║  Ready to deploy?                                             ║
-║    codebakers deploy                                          ║
-║                                                               ║
-╚═══════════════════════════════════════════════════════════════╝
-`));
+  steps.complete();
+
+  // Step 5: Additional pages (placeholder for now)
+  steps.start();
+  steps.complete();
+
+  // Step 6: Git init
+  steps.start();
+  
+  try {
+    await execa('git', ['init'], { cwd: projectPath, stdio: 'pipe' });
+    await execa('git', ['add', '.'], { cwd: projectPath, stdio: 'pipe' });
+    await execa('git', ['commit', '-m', 'Initial website build by CodeBakers'], { cwd: projectPath, stdio: 'pipe' });
+    steps.complete();
+  } catch (error) {
+    steps.skip();
+  }
+
+  // Show created files
+  if (createdFiles.length > 0) {
+    showFileTree('Files created', createdFiles.slice(0, 10));
+    if (createdFiles.length > 10) {
+      console.log(colors.muted(`     ... and ${createdFiles.length - 10} more files`));
+    }
+  }
+
+  // Success message with beautiful screen
+  showSuccessScreen({
+    title: 'Website built successfully!',
+    message: spec.description,
+    stats: [
+      { label: 'Project', value: spec.name },
+      { label: 'Files', value: createdFiles.length.toString() + ' created' },
+      { label: 'Sections', value: spec.sections.length.toString() },
+      { label: 'Time', value: steps.getElapsedTime() },
+    ],
+    nextSteps: [
+      `cd ${spec.name}`,
+      'npm run dev',
+    ],
+    command: `cd ${spec.name} && npm run dev`,
+  });
 
   // Offer to open in browser
   const openDev = await p.confirm({
@@ -644,7 +727,7 @@ Make it production-quality and visually impressive.`
   });
 
   if (openDev && !p.isCancel(openDev)) {
-    console.log(chalk.dim('\n  Starting dev server...\n'));
+    console.log(colors.muted('\n  Starting dev server...\n'));
     
     // Change to project directory and run dev
     process.chdir(projectPath);

package/src/index.ts

@@ -29,18 +29,21 @@ import { buildCommand } from './commands/build.js';
 import { integrateCommand, INTEGRATIONS } from './commands/integrate.js';
 import { websiteCommand } from './commands/website.js';
 import { parseNaturalLanguage } from './utils/nlp.js';
-
-const VERSION = '2.3.8';
-
-// ASCII art logo
-const logo = `
-   ██████╗ ██████╗ ██████╗ ███████╗██████╗  █████╗ ██╗  ██╗███████╗██████╗ ███████╗
-  ██╔════╝██╔═══██╗██╔══██╗██╔════╝██╔══██╗██╔══██╗██║ ██╔╝██╔════╝██╔══██╗██╔════╝
-  ██║     ██║   ██║██║  ██║█████╗  ██████╔╝███████║█████╔╝ █████╗  ██████╔╝███████╗
-  ██║     ██║   ██║██║  ██║██╔══╝  ██╔══██╗██╔══██║██╔═██╗ ██╔══╝  ██╔══██╗╚════██║
-  ╚██████╗╚██████╔╝██████╔╝███████╗██████╔╝██║  ██║██║  ██╗███████╗██║  ██║███████║
-   ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚══════╝
-`;
+import { 
+  showLogo, 
+  showMiniLogo,
+  showMenuCards, 
+  showSuccessScreen, 
+  showErrorScreen,
+  box,
+  doubleBox,
+  divider,
+  sectionHeader,
+  colors,
+  headerGradient 
+} from './utils/ui.js';
+
+const VERSION = '2.5.3';
 
 // ============================================================================
 // MAIN MENU
@@ -49,21 +52,23 @@ const logo = `
 async function showMainMenu(): Promise<void> {
   const config = new Config();
 
-  // Show logo
-  console.log(gradient.pastel.multiline(logo));
-  console.log(chalk.dim(`  v${VERSION} — AI dev team that follows the rules\n`));
+  // Clear screen and show beautiful logo
+  console.clear();
+  showLogo();
+  console.log(colors.muted(`  v${VERSION}`));
+  console.log('');
 
   // Check setup status
   const hasAnthropic = !!config.getCredentials('anthropic')?.apiKey;
 
   // STEP 1: First time? Run setup
   if (!hasAnthropic) {
-    console.log(boxen(
-      chalk.yellow('Welcome to CodeBakers!\n\n') +
-      chalk.white('Let\'s connect your Anthropic API key so the AI can work.\n') +
-      chalk.dim('(Takes about 1 minute)'),
-      { padding: 1, borderColor: 'yellow', borderStyle: 'round' }
-    ));
+    doubleBox([
+      colors.warning('👋 Welcome to CodeBakers!'),
+      '',
+      colors.white("Let's connect your Anthropic API key so the AI can work."),
+      colors.muted('(Takes about 1 minute)'),
+    ], 'default');
     
     await setupCommand();
     
@@ -81,14 +86,18 @@ async function showMainMenu(): Promise<void> {
   // Show context
   if (inProject && projectConfig) {
     const framework = projectConfig.framework || 'detected';
-    console.log(chalk.cyan(`  📁 Working in: ${chalk.bold(folderName)}`));
-    console.log(chalk.dim(`     ${framework} project\n`));
+    box([
+      colors.secondary('📁 ') + colors.white(folderName),
+      colors.muted(`   ${framework} project`),
+    ]);
     
     // SHOW PROJECT MENU
     await showProjectMenu(config);
   } else {
-    console.log(chalk.cyan(`  📁 Current folder: ${chalk.bold(cwd)}`));
-    console.log(chalk.dim(`     Not a project folder\n`));
+    box([
+      colors.secondary('📁 ') + colors.white(cwd),
+      colors.muted('   Not a project folder'),
+    ]);
     
     // SHOW START MENU
     await showStartMenu(config);
@@ -100,25 +109,28 @@ async function showMainMenu(): Promise<void> {
 // ============================================================================
 
 async function showStartMenu(config: Config): Promise<void> {
-  console.log(chalk.cyan('\n  ℹ️  This folder doesn\'t have a project yet.\n'));
+  console.log(colors.muted('  This folder doesn\'t have a project yet.'));
+  console.log('');
   
   let keepRunning = true;
   
   while (keepRunning) {
-    console.log(chalk.white('  What would you like to do?\n'));
-    console.log(chalk.green('    1.') + ' 🌐 Build a website      ' + chalk.dim('- Describe it, AI builds it'));
-    console.log(chalk.green('    2.') + ' 🆕 Create new project   ' + chalk.dim('- Start with Next.js, React, etc.'));
-    console.log(chalk.green('    3.') + ' ✏️  Plan my project      ' + chalk.dim('- Create a detailed plan first'));
-    console.log(chalk.green('    4.') + ' 🏗️  Build from plan      ' + chalk.dim('- I already have a PRD file'));
-    console.log(chalk.green('    5.') + ' 🌟 Get expert advice    ' + chalk.dim('- AI consultants help you decide'));
-    console.log(chalk.green('    6.') + ' 🔌 Add a service        ' + chalk.dim('- Stripe, Supabase, Auth, etc.'));
-    console.log(chalk.green('    7.') + ' ⚙️  Settings             ' + chalk.dim('- API keys & preferences'));
-    console.log(chalk.green('    8.') + ' ❓ Help                  ' + chalk.dim('- Learn how CodeBakers works'));
-    console.log(chalk.green('    0.') + ' 🚪 Return to terminal   ' + chalk.dim('- Go back to command line'));
-    console.log('');
+    sectionHeader('What would you like to do?');
+    
+    showMenuCards([
+      { key: '1', icon: '🌐', label: 'Build a Website', description: 'Describe it, AI builds it' },
+      { key: '2', icon: '🆕', label: 'Create New Project', description: 'Start with Next.js, React' },
+      { key: '3', icon: '✏️', label: 'Plan My Project', description: 'Create a detailed plan' },
+      { key: '4', icon: '🏗️', label: 'Build from Plan', description: 'I have a PRD file' },
+      { key: '5', icon: '🌟', label: 'Get Expert Advice', description: 'AI consultants help' },
+      { key: '6', icon: '🔌', label: 'Add a Service', description: 'Stripe, Supabase, Auth' },
+      { key: '7', icon: '⚙️', label: 'Settings', description: 'API keys & preferences' },
+      { key: '8', icon: '❓', label: 'Help', description: 'Learn how it works' },
+      { key: '0', icon: '🚪', label: 'Exit', description: 'Return to terminal' },
+    ]);
 
     const choice = await p.text({
-      message: 'Enter a number (0-8):',
+      message: colors.primary('Enter a number (0-8):'),
       placeholder: '1',
       validate: (value) => {
         if (!/^[0-8]$/.test(value) && value !== '') return 'Please enter a number 0-8';
@@ -172,11 +184,11 @@ async function showStartMenu(config: Config): Promise<void> {
 
 function showExitMessage(): void {
   console.log('');
-  console.log(chalk.cyan('  ─────────────────────────────────────────────────'));
-  console.log(chalk.white('  You\'re back in the terminal.'));
+  divider();
+  console.log(colors.white('  You\'re back in the terminal.'));
   console.log('');
-  console.log(chalk.dim('  To start CodeBakers again, type:'));
-  console.log(chalk.green('    codebakers'));
+  console.log(colors.muted('  To start CodeBakers again, type:'));
+  console.log(colors.success('    codebakers'));
   console.log('');
   console.log(chalk.dim('  Quick commands you can run directly:'));
   console.log(chalk.dim('    codebakers website') + chalk.gray(' - Build a website'));