@codebakers/cli 1.2.1 → 1.3.1

package/src/commands/install-hook.ts

@@ -4,71 +4,40 @@ import { existsSync, mkdirSync, readFileSync, writeFileSync, copyFileSync } from
 import { join } from 'path';
 import { homedir } from 'os';
 
-// Enhanced hook with pre-flight checks and self-review automation
+// Enhanced hook with visible feedback and concise instructions
 const HOOK_TEMPLATE = {
   hooks: {
     UserPromptSubmit: [
       {
         type: "command",
-        command: `echo '════════════════════════════════════════════════════════════════
-🚀 CODEBAKERS ZERO-FRICTION PROTOCOL
-════════════════════════════════════════════════════════════════
-
-AUTOMATIC WORKFLOW - Execute silently, output only the acknowledgment:
-
-▸ PHASE 1: CONTEXT LOAD
-  Read these files (if they exist):
-  - CLAUDE.md → Router & module instructions
-  - PRD.md → What we are building (requirements!)
-  - PROJECT-CONTEXT.md → Codebase knowledge
-  - PROJECT-STATE.md → What is in progress
-  - DECISIONS.md → Past architectural choices
-
-▸ PHASE 2: PRE-FLIGHT CHECK (before writing code)
-  □ What existing code does this touch?
-  □ Is similar code in the codebase? (copy that pattern!)
-  □ Whats the data model?
-  □ What are the error cases?
-  □ Is someone else working on this? (check In Progress)
-
-  If PROJECT-CONTEXT.md is empty/stale, SCAN PROJECT FIRST:
-  - Read package.json
-  - Check file structure
-  - Find existing patterns
-  - Update PROJECT-CONTEXT.md
-
-▸ PHASE 3: ACKNOWLEDGE & EXECUTE
-  Output: 📋 CodeBakers | [Type] | Modules: [list]
-  Then: Follow patterns from .claude/ folder EXACTLY
-
-▸ PHASE 4: SELF-REVIEW (before saying done)
-  □ TypeScript compiles? (npx tsc --noEmit)
-  □ Imports resolve?
-  □ Error handling exists?
-  □ Matches existing patterns?
-  □ Tests written?
-
-  If ANY fails → FIX before responding
-
-▸ PHASE 5: UPDATE STATE
-  - Update PROJECT-STATE.md (move to Completed)
-  - Add to DECISIONS.md if architectural choice made
-
-════════════════════════════════════════════════════════════════
-🔄 MULTI-AGENT MODE
-════════════════════════════════════════════════════════════════
-- Check PROJECT-STATE.md "In Progress" - dont duplicate work
-- Add YOUR task to In Progress when starting
-- If conflict → STOP and ask user
-
-════════════════════════════════════════════════════════════════
-💡 REMEMBER: Check existing code FIRST. Copy patterns. Validate.
-════════════════════════════════════════════════════════════════'`
+        command: `echo '[CodeBakers] Loading project context...'`
+      }
+    ],
+    PostToolUse: [
+      {
+        type: "command",
+        matcher: "Write|Edit",
+        command: `echo '[CodeBakers] Code written - remember to self-review before marking done'`
       }
     ]
   }
 };
 
+// Instructions that get injected into the system prompt
+const CODEBAKERS_INSTRUCTIONS = `
+<user-prompt-submit-hook>
+[CodeBakers] Active - Follow these steps for EVERY request:
+
+1. CONTEXT: Read CLAUDE.md, PROJECT-CONTEXT.md, PROJECT-STATE.md
+2. PRE-FLIGHT: Check existing code patterns before writing new code
+3. EXECUTE: Use patterns from .claude/ folder
+4. SELF-REVIEW: Verify TypeScript compiles, imports resolve, error handling exists
+5. UPDATE: Mark tasks complete in PROJECT-STATE.md
+
+Output format: "[CodeBakers] Building [feature] using [patterns]"
+</user-prompt-submit-hook>
+`;
+
 /**
  * Install the CodeBakers hook into ~/.claude/settings.json
  */
@@ -117,23 +86,25 @@ export async function installHook(): Promise<void> {
       }
     }
 
-    // Merge hook into settings
+    // Merge hooks into settings
     settings.hooks = settings.hooks || {};
     (settings.hooks as Record<string, unknown>).UserPromptSubmit = HOOK_TEMPLATE.hooks.UserPromptSubmit;
