@shirayner/ace 0.1.1-snapshot.2 → 0.1.1-snapshot.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shirayner/ace",
-  "version": "0.1.1-snapshot.2",
+  "version": "0.1.1-snapshot.3",
   "description": "AI Coding Environment - One command to set up your Claude Code harness",
   "bin": {
     "ace": "./bin/ace.js"

package/src/commands/init.js

@@ -1,10 +1,10 @@
-import chalk from 'chalk';
 import inquirer from 'inquirer';
+import ora from 'ora';
 import { createRequire } from 'module';
 import { PRESETS, ROLES, COMPONENTS } from '../core/constants.js';
 import { Installer } from '../core/installer.js';
 import {
-  printBanner, stepDone, stepMerge, stepSkip, stepFail,
+  printBanner, renderScreen,
   doneMessage, doneWithErrors,
   colors, icons, componentLabels,
 } from '../core/ui.js';
@@ -12,29 +12,35 @@ import {
 const require = createRequire(import.meta.url);
 const pkg = require('../../package.json');
 
-export async function initCommand(options) {
-  printBanner(pkg.version);
+function formatStep(label, value) {
+  return `  ${colors.success(icons.check)} ${colors.dim(label)} ${colors.dim('·')} ${colors.white(value)}`;
+}
 
+export async function initCommand(options) {
+  const version = pkg.version;
   let role = 'fullstack';
   let preset = options.preset;
+  const completedSteps = [];
 
-  // ─── Interactive: ask role only ─────────────────────────────
+  // ─── Step 1: Role ──────────────────────────────────────────
   if (options.interaction !== false) {
-    const answers = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'role',
-        message: 'Role',
-        choices: Object.entries(ROLES).map(([key, val]) => ({
-          name: `${colors.white(val.label)}  ${colors.dim(val.description)}`,
-          value: key,
-          short: val.label,
-        })),
-        default: 'fullstack',
-        prefix: colors.brand('?'),
-      },
-    ]);
-    role = answers.role;
+    renderScreen(version);
+
+    const result = await inquirer.prompt([{
+      type: 'list',
+      name: 'role',
+      message: 'Role',
+      choices: Object.entries(ROLES).map(([key, val]) => ({
+        name: `${colors.white(val.label)}  ${colors.dim(val.description)}`,
+        value: key,
+        short: val.label,
+      })),
+      default: 'fullstack',
+      prefix: colors.brand('?'),
+    }]);
+
+    role = result.role;
+    completedSteps.push(formatStep('Role', ROLES[role].label));
   }
 
   const components = PRESETS[preset];
@@ -43,7 +49,7 @@ export async function initCommand(options) {
     process.exit(1);
   }
 
-  // ─── Conflict detection ─────────────────────────────────────
+  // ─── Step 2: Conflicts (conditional) ───────────────────────
   const installer = new Installer({
     force: options.force,
     dryRun: options.dryRun,
@@ -61,44 +67,53 @@ export async function initCommand(options) {
     if (conflictKeys.length > 0) {
       const totalFiles = conflictKeys.reduce((sum, k) => sum + conflicts[k].files.length, 0);
 
-      console.log(`  ${colors.warning(icons.warn)} ${totalFiles} existing file(s) found.`);
+      renderScreen(version, completedSteps);
+      console.log(`  ${colors.warning(icons.warn)} ${totalFiles} existing file(s) found`);
       console.log();
 
-      const { action } = await inquirer.prompt([
-        {
-          type: 'list',
-          name: 'action',
-          message: 'How to handle?',
-          choices: [
-            {
-              name: `${colors.white('Keep existing')}  ${colors.dim('merge compatible, skip rest')}`,
-              value: 'skip',
-              short: 'Keep',
-            },
-            {
-              name: `${colors.warning('Overwrite all')}  ${colors.dim('replace with latest')}`,
-              value: 'overwrite',
-              short: 'Overwrite',
-            },
-          ],
-          default: 'skip',
-          prefix: colors.brand('?'),
-        },
-      ]);
+      const { action } = await inquirer.prompt([{
+        type: 'list',
+        name: 'action',
+        message: 'How to handle?',
+        choices: [
+          {
+            name: `${colors.white('Keep existing')}  ${colors.dim('merge compatible, skip rest')}`,
+            value: 'skip',
+            short: 'Keep',
+          },
+          {
+            name: `${colors.warning('Overwrite all')}  ${colors.dim('replace with latest')}`,
+            value: 'overwrite',
+            short: 'Overwrite',
+          },
+        ],
+        default: 'skip',
+        prefix: colors.brand('?'),
+      }]);
 
       for (const key of conflictKeys) {
         resolutions[key] = action;
       }
+
+      completedSteps.push(
+        formatStep('Conflicts', action === 'skip' ? 'Keep existing' : 'Overwrite all')
+      );
     }
   }
 
   installer.resolutions = resolutions;
 
-  // ─── Install ────────────────────────────────────────────────
+  // ─── Step 3: Install ───────────────────────────────────────
+  if (options.interaction !== false) {
+    renderScreen(version, completedSteps);
+  } else {
+    printBanner(version);
+  }
+
   if (options.dryRun) {
     console.log(`  ${colors.dim('dry-run — no changes will be made')}`);
+    console.log();
   }
-  console.log();
 
   for (const componentName of components) {
     const component = COMPONENTS[componentName];
@@ -109,6 +124,12 @@ export async function initCommand(options) {
     const beforeMerged = installer.results.merged.length;
     const beforeSkipped = installer.results.skipped.length;
 
+    const spinner = ora({
+      text: label,
+      indent: 2,
+      color: 'magenta',
+    }).start();
+
     try {
       await installer.installComponent(componentName, component);
 
@@ -117,16 +138,28 @@ export async function initCommand(options) {
       const newSkipped = installer.results.skipped.length - beforeSkipped;
 
       if (newMerged > 0 && newInstalled === 0 && newSkipped === 0) {
-        stepMerge(label, 'merged');
+        spinner.stopAndPersist({
+          symbol: colors.blue(icons.merge),
+          text: `${label} ${colors.dim('merged')}`,
+        });
       } else if (newSkipped > 0 && newInstalled === 0 && newMerged === 0) {
-        stepSkip(label, 'unchanged');
+        spinner.stopAndPersist({
+          symbol: colors.muted(icons.skip),
+          text: `${colors.muted(label)} ${colors.dim('unchanged')}`,
+        });
       } else {
         const count = newInstalled + newMerged;
-        const detail = count > 0 ? `${count} file${count > 1 ? 's' : ''}` : '';
-        stepDone(label, detail);
+        const detail = count > 0 ? ` ${count} file${count > 1 ? 's' : ''}` : '';
+        spinner.stopAndPersist({
+          symbol: colors.success(icons.check),
+          text: `${label}${colors.dim(detail)}`,
+        });
       }
     } catch (err) {
-      stepFail(label, err.message);
+      spinner.stopAndPersist({
+        symbol: colors.error(icons.cross),
+        text: `${label} ${colors.dim(err.message)}`,
+      });
       installer.results.errors.push({ component: componentName, error: err.message });
     }
   }

package/src/core/ui.js

@@ -23,6 +23,11 @@ export const colors = {
   blue:    chalk.hex('#3B82F6'),
 };
 
+// ─── Screen control ─────────────────────────────────────────
+export function clearScreen() {
+  process.stdout.write('\x1B[2J\x1B[3J\x1B[H');
+}
+
 // ─── Banner (single line) ───────────────────────────────────
 export function printBanner(version) {
   console.log();
@@ -30,6 +35,16 @@ export function printBanner(version) {
   console.log();
 }
 
+// ─── Step-by-step screen (clear + banner + previous answers) ─
+export function renderScreen(version, completedSteps = []) {
+  clearScreen();
+  printBanner(version);
+  for (const step of completedSteps) {
+    console.log(step);
+  }
+  if (completedSteps.length > 0) console.log();
+}
+
 // ─── Step indicators ────────────────────────────────────────
 export function stepDone(label, detail) {
   const d = detail ? colors.dim(` ${detail}`) : '';