@nclamvn/vibecode-cli 2.2.0 → 2.2.1

package/bin/vibecode.js

@@ -35,6 +35,7 @@ import {
   migrateCommand,
   // Phase M Commands
   templatesCommand,
+  previewCommand,
   VERSION
 } from '../src/index.js';
 
@@ -142,8 +143,10 @@ program
   .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')
-  .option('-p, --preview', 'Auto-open in browser after build')
+  .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);
@@ -164,6 +167,16 @@ program
   .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.2.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

@@ -259,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) {
@@ -572,9 +589,26 @@ ${prompt}
     const duration = ((Date.now() - startTime) / 1000 / 60).toFixed(1);
     showTemplateSummary(template, projectName, projectPath, duration, results, options);
 
-    // Auto-open if requested
-    if (options.preview || options.open) {
+    // 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) {
@@ -586,6 +620,10 @@ ${prompt}
   }
 }
 
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 /**
  * Show template mode header
  */

package/src/commands/preview.js

@@ -0,0 +1,554 @@
+// ═══════════════════════════════════════════════════════════════════════════════
+// VIBECODE CLI - Preview Command
+// Auto-start dev server and open browser
+// ═══════════════════════════════════════════════════════════════════════════════
+
+import { spawn, exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs/promises';
+import path from 'path';
+import chalk from 'chalk';
+import net from 'net';
+import os from 'os';
+
+const execAsync = promisify(exec);
+
+// Store running processes
+const runningProcesses = new Map();
+
+/**
+ * Preview command entry point
+ */
+export async function previewCommand(options = {}) {
+  const cwd = process.cwd();
+
+  // Stop preview
+  if (options.stop) {
+    return stopPreview(cwd);
+  }
+
+  // Check if it's a valid project
+  const projectType = await detectProjectType(cwd);
+
+  if (!projectType) {
+    console.log(chalk.red(`
+╭────────────────────────────────────────────────────────────────────╮
+│  ❌ NOT A VALID PROJECT                                            │
+│                                                                    │
+│  No package.json found or unsupported project type.               │
+│                                                                    │
+│  Supported: Next.js, React, Vue, Vite, Express                    │
+╰────────────────────────────────────────────────────────────────────╯
+    `));
+    return;
+  }
+
+  // Find available port
+  const requestedPort = parseInt(options.port) || 3000;
+  const port = await findAvailablePort(requestedPort);
+
+  console.log(chalk.cyan(`
+╭────────────────────────────────────────────────────────────────────╮
+│  🚀 VIBECODE PREVIEW                                               │
+╰────────────────────────────────────────────────────────────────────╯
+  `));
+
+  console.log(chalk.gray(`  Project: ${path.basename(cwd)}`));
+  console.log(chalk.gray(`  Type:    ${projectType.name}`));
+  console.log(chalk.gray(`  Port:    ${port}\n`));
+
+  // Step 1: Install dependencies if needed
+  const needsInstall = await checkNeedsInstall(cwd);
+
+  if (needsInstall) {
+    console.log(chalk.yellow('  📦 Installing dependencies...\n'));
+    try {
+      await installDependencies(cwd);
+      console.log(chalk.green('  ✅ Dependencies installed\n'));
+    } catch (error) {
+      console.log(chalk.red(`  ❌ Install failed: ${error.message}\n`));
+      return;
+    }
+  }
+
+  // Step 2: Start dev server
+  console.log(chalk.yellow('  🔧 Starting dev server...\n'));
+
+  let serverProcess;
+  try {
+    serverProcess = await startDevServer(cwd, projectType, port);
+    runningProcesses.set(cwd, serverProcess);
+  } catch (error) {
+    console.log(chalk.red(`  ❌ Failed to start server: ${error.message}\n`));
+    return;
+  }
+
+  // Step 3: Wait for server to be ready
+  const isReady = await waitForServer(port);
+
+  if (!isReady) {
+    console.log(chalk.yellow('  ⚠️ Server may still be starting...\n'));
+  }
+
+  const url = `http://localhost:${port}`;
+
+  // Step 4: Display success
+  console.log(chalk.green(`
+╭────────────────────────────────────────────────────────────────────╮
+│  ✅ PREVIEW READY                                                  │
+│                                                                    │
+│  🌐 Local:   ${url.padEnd(49)}│
+╰────────────────────────────────────────────────────────────────────╯
+  `));
+
+  // Step 5: Show QR code for mobile
+  if (options.qr) {
+    await showQRCode(port);
+  }
+
+  // Step 6: Open browser
+  if (options.open !== false) {
+    try {
+      await openBrowser(url);
+      console.log(chalk.green('  ✅ Opened in browser\n'));
+    } catch (error) {
+      console.log(chalk.yellow(`  ⚠️ Could not open browser: ${error.message}\n`));
+      console.log(chalk.gray(`  Open manually: ${url}\n`));
+    }
+  }
+
+  // Step 7: Show controls
+  console.log(chalk.gray(`  Controls:
+    ${chalk.cyan('vibecode preview --stop')}  Stop server
+    ${chalk.cyan('Ctrl+C')}                   Stop server
+  `));
+
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    console.log(chalk.yellow('\n\n  Stopping server...'));
+    if (serverProcess) {
+      serverProcess.kill();
+    }
+    console.log(chalk.green('  ✅ Server stopped\n'));
+    process.exit(0);
+  });
+
+  // Keep process running unless detached
+  if (!options.detach) {
+    await new Promise(() => {}); // Keep alive
+  }
+}
+
+/**
+ * Detect project type from package.json
+ */
+async function detectProjectType(cwd) {
+  try {
+    const pkgPath = path.join(cwd, 'package.json');
+    const pkgContent = await fs.readFile(pkgPath, 'utf-8');
+    const pkg = JSON.parse(pkgContent);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    const scripts = pkg.scripts || {};
+
+    if (deps.next) {
+      return {
+        name: 'Next.js',
+        devScript: 'dev',
+        defaultPort: 3000,
+        portFlag: '-p'
+      };
+    }
+
+    if (deps.vite) {
+      return {
+        name: 'Vite',
+        devScript: 'dev',
+        defaultPort: 5173,
+        portFlag: '--port'
+      };
+    }
+
+    if (deps['react-scripts']) {
+      return {
+        name: 'Create React App',
+        devScript: 'start',
+        defaultPort: 3000,
+        portEnv: 'PORT'
+      };
+    }
+
+    if (deps.vue || deps['@vue/cli-service']) {
+      return {
+        name: 'Vue',
+        devScript: scripts.dev ? 'dev' : 'serve',
+        defaultPort: 8080,
+        portFlag: '--port'
+      };
+    }
+
+    if (deps.nuxt) {
+      return {
+        name: 'Nuxt',
+        devScript: 'dev',
+        defaultPort: 3000,
+        portFlag: '--port'
+      };
+    }
+
+    if (deps.svelte || deps['@sveltejs/kit']) {
+      return {
+        name: 'SvelteKit',
+        devScript: 'dev',
+        defaultPort: 5173,
+        portFlag: '--port'
+      };
+    }
+
+    if (deps.express || deps.fastify || deps.koa || deps.hono) {
+      return {
+        name: 'Node.js Server',
+        devScript: scripts.dev ? 'dev' : 'start',
+        defaultPort: 3000,
+        portEnv: 'PORT'
+      };
+    }
+
+    // Generic with dev script
+    if (scripts.dev) {
+      return {
+        name: 'Generic',
+        devScript: 'dev',
+        defaultPort: 3000,
+        portEnv: 'PORT'
+      };
+    }
+
+    if (scripts.start) {
+      return {
+        name: 'Generic',
+        devScript: 'start',
+        defaultPort: 3000,
+        portEnv: 'PORT'
+      };
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Check if node_modules needs to be installed
+ */
+async function checkNeedsInstall(cwd) {
+  const nodeModulesPath = path.join(cwd, 'node_modules');
+  try {
+    await fs.access(nodeModulesPath);
+    // Check if node_modules has content
+    const contents = await fs.readdir(nodeModulesPath);
+    return contents.length < 5; // Likely incomplete install
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Install dependencies
+ */
+async function installDependencies(cwd) {
+  return new Promise((resolve, reject) => {
+    const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    let i = 0;
+
+    const interval = setInterval(() => {
+      process.stdout.write(`\r  ${spinner[i++ % spinner.length]} Installing...`);
+    }, 100);
+
+    const child = spawn('npm', ['install'], {
+      cwd,
+      stdio: ['ignore', 'pipe', 'pipe'],
+      shell: true
+    });
+
+    let stderr = '';
+    child.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+
+    child.on('close', (code) => {
+      clearInterval(interval);
+      process.stdout.write('\r                              \r');
+
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(stderr || `npm install failed with code ${code}`));
+      }
+    });
+
+    child.on('error', (err) => {
+      clearInterval(interval);
+      reject(err);
+    });
+  });
+}
+
+/**
+ * Start development server
+ */
+async function startDevServer(cwd, projectType, port) {
+  const env = { ...process.env };
+
+  // Set port via environment variable if needed
+  if (projectType.portEnv) {
+    env[projectType.portEnv] = String(port);
+  }
+
+  // Build the command
+  const args = ['run', projectType.devScript];
+
+  // Add port flag if supported
+  if (projectType.portFlag) {
+    args.push('--', projectType.portFlag, String(port));
+  }
+
+  const child = spawn('npm', args, {
+    cwd,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    shell: true,
+    env,
+    detached: false
+  });
+
+  // Log output for debugging
+  child.stdout.on('data', (data) => {
+    const output = data.toString().trim();
+    // Show ready messages
+    if (output.toLowerCase().includes('ready') ||
+        output.toLowerCase().includes('started') ||
+        output.toLowerCase().includes('listening') ||
+        output.toLowerCase().includes('compiled')) {
+      console.log(chalk.gray(`  ${output.substring(0, 60)}`));
+    }
+  });
+
+  child.stderr.on('data', (data) => {
+    const output = data.toString().trim();
+    // Only show actual errors, not warnings
+    if (output.toLowerCase().includes('error') &&
+        !output.toLowerCase().includes('warning')) {
+      console.log(chalk.red(`  ${output.substring(0, 60)}`));
+    }
+  });
+
+  child.on('error', (error) => {
+    console.log(chalk.red(`  Server error: ${error.message}`));
+  });
+
+  return child;
+}
+
+/**
+ * Wait for server to be ready by checking port
+ */
+async function waitForServer(port, maxAttempts = 30) {
+  const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  let i = 0;
+
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    process.stdout.write(`\r  ${spinner[i++ % spinner.length]} Waiting for server...`);
+
+    const isReady = await checkPort(port);
+
+    if (isReady) {
+      process.stdout.write('\r  ✅ Server ready              \n');
+      return true;
+    }
+
+    await sleep(1000);
+  }
+
+  process.stdout.write('\r  ⚠️ Server taking longer than expected\n');
+  return false;
+}
+
+/**
+ * Check if a port is in use (server is running)
+ */
+function checkPort(port) {
+  return new Promise((resolve) => {
+    const socket = new net.Socket();
+
+    socket.setTimeout(1000);
+
+    socket.on('connect', () => {
+      socket.destroy();
+      resolve(true);
+    });
+
+    socket.on('timeout', () => {
+      socket.destroy();
+      resolve(false);
+    });
+
+    socket.on('error', () => {
+      socket.destroy();
+      resolve(false);
+    });
+
+    socket.connect(port, '127.0.0.1');
+  });
+}
+
+/**
+ * Find an available port starting from the given port
+ */
+async function findAvailablePort(startPort) {
+  let port = startPort;
+
+  while (port < startPort + 100) {
+    const inUse = await checkPort(port);
+    if (!inUse) {
+      return port;
+    }
+    port++;
+  }
+
+  return startPort;
+}
+
+/**
+ * Open URL in default browser
+ */
+async function openBrowser(url) {
+  try {
+    const open = (await import('open')).default;
+    await open(url);
+  } catch (error) {
+    // Fallback for different OS
+    const { platform } = process;
+    const commands = {
+      darwin: `open "${url}"`,
+      win32: `start "" "${url}"`,
+      linux: `xdg-open "${url}"`
+    };
+
+    if (commands[platform]) {
+      await execAsync(commands[platform]);
+    } else {
+      throw new Error('Unsupported platform');
+    }
+  }
+}
+
+/**
+ * Show QR code for mobile access
+ */
+async function showQRCode(port) {
+  try {
+    // Get local IP
+    const nets = os.networkInterfaces();
+    let localIP = 'localhost';
+
+    for (const name of Object.keys(nets)) {
+      for (const netInterface of nets[name]) {
+        if (netInterface.family === 'IPv4' && !netInterface.internal) {
+          localIP = netInterface.address;
+          break;
+        }
+      }
+      if (localIP !== 'localhost') break;
+    }
+
+    const networkUrl = `http://${localIP}:${port}`;
+
+    // Try to generate QR code
+    try {
+      const QRCode = (await import('qrcode')).default;
+      const qrString = await QRCode.toString(networkUrl, {
+        type: 'terminal',
+        small: true
+      });
+
+      console.log(chalk.cyan('\n  📱 Scan to open on mobile:\n'));
+      // Indent QR code
+      const indentedQR = qrString.split('\n').map(line => '  ' + line).join('\n');
+      console.log(indentedQR);
+      console.log(chalk.gray(`\n  Network: ${networkUrl}\n`));
+    } catch {
+      // QR code package not available, just show URL
+      console.log(chalk.cyan('\n  📱 Mobile access:\n'));
+      console.log(chalk.white(`  ${networkUrl}\n`));
+      console.log(chalk.gray('  (Install qrcode for QR: npm i qrcode)\n'));
+    }
+  } catch (error) {
+    console.log(chalk.yellow(`  ⚠️ Could not get network info: ${error.message}\n`));
+  }
+}
+
+/**
+ * Stop running preview server
+ */
+async function stopPreview(cwd) {
+  const runningProcess = runningProcesses.get(cwd);
+
+  if (runningProcess) {
+    runningProcess.kill();
+    runningProcesses.delete(cwd);
+    console.log(chalk.green('\n  ✅ Preview server stopped\n'));
+    return;
+  }
+
+  // Try to kill any process on common dev ports
+  console.log(chalk.yellow('\n  Attempting to stop dev servers...\n'));
+
+  try {
+    const { platform } = process;
+
+    if (platform === 'win32') {
+      // Windows
+      await execAsync('netstat -ano | findstr :3000 | findstr LISTENING').catch(() => {});
+    } else {
+      // Unix-like
+      await execAsync('lsof -ti:3000 | xargs kill -9 2>/dev/null || true');
+      await execAsync('lsof -ti:3001 | xargs kill -9 2>/dev/null || true');
+      await execAsync('lsof -ti:5173 | xargs kill -9 2>/dev/null || true');
+      await execAsync('lsof -ti:8080 | xargs kill -9 2>/dev/null || true');
+    }
+
+    console.log(chalk.green('  ✅ Dev servers stopped\n'));
+  } catch {
+    console.log(chalk.gray('  No running servers found.\n'));
+  }
+}
+
+/**
+ * Sleep helper
+ */
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Auto preview for use after builds
+ * Called from go.js after successful build
+ */
+export async function autoPreview(projectPath, options = {}) {
+  const originalCwd = process.cwd();
+
+  try {
+    process.chdir(projectPath);
+    await previewCommand({
+      open: true,
+      qr: options.qr || false,
+      port: options.port,
+      detach: true, // Don't block in auto mode
+      ...options
+    });
+  } catch (error) {
+    console.log(chalk.yellow(`  ⚠️ Preview failed: ${error.message}\n`));
+  } finally {
+    process.chdir(originalCwd);
+  }
+}

package/src/index.js

@@ -58,7 +58,7 @@ export { securityCommand } from './commands/security.js';
 export { askCommand } from './commands/ask.js';
 export { migrateCommand } from './commands/migrate.js';
 
-// Phase M Commands - Templates
+// Phase M Commands - Templates & Preview
 export { templatesCommand } from './commands/templates.js';
 export {
   TEMPLATES,
@@ -71,6 +71,8 @@ export {
   isValidTemplate
 } from './templates/index.js';
 
+export { previewCommand, autoPreview } from './commands/preview.js';
+
 // UI exports (Phase H2: Dashboard)
 export {
   ProgressDashboard,