ccraft 1.0.0

package/src/ui/phase-header.js

@@ -0,0 +1,20 @@
+import chalk from 'chalk';
+import { PHASES, TOTAL_PHASES, getTerminalWidth } from './theme.js';
+
+/**
+ * Render a phase header like:
+ *   ── Phase 2 of 5 ── Project Discovery ──────────────────
+ */
+export function renderPhaseHeader(phaseNumber) {
+  const phase = PHASES.find((p) => p.number === phaseNumber);
+  const name = phase ? phase.name : `Phase ${phaseNumber}`;
+  const label = `Phase ${phaseNumber} of ${TOTAL_PHASES}`;
+
+  const w = Math.min(getTerminalWidth() - 4, 56);
+  const inner = ` ${label} ── ${name} `;
+  const tailLen = Math.max(2, w - inner.length - 2);
+
+  console.log();
+  console.log(chalk.bold.cyan(`  ──${inner}${'─'.repeat(tailLen)}`));
+  console.log();
+}

package/src/ui/prompts.js

@@ -0,0 +1,56 @@
+import { select, checkbox, confirm, password, input } from '@inquirer/prompts';
+import chalk from 'chalk';
+import { colors } from './theme.js';
+
+/**
+ * Themed select prompt with description hint.
+ */
+export async function themedSelect({ message, hint, choices, ...rest }) {
+  if (hint) {
+    console.log(colors.muted(`    ${hint}`));
+    console.log();
+  }
+  return select({ message, choices, loop: false, ...rest });
+}
+
+/**
+ * Themed checkbox prompt with description hint.
+ */
+export async function themedCheckbox({ message, hint, choices, ...rest }) {
+  if (hint) {
+    console.log(colors.muted(`    ${hint}`));
+    console.log();
+  }
+  return checkbox({ message, choices, loop: false, ...rest });
+}
+
+/**
+ * Themed confirm prompt with description hint.
+ */
+export async function themedConfirm({ message, hint, ...rest }) {
+  if (hint) {
+    console.log(colors.muted(`    ${hint}`));
+    console.log();
+  }
+  return confirm({ message, ...rest });
+}
+
+/**
+ * Themed password prompt with description hint.
+ */
+export async function themedPassword({ message, hint, ...rest }) {
+  if (hint) {
+    console.log(colors.muted(`    ${hint}`));
+  }
+  return password({ message, ...rest });
+}
+
+/**
+ * Themed input prompt with description hint.
+ */
+export async function themedInput({ message, hint, ...rest }) {
+  if (hint) {
+    console.log(colors.muted(`    ${hint}`));
+  }
+  return input({ message, ...rest });
+}

package/src/ui/tables.js

