codebakers 2.5.4 → 3.0.0

package/src/commands/website.ts

@@ -1,741 +0,0 @@
-import * as p from '@clack/prompts';
-import chalk from 'chalk';
-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
-// ============================================================================
-
-interface WebsiteTemplate {
-  id: string;
-  name: string;
-  description: string;
-  icon: string;
-  sections: string[];
-  style: 'minimal' | 'bold' | 'elegant' | 'playful' | 'corporate';
-}
-
-const TEMPLATES: WebsiteTemplate[] = [
-  {
-    id: 'landing',
-    name: 'Landing Page',
-    description: 'Convert visitors into customers',
-    icon: '🚀',
-    sections: ['hero', 'features', 'testimonials', 'pricing', 'cta', 'footer'],
-    style: 'bold',
-  },
-  {
-    id: 'saas',
-    name: 'SaaS Website',
-    description: 'Software product marketing site',
-    icon: '💻',
-    sections: ['hero', 'features', 'how-it-works', 'pricing', 'faq', 'testimonials', 'cta', 'footer'],
-    style: 'minimal',
-  },
-  {
-    id: 'portfolio',
-    name: 'Portfolio',
-    description: 'Showcase your work',
-    icon: '🎨',
-    sections: ['hero', 'about', 'projects', 'skills', 'contact', 'footer'],
-    style: 'elegant',
-  },
-  {
-    id: 'agency',
-    name: 'Agency Website',
-    description: 'Professional services company',
-    icon: '🏢',
-    sections: ['hero', 'services', 'portfolio', 'team', 'testimonials', 'contact', 'footer'],
-    style: 'corporate',
-  },
-  {
-    id: 'startup',
-    name: 'Startup Page',
-    description: 'Early stage company',
-    icon: '⚡',
-    sections: ['hero', 'problem', 'solution', 'features', 'team', 'waitlist', 'footer'],
-    style: 'bold',
-  },
-  {
-    id: 'restaurant',
-    name: 'Restaurant',
-    description: 'Food & dining establishment',
-    icon: '🍽️',
-    sections: ['hero', 'menu', 'about', 'gallery', 'reservations', 'location', 'footer'],
-    style: 'elegant',
-  },
-  {
-    id: 'ecommerce',
-    name: 'E-commerce',
-    description: 'Online store',
-    icon: '🛒',
-    sections: ['hero', 'featured-products', 'categories', 'bestsellers', 'newsletter', 'footer'],
-    style: 'minimal',
-  },
-  {
-    id: 'blog',
-    name: 'Blog',
-    description: 'Content & articles',
-    icon: '📝',
-    sections: ['hero', 'featured-posts', 'categories', 'newsletter', 'about', 'footer'],
-    style: 'minimal',
-  },
-  {
-    id: 'event',
-    name: 'Event Page',
-    description: 'Conference or meetup',
-    icon: '🎉',
-    sections: ['hero', 'speakers', 'schedule', 'venue', 'sponsors', 'tickets', 'footer'],
-    style: 'bold',
-  },
-  {
-    id: 'nonprofit',
-    name: 'Nonprofit',
-    description: 'Charity or cause',
-    icon: '💚',
-    sections: ['hero', 'mission', 'impact', 'programs', 'donate', 'volunteer', 'footer'],
-    style: 'elegant',
-  },
-  {
-    id: 'personal',
-    name: 'Personal Website',
-    description: 'Your online presence',
-    icon: '👤',
-    sections: ['hero', 'about', 'experience', 'projects', 'blog', 'contact', 'footer'],
-    style: 'minimal',
-  },
-  {
-    id: 'coming-soon',
-    name: 'Coming Soon',
-    description: 'Pre-launch teaser',
-    icon: '⏳',
-    sections: ['hero', 'countdown', 'features-preview', 'waitlist', 'footer'],
-    style: 'bold',
-  },
-  {
-    id: 'custom',
-    name: 'Custom',
-    description: 'Build from scratch with AI',
-    icon: '✨',
-    sections: [],
-    style: 'minimal',
-  },
-];
-
-// ============================================================================
-// MAIN COMMAND
-// ============================================================================
-
-export async function websiteCommand(): Promise<void> {
-  const config = new Config();
-
-  if (!config.isConfigured()) {
-    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) {
-    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.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({
-    message: 'How would you like to build your website?',
-    options: [
-      { value: 'describe', label: '💬 Describe it', hint: 'Tell me what you want in plain English' },
-      { value: 'template', label: '📋 Start from template', hint: 'Choose a pre-made structure' },
-      { value: 'url', label: '🔗 Clone a design', hint: 'Describe a site you like' },
-    ],
-  });
-
-  if (p.isCancel(approach)) return;
-
-  const anthropic = new Anthropic({ apiKey: anthropicCreds.apiKey });
-  let websiteSpec: WebsiteSpec;
-
-  if (approach === 'describe') {
-    websiteSpec = await describeWebsite(anthropic);
-  } else if (approach === 'template') {
-    websiteSpec = await templateWebsite(anthropic);
-  } else {
-    websiteSpec = await cloneDesign(anthropic);
-  }
-
-  if (!websiteSpec) return;
-
-  // Step 2: Confirm spec
-  console.log(chalk.cyan(`\n  📋 Website Plan:\n`));
-  console.log(chalk.bold(`  ${websiteSpec.name}`));
-  console.log(chalk.dim(`  ${websiteSpec.description}\n`));
-  console.log(chalk.dim(`  Style: ${websiteSpec.style}`));
-  console.log(chalk.dim(`  Sections: ${websiteSpec.sections.join(', ')}\n`));
-
-  const confirm = await p.confirm({
-    message: 'Build this website?',
-    initialValue: true,
-  });
-
-  if (!confirm || p.isCancel(confirm)) return;
-
-  // Step 3: Build it
-  await buildWebsite(anthropic, websiteSpec, config);
-}
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-interface WebsiteSpec {
-  name: string;
-  description: string;
-  style: string;
-  colorScheme: {
-    primary: string;
-    secondary: string;
-    accent: string;
-    background: string;
-    text: string;
-  };
-  sections: string[];
-  content: Record<string, any>;
-  features: string[];
-}
-
-// ============================================================================
-// DESCRIBE WEBSITE
-// ============================================================================
-
-async function describeWebsite(anthropic: Anthropic): Promise<WebsiteSpec | null> {
-  console.log(chalk.dim('\n  Describe your website. Be as detailed as you want.\n'));
-  console.log(chalk.dim('  Examples:'));
-  console.log(chalk.dim('  • "A landing page for my AI writing tool called WriteBot"'));
-  console.log(chalk.dim('  • "Portfolio site for a photographer, dark theme, minimal"'));
-  console.log(chalk.dim('  • "Coffee shop website with menu, location, and online ordering"\n'));
-
-  const description = await textWithVoice({
-    message: 'Describe your website:',
-    placeholder: 'A landing page for...',
-  });
-
-  if (p.isCancel(description)) return null;
-
-  const spinner = p.spinner();
-  spinner.start('Understanding your vision...');
-
-  const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-5-20250929',
-    max_tokens: 2048,
-    messages: [{
-      role: 'user',
-      content: `Based on this website description, create a detailed specification.
-
-Description: "${description}"
-
-Return JSON only:
-{
-  "name": "Project name (kebab-case)",
-  "description": "One line description",
-  "style": "minimal | bold | elegant | playful | corporate",
-  "colorScheme": {
-    "primary": "#hex",
-    "secondary": "#hex", 
-    "accent": "#hex",
-    "background": "#hex",
-    "text": "#hex"
-  },
-  "sections": ["hero", "features", ...],
-  "content": {
-    "hero": {
-      "headline": "...",
-      "subheadline": "...",
-      "cta": "..."
-    },
-    "features": [
-      { "title": "...", "description": "...", "icon": "..." }
-    ]
-    // etc for each section
-  },
-  "features": ["responsive", "dark-mode", "animations", etc]
-}
-
-Make the content compelling and professional. Use appropriate sections for the type of website.`
-    }],
-  });
-
-  spinner.stop('Got it!');
-
-  const text = response.content[0].type === 'text' ? response.content[0].text : '';
-  const jsonMatch = text.match(/\{[\s\S]*\}/);
-  
-  if (!jsonMatch) {
-    p.log.error('Failed to understand website description');
-    return null;
-  }
-
-  return JSON.parse(jsonMatch[0]);
-}
-
-// ============================================================================
-// TEMPLATE WEBSITE
-// ============================================================================
-
-async function templateWebsite(anthropic: Anthropic): Promise<WebsiteSpec | null> {
-  const template = await p.select({
-    message: 'Choose a template:',
-    options: TEMPLATES.map(t => ({
-      value: t.id,
-      label: `${t.icon} ${t.name}`,
-      hint: t.description,
-    })),
-  });
-
-  if (p.isCancel(template)) return null;
-
-  const selectedTemplate = TEMPLATES.find(t => t.id === template)!;
-
-  // Get customization details
-  const name = await p.text({
-    message: 'What is your business/project name?',
-    placeholder: 'My Awesome Project',
-  });
-
-  if (p.isCancel(name)) return null;
-
-  const tagline = await p.text({
-    message: 'Tagline or one-line description:',
-    placeholder: 'The best solution for...',
-  });
-
-  if (p.isCancel(tagline)) return null;
-
-  const details = await textWithVoice({
-    message: 'Any other details? (or press enter to skip)',
-    placeholder: 'We help startups with..., Our colors are blue and white...',
-  });
-
-  if (p.isCancel(details)) return null;
-
-  const spinner = p.spinner();
-  spinner.start('Customizing template...');
-
-  const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-5-20250929',
-    max_tokens: 2048,
-    messages: [{
-      role: 'user',
-      content: `Create a website spec based on this template and customization.
-
-Template: ${selectedTemplate.name}
-Sections: ${selectedTemplate.sections.join(', ')}
-Default Style: ${selectedTemplate.style}
-
-Business Name: ${name}
-Tagline: ${tagline}
-Additional Details: ${details || 'None provided'}
-
-Return JSON only:
-{
-  "name": "project-name-kebab",
-  "description": "${tagline}",
-  "style": "${selectedTemplate.style}",
-  "colorScheme": {
-    "primary": "#hex",
-    "secondary": "#hex",
-    "accent": "#hex",
-    "background": "#hex",
-    "text": "#hex"
-  },
-  "sections": ${JSON.stringify(selectedTemplate.sections)},
-  "content": {
-    // Content for each section, tailored to the business
-  },
-  "features": ["responsive", "dark-mode", etc]
-}
-
-Make the content specific and compelling for this business.`
-    }],
-  });
-
-  spinner.stop('Template customized!');
-
-  const text = response.content[0].type === 'text' ? response.content[0].text : '';
-  const jsonMatch = text.match(/\{[\s\S]*\}/);
-  
-  if (!jsonMatch) {
-    p.log.error('Failed to customize template');
-    return null;
-  }
-
-  return JSON.parse(jsonMatch[0]);
-}
-
-// ============================================================================
-// CLONE DESIGN
-// ============================================================================
-
-async function cloneDesign(anthropic: Anthropic): Promise<WebsiteSpec | null> {
-  console.log(chalk.dim('\n  Describe a website design you like.\n'));
-  console.log(chalk.dim('  Examples:'));
-  console.log(chalk.dim('  • "Like Linear.app - minimal, clean, dark mode"'));
-  console.log(chalk.dim('  • "Like Stripe - professional, lots of gradients"'));
-  console.log(chalk.dim('  • "Like Notion - simple, friendly, illustrated"\n'));
-
-  const inspiration = await textWithVoice({
-    message: 'What site do you want to be inspired by?',
-    placeholder: 'Like Linear.app but for...',
-  });
-
-  if (p.isCancel(inspiration)) return null;
-
-  const purpose = await p.text({
-    message: 'What is YOUR website for?',
-    placeholder: 'A project management tool for designers',
-  });
-
-  if (p.isCancel(purpose)) return null;
-
-  const spinner = p.spinner();
-  spinner.start('Analyzing design inspiration...');
-
-  const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-5-20250929',
-    max_tokens: 2048,
-    messages: [{
-      role: 'user',
-      content: `Create a website spec inspired by another site's design.
-
-Inspiration: "${inspiration}"
-Purpose: "${purpose}"
-
-Analyze the design style of the inspiration (based on your knowledge of popular websites) and create a spec that captures that aesthetic for this new purpose.
-
-Return JSON only:
-{
-  "name": "project-name-kebab",
-  "description": "One line description",
-  "style": "minimal | bold | elegant | playful | corporate",
-  "colorScheme": {
-    "primary": "#hex - inspired by the reference",
-    "secondary": "#hex",
-    "accent": "#hex",
-    "background": "#hex",
-    "text": "#hex"
-  },
-  "sections": ["appropriate sections for the purpose"],
-  "content": {
-    // Compelling content for each section
-  },
-  "features": ["responsive", "dark-mode", "animations", "gradients", etc - based on inspiration]
-}
-
-Capture the FEEL of the inspiration but make it original.`
-    }],
-  });
-
-  spinner.stop('Design analyzed!');
-
-  const text = response.content[0].type === 'text' ? response.content[0].text : '';
-  const jsonMatch = text.match(/\{[\s\S]*\}/);
-  
-  if (!jsonMatch) {
-    p.log.error('Failed to analyze design');
-    return null;
-  }
-
-  return JSON.parse(jsonMatch[0]);
-}
-
-// ============================================================================
-// BUILD WEBSITE
-// ============================================================================
-
-async function buildWebsite(
-  anthropic: Anthropic, 
-  spec: WebsiteSpec,
-  config: Config
-): Promise<void> {
-  const projectPath = path.join(process.cwd(), spec.name);
-
-  // Check if exists
-  if (await fs.pathExists(projectPath)) {
-    const overwrite = await p.confirm({
-      message: `${spec.name} already exists. Overwrite?`,
-      initialValue: false,
-    });
-    if (!overwrite || p.isCancel(overwrite)) return;
-    await fs.remove(projectPath);
-  }
-
-  console.log(chalk.cyan(`\n  🏗️  Building ${chalk.bold(spec.name)}\n`));
-
-  // 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
-  steps.start();
-  
-  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();
-  
-  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;
-  }
-
-  // Step 3: Install shadcn
-  steps.start();
-  
-  try {
-    await execa('npx', ['shadcn@latest', 'init', '-y', '-d'], { 
-      cwd: projectPath, 
-      stdio: 'pipe',
-    });
-
-    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 4: Generate pages
-  steps.start();
-
-  const response = await anthropic.messages.create({
-    model: 'claude-sonnet-4-5-20250929',
-    max_tokens: 16000,
-    messages: [{
-      role: 'user',
-      content: `Generate a complete Next.js website based on this specification.
-
-Website Spec:
-${JSON.stringify(spec, null, 2)}
-
-Generate these files:
-
-1. src/app/page.tsx - Main landing page with ALL sections
-2. src/app/layout.tsx - Root layout with fonts, metadata
-3. src/app/globals.css - Tailwind config with custom colors
-4. src/components/sections/Hero.tsx
-5. src/components/sections/[OtherSections].tsx - One for each section
-6. src/components/ui/Navbar.tsx
-7. src/components/ui/Footer.tsx
-8. tailwind.config.ts - With custom colors from colorScheme
-
-Requirements:
-- Use TypeScript
-- Use Tailwind CSS for styling
-- Use shadcn/ui components (Button, Card, Input, Badge)
-- Make it responsive (mobile-first)
-- Add smooth scroll behavior
-- Use modern design patterns
-- Include hover effects and transitions
-- Use Lucide icons where appropriate
-
-Color scheme to use:
-- Primary: ${spec.colorScheme.primary}
-- Secondary: ${spec.colorScheme.secondary}
-- Accent: ${spec.colorScheme.accent}
-- Background: ${spec.colorScheme.background}
-- Text: ${spec.colorScheme.text}
-
-Style: ${spec.style}
-${spec.style === 'minimal' ? 'Clean, lots of whitespace, simple' : ''}
-${spec.style === 'bold' ? 'Strong colors, big typography, impactful' : ''}
-${spec.style === 'elegant' ? 'Refined, sophisticated, subtle animations' : ''}
-${spec.style === 'playful' ? 'Fun, colorful, friendly illustrations' : ''}
-${spec.style === 'corporate' ? 'Professional, trustworthy, structured' : ''}
-
-Output format:
-<<<FILE: path/to/file.tsx>>>
-content
-<<<END_FILE>>>
-
-Make it production-quality and visually impressive.`
-    }],
-  });
-
-  const text = response.content[0].type === 'text' ? response.content[0].text : '';
-  
-  // Write files
-  const fileRegex = /<<<FILE:\s*(.+?)>>>([\s\S]*?)<<<END_FILE>>>/g;
-  let match;
-
-  while ((match = fileRegex.exec(text)) !== null) {
-    const filePath = path.join(projectPath, match[1].trim());
-    const content = match[2].trim();
-
-    await fs.ensureDir(path.dirname(filePath));
-    await fs.writeFile(filePath, content);
-    createdFiles.push(match[1].trim());
-  }
-
-  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({
-    message: 'Start development server now?',
-    initialValue: true,
-  });
-
-  if (openDev && !p.isCancel(openDev)) {
-    console.log(colors.muted('\n  Starting dev server...\n'));
-    
-    // Change to project directory and run dev
-    process.chdir(projectPath);
-    await execa('npm', ['run', 'dev'], { 
-      stdio: 'inherit',
-      reject: false,
-    });
-  }
-}
-
-export { TEMPLATES };