codebakers 2.0.0 → 2.0.2

package/src/commands/design.ts

@@ -0,0 +1,298 @@
+import * as p from '@clack/prompts';
+import chalk from 'chalk';
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import { Config } from '../utils/config.js';
+
+const DESIGN_PROFILES = {
+  minimal: {
+    name: 'Minimal',
+    inspiration: 'Linear, Notion, Vercel',
+    fonts: { heading: 'Inter', body: 'Inter' },
+    corners: 'rounded-md',
+    shadows: 'none',
+    spacing: 'generous',
+  },
+  bold: {
+    name: 'Bold',
+    inspiration: 'Stripe, Ramp, Mercury',
+    fonts: { heading: 'Plus Jakarta Sans', body: 'Inter' },
+    corners: 'rounded-2xl',
+    shadows: 'elevated',
+    spacing: 'generous',
+  },
+  editorial: {
+    name: 'Editorial',
+    inspiration: 'Medium, Substack, NY Times',
+    fonts: { heading: 'Playfair Display', body: 'Source Serif Pro' },
+    corners: 'rounded-none',
+    shadows: 'none',
+    spacing: 'reading',
+  },
+  playful: {
+    name: 'Playful',
+    inspiration: 'Figma, Slack, Notion',
+    fonts: { heading: 'Nunito', body: 'Nunito' },
+    corners: 'rounded-full',
+    shadows: 'soft',
+    spacing: 'comfortable',
+  },
+  premium: {
+    name: 'Premium',
+    inspiration: 'Apple, Porsche, Amex',
+    fonts: { heading: 'Cormorant Garamond', body: 'Lato' },
+    corners: 'rounded-lg',
+    shadows: 'subtle',
+    spacing: 'luxurious',
+  },
+  dashboard: {
+    name: 'Dashboard',
+    inspiration: 'Datadog, Grafana, Linear',
+    fonts: { heading: 'Inter', body: 'Inter' },
+    corners: 'rounded-md',
+    shadows: 'card',
+    spacing: 'compact',
+  },
+};
+
+export async function designCommand(subcommand?: string): Promise<void> {
+  const config = new Config();
+
+  if (!config.isInProject()) {
+    p.log.error('Not in a CodeBakers project. Run `codebakers init` first.');
+    return;
+  }
+
+  p.intro(chalk.bgCyan.black(' Design System '));
+
+  const action = subcommand || await p.select({
+    message: 'What do you want to do?',
+    options: [
+      { value: 'profile', label: '🎨 Set design profile' },
+      { value: 'palette', label: '🌈 Generate color palette' },
+      { value: 'check', label: '✅ Check design quality' },
+      { value: 'view', label: '👀 View current settings' },
+    ],
+  });
+
+  if (p.isCancel(action)) return;
+
+  switch (action) {
+    case 'profile':
+      await setProfile();
+      break;
+    case 'palette':
+      await generatePalette();
+      break;
+    case 'check':
+      await checkDesign();
+      break;
+    case 'view':
+      await viewSettings();
+      break;
+  }
+}
+
+async function setProfile(): Promise<void> {
+  const profile = await p.select({
+    message: 'Choose your design profile:',
+    options: Object.entries(DESIGN_PROFILES).map(([key, value]) => ({
+      value: key,
+      label: `${value.name}`,
+      hint: value.inspiration,
+    })),
+  });
+
+  if (p.isCancel(profile)) return;
+
+  const selected = DESIGN_PROFILES[profile as keyof typeof DESIGN_PROFILES];
+  
+  // Save to project config
+  const configPath = path.join(process.cwd(), '.codebakers', 'design.json');
+  await fs.ensureDir(path.dirname(configPath));
+  await fs.writeJson(configPath, {
+    profile,
+    ...selected,
+    updatedAt: new Date().toISOString(),
+  }, { spaces: 2 });
+
+  p.log.success(`Design profile set to ${selected.name}`);
+  
+  console.log(chalk.dim(`
+  Fonts:    ${selected.fonts.heading} / ${selected.fonts.body}
+  Corners:  ${selected.corners}
+  Shadows:  ${selected.shadows}
+  Spacing:  ${selected.spacing}
+  `));
+}
+
+async function generatePalette(): Promise<void> {
+  const brandColor = await p.text({
+    message: 'Enter your brand color (hex):',
+    placeholder: '#6366F1',
+    validate: (v) => {
+      if (!v.match(/^#[0-9A-Fa-f]{6}$/)) return 'Enter a valid hex color (#RRGGBB)';
+      return undefined;
+    },
+  });
+
+  if (p.isCancel(brandColor)) return;
+
+  const palette = generateColorPalette(brandColor as string);
+
+  // Save to project
+  const configPath = path.join(process.cwd(), '.codebakers', 'design.json');
+  let config = {};
+  if (await fs.pathExists(configPath)) {
+    config = await fs.readJson(configPath);
+  }
+  
+  await fs.writeJson(configPath, {
+    ...config,
+    colors: palette,
+    updatedAt: new Date().toISOString(),
+  }, { spaces: 2 });
+
+  p.log.success('Color palette generated!');
+
+  console.log(`
+  ${chalk.bgHex(palette.brand[500]).black('  Brand  ')} ${palette.brand[500]}
+  ${chalk.bgHex(palette.brand[100]).black('  Light  ')} ${palette.brand[100]}
+  ${chalk.bgHex(palette.brand[900]).white('  Dark   ')} ${palette.brand[900]}
+  ${chalk.bgHex(palette.accent).black(' Accent  ')} ${palette.accent}
+  `);
+}
+
+function generateColorPalette(hex: string): Record<string, any> {
+  // Convert hex to HSL
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0, l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  h = Math.round(h * 360);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+
+  // Generate scale
+  const hslToHex = (h: number, s: number, l: number): string => {
+    l /= 100;
+    const a = s * Math.min(l, 1 - l) / 100;
+    const f = (n: number) => {
+      const k = (n + h / 30) % 12;
+      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+      return Math.round(255 * color).toString(16).padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+  };
+
+  return {
+    brand: {
+      50: hslToHex(h, s * 0.3, 97),
+      100: hslToHex(h, s * 0.4, 94),
+      200: hslToHex(h, s * 0.5, 86),
+      300: hslToHex(h, s * 0.6, 74),
+      400: hslToHex(h, s * 0.8, 62),
+      500: hex, // Original
+      600: hslToHex(h, s, l * 0.85),
+      700: hslToHex(h, s, l * 0.7),
+      800: hslToHex(h, s, l * 0.55),
+      900: hslToHex(h, s, l * 0.4),
+    },
+    accent: hslToHex((h + 180) % 360, s, l), // Complementary
+  };
+}
+
+async function checkDesign(): Promise<void> {
+  const spinner = p.spinner();
+  spinner.start('Checking design quality...');
+
+  const cwd = process.cwd();
+  const issues: string[] = [];
+
+  // Check for anti-patterns in code
+  const glob = (await import('fast-glob')).default;
+  const files = await glob(['src/**/*.{tsx,jsx}'], { cwd });
+
+  for (const file of files) {
+    const content = await fs.readFile(path.join(cwd, file), 'utf-8');
+
+    // Check for generic gradient hero
+    if (content.includes('bg-gradient-to-r from-blue-500') || 
+        content.includes('bg-gradient-to-r from-purple-500')) {
+      issues.push(`${file}: Generic gradient hero detected`);
+    }
+
+    // Check for icon spam
+    const iconMatches = content.match(/<(Rocket|Shield|Zap|Star|Check|Lightning)/g);
+    if (iconMatches && iconMatches.length > 3) {
+      issues.push(`${file}: Too many generic icons (${iconMatches.length})`);
+    }
+
+    // Check for generic CTAs
+    if (content.includes('>Get Started<') || content.includes('>Learn More<')) {
+      issues.push(`${file}: Generic CTA text - be more specific`);
+    }
+
+    // Check for lazy empty states
+    if (content.includes('No data') || content.includes('Nothing here')) {
+      issues.push(`${file}: Lazy empty state - add helpful message`);
+    }
+
+    // Check for small section padding
+    if (content.includes('py-4') || content.includes('py-6') || content.includes('py-8')) {
+      if (content.includes('<section')) {
+        issues.push(`${file}: Section padding too small - use py-16 or larger`);
+      }
+    }
+  }
+
+  spinner.stop('Check complete');
+
+  if (issues.length === 0) {
+    console.log(chalk.green('\n✓ No design issues found!\n'));
+  } else {
+    console.log(chalk.yellow(`\n⚠️  ${issues.length} design issues found:\n`));
+    for (const issue of issues) {
+      console.log(chalk.dim(`  • ${issue}`));
+    }
+    console.log('');
+  }
+}
+
+async function viewSettings(): Promise<void> {
+  const configPath = path.join(process.cwd(), '.codebakers', 'design.json');
+  
+  if (!await fs.pathExists(configPath)) {
+    p.log.info('No design settings configured. Run `codebakers design profile` to set up.');
+    return;
+  }
+
+  const config = await fs.readJson(configPath);
+  
+  console.log(chalk.bold('\nCurrent Design Settings:\n'));
+  console.log(`  Profile:  ${config.name || config.profile}`);
+  console.log(`  Fonts:    ${config.fonts?.heading} / ${config.fonts?.body}`);
+  console.log(`  Corners:  ${config.corners}`);
+  console.log(`  Shadows:  ${config.shadows}`);
+  console.log(`  Spacing:  ${config.spacing}`);
+  
+  if (config.colors) {
+    console.log(`  Brand:    ${config.colors.brand?.[500]}`);
+    console.log(`  Accent:   ${config.colors.accent}`);
+  }
+  console.log('');
+}

package/src/commands/prd.ts

@@ -0,0 +1,419 @@
+import * as p from '@clack/prompts';
+import chalk from 'chalk';
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import Anthropic from '@anthropic-ai/sdk';
+import { Config } from '../utils/config.js';
+
+interface PRDSection {
+  title: string;
+  content: string;
+}
+
+interface ParsedPRD {
+  name: string;
+  description: string;
+  features: string[];
+  pages: string[];
+  database: string[];
+  integrations: string[];
+  design: {
+    profile?: string;
+    brandColor?: string;
+  };
+}
+
+export async function prdCommand(filePath?: string): Promise<void> {
+  const config = new Config();
+
+  if (!config.isConfigured()) {
+    p.log.error('Please run `codebakers setup` first.');
+    return;
+  }
+
+  p.intro(chalk.bgCyan.black(' Build from PRD '));
+
+  // Get PRD file
+  let prdPath = filePath;
+  if (!prdPath) {
+    const file = await p.text({
+      message: 'Path to PRD file:',
+      placeholder: './PRD.md or paste URL',
+      validate: (v) => !v ? 'File path required' : undefined,
+    });
+    if (p.isCancel(file)) return;
+    prdPath = file as string;
+  }
+
+  // Read PRD
+  const spinner = p.spinner();
+  spinner.start('Reading PRD...');
+
+  let prdContent: string;
+  try {
+    if (prdPath.startsWith('http')) {
+      const response = await fetch(prdPath);
+      prdContent = await response.text();
+    } else {
+      prdContent = await fs.readFile(prdPath, 'utf-8');
+    }
+  } catch (error) {
+    spinner.stop('Error');
+    p.log.error(`Could not read PRD: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    return;
+  }
+
+  spinner.stop('PRD loaded');
+
+  // Parse PRD with AI
+  spinner.start('Analyzing PRD...');
+  
+  const anthropicCreds = config.getCredentials('anthropic');
+  if (!anthropicCreds?.apiKey) {
+    spinner.stop('Error');
+    p.log.error('Anthropic API key not configured.');
+    return;
+  }
+
+  const anthropic = new Anthropic({ apiKey: anthropicCreds.apiKey });
+
+  const parsed = await parsePRD(anthropic, prdContent);
+  spinner.stop('PRD analyzed');
+
+  // Show what was extracted
+  console.log(chalk.bold('\n📋 Extracted from PRD:\n'));
+  console.log(`  ${chalk.cyan('Name:')} ${parsed.name}`);
+  console.log(`  ${chalk.cyan('Description:')} ${parsed.description}`);
+  console.log(`  ${chalk.cyan('Features:')} ${parsed.features.length} features`);
+  console.log(`  ${chalk.cyan('Pages:')} ${parsed.pages.join(', ') || 'Auto-detect'}`);
+  console.log(`  ${chalk.cyan('Database:')} ${parsed.database.length} tables`);
+  console.log(`  ${chalk.cyan('Integrations:')} ${parsed.integrations.join(', ') || 'None'}`);
+  console.log('');
+
+  // Show features
+  if (parsed.features.length > 0) {
+    console.log(chalk.bold('Features to build:'));
+    parsed.features.slice(0, 10).forEach((f, i) => {
+      console.log(chalk.dim(`  ${i + 1}. ${f}`));
+    });
+    if (parsed.features.length > 10) {
+      console.log(chalk.dim(`  ... and ${parsed.features.length - 10} more`));
+    }
+    console.log('');
+  }
+
+  // Confirm
+  const proceed = await p.confirm({
+    message: 'Build this project?',
+    initialValue: true,
+  });
+
+  if (!proceed || p.isCancel(proceed)) {
+    p.cancel('Cancelled');
+    return;
+  }
+
+  // Build options
+  const options = await p.group({
+    createInfra: () => p.confirm({
+      message: 'Create GitHub + Vercel + Supabase?',
+      initialValue: true,
+    }),
+    designProfile: () => p.select({
+      message: 'Design profile:',
+      options: [
+        { value: 'minimal', label: 'Minimal (Linear, Notion)' },
+        { value: 'bold', label: 'Bold (Stripe, Ramp)' },
+        { value: 'editorial', label: 'Editorial (Medium, Substack)' },
+        { value: 'playful', label: 'Playful (Figma, Slack)' },
+        { value: 'premium', label: 'Premium (Apple, Porsche)' },
+        { value: 'dashboard', label: 'Dashboard (Datadog, Linear)' },
+      ],
+      initialValue: parsed.design.profile || 'minimal',
+    }),
+  });
+
+  if (p.isCancel(options)) return;
+
+  // Build the project
+  await buildFromPRD(parsed, options, anthropic, config);
+}
+
+async function parsePRD(anthropic: Anthropic, content: string): Promise<ParsedPRD> {
+  const response = await anthropic.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 4096,
+    messages: [{
+      role: 'user',
+      content: `Analyze this PRD and extract structured information. Return JSON only, no explanation.
+
+PRD:
+${content}
+
+Return this exact JSON structure:
+{
+  "name": "project name (lowercase, hyphenated)",
+  "description": "one sentence description",
+  "features": ["feature 1", "feature 2", ...],
+  "pages": ["page1", "page2", ...],
+  "database": ["table1", "table2", ...],
+  "integrations": ["stripe", "supabase", ...],
+  "design": {
+    "profile": "minimal|bold|editorial|playful|premium|dashboard or null",
+    "brandColor": "#hexcolor or null"
+  }
+}
+
+Extract ALL features mentioned. Include auth, payments, dashboards, etc.
+For pages, list actual pages/routes needed.
+For database, list tables/entities needed.
+For integrations, list third-party services mentioned.`
+    }],
+  });
+
+  const text = response.content[0].type === 'text' ? response.content[0].text : '';
+  
+  // Extract JSON from response
+  const jsonMatch = text.match(/\{[\s\S]*\}/);
+  if (!jsonMatch) {
+    throw new Error('Could not parse PRD');
+  }
+
+  return JSON.parse(jsonMatch[0]);
+}
+
+async function buildFromPRD(
+  prd: ParsedPRD,
+  options: { createInfra: boolean; designProfile: string },
+  anthropic: Anthropic,
+  config: Config
+): Promise<void> {
+  const spinner = p.spinner();
+  const projectPath = path.join(process.cwd(), prd.name);
+
+  // Step 1: Create project structure
+  spinner.start('Creating project structure...');
+  await fs.ensureDir(projectPath);
+  await fs.ensureDir(path.join(projectPath, '.codebakers'));
+  await fs.ensureDir(path.join(projectPath, 'src', 'app'));
+  await fs.ensureDir(path.join(projectPath, 'src', 'components'));
+  await fs.ensureDir(path.join(projectPath, 'src', 'lib'));
+  spinner.stop('Project structure created');
+
+  // Step 2: Save PRD to project
+  spinner.start('Saving PRD...');
+  await fs.writeFile(path.join(projectPath, 'PRD.md'), await fs.readFile(process.cwd(), 'utf-8').catch(() => JSON.stringify(prd, null, 2)));
+  await fs.writeJson(path.join(projectPath, '.codebakers', 'prd.json'), prd, { spaces: 2 });
+  await fs.writeJson(path.join(projectPath, '.codebakers', 'design.json'), {
+    profile: options.designProfile,
+    colors: prd.design.brandColor ? { brand: prd.design.brandColor } : undefined,
+  }, { spaces: 2 });
+  spinner.stop('PRD saved');
+
+  // Step 3: Generate build plan
+  spinner.start('Generating build plan...');
+  const buildPlan = await generateBuildPlan(anthropic, prd, options.designProfile);
+  await fs.writeJson(path.join(projectPath, '.codebakers', 'build-plan.json'), buildPlan, { spaces: 2 });
+  spinner.stop('Build plan generated');
+
+  // Show build plan
+  console.log(chalk.bold('\n🏗️  Build Plan:\n'));
+  buildPlan.phases.forEach((phase: any, i: number) => {
+    console.log(chalk.cyan(`Phase ${i + 1}: ${phase.name}`));
+    phase.tasks.forEach((task: string) => {
+      console.log(chalk.dim(`  • ${task}`));
+    });
+  });
+  console.log('');
+
+  // Step 4: Execute build plan
+  const startBuild = await p.confirm({
+    message: 'Start building?',
+    initialValue: true,
+  });
+
+  if (!startBuild || p.isCancel(startBuild)) {
+    p.log.info(`Build plan saved to ${prd.name}/.codebakers/build-plan.json`);
+    p.log.info(`Run \`cd ${prd.name} && codebakers code\` to continue building.`);
+    return;
+  }
+
+  // Execute each phase
+  for (let i = 0; i < buildPlan.phases.length; i++) {
+    const phase = buildPlan.phases[i];
+    console.log(chalk.bold(`\n📦 Phase ${i + 1}: ${phase.name}\n`));
+
+    for (const task of phase.tasks) {
+      spinner.start(task);
+      
+      try {
+        await executeTask(anthropic, projectPath, task, prd, options.designProfile);
+        spinner.stop(`✓ ${task}`);
+      } catch (error) {
+        spinner.stop(`✗ ${task}`);
+        p.log.error(error instanceof Error ? error.message : 'Task failed');
+        
+        const continueBuilding = await p.confirm({
+          message: 'Continue with next task?',
+          initialValue: true,
+        });
+        
+        if (!continueBuilding || p.isCancel(continueBuilding)) {
+          p.log.info('Build paused. Run `codebakers code` to continue.');
+          return;
+        }
+      }
+    }
+  }
+
+  // Step 5: Infrastructure (if selected)
+  if (options.createInfra) {
+    console.log(chalk.bold('\n🚀 Setting up infrastructure...\n'));
+    
+    spinner.start('Creating GitHub repository...');
+    // Would call GitHub service
+    spinner.stop('GitHub repository created');
+
+    spinner.start('Creating Supabase project...');
+    // Would call Supabase service  
+    spinner.stop('Supabase project created');
+
+    spinner.start('Creating Vercel project...');
+    // Would call Vercel service
+    spinner.stop('Vercel project created');
+
+    spinner.start('Deploying...');
+    // Would deploy
+    spinner.stop('Deployed!');
+  }
+
+  // Done!
+  p.outro(chalk.green(`
+✓ Project built from PRD!
+
+${chalk.bold('Your project:')}
+  ${chalk.cyan(`cd ${prd.name}`)}
+  ${chalk.cyan('npm run dev')}
+
+${chalk.bold('Continue building:')}
+  ${chalk.cyan('codebakers code')} — AI agent
+  ${chalk.cyan('codebakers check')} — Verify patterns
+  ${chalk.cyan('codebakers deploy')} — Deploy changes
+`));
+}
+
+async function generateBuildPlan(
+  anthropic: Anthropic,
+  prd: ParsedPRD,
+  designProfile: string
+): Promise<{ phases: Array<{ name: string; tasks: string[] }> }> {
+  const response = await anthropic.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 4096,
+    messages: [{
+      role: 'user',
+      content: `Create a build plan for this project. Return JSON only.
+
+Project: ${prd.name}
+Description: ${prd.description}
+Features: ${prd.features.join(', ')}
+Pages: ${prd.pages.join(', ')}
+Database tables: ${prd.database.join(', ')}
+Integrations: ${prd.integrations.join(', ')}
+Design: ${designProfile}
+
+Return this structure:
+{
+  "phases": [
+    {
+      "name": "Phase name",
+      "tasks": ["task 1", "task 2", ...]
+    }
+  ]
+}
+
+Phases should be:
+1. Setup (package.json, config, base files)
+2. Database (schema, migrations, types)
+3. Auth (if needed)
+4. Core Features (main functionality)
+5. UI/Pages (frontend)
+6. Integrations (third-party services)
+7. Polish (loading states, error handling, empty states)
+
+Keep tasks specific and actionable.`
+    }],
+  });
+
+  const text = response.content[0].type === 'text' ? response.content[0].text : '';
+  const jsonMatch = text.match(/\{[\s\S]*\}/);
+  if (!jsonMatch) {
+    throw new Error('Could not generate build plan');
+  }
+
+  return JSON.parse(jsonMatch[0]);
+}
+
+async function executeTask(
+  anthropic: Anthropic,
+  projectPath: string,
+  task: string,
+  prd: ParsedPRD,
+  designProfile: string
+): Promise<void> {
+  const response = await anthropic.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 8192,
+    messages: [{
+      role: 'user',
+      content: `Execute this task for the project.
+
+Project: ${prd.name}
+Task: ${task}
+Design Profile: ${designProfile}
+
+Context:
+- Features: ${prd.features.join(', ')}
+- Database: ${prd.database.join(', ')}
+
+Output files in this format:
+
+<<<FILE: path/to/file.ts>>>
+file content here
+<<<END_FILE>>>
+
+<<<FILE: another/file.tsx>>>
+file content here  
+<<<END_FILE>>>
+
+Follow these rules:
+- Use TypeScript
+- Use Next.js App Router
+- Use Tailwind CSS
+- Use shadcn/ui components
+- Every button needs onClick handler
+- Every form needs Zod validation
+- Every async operation needs loading/error states
+- Every list needs empty state
+- No generic gradient heroes
+- No icon spam
+- Generous spacing (py-16 or larger for sections)
+
+Generate ALL files needed for this task.`
+    }],
+  });
+
+  const text = response.content[0].type === 'text' ? response.content[0].text : '';
+
+  // Parse and 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);
+  }
+}