frontend-hamroun 1.2.82 → 1.2.84

package/bin/cli.js

@@ -1,9 +1,8 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import { Command } from 'commander';
 import inquirer from 'inquirer';
 import chalk from 'chalk';
-import gradient from 'gradient-string';
 import { createSpinner } from 'nanospinner';
 import path from 'path';
 import fs from 'fs-extra';
@@ -11,55 +10,37 @@ import { fileURLToPath } from 'url';
 import { exec } 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';
 
 // Convert to ESM-friendly __dirname equivalent
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const execAsync = promisify(exec);
 
-// Check for package updates
-try {
-  const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
-  const notifier = updateNotifier({ pkg, updateCheckInterval: 1000 * 60 * 60 * 24 });
-  
-  if (notifier.update) {
-    const updateMessage = boxen(
-      `Update available: ${chalk.dim(notifier.update.current)} → ${chalk.green(notifier.update.latest)}\n` +
-      `Run ${chalk.cyan('npm i -g frontend-hamroun')} to update`,
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'cyan'
-      }
-    );
-    console.log(updateMessage);
-  }
-} catch (error) {
-  // Silently continue if update check fails
-}
-
 // CLI instance
 const program = new Command();
 
-// Create beautiful ASCII art banner with gradient colors
+// Create beautiful ASCII art banner
 const displayBanner = () => {
-  const titleText = figlet.textSync('Frontend Hamroun', { 
-    font: 'Standard',
-    horizontalLayout: 'default',
-    verticalLayout: 'default' 
-  });
-  
-  console.log('\n' + gradient.pastel.multiline(titleText));
+  console.log('\n' + chalk.cyan(`
+  ███████╗██████╗  ██████╗ ███╗   ██╗████████╗███████╗███╗   ██╗██████╗ 
+  ██╔════╝██╔══██╗██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝████╗  ██║██╔══██╗
+  █████╗  ██████╔╝██║   ██║██╔██╗ ██║   ██║   █████╗  ██╔██╗ ██║██║  ██║
+  ██╔══╝  ██╔══██╗██║   ██║██║╚██╗██║   ██║   ██╔══╝  ██║╚██╗██║██║  ██║
+  ██║     ██║  ██║╚██████╔╝██║ ╚████║   ██║   ███████╗██║ ╚████║██████╔╝
+  ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝╚═╝  ╚═══╝╚═════╝ 
+                                                                        
+  ██╗  ██╗ █████╗ ███╗   ███╗██████╗  ██████╗ ██╗   ██╗███╗   ██╗
+  ██║  ██║██╔══██╗████╗ ████║██╔══██╗██╔═══██╗██║   ██║████╗  ██║
+  ███████║███████║██╔████╔██║██████╔╝██║   ██║██║   ██║██╔██╗ ██║
+  ██╔══██║██╔══██║██║╚██╔╝██║██╔══██╗██║   ██║██║   ██║██║╚██╗██║
+  ██║  ██║██║  ██║██║ ╚═╝ ██║██║  ██║╚██████╔╝╚██████╔╝██║ ╚████║
+  ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═══╝
+  `));
   
   console.log(boxen(
-    `${chalk.bold('A lightweight full-stack JavaScript framework')}\n\n` +
-    `${chalk.dim('Version:')} ${chalk.cyan(JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')).version)}\n` +
-    `${chalk.dim('Documentation:')} ${terminalLink('frontendhamroun.io', 'https://github.com/hamroun/frontend-hamroun')}`,
+    `${chalk.bold('A lightweight frontend JavaScript framework')}\n\n` +
+    `${chalk.dim('Version:')} ${chalk.cyan('1.2.0')}\n` +
+    `${chalk.dim('Focus:')} Client-side applications only`,
     {
       padding: 1,
       margin: { top: 1, bottom: 1 },
@@ -72,106 +53,18 @@ const displayBanner = () => {
 // Version and description
 program
   .name('frontend-hamroun')
-  .description('CLI for Frontend Hamroun - A lightweight full-stack JavaScript framework')
-  .version(JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')).version);
-
-// Helper for creating visually consistent sections
-const createSection = (title) => {
-  console.log('\n' + chalk.bold.cyan(`◆ ${title}`));
-  console.log(chalk.cyan('─'.repeat(60)) + '\n');
-};
-
-// Helper for checking dependencies with improved feedback
-async function checkDependencies() {
-  const spinner = ora({
-    text: 'Checking environment...',
-    spinner: 'dots',
-    color: 'cyan'
-  }).start();
-  
-  try {
-    // Check Node version
-    const nodeVersionOutput = await execAsync('node --version');
-    const nodeVersion = nodeVersionOutput.stdout.trim().replace('v', '');
-    const requiredNodeVersion = '14.0.0';
-    
-    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;
-    }
-    
-    // Check npm version
-    const npmVersionOutput = await execAsync('npm --version');
-    const npmVersion = npmVersionOutput.stdout.trim();
-    const requiredNpmVersion = '6.0.0';
-    
-    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;
-    }
-    
-    spinner.succeed(`Environment ready: Node ${chalk.green(nodeVersion)}, npm ${chalk.green(npmVersion)}`);
-    return true;
-  } catch (error) {
-    spinner.fail('Environment check failed');
-    console.log(chalk.red('Error: Node.js and npm are required to use this tool.'));
-    return false;
-  }
-}
+  .description('CLI for Frontend Hamroun - A lightweight frontend JavaScript framework')
+  .version('1.2.0');
 
-// 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
+// Choose template interactively
 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 templates = ['basic-app']; // Only frontend templates
   
   console.log(boxen(
     `${chalk.bold('Available Project Templates')}\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';
-      
-      return `${icon} ${chalk.cyan(template)}\n   ${chalk.dim(shortDesc)}`;
-    }).join('\n\n'),
+    `🚀 ${chalk.cyan('basic-app')}\n` +
+    `   Single-page application with client-side features`,
     {
       padding: 1,
       margin: 1,
@@ -180,129 +73,12 @@ async function chooseTemplate() {
     }
   ));
   
-  const templateChoices = templates.map(template => ({
-    name: `${templateIcons[template] || '📦'} ${chalk.bold(template)}`,
-    value: template,
-    description: templateDescriptions[template] || 'An application template'
-  }));
-  
-  const answers = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'template',
-      message: chalk.green('Select a project template:'),
-      choices: templateChoices,
-      loop: false,
-      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'];
-    
-    console.log(boxen(detailedDescription.join('\n'), {
-      padding: 1,
-      margin: 1,
-      title: answers.template,
-      titleAlignment: 'center',
-      borderStyle: 'round',
-      borderColor: 'yellow'
-    }));
-    
-    const proceed = await inquirer.prompt([{
-      type: 'confirm',
-      name: 'continue',
-      message: 'Continue with this template?',
-      default: true
-    }]);
-    
-    if (!proceed.continue) {
-      return chooseTemplate();
-    }
-  }
-  
-  return answers.template;
+  return 'basic-app'; // Default to basic-app for frontend-only
 }
 
-// Create a new project with enhanced visuals and status updates
+// Create a new project
 async function createProject(projectName, options) {
   displayBanner();
-  createSection('Project Setup');
 
   if (!projectName) {
     const answers = await inquirer.prompt([
@@ -320,8 +96,6 @@ async function createProject(projectName, options) {
     projectName = answers.projectName;
   }
 
-  if (!await checkDependencies()) return;
-
   let template = options.template || await chooseTemplate();
 
   const targetDir = path.resolve(projectName);
@@ -342,73 +116,46 @@ async function createProject(projectName, options) {
     }
   }
 
-  // Multi-step execution with progress reporting
-  console.log(chalk.dim('\nCreating your new project...'));
+  const spinner = createSpinner('Creating project...').start();
   
-  // Step 1: Create directory
-  const step1 = ora({text: 'Creating project directory', color: 'cyan'}).start();
   try {
+    // Create directory and copy template
     await fs.ensureDir(targetDir);
-    step1.succeed();
-  } catch (error) {
-    step1.fail();
-    console.error(chalk.red(`Error creating directory: ${error.message}`));
-    return;
-  }
-  
-  // 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;
-  }
-  
-  // Step 3: Update package.json
-  const step3 = ora({text: 'Configuring package.json', color: 'cyan'}).start();
-  try {
+    
+    // Update package.json
     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');
     }
+    
+    spinner.success({ text: `Project created successfully!` });
+    
+    console.log('\n' + boxen(
+      `${chalk.bold.green('Frontend project created!')}\n\n` +
+      `${chalk.bold('Project:')} ${chalk.cyan(projectName)}\n` +
+      `${chalk.bold('Template:')} ${chalk.cyan(template)}\n` +
+      `${chalk.bold('Type:')} Frontend-only application\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('Your app will run at:')} ${chalk.cyan('http://localhost:3000')}`,
+      {
+        padding: 1,
+        margin: 1,
+        borderStyle: 'round',
+        borderColor: 'green'
+      }
+    ));
   } catch (error) {
-    step3.fail();
-    console.error(chalk.red(`Error updating package.json: ${error.message}`));
-    return;
+    spinner.error({ text: `Failed to create project: ${error.message}` });
   }
-  
-  // Final success message with helpful instructions
-  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('frontendhamroun.io', 'https://github.com/hamroun/frontend-hamroun')}`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'green'
-    }
-  ));
-  
-  // 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
+// Add component
 async function addComponent(componentName, options) {
   displayBanner();
   createSection('Create Component');
@@ -738,11 +485,11 @@ function showDashboard() {
   ));
 }
 
-// Register commands with improved descriptions
+// Register commands
 program
   .command('create [name]')
   .description('Create a new Frontend Hamroun project')
-  .option('-t, --template <template>', 'Specify template (basic-app, ssr-template, fullstack-app)')
+  .option('-t, --template <template>', 'Specify template (basic-app)')
   .action(createProject);
 
 program
@@ -753,569 +500,10 @@ program
   .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'
-    }
-  ));
-  
-  const performanceCheck = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'runAnalysis',
-      message: 'Would you like to run a quick performance analysis?',
-      default: false
-    }
-  ]);
-  
-  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'
-      }
-    ));
-  }
-}
-
-// 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` +
-    `• @frontend-hamroun/testing-utils\n` +
-    `• Jest with Frontend Hamroun preset\n` +
-    `• Playwright for E2E testing`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-  
-  const testExample = `// Example component test
-import { render, screen } from '@frontend-hamroun/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>);
-  
-  screen.getByText('Click me').click();
-  expect(handleClick).toHaveBeenCalledTimes(1);
-});`;
-  
-  console.log(boxen(
-    `${chalk.bold('Example Test:')}\n\n${chalk.gray(testExample)}`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'gray'
-    }
-  ));
-}
-
-// 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'
-      }
-    ));
-  }
-}
-
-// 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')}`);
-}
-
-// 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://github.com/hamroun/frontend-hamroun')}\n` +
-    `• ${terminalLink('API Reference', 'https://github.com/hamroun/frontend-hamroun/docs')}\n` +
-    `• ${terminalLink('Examples', 'https://github.com/hamroun/frontend-hamroun/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/frontend-hamroun')}\n` +
-    `• ${terminalLink('GitHub Discussions', 'https://github.com/hamroun/frontend-hamroun/discussions')}\n` +
-    `• ${terminalLink('Stack Overflow', 'https://stackoverflow.com/questions/tagged/frontend-hamroun')}\n\n` +
-    `${chalk.bold('Video Content:')}\n` +
-    `• YouTube Channel\n` +
-    `• Conference Talks\n` +
-    `• Live Coding Sessions`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-}
-
-// 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('hamroun.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'
-    }
-  ));
-}
-
-// 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'
-      }
-    ));
-  }
-}
-
 // Default command when no arguments
 if (process.argv.length <= 2) {
-  showDashboard();
+  displayBanner();
+  console.log('\n' + chalk.cyan('Get started with:') + ' ' + chalk.yellow('frontend-hamroun create my-app'));
 } else {
   program.parse(process.argv);
 }