@@ -0,0 +1,89 @@
+import chalk from 'chalk';
+import { colors } from './theme.js';
+
+/**
+ * Render component selection breakdown.
+ */
+export function renderComponentBreakdown(summary) {
+  const countItems = (tier) => {
+    if (!tier) return 0;
+    return Object.values(tier).reduce((sum, arr) => sum + (Array.isArray(arr) ? arr.length : 0), 0);
+  };
+
+  const guaranteedCount = countItems(summary.guaranteed);
+  const candidateCount = countItems(summary.candidates);
+
+  const cplx = summary.complexity ?? 0.5;
+  const cplxLabel = cplx >= 0.7 ? 'complex' : cplx >= 0.4 ? 'moderate' : 'simple';
+  const cplxNote = cplx >= 0.6 ? ' — expanded selection' : cplx < 0.3 ? ' — minimal selection' : '';
+
+  console.log(chalk.dim(`  Complexity: ${colors.success(cplx.toFixed(1))} (${cplxLabel})${cplxNote}`));
+  console.log(chalk.dim('  Component selection:'));
+  console.log(chalk.dim(`    Guaranteed: ${colors.success(String(guaranteedCount))} (core + role + stack)`));
+  if (candidateCount > 0) {
+    console.log(chalk.dim(`    Candidates: ${colors.primary(String(candidateCount))} for Claude scoring`));
+  }
+
+  if (summary.stacks?.length > 0) {
+    console.log(chalk.dim(`    Tech stacks:  ${summary.stacks.map(
+      (ts) => `${colors.success(ts.name)} (${ts.impactScore.toFixed(2)})`
+    ).join(', ')}`));
+  }
+}
+
+/**
+ * Render MCP server verification results.
+ */
+export function renderMcpStatus(mcpResults) {
+  console.log();
+  for (const r of mcpResults) {
+    const versionTag = r.package.version ? chalk.dim(` v${r.package.version}`) : '';
+    switch (r.status) {
+      case 'ready':
+        console.log(colors.success(`    ✔ ${r.id}${versionTag} — ready`));
+        break;
+      case 'verified':
+        console.log(colors.success(`    ✔ ${r.id}${versionTag} — package verified`));
+        break;
+      case 'needs-key':
+        console.log(colors.warning(`    ⚠ ${r.id}${versionTag} — set ${r.apiKey.keyName} env var`));
+        break;
+      case 'package-error':
+        console.log(colors.error(`    ✖ ${r.id} — ${r.package.error}`));
+        break;
+      case 'verified-with-warning':
+        console.log(colors.success(`    ✔ ${r.id}${versionTag} — package verified`) + chalk.dim(` (startup test: ${r.healthCheck.error || 'failed'})`));
+        break;
+      default:
+        console.log(chalk.dim(`    ? ${r.id} — ${r.status}`));
+    }
+  }
+}
+
+/**
+ * Render file write results grouped by status.
+ */
+export function renderFileResults(results) {
+  console.log();
+  const grouped = { created: [], updated: [], skipped: [] };
+  for (const result of results) {
+    const status = result.status || 'created';
+    if (!grouped[status]) grouped[status] = [];
+    grouped[status].push(result);
+  }
+
+  const statusStyles = {
+    created: { icon: '+', color: colors.success },
+    updated: { icon: '~', color: colors.warning },
+    skipped: { icon: '-', color: chalk.dim },
+  };
+
+  for (const [status, items] of Object.entries(grouped)) {
+    if (items.length === 0) continue;
+    const style = statusStyles[status] || { icon: '?', color: chalk.white };
+    console.log(style.color(`  ${style.icon} ${status} (${items.length}):`));
+    for (const item of items) {
+      console.log(style.color(`    ${item.path}`));
+    }
+  }
+}

package/src/ui/tasks.js

