ac-framework 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ac-framework",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Agentic Coding Framework - Multi-assistant configuration system with OpenSpec workflows",
   "main": "src/index.js",
   "bin": {
@@ -25,8 +25,7 @@
     "commander": "^12.1.0",
     "gradient-string": "^3.0.0",
     "inquirer": "^12.3.2",
-    "nanospinner": "^1.2.2",
-    "figlet": "^1.8.0"
+    "nanospinner": "^1.2.2"
   },
   "type": "module",
   "engines": {

package/src/cli.js

@@ -1,15 +1,21 @@
 #!/usr/bin/env node
 
 import { Command } from 'commander';
+import { readFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { initCommand } from './commands/init.js';
 import { showBanner } from './ui/banner.js';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkg = JSON.parse(await readFile(resolve(__dirname, '../package.json'), 'utf-8'));
+
 const program = new Command();
 
 program
   .name('acfm')
   .description('AC Framework - Agentic Coding Framework CLI')
-  .version('1.0.0');
+  .version(pkg.version);
 
 program
   .command('init')

package/src/commands/init.js

@@ -1,73 +1,94 @@
-import { readdir, cp, access } from 'node:fs/promises';
+import { readdir, cp, access, rm } from 'node:fs/promises';
 import { join, resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import chalk from 'chalk';
 import gradient from 'gradient-string';
 import inquirer from 'inquirer';
-import { createSpinner } from 'nanospinner';
 import { DESCRIPTIONS, formatFolderName, sleep } from '../utils/helpers.js';
-import { matrixRain, loadingAnimation, progressBar } from '../ui/animations.js';
+import {
+  matrixRain,
+  scanAnimation,
+  animatedSeparator,
+  revealList,
+  progressBar,
+  installWithAnimation,
+  celebrateSuccess,
+  showFailureSummary,
+  stepHeader,
+} from '../ui/animations.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const acGradient = gradient(['#6C5CE7', '#00CEC9', '#0984E3']);
-const successGradient = gradient(['#00CEC9', '#00B894', '#55EFC4']);
+
+const ALWAYS_INSTALL = ['openspec'];
 
 async function getFrameworkFolders() {
   const frameworkPath = resolve(__dirname, '../../framework');
   const entries = await readdir(frameworkPath, { withFileTypes: true });
 
   return entries
-    .filter((entry) => entry.isDirectory())
+    .filter((entry) => entry.isDirectory() && !ALWAYS_INSTALL.includes(entry.name))
     .map((entry) => entry.name)
-    .sort((a, b) => {
-      // Hidden folders first, then normal
-      const aHidden = a.startsWith('.');
-      const bHidden = b.startsWith('.');
-      if (aHidden && !bHidden) return -1;
-      if (!aHidden && bHidden) return 1;
-      return a.localeCompare(b);
-    });
+    .sort((a, b) => a.localeCompare(b));
 }
 
 function buildChoices(folders) {
   const choices = [];
 
-  const hidden = folders.filter((f) => f.startsWith('.'));
-  const visible = folders.filter((f) => !f.startsWith('.'));
-
-  if (hidden.length > 0) {
-    choices.push(new inquirer.Separator(chalk.hex('#636E72')('  ── AI Assistants ──────────────────────────')));
-    for (const folder of hidden) {
-      const desc = DESCRIPTIONS[folder] || '';
-      const displayName = formatFolderName(folder);
-      const label = `${chalk.hex('#DFE6E9').bold(displayName)}${desc ? chalk.hex('#636E72')(` — ${desc}`) : ''}`;
-      choices.push({
-        name: label,
-        value: folder,
-        short: displayName,
-      });
-    }
-  }
+  choices.push(new inquirer.Separator(
+    chalk.hex('#636E72')('  ── ') +
+    chalk.hex('#6C5CE7').bold('AI Assistants') +
+    chalk.hex('#636E72')(' ─────────────────────────────')
+  ));
 
-  if (visible.length > 0) {
-    choices.push(new inquirer.Separator(chalk.hex('#636E72')('  ── Configuration ─────────────────────────')));
-    for (const folder of visible) {
-      const desc = DESCRIPTIONS[folder] || '';
-      const displayName = formatFolderName(folder);
-      const label = `${chalk.hex('#DFE6E9').bold(displayName)}${desc ? chalk.hex('#636E72')(` — ${desc}`) : ''}`;
-      choices.push({
-        name: label,
-        value: folder,
-        short: displayName,
-      });
-    }
+  for (const folder of folders) {
+    const desc = DESCRIPTIONS[folder] || '';
+    const displayName = formatFolderName(folder);
+    const icon = getAssistantIcon(folder);
+    const label =
+      `${chalk.hex('#636E72')(icon)} ${chalk.hex('#DFE6E9').bold(displayName)}` +
+      (desc ? chalk.hex('#636E72')(` · ${desc}`) : '');
+    choices.push({
+      name: label,
+      value: folder,
+      short: displayName,
+    });
   }
 
   return choices;
 }
 
+function getAssistantIcon(folder) {
+  const icons = {
+    '.agent': '⊡',
+    '.amazonq': '◈',
+    '.augment': '◇',
+    '.claude': '◉',
+    '.cline': '◎',
+    '.clinerules': '◎',
+    '.codebuddy': '◈',
+    '.codex': '⊞',
+    '.continue': '▹',
+    '.cospec': '⊙',
+    '.crush': '◆',
+    '.cursor': '▸',
+    '.factory': '⊟',
+    '.gemini': '◇',
+    '.github': '◈',
+    '.iflow': '▹',
+    '.kilocode': '◎',
+    '.opencode': '⊡',
+    '.qoder': '◇',
+    '.qwen': '◈',
+    '.roo': '◆',
+    '.trae': '▸',
+    '.windsurf': '◇',
+  };
+  return icons[folder] || '◦';
+}
+
 async function checkExisting(targetDir, folder) {
   try {
     await access(join(targetDir, folder));
@@ -80,41 +101,47 @@ async function checkExisting(targetDir, folder) {
 export async function initCommand() {
   const targetDir = process.cwd();
 
-  // Scanning animation
-  await loadingAnimation('Scanning available modules...', 800);
+  // ── Step 1: Scan ───────────────────────────────────────────────
+  await stepHeader(1, 3, 'Scanning framework modules');
+  await scanAnimation('Indexing available modules', 1000);
   console.log();
 
-  // Matrix rain effect
-  console.log('\n'.repeat(6));
-  await matrixRain(1500);
+  // Matrix rain transition
+  await matrixRain(1800);
 
   let folders;
   try {
     folders = await getFrameworkFolders();
   } catch {
-    console.log(chalk.red('  Error: Could not read framework directory.'));
+    console.log(chalk.hex('#D63031')('  ✗ Error: Could not read framework directory.'));
     console.log(chalk.hex('#636E72')('  Make sure ac-framework is installed correctly.'));
     process.exit(1);
   }
 
   if (folders.length === 0) {
-    console.log(chalk.yellow('  No modules found in framework directory.'));
+    console.log(chalk.hex('#FDCB6E')('  No modules found in framework directory.'));
     process.exit(0);
   }
 
-  console.log(
-    chalk.hex('#B2BEC3')(`  Found ${chalk.hex('#00CEC9').bold(folders.length)} modules available\n`)
-  );
+  // Module count display
+  const countBadge = chalk.hex('#2D3436').bgHex('#00CEC9').bold(` ${folders.length} `);
+  const autoBadge = chalk.hex('#2D3436').bgHex('#6C5CE7').bold(' +openspec ');
+  console.log(`  ${countBadge} ${chalk.hex('#B2BEC3')('assistant modules found')}  ${autoBadge} ${chalk.hex('#636E72')('auto-included')}`);
+  console.log();
+  await animatedSeparator(60);
+  console.log();
+
+  // ── Step 2: Select ─────────────────────────────────────────────
+  await stepHeader(2, 3, 'Select your assistants');
 
+  // Controls hint with styled keys
+  const key = (k) => chalk.hex('#2D3436').bgHex('#636E72')(` ${k} `);
   console.log(
-    chalk.hex('#636E72')('  Use ') +
-    chalk.hex('#00CEC9')('↑↓') +
-    chalk.hex('#636E72')(' to navigate, ') +
-    chalk.hex('#00CEC9')('Space') +
-    chalk.hex('#636E72')(' to select, ') +
-    chalk.hex('#00CEC9')('Enter') +
-    chalk.hex('#636E72')(' to confirm\n')
+    `  ${key('↑↓')} ${chalk.hex('#636E72')('navigate')}  ` +
+    `${key('Space')} ${chalk.hex('#636E72')('toggle')}  ` +
+    `${key('Enter')} ${chalk.hex('#636E72')('confirm')}`
   );
+  console.log();
 
   const choices = buildChoices(folders);
 
@@ -122,13 +149,13 @@ export async function initCommand() {
     {
       type: 'checkbox',
       name: 'selected',
-      message: acGradient('Select modules to install:'),
+      message: acGradient('Choose modules to install:'),
       choices,
       pageSize: 15,
       loop: false,
       validate(answer) {
         if (answer.length === 0) {
-          return chalk.hex('#D63031')('You must select at least one module.');
+          return chalk.hex('#D63031')('Select at least one module. Use Space to toggle.');
         }
         return true;
       },
@@ -137,9 +164,10 @@ export async function initCommand() {
 
   console.log();
 
-  // Check for existing folders
+  // ── Check conflicts ────────────────────────────────────────────
+  const allForCheck = [...selected, ...ALWAYS_INSTALL];
   const existing = [];
-  for (const folder of selected) {
+  for (const folder of allForCheck) {
     if (await checkExisting(targetDir, folder)) {
       existing.push(folder);
     }
@@ -147,10 +175,14 @@ export async function initCommand() {
 
   if (existing.length > 0) {
     console.log(
-      chalk.hex('#FDCB6E')('  ⚠  The following modules already exist in your project:\n')
+      chalk.hex('#FDCB6E')('  ⚠  These modules already exist in your project:\n')
     );
     for (const folder of existing) {
-      console.log(chalk.hex('#FDCB6E')(`     • ${formatFolderName(folder)} (${folder})`));
+      console.log(
+        chalk.hex('#FDCB6E')('     ▸ ') +
+        chalk.hex('#DFE6E9')(formatFolderName(folder)) +
+        chalk.hex('#636E72')(` (${folder})`)
+      );
     }
     console.log();
 
@@ -165,28 +197,35 @@ export async function initCommand() {
 
     if (!overwrite) {
       const filtered = selected.filter((f) => !existing.includes(f));
-      if (filtered.length === 0) {
-        console.log(chalk.hex('#636E72')('\n  No new modules to install. Exiting.\n'));
+      const autoFiltered = ALWAYS_INSTALL.filter((f) => !existing.includes(f));
+      if (filtered.length === 0 && autoFiltered.length === 0) {
+        console.log(chalk.hex('#636E72')('\n  Nothing new to install. Exiting.\n'));
         process.exit(0);
       }
       selected.length = 0;
       selected.push(...filtered);
       console.log(
-        chalk.hex('#B2BEC3')(`\n  Proceeding with ${chalk.hex('#00CEC9').bold(selected.length)} new module(s)...\n`)
+        chalk.hex('#B2BEC3')(`\n  Continuing with ${chalk.hex('#00CEC9').bold(filtered.length + autoFiltered.length)} new module(s)...\n`)
       );
     }
   }
 
-  // Confirm selection
-  console.log(chalk.hex('#B2BEC3')('  Modules to install:\n'));
-  for (const folder of selected) {
+  // ── Confirm selection with animated reveal ─────────────────────
+  console.log(chalk.hex('#B2BEC3')('  Selected modules:\n'));
+
+  const selectedItems = selected.map((folder) => {
     const desc = DESCRIPTIONS[folder] || '';
-    console.log(
-      chalk.hex('#00CEC9')('  ◆ ') +
-      chalk.hex('#DFE6E9').bold(formatFolderName(folder)) +
-      (desc ? chalk.hex('#636E72')(` — ${desc}`) : '')
-    );
-  }
+    return chalk.hex('#DFE6E9').bold(formatFolderName(folder)) +
+      (desc ? chalk.hex('#636E72')(` · ${desc}`) : '');
+  });
+  selectedItems.push(
+    chalk.hex('#DFE6E9').bold('Openspec') +
+    chalk.hex('#636E72')(` · ${DESCRIPTIONS['openspec']}`) +
+    chalk.hex('#6C5CE7').italic(' (auto)')
+  );
+
+  await revealList(selectedItems, { prefix: '◆', color: '#00CEC9', delay: 40 });
+
   console.log();
 
   const { confirm } = await inquirer.prompt([
@@ -203,73 +242,46 @@ export async function initCommand() {
     process.exit(0);
   }
 
+  // ── Step 3: Install ────────────────────────────────────────────
+  console.log();
+  await animatedSeparator(60);
   console.log();
+  await stepHeader(3, 3, 'Installing modules');
 
-  // Install modules with progress
   const frameworkPath = resolve(__dirname, '../../framework');
+  const allToInstall = [...selected, ...ALWAYS_INSTALL];
   let installed = 0;
   const errors = [];
 
-  for (const folder of selected) {
-    const spinner = createSpinner(
-      chalk.hex('#B2BEC3')(`Installing ${chalk.hex('#DFE6E9').bold(formatFolderName(folder))}...`)
-    ).start();
+  for (const folder of allToInstall) {
+    const displayName = formatFolderName(folder);
 
     try {
-      const src = join(frameworkPath, folder);
-      const dest = join(targetDir, folder);
-
-      await cp(src, dest, { recursive: true, force: true });
-
-      // Skip node_modules if copied
-      const nmPath = join(dest, 'node_modules');
-      try {
-        const { rm } = await import('node:fs/promises');
-        await rm(nmPath, { recursive: true, force: true });
-      } catch {
-        // node_modules didn't exist, that's fine
-      }
+      await installWithAnimation(displayName, async () => {
+        const src = join(frameworkPath, folder);
+        const dest = join(targetDir, folder);
 
-      installed++;
-      spinner.success({
-        text:
-          chalk.hex('#00CEC9')(`  ${formatFolderName(folder)}`) +
-          chalk.hex('#636E72')(` → ${folder}/`),
+        await cp(src, dest, { recursive: true, force: true });
+
+        // Remove node_modules if present (e.g. .opencode)
+        try {
+          await rm(join(dest, 'node_modules'), { recursive: true, force: true });
+        } catch {
+          // Fine if it doesn't exist
+        }
       });
+      installed++;
     } catch (err) {
       errors.push({ folder, error: err.message });
-      spinner.error({
-        text: chalk.hex('#D63031')(`  Failed: ${formatFolderName(folder)} — ${err.message}`),
-      });
     }
 
-    await sleep(150);
+    await sleep(80);
   }
 
-  // Final summary
-  console.log();
-  console.log(
-    gradient(['#636E72', '#B2BEC3'])('  ─────────────────────────────────────────────────────────────────')
-  );
-  console.log();
-
+  // ── Final result ───────────────────────────────────────────────
   if (errors.length === 0) {
-    await progressBar('Finalizing', 20, 600);
-    console.log();
-    console.log(successGradient('  ✓ Installation complete!'));
-    console.log();
-    console.log(
-      chalk.hex('#B2BEC3')(`  ${chalk.hex('#00CEC9').bold(installed)} module(s) installed successfully in ${chalk.hex('#DFE6E9')(targetDir)}`)
-    );
+    await celebrateSuccess(installed, targetDir);
   } else {
-    console.log(
-      chalk.hex('#FDCB6E')(`  ${installed} installed, ${errors.length} failed.`)
-    );
+    await showFailureSummary(installed, errors);
   }
-
-  console.log();
-  console.log(
-    chalk.hex('#636E72')('  Your project is ready. Happy coding!')
-  );
-  console.log();
 }

package/src/ui/animations.js

@@ -1,44 +1,57 @@
 import chalk from 'chalk';
+import gradient from 'gradient-string';
 import { createSpinner } from 'nanospinner';
 import { sleep } from '../utils/helpers.js';
 
-const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const acGradient = gradient(['#6C5CE7', '#00CEC9', '#0984E3']);
+const successGradient = gradient(['#00CEC9', '#00B894', '#55EFC4']);
+const warmGradient = gradient(['#FDCB6E', '#E17055', '#D63031']);
+const glowGradient = gradient(['#0984E3', '#00CEC9', '#55EFC4', '#00CEC9', '#0984E3']);
 
-export async function matrixRain(durationMs = 1500) {
+// ── Matrix Rain ──────────────────────────────────────────────────
+
+export async function matrixRain(durationMs = 1800) {
   const cols = Math.min(process.stdout.columns || 80, 80);
+  const rows = 8;
   const drops = Array.from({ length: cols }, () => ({
-    y: Math.floor(Math.random() * 6),
-    speed: 1 + Math.floor(Math.random() * 3),
-    char: '',
+    y: Math.floor(Math.random() * rows),
+    speed: 1 + Math.floor(Math.random() * 2),
+    trail: 2 + Math.floor(Math.random() * 3),
   }));
-  const chars = '01アイウエオカキクケコサシスセソタチツテトABCDEFacfm';
-  const colors = ['#00CEC9', '#0984E3', '#6C5CE7', '#00FF41'];
-  const rows = 6;
-  const frameTime = 60;
+  const chars = '01アイウエオカキクケコサシスセソ>>=</>{}[]ACFM';
+  const colors = ['#00CEC9', '#0984E3', '#6C5CE7', '#00FF41', '#55EFC4'];
+  const frameTime = 50;
   const totalFrames = Math.floor(durationMs / frameTime);
 
+  // Print initial empty rows
+  for (let i = 0; i < rows; i++) console.log();
+
   for (let frame = 0; frame < totalFrames; frame++) {
-    let output = '';
     const grid = Array.from({ length: rows }, () => Array(cols).fill(' '));
 
     for (let c = 0; c < cols; c++) {
       const drop = drops[c];
-      if (drop.y < rows) {
-        const ch = chars[Math.floor(Math.random() * chars.length)];
-        grid[drop.y][c] = chalk.hex(colors[Math.floor(Math.random() * colors.length)])(ch);
-        if (drop.y > 0) {
-          grid[drop.y - 1][c] = chalk.hex('#2D3436')(
-            chars[Math.floor(Math.random() * chars.length)]
-          );
+      // Draw trail
+      for (let t = 0; t < drop.trail; t++) {
+        const ty = drop.y - t;
+        if (ty >= 0 && ty < rows) {
+          const ch = chars[Math.floor(Math.random() * chars.length)];
+          const brightness = t === 0 ? '#FFFFFF' : colors[Math.floor(Math.random() * colors.length)];
+          const opacity = t === 0 ? 1 : Math.max(0.2, 1 - t * 0.3);
+          grid[ty][c] = t === 0
+            ? chalk.hex(brightness).bold(ch)
+            : chalk.hex(brightness)(ch);
         }
       }
       drop.y += drop.speed;
-      if (drop.y > rows + 3) {
-        drop.y = -Math.floor(Math.random() * 4);
-        drop.speed = 1 + Math.floor(Math.random() * 3);
+      if (drop.y - drop.trail > rows) {
+        drop.y = -Math.floor(Math.random() * 6);
+        drop.speed = 1 + Math.floor(Math.random() * 2);
+        drop.trail = 2 + Math.floor(Math.random() * 3);
       }
     }
 
+    let output = '';
     for (const row of grid) {
       output += '  ' + row.join('') + '\n';
     }
@@ -48,7 +61,25 @@ export async function matrixRain(durationMs = 1500) {
     await sleep(frameTime);
   }
 
-  // Clear the matrix area
+  // Fade out effect
+  for (let fade = 0; fade < 4; fade++) {
+    process.stdout.write(`\x1B[${rows}A`);
+    for (let r = 0; r < rows; r++) {
+      let line = '  ';
+      for (let c = 0; c < cols; c++) {
+        if (Math.random() < 0.3 - fade * 0.07) {
+          const ch = chars[Math.floor(Math.random() * chars.length)];
+          line += chalk.hex('#2D3436')(ch);
+        } else {
+          line += ' ';
+        }
+      }
+      console.log(line);
+    }
+    await sleep(60);
+  }
+
+  // Clear the area
   process.stdout.write(`\x1B[${rows}A`);
   for (let i = 0; i < rows; i++) {
     process.stdout.write('\x1B[2K\n');
@@ -56,27 +87,243 @@ export async function matrixRain(durationMs = 1500) {
   process.stdout.write(`\x1B[${rows}A`);
 }
 
-export async function loadingAnimation(text, durationMs = 1200) {
-  const spinner = createSpinner(chalk.hex('#B2BEC3')(text)).start();
-  await sleep(durationMs);
-  spinner.success({ text: chalk.hex('#00CEC9')(text) });
+// ── Scanning / Loading ───────────────────────────────────────────
+
+export async function scanAnimation(text, durationMs = 1000) {
+  const frames = ['◜', '◠', '◝', '◞', '◡', '◟'];
+  const totalFrames = Math.floor(durationMs / 80);
+
+  for (let i = 0; i < totalFrames; i++) {
+    const frame = frames[i % frames.length];
+    const dots = '.'.repeat((i % 3) + 1).padEnd(3);
+    process.stdout.write(
+      `\r  ${chalk.hex('#00CEC9')(frame)} ${chalk.hex('#B2BEC3')(text)}${chalk.hex('#636E72')(dots)}`
+    );
+    await sleep(80);
+  }
+  process.stdout.write(
+    `\r  ${chalk.hex('#00CEC9')('◉')} ${chalk.hex('#00CEC9')(text)}   \n`
+  );
+}
+
+// ── Animated Separator ───────────────────────────────────────────
+
+export async function animatedSeparator(width = 60) {
+  const ch = '─';
+  for (let i = 0; i <= width; i++) {
+    const before = ch.repeat(i);
+    const dot = '●';
+    const after = ch.repeat(Math.max(0, width - i));
+    process.stdout.write(
+      `\r  ${glowGradient(before)}${chalk.hex('#00CEC9')(dot)}${chalk.hex('#2D3436')(after)}`
+    );
+    await sleep(4);
+  }
+  process.stdout.write(`\r  ${glowGradient(ch.repeat(width))}  \n`);
+}
+
+// ── Staggered List Reveal ────────────────────────────────────────
+
+export async function revealList(items, { prefix = '◆', color = '#00CEC9', delay = 60 } = {}) {
+  for (const item of items) {
+    // Slide in from left
+    const maxSlide = 6;
+    for (let s = maxSlide; s >= 0; s--) {
+      const pad = ' '.repeat(s);
+      process.stdout.write(
+        `\r  ${pad}${chalk.hex(color)(prefix)} ${item}`
+      );
+      await sleep(15);
+    }
+    console.log();
+    await sleep(delay);
+  }
 }
 
-export async function progressBar(label, steps = 20, durationMs = 800) {
-  const filled = '█';
-  const empty = '░';
-  const barWidth = 30;
+// ── Progress Bar (enhanced) ──────────────────────────────────────
+
+export async function progressBar(label, steps = 30, durationMs = 1000) {
+  const barWidth = 35;
+  const blocks = ['░', '▒', '▓', '█'];
 
   for (let i = 0; i <= steps; i++) {
-    const progress = Math.round((i / steps) * barWidth);
-    const bar =
-      chalk.hex('#6C5CE7')(filled.repeat(progress)) +
-      chalk.hex('#2D3436')(empty.repeat(barWidth - progress));
+    const progress = (i / steps) * barWidth;
+    const full = Math.floor(progress);
+    const partial = progress - full;
+
+    let bar = '';
+    for (let b = 0; b < barWidth; b++) {
+      if (b < full) {
+        bar += chalk.hex('#6C5CE7')('█');
+      } else if (b === full) {
+        const blockIdx = Math.floor(partial * blocks.length);
+        bar += chalk.hex('#A29BFE')(blocks[Math.min(blockIdx, blocks.length - 1)]);
+      } else {
+        bar += chalk.hex('#2D3436')('░');
+      }
+    }
+
     const pct = Math.round((i / steps) * 100);
+    const pctStr = `${pct}%`.padStart(4);
+
+    // Spinner character
+    const spinChars = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    const spin = i < steps
+      ? chalk.hex('#00CEC9')(spinChars[i % spinChars.length])
+      : chalk.hex('#00CEC9')('✓');
+
     process.stdout.write(
-      `\r  ${chalk.hex('#B2BEC3')(label)} ${bar} ${chalk.hex('#00CEC9')(`${pct}%`)}`
+      `\r  ${spin} ${chalk.hex('#B2BEC3')(label)} ${bar} ${chalk.hex('#00CEC9')(pctStr)}`
     );
     await sleep(durationMs / steps);
   }
   process.stdout.write('\n');
 }
+
+// ── Installation Spinner (enhanced) ──────────────────────────────
+
+export async function installWithAnimation(name, task) {
+  const frames = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
+  let frameIdx = 0;
+  let running = true;
+
+  const animate = async () => {
+    while (running) {
+      const frame = chalk.hex('#6C5CE7')(frames[frameIdx % frames.length]);
+      process.stdout.write(
+        `\r  ${frame} ${chalk.hex('#B2BEC3')('Installing')} ${chalk.hex('#DFE6E9').bold(name)}${chalk.hex('#636E72')('...')}`
+      );
+      frameIdx++;
+      await sleep(60);
+    }
+  };
+
+  const animPromise = animate();
+
+  try {
+    await task();
+    running = false;
+    await sleep(70);
+    process.stdout.write(
+      `\r  ${chalk.hex('#00CEC9')('✓')} ${chalk.hex('#00CEC9')(name)}${chalk.hex('#636E72')(' installed successfully')}          \n`
+    );
+  } catch (err) {
+    running = false;
+    await sleep(70);
+    process.stdout.write(
+      `\r  ${chalk.hex('#D63031')('✗')} ${chalk.hex('#D63031')(name)}${chalk.hex('#636E72')(` — ${err.message}`)}          \n`
+    );
+    throw err;
+  }
+}
+
+// ── Success Celebration ──────────────────────────────────────────
+
+export async function celebrateSuccess(moduleCount, targetDir) {
+  console.log();
+  await animatedSeparator(60);
+  console.log();
+
+  // Big checkmark animation
+  const check = [
+    '         ██╗',
+    '        ██╔╝',
+    '       ██╔╝ ',
+    '  ██╗ ██╔╝  ',
+    '  ╚████╔╝   ',
+    '   ╚═══╝    ',
+  ];
+
+  for (const line of check) {
+    console.log(successGradient(line));
+    await sleep(50);
+  }
+
+  console.log();
+  await progressBar('Finalizing', 30, 800);
+  console.log();
+
+  // Sparkle animation on the success message
+  const msg = '  Installation complete!';
+  const sparkles = ['✦', '✧', '⊹', '✶', '⋆'];
+  for (let i = 0; i < 3; i++) {
+    const s1 = sparkles[Math.floor(Math.random() * sparkles.length)];
+    const s2 = sparkles[Math.floor(Math.random() * sparkles.length)];
+    const s3 = sparkles[Math.floor(Math.random() * sparkles.length)];
+    process.stdout.write(
+      `\r  ${chalk.hex('#FDCB6E')(s1)} ${successGradient(msg.trim())} ${chalk.hex('#FDCB6E')(s2)} ${chalk.hex('#00CEC9')(s3)}`
+    );
+    await sleep(200);
+  }
+  console.log();
+  console.log();
+
+  // Module count badge
+  const countBadge = chalk.hex('#2D3436').bgHex('#00CEC9').bold(` ${moduleCount} modules `);
+  const pathBadge = chalk.hex('#636E72')(targetDir);
+  console.log(`  ${countBadge} ${chalk.hex('#636E72')('installed in')} ${pathBadge}`);
+
+  console.log();
+
+  // Tips box
+  const boxW = 52;
+  const topBorder = chalk.hex('#636E72')('  ┌' + '─'.repeat(boxW) + '┐');
+  const botBorder = chalk.hex('#636E72')('  └' + '─'.repeat(boxW) + '┘');
+  const line = (content, raw) => {
+    const pad = boxW - raw.length;
+    return chalk.hex('#636E72')('  │') + content + ' '.repeat(Math.max(0, pad)) + chalk.hex('#636E72')('│');
+  };
+
+  console.log(topBorder);
+  console.log(line(
+    chalk.hex('#FDCB6E')(' ⚡ Quick Start'),
+    ' ⚡ Quick Start'
+  ));
+  console.log(line(
+    chalk.hex('#636E72')(' '),
+    ' '
+  ));
+  console.log(line(
+    chalk.hex('#B2BEC3')('  Your AI assistants are ready to use.'),
+    '  Your AI assistants are ready to use.'
+  ));
+  console.log(line(
+    chalk.hex('#B2BEC3')('  Open your project in your preferred IDE.'),
+    '  Open your project in your preferred IDE.'
+  ));
+  console.log(botBorder);
+
+  console.log();
+  console.log(chalk.hex('#636E72')('  Happy coding! ') + chalk.hex('#00CEC9')('→') + chalk.hex('#636E72')(' ac-framework'));
+  console.log();
+}
+
+// ── Failure Summary ──────────────────────────────────────────────
+
+export async function showFailureSummary(installed, errors) {
+  console.log();
+  await animatedSeparator(60);
+  console.log();
+
+  console.log(
+    warmGradient(`  ⚠ ${installed} installed, ${errors.length} failed`)
+  );
+  console.log();
+
+  for (const { folder, error } of errors) {
+    console.log(
+      chalk.hex('#D63031')('  ✗ ') +
+      chalk.hex('#DFE6E9')(folder) +
+      chalk.hex('#636E72')(` — ${error}`)
+    );
+  }
+  console.log();
+}
+
+// ── Step Header ──────────────────────────────────────────────────
+
+export async function stepHeader(stepNum, totalSteps, label) {
+  const stepBadge = chalk.hex('#2D3436').bgHex('#6C5CE7').bold(` ${stepNum}/${totalSteps} `);
+  console.log(`  ${stepBadge} ${chalk.hex('#DFE6E9')(label)}`);
+  console.log();
+}

package/src/ui/banner.js

@@ -1,44 +1,101 @@
-import figlet from 'figlet';
 import gradient from 'gradient-string';
 import chalk from 'chalk';
 import { sleep } from '../utils/helpers.js';
 
-const acGradient = gradient(['#6C5CE7', '#00CEC9', '#0984E3', '#6C5CE7']);
-const subtleGradient = gradient(['#636E72', '#B2BEC3']);
+const acGradient = gradient(['#6C5CE7', '#A29BFE', '#00CEC9', '#0984E3', '#6C5CE7']);
+const dimGradient = gradient(['#2D3436', '#636E72', '#2D3436']);
+const glowGradient = gradient(['#0984E3', '#00CEC9', '#55EFC4', '#00CEC9', '#0984E3']);
+
+const LOGO = [
+  '     ██████╗  ██████╗         ███████╗██████╗  █████╗ ███╗   ███╗███████╗',
+  '    ██╔══██╗██╔════╝         ██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝',
+  '    ███████║██║              █████╗  ██████╔╝███████║██╔████╔██║█████╗  ',
+  '    ██╔══██║██║              ██╔══╝  ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝  ',
+  '    ██║  ██║╚██████╗         ██║     ██║  ██║██║  ██║██║ ╚═╝ ██║███████╗',
+  '    ╚═╝  ╚═╝ ╚═════╝         ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝',
+];
 
 export async function showBanner() {
   console.clear();
   console.log();
 
-  const asciiArt = figlet.textSync('AC  Framework', {
-    font: 'ANSI Shadow',
-    horizontalLayout: 'fitted',
-  });
+  // Phase 1: Glitch-in effect — show random noise then resolve to the logo
+  const maxWidth = Math.max(...LOGO.map((l) => l.length));
+  const glitchChars = '█▓▒░╗╔╝╚═║╬╣╠╩╦';
+  const glitchSteps = 6;
+
+  for (let step = 0; step < glitchSteps; step++) {
+    const ratio = step / (glitchSteps - 1); // 0 → 1
+    const output = [];
+    for (const line of LOGO) {
+      let result = '';
+      for (let i = 0; i < line.length; i++) {
+        if (line[i] === ' ') {
+          result += ' ';
+        } else if (Math.random() < ratio) {
+          result += line[i];
+        } else {
+          result += glitchChars[Math.floor(Math.random() * glitchChars.length)];
+        }
+      }
+      output.push(result);
+    }
 
-  // Typing animation for the ASCII art
-  const lines = asciiArt.split('\n');
-  for (const line of lines) {
-    console.log(acGradient(line));
-    await sleep(40);
+    if (step > 0) {
+      process.stdout.write(`\x1B[${LOGO.length}A`);
+    }
+    for (const line of output) {
+      const colored = step < glitchSteps - 1
+        ? dimGradient(line)
+        : acGradient(line);
+      console.log(colored);
+    }
+    await sleep(step < glitchSteps - 1 ? 80 : 0);
   }
 
   console.log();
-  console.log(
-    subtleGradient('  ─────────────────────────────────────────────────────────────────')
-  );
+
+  // Phase 2: Animated separator with scanning effect
+  const sepWidth = 68;
+  const sepChars = '─';
+  for (let i = 0; i <= sepWidth; i++) {
+    const line =
+      chalk.hex('#2D3436')('  ') +
+      glowGradient(sepChars.repeat(i)) +
+      chalk.hex('#00CEC9')('●') +
+      chalk.hex('#2D3436')(sepChars.repeat(Math.max(0, sepWidth - i)));
+    process.stdout.write(`\r${line}`);
+    await sleep(6);
+  }
+  process.stdout.write(`\r  ${glowGradient(sepChars.repeat(sepWidth))}  \n`);
+
   console.log();
 
-  // Typewriter effect for tagline
+  // Phase 3: Typewriter tagline with cursor blink
   const tagline = '  Agentic Coding Framework — Multi-assistant configuration system';
+  const cursor = '▌';
   for (let i = 0; i <= tagline.length; i++) {
-    process.stdout.write(`\r${chalk.hex('#DFE6E9')(tagline.slice(0, i))}${chalk.hex('#00CEC9')('█')}`);
-    await sleep(12);
+    const text = tagline.slice(0, i);
+    process.stdout.write(`\r${chalk.hex('#DFE6E9')(text)}${chalk.hex('#00CEC9')(cursor)}`);
+    await sleep(i % 4 === 0 ? 18 : 10);
+  }
+  // Blink cursor 3 times then remove
+  for (let b = 0; b < 3; b++) {
+    process.stdout.write(`\r${chalk.hex('#DFE6E9')(tagline)}${chalk.hex('#00CEC9')(cursor)}`);
+    await sleep(120);
+    process.stdout.write(`\r${chalk.hex('#DFE6E9')(tagline)} `);
+    await sleep(120);
   }
   process.stdout.write(`\r${chalk.hex('#DFE6E9')(tagline)}  \n`);
 
+  // Phase 4: Info badges
+  console.log();
+  const version = chalk.hex('#2D3436').bgHex('#00CEC9').bold(' v1.x ');
+  const badge = chalk.hex('#2D3436').bgHex('#6C5CE7').bold(' CLI ');
+  const badge2 = chalk.hex('#2D3436').bgHex('#FDCB6E').bold(' 23 Assistants ');
+  console.log(`  ${version} ${badge} ${badge2}`);
+
   console.log();
-  console.log(
-    subtleGradient('  ─────────────────────────────────────────────────────────────────')
-  );
+  process.stdout.write(`  ${glowGradient(sepChars.repeat(sepWidth))}  \n`);
   console.log();
 }