+    (settings.hooks as Record<string, unknown>).PostToolUse = HOOK_TEMPLATE.hooks.PostToolUse;
 
     // Write back
     writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
 
     spinner.succeed('Hook installed successfully!');
 
-    console.log(chalk.white('\n  What happens automatically on EVERY message:\n'));
-    console.log(chalk.gray('    ✓ Loads project context (CLAUDE.md, PROJECT-CONTEXT.md)'));
-    console.log(chalk.gray('    ✓ Checks what\'s in progress (PROJECT-STATE.md)'));
-    console.log(chalk.gray('    ✓ Runs pre-flight checks before coding'));
-    console.log(chalk.gray('    ✓ Copies existing patterns from your codebase'));
-    console.log(chalk.gray('    ✓ Self-reviews code before outputting'));
-    console.log(chalk.gray('    ✓ Updates project state when done'));
-    console.log(chalk.gray('    ✓ Logs architectural decisions\n'));
+    console.log(chalk.white('\n  You\'ll see [CodeBakers] feedback in terminal:\n'));
+    console.log(chalk.cyan('    [CodeBakers] Loading project context...'));
+    console.log(chalk.cyan('    [CodeBakers] Code written - remember to self-review\n'));
+
+    console.log(chalk.white('  What happens automatically:\n'));
+    console.log(chalk.gray('    ✓ Loads project context before every response'));
+    console.log(chalk.gray('    ✓ Pre-flight checks before writing code'));
+    console.log(chalk.gray('    ✓ Self-review reminders after code changes'));
+    console.log(chalk.gray('    ✓ Pattern-based development from .claude/ folder\n'));
 
     console.log(chalk.yellow('  ⚠️  Restart Claude Code for changes to take effect.\n'));
   } catch (error) {
@@ -162,13 +133,18 @@ export async function uninstallHook(): Promise<void> {
 
     const settings = JSON.parse(readFileSync(settingsPath, 'utf-8'));
 
-    if (!settings.hooks?.UserPromptSubmit) {
-      spinner.info('No UserPromptSubmit hook found. Nothing to remove.');
+    if (!settings.hooks?.UserPromptSubmit && !settings.hooks?.PostToolUse) {
+      spinner.info('No CodeBakers hooks found. Nothing to remove.');
       return;
     }
 
-    // Remove the hook
-    delete settings.hooks.UserPromptSubmit;
+    // Remove both hooks
+    if (settings.hooks?.UserPromptSubmit) {
+      delete settings.hooks.UserPromptSubmit;
+    }
+    if (settings.hooks?.PostToolUse) {
+      delete settings.hooks.PostToolUse;
+    }
 
     // Clean up empty hooks object
     if (Object.keys(settings.hooks).length === 0) {

package/src/commands/scaffold.ts

@@ -0,0 +1,270 @@
+import chalk from 'chalk';
+import ora from 'ora';
+import { createInterface } from 'readline';
+import { writeFileSync, mkdirSync, existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { execSync } from 'child_process';
+import * as templates from '../templates/nextjs-supabase.js';
+
+async function prompt(question: string): Promise<string> {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+async function confirm(question: string): Promise<boolean> {
+  const answer = await prompt(`${question} (Y/n): `);
+  return answer.toLowerCase() !== 'n';
+}
+
+/**
+ * Scaffold a new project with full structure
+ */
+export async function scaffold(): Promise<void> {
+  console.log(chalk.blue(`
+  ╔═══════════════════════════════════════════════════════════╗
+  ║                                                           ║
+  ║   ${chalk.bold('CodeBakers Project Scaffolding')}                        ║
+  ║                                                           ║
+  ║   Create a production-ready project in seconds            ║
+  ║                                                           ║
+  ╚═══════════════════════════════════════════════════════════╝
+  `));
+
+  const cwd = process.cwd();
+  const files = readdirSync(cwd);
+  const hasFiles = files.filter(f => !f.startsWith('.')).length > 0;
+
+  if (hasFiles) {
+    console.log(chalk.yellow('  ⚠️  This directory is not empty.\n'));
+    const proceed = await confirm('  Continue anyway? (Existing files may be overwritten)');
+    if (!proceed) {
+      console.log(chalk.gray('\n  Run this command in an empty directory.\n'));
+      return;
+    }
+  }
+
+  // Ask about experience level
+  console.log(chalk.white('\n  What\'s your experience level?\n'));
+  console.log(chalk.gray('    1. ') + chalk.cyan('Beginner') + chalk.gray(' - New to coding, explain everything'));
+  console.log(chalk.gray('    2. ') + chalk.cyan('Intermediate') + chalk.gray(' - Know some coding, brief explanations'));
+  console.log(chalk.gray('    3. ') + chalk.cyan('Advanced') + chalk.gray(' - Skip explanations, just build\n'));
+
+  let experienceLevel = '';
+  while (!['1', '2', '3'].includes(experienceLevel)) {
+    experienceLevel = await prompt('  Enter 1, 2, or 3: ');
+  }
+
+  const isBeginnerMode = experienceLevel === '1';
+  const showBriefExplanations = experienceLevel === '2';
+
+  // Select stack with explanations for beginners
+  console.log(chalk.white('\n  Select your stack:\n'));
+
+  if (isBeginnerMode) {
+    console.log(chalk.gray('    1. ') + chalk.cyan('Next.js + Supabase + Drizzle') + chalk.green(' (Recommended)'));
+    console.log(chalk.gray('       ') + chalk.dim('Next.js = Framework for building websites with React'));
+    console.log(chalk.gray('       ') + chalk.dim('Supabase = Database + user login (like Firebase, but open source)'));
+    console.log(chalk.gray('       ') + chalk.dim('Drizzle = Tool to talk to your database safely'));
+    console.log('');
+    console.log(chalk.gray('    2. ') + chalk.cyan('Next.js + Prisma') + chalk.gray(' (Coming soon)'));
+    console.log(chalk.gray('       ') + chalk.dim('Prisma = Another database tool, more popular but heavier'));
+    console.log('');
+    console.log(chalk.gray('    3. ') + chalk.cyan('Express API') + chalk.gray(' (Coming soon)'));
+    console.log(chalk.gray('       ') + chalk.dim('Express = Lightweight server, good for APIs without a frontend'));
+    console.log('');
+  } else {
+    console.log(chalk.gray('    1. ') + chalk.cyan('Next.js + Supabase + Drizzle') + chalk.gray(' (Recommended)'));
+    console.log(chalk.gray('    2. ') + chalk.cyan('Next.js + Prisma') + chalk.gray(' (Coming soon)'));
+    console.log(chalk.gray('    3. ') + chalk.cyan('Express API') + chalk.gray(' (Coming soon)\n'));
+  }
+
+  let stackChoice = '';
+  while (!['1', '2', '3'].includes(stackChoice)) {
+    stackChoice = await prompt('  Enter 1, 2, or 3: ');
+  }
+
+  if (stackChoice !== '1') {
+    console.log(chalk.yellow('\n  That stack is coming soon! Using Next.js + Supabase + Drizzle.\n'));
+    stackChoice = '1';
+  }
+
+  // Explain what we're about to create for beginners
+  if (isBeginnerMode) {
+    console.log(chalk.blue('\n  ═══════════════════════════════════════════════════════════'));
+    console.log(chalk.white.bold('  📚 What we\'re creating:'));
+    console.log(chalk.blue('  ═══════════════════════════════════════════════════════════\n'));
+    console.log(chalk.gray('  This will create a complete web application with:'));
+    console.log(chalk.gray('  • A website users can visit (Next.js)'));
+    console.log(chalk.gray('  • User signup/login system (Supabase Auth)'));
+    console.log(chalk.gray('  • A database to store data (PostgreSQL via Supabase)'));
+    console.log(chalk.gray('  • Beautiful styling system (Tailwind CSS)'));
+    console.log(chalk.gray('  • Type safety to prevent bugs (TypeScript)\n'));
+    console.log(chalk.gray('  Think of it like a house:'));
+    console.log(chalk.gray('  • Next.js is the structure (walls, roof)'));
+    console.log(chalk.gray('  • Supabase is the utilities (electricity, plumbing)'));
+    console.log(chalk.gray('  • Tailwind is the interior design (paint, furniture)\n'));
+  }
+
+  // Get project name
+  const defaultName = cwd.split(/[\\/]/).pop() || 'my-project';
+  const projectName = await prompt(`  Project name (${defaultName}): `) || defaultName;
+
+  console.log(chalk.green(`\n  Creating ${projectName} with Next.js + Supabase + Drizzle...\n`));
+
+  // Create project structure
+  const spinner = ora('  Creating project structure...').start();
+
+  try {
+    // Create directories
+    const dirs = [
+      'src/app',
+      'src/components',
+      'src/lib/supabase',
+      'src/db',
+      'src/db/migrations',
+      'src/services',
+      'src/types',
+      'public',
+    ];
+
+    for (const dir of dirs) {
+      const dirPath = join(cwd, dir);
+      if (!existsSync(dirPath)) {
+        mkdirSync(dirPath, { recursive: true });
+      }
+    }
+
+    spinner.text = '  Writing configuration files...';
+
+    // Write package.json
+    const packageJson = { ...templates.PACKAGE_JSON, name: projectName };
+    writeFileSync(join(cwd, 'package.json'), JSON.stringify(packageJson, null, 2));
+
+    // Write .env.example
+    writeFileSync(join(cwd, '.env.example'), templates.ENV_EXAMPLE);
+    writeFileSync(join(cwd, '.env.local'), templates.ENV_EXAMPLE);
+
+    // Write config files
+    writeFileSync(join(cwd, 'drizzle.config.ts'), templates.DRIZZLE_CONFIG);
+    writeFileSync(join(cwd, 'tailwind.config.ts'), templates.TAILWIND_CONFIG);
+    writeFileSync(join(cwd, 'postcss.config.mjs'), templates.POSTCSS_CONFIG);
+    writeFileSync(join(cwd, 'tsconfig.json'), JSON.stringify(templates.TSCONFIG, null, 2));
+    writeFileSync(join(cwd, 'next.config.ts'), templates.NEXT_CONFIG);
+    writeFileSync(join(cwd, '.gitignore'), templates.GITIGNORE);
+
+    spinner.text = '  Writing source files...';
+
+    // Write Supabase files
+    writeFileSync(join(cwd, 'src/lib/supabase/server.ts'), templates.SUPABASE_SERVER);
+    writeFileSync(join(cwd, 'src/lib/supabase/client.ts'), templates.SUPABASE_CLIENT);
+    writeFileSync(join(cwd, 'src/lib/supabase/middleware.ts'), templates.SUPABASE_MIDDLEWARE);
+
+    // Write middleware
+    writeFileSync(join(cwd, 'middleware.ts'), templates.MIDDLEWARE);
+
+    // Write database files
+    writeFileSync(join(cwd, 'src/db/schema.ts'), templates.DB_SCHEMA);
+    writeFileSync(join(cwd, 'src/db/index.ts'), templates.DB_INDEX);
+
+    // Write app files
+    writeFileSync(join(cwd, 'src/app/globals.css'), templates.GLOBALS_CSS);
+    writeFileSync(join(cwd, 'src/app/layout.tsx'), templates.LAYOUT_TSX);
+    writeFileSync(join(cwd, 'src/app/page.tsx'), templates.PAGE_TSX);
+
+    // Write utils
+    writeFileSync(join(cwd, 'src/lib/utils.ts'), templates.UTILS_CN);
+
+    spinner.succeed('Project structure created!');
+
+    // Ask about installing dependencies
+    console.log('');
+    const installDeps = await confirm('  Install dependencies with npm?');
+
+    if (installDeps) {
+      const installSpinner = ora('  Installing dependencies (this may take a minute)...').start();
+      try {
+        execSync('npm install', { cwd, stdio: 'pipe' });
+        installSpinner.succeed('Dependencies installed!');
+      } catch (error) {
+        installSpinner.warn('Could not install dependencies automatically');
+        console.log(chalk.gray('  Run `npm install` manually.\n'));
+      }
+    }
+
+    // Success message
+    console.log(chalk.green(`
+  ╔═══════════════════════════════════════════════════════════╗
+  ║                                                           ║
+  ║   ${chalk.bold('✓ Project scaffolded successfully!')}                    ║
+  ║                                                           ║
+  ╚═══════════════════════════════════════════════════════════╝
+    `));
+
+    console.log(chalk.white('  Project structure:\n'));
+    if (isBeginnerMode) {
+      console.log(chalk.gray('    src/'));
+      console.log(chalk.gray('    ├── app/           ') + chalk.cyan('← Your pages (what users see)'));
+      console.log(chalk.gray('    ├── components/    ') + chalk.cyan('← Reusable UI pieces (buttons, forms)'));
+      console.log(chalk.gray('    ├── lib/           ') + chalk.cyan('← Helper code & connections'));
+      console.log(chalk.gray('    │   └── supabase/  ') + chalk.cyan('← Login & database connection'));
+      console.log(chalk.gray('    ├── db/            ') + chalk.cyan('← Database structure (tables)'));
+      console.log(chalk.gray('    ├── services/      ') + chalk.cyan('← Core app logic (what your app does)'));
+      console.log(chalk.gray('    └── types/         ') + chalk.cyan('← Data shape definitions'));
+    } else {
+      console.log(chalk.gray('    src/'));
+      console.log(chalk.gray('    ├── app/           ') + chalk.cyan('← Pages & layouts'));
+      console.log(chalk.gray('    ├── components/    ') + chalk.cyan('← React components'));
+      console.log(chalk.gray('    ├── lib/           ') + chalk.cyan('← Utilities & clients'));
+      console.log(chalk.gray('    │   └── supabase/  ') + chalk.cyan('← Supabase clients (ready!)'));
+      console.log(chalk.gray('    ├── db/            ') + chalk.cyan('← Database schema & queries'));
+      console.log(chalk.gray('    ├── services/      ') + chalk.cyan('← Business logic'));
+      console.log(chalk.gray('    └── types/         ') + chalk.cyan('← TypeScript types'));
+    }
+    console.log('');
+
+    console.log(chalk.white('  Next steps:\n'));
+    if (isBeginnerMode) {
+      console.log(chalk.cyan('    1. ') + chalk.white('Set up Supabase (free database + login):'));
+      console.log(chalk.gray('       Go to https://supabase.com → Create free account → New Project'));
+      console.log('');
+      console.log(chalk.cyan('    2. ') + chalk.white('Connect your project:'));
+      console.log(chalk.gray('       Open .env.local file and paste your Supabase credentials'));
+      console.log(chalk.gray('       (Found in Supabase: Settings → API)'));
+      console.log('');
+      console.log(chalk.cyan('    3. ') + chalk.white('Start your app:'));
+      console.log(chalk.gray('       Run: npm run dev'));
+      console.log(chalk.gray('       Open: http://localhost:3000 in your browser'));
+      console.log('');
+      console.log(chalk.cyan('    4. ') + chalk.white('Add AI superpowers:'));
+      console.log(chalk.gray('       Run: codebakers init'));
+      console.log(chalk.gray('       Now AI will follow professional coding patterns!\n'));
+    } else {
+      console.log(chalk.cyan('    1. ') + chalk.gray('Update .env.local with your Supabase credentials'));
+      console.log(chalk.cyan('    2. ') + chalk.gray('Run `npm run dev` to start development'));
+      console.log(chalk.cyan('    3. ') + chalk.gray('Run `codebakers init` to add CodeBakers patterns'));
+      console.log(chalk.cyan('    4. ') + chalk.gray('Start building with AI assistance!\n'));
+
+      console.log(chalk.white('  Supabase setup:\n'));
+      console.log(chalk.gray('    1. Create a project at https://supabase.com'));
+      console.log(chalk.gray('    2. Go to Settings → API'));
+      console.log(chalk.gray('    3. Copy URL and anon key to .env.local'));
+      console.log(chalk.gray('    4. Go to Settings → Database → Connection string'));
+      console.log(chalk.gray('    5. Copy DATABASE_URL to .env.local\n'));
+    }
+
+  } catch (error) {
+    spinner.fail('Project scaffolding failed');
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    console.log(chalk.red(`\n  Error: ${message}\n`));
+    process.exit(1);
+  }
+}

package/src/index.ts

@@ -11,6 +11,7 @@ import { init } from './commands/init.js';
 import { serve } from './commands/serve.js';
 import { mcpConfig, mcpUninstall } from './commands/mcp-config.js';
 import { setup } from './commands/setup.js';
+import { scaffold } from './commands/scaffold.js';
 
 const program = new Command();
 
@@ -30,6 +31,12 @@ program
   .description('Interactive project setup wizard')
   .action(init);
 
+program
+  .command('scaffold')
+  .alias('new')
+  .description('Create a new project with full stack scaffolding (Next.js + Supabase + Drizzle)')
+  .action(scaffold);
+
 program
   .command('login')
   .description('Login with your API key')