@@ -0,0 +1,258 @@
+import { Listr } from 'listr2';
+import { isTTY } from './theme.js';
+
+/**
+ * Create a listr2 task runner with appropriate renderer.
+ */
+function createTaskRunner(tasks, options = {}) {
+  return new Listr(tasks, {
+    concurrent: false,
+    exitOnError: true,
+    rendererOptions: {
+      collapseSubtasks: false,
+      showTimer: true,
+      ...options.rendererOptions,
+    },
+    renderer: isTTY() ? 'default' : 'simple',
+    ...options,
+  });
+}
+
+/**
+ * Run existing setup detection, context extraction, and removal.
+ * Returns { existingSetup, existingContext, skip }.
+ */
+export async function runExistingSetupTasks(targetDir, { detectExistingSetup, extractExistingContext, removeExistingSetup }) {
+  const ctx = {};
+
+  const tasks = createTaskRunner([
+    {
+      title: 'Checking for existing Claude configuration',
+      task: async (ctx, task) => {
+        const setup = detectExistingSetup(targetDir);
+        ctx.existingSetup = setup;
+
+        if (!setup) {
+          task.title = 'No existing Claude configuration found';
+          ctx.skip = true;
+          return;
+        }
+
+        const parts = [];
+        if (setup.claudeMd) parts.push('CLAUDE.md');
+        if (setup.settings) parts.push('settings.json');
+        if (setup.agents > 0) parts.push(`${setup.agents} agents`);
+        if (setup.rules > 0) parts.push(`${setup.rules} rules`);
+        if (setup.skills > 0) parts.push(`${setup.skills} skills`);
+        if (setup.commands > 0) parts.push(`${setup.commands} commands`);
+        task.title = `Existing setup detected: ${parts.join(', ')}`;
+      },
+    },
+    {
+      title: 'Wrapping up current configuration with Claude',
+      skip: (ctx) => ctx.skip,
+      task: async (ctx, task) => {
+        ctx.existingContext = await extractExistingContext(targetDir);
+        task.title = 'Context extracted from previous installation';
+      },
+    },
+    {
+      title: 'Removing previous configuration',
+      skip: (ctx) => ctx.skip,
+      task: async (ctx, task) => {
+        removeExistingSetup(targetDir);
+        task.title = 'Previous .claude/ configuration removed';
+      },
+    },
+  ]);
+
+  await tasks.run(ctx);
+  return ctx;
+}
+
+/**
+ * Run project analysis as a multi-step task list.
+ * Returns { claudeAnalysis, fsDetected }.
+ */
+export async function runAnalysisTasks(targetDir, { analyzeWithClaude, detectProject, existingContext }) {
+  const ctx = {};
+
+  const tasks = createTaskRunner([
+    {
+      title: 'Scanning project structure',
+      task: async (ctx) => {
+        ctx.fsDetected = await detectProject(targetDir);
+      },
+    },
+    {
+      title: 'Analyzing project with Claude',
+      task: async (ctx) => {
+        const { analysis, failReason } = await analyzeWithClaude(targetDir, existingContext);
+        ctx.claudeAnalysis = analysis;
+        ctx.claudeFailReason = failReason;
+      },
+    },
+  ]);
+
+  await tasks.run(ctx);
+  return ctx;
+}
+
+/**
+ * Run installation as a multi-step task list.
+ * Returns { results, filesToWrite }.
+ */
+export async function runInstallTasks({
+  apiResponse,
+  selectedCandidateIds,
+  targetDir,
+  selectedMcps,
+  mcpKeys,
+  securityConfig,
+  detected,
+  buildFileList,
+  writeApiFiles,
+  scoreWithClaude,
+}) {
+  const ctx = {};
+
+  const candidateCount = apiResponse.candidates?.items?.length || 0;
+  const hasScoring = apiResponse.prompts?.scoring && candidateCount > 0;
+
+  const taskList = [];
+
+  if (hasScoring) {
+    taskList.push({
+      title: `Evaluating ${candidateCount} optional candidates with Claude`,
+      task: async (ctx) => {
+        const scoreResult = await scoreWithClaude(apiResponse.prompts.scoring, targetDir);
+        if (scoreResult.selected) {
+          ctx.selectedCandidateIds = scoreResult.selected;
+        } else {
+          ctx.selectedCandidateIds = null;
+        }
+      },
+    });
+  }
+
+  taskList.push({
+    title: 'Writing configuration files',
+    task: async (ctx) => {
+      const ids = ctx.selectedCandidateIds ?? selectedCandidateIds;
+      ctx.filesToWrite = buildFileList(apiResponse, ids);
+      ctx.results = await writeApiFiles(ctx.filesToWrite, targetDir, {
+        force: true,
+        selectedMcpIds: selectedMcps.map((m) => m.id),
+        mcpKeys,
+        securityConfig,
+        detected,
+      });
+    },
+  });
+
+  const tasks = createTaskRunner(taskList);
+  await tasks.run(ctx);
+  return ctx;
+}
+
+/**
+ * Run MCP verification as a task list.
+ */
+export async function runVerifyTasks(selectedMcps, mcpKeys, { setupMcps, targetDir }) {
+  const ctx = {};
+
+  const tasks = createTaskRunner([
+    {
+      title: `Verifying ${selectedMcps.length} MCP servers`,
+      task: async (ctx, task) => {
+        ctx.mcpResults = await setupMcps(selectedMcps, mcpKeys, {
+          healthCheck: true,
+          targetDir,
+          onStatus: (id, status) => {
+            if (status === 'verifying') {
+              task.title = `Verifying ${id}...`;
+            } else if (status === 'testing') {
+              task.title = `Health-checking ${id}...`;
+            }
+          },
+        });
+
+        const ready = ctx.mcpResults.filter((r) => r.status === 'ready' || r.status === 'verified' || r.status === 'verified-with-warning');
+        const needsKey = ctx.mcpResults.filter((r) => r.status === 'needs-key');
+        const failed = ctx.mcpResults.filter((r) => r.status === 'package-error');
+
+        if (failed.length === 0 && needsKey.length === 0) {
+          task.title = `All ${ctx.mcpResults.length} MCP servers verified`;
+        } else if (failed.length === 0) {
+          task.title = `${ready.length}/${ctx.mcpResults.length} MCP servers verified (${needsKey.length} need API keys)`;
+        } else {
+          task.title = `${ready.length}/${ctx.mcpResults.length} MCP servers ready, ${failed.length} need attention`;
+        }
+      },
+    },
+  ]);
+
+  await tasks.run(ctx);
+  return ctx;
+}
+
+/**
+ * Run finalization tasks (toolkit rule + optimization + CLAUDE.md rewrite).
+ */
+export async function runFinalizeTasks({
+  targetDir,
+  readAnalysisCache,
+  optimizeSettings,
+  rewriteClaudeMd,
+  generateToolkitRule,
+}) {
+  const ctx = {};
+
+  const taskList = [];
+
+  if (generateToolkitRule) {
+    taskList.push({
+      title: 'Generating toolkit usage guide',
+      task: async (ctx, task) => {
+        const toolkit = generateToolkitRule(targetDir);
+        const total = toolkit.agentCount + toolkit.skillCount + toolkit.commandCount;
+        ctx.toolkitResult = toolkit;
+        task.title = total > 0
+          ? `Toolkit guide: ${toolkit.agentCount} agents, ${toolkit.skillCount} skills, ${toolkit.commandCount} commands`
+          : 'Toolkit guide skipped — no components found';
+      },
+    });
+  }
+
+  taskList.push({
+    title: 'Optimizing settings for this project',
+    task: async (ctx, task) => {
+      const result = optimizeSettings(targetDir);
+      ctx.optimizationResult = result;
+
+      if (result.status === 'ok' && result.applied > 0) {
+        task.title = `Optimized ${result.applied} setting(s)`;
+      } else {
+        task.title = 'Settings reviewed — no changes needed';
+      }
+    },
+  });
+
+  taskList.push({
+    title: 'Claude is rewriting CLAUDE.md',
+    task: async (ctx, task) => {
+      const cache = readAnalysisCache(targetDir);
+      const rewritten = await rewriteClaudeMd(targetDir, cache);
+      ctx.rewritten = rewritten;
+      task.title = rewritten
+        ? 'CLAUDE.md rewritten with project-specific context'
+        : 'CLAUDE.md rewrite skipped — using template version';
+    },
+  });
+
+  if (taskList.length === 0) return ctx;
+
+  const tasks = createTaskRunner(taskList);
+  await tasks.run(ctx);
+  return ctx;
+}

