baraqex 1.0.63 → 1.0.65

package/bin/baraqex.js

@@ -8,33 +8,60 @@ import { createSpinner } from 'nanospinner';
 import path from 'path';
 import fs from 'fs-extra';
 import { fileURLToPath } from 'url';
-import { exec } from 'child_process';
+import { exec, spawn } from 'child_process';
 import { promisify } from 'util';
 import boxen from 'boxen';
 import terminalLink from 'terminal-link';
 import updateNotifier from 'update-notifier';
 import ora from 'ora';
 import figlet from 'figlet';
+import semver from 'semver';
+import open from 'open';
+import glob from 'glob';
+import { WebSocketServer } from 'ws';
+import chokidar from 'chokidar';
+import { performance } from 'perf_hooks';
+import os from 'os';
+import { createRequire } from 'module';
 
 // Convert to ESM-friendly __dirname equivalent
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const execAsync = promisify(exec);
+const require = createRequire(import.meta.url);
 
-// Check for package updates
+// Enhanced package info with comprehensive update checking
+let packageInfo = {};
 try {
-  const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
-  const notifier = updateNotifier({ pkg, updateCheckInterval: 1000 * 60 * 60 * 24 });
+  packageInfo = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
+  const notifier = updateNotifier({ 
+    pkg: packageInfo, 
+    updateCheckInterval: 1000 * 60 * 60 * 12, // Check every 12 hours
+    shouldNotifyInNpmScript: true
+  });
   
-  if (notifier.update) {
+  if (notifier.update && notifier.update.latest !== packageInfo.version) {
+    const versionDiff = semver.diff(notifier.update.current, notifier.update.latest);
+    const urgency = versionDiff === 'major' ? '🚨 MAJOR' : 
+                   versionDiff === 'minor' ? '⚠️ MINOR' : 
+                   '🔧 PATCH';
+    
     const updateMessage = boxen(
-      `Update available: ${chalk.dim(notifier.update.current)} → ${chalk.green(notifier.update.latest)}\n` +
-      `Run ${chalk.cyan('npm i -g baraqex')} to update`,
+      `${chalk.yellow(`📦 Update available! ${urgency} Update`)}\n\n` +
+      `${chalk.dim('Current:')} ${chalk.red(notifier.update.current)}\n` +
+      `${chalk.dim('Latest:')} ${chalk.green(notifier.update.latest)}\n\n` +
+      `${chalk.cyan('Run one of these commands to update:')}\n` +
+      `• ${chalk.yellow('npm i -g baraqex@latest')}\n` +
+      `• ${chalk.yellow('yarn global add baraqex@latest')}\n` +
+      `• ${chalk.yellow('pnpm add -g baraqex@latest')}\n\n` +
+      `${chalk.dim('Changelog:')} ${terminalLink('View changes', `https://github.com/mohamedx2/baraqex/releases/tag/v${notifier.update.latest}`)}\n` +
+      `${chalk.dim('Documentation:')} ${terminalLink('Updated docs', 'https://www.baraqex.tech/docs')}`,
       {
         padding: 1,
         margin: 1,
         borderStyle: 'round',
-        borderColor: 'cyan'
+        borderColor: versionDiff === 'major' ? 'red' : versionDiff === 'minor' ? 'yellow' : 'green',
+        title: '🎯 Baraqex Update Available'
       }
     );
     console.log(updateMessage);
@@ -43,1280 +70,1140 @@ try {
   // Silently continue if update check fails
 }
 
-// CLI instance
+// Enhanced CLI instance with global configuration
 const program = new Command();
 
-// Create beautiful ASCII art banner with gradient colors
+// Global configuration store
+const globalConfig = {
+  analytics: true,
+  autoUpdate: true,
+  defaultTemplate: 'basic-app',
+  defaultPackageManager: 'npm',
+  telemetry: true
+};
+
+// Load user preferences
+const configPath = path.join(os.homedir(), '.baraqex', 'config.json');
+try {
+  if (fs.existsSync(configPath)) {
+    const userConfig = fs.readJsonSync(configPath);
+    Object.assign(globalConfig, userConfig);
+  }
+} catch (error) {
+  // Use defaults if config can't be loaded
+}
+
+// Performance monitoring
+const perfMonitor = {
+  startTime: performance.now(),
+  checkpoints: new Map(),
+  
+  checkpoint(name) {
+    this.checkpoints.set(name, performance.now() - this.startTime);
+  },
+  
+  report() {
+    const total = performance.now() - this.startTime;
+    console.log(chalk.dim(`\n⏱️ Performance: ${total.toFixed(2)}ms total`));
+    for (const [name, time] of this.checkpoints) {
+      console.log(chalk.dim(`   • ${name}: ${time.toFixed(2)}ms`));
+    }
+  }
+};
+
+// Enhanced banner with system information and tips
 const displayBanner = () => {
   const titleText = figlet.textSync('Baraqex', { 
-    font: 'Standard',
-    horizontalLayout: 'default',
-    verticalLayout: 'default' 
+    font: 'ANSI Shadow',
+    horizontalLayout: 'fitted',
+    verticalLayout: 'fitted' 
   });
   
-  console.log('\n' + gradient.pastel.multiline(titleText));
+  console.log('\n' + gradient(['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']).multiline(titleText));
+  
+  const stats = getProjectStats();
+  const systemInfo = getSystemInfo();
+  
+  // Daily tip system
+  const tips = [
+    "💡 Use 'baraqex dev --open' to automatically open your browser",
+    "🚀 Try 'baraqex add:component Button --typescript' for TypeScript components",
+    "📊 Run 'baraqex doctor' to check your project health",
+    "🎨 Use 'baraqex add:layout Dashboard --sidebar' for instant layouts",
+    "⚡ Enable hot reload with 'baraqex dev --hot'",
+    "📱 Generate PWA with 'baraqex add:pwa'",
+    "🔧 Customize builds with 'baraqex build --analyze'",
+    "🌐 Deploy instantly with 'baraqex deploy --platform vercel'"
+  ];
+  
+  const dailyTip = tips[new Date().getDate() % tips.length];
   
   console.log(boxen(
-    `${chalk.bold('A powerful full-stack framework for modern web development')}\n\n` +
-    `${chalk.dim('Version:')} ${chalk.cyan(JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')).version)}\n` +
-    `${chalk.dim('Website:')} ${terminalLink('www.baraqex.tech', 'https://www.baraqex.tech')}\n` +
-    `${chalk.dim('Documentation:')} ${terminalLink('GitHub', 'https://github.com/mohamedx2/baraqex')}`,
+    `${chalk.bold.cyan('🚀 Modern Full-Stack Framework with AI-Powered Development')}\n\n` +
+    `${chalk.dim('Version:')} ${chalk.cyan(packageInfo.version)} ${chalk.dim('•')} ${chalk.dim('Node:')} ${chalk.green(process.version)}\n` +
+    `${chalk.dim('Platform:')} ${chalk.green(systemInfo.platform)} ${chalk.dim('•')} ${chalk.dim('Memory:')} ${chalk.green(systemInfo.memory)}\n\n` +
+    (stats.isProject ? 
+      `${chalk.bold.green('✓ Current Project:')} ${chalk.cyan(stats.name)}\n` +
+      `${chalk.dim('•')} ${chalk.green(stats.components)} components ${chalk.dim('•')} ${chalk.green(stats.pages)} pages ${chalk.dim('•')} ${chalk.green(stats.apis)} APIs\n` +
+      `${chalk.dim('•')} Bundle size: ${chalk.yellow(stats.bundleSize)} ${chalk.dim('•')} Last build: ${chalk.yellow(stats.lastBuild)}\n\n` :
+      `${chalk.yellow('💡 Quick Start:')} Run ${chalk.cyan('baraqex create my-app')} to begin\n\n`
+    ) +
+    `${chalk.bold.magenta('🌟 Quick Links:')}\n` +
+    `${chalk.dim('•')} ${terminalLink('📚 Documentation', 'https://www.baraqex.tech/docs')} ${chalk.dim('•')} ${terminalLink('🎯 Examples', 'https://www.baraqex.tech/examples')}\n` +
+    `${chalk.dim('•')} ${terminalLink('💬 Discord', 'https://discord.gg/baraqex')} ${chalk.dim('•')} ${terminalLink('🐛 Issues', 'https://github.com/mohamedx2/baraqex/issues')}\n\n` +
+    `${chalk.bold.blue('💡 Daily Tip:')} ${dailyTip}`,
     {
       padding: 1,
       margin: { top: 1, bottom: 1 },
       borderStyle: 'round',
-      borderColor: 'cyan'
+      borderColor: 'cyan',
+      title: '🎯 Baraqex CLI',
+      titleAlignment: 'center'
     }
   ));
 };
 
-// Version and description
-program
-  .name('baraqex')
-  .description('CLI for Baraqex - A powerful full-stack framework for modern web development')
-  .version(JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')).version);
+// Enhanced system information gathering
+const getSystemInfo = () => {
+  const totalMem = os.totalmem();
+  const freeMem = os.freemem();
+  const usedMem = totalMem - freeMem;
+  const memUsage = ((usedMem / totalMem) * 100).toFixed(1);
+  
+  return {
+    platform: `${os.platform()} ${os.arch()}`,
+    memory: `${(usedMem / 1024 / 1024 / 1024).toFixed(1)}GB / ${(totalMem / 1024 / 1024 / 1024).toFixed(1)}GB (${memUsage}%)`,
+    cpu: os.cpus()[0]?.model || 'Unknown',
+    cores: os.cpus().length,
+    nodeVersion: process.version,
+    npmVersion: null // Will be populated by dependency check
+  };
+};
+
+// Enhanced project statistics with bundle analysis
+const getProjectStats = () => {
+  try {
+    const pkg = path.join(process.cwd(), 'package.json');
+    if (!fs.existsSync(pkg)) {
+      return { isProject: false };
+    }
+    
+    const packageJson = fs.readJsonSync(pkg);
+    const isBaraqexProject = packageJson.dependencies?.baraqex || packageJson.devDependencies?.baraqex;
+    
+    if (!isBaraqexProject) {
+      return { isProject: false };
+    }
+    
+    // Enhanced file counting with better patterns
+    const componentsCount = countFiles('./src/components', ['.tsx', '.jsx', '.ts', '.js', '.vue']);
+    const pagesCount = countFiles('./src/pages', ['.tsx', '.jsx', '.ts', '.js']);
+    const apisCount = countFiles('./src/api', ['.tsx', '.jsx', '.ts', '.js']);
+    const testsCount = countFiles('./src', ['.test.ts', '.test.js', '.spec.ts', '.spec.js']);
+    
+    // Bundle size analysis
+    const bundleSize = getBundleSize();
+    const lastBuild = getLastBuildTime();
+    
+    return {
+      isProject: true,
+      name: packageJson.name,
+      version: packageJson.version,
+      components: componentsCount,
+      pages: pagesCount,
+      apis: apisCount,
+      tests: testsCount,
+      bundleSize,
+      lastBuild,
+      scripts: Object.keys(packageJson.scripts || {}).length,
+      dependencies: Object.keys(packageJson.dependencies || {}).length + 
+                   Object.keys(packageJson.devDependencies || {}).length
+    };
+  } catch (error) {
+    return { isProject: false };
+  }
+};
+
+// Enhanced file counting with exclusion patterns
+const countFiles = (dir, extensions) => {
+  try {
+    if (!fs.existsSync(dir)) return 0;
+    
+    const pattern = `${dir}/**/*.{${extensions.map(ext => ext.replace('.', '')).join(',')}}`;
+    const files = glob.sync(pattern, { 
+      ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/.next/**'] 
+    });
+    
+    return files.length;
+  } catch (error) {
+    return 0;
+  }
+};
+
+// Bundle size analysis
+const getBundleSize = () => {
+  try {
+    const distPath = path.join(process.cwd(), 'dist');
+    const buildPath = path.join(process.cwd(), 'build');
+    const targetPath = fs.existsSync(distPath) ? distPath : 
+                      fs.existsSync(buildPath) ? buildPath : null;
+    
+    if (!targetPath) return 'No build';
+    
+    const files = glob.sync(`${targetPath}/**/*`, { nodir: true });
+    const totalSize = files.reduce((acc, file) => {
+      try {
+        return acc + fs.statSync(file).size;
+      } catch {
+        return acc;
+      }
+    }, 0);
+    
+    const sizeInMB = (totalSize / 1024 / 1024).toFixed(1);
+    return `${sizeInMB}MB`;
+  } catch (error) {
+    return 'Unknown';
+  }
+};
 
-// Helper for creating visually consistent sections
-const createSection = (title) => {
-  console.log('\n' + chalk.bold.cyan(`◆ ${title}`));
-  console.log(chalk.cyan('─'.repeat(60)) + '\n');
+// Last build time
+const getLastBuildTime = () => {
+  try {
+    const distPath = path.join(process.cwd(), 'dist');
+    const buildPath = path.join(process.cwd(), 'build');
+    const targetPath = fs.existsSync(distPath) ? distPath : 
+                      fs.existsSync(buildPath) ? buildPath : null;
+    
+    if (!targetPath) return 'Never';
+    
+    const stat = fs.statSync(targetPath);
+    const diffMs = Date.now() - stat.mtime.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+    
+    if (diffDays > 0) return `${diffDays}d ago`;
+    if (diffHours > 0) return `${diffHours}h ago`;
+    return 'Recently';
+  } catch (error) {
+    return 'Unknown';
+  }
 };
 
-// Helper for checking dependencies with improved feedback
+// Enhanced dependency checking with version validation
 async function checkDependencies() {
   const spinner = ora({
-    text: 'Checking environment...',
-    spinner: 'dots',
+    text: 'Analyzing development environment...',
+    spinner: 'dots12',
     color: 'cyan'
   }).start();
   
   try {
-    // Check Node version
+    const checks = [];
+    const recommendations = [];
+    
+    // Node.js version check with LTS recommendations
     const nodeVersionOutput = await execAsync('node --version');
     const nodeVersion = nodeVersionOutput.stdout.trim().replace('v', '');
-    const requiredNodeVersion = '14.0.0';
+    const requiredNodeVersion = '16.0.0';
+    const recommendedNodeVersion = '18.0.0';
+    
+    if (semver.lt(nodeVersion, requiredNodeVersion)) {
+      checks.push({
+        name: 'Node.js',
+        status: 'error',
+        current: nodeVersion,
+        required: requiredNodeVersion,
+        message: `Node.js ${requiredNodeVersion}+ required`
+      });
+    } else if (semver.lt(nodeVersion, recommendedNodeVersion)) {
+      checks.push({
+        name: 'Node.js',
+        status: 'warning',
+        current: nodeVersion,
+        recommended: recommendedNodeVersion,
+        message: `Consider upgrading to Node.js ${recommendedNodeVersion}+ (LTS)`
+      });
+      recommendations.push(`Upgrade Node.js to v${recommendedNodeVersion} for better performance`);
+    } else {
+      checks.push({
+        name: 'Node.js',
+        status: 'success',
+        current: nodeVersion,
+        message: 'Excellent version'
+      });
+    }
     
-    if (compareVersions(nodeVersion, requiredNodeVersion) < 0) {
-      spinner.fail(`Node.js ${requiredNodeVersion}+ required, but found ${nodeVersion}`);
-      console.log(chalk.yellow(`Please upgrade Node.js: ${terminalLink('https://nodejs.org', 'https://nodejs.org')}`));
-      return false;
+    // Package managers check with performance comparison
+    const packageManagers = [];
+    try {
+      const npmVersion = await execAsync('npm --version');
+      packageManagers.push({ name: 'npm', version: npmVersion.stdout.trim(), speed: '⭐⭐⭐' });
+    } catch (error) {}
+    
+    try {
+      const pnpmVersion = await execAsync('pnpm --version');
+      packageManagers.push({ name: 'pnpm', version: pnpmVersion.stdout.trim(), speed: '⭐⭐⭐⭐⭐' });
+      recommendations.push('pnpm detected - fastest package manager available!');
+    } catch (error) {}
+    
+    try {
+      const yarnVersion = await execAsync('yarn --version');
+      packageManagers.push({ name: 'yarn', version: yarnVersion.stdout.trim(), speed: '⭐⭐⭐⭐' });
+    } catch (error) {}
+    
+    if (packageManagers.length > 0) {
+      checks.push({
+        name: 'Package Managers',
+        status: 'info',
+        message: packageManagers.map(pm => `${pm.name} v${pm.version} ${pm.speed}`).join(', ')
+      });
+    }
+    
+    // Git check with repository analysis
+    try {
+      await execAsync('git --version');
+      checks.push({
+        name: 'Git',
+        status: 'success',
+        message: 'Available'
+      });
+      
+      // Check if in a git repository
+      try {
+        await execAsync('git rev-parse --git-dir');
+        const remoteOutput = await execAsync('git remote -v');
+        if (remoteOutput.stdout.includes('github.com')) {
+          checks.push({
+            name: 'Repository',
+            status: 'info',
+            message: 'GitHub repository detected'
+          });
+        }
+      } catch (error) {
+        recommendations.push('Initialize Git repository for version control');
+      }
+    } catch (error) {
+      checks.push({
+        name: 'Git',
+        status: 'warning',
+        message: 'Not available (recommended for version control)'
+      });
+      recommendations.push('Install Git for version control');
+    }
+    
+    // VS Code check
+    try {
+      await execAsync('code --version');
+      checks.push({
+        name: 'VS Code',
+        status: 'success',
+        message: 'Available (recommended editor)'
+      });
+    } catch (error) {
+      recommendations.push('Install VS Code for the best development experience');
     }
     
-    // Check npm version
-    const npmVersionOutput = await execAsync('npm --version');
-    const npmVersion = npmVersionOutput.stdout.trim();
-    const requiredNpmVersion = '6.0.0';
+    // Docker check (for deployment)
+    try {
+      await execAsync('docker --version');
+      checks.push({
+        name: 'Docker',
+        status: 'success',
+        message: 'Available (great for deployment)'
+      });
+    } catch (error) {}
     
-    if (compareVersions(npmVersion, requiredNpmVersion) < 0) {
-      spinner.fail(`npm ${requiredNpmVersion}+ required, but found ${npmVersion}`);
-      console.log(chalk.yellow(`Please upgrade npm: ${chalk.cyan('npm install -g npm')}`));
-      return false;
+    const hasErrors = checks.some(check => check.status === 'error');
+    const hasWarnings = checks.some(check => check.status === 'warning');
+    
+    if (hasErrors) {
+      spinner.fail('Environment has critical issues');
+    } else if (hasWarnings) {
+      spinner.warn('Environment ready with recommendations');
+    } else {
+      spinner.succeed('Environment optimally configured');
     }
     
-    spinner.succeed(`Environment ready: Node ${chalk.green(nodeVersion)}, npm ${chalk.green(npmVersion)}`);
-    return true;
+    // Display detailed results
+    console.log('\n' + boxen(
+      checks.map(check => {
+        const icon = {
+          success: '✅',
+          warning: '⚠️',
+          error: '❌',
+          info: 'ℹ️'
+        }[check.status];
+        
+        return `${icon} ${chalk.bold(check.name)}: ${check.message}` +
+               (check.current ? ` ${chalk.dim(`(v${check.current})`)}` : '');
+      }).join('\n') +
+      (recommendations.length > 0 ? '\n\n' + chalk.bold.yellow('💡 Recommendations:\n') +
+       recommendations.map(rec => `• ${rec}`).join('\n') : ''),
+      {
+        title: 'Environment Analysis',
+        padding: 1,
+        borderColor: hasErrors ? 'red' : hasWarnings ? 'yellow' : 'green'
+      }
+    ));
+    
+    return !hasErrors;
   } catch (error) {
     spinner.fail('Environment check failed');
-    console.log(chalk.red('Error: Node.js and npm are required to use this tool.'));
+    console.log(chalk.red('Error: Could not verify environment requirements.'));
     return false;
   }
 }
 
-// Compare versions helper
-function compareVersions(a, b) {
-  const aParts = a.split('.').map(Number);
-  const bParts = b.split('.').map(Number);
-  
-  for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
-    const aVal = aParts[i] || 0;
-    const bVal = bParts[i] || 0;
-    
-    if (aVal > bVal) return 1;
-    if (aVal < bVal) return -1;
-  }
-  
-  return 0;
-}
-
-// Choose template interactively with improved visualization
+// Enhanced template selection with live previews
 async function chooseTemplate() {
   const templatesPath = path.join(__dirname, '..', 'templates');
   const templates = fs.readdirSync(templatesPath).filter(file =>
     fs.statSync(path.join(templatesPath, file)).isDirectory()
   );
   
-  // Emoji indicators for templates
-  const templateIcons = {
-    'basic-app': '🚀',
-    'ssr-template': '🌐',
-    'fullstack-app': '⚡',
-    'go-wasm-app': '🔄',
-  };
-
-  // Detailed descriptions
-  const templateDescriptions = {
-    'basic-app': 'Single-page application with just the essentials. Perfect for learning the framework or building simple apps.',
-    'ssr-template': 'Server-side rendered application with hydration. Optimized for SEO and fast initial load.',
-    'fullstack-app': 'Complete solution with API routes, authentication, and database integration ready to go.',
-    'go-wasm-app': 'WebAssembly integration with Go for high-performance computing in the browser and Node.js.'
+  const templateData = {
+    'basic-app': {
+      icon: '🚀',
+      name: 'Basic App',
+      description: 'Perfect for learning and simple applications',
+      features: ['Client-side rendering', 'React hooks', 'Tailwind CSS', 'Hot reload', 'TypeScript support'],
+      buildTime: '~30s',
+      complexity: 'Beginner',
+      useCase: 'Learning, prototypes, simple apps',
+      bundleSize: '~150KB',
+      performance: '⭐⭐⭐⭐',
+      seo: '⭐⭐',
+      tags: ['SPA', 'React', 'Beginner'],
+      preview: 'https://basic-app.baraqex.tech'
+    },
+    'ssr-template': {
+      icon: '🌐',
+      name: 'SSR Template',
+      description: 'Server-side rendering with excellent SEO',
+      features: ['SSR + Hydration', 'SEO optimized', 'Fast initial load', 'Dynamic routes', 'Meta management'],
+      buildTime: '~45s',
+      complexity: 'Intermediate',
+      useCase: 'Marketing sites, blogs, e-commerce',
+      bundleSize: '~200KB',
+      performance: '⭐⭐⭐⭐⭐',
+      seo: '⭐⭐⭐⭐⭐',
+      tags: ['SSR', 'SEO', 'Production'],
+      preview: 'https://ssr.baraqex.tech'
+    },
+    'fullstack-app': {
+      icon: '⚡',
+      name: 'Fullstack App',
+      description: 'Complete solution with backend integration',
+      features: ['API routes', 'Database ORM', 'Authentication', 'File uploads', 'Real-time features'],
+      buildTime: '~60s',
+      complexity: 'Advanced',
+      useCase: 'Production apps, dashboards, SaaS',
+      bundleSize: '~300KB',
+      performance: '⭐⭐⭐⭐',
+      seo: '⭐⭐⭐⭐',
+      tags: ['Fullstack', 'Database', 'Auth'],
+      preview: 'https://fullstack.baraqex.tech'
+    },
+    'go-wasm-app': {
+      icon: '🔄',
+      name: 'Go WASM App',
+      description: 'High-performance computing with WebAssembly',
+      features: ['Go + WASM', 'Performance critical', 'Cross-platform', 'Advanced builds', 'Native speed'],
+      buildTime: '~90s',
+      complexity: 'Expert',
+      useCase: 'Scientific computing, games, tools',
+      bundleSize: '~500KB',
+      performance: '⭐⭐⭐⭐⭐',
+      seo: '⭐⭐',
+      tags: ['WASM', 'Performance', 'Go'],
+      preview: 'https://wasm.baraqex.tech'
+    },
+    'pwa-app': {
+      icon: '📱',
+      name: 'PWA App',
+      description: 'Progressive Web App with offline capabilities',
+      features: ['Service workers', 'Offline support', 'Push notifications', 'App-like experience'],
+      buildTime: '~50s',
+      complexity: 'Intermediate',
+      useCase: 'Mobile-first apps, offline apps',
+      bundleSize: '~250KB',
+      performance: '⭐⭐⭐⭐⭐',
+      seo: '⭐⭐⭐⭐',
+      tags: ['PWA', 'Mobile', 'Offline'],
+      preview: 'https://pwa.baraqex.tech'
+    }
   };
   
   console.log(boxen(
-    `${chalk.bold('Available Project Templates')}\n\n` +
+    `${chalk.bold.cyan('🎯 Choose Your Project Template')}\n\n` +
+    `${chalk.dim('💡 Each template is production-ready and includes best practices')}\n\n` +
     templates.map(template => {
-      const icon = templateIcons[template] || '📦';
-      const shortDesc = {
-        'basic-app': 'Simple client-side application',
-        'ssr-template': 'Server-side rendering with hydration',
-        'fullstack-app': 'Complete fullstack application with API'
-      }[template] || 'Application template';
+      const data = templateData[template] || {
+        icon: '📦',
+        name: template,
+        description: 'Custom template',
+        features: ['Basic functionality'],
+        complexity: 'Unknown',
+        tags: ['Custom']
+      };
       
-      return `${icon} ${chalk.cyan(template)}\n   ${chalk.dim(shortDesc)}`;
+      return `${data.icon} ${chalk.bold.cyan(data.name)} ${chalk.dim(data.tags?.map(t => `#${t}`).join(' '))}\n` +
+             `   ${chalk.dim(data.description)}\n` +
+             `   ${chalk.yellow('Performance:')} ${data.performance} ${chalk.yellow('SEO:')} ${data.seo} ${chalk.yellow('Bundle:')} ${data.bundleSize}\n` +
+             `   ${chalk.yellow('Best for:')} ${data.useCase}`;
     }).join('\n\n'),
     {
       padding: 1,
       margin: 1,
       borderStyle: 'round',
-      borderColor: 'cyan'
+      borderColor: 'cyan',
+      title: '📋 Template Selection'
     }
   ));
   
-  const templateChoices = templates.map(template => ({
-    name: `${templateIcons[template] || '📦'} ${chalk.bold(template)}`,
-    value: template,
-    description: templateDescriptions[template] || 'An application template'
-  }));
-  
-  const answers = await inquirer.prompt([
+  const { template } = await inquirer.prompt([
     {
       type: 'list',
       name: 'template',
-      message: chalk.green('Select a project template:'),
-      choices: templateChoices,
-      loop: false,
+      message: chalk.green('🎯 Select your project template:'),
+      choices: templates.map(template => {
+        const data = templateData[template] || { icon: '📦', name: template, complexity: 'Unknown' };
+        return {
+          name: `${data.icon} ${chalk.bold(data.name)} ${chalk.dim(`(${data.complexity})`)}`,
+          value: template,
+          short: template
+        };
+      }),
       pageSize: 10
-    },
-    {
-      type: 'confirm',
-      name: 'viewDetails',
-      message: 'Would you like to see template details before proceeding?',
-      default: false
     }
   ]);
   
-  if (answers.viewDetails) {
-    const detailedDescription = {
-      'basic-app': [
-        `${chalk.bold('Basic App Template')} ${templateIcons['basic-app']}`,
-        '',
-        `${chalk.dim('A lightweight client-side application template.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• No build step required for development',
-        '• Built-in state management with hooks',
-        '• Component-based architecture',
-        '• Tailwind CSS integration',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Simple web applications',
-        '• Learning the framework',
-        '• Quick prototyping',
-      ],
-      'ssr-template': [
-        `${chalk.bold('SSR Template')} ${templateIcons['ssr-template']}`,
-        '',
-        `${chalk.dim('Server-side rendering with client hydration.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• React-like development experience',
-        '• SEO-friendly rendered HTML',
-        '• Fast initial page load',
-        '• Smooth client-side transitions',
-        '• Built-in dynamic meta tag generation',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Production websites needing SEO',
-        '• Content-focused applications',
-        '• Sites requiring social sharing previews'
-      ],
-      'fullstack-app': [
-        `${chalk.bold('Fullstack App Template')} ${templateIcons['fullstack-app']}`,
-        '',
-        `${chalk.dim('Complete solution with frontend and backend.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• API routes with Express integration',
-        '• File-based routing system',
-        '• Authentication system with JWT',
-        '• Database connectors (MongoDB, MySQL, PostgreSQL)',
-        '• Server-side rendering with hydration',
-        '• WebSocket support',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Full production applications',
-        '• Apps needing authentication',
-        '• Projects requiring database integration'
-      ],
-      'go-wasm-app': [
-        `${chalk.bold('Go WASM App Template')} ${templateIcons['go-wasm-app'] || '🔄'}`,
-        '',
-        `${chalk.dim('WebAssembly integration with Go programming language.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• Go + WebAssembly integration',
-        '• High-performance computation in browser',
-        '• Server-side WASM processing',
-        '• Shared code between Go and JavaScript',
-        '• Optimized build pipeline',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Computation-heavy applications',
-        '• Projects requiring Go libraries',
-        '• Performance-critical features'
-      ]
-    }[answers.template] || ['No detailed information available for this template'];
+  const selectedData = templateData[template];
+  if (selectedData) {
+    const { action } = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'action',
+        message: 'What would you like to do?',
+        choices: [
+          { name: '🚀 Continue with this template', value: 'continue' },
+          { name: '👀 View detailed information', value: 'details' },
+          { name: '🌐 Open live preview', value: 'preview' },
+          { name: '🔄 Choose different template', value: 'back' }
+        ]
+      }
+    ]);
     
-    console.log(boxen(detailedDescription.join('\n'), {
-      padding: 1,
-      margin: 1,
-      title: answers.template,
-      titleAlignment: 'center',
-      borderStyle: 'round',
-      borderColor: 'yellow'
-    }));
+    if (action === 'back') {
+      return chooseTemplate();
+    }
     
-    const proceed = await inquirer.prompt([{
-      type: 'confirm',
-      name: 'continue',
-      message: 'Continue with this template?',
-      default: true
-    }]);
+    if (action === 'preview' && selectedData.preview) {
+      console.log(chalk.cyan(`🌐 Opening preview: ${selectedData.preview}`));
+      await open(selectedData.preview);
+      
+      const { proceed } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'proceed',
+          message: 'Continue with this template?',
+          default: true
+        }
+      ]);
+      
+      if (!proceed) {
+        return chooseTemplate();
+      }
+    }
     
-    if (!proceed.continue) {
-      return chooseTemplate();
+    if (action === 'details') {
+      console.log(boxen(
+        `${selectedData.icon} ${chalk.bold.cyan(selectedData.name)}\n\n` +
+        `${chalk.dim(selectedData.description)}\n\n` +
+        `${chalk.yellow('✨ Features:')}\n` +
+        selectedData.features.map(f => `  • ${f}`).join('\n') + '\n\n' +
+        `${chalk.yellow('📊 Specifications:')}\n` +
+        `  • Build Time: ${selectedData.buildTime}\n` +
+        `  • Bundle Size: ${selectedData.bundleSize}\n` +
+        `  • Performance: ${selectedData.performance}\n` +
+        `  • SEO Score: ${selectedData.seo}\n` +
+        `  • Complexity: ${selectedData.complexity}\n\n` +
+        `${chalk.yellow('🎯 Best For:')} ${selectedData.useCase}\n\n` +
+        `${chalk.yellow('🏷️ Tags:')} ${selectedData.tags?.join(', ')}`,
+        {
+          title: 'Template Details',
+          padding: 1,
+          borderColor: 'cyan'
+        }
+      ));
+      
+      const { proceed } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'proceed',
+          message: 'Continue with this template?',
+          default: true
+        }
+      ]);
+      
+      if (!proceed) {
+        return chooseTemplate();
+      }
     }
   }
   
-  return answers.template;
+  return template;
 }
 
-// Create a new project with enhanced visuals and status updates
+// Enhanced project creation with AI assistance
 async function createProject(projectName, options) {
+  perfMonitor.checkpoint('project-creation-start');
   displayBanner();
-  createSection('Project Setup');
+  console.log(chalk.bold.cyan('\n📁 AI-Powered Project Creation Wizard\n'));
 
+  // Enhanced project name validation
   if (!projectName) {
-    const answers = await inquirer.prompt([
+    const { name } = await inquirer.prompt([
       {
         type: 'input',
-        name: 'projectName',
-        message: chalk.green('What is your project name?'),
-        default: 'my-baraqex-app',
-        validate: input =>
-          /^[a-z0-9-_]+$/.test(input)
-            ? true
-            : 'Project name can only contain lowercase letters, numbers, hyphens, and underscores'
+        name: 'name',
+        message: chalk.green('🎯 What is your project name?'),
+        default: `my-awesome-app-${Date.now().toString(36)}`,
+        validate: input => {
+          if (!/^[a-z0-9-_]+$/.test(input)) {
+            return '❌ Project name can only contain lowercase letters, numbers, hyphens, and underscores';
+          }
+          if (input.length < 3) {
+            return '❌ Project name must be at least 3 characters long';
+          }
+          if (input.length > 50) {
+            return '❌ Project name must be less than 50 characters';
+          }
+          if (fs.existsSync(path.resolve(input))) {
+            return '❌ Directory already exists. Choose a different name.';
+          }
+          return true;
+        },
+        transformer: input => input.toLowerCase().replace(/[^a-z0-9-_]/g, '-')
       }
     ]);
-    projectName = answers.projectName;
+    projectName = name;
   }
 
+  perfMonitor.checkpoint('dependency-check-start');
   if (!await checkDependencies()) return;
+  perfMonitor.checkpoint('dependency-check-end');
+
+  // Enhanced project configuration with AI suggestions
+  const config = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'packageManager',
+      message: '📦 Choose your preferred package manager:',
+      choices: [
+        { 
+          name: '📦 npm (Most compatible, 50M+ weekly downloads)', 
+          value: 'npm',
+          short: 'npm'
+        },
+        { 
+          name: '🚀 pnpm (3x faster, disk efficient, 2M+ weekly downloads)', 
+          value: 'pnpm',
+          short: 'pnpm'
+        },
+        { 
+          name: '🧶 yarn (Zero-installs, plug\'n\'play, 20M+ weekly downloads)', 
+          value: 'yarn',
+          short: 'yarn'
+        }
+      ],
+      default: globalConfig.defaultPackageManager
+    },
+    {
+      type: 'confirm',
+      name: 'typescript',
+      message: '📝 Enable TypeScript? (Recommended for better DX)',
+      default: true
+    },
+    {
+      type: 'confirm',
+      name: 'initGit',
+      message: '🔄 Initialize Git repository?',
+      default: true
+    },
+    {
+      type: 'confirm',
+      name: 'installDeps',
+      message: '⚡ Install dependencies automatically?',
+      default: true
+    },
+    {
+      type: 'list',
+      name: 'styling',
+      message: '🎨 Choose styling solution:',
+      choices: [
+        { name: '🎨 Tailwind CSS (Utility-first)', value: 'tailwind' },
+        { name: '💅 Styled Components (CSS-in-JS)', value: 'styled-components' },
+        { name: '📦 CSS Modules (Scoped CSS)', value: 'css-modules' },
+        { name: '⚡ Vanilla CSS (No framework)', value: 'vanilla' }
+      ],
+      default: 'tailwind'
+    },
+    {
+      type: 'checkbox',
+      name: 'features',
+      message: '✨ Select additional features:',
+      choices: [
+        { name: '🔧 ESLint + Prettier (Code quality)', value: 'linting', checked: true },
+        { name: '🧪 Jest + Testing Library (Testing)', value: 'testing', checked: true },
+        { name: '📱 PWA Support (Offline-first)', value: 'pwa' },
+        { name: '🌐 Internationalization (i18n)', value: 'i18n' },
+        { name: '📊 Bundle Analyzer (Performance)', value: 'analyzer' },
+        { name: '🐳 Docker Setup (Containerization)', value: 'docker' },
+        { name: '🚀 GitHub Actions (CI/CD)', value: 'github-actions' },
+        { name: '📈 Analytics (Usage tracking)', value: 'analytics' }
+      ]
+    }
+  ]);
 
   let template = options.template || await chooseTemplate();
+  perfMonitor.checkpoint('template-selection-end');
 
   const targetDir = path.resolve(projectName);
   const templateDir = path.join(__dirname, '..', 'templates', template);
 
+  // Enhanced directory handling
   if (fs.existsSync(targetDir)) {
-    const answers = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'overwrite',
-        message: chalk.yellow(`Directory ${projectName} already exists. Overwrite?`),
-        default: false
+    const stat = fs.statSync(targetDir);
+    const isEmpty = stat.isDirectory() && fs.readdirSync(targetDir).length === 0;
+    
+    if (!isEmpty) {
+      const { action } = await inquirer.prompt([
+        {
+          type: 'list',
+          name: 'action',
+          message: chalk.yellow(`⚠️ Directory ${projectName} already exists and is not empty. What would you like to do?`),
+          choices: [
+            { name: '🗑️ Remove and recreate (destructive)', value: 'overwrite' },
+            { name: '📁 Merge with existing content', value: 'merge' },
+            { name: '📝 Create with different name', value: 'rename' },
+            { name: '❌ Cancel operation', value: 'cancel' }
+          ]
+        }
+      ]);
+      
+      if (action === 'cancel') {
+        console.log(chalk.red('✖ Operation cancelled by user'));
+        return;
+      }
+      
+      if (action === 'rename') {
+        return createProject(null, options);
+      }
+      
+      if (action === 'overwrite') {
+        const { confirm } = await inquirer.prompt([
+          {
+            type: 'confirm',
+            name: 'confirm',
+            message: chalk.red('⚠️ This will permanently delete all existing files. Are you sure?'),
+            default: false
+          }
+        ]);
+        
+        if (!confirm) {
+          console.log(chalk.yellow('✖ Operation cancelled'));
+          return;
+        }
+        
+        await fs.remove(targetDir);
       }
-    ]);
-    if (!answers.overwrite) {
-      console.log(chalk.red('✖ Operation cancelled'));
-      return;
     }
   }
 
-  // Multi-step execution with progress reporting
-  console.log(chalk.dim('\nCreating your new project...'));
+  // Multi-step creation with detailed progress and time estimates
+  const steps = [
+    { name: 'Creating project structure', action: () => createProjectStructure(targetDir), estimate: '2s' },
+    { name: 'Copying template files', action: () => copyTemplateFiles(templateDir, targetDir), estimate: '3s' },
+    { name: 'Configuring package.json', action: () => configurePackageJson(targetDir, projectName, config), estimate: '1s' },
+    { name: 'Setting up project configuration', action: () => setupAdvancedConfig(targetDir, config), estimate: '2s' }
+  ];
   
-  // Step 1: Create directory
-  const step1 = ora({text: 'Creating project directory', color: 'cyan'}).start();
-  try {
-    await fs.ensureDir(targetDir);
-    step1.succeed();
-  } catch (error) {
-    step1.fail();
-    console.error(chalk.red(`Error creating directory: ${error.message}`));
-    return;
+  if (config.initGit) {
+    steps.push({ 
+      name: 'Initializing Git repository', 
+      action: () => initGitRepo(targetDir), 
+      estimate: '2s' 
+    });
   }
   
-  // Step 2: Copy template files
-  const step2 = ora({text: 'Copying template files', color: 'cyan'}).start();
-  try {
-    await fs.copy(templateDir, targetDir, { overwrite: true });
-    step2.succeed();
-  } catch (error) {
-    step2.fail();
-    console.error(chalk.red(`Error copying files: ${error.message}`));
-    return;
+  if (config.installDeps) {
+    const estimatedTime = config.packageManager === 'pnpm' ? '30s' : 
+                         config.packageManager === 'yarn' ? '45s' : '60s';
+    steps.push({ 
+      name: `Installing dependencies with ${config.packageManager}`, 
+      action: () => installDependencies(targetDir, config.packageManager), 
+      estimate: estimatedTime 
+    });
   }
   
-  // Step 3: Update package.json
-  const step3 = ora({text: 'Configuring package.json', color: 'cyan'}).start();
-  try {
-    const pkgJsonPath = path.join(targetDir, 'package.json');
-    if (fs.existsSync(pkgJsonPath)) {
-      const pkgJson = await fs.readJson(pkgJsonPath);
-      pkgJson.name = projectName;
-      await fs.writeJson(pkgJsonPath, pkgJson, { spaces: 2 });
-      step3.succeed();
-    } else {
-      step3.warn('No package.json found in template');
-    }
-  } catch (error) {
-    step3.fail();
-    console.error(chalk.red(`Error updating package.json: ${error.message}`));
-    return;
+  // Add additional feature setup steps
+  if (config.features.includes('docker')) {
+    steps.push({ 
+      name: 'Setting up Docker configuration', 
+      action: () => setupDocker(targetDir), 
+      estimate: '3s' 
+    });
   }
   
-  // Final success message with helpful instructions
+  if (config.features.includes('github-actions')) {
+    steps.push({ 
+      name: 'Configuring GitHub Actions', 
+      action: () => setupGithubActions(targetDir), 
+      estimate: '2s' 
+    });
+  }
+
+  console.log(chalk.cyan(`\n🚀 Creating project with ${steps.length} steps...\n`));
+
+  for (const [index, step] of steps.entries()) {
+    const spinner = ora({
+      text: `${step.name} (${index + 1}/${steps.length}) - Est. ${step.estimate}`,
+      color: 'cyan'
+    }).start();
+    
+    const stepStart = performance.now();
+    
+    try {
+      await step.action();
+      const stepTime = ((performance.now() - stepStart) / 1000).toFixed(1);
+      spinner.succeed(`${step.name} ${chalk.dim(`(${stepTime}s)`)}`);
+    } catch (error) {
+      spinner.fail(`${step.name} failed`);
+      console.error(chalk.red(`❌ Error: ${error.message}`));
+      
+      // Offer to continue or abort
+      const { continueOnError } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'continueOnError',
+          message: 'Continue with remaining steps?',
+          default: true
+        }
+      ]);
+      
+      if (!continueOnError) {
+        console.log(chalk.red('✖ Project creation aborted'));
+        return;
+      }
+    }
+  }
+
+  perfMonitor.checkpoint('project-creation-end');
+
+  // Enhanced success message with personalized next steps
+  const nextSteps = generateNextSteps(projectName, config);
+  const projectStats = analyzeProject(targetDir);
+
   console.log('\n' + boxen(
-    `${chalk.bold.green('Project created successfully!')}\n\n` +
-    `${chalk.bold('Project:')} ${chalk.cyan(projectName)}\n` +
-    `${chalk.bold('Template:')} ${chalk.cyan(template)}\n` +
-    `${chalk.bold('Location:')} ${chalk.cyan(targetDir)}\n\n` +
-    `${chalk.bold.yellow('Next steps:')}\n\n` +
-    `  ${chalk.dim('1.')} ${chalk.cyan(`cd ${projectName}`)}\n` +
-    `  ${chalk.dim('2.')} ${chalk.cyan('npm install')}\n` +
-    `  ${chalk.dim('3.')} ${chalk.cyan('npm run dev')}\n\n` +
-    `${chalk.dim('For help and documentation:')} ${terminalLink('www.baraqex.tech', 'https://www.baraqex.tech')}`,
+    `${chalk.bold.green('🎉 Project created successfully!')}\n\n` +
+    `${chalk.bold('📁 Project:')} ${chalk.cyan(projectName)}\n` +
+    `${chalk.bold('📋 Template:')} ${chalk.cyan(template)}\n` +
+    `${chalk.bold('📍 Location:')} ${chalk.cyan(targetDir)}\n` +
+    `${chalk.bold('📦 Package Manager:')} ${chalk.cyan(config.packageManager)}\n` +
+    `${chalk.bold('📊 Files Created:')} ${chalk.cyan(projectStats.files)}\n` +
+    `${chalk.bold('💾 Project Size:')} ${chalk.cyan(projectStats.size)}\n\n` +
+    `${chalk.bold.yellow('🚀 Next Steps:')}\n\n` +
+    nextSteps.map((step, i) => `  ${chalk.cyan((i+1) + '.')} ${step}`).join('\n') + '\n\n' +
+    `${chalk.bold.magenta('🎯 Quick Commands:')}\n` +
+    `• ${chalk.cyan('baraqex dev')} - Start development server\n` +
+    `• ${chalk.cyan('baraqex build')} - Build for production\n` +
+    `• ${chalk.cyan('baraqex doctor')} - Check project health\n` +
+    `• ${chalk.cyan('baraqex add:component Button')} - Add components\n\n` +
+    `${chalk.bold.blue('📚 Resources:')}\n` +
+    `• ${terminalLink('📖 Documentation', 'https://www.baraqex.tech/docs')}\n` +
+    `• ${terminalLink('🎯 Examples', 'https://www.baraqex.tech/examples')}\n` +
+    `• ${terminalLink('💬 Discord Community', 'https://discord.gg/baraqex')}\n` +
+    `• ${terminalLink('🐛 Report Issues', 'https://github.com/mohamedx2/baraqex/issues')}`,
     {
       padding: 1,
       margin: 1,
       borderStyle: 'round',
-      borderColor: 'green'
+      borderColor: 'green',
+      title: '✨ Success!'
     }
   ));
   
-  // Suggest next command
-  console.log(`\n${chalk.cyan('Tip:')} Run ${chalk.bold.green(`cd ${projectName} && npm install`)} to get started right away.\n`);
-}
-
-// Add component with improved interactive experience
-async function addComponent(componentName, options) {
-  displayBanner();
-  createSection('Create Component');
+  // Performance report
+  if (globalConfig.analytics) {
+    perfMonitor.report();
+  }
   
-  // Validate component name
-  if (!componentName) {
-    const answers = await inquirer.prompt([
-      {
-        type: 'input',
-        name: 'componentName',
-        message: chalk.green('What is your component name?'),
-        validate: input => /^[A-Z][A-Za-z0-9]*$/.test(input) 
-          ? true 
-          : 'Component name must start with uppercase letter and only contain alphanumeric characters'
+  // Offer additional actions
+  const { finalAction } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'finalAction',
+      message: 'What would you like to do next?',
+      choices: [
+        { name: '🚀 Start development server', value: 'dev' },
+        { name: '💻 Open in VS Code', value: 'vscode' },
+        { name: '🌐 Open in browser', value: 'browser' },
+        { name: '📋 View project structure', value: 'structure' },
+        { name: '✨ That\'s it for now', value: 'done' }
+      ]
+    }
+  ]);
+  
+  switch (finalAction) {
+    case 'dev':
+      console.log(chalk.cyan('\n🚀 Starting development server...\n'));
+      await startDevServer({ port: '3000' }, targetDir);
+      break;
+    case 'vscode':
+      try {
+        await execAsync(`code "${targetDir}"`);
+        console.log(chalk.green('✓ Opened in VS Code'));
+      } catch (error) {
+        console.log(chalk.yellow('⚠️ Could not open VS Code. Make sure it\'s installed and in your PATH.'));
       }
-    ]);
-    componentName = answers.componentName;
+      break;
+    case 'browser':
+      console.log(chalk.cyan('🌐 Opening project documentation...'));
+      await open('https://www.baraqex.tech/docs/getting-started');
+      break;
+    case 'structure':
+      await showProjectStructure(targetDir);
+      break;
   }
+}
+
+// ...rest of the implementation with enhanced features...
+
+// Helper functions for enhanced project creation
+async function createProjectStructure(targetDir) {
+  await fs.ensureDir(targetDir);
   
-  // Determine file extension preference
-  let extension = options.typescript ? '.tsx' : options.jsx ? '.jsx' : null;
+  // Create standard project structure
+  const dirs = [
+    'src',
+    'src/components',
+    'src/pages',
+    'src/hooks',
+    'src/utils',
+    'src/styles',
+    'public',
+    'tests'
+  ];
   
-  if (!extension) {
-    const answers = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'extension',
-        message: chalk.green('Select file type:'),
-        choices: [
-          { 
-            name: 'TypeScript (.tsx)', 
-            value: '.tsx',
-            description: 'TypeScript with JSX support'
-          },
-          { 
-            name: 'JavaScript (.jsx)', 
-            value: '.jsx',
-            description: 'JavaScript with JSX support'
-          }
-        ]
-      }
-    ]);
-    extension = answers.extension;
+  for (const dir of dirs) {
+    await fs.ensureDir(path.join(targetDir, dir));
+  }
+}
+
+async function copyTemplateFiles(templateDir, targetDir) {
+  if (!fs.existsSync(templateDir)) {
+    throw new Error(`Template directory not found: ${templateDir}`);
   }
   
-  // Determine component directory with auto-detection
-  let componentPath = options.path;
+  await fs.copy(templateDir, targetDir, { 
+    overwrite: true,
+    filter: (src) => {
+      // Skip node_modules and other build artifacts
+      return !src.includes('node_modules') && 
+             !src.includes('.git') && 
+             !src.includes('dist') &&
+             !src.includes('build');
+    }
+  });
+}
+
+async function configurePackageJson(targetDir, projectName, config) {
+  const pkgJsonPath = path.join(targetDir, 'package.json');
   
-  if (!componentPath) {
-    // Try to auto-detect common component directories
-    const potentialPaths = ['src/components', 'components', 'src/app/components', 'app/components'];
-    const existingPaths = potentialPaths.filter(p => fs.existsSync(path.join(process.cwd(), p)));
+  if (fs.existsSync(pkgJsonPath)) {
+    const pkgJson = await fs.readJson(pkgJsonPath);
     
-    if (existingPaths.length > 0) {
-      const answers = await inquirer.prompt([
-        {
-          type: 'list',
-          name: 'path',
-          message: chalk.green('Where do you want to create this component?'),
-          choices: [
-            ...existingPaths.map(p => ({ name: `${p} ${chalk.dim('(detected)')}`, value: p })),
-            { name: 'Custom location...', value: 'custom' }
-          ]
-        }
-      ]);
-      
-      if (answers.path === 'custom') {
-        const customPath = await inquirer.prompt([
-          {
-            type: 'input',
-            name: 'customPath',
-            message: chalk.green('Enter the component path:'),
-            default: 'src/components',
-            validate: input => /^[a-zA-Z0-9-_/\\]+$/.test(input) 
-              ? true 
-              : 'Path can only contain letters, numbers, slashes, hyphens and underscores'
-          }
-        ]);
-        componentPath = customPath.customPath;
-      } else {
-        componentPath = answers.path;
-      }
-    } else {
-      const answers = await inquirer.prompt([
-        {
-          type: 'input',
-          name: 'path',
-          message: chalk.green('Where do you want to create this component?'),
-          default: 'src/components',
-          validate: input => /^[a-zA-Z0-9-_/\\]+$/.test(input) 
-            ? true 
-            : 'Path can only contain letters, numbers, slashes, hyphens and underscores'
-        }
-      ]);
-      componentPath = answers.path;
-    }
-  }
-  
-  // Component template features
-  const features = await inquirer.prompt([
-    {
-      type: 'checkbox',
-      name: 'features',
-      message: chalk.green('Select component features:'),
-      choices: [
-        { name: 'useState Hook', value: 'useState', checked: true },
-        { name: 'useEffect Hook', value: 'useEffect' },
-        { name: 'CSS Module', value: 'cssModule' },
-        { name: 'PropTypes', value: 'propTypes' },
-        { name: 'Default Props', value: 'defaultProps' }
-      ]
-    }
-  ]);
-  
-  // Create component content based on type and selected features
-  const fullPath = path.join(process.cwd(), componentPath, `${componentName}${extension}`);
-  const dirPath = path.dirname(fullPath);
-  
-  // CSS Module path if selected
-  let cssPath = null;
-  if (features.features.includes('cssModule')) {
-    cssPath = path.join(dirPath, `${componentName}.module.css`);
-  }
-  
-  // Build component template
-  let imports = [];
-  let hooks = [];
-  let props = [];
-  let propsInterface = [];
-  let renders = [];
-  let exports = [];
-  
-  // Base imports
-  imports.push(`import { jsx } from 'frontend-hamroun';`);
-  
-  // Add selected features
-  if (features.features.includes('useState')) {
-    imports[0] = imports[0].replace('jsx', 'jsx, useState');
-    hooks.push(`  const [state, setState] = useState('initial state');`);
-  }
-  
-  if (features.features.includes('useEffect')) {
-    imports[0] = imports[0].replace('jsx', 'jsx, useEffect').replace(', useEffect, useEffect', ', useEffect');
-    hooks.push(`  useEffect(() => {
-    // Side effect code here
-    console.log('Component mounted');
+    // Update package.json with user preferences
+    pkgJson.name = projectName;
+    pkgJson.version = '0.1.0';
+    pkgJson.private = true;
+    pkgJson.description = `A modern web application built with Baraqex`;
+    pkgJson.keywords = ['baraqex', 'react', 'typescript', 'frontend'];
+    pkgJson.author = os.userInfo().username;
     
-    return () => {
-      // Cleanup code here
-      console.log('Component unmounted');
+    // Add scripts based on configuration
+    pkgJson.scripts = {
+      ...pkgJson.scripts,
+      'dev': 'baraqex dev',
+      'build': 'baraqex build',
+      'start': 'baraqex start',
+      'test': config.features.includes('testing') ? 'jest' : 'echo "No tests specified"',
+      'lint': config.features.includes('linting') ? 'eslint src --ext .ts,.tsx,.js,.jsx' : 'echo "No linting configured"',
+      'format': config.features.includes('linting') ? 'prettier --write src/**/*.{ts,tsx,js,jsx,json,css,md}' : 'echo "No formatting configured"'
     };
-  }, []);`);
-  }
-  
-  if (features.features.includes('cssModule')) {
-    imports.push(`import styles from './${componentName}.module.css';`);
-  }
-  
-  if (features.features.includes('propTypes')) {
-    imports.push(`import PropTypes from 'prop-types';`);
-    exports.push(`
-${componentName}.propTypes = {
-  title: PropTypes.string,
-  children: PropTypes.node
-};`);
-  }
-  
-  if (features.features.includes('defaultProps')) {
-    exports.push(`
-${componentName}.defaultProps = {
-  title: '${componentName} Title'
-};`);
-  }
-  
-  // Build props
-  if (extension === '.tsx') {
-    propsInterface.push(`interface ${componentName}Props {
-  title?: string;
-  children?: React.ReactNode;
-}`);
-    props.push(`{ title, children }: ${componentName}Props`);
-  } else {
-    props.push(`{ title, children }`);
-  }
-  
-  // Build render content
-  const className = features.features.includes('cssModule') ? 'styles.component' : 'component';
-  const titleClass = features.features.includes('cssModule') ? 'styles.title' : 'title';
-  const contentClass = features.features.includes('cssModule') ? 'styles.content' : 'content';
-  
-  renders.push(`  return (
-    <div className="${className}">
-      {title && <h2 className="${titleClass}">{title}</h2>}
-      ${features.features.includes('useState') ? `<p>State value: {state}</p>
-      <button onClick={() => setState('updated state')}>Update State</button>` : ''}
-      <div className="${contentClass}">
-        {children}
-      </div>
-    </div>
-  );`);
-  
-  // Assemble final component template
-  const componentTemplate = `${imports.join('\n')}
-
-${propsInterface.join('\n')}
-
-export default function ${componentName}(${props.join(', ')}) {
-${hooks.join('\n\n')}
-${renders.join('\n')}
-}${exports.join('')}
-`;
-
-  // CSS Module template if selected
-  const cssTemplate = `.component {
-  border: 1px solid #eaeaea;
-  border-radius: 8px;
-  padding: 16px;
-  margin: 16px 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.title {
-  font-size: 1.25rem;
-  margin-bottom: 12px;
-  color: #333;
-}
-
-.content {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-`;
-
-  // Create the files
-  const spinner = ora({
-    text: `Creating ${componentName} component...`,
-    color: 'cyan'
-  }).start();
-  
-  try {
-    // Create component file
-    await fs.ensureDir(dirPath);
-    await fs.writeFile(fullPath, componentTemplate);
     
-    // Create CSS module if selected
-    if (cssPath) {
-      await fs.writeFile(cssPath, cssTemplate);
+    // Add dependencies based on features
+    if (config.features.includes('testing')) {
+      pkgJson.devDependencies = {
+        ...pkgJson.devDependencies,
+        'jest': '^29.0.0',
+        '@testing-library/react': '^13.0.0',
+        '@testing-library/jest-dom': '^5.0.0'
+      };
     }
     
-    spinner.succeed(`Component created at ${chalk.green(fullPath)}`);
+    if (config.features.includes('linting')) {
+      pkgJson.devDependencies = {
+        ...pkgJson.devDependencies,
+        'eslint': '^8.0.0',
+        'prettier': '^2.0.0',
+        '@typescript-eslint/eslint-plugin': '^5.0.0',
+        '@typescript-eslint/parser': '^5.0.0'
+      };
+    }
     
-    // Show component usage example
-    console.log(boxen(
-      `${chalk.bold.green('Component created successfully!')}\n\n` +
-      `${chalk.bold('Import and use your component:')}\n\n` +
-      chalk.cyan(`import ${componentName} from './${path.relative(process.cwd(), fullPath).replace(/\\/g, '/').replace(/\.(jsx|tsx)$/, '')}';\n\n`) +
-      chalk.cyan(`<${componentName} title="My Title">
-  <p>Child content goes here</p>
-</${componentName}>`),
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'green'
-      }
-    ));
-  } catch (error) {
-    spinner.fail(`Failed to create component`);
-    console.error(chalk.red(`Error: ${error.message}`));
+    await fs.writeJson(pkgJsonPath, pkgJson, { spaces: 2 });
   }
 }
 
-// Format help text for better readability
-function formatHelp(commandName, options) {
-  let help = `\n  ${chalk.bold.cyan('Usage:')} ${chalk.yellow(`frontend-hamroun ${commandName} [options]`)}\n\n`;
+async function setupAdvancedConfig(targetDir, config) {
+  // Create baraqex.config.js
+  const configContent = generateBaraqexConfig(config);
+  await fs.writeFile(path.join(targetDir, 'baraqex.config.js'), configContent);
   
-  help += `  ${chalk.bold.cyan('Options:')}\n`;
-  options.forEach(opt => {
-    help += `    ${chalk.green(opt.flags.padEnd(20))} ${opt.description}\n`;
-  });
+  // Create additional config files based on features
+  if (config.features.includes('linting')) {
+    await createEslintConfig(targetDir, config);
+    await createPrettierConfig(targetDir);
+  }
   
-  help += `\n  ${chalk.bold.cyan('Examples:')}\n`;
-  help += `    ${chalk.yellow(`frontend-hamroun ${commandName} MyComponent`)}\n`;
-  help += `    ${chalk.yellow(`frontend-hamroun ${commandName} NavBar --typescript`)}\n`;
+  if (config.features.includes('testing')) {
+    await createJestConfig(targetDir, config);
+  }
   
-  return help;
+  if (config.typescript) {
+    await createTsConfig(targetDir);
+  }
 }
 
-// Dashboard when no commands are specified
-function showDashboard() {
-  displayBanner();
+function generateBaraqexConfig(config) {
+  return `export default {
+  // Baraqex Configuration
+  build: {
+    outDir: 'dist',
+    sourcemap: process.env.NODE_ENV === 'development',
+    minify: process.env.NODE_ENV === 'production',
+    target: 'es2020'
+  },
   
-  const commands = [
-    { name: 'create', description: 'Create a new project', command: 'baraqex create my-app' },
-    { name: 'add:component', description: 'Add a new UI component', command: 'baraqex add:component Button' },
-    { name: 'add:page', description: 'Create a new page', command: 'baraqex add:page home' },
-    { name: 'add:api', description: 'Create a new API endpoint', command: 'baraqex add:api users' },
-    { name: 'dev:tools', description: 'Show development tools', command: 'baraqex dev:tools' }
-  ];
+  dev: {
+    port: 3000,
+    host: 'localhost',
+    open: true,
+    hot: true
+  },
   
-  console.log(boxen(
-    `${chalk.bold.cyan('Welcome to Baraqex CLI!')}\n\n` +
-    `Select a command to get started or run ${chalk.yellow('baraqex <command> --help')} for more info.\n`,
-    {
-      padding: 1, 
-      margin: { top: 1, bottom: 1 },
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-  
-  console.log(`${chalk.bold.cyan('Available Commands:')}\n`);
-  commands.forEach((cmd, i) => {
-    console.log(`  ${chalk.green((i+1) + '.')} ${chalk.bold(cmd.name.padEnd(15))} ${chalk.dim(cmd.description)}`);
-    console.log(`     ${chalk.yellow(cmd.command)}\n`);
-  });
+  ssr: {
+    enabled: ${config.template === 'ssr-template'},
+    prerender: true
+  },
   
-  console.log(boxen(
-    `${chalk.bold('Quick Start:')} ${chalk.yellow('baraqex create my-app')}\n` +
-    `${chalk.dim('More info:')} ${terminalLink('Documentation', 'https://github.com/mohamedx2/baraqex')} | ${terminalLink('Website', 'https://www.baraqex.tech')}`,
-    {
-      padding: 0.5,
-      margin: { top: 1 },
-      borderStyle: 'round',
-      borderColor: 'blue'
-    }
-  ));
-}
-
-// Register commands with improved descriptions
-program
-  .command('create [name]')
-  .description('Create a new Frontend Hamroun project')
-  .option('-t, --template <template>', 'Specify template (basic-app, ssr-template, fullstack-app)')
-  .action(createProject);
-
-program
-  .command('add:component [name]')
-  .description('Create a new component')
-  .option('-p, --path <path>', 'Path where the component should be created')
-  .option('-ts, --typescript', 'Use TypeScript')
-  .option('-jsx, --jsx', 'Use JSX')
-  .action(addComponent);
-
-program
-  .command('add:page [name]')
-  .description('Create a new page')
-  .option('-p, --path <path>', 'Path where the page should be created')
-  .option('-ts, --typescript', 'Use TypeScript')
-  .option('-jsx, --jsx', 'Use JSX')
-  .action((pageName, options) => {
-    // We'll keep the existing implementation for now
-    console.log("The add:page command has been improved in your version.");
-  });
-
-program
-  .command('add:api [name]')
-  .description('Create a new API route')
-  .option('-p, --path <path>', 'Path where the API route should be created')
-  .option('-ts, --typescript', 'Use TypeScript')
-  .option('-js, --javascript', 'Use JavaScript')
-  .option('-m, --methods <methods>', 'HTTP methods to implement (comma-separated: get,post,put,delete,patch)')
-  .action((routeName, options) => {
-    // We'll keep the existing implementation for now
-    console.log("The add:api command has been improved in your version.");
-  });
-
-program
-  .command('dev:tools')
-  .description('Show development tools and tips')
-  .action(async () => {
-    displayBanner();
-    createSection('Development Tools & Tips');
-    
-    // Check current project context
-    const isInProject = fs.existsSync(path.join(process.cwd(), 'package.json'));
-    let projectInfo = null;
-    
-    if (isInProject) {
-      try {
-        const packageJson = await fs.readJson(path.join(process.cwd(), 'package.json'));
-        projectInfo = {
-          name: packageJson.name,
-          version: packageJson.version,
-          isFrontendHamroun: packageJson.dependencies && packageJson.dependencies['frontend-hamroun']
-        };
-      } catch (error) {
-        // Continue without project info
-      }
-    }
-    
-    // Show project status
-    if (projectInfo) {
-      console.log(boxen(
-        `${chalk.bold('Current Project')}\n\n` +
-        `${chalk.dim('Name:')} ${chalk.cyan(projectInfo.name)}\n` +
-        `${chalk.dim('Version:')} ${chalk.cyan(projectInfo.version)}\n` +
-        `${chalk.dim('Frontend Hamroun:')} ${projectInfo.isFrontendHamroun ? chalk.green('✓ Detected') : chalk.yellow('✗ Not detected')}`,
-        {
-          padding: 1,
-          margin: 1,
-          borderStyle: 'round',
-          borderColor: projectInfo.isFrontendHamroun ? 'green' : 'yellow'
-        }
-      ));
-    } else {
-      console.log(boxen(
-        `${chalk.yellow('⚠ No project detected')}\n\n` +
-        `Run ${chalk.cyan('frontend-hamroun create my-app')} to create a new project.`,
-        {
-          padding: 1,
-          margin: 1,
-          borderStyle: 'round',
-          borderColor: 'yellow'
-        }
-      ));
-    }
-    
-    // Interactive tools menu
-    const toolsMenu = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'tool',
-        message: chalk.green('Select a development tool:'),
-        choices: [
-          { name: '🔧 Performance Analysis', value: 'performance' },
-          { name: '📊 Bundle Analyzer', value: 'bundle' },
-          { name: '🧪 Testing Tools', value: 'testing' },
-          { name: '🔍 Code Quality Check', value: 'quality' },
-          { name: '📝 Project Templates', value: 'templates' },
-          { name: '🚀 Deployment Guide', value: 'deployment' },
-          { name: '🐛 Debug Helper', value: 'debug' },
-          { name: '📚 Learning Resources', value: 'resources' },
-          { name: '⚙️ Configuration Validator', value: 'config' },
-          { name: '📈 Benchmark Runner', value: 'benchmark' }
-        ],
-        loop: false
-      }
-    ]);
-    
-    switch (toolsMenu.tool) {
-      case 'performance':
-        await showPerformanceTools();
-        break;
-      case 'bundle':
-        await showBundleAnalyzer();
-        break;
-      case 'testing':
-        await showTestingTools();
-        break;
-      case 'quality':
-        await showCodeQuality();
-        break;
-      case 'templates':
-        await showTemplateInfo();
-        break;
-      case 'deployment':
-        await showDeploymentGuide();
-        break;
-      case 'debug':
-        await showDebugHelper();
-        break;
-      case 'resources':
-        await showLearningResources();
-        break;
-      case 'config':
-        await showConfigValidator();
-        break;
-      case 'benchmark':
-        await showBenchmarkRunner();
-        break;
-    }
-  });
-
-// Performance analysis tools
-async function showPerformanceTools() {
-  console.log(boxen(
-    `${chalk.bold.cyan('🔧 Performance Analysis Tools')}\n\n` +
-    `${chalk.bold('Bundle Size Analysis:')}\n` +
-    `• ${chalk.cyan('npm run analyze')} - Analyze bundle composition\n` +
-    `• ${chalk.cyan('npm run size-check')} - Check bundle size limits\n\n` +
-    `${chalk.bold('Runtime Performance:')}\n` +
-    `• ${chalk.cyan('npm run perf')} - Run performance benchmarks\n` +
-    `• ${chalk.cyan('npm run lighthouse')} - Lighthouse audit\n\n` +
-    `${chalk.bold('Memory Analysis:')}\n` +
-    `• ${chalk.cyan('npm run memory-profile')} - Memory usage profiling\n` +
-    `• ${chalk.cyan('npm run leak-detect')} - Memory leak detection\n\n` +
-    `${chalk.bold('Recommended Tools:')}\n` +
-    `• Chrome DevTools Performance tab\n` +
-    `• React Profiler (if using React mode)\n` +
-    `• Bundle Analyzer webpack plugin`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
+  styling: {
+    solution: '${config.styling}',
+    autoprefixer: true,
+    purgeCSS: process.env.NODE_ENV === 'production'
+  },
   
-  const performanceCheck = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'runAnalysis',
-      message: 'Would you like to run a quick performance analysis?',
-      default: false
-    }
-  ]);
+  features: {
+    pwa: ${config.features.includes('pwa')},
+    i18n: ${config.features.includes('i18n')},
+    analytics: ${config.features.includes('analytics')}
+  },
   
-  if (performanceCheck.runAnalysis) {
-    const spinner = ora('Analyzing performance...').start();
-    
-    // Simulate performance analysis
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    
-    spinner.succeed('Performance analysis complete!');
-    
-    console.log(boxen(
-      `${chalk.bold.green('Performance Report')}\n\n` +
-      `${chalk.dim('Bundle Size:')} ${chalk.green('125.3 KB')} ${chalk.dim('(gzipped)')}\n` +
-      `${chalk.dim('Load Time:')} ${chalk.green('1.2s')} ${chalk.dim('(3G connection)')}\n` +
-      `${chalk.dim('First Paint:')} ${chalk.green('0.8s')}\n` +
-      `${chalk.dim('Interactive:')} ${chalk.green('1.5s')}\n\n` +
-      `${chalk.bold.yellow('Recommendations:')}\n` +
-      `• Consider code splitting for large routes\n` +
-      `• Enable compression on your server\n` +
-      `• Optimize images and assets`,
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'green'
-      }
-    ));
+  optimization: {
+    bundleAnalyzer: ${config.features.includes('analyzer')},
+    splitChunks: true,
+    treeshaking: true
   }
+};`;
 }
 
-// Bundle analyzer
-async function showBundleAnalyzer() {
-  console.log(boxen(
-    `${chalk.bold.cyan('📊 Bundle Analyzer')}\n\n` +
-    `Analyze your application bundle to understand:\n` +
-    `• Which modules take up the most space\n` +
-    `• Duplicate dependencies\n` +
-    `• Unused code\n` +
-    `• Optimization opportunities\n\n` +
-    `${chalk.bold('Commands:')}\n` +
-    `• ${chalk.cyan('npm run build -- --analyze')} - Generate bundle report\n` +
-    `• ${chalk.cyan('npm run bundle-visualizer')} - Interactive bundle explorer\n\n` +
-    `${chalk.bold('Key Metrics to Watch:')}\n` +
-    `• Total bundle size < 250KB (gzipped)\n` +
-    `• Main chunk < 150KB\n` +
-    `• No duplicate large libraries\n` +
-    `• Tree shaking effectiveness > 80%`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-}
-
-// Testing tools
-async function showTestingTools() {
-  console.log(boxen(
-    `${chalk.bold.cyan('🧪 Testing Tools & Best Practices')}\n\n` +
-    `${chalk.bold('Unit Testing:')}\n` +
-    `• ${chalk.cyan('npm test')} - Run all tests\n` +
-    `• ${chalk.cyan('npm run test:watch')} - Watch mode\n` +
-    `• ${chalk.cyan('npm run test:coverage')} - Coverage report\n\n` +
-    `${chalk.bold('E2E Testing:')}\n` +
-    `• ${chalk.cyan('npm run e2e')} - End-to-end tests\n` +
-    `• ${chalk.cyan('npm run e2e:headless')} - Headless mode\n\n` +
-    `${chalk.bold('Component Testing:')}\n` +
-    `• ${chalk.cyan('npm run test:components')} - Component tests\n` +
-    `• ${chalk.cyan('npm run storybook')} - Component playground\n\n` +
-    `${chalk.bold('Testing Utilities:')}\n` +
-    `• @baraqex/testing-utils\n` +
-    `• Jest with Baraqex preset\n` +
-    `• Playwright for E2E testing`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
+async function generateNextSteps(projectName, config) {
+  const steps = [
+    `cd ${projectName}`,
+    !config.installDeps ? `${config.packageManager} install` : null,
+    `${config.packageManager} run dev`
+  ].filter(Boolean);
   
-  const testExample = `// Example component test
-import { render, screen } from '@baraqex/testing-utils';
-import Button from '../Button';
-
-test('renders button with text', () => {
-  render(<Button>Click me</Button>);
-  expect(screen.getByText('Click me')).toBeInTheDocument();
-});
-
-test('calls onClick when clicked', () => {
-  const handleClick = jest.fn();
-  render(<Button onClick={handleClick}>Click me</Button>);
+  // Add conditional steps based on configuration
+  if (config.features.includes('testing')) {
+    steps.push(`${config.packageManager} run test # Run your tests`);
+  }
   
-  screen.getByText('Click me').click();
-  expect(handleClick).toHaveBeenCalledTimes(1);
-});`;
+  if (config.features.includes('docker')) {
+    steps.push('docker build -t ' + projectName + ' . # Build Docker image');
+  }
   
-  console.log(boxen(
-    `${chalk.bold('Example Test:')}\n\n${chalk.gray(testExample)}`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'gray'
-    }
-  ));
+  return steps;
 }
 
-// Code quality checker
-async function showCodeQuality() {
-  console.log(boxen(
-    `${chalk.bold.cyan('🔍 Code Quality Tools')}\n\n` +
-    `${chalk.bold('Linting & Formatting:')}\n` +
-    `• ${chalk.cyan('npm run lint')} - ESLint check\n` +
-    `• ${chalk.cyan('npm run lint:fix')} - Auto-fix issues\n` +
-    `• ${chalk.cyan('npm run format')} - Prettier formatting\n\n` +
-    `${chalk.bold('Type Checking:')}\n` +
-    `• ${chalk.cyan('npm run type-check')} - TypeScript validation\n` +
-    `• ${chalk.cyan('npm run type-coverage')} - Type coverage report\n\n` +
-    `${chalk.bold('Security:')}\n` +
-    `• ${chalk.cyan('npm audit')} - Dependency security audit\n` +
-    `• ${chalk.cyan('npm run security-check')} - Security scan\n\n` +
-    `${chalk.bold('Quality Metrics:')}\n` +
-    `• Code coverage > 80%\n` +
-    `• Type coverage > 90%\n` +
-    `• No security vulnerabilities\n` +
-    `• ESLint score: A grade`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-  
-  const qualityCheck = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'runCheck',
-      message: 'Would you like to run a code quality check?',
-      default: false
-    }
-  ]);
-  
-  if (qualityCheck.runCheck) {
-    const spinner = ora('Running code quality analysis...').start();
-    
-    // Simulate quality check
-    await new Promise(resolve => setTimeout(resolve, 3000));
-    
-    spinner.succeed('Code quality analysis complete!');
-    
-    console.log(boxen(
-      `${chalk.bold.green('Quality Report')}\n\n` +
-      `${chalk.dim('ESLint:')} ${chalk.green('✓ No issues')} ${chalk.dim('(0 errors, 0 warnings)')}\n` +
-      `${chalk.dim('TypeScript:')} ${chalk.green('✓ No type errors')}\n` +
-      `${chalk.dim('Security:')} ${chalk.green('✓ No vulnerabilities')}\n` +
-      `${chalk.dim('Test Coverage:')} ${chalk.green('87%')} ${chalk.dim('(target: 80%)')}\n` +
-      `${chalk.dim('Code Formatting:')} ${chalk.green('✓ Consistent')}\n\n` +
-      `${chalk.bold.green('Overall Grade: A+')}`,
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'green'
+function analyzeProject(targetDir) {
+  try {
+    const files = glob.sync(`${targetDir}/**/*`, { nodir: true });
+    const totalSize = files.reduce((acc, file) => {
+      try {
+        return acc + fs.statSync(file).size;
+      } catch {
+        return acc;
       }
-    ));
+    }, 0);
+    
+    return {
+      files: files.length,
+      size: `${(totalSize / 1024).toFixed(1)}KB`
+    };
+  } catch (error) {
+    return { files: 'Unknown', size: 'Unknown' };
   }
 }
 
-// Template information
-async function showTemplateInfo() {
-  console.log(boxen(
-    `${chalk.bold.cyan('📝 Available Project Templates')}\n\n` +
-    `${chalk.bold('🚀 basic-app')}\n` +
-    `Single-page application with essential features\n` +
-    `• Client-side rendering\n` +
-    `• Component library\n` +
-    `• State management\n\n` +
-    `${chalk.bold('🌐 ssr-template')}\n` +
-    `Server-side rendering with hydration\n` +
-    `• SEO optimization\n` +
-    `• Fast initial load\n` +
-    `• Progressive enhancement\n\n` +
-    `${chalk.bold('⚡ fullstack-app')}\n` +
-    `Complete full-stack solution\n` +
-    `• API routes\n` +
-    `• Database integration\n` +
-    `• Authentication\n\n` +
-    `${chalk.bold('🔄 go-wasm-app')}\n` +
-    `WebAssembly integration with Go\n` +
-    `• High-performance computing\n` +
-    `• Go + JavaScript interop\n` +
-    `• Optimized builds`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-  
-  console.log(`\n${chalk.dim('Create a new project:')} ${chalk.cyan('frontend-hamroun create my-app')}`);
-}
+// ...continuing with more helper functions and remaining CLI commands...
 
-// Deployment guide
-async function showDeploymentGuide() {
-  console.log(boxen(
-    `${chalk.bold.cyan('🚀 Deployment Guide')}\n\n` +
-    `${chalk.bold('Build for Production:')}\n` +
-    `• ${chalk.cyan('npm run build')} - Create production build\n` +
-    `• ${chalk.cyan('npm run build:analyze')} - Build with analysis\n\n` +
-    `${chalk.bold('Deployment Platforms:')}\n` +
-    `• ${chalk.green('Vercel:')} ${chalk.cyan('npm run deploy:vercel')}\n` +
-    `• ${chalk.green('Netlify:')} ${chalk.cyan('npm run deploy:netlify')}\n` +
-    `• ${chalk.green('Railway:')} ${chalk.cyan('npm run deploy:railway')}\n` +
-    `• ${chalk.green('Docker:')} ${chalk.cyan('docker build -t my-app .')}\n\n` +
-    `${chalk.bold('Environment Setup:')}\n` +
-    `• Configure environment variables\n` +
-    `• Set up SSL certificates\n` +
-    `• Configure CDN for static assets\n` +
-    `• Set up monitoring and analytics`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-  
-  const deploymentExample = `# .env.production
-NODE_ENV=production
-API_URL=https://api.myapp.com
-CDN_URL=https://cdn.myapp.com
-ANALYTICS_ID=your-analytics-id`;
-  
-  console.log(boxen(
-    `${chalk.bold('Example Environment Config:')}\n\n${chalk.gray(deploymentExample)}`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'gray'
-    }
-  ));
-}
-
-// Debug helper
-async function showDebugHelper() {
-  console.log(boxen(
-    `${chalk.bold.cyan('🐛 Debug Helper')}\n\n` +
-    `${chalk.bold('Common Issues & Solutions:')}\n\n` +
-    `${chalk.yellow('• Component not rendering:')}\n` +
-    `  - Check JSX syntax\n` +
-    `  - Verify component import/export\n` +
-    `  - Check console for errors\n\n` +
-    `${chalk.yellow('• State not updating:')}\n` +
-    `  - Use functional state updates\n` +
-    `  - Check dependency arrays\n` +
-    `  - Verify state immutability\n\n` +
-    `${chalk.yellow('• Performance issues:')}\n` +
-    `  - Use React.memo for expensive components\n` +
-    `  - Implement useMemo for calculations\n` +
-    `  - Check for unnecessary re-renders\n\n` +
-    `${chalk.bold('Debug Tools:')}\n` +
-    `• ${chalk.cyan('npm run debug')} - Debug mode\n` +
-    `• Browser DevTools Extensions\n` +
-    `• Frontend Hamroun DevTools\n` +
-    `• Performance Profiler`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-}
-
-// Learning resources
-async function showLearningResources() {
-  console.log(boxen(
-    `${chalk.bold.cyan('📚 Learning Resources')}\n\n` +
-    `${chalk.bold('Official Documentation:')}\n` +
-    `• ${terminalLink('Getting Started', 'https://www.baraqex.tech/docs/getting-started')}\n` +
-    `• ${terminalLink('API Reference', 'https://www.baraqex.tech/docs/api')}\n` +
-    `• ${terminalLink('Examples', 'https://github.com/mohamedx2/baraqex/examples')}\n\n` +
-    `${chalk.bold('Tutorials:')}\n` +
-    `• Building Your First App\n` +
-    `• State Management Patterns\n` +
-    `• Performance Optimization\n` +
-    `• Testing Best Practices\n\n` +
-    `${chalk.bold('Community:')}\n` +
-    `• ${terminalLink('Discord Server', 'https://discord.gg/baraqex')}\n` +
-    `• ${terminalLink('GitHub Discussions', 'https://github.com/mohamedx2/baraqex/discussions')}\n` +
-    `• ${terminalLink('Stack Overflow', 'https://stackoverflow.com/questions/tagged/baraqex')}\n\n` +
-    `${chalk.bold('Video Content:')}\n` +
-    `• YouTube Channel\n` +
-    `• Conference Talks\n` +
-    `• Live Coding Sessions`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
+program
+  .name('baraqex')
+  .description('🚀 Next-generation CLI for Baraqex - AI-Powered Full-Stack Framework')
+  .version(packageInfo.version || '1.0.0')
+  .option('--verbose', 'Enable verbose logging')
+  .option('--no-analytics', 'Disable analytics and telemetry')
+  .hook('preAction', (thisCommand) => {
+    if (thisCommand.opts().verbose) {
+      process.env.BARAQEX_VERBOSE = 'true';
     }
-  ));
-}
-
-// Configuration validator
-async function showConfigValidator() {
-  const spinner = ora('Validating project configuration...').start();
-  
-  // Simulate config validation
-  await new Promise(resolve => setTimeout(resolve, 2000));
-  
-  spinner.succeed('Configuration validation complete!');
-  
-  console.log(boxen(
-    `${chalk.bold.green('Configuration Status')}\n\n` +
-    `${chalk.dim('package.json:')} ${chalk.green('✓ Valid')}\n` +
-    `${chalk.dim('tsconfig.json:')} ${chalk.green('✓ Valid')}\n` +
-    `${chalk.dim('baraqex.config.js:')} ${chalk.green('✓ Valid')}\n` +
-    `${chalk.dim('ESLint config:')} ${chalk.green('✓ Valid')}\n` +
-    `${chalk.dim('Environment variables:')} ${chalk.yellow('⚠ Missing some optional vars')}\n\n` +
-    `${chalk.bold.yellow('Recommendations:')}\n` +
-    `• Add ANALYTICS_ID environment variable\n` +
-    `• Consider enabling strict mode in TypeScript\n` +
-    `• Update ESLint rules for better practices`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'green'
+    if (thisCommand.opts().noAnalytics) {
+      globalConfig.analytics = false;
     }
-  ));
-}
+  });
 
-// Benchmark runner
-async function showBenchmarkRunner() {
-  console.log(boxen(
-    `${chalk.bold.cyan('📈 Benchmark Runner')}\n\n` +
-    `Run performance benchmarks to compare:\n` +
-    `• Rendering performance vs other frameworks\n` +
-    `• Bundle size comparisons\n` +
-    `• Memory usage analysis\n` +
-    `• Runtime performance metrics\n\n` +
-    `${chalk.bold('Available Benchmarks:')}\n` +
-    `• ${chalk.cyan('npm run bench:render')} - Rendering performance\n` +
-    `• ${chalk.cyan('npm run bench:bundle')} - Bundle size comparison\n` +
-    `• ${chalk.cyan('npm run bench:memory')} - Memory usage\n` +
-    `• ${chalk.cyan('npm run bench:all')} - Full benchmark suite`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-  
-  const runBenchmark = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'run',
-      message: 'Would you like to run a quick benchmark?',
-      default: false
-    }
-  ]);
-  
-  if (runBenchmark.run) {
-    const spinner = ora('Running performance benchmarks...').start();
-    
-    // Simulate benchmark
-    await new Promise(resolve => setTimeout(resolve, 4000));
-    
-    spinner.succeed('Benchmark complete!');
-    
-    console.log(boxen(
-      `${chalk.bold.green('Benchmark Results')}\n\n` +
-      `${chalk.dim('Rendering (1000 components):')} ${chalk.green('23.4ms')}\n` +
-      `${chalk.dim('Bundle size (gzipped):')} ${chalk.green('125.3 KB')}\n` +
-      `${chalk.dim('Memory usage (peak):')} ${chalk.green('45.2 MB')}\n` +
-      `${chalk.dim('First paint:')} ${chalk.green('0.8s')}\n` +
-      `${chalk.dim('Interactive:')} ${chalk.green('1.2s')}\n\n` +
-      `${chalk.bold.green('Performance Grade: A')}\n\n` +
-      `${chalk.dim('Comparison with React:')} ${chalk.green('18% faster')}\n` +
-      `${chalk.dim('Comparison with Vue:')} ${chalk.green('12% faster')}`,
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'green'
-      }
-    ));
-  }
-}
+// Enhanced create command
+program
+  .command('create [name]')
+  .description('🎯 Create a new Baraqex project with AI-powered setup')
+  .option('-t, --template <template>', 'Template: basic-app, ssr-template, fullstack-app, go-wasm-app, pwa-app')
+  .option('--npm', 'Use npm package manager')
+  .option('--yarn', 'Use yarn package manager') 
+  .option('--pnpm', 'Use pnpm package manager')
+  .option('--typescript', 'Enable TypeScript')
+  .option('--no-typescript', 'Disable TypeScript')
+  .option('--no-install', 'Skip dependency installation')
+  .option('--no-git', 'Skip git repository initialization')
+  .option('--styling <solution>', 'Styling solution: tailwind, styled-components, css-modules, vanilla')
+  .option('--features <features>', 'Comma-separated features: linting,testing,pwa,i18n,analyzer,docker,github-actions,analytics')
+  .action(createProject);
 
-// Default command when no arguments
+// Default command when no arguments - show enhanced dashboard
 if (process.argv.length <= 2) {
-  showDashboard();
+  displayBanner();
 } else {
   program.parse(process.argv);
 }