fabrica-e-commerce 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabrica-e-commerce",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "Orange themed CMD launcher for deploying Fabrica e-commerce stores with Supabase and Vercel.",
   "type": "module",
   "bin": {

package/src/bridge.js

@@ -1,7 +1,7 @@
 import { BRIDGE_API_KEY, BRIDGE_ORIGIN, POLL_INTERVAL_MS, POLL_TIMEOUT_MS } from './config.js';
 import { FULL_SQL } from './sql.js';
 import { openUrl } from './system.js';
-import { spinner } from './ui.js';
+import { spinner, log } from './ui.js';
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 export async function connectSupabase() {
   const spin = spinner('Posting secure schema job to Fabrica Connect');
@@ -9,7 +9,7 @@ export async function connectSupabase() {
   if (!response.ok) throw new Error(`Bridge rejected job: ${response.status} ${await response.text()}`);
   const job = await response.json();
   spin.succeed('Bridge job created');
-  console.log(`Open this URL if your browser does not start: ${job.connectUrl}`);
+  log(`Open this URL if your browser does not start: ${job.connectUrl}`);
   await openUrl(job.connectUrl);
   const started = Date.now();
   const poll = spinner('Waiting for Supabase authorization and project selection');

package/src/cli.js

@@ -9,7 +9,7 @@ import { ensureDependencies, vinsCommand } from './deps.js';
 import { BRIDGE_ORIGIN, STORE_REPO } from './config.js';
 import { dataDir, readProjects } from './store.js';
 import { choose, ask } from './prompt.js';
-import { banner, help, kv, section, subBox, resetSectionCount } from './ui.js';
+import { banner, help, kv, section, endSections, subBox, log } from './ui.js';
 import { openUrl } from './system.js';
 
 async function packageVersion() {
@@ -29,6 +29,7 @@ async function build() {
   kv('BRIDGE', 'ONLINE');
   kv('SQL', 'Prepared securely (hidden from UI)');
   const supabase = await connectSupabase();
+
   const env = await collectEnv(supabase);
   const project = await cloneRepo();
 
@@ -40,6 +41,7 @@ async function build() {
 
   if (target === 'local') {
     await runLocally(project, env);
+    endSections();
     return;
   }
 
@@ -53,114 +55,119 @@ async function build() {
   kv('GitHub repo', record.githubRepo || 'n/a');
   kv('URL', record.productionUrl || 'n/a');
   kv('Path', record.target);
+  endSections();
 }
 
 // ── list ──────────────────────────────────────────────────────────────────────
 async function list() {
   banner();
   const projects = await readProjects();
+
+  section('Your Fabrica projects');
   if (!projects.length) {
-    console.log('  No projects found. Run: fabrica build');
+    log('No projects found. Run: fabrica build');
+    endSections();
     return;
   }
 
-  section('Your Fabrica projects');
   const choices = projects.map((p) => ({
     name: `${p.projectName} (${p.type === 'local' ? 'local' : 'cloud'})`,
     value: p.id,
   }));
 
+  endSections(); // flush before interactive prompt
   const selected = await choose('Select a project to view details:', choices);
   const project = projects.find((p) => p.id === selected);
 
   section(`Project: ${project.projectName}`);
-  const lines = [
-    `Name:       ${project.projectName}`,
-    `Type:       ${project.type === 'local' ? 'local' : 'cloud'}`,
-    `Created:    ${project.createdAt}`,
-    `Path:       ${project.target}`,
-    `GitHub:     ${project.githubRepo || 'n/a'}`,
-    `Supabase:   ${project.supabaseUrl || 'n/a'}`,
-    `URL:        ${project.productionUrl || 'n/a'}`,
-    `Env keys:   ${(project.envKeys || []).join(', ')}`,
-  ];
-  subBox(lines);
+  kv('Type',      project.type === 'local' ? 'local' : 'cloud');
+  kv('Created',   project.createdAt);
+  kv('Path',      project.target);
+  kv('GitHub',    project.githubRepo || 'n/a');
+  kv('Supabase',  project.supabaseUrl || 'n/a');
+  kv('URL',       project.productionUrl || 'n/a');
+  kv('Env keys',  (project.envKeys || []).join(', '));
+  endSections();
 }
 
 // ── env ───────────────────────────────────────────────────────────────────────
 async function env() {
   banner();
   const projects = await readProjects();
+
+  section('Environment manager');
   if (!projects.length) {
-    console.log('  No projects found. Run: fabrica build');
+    log('No projects found. Run: fabrica build');
+    endSections();
     return;
   }
+  endSections();
 
-  section('Environment manager');
-
-  // Step 1 — pick project type filter
   const typeFilter = await choose('Which projects to show?', [
-    { name: 'All projects', value: 'all' },
-    { name: 'Local projects only', value: 'local' },
-    { name: 'Cloud (Vercel) projects only', value: 'cloud' },
+    { name: 'All projects',                  value: 'all' },
+    { name: 'Local projects only',           value: 'local' },
+    { name: 'Cloud (Vercel) projects only',  value: 'cloud' },
   ]);
 
   const filtered = typeFilter === 'all' ? projects : projects.filter((p) => p.type === typeFilter);
   if (!filtered.length) {
-    console.log(`  No ${typeFilter} projects found.`);
+    section('Environment manager');
+    log(`No ${typeFilter} projects found.`);
+    endSections();
     return;
   }
 
-  // Step 2 — pick project
   const projectId = await choose('Select project:', filtered.map((p) => ({
     name: `${p.projectName} (${p.type === 'local' ? 'local' : 'cloud'})`,
     value: p.id,
   })));
   const project = filtered.find((p) => p.id === projectId);
 
-  // Step 3 — pick env key
   const envKeys = project.envKeys || [];
   if (!envKeys.length) {
-    console.log('  No env keys stored for this project.');
+    section('Environment manager');
+    log('No env keys stored for this project.');
+    endSections();
     return;
   }
 
   const key = await choose('Select env variable to update:', envKeys.map((k) => ({ name: k, value: k })));
-
-  // Step 4 — new value
   const currentVal = (project.env || {})[key];
   const value = await ask(`New value for ${key}`, currentVal || '');
 
   section('Applying update');
   await updateProjectEnv(project, key, value);
   kv('Updated', `${key} → ${project.type === 'local' ? '.env.local' : 'Vercel + redeployed'}`);
+  endSections();
 }
 
 // ── rerun ─────────────────────────────────────────────────────────────────────
 async function rerun() {
   banner();
   const projects = await readProjects();
+
+  section('Re-run / re-open project');
   if (!projects.length) {
-    console.log('  No projects found. Run: fabrica build');
+    log('No projects found. Run: fabrica build');
+    endSections();
     return;
   }
+  endSections();
 
-  section('Re-run / re-open project');
-
-  // Step 1 — local or cloud
   const typeFilter = await choose('Which type of project?', [
-    { name: 'All projects', value: 'all' },
-    { name: 'Local projects', value: 'local' },
+    { name: 'All projects',           value: 'all' },
+    { name: 'Local projects',         value: 'local' },
     { name: 'Cloud (Vercel) projects', value: 'cloud' },
   ]);
 
   const filtered = typeFilter === 'all' ? projects : projects.filter((p) => p.type === typeFilter);
   if (!filtered.length) {
-    console.log(`  No ${typeFilter} projects found.`);
+    section('Re-run / re-open project');
+    log(`No ${typeFilter} projects found.`);
+    endSections();
     return;
   }
 
-  // Step 2 — pick project
   const projectId = await choose('Select project to re-run:', filtered.map((p) => ({
     name: `${p.projectName} (${p.type === 'local' ? 'local' : 'cloud'})`,
     value: p.id,
@@ -170,37 +177,27 @@ async function rerun() {
   section(`Re-running: ${project.projectName}`);
 
   if (project.type === 'local') {
-    // Re-run local dev server
     kv('Path', project.target);
-    kv('URL', 'http://localhost:3000');
+    kv('URL',  'http://localhost:3000');
+    log('Starting dev server — browser opens in 3s...');
+    endSections();
 
-    const { runCommand } = await import('./system.js');
+    const { runCommand, runCommandCapture } = await import('./system.js');
     const { access } = await import('node:fs/promises');
     const hasPnpmLock = await access(path.join(project.target, 'pnpm-lock.yaml')).then(() => true, () => false);
-    const { runCommandCapture } = await import('./system.js');
     const pnpmAvailable = (await runCommandCapture('pnpm', ['--version'])).code === 0;
     const devCommand = hasPnpmLock && pnpmAvailable ? ['pnpm', ['run', 'dev']] : ['npm', ['run', 'dev']];
-
-    console.log('  Starting dev server... auto-opening browser in 3s');
     setTimeout(() => openUrl('http://localhost:3000'), 3000);
     await runCommand(devCommand[0], devCommand[1], { cwd: project.target });
   } else {
-    // Cloud: show info + open URL
     const url = project.productionUrl || null;
-    const lines = [
-      `Project:  ${project.projectName}`,
-      `GitHub:   ${project.githubRepo || 'n/a'}`,
-      `URL:      ${url || 'n/a'}`,
-      `Inspect:  ${project.inspectUrl || 'n/a'}`,
-      `Created:  ${project.createdAt}`,
-    ];
-    subBox(lines);
-    if (url) {
-      kv('Opening', url);
-      await openUrl(url);
-    } else {
-      console.log('  No URL found for this project.');
-    }
+    kv('GitHub',  project.githubRepo || 'n/a');
+    kv('URL',     url || 'n/a');
+    kv('Inspect', project.inspectUrl || 'n/a');
+    kv('Created', project.createdAt);
+    if (url) { log(`Opening ${url} ...`); }
+    endSections();
+    if (url) await openUrl(url);
   }
 }
 
@@ -208,28 +205,25 @@ async function rerun() {
 async function info() {
   banner();
   section('Package info');
-  const lines = [
-    `Package:   fabrica-e-commerce v${await packageVersion()}`,
-    `Bridge:    ${BRIDGE_ORIGIN}`,
-    `Store repo: ${STORE_REPO}`,
-    `Local data: ${dataDir}`,
-    `Node:      ${process.version}`,
-    '',
-    'Creator:   SPARROW AI SOLUTION',
-  ];
-  subBox(lines);
+  kv('Package',    `fabrica-e-commerce v${await packageVersion()}`);
+  kv('Bridge',     BRIDGE_ORIGIN);
+  kv('Store repo', STORE_REPO);
+  kv('Local data', dataDir);
+  kv('Node',       process.version);
+  kv('Creator',    'SPARROW AI SOLUTION');
+  endSections();
 }
 
 // ── router ────────────────────────────────────────────────────────────────────
 export async function run(args) {
   const command = args[0] || 'help';
-  if (command === 'build')                                         return build();
-  if (command === 'list')                                          return list();
-  if (command === 'env')                                           return env();
-  if (command === 'rerun')                                         return rerun();
-  if (command === 'info'  || command === '.info')                  return info();
-  if (command === 'vins'  || command === '/vins')                  return vinsCommand();
-  if (command === 'help'  || command === '--help' || command === '-h') return help();
+  if (command === 'build')                                              return build();
+  if (command === 'list')                                               return list();
+  if (command === 'env')                                                return env();
+  if (command === 'rerun')                                              return rerun();
+  if (command === 'info'  || command === '.info')                       return info();
+  if (command === 'vins'  || command === '/vins')                       return vinsCommand();
+  if (command === 'help'  || command === '--help' || command === '-h')  return help();
   console.error(`Unknown command: ${command}`);
   help();
   process.exitCode = 1;

package/src/deploy.js

@@ -4,7 +4,7 @@ import crypto from 'node:crypto';
 import { HARDCODED_ENV, REQUIRED_ENV_KEYS, STORE_REPO } from './config.js';
 import { buildsDir, saveProject } from './store.js';
 import { runCommand, runCommandCapture, openUrl } from './system.js';
-import { dimOrange, kv, section, spinner, subBox, red, orange } from './ui.js';
+import { kv, section, endSections, spinner, subBox, log, red, dimOrange } from './ui.js';
 import { ask, choose } from './prompt.js';
 
 const VERCEL_ENVIRONMENTS = ['production', 'preview', 'development'];
@@ -12,15 +12,23 @@ const VERCEL_ENVIRONMENTS = ['production', 'preview', 'development'];
 export async function collectEnv(supabase) {
   section('Environment variables');
   const env = { ...HARDCODED_ENV, SUPABASE_URL: supabase.url, SUPABASE_ANON_KEY: supabase.anonKey };
-  for (const key of REQUIRED_ENV_KEYS) env[key] = await ask(`${key}`);
+  for (const key of REQUIRED_ENV_KEYS) {
+    endSections();           // flush so the ask() prompt appears cleanly
+    env[key] = await ask(`${key}`);
+    section('Environment variables');
+  }
   return env;
 }
 
 export async function cloneRepo() {
+  endSections();
   section('Clone storefront');
   const projectName = await ask('Vercel project name', `fabrica-store-${Date.now()}`);
+  section('Clone storefront');
   const id = crypto.randomUUID();
   const target = path.join(buildsDir, `${projectName}-${id.slice(0, 8)}`);
+  // git clone output goes directly to inherited stdio — show it outside the box
+  endSections();
   await runCommand('git', ['clone', STORE_REPO, target]);
   return { id, projectName, target };
 }
@@ -38,20 +46,21 @@ export async function ensureVercelLogin() {
     return;
   }
   spin.fail('Not logged in to Vercel');
-  console.log('  Opening "vercel login" — finish the login in your browser...');
+  log('Opening "vercel login" — finish the login in your browser...');
+  endSections();
   await runCommand('npx', ['vercel@latest', 'login']);
+  section('Vercel login');
   if (!(await isLoggedInToVercel())) {
     throw new Error('Vercel login was not completed. Run "fabrica build" again after logging in.');
   }
   kv('Vercel', 'Logged in');
 }
 
-// Capture vercel CLI output and render it in a sub-box, errors in red
+// Capture vercel CLI output and add it into the current section buffer as a subBox
 async function runVercelBoxed(args, options = {}) {
   const result = await runCommandCapture('npx', ['vercel@latest', ...args], options);
   const raw = ((result.stdout || '') + (result.stderr || '')).trim();
   if (!raw) return result;
-
   const lines = raw.split('\n').map((l) => l.trimEnd()).filter(Boolean);
   const isErr = result.code !== 0 || lines.some((l) => /^Error:/i.test(l));
   subBox(lines, { isError: isErr });
@@ -73,21 +82,18 @@ async function connectGithubRepo(project, repoUrl) {
   const spin = spinner(`Connecting Vercel project to ${repoUrl}`);
   const attempts = 6;
   let lastError = '';
-  for (let attempt = 1; attempt <= attempts; attempt += 1) {
+  for (let attempt = 1; attempt <= attempts; attempt++) {
     const connect = await runCommandCapture('npx', ['--yes', 'vercel@latest', 'git', 'connect', repoUrl, '--yes'], { cwd: project.target });
-    if (connect.code === 0) {
-      spin.succeed('Vercel project connected to GitHub repo');
-      return true;
-    }
+    if (connect.code === 0) { spin.succeed('Vercel project connected to GitHub repo'); return true; }
     lastError = (connect.stderr || connect.stdout || '').trim();
-    if (attempt < attempts) await new Promise((resolve) => setTimeout(resolve, attempt * 3000));
+    if (attempt < attempts) await new Promise((r) => setTimeout(r, attempt * 3000));
   }
   spin.fail('Could not auto-connect Git — continuing with a direct deploy');
   subBox([
     'This usually means one of two things:',
     `1) Vercel hasn't finished indexing the new fork yet`,
-    `   Re-link manually: npx vercel git connect ${repoUrl}`,
-    '2) The "Vercel" GitHub App is set to "Only select repositories"',
+    `   Re-link: npx vercel git connect ${repoUrl}`,
+    '2) Vercel GitHub App set to "Only select repositories"',
     '   Fix at: https://github.com/settings/installations',
     lastError ? `Last error: ${lastError}` : '',
   ].filter(Boolean), { isError: true });
@@ -97,6 +103,7 @@ async function connectGithubRepo(project, repoUrl) {
 export async function deployToVercel(project, env, githubRepo) {
   section('Vercel deployment');
   await ensureVercelLogin();
+  section('Vercel deployment');
 
   await runVercelBoxed(['link', '--yes', '--project', project.projectName], { cwd: project.target });
 
@@ -110,24 +117,23 @@ export async function deployToVercel(project, env, githubRepo) {
   const deployResult = await runCommandCapture('npx', ['vercel@latest', '--prod', '--yes'], { cwd: project.target });
   const deployOutput = ((deployResult.stdout || '') + (deployResult.stderr || '')).trim();
 
-  // Extract URLs from deploy output
   let productionUrl = null;
   let aliasedUrl = null;
   let inspectUrl = null;
   for (const line of deployOutput.split('\n')) {
-    const m = line.match(/Production\s+(\S+)/);      if (m) productionUrl = m[1];
-    const a = line.match(/Aliased\s+(\S+)/);          if (a) aliasedUrl = a[1];
-    const i = line.match(/Inspect\s+(\S+)/);          if (i) inspectUrl = i[1];
+    const m = line.match(/Production\s+(\S+)/); if (m) productionUrl = m[1];
+    const a = line.match(/Aliased\s+(\S+)/);    if (a) aliasedUrl = a[1];
+    const i = line.match(/Inspect\s+(\S+)/);    if (i) inspectUrl = i[1];
   }
 
   subBox(deployOutput.split('\n').filter(Boolean));
   deploySpin.succeed('Production deployment created');
 
-  // Auto-open the aliased/production URL
   const openTarget = aliasedUrl || productionUrl;
   if (openTarget) {
     kv('Opening', openTarget);
-    await openUrl(openTarget);
+    // open after flush
+    process.nextTick(() => openUrl(openTarget));
   }
 
   const record = {
@@ -146,60 +152,20 @@ export async function deployToVercel(project, env, githubRepo) {
   return record;
 }
 
-export async function runLocally(project, env) {
-  section('Local Next.js setup');
-  const envPath = path.join(project.target, '.env.local');
-  const contents = Object.entries(env).map(([key, value]) => `${key}=${String(value).replace(/\n/g, '\\n')}`).join('\n') + '\n';
-  await fs.writeFile(envPath, contents, 'utf8');
-  kv('Env file', envPath);
-
-  const hasPnpmLock = await fs.access(path.join(project.target, 'pnpm-lock.yaml')).then(() => true, () => false);
-  const pnpmAvailable = (await runCommandCapture('pnpm', ['--version'])).code === 0;
-  const installCommand = hasPnpmLock && pnpmAvailable ? ['pnpm', ['install']] : ['npm', ['install']];
-  const devCommand = hasPnpmLock && pnpmAvailable ? ['pnpm', ['run', 'dev']] : ['npm', ['run', 'dev']];
-
-  await runCommand(installCommand[0], installCommand[1], { cwd: project.target });
-
-  const record = {
-    ...project,
-    type: 'local',
-    repo: STORE_REPO,
-    githubRepo: null,
-    createdAt: new Date().toISOString(),
-    envKeys: Object.keys(env),
-    env,
-    supabaseUrl: env.SUPABASE_URL,
-    productionUrl: 'http://localhost:3000',
-  };
-  await saveProject(record);
-
-  section('Local app');
-  kv('Path', project.target);
-  kv('URL', 'http://localhost:3000');
-  console.log('  Starting the Next.js dev server. Press Ctrl+C to stop.');
-
-  // Auto-open after a brief delay so server has time to start
-  setTimeout(() => openUrl('http://localhost:3000'), 3000);
-  await runCommand(devCommand[0], devCommand[1], { cwd: project.target });
-}
-
-// Called by env command - update a single env var for cloud or local project
 export async function updateProjectEnv(project, key, value) {
   if (project.type === 'local') {
-    // Update .env.local
     const envPath = path.join(project.target, '.env.local');
     let contents = '';
-    try { contents = await fs.readFile(envPath, 'utf8'); } catch { /* no file yet */ }
+    try { contents = await fs.readFile(envPath, 'utf8'); } catch { /* new file */ }
     const lines = contents.split('\n');
     const idx = lines.findIndex((l) => l.startsWith(`${key}=`));
-    const newLine = `${key}=${value}`;
-    if (idx >= 0) lines[idx] = newLine;
-    else lines.push(newLine);
+    if (idx >= 0) lines[idx] = `${key}=${value}`;
+    else lines.push(`${key}=${value}`);
     await fs.writeFile(envPath, lines.join('\n'), 'utf8');
     kv('Updated', `${key} in .env.local`);
   } else {
-    // Cloud: update on Vercel + redeploy
     await ensureVercelLogin();
+    section('Applying update');
     for (const environment of VERCEL_ENVIRONMENTS) {
       await runVercelBoxed(['env', 'rm', key, environment, '--yes'], { cwd: project.target, allowFailure: true });
       await runVercelBoxed(['env', 'add', key, environment], { cwd: project.target, input: `${value}\n` });
@@ -208,7 +174,39 @@ export async function updateProjectEnv(project, key, value) {
     await runVercelBoxed(['--prod', '--yes'], { cwd: project.target });
     spin.succeed(`Redeployed ${project.projectName}`);
   }
-  // Persist updated env in store
   const updated = { ...project, env: { ...(project.env || {}), [key]: value } };
   await saveProject(updated);
 }
+
+export async function runLocally(project, env) {
+  section('Local setup');
+  const envPath = path.join(project.target, '.env.local');
+  const contents = Object.entries(env).map(([k, v]) => `${k}=${String(v).replace(/\n/g, '\\n')}`).join('\n') + '\n';
+  await fs.writeFile(envPath, contents, 'utf8');
+  kv('Env file', envPath);
+
+  const hasPnpmLock = await fs.access(path.join(project.target, 'pnpm-lock.yaml')).then(() => true, () => false);
+  const pnpmAvailable = (await runCommandCapture('pnpm', ['--version'])).code === 0;
+  const installCmd = hasPnpmLock && pnpmAvailable ? ['pnpm', ['install']] : ['npm', ['install']];
+  const devCmd     = hasPnpmLock && pnpmAvailable ? ['pnpm', ['run', 'dev']] : ['npm', ['run', 'dev']];
+
+  const record = {
+    ...project, type: 'local', repo: STORE_REPO, githubRepo: null,
+    createdAt: new Date().toISOString(), envKeys: Object.keys(env),
+    env, supabaseUrl: env.SUPABASE_URL, productionUrl: 'http://localhost:3000',
+  };
+  await saveProject(record);
+
+  kv('URL', 'http://localhost:3000');
+  log('Installing dependencies...');
+  endSections();
+  await runCommand(installCmd[0], installCmd[1], { cwd: project.target });
+
+  section('Local app');
+  kv('Path', project.target);
+  kv('URL',  'http://localhost:3000');
+  log('Starting dev server — browser opens in 3s...');
+  endSections();
+  setTimeout(() => openUrl('http://localhost:3000'), 3000);
+  await runCommand(devCmd[0], devCmd[1], { cwd: project.target });
+}

package/src/deps.js

@@ -2,17 +2,15 @@ import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
 import { commandExists, runCommand, runCommandCapture } from './system.js';
-import { kv, section, spinner, subBox } from './ui.js';
+import { kv, section, endSections, spinner, subBox, log } from './ui.js';
 
-// ── platform detection ────────────────────────────────────────────────────────
 function isTermux() {
   return process.platform === 'android' ||
     (process.platform === 'linux' && (process.env.TERMUX_VERSION || process.env.PREFIX?.includes('com.termux')));
 }
 
 async function runPrivileged(command, args, options = {}) {
-  if (process.platform === 'win32') return runCommand(command, args, options);
-  if (isTermux()) return runCommand(command, args, options); // Termux: no sudo
+  if (process.platform === 'win32' || isTermux()) return runCommand(command, args, options);
   if (await commandExists('sudo')) return runCommand('sudo', [command, ...args], options);
   return runCommand(command, args, options);
 }
@@ -21,158 +19,105 @@ function runPrivilegedShell(script, options = {}) {
   return runCommand('bash', ['-c', script], options);
 }
 
-// ── dependency definitions ────────────────────────────────────────────────────
 const DEPENDENCIES = [
-  {
-    name: 'git',
-    label: 'Git',
-    check: () => checkWithPathRefresh('git'),
-    install: installGit,
-    manualUrl: 'https://git-scm.com/downloads'
-  },
-  {
-    name: 'gh',
-    label: 'GitHub CLI (gh)',
-    check: () => checkWithPathRefresh('gh'),
-    install: installGithubCli,
-    manualUrl: 'https://github.com/cli/cli#installation'
-  },
-  {
-    name: 'vercel',
-    label: 'Vercel CLI (via npx)',
-    check: checkVercelCli,
-    install: warmVercelCli,
-    manualUrl: 'https://vercel.com/docs/cli'
-  }
+  { name: 'git',     label: 'Git',                  check: () => checkWithPathRefresh('git'),     install: installGit,        manualUrl: 'https://git-scm.com/downloads' },
+  { name: 'gh',      label: 'GitHub CLI (gh)',       check: () => checkWithPathRefresh('gh'),      install: installGithubCli,  manualUrl: 'https://github.com/cli/cli#installation' },
+  { name: 'vercel',  label: 'Vercel CLI (via npx)',  check: checkVercelCli,                        install: warmVercelCli,     manualUrl: 'https://vercel.com/docs/cli' },
 ];
 
-// ── PATH helpers ──────────────────────────────────────────────────────────────
 function addToPathIfDirectory(directory) {
   if (!directory || !fs.existsSync(directory)) return;
-  const delimiter = path.delimiter;
   const current = process.env.PATH || '';
-  const entries = current.split(delimiter).filter(Boolean);
-  if (!entries.some((entry) => entry.toLowerCase() === directory.toLowerCase())) {
-    process.env.PATH = `${directory}${delimiter}${current}`;
-  }
+  const entries = current.split(path.delimiter).filter(Boolean);
+  if (!entries.some((e) => e.toLowerCase() === directory.toLowerCase()))
+    process.env.PATH = `${directory}${path.delimiter}${current}`;
 }
 
 function refreshWindowsToolPaths() {
   if (process.platform !== 'win32') return;
   const lad = process.env.LOCALAPPDATA;
-  const pf  = process.env.ProgramFiles;
+  const pf   = process.env.ProgramFiles;
   const pf86 = process.env['ProgramFiles(x86)'];
-  const pd  = process.env.ProgramData;
-  addToPathIfDirectory(lad  && path.join(lad, 'Microsoft', 'WinGet', 'Links'));
-  addToPathIfDirectory(pf   && path.join(pf, 'GitHub CLI'));
+  const pd   = process.env.ProgramData;
+  addToPathIfDirectory(lad  && path.join(lad,  'Microsoft', 'WinGet', 'Links'));
+  addToPathIfDirectory(pf   && path.join(pf,   'GitHub CLI'));
   addToPathIfDirectory(pf86 && path.join(pf86, 'GitHub CLI'));
-  addToPathIfDirectory(pd   && path.join(pd, 'chocolatey', 'bin'));
-  addToPathIfDirectory(pf   && path.join(pf, 'Git', 'cmd'));
-  addToPathIfDirectory(pf   && path.join(pf, 'nodejs'));
+  addToPathIfDirectory(pd   && path.join(pd,   'chocolatey', 'bin'));
+  addToPathIfDirectory(pf   && path.join(pf,   'Git', 'cmd'));
+  addToPathIfDirectory(pf   && path.join(pf,   'nodejs'));
 }
 
-async function checkWithPathRefresh(command) {
-  refreshWindowsToolPaths();
-  return commandExists(command);
-}
+async function checkWithPathRefresh(cmd) { refreshWindowsToolPaths(); return commandExists(cmd); }
 
 async function runFirstSuccessful(candidates, options = {}) {
-  for (const [command, args] of candidates) {
-    const result = await runCommandCapture(command, args, options);
-    if (result.code === 0) return result;
+  for (const [cmd, args] of candidates) {
+    const r = await runCommandCapture(cmd, args, options);
+    if (r.code === 0) return r;
   }
   return { code: 1, stdout: '', stderr: 'All fallback commands failed' };
 }
 
 async function checkVercelCli() {
   refreshWindowsToolPaths();
-  const result = await runFirstSuccessful([
-    ['npx', ['--yes', 'vercel@latest', '--version']],
-    ['npm', ['exec', '--yes', 'vercel@latest', '--', '--version']],
-    ['vercel', ['--version']]
+  const r = await runFirstSuccessful([
+    ['npx',    ['--yes', 'vercel@latest', '--version']],
+    ['npm',    ['exec', '--yes', 'vercel@latest', '--', '--version']],
+    ['vercel', ['--version']],
   ]);
-  return result.code === 0;
+  return r.code === 0;
 }
 
 async function warmVercelCli() {
   refreshWindowsToolPaths();
-  const warmed = await runFirstSuccessful([
-    ['npx', ['--yes', 'vercel@latest', '--version']],
-    ['npm', ['exec', '--yes', 'vercel@latest', '--', '--version']],
-    ['vercel', ['--version']]
+  const r = await runFirstSuccessful([
+    ['npx',    ['--yes', 'vercel@latest', '--version']],
+    ['npm',    ['exec', '--yes', 'vercel@latest', '--', '--version']],
+    ['vercel', ['--version']],
   ]);
-  if (warmed.code === 0) return;
+  if (r.code === 0) return;
   await runCommand('npm', ['install', '-g', 'vercel@latest'], { allowFailure: true });
 }
 
-// ── Git install ───────────────────────────────────────────────────────────────
 async function installGit() {
   refreshWindowsToolPaths();
-  const platform = process.platform;
-
-  if (isTermux()) {
-    await runCommand('pkg', ['install', '-y', 'git'], { allowFailure: true });
-    return;
-  }
-
-  if (platform === 'linux') {
-    if (await commandExists('apt-get')) {
-      await runPrivileged('apt-get', ['update'], { allowFailure: true });
-      await runPrivileged('apt-get', ['install', '-y', 'git'], { allowFailure: true });
-      return;
-    }
+  const p = process.platform;
+  if (isTermux()) return runCommand('pkg', ['install', '-y', 'git'], { allowFailure: true });
+  if (p === 'linux') {
+    if (await commandExists('apt-get')) { await runPrivileged('apt-get', ['update'], { allowFailure: true }); return runPrivileged('apt-get', ['install', '-y', 'git'], { allowFailure: true }); }
     if (await commandExists('dnf'))    return runPrivileged('dnf',    ['install', '-y', 'git'], { allowFailure: true });
     if (await commandExists('yum'))    return runPrivileged('yum',    ['install', '-y', 'git'], { allowFailure: true });
     if (await commandExists('pacman')) return runPrivileged('pacman', ['-Sy', '--noconfirm', 'git'], { allowFailure: true });
     if (await commandExists('zypper')) return runPrivileged('zypper', ['install', '-y', 'git'], { allowFailure: true });
     if (await commandExists('apk'))    return runPrivileged('apk',    ['add', 'git'], { allowFailure: true });
   }
-  if (platform === 'darwin') {
+  if (p === 'darwin') {
     if (await commandExists('brew')) return runCommand('brew', ['install', 'git'], { allowFailure: true });
-    // Xcode command line tools
-    await runCommand('xcode-select', ['--install'], { allowFailure: true });
+    return runCommand('xcode-select', ['--install'], { allowFailure: true });
   }
-  if (platform === 'win32') {
-    if (await commandExists('winget')) {
-      await runCommand('winget', ['install', '--id', 'Git.Git', '-e', '--source', 'winget'], { allowFailure: true });
-      refreshWindowsToolPaths();
-      return;
-    }
-    if (await commandExists('choco')) {
-      await runCommand('choco', ['install', 'git', '-y'], { allowFailure: true });
-      refreshWindowsToolPaths();
-    }
+  if (p === 'win32') {
+    if (await commandExists('winget')) { await runCommand('winget', ['install', '--id', 'Git.Git', '-e', '--source', 'winget'], { allowFailure: true }); refreshWindowsToolPaths(); return; }
+    if (await commandExists('choco'))  { await runCommand('choco',  ['install', 'git', '-y'], { allowFailure: true }); refreshWindowsToolPaths(); }
   }
 }
 
-// ── GitHub CLI install ────────────────────────────────────────────────────────
 async function installGithubCli() {
   refreshWindowsToolPaths();
-  const platform = process.platform;
-
-  if (isTermux()) {
-    await runCommand('pkg', ['install', '-y', 'gh'], { allowFailure: true });
-    return;
-  }
-
-  if (platform === 'linux') {
+  const p = process.platform;
+  if (isTermux()) return runCommand('pkg', ['install', '-y', 'gh'], { allowFailure: true });
+  if (p === 'linux') {
     if (await commandExists('apt-get')) {
       const direct = await (await commandExists('sudo')
         ? runCommandCapture('sudo', ['apt-get', 'install', '-y', 'gh'])
         : runCommandCapture('apt-get', ['install', '-y', 'gh']));
       if (direct.code === 0) return;
-      const usesSudo = await commandExists('sudo');
-      const prefix = usesSudo ? 'sudo ' : '';
+      const pre = (await commandExists('sudo')) ? 'sudo ' : '';
       await runPrivilegedShell([
-        'set -e',
-        `${prefix}apt-get update`,
-        `${prefix}apt-get install -y curl ca-certificates gnupg`,
-        `${prefix}mkdir -p -m 755 /etc/apt/keyrings`,
-        `curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | ${prefix}tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null`,
-        `${prefix}chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg`,
-        `echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | ${prefix}tee /etc/apt/sources.list.d/github-cli.list > /dev/null`,
-        `${prefix}apt-get update`,
-        `${prefix}apt-get install -y gh`
+        'set -e', `${pre}apt-get update`, `${pre}apt-get install -y curl ca-certificates gnupg`,
+        `${pre}mkdir -p -m 755 /etc/apt/keyrings`,
+        `curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | ${pre}tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null`,
+        `${pre}chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg`,
+        `echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | ${pre}tee /etc/apt/sources.list.d/github-cli.list > /dev/null`,
+        `${pre}apt-get update`, `${pre}apt-get install -y gh`,
       ].join(' && '), { allowFailure: true });
       return;
     }
@@ -181,25 +126,17 @@ async function installGithubCli() {
     if (await commandExists('zypper')) return runPrivileged('zypper', ['install', '-y', 'gh'], { allowFailure: true });
     if (await commandExists('apk'))    return runCommand('apk', ['add', 'github-cli'], { allowFailure: true });
   }
-  if (platform === 'darwin') {
+  if (p === 'darwin') {
     if (await commandExists('brew')) return runCommand('brew', ['install', 'gh'], { allowFailure: true });
   }
-  if (platform === 'win32') {
-    if (await commandExists('winget')) {
-      await runCommand('winget', ['install', '--id', 'GitHub.cli', '-e', '--source', 'winget'], { allowFailure: true });
-      refreshWindowsToolPaths();
-      return;
-    }
-    if (await commandExists('choco')) {
-      await runCommand('choco', ['install', 'gh', '-y'], { allowFailure: true });
-      refreshWindowsToolPaths();
-    }
+  if (p === 'win32') {
+    if (await commandExists('winget')) { await runCommand('winget', ['install', '--id', 'GitHub.cli', '-e', '--source', 'winget'], { allowFailure: true }); refreshWindowsToolPaths(); return; }
+    if (await commandExists('choco'))  { await runCommand('choco',  ['install', 'gh', '-y'], { allowFailure: true }); refreshWindowsToolPaths(); }
   }
 }
 
-// ── Public API ────────────────────────────────────────────────────────────────
 export async function ensureDependencies({ autoInstall = true, names } = {}) {
-  const targets = names ? DEPENDENCIES.filter((dep) => names.includes(dep.name)) : DEPENDENCIES;
+  const targets = names ? DEPENDENCIES.filter((d) => names.includes(d.name)) : DEPENDENCIES;
   const results = [];
   for (const dep of targets) {
     const spin = spinner(`Checking ${dep.label}`);
@@ -211,7 +148,7 @@ export async function ensureDependencies({ autoInstall = true, names } = {}) {
     await dep.install();
     present = await dep.check();
     if (present) installSpin.succeed(`${dep.label} installed`);
-    else installSpin.fail(`${dep.label} could not be installed automatically`);
+    else         installSpin.fail(`${dep.label} could not be installed automatically`);
     results.push({ ...dep, present, installed: present });
   }
   return results;
@@ -219,18 +156,20 @@ export async function ensureDependencies({ autoInstall = true, names } = {}) {
 
 export async function vinsCommand() {
   section('Fabrica dependency check (vins)');
-  const platform = isTermux() ? 'Termux/Android' : process.platform;
-  kv('Platform', platform);
+  kv('Platform', isTermux() ? 'Termux/Android' : process.platform);
   const results = await ensureDependencies();
+
   section('Summary');
-  let allGood = true;
   const summaryLines = [];
+  let allGood = true;
   for (const dep of results) {
     summaryLines.push(`${dep.label}: ${dep.present ? '✓ OK' : '✗ MISSING — install manually'}`);
     if (!dep.present) { allGood = false; summaryLines.push(`  Manual: ${dep.manualUrl}`); }
   }
   subBox(summaryLines, { isError: !allGood });
-  if (allGood) console.log('\n  All dependencies ready. Run: fabrica build');
-  else { console.log('\n  Some deps could not be installed automatically.'); process.exitCode = 1; }
+  if (allGood) log('All dependencies ready. Run: fabrica build');
+  else         log('Some deps could not be installed. See links above.');
+  endSections();
+  if (!allGood) process.exitCode = 1;
   return results;
 }

package/src/github.js

@@ -1,7 +1,7 @@
 import { commandExists, runCommand, runCommandCapture } from './system.js';
 import { STORE_REPO } from './config.js';
 import { choose } from './prompt.js';
-import { dimOrange, kv, section, spinner } from './ui.js';
+import { dimOrange, kv, section, spinner, log } from './ui.js';
 
 export async function isGithubCliInstalled() {
   return commandExists('gh');
@@ -27,7 +27,7 @@ export async function ensureGithubLogin() {
     spin.succeed('Already logged in to GitHub');
   } else {
     spin.fail('Not logged in to GitHub');
-    console.log('A browser/device flow will open so you can log in with "gh auth login"...');
+    log('A browser/device flow will open — log in with "gh auth login"...');
     await runCommand('gh', ['auth', 'login', '--hostname', 'github.com', '--git-protocol', 'https', '--web']);
     if (!(await isLoggedInToGithub())) {
       throw new Error('GitHub login was not completed. Run "fabrica build" again after logging in with "gh auth login".');
@@ -40,7 +40,7 @@ export async function ensureGithubLogin() {
     gitSpin.succeed('GitHub API credentials ready');
   } else {
     gitSpin.fail('Could not configure GitHub git credentials automatically');
-    console.log('Continuing with GitHub API publishing; if Git later asks for credentials, run: gh auth setup-git');
+    log('Continuing — if Git asks for credentials later, run: gh auth setup-git');
   }
 }
 
@@ -157,7 +157,7 @@ async function forkSourceRepo(owner, repoName) {
       }
       renameSpin.fail(`Could not rename — continuing with the existing fork name`);
       kv('GitHub repo', `https://github.com/${owner}/${actualName}`);
-      console.log(dimOrange(`  Note: this is named "${actualName}", not "${repoName}", because your GitHub account already had a fork of ${source}.`));
+      log(`Note: this is named "${actualName}", not "${repoName}", because your GitHub account already had a fork of ${source}.`);
       return actualName;
     }
 

package/src/ui.js

@@ -1,79 +1,120 @@
 import process from 'node:process';
 import boxen from 'boxen';
 
-// ── color helpers (raw ANSI, no deps) ────────────────────────────────────────
+// ── colors ────────────────────────────────────────────────────────────────────
 const ESC = '\x1b[';
-export const orange  = (t) => `${ESC}38;2;255;138;0m${t}${ESC}0m`;
+export const orange    = (t) => `${ESC}38;2;255;138;0m${t}${ESC}0m`;
 export const dimOrange = (t) => `${ESC}38;2;182;95;0m${t}${ESC}0m`;
-export const bold    = (t) => `${ESC}1m${t}${ESC}0m`;
-export const red     = (t) => `${ESC}38;2;220;50;50m${t}${ESC}0m`;
-export const dim     = (t) => `${ESC}2m${t}${ESC}0m`;
-export const green   = (t) => `${ESC}38;2;80;200;80m${t}${ESC}0m`;
-
-// ── boxen presets ─────────────────────────────────────────────────────────────
-// Main section box — rounded corners, orange border
-function sectionBox(content, title) {
-  return boxen(content, {
-    title: title ? bold(orange(title)) : undefined,
+export const bold      = (t) => `${ESC}1m${t}${ESC}0m`;
+export const red       = (t) => `${ESC}38;2;220;50;50m${t}${ESC}0m`;
+export const dim       = (t) => `${ESC}2m${t}${ESC}0m`;
+export const green     = (t) => `${ESC}38;2;80;200;80m${t}${ESC}0m`;
+
+// strip ANSI for length calculations
+function stripAnsi(s) { return s.replace(/\x1b\[[0-9;]*m/g, ''); }
+
+// ── section buffer ─────────────────────────────────────────────────────────────
+// Each section accumulates lines, then flushes as ONE boxen box when the
+// next section (or flushSection) is called.
+let _currentTitle = null;
+let _lines = [];          // raw strings (may contain ANSI)
+let _sectionCount = 0;
+let _isError = false;
+
+function flushSection() {
+  if (_currentTitle === null) return;
+
+  const content = _lines.join('\n');
+  const rendered = boxen(content || ' ', {
+    title: bold(orange(_currentTitle)),
     titleAlignment: 'left',
     padding: { top: 0, bottom: 0, left: 1, right: 1 },
     margin: { top: 0, bottom: 0, left: 0, right: 0 },
     borderStyle: 'round',
     borderColor: '#ff8a00',
   });
+
+  if (_sectionCount > 1) console.log(orange('  │'));
+  console.log(rendered);
+
+  _currentTitle = null;
+  _lines = [];
+  _isError = false;
 }
 
-// Sub-step box — single border, indented, dim orange or red
-function subStepBox(content, isError = false) {
-  return boxen(content, {
-    padding: { top: 0, bottom: 0, left: 1, right: 1 },
-    margin: { top: 0, bottom: 0, left: 4, right: 0 },
-    borderStyle: 'single',
-    borderColor: isError ? '#dc3232' : '#b65f00',
-  });
+// Add a line into the current section buffer
+function addLine(text) {
+  _lines.push(text);
 }
 
-// ── section tracking (connector │ lines between boxes) ───────────────────────
-let _sectionCount = 0;
-export function resetSectionCount() { _sectionCount = 0; }
+export function resetSectionCount() {
+  flushSection();
+  _sectionCount = 0;
+}
+
+// ── public API ────────────────────────────────────────────────────────────────
 
+// Start a new named section (flushes previous one)
 export function section(title) {
-  if (_sectionCount > 0) console.log(orange('  │'));
+  flushSection();
   _sectionCount++;
-  console.log(sectionBox('', title));
+  _currentTitle = title;
+  _lines = [];
 }
 
-// Print content in a section-style box (with optional title)
-export function box(lines, title) {
-  const content = lines.join('\n');
-  console.log(sectionBox(content, title));
-}
-
-// Print a sub-step box (indented, for raw tool output)
-export function subBox(lines, { isError = false } = {}) {
-  if (!lines || !lines.length) return;
-  const content = (isError ? lines.map((l) => red(l)) : lines.map((l) => dimOrange(l))).join('\n');
-  console.log(subStepBox(content, isError));
+// Force-flush the current section (call at end of a command)
+export function endSections() {
+  flushSection();
 }
 
-// kv inside current flow
+// kv row inside current section
 export function kv(key, value) {
-  console.log(`  ${dimOrange('›')} ${bold(key)} ${dimOrange('→')} ${value}`);
+  addLine(`  ${dimOrange('›')} ${bold(key)} ${dimOrange('→')} ${value}`);
 }
 
-// ── spinner ───────────────────────────────────────────────────────────────────
+// spinner — writes inline to stdout while running, then adds result line to buffer
 const CLEAR_LINE = '\x1b[K';
 export function spinner(text) {
-  process.stdout.write('  ' + dimOrange('○ ') + text);
+  process.stdout.write(`  ${dimOrange('○')} ${text}`);
   return {
-    succeed(msg) { process.stdout.write(`\r${CLEAR_LINE}  ${orange('✓')} ${msg}\n`); },
-    fail(msg)    { process.stdout.write(`\r${CLEAR_LINE}  ${red('✗')} ${msg}\n`); },
+    succeed(msg) {
+      process.stdout.write(`\r${CLEAR_LINE}`);
+      addLine(`  ${orange('✓')} ${msg}`);
+    },
+    fail(msg) {
+      process.stdout.write(`\r${CLEAR_LINE}`);
+      addLine(`  ${red('✗')} ${msg}`);
+    },
   };
 }
 
+// plain log inside current section
+export function log(text) {
+  addLine(`  ${text}`);
+}
+
+// sub-step block (e.g. raw Vercel output) — indented, dimmer border
+export function subBox(lines, { isError = false } = {}) {
+  if (!lines || !lines.length) return;
+  const colored = isError ? lines.map((l) => red(l)) : lines.map((l) => dimOrange(l));
+  const content = colored.join('\n');
+  const rendered = boxen(content, {
+    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    margin: { top: 0, bottom: 0, left: 2, right: 0 },
+    borderStyle: 'single',
+    borderColor: isError ? '#dc3232' : '#b65f00',
+  });
+  // add each rendered line into buffer so it stays inside the section box
+  for (const line of rendered.split('\n')) addLine(line);
+}
+
 // ── banner ────────────────────────────────────────────────────────────────────
 export function banner() {
+  flushSection();
   _sectionCount = 0;
+  _currentTitle = null;
+  _lines = [];
+
   const art = [
     '███████╗ █████╗ ██████╗ ██████╗ ██╗ ██████╗ █████╗ ',
     '██╔════╝██╔══██╗██╔══██╗██╔══██╗██║██╔════╝██╔══██╗',
@@ -90,7 +131,6 @@ export function banner() {
 
   console.log(boxen(`${art}\n\n${subtitle}`, {
     padding: { top: 0, bottom: 0, left: 1, right: 1 },
-    margin: { top: 0, bottom: 0, left: 0, right: 0 },
     borderStyle: 'double',
     borderColor: '#ff8a00',
   }));
@@ -119,7 +159,12 @@ export function help() {
     '',
     dim('Creator: SPARROW AI SOLUTION'),
   ].join('\n');
-
   console.log(orange('  │'));
-  console.log(sectionBox(content, 'Help'));
+  console.log(boxen(content, {
+    title: bold(orange('Help')),
+    titleAlignment: 'left',
+    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    borderStyle: 'round',
+    borderColor: '#ff8a00',
+  }));
 }