package/src/ui/theme.js

@@ -0,0 +1,83 @@
+import chalk from 'chalk';
+
+// ── Color palette ────────────────────────────────────────────────────────
+
+export const colors = {
+  primary: chalk.cyan,
+  primaryBold: chalk.bold.cyan,
+  success: chalk.green,
+  successBold: chalk.bold.green,
+  warning: chalk.yellow,
+  warningBold: chalk.bold.yellow,
+  error: chalk.red,
+  errorBold: chalk.bold.red,
+  muted: chalk.dim,
+  info: chalk.blue,
+  bold: chalk.bold,
+  underline: chalk.underline,
+  highlight: chalk.bold.white,
+};
+
+// ── Icons ────────────────────────────────────────────────────────────────
+
+export const icons = {
+  check: chalk.green('✔'),
+  cross: chalk.red('✖'),
+  warning: chalk.yellow('⚠'),
+  info: chalk.blue('ℹ'),
+  bullet: chalk.dim('•'),
+  arrow: chalk.cyan('›'),
+  plus: chalk.green('+'),
+  tilde: chalk.yellow('~'),
+  dash: chalk.dim('─'),
+  dot: chalk.dim('·'),
+};
+
+// ── Phase definitions ────────────────────────────────────────────────────
+
+export const PHASES = [
+  { number: 1, name: 'Welcome & Setup' },
+  { number: 2, name: 'Project Discovery' },
+  { number: 3, name: 'Configuration' },
+  { number: 4, name: 'Installation' },
+  { number: 5, name: 'Finalization' },
+];
+
+export const TOTAL_PHASES = PHASES.length;
+
+// ── Boxen styles ─────────────────────────────────────────────────────────
+
+export const boxStyles = {
+  info: {
+    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    margin: { top: 0, bottom: 0, left: 2, right: 0 },
+    borderStyle: 'round',
+    borderColor: 'cyan',
+  },
+  success: {
+    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    margin: { top: 1, bottom: 0, left: 2, right: 0 },
+    borderStyle: 'double',
+    borderColor: 'green',
+  },
+  warning: {
+    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    margin: { top: 0, bottom: 0, left: 2, right: 0 },
+    borderStyle: 'round',
+    borderColor: 'yellow',
+  },
+};
+
+// ── Terminal detection ───────────────────────────────────────────────────
+
+export function getTerminalWidth() {
+  return process.stdout.columns || 80;
+}
+
+export function isTTY() {
+  return !!process.stdout.isTTY;
+}
+
+export function isNarrow() {
+  return getTerminalWidth() < 60;
+}