create-fs-cli 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fs-cli",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "CLI tool to scaffold full-stack applications with interactive prompts",
   "main": "src/index.js",
   "bin": {

package/src/commands/create.js

@@ -18,6 +18,7 @@ export async function createProject(projectName) {
         type: 'input',
         name: 'projectName',
         message: 'Project name:',
+        prefix: chalk.cyan('?'),
         default: 'my-fullstack-app',
         validate: (input) => {
           if (!/^[a-zA-Z0-9_-]+$/.test(input)) {
@@ -33,16 +34,18 @@ export async function createProject(projectName) {
         type: 'list',
         name: 'frontend',
         message: 'Choose frontend framework:',
+        prefix: chalk.cyan('?'),
         choices: [
           { name: 'Next.js', value: 'nextjs' },
           { name: 'React + Vite', value: 'react-vite' },
-          { name: 'Svelte', value: 'svelte' }
+          { name: 'SvelteKit', value: 'svelte' }
         ]
       },
       {
         type: 'list',
         name: 'backend',
         message: 'Choose backend framework:',
+        prefix: chalk.cyan('?'),
         choices: [
           { name: 'Next.js API Routes (integrated)', value: 'nextjs-api' },
           { name: 'Express', value: 'express' },
@@ -54,6 +57,7 @@ export async function createProject(projectName) {
         type: 'list',
         name: 'database',
         message: 'Choose database:',
+        prefix: chalk.cyan('?'),
         choices: [
           { name: 'PostgreSQL', value: 'postgres' },
           { name: 'MongoDB', value: 'mongodb' },
@@ -66,6 +70,7 @@ export async function createProject(projectName) {
 
     // Step 1: Gather all information
     const answers = await inquirer.prompt(prompts);
+    console.log(); // Add spacing after prompts
     
     // Use CLI argument if provided, otherwise use prompted value
     if (projectName) {
@@ -74,7 +79,7 @@ export async function createProject(projectName) {
 
     // Validate backend/database combination
     if (answers.backend === 'fastapi' && answers.database === 'mysql') {
-      console.log(chalk.yellow('\n⚠️  FastAPI template does not support MySQL. Defaulting to PostgreSQL.\n'));
+      console.log(`\n  ${chalk.yellow('⚠')} ${chalk.bold('Warning')} ${chalk.dim('· FastAPI template does not support MySQL. Defaulting to PostgreSQL.')}\n`);
       answers.database = 'postgres';
     }
 
@@ -86,20 +91,21 @@ export async function createProject(projectName) {
         {
           type: 'confirm',
           name: 'overwrite',
+          prefix: chalk.yellow('⚠'),
           message: `Directory ${answers.projectName} already exists. Overwrite?`,
           default: false
         }
       ]);
       
       if (!overwrite) {
-        console.log(chalk.red('Aborted.'));
+        console.log(chalk.red('\n  Aborted.\n'));
         process.exit(1);
       }
       await fs.remove(projectPath);
     }
 
     await fs.ensureDir(projectPath);
-    console.log(chalk.green(`\n📁 Created project directory: ${answers.projectName}\n`));
+    console.log(`\n  ${chalk.green('✔')} ${chalk.bold('Project Directory')} ${chalk.dim('·')} ${answers.projectName}`);
 
     // Step 2: Generate frontend
     await generateFrontend(answers, projectPath);
@@ -119,10 +125,11 @@ export async function createProject(projectName) {
     await initializeGit(projectPath);
 
     // Step 7: Show success message
+    console.log(); // Empty line before success message
     showSuccessMessage(answers);
 
   } catch (error) {
-    console.error(chalk.red('\n❌ Error:'), error.message);
+    console.error(`\n  ${chalk.red('✖')} ${chalk.bold('Error')} ${chalk.dim('·')} ${error.message}\n`);
     process.exit(1);
   }
 }
@@ -215,7 +222,7 @@ The frontend includes a visual indicator in the top-right corner showing backend
 }
 
 async function cleanupProject(projectPath) {
-  const spinner = ora('Cleaning up...').start();
+  const spinner = ora({ text: 'Cleaning up...', color: 'cyan' }).start();
   
   try {
     // Remove .git from frontend (created by create-next-app, create-vite, etc.)
@@ -230,22 +237,22 @@ async function cleanupProject(projectPath) {
       await fs.remove(backendGit);
     }
     
-    spinner.succeed('Project cleaned up!');
+    spinner.succeed(chalk.dim('Project cleaned up'));
   } catch (error) {
-    spinner.warn('Cleanup warning: ' + error.message);
+    spinner.warn(chalk.yellow('Cleanup warning: ' + error.message));
   }
 }
 
 async function initializeGit(projectPath) {
-  const spinner = ora('Initializing git repository...').start();
+  const spinner = ora({ text: 'Initializing git repository...', color: 'cyan' }).start();
   
   try {
     await execa('git', ['init'], { cwd: projectPath });
     await execa('git', ['add', '.'], { cwd: projectPath });
     await execa('git', ['commit', '-m', 'Initial commit from FullStack CLI'], { cwd: projectPath });
     
-    spinner.succeed('Git repository initialized!');
+    spinner.succeed(chalk.dim('Git repository initialized'));
   } catch (error) {
-    spinner.warn('Git init skipped: ' + error.message);
+    spinner.warn(chalk.yellow('Git init skipped: ' + error.message));
   }
 }

package/src/generators/backend.js

@@ -23,15 +23,17 @@ const DATABASE_BRANCHES = {
 export async function generateBackend(answers, projectPath) {
   const { backend, database } = answers;
   
-  const spinner = ora('Setting up backend...').start();
+  console.log(`\n${chalk.cyan('◯')} ${chalk.bold('Backend')} ${chalk.dim('· Setting up')} ${chalk.white(backend)}`);
+  
+  const spinner = ora({ text: `Initializing...`, color: 'cyan' }).start();
 
   try {
     const templateUrl = TEMPLATES[backend];
     const branch = DATABASE_BRANCHES[database];
     const backendPath = path.join(projectPath, 'backend');
     const isPython = backend === 'fastapi';
-
-    // Clone the template
+    
+    // Update spinner text
     spinner.text = `Cloning ${backend} template (${branch} branch)...`;
     
     await execa('git', [
@@ -66,19 +68,16 @@ export async function generateBackend(answers, projectPath) {
     
     if (isPython) {
       // For Python, just show message (user needs venv)
-      spinner.succeed(`Backend (${backend}) ready!`);
-      console.log(chalk.yellow('  ⚠️  Run: cd backend && pip install -r requirements.txt\n'));
+      spinner.succeed(chalk.dim('Backend ready'));
+      console.log(`  ${chalk.yellow('⚠')} ${chalk.dim('Run: cd backend && pip install -r requirements.txt')}\n`);
     } else {
       // For Node.js backends, auto-install
       await execa('npm', ['install'], { cwd: backendPath });
-      spinner.succeed(`Backend (${backend}) ready! Dependencies installed.`);
+      spinner.succeed(chalk.dim('Backend ready (dependencies installed)'));
     }
-    
-    console.log(chalk.gray(`  Template: ${templateUrl}`));
-    console.log(chalk.gray(`  Branch: ${branch}\n`));
 
   } catch (error) {
-    spinner.fail('Backend setup failed');
+    spinner.fail(chalk.red('Backend setup failed'));
     throw new Error(`Failed to setup backend: ${error.message}`);
   }
 }

package/src/generators/backendStatus.js

@@ -4,7 +4,7 @@ import chalk from 'chalk';
 import ora from 'ora';
 
 export async function injectBackendStatus(frontendPath, framework, isTypeScript, isIntegrated) {
-  const spinner = ora('Adding BackendStatus component...').start();
+  const spinner = ora({ text: 'Adding BackendStatus component...', color: 'cyan' }).start();
 
   try {
     switch (framework) {
@@ -18,10 +18,9 @@ export async function injectBackendStatus(frontendPath, framework, isTypeScript,
         await injectSvelte(frontendPath, isTypeScript);
         break;
     }
-    spinner.succeed('BackendStatus component added!');
+    spinner.succeed(chalk.dim('BackendStatus component added'));
   } catch (error) {
-    spinner.warn(`Could not auto-inject BackendStatus: ${error.message}`);
-    console.log(chalk.yellow('  You can manually add the BackendStatus component later.\n'));
+    spinner.warn(chalk.yellow(`Could not auto-inject BackendStatus: ${error.message}`));
   }
 }
 
@@ -71,30 +70,45 @@ import { useEffect, useState } from 'react'
 type Status = 'checking' | 'connected' | 'disconnected'
 
 export default function BackendStatus() {
-  const [status, setStatus] = useState<Status>('checking')
+  const [backendStatus, setBackendStatus] = useState<Status>('checking')
+  const [dbStatus, setDbStatus] = useState<Status | null>(null)
   
   useEffect(() => {
-    const checkBackend = async () => {
+    const checkHealth = async () => {
       try {
         const res = await fetch('${backendUrl}')
-        setStatus(res.ok ? 'connected' : 'disconnected')
+        if (res.ok) {
+          const data = await res.json()
+          setBackendStatus('connected')
+          if (typeof data.database === 'boolean') {
+            setDbStatus(data.database ? 'connected' : 'disconnected')
+          }
+        } else {
+          setBackendStatus('disconnected')
+          setDbStatus(prev => prev !== null ? 'disconnected' : null)
+        }
       } catch {
-        setStatus('disconnected')
+        setBackendStatus('disconnected')
+        setDbStatus(prev => prev !== null ? 'disconnected' : null)
       }
     }
     
-    checkBackend()
-    const interval = setInterval(checkBackend, 5000)
+    checkHealth()
+    const interval = setInterval(checkHealth, 5000)
     return () => clearInterval(interval)
   }, [])
   
-  const statusConfig = {
-    checking: { dot: '#fbbf24', text: 'Checking...' },
-    connected: { dot: '#22c55e', text: 'Connected' },
-    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  const colors: Record<Status, string> = {
+    checking: '#fbbf24',
+    connected: '#22c55e',
+    disconnected: '#ef4444'
   }
   
-  const { dot, text } = statusConfig[status]
+  const labels: Record<Status, string> = {
+    checking: 'Checking...',
+    connected: 'Connected',
+    disconnected: 'Disconnected'
+  }
   
   return (
     <div style={{
@@ -106,10 +120,10 @@ export default function BackendStatus() {
       border: '1px solid rgba(255, 255, 255, 0.1)',
       color: 'rgba(255, 255, 255, 0.9)',
       padding: '0.5rem 0.875rem',
-      borderRadius: '9999px',
+      borderRadius: '0.75rem',
       display: 'flex',
-      alignItems: 'center',
-      gap: '0.5rem',
+      flexDirection: 'column',
+      gap: '0.375rem',
       zIndex: 50,
       fontFamily: 'system-ui, -apple-system, sans-serif',
       fontSize: '0.8125rem',
@@ -117,14 +131,28 @@ export default function BackendStatus() {
       letterSpacing: '-0.01em',
       transition: 'all 0.2s ease'
     }}>
-      <span style={{
-        width: '8px',
-        height: '8px',
-        borderRadius: '50%',
-        backgroundColor: dot,
-        boxShadow: \`0 0 8px \${dot}\`
-      }} />
-      <span>Backend: {text}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <span style={{
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: colors[backendStatus],
+          boxShadow: \`0 0 8px \${colors[backendStatus]}\`
+        }} />
+        <span>Backend: {labels[backendStatus]}</span>
+      </div>
+      {dbStatus && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <span style={{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            backgroundColor: colors[dbStatus],
+            boxShadow: \`0 0 8px \${colors[dbStatus]}\`
+          }} />
+          <span>Database: {labels[dbStatus]}</span>
+        </div>
+      )}
     </div>
   )
 }
@@ -135,30 +163,45 @@ export default function BackendStatus() {
 import { useEffect, useState } from 'react'
 
 export default function BackendStatus() {
-  const [status, setStatus] = useState('checking')
+  const [backendStatus, setBackendStatus] = useState('checking')
+  const [dbStatus, setDbStatus] = useState(null)
   
   useEffect(() => {
-    const checkBackend = async () => {
+    const checkHealth = async () => {
       try {
         const res = await fetch('${backendUrl}')
-        setStatus(res.ok ? 'connected' : 'disconnected')
+        if (res.ok) {
+          const data = await res.json()
+          setBackendStatus('connected')
+          if (typeof data.database === 'boolean') {
+            setDbStatus(data.database ? 'connected' : 'disconnected')
+          }
+        } else {
+          setBackendStatus('disconnected')
+          setDbStatus(prev => prev !== null ? 'disconnected' : null)
+        }
       } catch {
-        setStatus('disconnected')
+        setBackendStatus('disconnected')
+        setDbStatus(prev => prev !== null ? 'disconnected' : null)
       }
     }
     
-    checkBackend()
-    const interval = setInterval(checkBackend, 5000)
+    checkHealth()
+    const interval = setInterval(checkHealth, 5000)
     return () => clearInterval(interval)
   }, [])
   
-  const statusConfig = {
-    checking: { dot: '#fbbf24', text: 'Checking...' },
-    connected: { dot: '#22c55e', text: 'Connected' },
-    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  const colors = {
+    checking: '#fbbf24',
+    connected: '#22c55e',
+    disconnected: '#ef4444'
   }
   
-  const { dot, text } = statusConfig[status]
+  const labels = {
+    checking: 'Checking...',
+    connected: 'Connected',
+    disconnected: 'Disconnected'
+  }
   
   return (
     <div style={{
@@ -170,10 +213,10 @@ export default function BackendStatus() {
       border: '1px solid rgba(255, 255, 255, 0.1)',
       color: 'rgba(255, 255, 255, 0.9)',
       padding: '0.5rem 0.875rem',
-      borderRadius: '9999px',
+      borderRadius: '0.75rem',
       display: 'flex',
-      alignItems: 'center',
-      gap: '0.5rem',
+      flexDirection: 'column',
+      gap: '0.375rem',
       zIndex: 50,
       fontFamily: 'system-ui, -apple-system, sans-serif',
       fontSize: '0.8125rem',
@@ -181,14 +224,28 @@ export default function BackendStatus() {
       letterSpacing: '-0.01em',
       transition: 'all 0.2s ease'
     }}>
-      <span style={{
-        width: '8px',
-        height: '8px',
-        borderRadius: '50%',
-        backgroundColor: dot,
-        boxShadow: \`0 0 8px \${dot}\`
-      }} />
-      <span>Backend: {text}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <span style={{
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: colors[backendStatus],
+          boxShadow: \`0 0 8px \${colors[backendStatus]}\`
+        }} />
+        <span>Backend: {labels[backendStatus]}</span>
+      </div>
+      {dbStatus && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <span style={{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            backgroundColor: colors[dbStatus],
+            boxShadow: \`0 0 8px \${colors[dbStatus]}\`
+          }} />
+          <span>Database: {labels[dbStatus]}</span>
+        </div>
+      )}
     </div>
   )
 }
@@ -258,30 +315,45 @@ function getReactBackendStatusCode(isTypeScript) {
 type Status = 'checking' | 'connected' | 'disconnected'
 
 export default function BackendStatus() {
-  const [status, setStatus] = useState<Status>('checking')
+  const [backendStatus, setBackendStatus] = useState<Status>('checking')
+  const [dbStatus, setDbStatus] = useState<Status | null>(null)
   
   useEffect(() => {
-    const checkBackend = async () => {
+    const checkHealth = async () => {
       try {
         const res = await fetch('http://localhost:5000/api/health')
-        setStatus(res.ok ? 'connected' : 'disconnected')
+        if (res.ok) {
+          const data = await res.json()
+          setBackendStatus('connected')
+          if (typeof data.database === 'boolean') {
+            setDbStatus(data.database ? 'connected' : 'disconnected')
+          }
+        } else {
+          setBackendStatus('disconnected')
+          setDbStatus(prev => prev !== null ? 'disconnected' : null)
+        }
       } catch {
-        setStatus('disconnected')
+        setBackendStatus('disconnected')
+        setDbStatus(prev => prev !== null ? 'disconnected' : null)
       }
     }
     
-    checkBackend()
-    const interval = setInterval(checkBackend, 5000)
+    checkHealth()
+    const interval = setInterval(checkHealth, 5000)
     return () => clearInterval(interval)
   }, [])
   
-  const statusConfig = {
-    checking: { dot: '#fbbf24', text: 'Checking...' },
-    connected: { dot: '#22c55e', text: 'Connected' },
-    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  const colors: Record<Status, string> = {
+    checking: '#fbbf24',
+    connected: '#22c55e',
+    disconnected: '#ef4444'
   }
   
-  const { dot, text } = statusConfig[status]
+  const labels: Record<Status, string> = {
+    checking: 'Checking...',
+    connected: 'Connected',
+    disconnected: 'Disconnected'
+  }
   
   return (
     <div style={{
@@ -293,23 +365,37 @@ export default function BackendStatus() {
       border: '1px solid rgba(255, 255, 255, 0.1)',
       color: 'rgba(255, 255, 255, 0.9)',
       padding: '0.5rem 0.875rem',
-      borderRadius: '9999px',
+      borderRadius: '0.75rem',
       display: 'flex',
-      alignItems: 'center',
-      gap: '0.5rem',
+      flexDirection: 'column',
+      gap: '0.375rem',
       zIndex: 50,
       fontFamily: 'system-ui, -apple-system, sans-serif',
       fontSize: '0.8125rem',
       fontWeight: 500
     }}>
-      <span style={{
-        width: '8px',
-        height: '8px',
-        borderRadius: '50%',
-        backgroundColor: dot,
-        boxShadow: \`0 0 8px \${dot}\`
-      }} />
-      <span>Backend: {text}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <span style={{
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: colors[backendStatus],
+          boxShadow: \`0 0 8px \${colors[backendStatus]}\`
+        }} />
+        <span>Backend: {labels[backendStatus]}</span>
+      </div>
+      {dbStatus && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <span style={{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            backgroundColor: colors[dbStatus],
+            boxShadow: \`0 0 8px \${colors[dbStatus]}\`
+          }} />
+          <span>Database: {labels[dbStatus]}</span>
+        </div>
+      )}
     </div>
   )
 }
@@ -319,30 +405,45 @@ export default function BackendStatus() {
   return `import { useEffect, useState } from 'react'
 
 export default function BackendStatus() {
-  const [status, setStatus] = useState('checking')
+  const [backendStatus, setBackendStatus] = useState('checking')
+  const [dbStatus, setDbStatus] = useState(null)
   
   useEffect(() => {
-    const checkBackend = async () => {
+    const checkHealth = async () => {
       try {
         const res = await fetch('http://localhost:5000/api/health')
-        setStatus(res.ok ? 'connected' : 'disconnected')
+        if (res.ok) {
+          const data = await res.json()
+          setBackendStatus('connected')
+          if (typeof data.database === 'boolean') {
+            setDbStatus(data.database ? 'connected' : 'disconnected')
+          }
+        } else {
+          setBackendStatus('disconnected')
+          setDbStatus(prev => prev !== null ? 'disconnected' : null)
+        }
       } catch {
-        setStatus('disconnected')
+        setBackendStatus('disconnected')
+        setDbStatus(prev => prev !== null ? 'disconnected' : null)
       }
     }
     
-    checkBackend()
-    const interval = setInterval(checkBackend, 5000)
+    checkHealth()
+    const interval = setInterval(checkHealth, 5000)
     return () => clearInterval(interval)
   }, [])
   
-  const statusConfig = {
-    checking: { dot: '#fbbf24', text: 'Checking...' },
-    connected: { dot: '#22c55e', text: 'Connected' },
-    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  const colors = {
+    checking: '#fbbf24',
+    connected: '#22c55e',
+    disconnected: '#ef4444'
   }
   
-  const { dot, text } = statusConfig[status]
+  const labels = {
+    checking: 'Checking...',
+    connected: 'Connected',
+    disconnected: 'Disconnected'
+  }
   
   return (
     <div style={{
@@ -354,23 +455,37 @@ export default function BackendStatus() {
       border: '1px solid rgba(255, 255, 255, 0.1)',
       color: 'rgba(255, 255, 255, 0.9)',
       padding: '0.5rem 0.875rem',
-      borderRadius: '9999px',
+      borderRadius: '0.75rem',
       display: 'flex',
-      alignItems: 'center',
-      gap: '0.5rem',
+      flexDirection: 'column',
+      gap: '0.375rem',
       zIndex: 50,
       fontFamily: 'system-ui, -apple-system, sans-serif',
       fontSize: '0.8125rem',
       fontWeight: 500
     }}>
-      <span style={{
-        width: '8px',
-        height: '8px',
-        borderRadius: '50%',
-        backgroundColor: dot,
-        boxShadow: \`0 0 8px \${dot}\`
-      }} />
-      <span>Backend: {text}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <span style={{
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: colors[backendStatus],
+          boxShadow: \`0 0 8px \${colors[backendStatus]}\`
+        }} />
+        <span>Backend: {labels[backendStatus]}</span>
+      </div>
+      {dbStatus && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <span style={{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            backgroundColor: colors[dbStatus],
+            boxShadow: \`0 0 8px \${colors[dbStatus]}\`
+          }} />
+          <span>Database: {labels[dbStatus]}</span>
+        </div>
+      )}
     </div>
   )
 }
@@ -441,43 +556,66 @@ function getSvelteBackendStatusCode() {
   return `<script>
   import { onMount, onDestroy } from 'svelte';
   
-  let status = 'checking';
+  let backendStatus = 'checking';
+  let dbStatus = null;
   let interval;
   
-  const statusConfig = {
-    checking: { text: 'Checking', color: '#eab308' },
-    connected: { text: 'Connected', color: '#22c55e' },
-    disconnected: { text: 'Disconnected', color: '#ef4444' }
+  const colors = {
+    checking: '#fbbf24',
+    connected: '#22c55e',
+    disconnected: '#ef4444'
   };
   
-  async function checkBackend() {
+  const labels = {
+    checking: 'Checking...',
+    connected: 'Connected',
+    disconnected: 'Disconnected'
+  };
+  
+  async function checkHealth() {
     try {
       const res = await fetch('http://localhost:5000/api/health');
-      status = res.ok ? 'connected' : 'disconnected';
+      if (res.ok) {
+        const data = await res.json();
+        backendStatus = 'connected';
+        if (typeof data.database === 'boolean') {
+          dbStatus = data.database ? 'connected' : 'disconnected';
+        }
+      } else {
+        backendStatus = 'disconnected';
+        if (dbStatus !== null) dbStatus = 'disconnected';
+      }
     } catch {
-      status = 'disconnected';
+      backendStatus = 'disconnected';
+      if (dbStatus !== null) dbStatus = 'disconnected';
     }
   }
   
   onMount(() => {
-    checkBackend();
-    interval = setInterval(checkBackend, 5000);
+    checkHealth();
+    interval = setInterval(checkHealth, 5000);
   });
   
   onDestroy(() => {
     if (interval) clearInterval(interval);
   });
-  
-  $: config = statusConfig[status];
 </script>
 
-<div class="backend-status">
-  <span class="dot" style="background-color: {config.color}; box-shadow: 0 0 8px {config.color};"></span>
-  <span class="text">Backend: {config.text}</span>
+<div class="status-container">
+  <div class="status-row">
+    <span class="dot" style="background-color: {colors[backendStatus]}; box-shadow: 0 0 8px {colors[backendStatus]};"></span>
+    <span class="text">Backend: {labels[backendStatus]}</span>
+  </div>
+  {#if dbStatus}
+    <div class="status-row">
+      <span class="dot" style="background-color: {colors[dbStatus]}; box-shadow: 0 0 8px {colors[dbStatus]};"></span>
+      <span class="text">Database: {labels[dbStatus]}</span>
+    </div>
+  {/if}
 </div>
 
 <style>
-  .backend-status {
+  .status-container {
     position: fixed;
     top: 1rem;
     right: 1rem;
@@ -486,17 +624,23 @@ function getSvelteBackendStatusCode() {
     -webkit-backdrop-filter: blur(8px);
     color: rgba(255, 255, 255, 0.9);
     padding: 0.5rem 0.875rem;
-    border-radius: 9999px;
+    border-radius: 0.75rem;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
+    flex-direction: column;
+    gap: 0.375rem;
     z-index: 50;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 0.75rem;
   }
   
+  .status-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
   .dot {
     width: 8px;
     height: 8px;

package/src/generators/frontend.js

@@ -8,7 +8,7 @@ import { injectBackendStatus } from './backendStatus.js';
 export async function generateFrontend(answers, projectPath) {
   const { frontend } = answers;
 
-  console.log(chalk.cyan('\n🎨 Setting up frontend...\n'));
+  console.log(`\n${chalk.cyan('◯')} ${chalk.bold('Frontend')} ${chalk.dim('· Setting up')} ${chalk.white(frontend)}`);
 
   switch (frontend) {
     case 'nextjs':
@@ -24,7 +24,7 @@ export async function generateFrontend(answers, projectPath) {
 }
 
 async function generateNextJS(answers, projectPath) {
-  console.log(chalk.yellow('📦 Running create-next-app (follow the prompts)...\n'));
+  console.log(chalk.gray('  › Running create-next-app (follow the prompts)...\n'));
   
   try {
     // Run Next.js CLI interactively
@@ -33,7 +33,7 @@ async function generateNextJS(answers, projectPath) {
       stdio: 'inherit'
     });
 
-    console.log(chalk.green('\n✅ Next.js project created!\n'));
+    console.log(`\n  ${chalk.green('✔')} ${chalk.dim('Next.js project created')}\n`);
 
     // Detect if TypeScript was chosen
     const frontendPath = path.join(projectPath, 'frontend');
@@ -49,7 +49,7 @@ async function generateNextJS(answers, projectPath) {
 }
 
 async function generateReactVite(answers, projectPath) {
-  console.log(chalk.yellow('📦 Running create-vite (follow the prompts)...\n'));
+  console.log(chalk.gray('  › Running create-vite (follow the prompts)...\n'));
   
   try {
     // Run Vite CLI interactively
@@ -58,7 +58,7 @@ async function generateReactVite(answers, projectPath) {
       stdio: 'inherit'
     });
 
-    console.log(chalk.green('\n✅ React + Vite project created!\n'));
+    console.log(`\n  ${chalk.green('✔')} ${chalk.dim('React + Vite project created')}\n`);
 
     // Detect if TypeScript was chosen
     const frontendPath = path.join(projectPath, 'frontend');
@@ -74,7 +74,7 @@ async function generateReactVite(answers, projectPath) {
 }
 
 async function generateSvelte(answers, projectPath) {
-  console.log(chalk.yellow('📦 Running create-svelte (follow the prompts)...\n'));
+  console.log(chalk.gray('  › Running create-svelte (follow the prompts)...\n'));
   
   try {
     // Run SvelteKit CLI interactively
@@ -83,7 +83,7 @@ async function generateSvelte(answers, projectPath) {
       stdio: 'inherit'
     });
 
-    console.log(chalk.green('\n✅ SvelteKit project created!\n'));
+    console.log(`\n  ${chalk.green('✔')} ${chalk.dim('SvelteKit project created')}\n`);
 
     // Detect if TypeScript was chosen
     const frontendPath = path.join(projectPath, 'frontend');

package/src/index.js

@@ -10,10 +10,10 @@ const program = new Command();
 // Display banner
 console.log(
   chalk.cyan(
-    figlet.textSync('FSCLI', { font: 'ANSI Shadow' })
+    figlet.textSync('create-fs-cli', { font: 'Standard' })
   )
 );
-console.log(chalk.gray('  Full-Stack CLI - Scaffold applications with ease\n'));
+console.log(chalk.dim('\n  ▷ Rapidly scaffold full-stack applications\n'));
 
 program
   .name('create-fs-cli')

package/src/utils/messages.js

@@ -17,61 +17,58 @@ export function showSuccessMessage(answers) {
   const hasBackend = backend !== 'nextjs-api';
   const isPython = backend === 'fastapi';
 
-  let message = chalk.green.bold('✅ Project created successfully!') + '\n\n';
+  const log = [];
+
+  // Title
+  log.push(`${chalk.bgGreen.black.bold(' SUCCESS ')} ${chalk.green(`Created ${chalk.bold(projectName)}`)}\n`);
+
+  // Tech Stack (Tree style)
+  log.push(chalk.cyan.bold('Tech Stack'));
+  log.push(`${chalk.gray('├─')} Frontend   ${chalk.white(frontendName)}`);
+  log.push(`${chalk.gray('├─')} Backend    ${chalk.white(backendName)}`);
+  log.push(`${chalk.gray('└─')} Database   ${chalk.white(dbName)}\n`);
+
+  // Next Steps
+  log.push(chalk.cyan.bold('Next Steps'));
   
-  message += chalk.white('📦 Stack:\n');
-  message += chalk.gray(`   Frontend: ${frontendName}\n`);
-  message += chalk.gray(`   Backend:  ${backendName}\n`);
-  message += chalk.gray(`   Database: ${dbName}\n\n`);
+  let stepNum = 1;
+  log.push(`${chalk.gray(`${stepNum++}.`)} cd ${projectName}`);
 
   if (hasBackend && database !== 'none') {
-    message += chalk.yellow('⚙️  Configure database:\n');
-    message += chalk.white(`   Edit ${chalk.cyan('backend/.env')} with your credentials\n\n`);
+    log.push(`${chalk.gray(`${stepNum++}.`)} Configure database inside ${chalk.white.bold('backend/.env')}`);
   }
 
-  message += chalk.yellow('📦 Install dependencies:\n');
-  message += chalk.white(`   cd ${projectName}\n`);
-  message += chalk.white(`   cd frontend && npm install\n`);
+  log.push(`${chalk.gray(`${stepNum++}.`)} Start development servers:\n`);
   
   if (hasBackend) {
-    if (isPython) {
-      message += chalk.white(`   cd ../backend && pip install -r requirements.txt\n\n`);
-    } else {
-      message += chalk.white(`   cd ../backend && npm install\n\n`);
-    }
+    log.push(chalk.gray('   # Terminal 1 (Backend)'));
+    log.push(`   ${chalk.cyan('cd')} backend`);
+    log.push(`   ${chalk.cyan(isPython ? 'uvicorn main:app --reload --port 5000' : 'npm run dev')}\n`);
+    
+    log.push(chalk.gray('   # Terminal 2 (Frontend)'));
+    log.push(`   ${chalk.cyan('cd')} frontend`);
+    log.push(`   ${chalk.cyan('npm run dev')}\n`);
   } else {
-    message += '\n';
+    log.push(`   ${chalk.cyan('cd')} frontend`);
+    log.push(`   ${chalk.cyan('npm run dev')}\n`);
   }
 
-  message += chalk.yellow('🚀 Start development:\n');
+  // Footer info
+  log.push(chalk.gray('─'.repeat(45)));
+  log.push(`${chalk.gray('Local:')}    ${chalk.white('http://localhost:3000')}`);
   
   if (hasBackend) {
-    message += chalk.gray('   # Terminal 1 - Backend:\n');
-    message += chalk.white(`   cd backend && ${isPython ? 'uvicorn main:app --reload --port 5000' : 'npm run dev'}\n\n`);
-    message += chalk.gray('   # Terminal 2 - Frontend:\n');
+    log.push(`${chalk.gray('API:')}      ${chalk.white('http://localhost:5000')}`);
   }
   
-  message += chalk.white(`   cd frontend && npm run dev\n\n`);
-
-  message += chalk.cyan('🌐 URLs:\n');
-  message += chalk.white('   Frontend: http://localhost:3000\n');
-  
-  if (hasBackend) {
-    message += chalk.white('   Backend:  http://localhost:5000\n');
-    message += chalk.white('   Health:   http://localhost:5000/api/health\n\n');
-  } else {
-    message += '\n';
-  }
-
-  message += chalk.magenta('👁️  Backend Status Indicator:\n');
-  message += chalk.gray('   Look for the status badge in the top-right corner!');
+  log.push(`${chalk.gray('Note:')}     Check the UI status badge for connection status.`);
 
   console.log(
-    boxen(message, {
-      padding: 1,
-      margin: 1,
+    boxen(log.join('\n'), {
+      padding: { top: 1, bottom: 1, left: 2, right: 3 },
+      margin: { top: 1, bottom: 1, left: 0, right: 0 },
       borderStyle: 'round',
-      borderColor: 'cyan'
+      borderColor: 'gray'
     })
   );
 }