@nclamvn/vibecode-cli 2.1.0 → 2.2.1

package/bin/vibecode.js

@@ -33,6 +33,9 @@ import {
   securityCommand,
   askCommand,
   migrateCommand,
+  // Phase M Commands
+  templatesCommand,
+  previewCommand,
   VERSION
 } from '../src/index.js';
 
@@ -133,13 +136,46 @@ program
 // ─────────────────────────────────────────────────────────────────────────────
 
 program
-  .command('go <description>')
+  .command('go [description...]')
   .description('Magic mode: one command, full automated build')
-  .option('-t, --template <name>', 'Use template (landing, saas, cli, api)')
+  .option('-t, --template <id>', 'Use a template (run "vibecode templates" to see list)')
+  .option('--name <name>', 'Project/Company name')
+  .option('--color <color>', 'Primary brand color (hex)')
   .option('-i, --iterate', 'Enable iterative build mode')
   .option('-m, --max <n>', 'Max iterations for iterative mode', parseInt)
-  .option('-o, --open', 'Auto-open result when done')
-  .action(goCommand);
+  .option('-o, --open', 'Auto-open folder when done')
+  .option('-p, --preview', 'Start dev server and open browser after build')
+  .option('--port <port>', 'Preview port number', '3000')
+  .option('--qr', 'Show QR code for mobile preview')
+  .action((description, options) => {
+    const desc = Array.isArray(description) ? description.join(' ') : description;
+    goCommand(desc, options);
+  });
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Phase M Commands - Templates
+// ─────────────────────────────────────────────────────────────────────────────
+
+program
+  .command('templates')
+  .alias('tpl')
+  .description('Browse and use project templates')
+  .option('-l, --list', 'List all templates')
+  .option('-i, --info <id>', 'Show template details')
+  .option('-s, --search <query>', 'Search templates')
+  .option('-p, --preview <id>', 'Preview template in browser')
+  .option('-q, --quiet', 'Non-interactive mode')
+  .action(templatesCommand);
+
+program
+  .command('preview')
+  .description('Start dev server and open in browser')
+  .option('-p, --port <port>', 'Port number', '3000')
+  .option('-q, --qr', 'Show QR code for mobile')
+  .option('-s, --stop', 'Stop running preview server')
+  .option('--no-open', 'Do not open browser')
+  .option('-d, --detach', 'Run in background')
+  .action(previewCommand);
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Phase F Commands - Agent Mode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nclamvn/vibecode-cli",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Build software with discipline - AI coding with guardrails",
   "main": "src/index.js",
   "type": "module",
@@ -35,7 +35,9 @@
     "commander": "^12.0.0",
     "fs-extra": "^11.2.0",
     "inquirer": "^9.2.12",
+    "open": "^11.0.0",
     "ora": "^8.0.1",
+    "qrcode": "^1.5.4",
     "yaml": "^2.3.4"
   },
   "devDependencies": {

package/src/commands/go.js

@@ -41,20 +41,31 @@ import {
 import { runTests } from '../core/test-runner.js';
 import { analyzeErrors } from '../core/error-analyzer.js';
 import { ensureDir, appendToFile } from '../utils/files.js';
+import { getTemplate, getCategoryIcon } from '../templates/index.js';
 
 const execAsync = promisify(exec);
 
 /**
  * Magic Mode: One command, full build
  * vibecode go "description" → Everything automated
+ * vibecode go --template <id> → Use template
  */
 export async function goCommand(description, options = {}) {
+  // Handle template mode
+  if (options.template) {
+    return goWithTemplate(options.template, options);
+  }
+
   const startTime = Date.now();
 
+  // Handle description as array (from commander variadic)
+  const desc = Array.isArray(description) ? description.join(' ') : description;
+
   // Validate description
-  if (!description || description.trim().length < 5) {
+  if (!desc || desc.trim().length < 5) {
     printError('Description too short. Please provide more details.');
     console.log(chalk.gray('Example: vibecode go "Landing page for my startup"'));
+    console.log(chalk.gray('Or use: vibecode go --template landing-saas'));
     process.exit(1);
   }
 
@@ -67,7 +78,7 @@ export async function goCommand(description, options = {}) {
   }
 
   // Generate project name
-  const projectName = generateProjectName(description);
+  const projectName = options.name ? sanitizeProjectName(options.name) : generateProjectName(desc);
   const projectPath = path.join(process.cwd(), projectName);
 
   // Check if directory exists
@@ -78,7 +89,7 @@ export async function goCommand(description, options = {}) {
   }
 
   // Show magic header
-  showMagicHeader(description, projectName);
+  showMagicHeader(desc, projectName);
 
   // Create backup of current directory before go command
   // (backup in parent directory since we're creating a new project)
@@ -248,9 +259,26 @@ export async function goCommand(description, options = {}) {
     const duration = ((Date.now() - startTime) / 1000 / 60).toFixed(1);
     showMagicSummary(projectName, projectPath, duration, results, options);
 
-    // Auto-open if requested
-    if (options.open) {
+    // Auto preview if requested
+    if (options.preview) {
+      console.log(chalk.cyan('\n  🚀 Starting preview...\n'));
+      await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for files to settle
+
+      try {
+        const { autoPreview } = await import('./preview.js');
+        await autoPreview(projectPath, {
+          qr: options.qr,
+          port: options.port
+        });
+      } catch (error) {
+        console.log(chalk.yellow(`  ⚠️ Preview failed: ${error.message}`));
+        console.log(chalk.gray(`  Run manually: cd ${projectName} && vibecode preview\n`));
+      }
+    } else if (options.open) {
       await openProject(projectPath);
+    } else {
+      // Show preview hint
+      console.log(chalk.gray(`  💡 Quick preview: ${chalk.cyan(`cd ${projectName} && vibecode preview`)}\n`));
     }
 
   } catch (error) {
@@ -385,3 +413,261 @@ async function openProject(projectPath) {
     console.log(chalk.gray(`Could not auto-open: ${error.message}`));
   }
 }
+
+/**
+ * Sanitize project name
+ */
+function sanitizeProjectName(name) {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .substring(0, 50);
+}
+
+/**
+ * Template Mode: Use pre-defined template
+ * vibecode go --template <id>
+ */
+async function goWithTemplate(templateId, options = {}) {
+  const template = getTemplate(templateId);
+
+  if (!template) {
+    printError(`Template "${templateId}" not found.`);
+    console.log(chalk.gray('Run "vibecode templates" to see available templates.'));
+    process.exit(1);
+  }
+
+  // Check Claude Code availability
+  const claudeAvailable = await isClaudeCodeAvailable();
+  if (!claudeAvailable) {
+    printError('Claude Code CLI not found.');
+    console.log(chalk.gray('Install with: npm install -g @anthropic-ai/claude-code'));
+    process.exit(1);
+  }
+
+  const startTime = Date.now();
+  const icon = getCategoryIcon(template.category);
+
+  // Generate project name
+  const projectName = options.name
+    ? sanitizeProjectName(options.name)
+    : `${templateId}-${Date.now().toString(36)}`;
+  const projectPath = path.join(process.cwd(), projectName);
+
+  // Check if directory exists
+  if (await fs.pathExists(projectPath)) {
+    printError(`Directory already exists: ${projectName}`);
+    console.log(chalk.gray('Use --name to specify a different name.'));
+    process.exit(1);
+  }
+
+  // Show template header
+  showTemplateHeader(template, projectName, icon);
+
+  // Build customized prompt from template
+  let prompt = template.prompt;
+
+  // Apply template variables from options
+  for (const [key, config] of Object.entries(template.variables)) {
+    const value = options[key] !== undefined ? options[key] : config.default;
+    // Replace placeholders like {name} in prompt
+    prompt = prompt.replace(new RegExp(`\\{${key}\\}`, 'gi'), value);
+  }
+
+  // Add customizations from common options
+  if (options.name) {
+    prompt += `\n\nProject/Company name: "${options.name}"`;
+  }
+  if (options.color) {
+    prompt += `\n\nPrimary brand color: ${options.color}`;
+  }
+
+  // Create backup
+  const backup = new BackupManager(process.cwd());
+  await backup.createBackup('go-template');
+
+  // Define steps
+  const steps = [
+    { name: 'INIT', label: 'Creating project', weight: 5 },
+    { name: 'SETUP', label: 'Setting up template', weight: 5 },
+    { name: 'BUILD', label: `Building ${template.name}`, weight: 80 },
+    { name: 'REVIEW', label: 'Running tests', weight: 10 }
+  ];
+
+  const results = {
+    templateId,
+    templateName: template.name
+  };
+  let currentProgress = 0;
+
+  try {
+    // Step 1: INIT
+    await executeStep(steps[0], currentProgress, async () => {
+      await fs.ensureDir(projectPath);
+      process.chdir(projectPath);
+      await createWorkspace();
+      results.projectPath = projectPath;
+    });
+    currentProgress += steps[0].weight;
+
+    // Step 2: SETUP
+    await executeStep(steps[1], currentProgress, async () => {
+      const sessionId = await createSession(projectName);
+      results.sessionId = sessionId;
+
+      // Write template info to session
+      const templateInfo = `# Template: ${template.name}
+
+## ID: ${templateId}
+## Category: ${template.category}
+## Stack: ${template.stack.join(', ')}
+
+## Features
+${template.features.map(f => `- ${f}`).join('\n')}
+
+## Prompt
+${prompt}
+`;
+      await writeSessionFile('template.md', templateInfo);
+      await transitionTo(STATES.INTAKE_CAPTURED, 'template_setup');
+    });
+    currentProgress += steps[1].weight;
+
+    // Step 3: BUILD
+    await executeStep(steps[2], currentProgress, async () => {
+      const sessionPath = await getCurrentSessionPath();
+      const evidencePath = path.join(sessionPath, 'evidence');
+      await ensureDir(evidencePath);
+      const logPath = path.join(evidencePath, 'build.log');
+
+      await transitionTo(STATES.BUILD_IN_PROGRESS, 'template_build_start');
+
+      const fullPrompt = await buildPromptWithContext(prompt, process.cwd());
+
+      await appendToFile(logPath, `[${new Date().toISOString()}] Template Build: ${templateId}\n`);
+      await appendToFile(logPath, `Prompt:\n${prompt}\n\n`);
+
+      const buildResult = await spawnClaudeCode(fullPrompt, {
+        cwd: process.cwd(),
+        logPath: logPath
+      });
+
+      await appendToFile(logPath, `[${new Date().toISOString()}] Build completed with code: ${buildResult.code}\n`);
+
+      // Count files created
+      const files = await fs.readdir(process.cwd());
+      results.filesCreated = files.filter(f => !f.startsWith('.')).length;
+
+      const freshState = await loadState();
+      freshState.build_completed = new Date().toISOString();
+      freshState.template_used = templateId;
+      await saveState(freshState);
+
+      await transitionTo(STATES.BUILD_DONE, 'template_build_done');
+    });
+    currentProgress += steps[2].weight;
+
+    // Step 4: REVIEW
+    await executeStep(steps[3], currentProgress, async () => {
+      const testResult = await runTests(process.cwd());
+      results.testsPassed = testResult.summary.passed;
+      results.testsTotal = testResult.summary.total;
+      results.allPassed = testResult.passed;
+
+      await transitionTo(STATES.REVIEW_PASSED, 'template_review');
+    });
+    currentProgress = 100;
+
+    // Show final progress
+    console.log(renderProgressBar(100));
+    console.log();
+
+    // Show summary
+    const duration = ((Date.now() - startTime) / 1000 / 60).toFixed(1);
+    showTemplateSummary(template, projectName, projectPath, duration, results, options);
+
+    // Auto preview if requested
+    if (options.preview) {
+      console.log(chalk.cyan('\n  🚀 Starting preview...\n'));
+      await sleep(1000); // Wait for files to settle
+
+      try {
+        const { autoPreview } = await import('./preview.js');
+        await autoPreview(projectPath, {
+          qr: options.qr,
+          port: options.port
+        });
+      } catch (error) {
+        console.log(chalk.yellow(`  ⚠️ Preview failed: ${error.message}`));
+        console.log(chalk.gray(`  Run manually: cd ${projectName} && vibecode preview\n`));
+      }
+    } else if (options.open) {
+      await openProject(projectPath);
+    } else {
+      // Show preview hint
+      console.log(chalk.gray(`  💡 Quick preview: ${chalk.cyan(`cd ${projectName} && vibecode preview`)}\n`));
+    }
+
+  } catch (error) {
+    console.log();
+    printError(`Template build failed: ${error.message}`);
+    console.log(chalk.gray(`Project location: ${projectPath}`));
+    console.log(chalk.gray('Check .vibecode/sessions/*/evidence/build.log for details.'));
+    process.exit(1);
+  }
+}
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Show template mode header
+ */
+function showTemplateHeader(template, projectName, icon) {
+  console.log();
+  console.log(chalk.magenta('╭' + '─'.repeat(68) + '╮'));
+  console.log(chalk.magenta('│') + ' '.repeat(68) + chalk.magenta('│'));
+  console.log(chalk.magenta('│') + chalk.bold.white(`   ${icon} TEMPLATE: ${template.name.toUpperCase()}`) + ' '.repeat(Math.max(0, 53 - template.name.length)) + chalk.magenta('│'));
+  console.log(chalk.magenta('│') + ' '.repeat(68) + chalk.magenta('│'));
+
+  const desc = template.description.substring(0, 55);
+  console.log(chalk.magenta('│') + chalk.gray(`   ${desc}`) + ' '.repeat(Math.max(0, 65 - desc.length)) + chalk.magenta('│'));
+
+  console.log(chalk.magenta('│') + chalk.gray(`   Stack: ${template.stack.join(', ').substring(0, 52)}`) + ' '.repeat(Math.max(0, 55 - template.stack.join(', ').length)) + chalk.magenta('│'));
+  console.log(chalk.magenta('│') + chalk.gray(`   → ${projectName}`) + ' '.repeat(Math.max(0, 63 - projectName.length)) + chalk.magenta('│'));
+
+  console.log(chalk.magenta('│') + ' '.repeat(68) + chalk.magenta('│'));
+  console.log(chalk.magenta('╰' + '─'.repeat(68) + '╯'));
+  console.log();
+}
+
+/**
+ * Show template mode summary
+ */
+function showTemplateSummary(template, projectName, projectPath, duration, results, options) {
+  const icon = getCategoryIcon(template.category);
+  const testsStatus = results.allPassed
+    ? chalk.green(`${results.testsPassed}/${results.testsTotal} passed`)
+    : chalk.yellow(`${results.testsPassed}/${results.testsTotal} passed`);
+
+  console.log(chalk.green('╭' + '─'.repeat(68) + '╮'));
+  console.log(chalk.green('│') + ' '.repeat(68) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.bold.white(`   ${icon} ${template.name.toUpperCase()} - COMPLETE!`) + ' '.repeat(Math.max(0, 48 - template.name.length)) + chalk.green('│'));
+  console.log(chalk.green('│') + ' '.repeat(68) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.white(`   📁 Project:  ${projectName}`) + ' '.repeat(Math.max(0, 51 - projectName.length)) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.white(`   📦 Template: ${template.id}`) + ' '.repeat(Math.max(0, 51 - template.id.length)) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.white(`   📄 Files:    ${results.filesCreated} created`) + ' '.repeat(42) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.white(`   🧪 Tests:    `) + testsStatus + ' '.repeat(Math.max(0, 40)) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.white(`   ⏱️  Duration: ${duration} minutes`) + ' '.repeat(Math.max(0, 44 - duration.length)) + chalk.green('│'));
+  console.log(chalk.green('│') + ' '.repeat(68) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.gray(`   💡 Next steps:`) + ' '.repeat(50) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.gray(`      cd ${projectName}`) + ' '.repeat(Math.max(0, 57 - projectName.length)) + chalk.green('│'));
+  console.log(chalk.green('│') + chalk.gray(`      npm install && npm run dev`) + ' '.repeat(33) + chalk.green('│'));
+  console.log(chalk.green('│') + ' '.repeat(68) + chalk.green('│'));
+  console.log(chalk.green('╰' + '─'.repeat(68) + '╯'));
+  console.log();
+}