fabrica-e-commerce 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabrica-e-commerce",
-  "version": "0.1.15",
+  "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

@@ -3,13 +3,14 @@ import { readFile } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import { connectSupabase } from './bridge.js';
-import { collectEnv, cloneRepo, deployToVercel, editProjectEnv, ensureVercelLogin, runLocally } from './deploy.js';
+import { collectEnv, cloneRepo, deployToVercel, updateProjectEnv, ensureVercelLogin, runLocally } from './deploy.js';
 import { createGithubRepoFromClone } from './github.js';
 import { ensureDependencies, vinsCommand } from './deps.js';
 import { BRIDGE_ORIGIN, STORE_REPO } from './config.js';
 import { dataDir, readProjects } from './store.js';
-import { choose } from './prompt.js';
-import { banner, help, kv, section } from './ui.js';
+import { choose, ask } from './prompt.js';
+import { banner, help, kv, section, endSections, subBox, log } from './ui.js';
+import { openUrl } from './system.js';
 
 async function packageVersion() {
   const here = path.dirname(fileURLToPath(import.meta.url));
@@ -17,6 +18,7 @@ async function packageVersion() {
   return pkg.version;
 }
 
+// ── build ─────────────────────────────────────────────────────────────────────
 async function build() {
   banner();
 
@@ -27,17 +29,19 @@ 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();
 
-  section('Step 3: Run target');
+  section('Run target');
   const target = await choose('Where should Fabrica run this storefront?', [
     { name: 'Deploy on Vercel cloud', value: 'vercel' },
-    { name: 'Run locally on this computer', value: 'local' }
+    { name: 'Run locally on this computer', value: 'local' },
   ]);
 
   if (target === 'local') {
     await runLocally(project, env);
+    endSections();
     return;
   }
 
@@ -45,46 +49,181 @@ async function build() {
   await ensureVercelLogin();
   const githubRepo = await createGithubRepoFromClone(project);
   const record = await deployToVercel(project, env, githubRepo);
+
   section('Done');
   kv('Project', record.projectName);
   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;
   }
-  projects.forEach((project, index) => {
-    console.log(`\n${index + 1}. ${project.projectName}`);
-    kv('Created', project.createdAt);
+
+  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}`);
+  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) {
+    log('No projects found. Run: fabrica build');
+    endSections();
+    return;
+  }
+  endSections();
+
+  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' },
+  ]);
+
+  const filtered = typeFilter === 'all' ? projects : projects.filter((p) => p.type === typeFilter);
+  if (!filtered.length) {
+    section('Environment manager');
+    log(`No ${typeFilter} projects found.`);
+    endSections();
+    return;
+  }
+
+  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);
+
+  const envKeys = project.envKeys || [];
+  if (!envKeys.length) {
+    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 })));
+  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) {
+    log('No projects found. Run: fabrica build');
+    endSections();
+    return;
+  }
+  endSections();
+
+  const typeFilter = await choose('Which type of project?', [
+    { 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) {
+    section('Re-run / re-open project');
+    log(`No ${typeFilter} projects found.`);
+    endSections();
+    return;
+  }
+
+  const projectId = await choose('Select project to re-run:', filtered.map((p) => ({
+    name: `${p.projectName} (${p.type === 'local' ? 'local' : 'cloud'})`,
+    value: p.id,
+  })));
+  const project = filtered.find((p) => p.id === projectId);
+
+  section(`Re-running: ${project.projectName}`);
+
+  if (project.type === 'local') {
     kv('Path', project.target);
-    kv('GitHub repo', project.githubRepo || 'n/a');
-    kv('Supabase', project.supabaseUrl);
-    kv('Env keys', project.envKeys.join(', '));
-  });
-  await editProjectEnv(projects);
+    kv('URL',  'http://localhost:3000');
+    log('Starting dev server — browser opens in 3s...');
+    endSections();
+
+    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 pnpmAvailable = (await runCommandCapture('pnpm', ['--version'])).code === 0;
+    const devCommand = hasPnpmLock && pnpmAvailable ? ['pnpm', ['run', 'dev']] : ['npm', ['run', 'dev']];
+    setTimeout(() => openUrl('http://localhost:3000'), 3000);
+    await runCommand(devCommand[0], devCommand[1], { cwd: project.target });
+  } else {
+    const url = project.productionUrl || null;
+    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);
+  }
 }
 
+// ── info ──────────────────────────────────────────────────────────────────────
 async function info() {
   banner();
-  kv('Package', `fabrica-e-commerce v${await packageVersion()}`);
-  kv('Bridge', BRIDGE_ORIGIN);
+  section('Package info');
+  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('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 === '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

@@ -3,8 +3,8 @@ import path from 'node:path';
 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 } from './system.js';
-import { dimOrange, kv, section, spinner } from './ui.js';
+import { runCommand, runCommandCapture, openUrl } from './system.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,25 +12,32 @@ 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 };
 }
+
 export async function isLoggedInToVercel() {
   const result = await runCommandCapture('npx', ['--yes', 'vercel@latest', 'whoami']);
   return result.code === 0;
 }
 
-// Step 3: verify Vercel login before anything else touches Vercel. If the
-// user isn't logged in, run the real interactive `vercel login` flow (same
-// as typing it in a terminal) and block until it succeeds.
 export async function ensureVercelLogin() {
   section('Vercel login');
   const spin = spinner('Checking Vercel login');
@@ -39,58 +46,66 @@ 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');
 }
 
-// Sets every env var across production, preview, and development so the
-// values are permanent for the project, not just the one deploy.
+// 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 });
+  return result;
+}
+
 async function setEnvEverywhere(project, env) {
   for (const [key, value] of Object.entries(env)) {
     const spin = spinner(`Setting ${key}`);
     for (const environment of VERCEL_ENVIRONMENTS) {
-      await runCommand('npx', ['vercel@latest', 'env', 'rm', key, environment, '--yes'], { cwd: project.target, allowFailure: true });
-      await runCommand('npx', ['vercel@latest', 'env', 'add', key, environment], { cwd: project.target, input: `${value}\n` });
+      await runVercelBoxed(['env', 'rm', key, environment, '--yes'], { cwd: project.target, allowFailure: true });
+      await runVercelBoxed(['env', 'add', key, environment], { cwd: project.target, input: `${value}\n` });
     }
     spin.succeed(`Set ${key} (production, preview, development)`);
   }
 }
 
-// Vercel's GitHub App integration indexes newly created/forked repos on its
-// own delay, separate from GitHub itself being aware of the repo. Right after
-// a fork, `vercel git connect` can fail simply because Vercel hasn't synced
-// yet — not because anything is actually wrong. Retry with backoff before
-// giving up, then fall back to a direct deploy with clear next steps.
 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 (future pushes auto-deploy)');
-      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');
-  console.log(dimOrange('  This usually means one of two things:'));
-  console.log(dimOrange(`  1) Vercel hasn't finished indexing the new fork yet (run "fabrica list" in a minute and re-link manually with: npx vercel git connect ${repoUrl})`));
-  console.log(dimOrange('  2) The "Vercel" GitHub App is set to "Only select repositories" and was never granted access to the new fork — fix at https://github.com/settings/installations'));
-  if (lastError) console.log(dimOrange(`  Last error: ${lastError}`));
+  subBox([
+    'This usually means one of two things:',
+    `1) Vercel hasn't finished indexing the new fork yet`,
+    `   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 });
   return false;
 }
 
 export async function deployToVercel(project, env, githubRepo) {
   section('Vercel deployment');
   await ensureVercelLogin();
+  section('Vercel deployment');
 
-  await runCommand('npx', ['vercel@latest', 'link', '--yes', '--project', project.projectName], { cwd: project.target });
+  await runVercelBoxed(['link', '--yes', '--project', project.projectName], { cwd: project.target });
 
   if (githubRepo?.repoUrl) {
     await connectGithubRepo(project, githubRepo.repoUrl);
@@ -99,52 +114,99 @@ export async function deployToVercel(project, env, githubRepo) {
   await setEnvEverywhere(project, env);
 
   const deploySpin = spinner('Creating production deployment');
-  await runCommand('npx', ['vercel@latest', '--prod', '--yes'], { cwd: project.target });
+  const deployResult = await runCommandCapture('npx', ['vercel@latest', '--prod', '--yes'], { cwd: project.target });
+  const deployOutput = ((deployResult.stdout || '') + (deployResult.stderr || '')).trim();
+
+  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];
+  }
+
+  subBox(deployOutput.split('\n').filter(Boolean));
   deploySpin.succeed('Production deployment created');
 
+  const openTarget = aliasedUrl || productionUrl;
+  if (openTarget) {
+    kv('Opening', openTarget);
+    // open after flush
+    process.nextTick(() => openUrl(openTarget));
+  }
+
   const record = {
     ...project,
+    type: 'cloud',
     repo: STORE_REPO,
     githubRepo: githubRepo?.repoUrl || null,
     createdAt: new Date().toISOString(),
     envKeys: Object.keys(env),
-    supabaseUrl: env.SUPABASE_URL
+    env,
+    supabaseUrl: env.SUPABASE_URL,
+    productionUrl: aliasedUrl || productionUrl || null,
+    inspectUrl: inspectUrl || null,
   };
   await saveProject(record);
   return record;
 }
-export async function editProjectEnv(projects) {
-  if (!projects.length) { console.log('No deployed projects saved yet. Run build first.'); return; }
-  const projectId = await choose('Select project:', projects.map((project) => ({ name: `${project.projectName} (${project.createdAt})`, value: project.id })));
-  const project = projects.find((item) => item.id === projectId);
-  const key = await choose('Variable to replace:', project.envKeys.map((item) => ({ name: item, value: item })));
-  const value = await ask(`New value for ${key}`);
-  await ensureVercelLogin();
-  for (const environment of VERCEL_ENVIRONMENTS) {
-    await runCommand('npx', ['vercel@latest', 'env', 'rm', key, environment, '--yes'], { cwd: project.target, allowFailure: true });
-    await runCommand('npx', ['vercel@latest', 'env', 'add', key, environment], { cwd: project.target, input: `${value}\n` });
+
+export async function updateProjectEnv(project, key, value) {
+  if (project.type === 'local') {
+    const envPath = path.join(project.target, '.env.local');
+    let contents = '';
+    try { contents = await fs.readFile(envPath, 'utf8'); } catch { /* new file */ }
+    const lines = contents.split('\n');
+    const idx = lines.findIndex((l) => l.startsWith(`${key}=`));
+    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 {
+    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` });
+    }
+    const spin = spinner('Redeploying...');
+    await runVercelBoxed(['--prod', '--yes'], { cwd: project.target });
+    spin.succeed(`Redeployed ${project.projectName}`);
   }
-  await runCommand('npx', ['vercel@latest', '--prod', '--yes'], { cwd: project.target });
-  kv('Redeployed', project.projectName);
+  const updated = { ...project, env: { ...(project.env || {}), [key]: value } };
+  await saveProject(updated);
 }
 
-
 export async function runLocally(project, env) {
-  section('Local Next.js setup');
+  section('Local 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';
+  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 installCommand = hasPnpmLock && pnpmAvailable ? ['pnpm', ['install']] : ['npm', ['install']];
-  const devCommand = hasPnpmLock && pnpmAvailable ? ['pnpm', ['run', 'dev']] : ['npm', ['run', 'dev']];
+  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 });
 
-  await runCommand(installCommand[0], installCommand[1], { cwd: project.target });
   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 it.');
-  await runCommand(devCommand[0], devCommand[1], { cwd: 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,15 +2,16 @@ 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 } from './ui.js';
+import { kv, section, endSections, spinner, subBox, log } from './ui.js';
+
+function isTermux() {
+  return process.platform === 'android' ||
+    (process.platform === 'linux' && (process.env.TERMUX_VERSION || process.env.PREFIX?.includes('com.termux')));
+}
 
-// Some systems (root containers, minimal CI images) have no `sudo` binary
-// at all. Fall back to running the command directly in that case instead
-// of failing outright.
 async function runPrivileged(command, args, options = {}) {
-  if (await commandExists('sudo')) {
-    return runCommand('sudo', [command, ...args], options);
-  }
+  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);
 }
 
@@ -18,191 +19,136 @@ function runPrivilegedShell(script, options = {}) {
   return runCommand('bash', ['-c', script], options);
 }
 
-// Dependencies the package actually shells out to. "git" and "gh" (GitHub
-// CLI) are real external binaries we depend on; "vercel" is fetched on
-// demand through npx so we just confirm npm/npx can resolve it.
 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' },
 ];
 
-
 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 localAppData = process.env.LOCALAPPDATA;
-  const programFiles = process.env.ProgramFiles;
-  const programFilesX86 = process.env['ProgramFiles(x86)'];
-  const programData = process.env.ProgramData;
-  addToPathIfDirectory(localAppData && path.join(localAppData, 'Microsoft', 'WinGet', 'Links'));
-  addToPathIfDirectory(programFiles && path.join(programFiles, 'GitHub CLI'));
-  addToPathIfDirectory(programFilesX86 && path.join(programFilesX86, 'GitHub CLI'));
-  addToPathIfDirectory(programData && path.join(programData, 'chocolatey', 'bin'));
-  addToPathIfDirectory(programFiles && path.join(programFiles, 'Git', 'cmd'));
-  addToPathIfDirectory(programFiles && path.join(programFiles, 'nodejs'));
+  const lad = process.env.LOCALAPPDATA;
+  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'));
+  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'));
 }
 
-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;
-  // Last resort: install a global Vercel binary so future invocations have a
-  // real `vercel` executable even when npx/npm exec cannot launch correctly.
+  if (r.code === 0) return;
   await runCommand('npm', ['install', '-g', 'vercel@latest'], { allowFailure: true });
 }
 
 async function installGit() {
   refreshWindowsToolPaths();
-  const platform = process.platform;
-  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;
-    }
-    if (await commandExists('dnf')) return runPrivileged('dnf', ['install', '-y', 'git'], { allowFailure: true });
-    if (await commandExists('yum')) return runPrivileged('yum', ['install', '-y', 'git'], { allowFailure: true });
+  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 });
+    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();
-      return;
-    }
+  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(); }
   }
 }
 
 async function installGithubCli() {
   refreshWindowsToolPaths();
-  const platform = process.platform;
-  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')) {
-      // Try the plain package first (present on newer Ubuntu/Debian).
       const direct = await (await commandExists('sudo')
         ? runCommandCapture('sudo', ['apt-get', 'install', '-y', 'gh'])
         : runCommandCapture('apt-get', ['install', '-y', 'gh']));
       if (direct.code === 0) return;
-      // Fall back to the official GitHub CLI apt repository setup.
-      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;
     }
-    if (await commandExists('dnf')) return runPrivileged('dnf', ['install', '-y', 'gh'], { allowFailure: true });
+    if (await commandExists('dnf'))    return runPrivileged('dnf',    ['install', '-y', 'gh'], { allowFailure: true });
     if (await commandExists('pacman')) return runPrivileged('pacman', ['-Sy', '--noconfirm', 'github-cli'], { allowFailure: true });
+    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();
-      return;
-    }
+  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(); }
   }
 }
 
 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}`);
     let present = await dep.check();
-    if (present) {
-      spin.succeed(`${dep.label} found`);
-      results.push({ ...dep, present, installed: false });
-      continue;
-    }
+    if (present) { spin.succeed(`${dep.label} found`); results.push({ ...dep, present, installed: false }); continue; }
     spin.fail(`${dep.label} missing`);
-    if (!autoInstall) {
-      results.push({ ...dep, present: false, installed: false });
-      continue;
-    }
+    if (!autoInstall) { results.push({ ...dep, present: false, installed: false }); continue; }
     const installSpin = spinner(`Installing ${dep.label}`);
     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;
@@ -210,21 +156,20 @@ export async function ensureDependencies({ autoInstall = true, names } = {}) {
 
 export async function vinsCommand() {
   section('Fabrica dependency check (vins)');
+  kv('Platform', isTermux() ? 'Termux/Android' : process.platform);
   const results = await ensureDependencies();
+
   section('Summary');
+  const summaryLines = [];
   let allGood = true;
   for (const dep of results) {
-    kv(dep.label, dep.present ? 'OK' : 'MISSING — install manually');
-    if (!dep.present) {
-      allGood = false;
-      console.log(`  Manual install: ${dep.manualUrl}`);
-    }
-  }
-  if (allGood) {
-    console.log('\nAll dependencies are ready. You can run: fabrica build');
-  } else {
-    console.log('\nSome dependencies could not be installed automatically. Install them manually using the links above, then re-run "fabrica vins".');
-    process.exitCode = 1;
+    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) 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/prompt.js

@@ -1,17 +1,79 @@
 import readline from 'node:readline/promises';
 import { stdin as input, stdout as output } from 'node:process';
+import { orange, dimOrange, bold } from './ui.js';
 
+// Raw readline ask (no frills)
 export async function ask(message, defaultValue = '') {
   const rl = readline.createInterface({ input, output });
   const suffix = defaultValue ? ` (${defaultValue})` : '';
-  const answer = await rl.question(`${message}${suffix}: `);
+  const answer = await rl.question(`  ${orange('?')} ${bold(message)}${dimOrange(suffix)}: `);
   rl.close();
-  return answer || defaultValue;
+  return answer.trim() || defaultValue;
 }
 
+// Arrow-key + Enter dropdown selector
 export async function choose(message, choices) {
-  console.log(message);
-  choices.forEach((choice, index) => console.log(`  ${index + 1}. ${choice.name}`));
-  const answer = Number(await ask('Select number', '1'));
-  return choices[Math.max(0, Math.min(choices.length - 1, answer - 1))].value;
+  return new Promise((resolve) => {
+    if (!process.stdin.isTTY) {
+      // Fallback for non-TTY (piped): numbered list
+      console.log(`  ${orange('◆')} ${bold(message)}`);
+      choices.forEach((choice, i) => console.log(`    ${dimOrange((i + 1) + '.')} ${choice.name}`));
+      const rl = readline.createInterface({ input, output });
+      rl.question(`  ${orange('?')} Select number (1): `, (answer) => {
+        rl.close();
+        const idx = Math.max(0, Math.min(choices.length - 1, (parseInt(answer, 10) || 1) - 1));
+        resolve(choices[idx].value);
+      });
+      return;
+    }
+
+    const ESC = '\x1b[';
+    let selected = 0;
+
+    function render(first) {
+      if (!first) {
+        // Move up to redraw
+        process.stdout.write(`\x1b[${choices.length + 1}A`);
+      }
+      console.log(`  ${orange('◆')} ${bold(message)}`);
+      choices.forEach((choice, i) => {
+        const cursor = i === selected ? orange('▶ ') : '  ';
+        const label = i === selected ? bold(orange(choice.name)) : dimOrange(choice.name);
+        console.log(`    ${cursor}${label}`);
+      });
+    }
+
+    render(true);
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+
+    function onKey(key) {
+      if (key === '\x1b[A' || key === '\x1b[D') { // up / left
+        selected = (selected - 1 + choices.length) % choices.length;
+        render(false);
+      } else if (key === '\x1b[B' || key === '\x1b[C') { // down / right
+        selected = (selected + 1) % choices.length;
+        render(false);
+      } else if (key === '\r' || key === '\n') {
+        process.stdin.setRawMode(false);
+        process.stdin.pause();
+        process.stdin.removeListener('data', onKey);
+        // print selected
+        process.stdout.write(`\x1b[${choices.length + 1}A`);
+        console.log(`  ${orange('◆')} ${bold(message)}`);
+        choices.forEach((choice, i) => {
+          if (i === selected) console.log(`    ${orange('▶ ')}${bold(orange(choice.name))}`);
+          else console.log(`    ${dimOrange('  ' + choice.name)}`);
+        });
+        resolve(choices[selected].value);
+      } else if (key === '\x03') { // Ctrl+C
+        process.stdin.setRawMode(false);
+        process.exit(0);
+      }
+    }
+
+    process.stdin.on('data', onKey);
+  });
 }

package/src/ui.js

@@ -1,46 +1,170 @@
+import process from 'node:process';
+import boxen from 'boxen';
+
+// ── colors ────────────────────────────────────────────────────────────────────
 const ESC = '\x1b[';
-export const orange = (text) => `${ESC}38;2;255;138;0m${text}${ESC}0m`;
-export const dimOrange = (text) => `${ESC}38;2;182;95;0m${text}${ESC}0m`;
-export const bold = (text) => `${ESC}1m${text}${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`;
 
-export function banner() {
-  console.log(orange(String.raw`
-███████╗ █████╗ ██████╗ ██████╗ ██╗ ██████╗ █████╗ 
-██╔════╝██╔══██╗██╔══██╗██╔══██╗██║██╔════╝██╔══██╗
-█████╗  ███████║██████╔╝██████╔╝██║██║     ███████║
-██╔══╝  ██╔══██║██╔══██╗██╔══██╗██║██║     ██╔══██║
-██║     ██║  ██║██████╔╝██║  ██║██║╚██████╗██║  ██║
-╚═╝     ╚═╝  ╚═╝╚═════╝ ╚═╝  ╚═╝╚═╝ ╚═════╝╚═╝  ╚═╝`));
-  console.log(dimOrange('      CMD → OAUTH BRIDGE // SUPABASE + VERCEL DEPLOYER'));
-  console.log(orange('──────────────────────────────────────────────────────'));
-}
-export function section(title) { console.log('\n' + orange(`◆ ${title}`)); }
-export function kv(key, value) { console.log(`${dimOrange('>')} ${bold(key)} ${dimOrange('→')} ${value}`); }
-// Clear the rest of the line (\x1b[K) before writing the final message so a
-// shorter success/fail message never leaves leftover characters from the
-// longer spinner text trailing after it (e.g. "✓ Git foundGit").
+// 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;
+}
+
+// Add a line into the current section buffer
+function addLine(text) {
+  _lines.push(text);
+}
+
+export function resetSectionCount() {
+  flushSection();
+  _sectionCount = 0;
+}
+
+// ── public API ────────────────────────────────────────────────────────────────
+
+// Start a new named section (flushes previous one)
+export function section(title) {
+  flushSection();
+  _sectionCount++;
+  _currentTitle = title;
+  _lines = [];
+}
+
+// Force-flush the current section (call at end of a command)
+export function endSections() {
+  flushSection();
+}
+
+// kv row inside current section
+export function kv(key, value) {
+  addLine(`  ${dimOrange('›')} ${bold(key)} ${dimOrange('→')} ${value}`);
+}
+
+// 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}${orange('✗')} ${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 = [
+    '███████╗ █████╗ ██████╗ ██████╗ ██╗ ██████╗ █████╗ ',
+    '██╔════╝██╔══██╗██╔══██╗██╔══██╗██║██╔════╝██╔══██╗',
+    '█████╗  ███████║██████╔╝██████╔╝██║██║     ███████║',
+    '██╔══╝  ██╔══██║██╔══██╗██╔══██╗██║██║     ██╔══██║',
+    '██║     ██║  ██║██████╔╝██║  ██║██║╚██████╗██║  ██║',
+    '╚═╝     ╚═╝  ╚═╝╚═════╝ ╚═╝  ╚═╝╚═╝ ╚═════╝╚═╝  ╚═╝',
+  ].map((l) => orange(l)).join('\n');
+
+  const subtitle = [
+    dimOrange('CMD → OAUTH BRIDGE // SUPABASE + VERCEL DEPLOYER'),
+    dim('by SPARROW AI SOLUTION'),
+  ].join('\n');
+
+  console.log(boxen(`${art}\n\n${subtitle}`, {
+    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    borderStyle: 'double',
+    borderColor: '#ff8a00',
+  }));
+}
+
+// ── help ──────────────────────────────────────────────────────────────────────
 export function help() {
   banner();
-  console.log(`
-${orange('Commands')}
-  ${bold('build')}      Connect Supabase, collect secrets, then run locally or deploy to Vercel
-  ${bold('list')}       Show deployed Fabrica projects and edit env variables
-  ${bold('vins')}       Verify CLI dependencies (git, gh, vercel) and auto-install anything missing
-  ${bold('info')}       Show package, bridge, repo, and local storage information
-  ${bold('help')}       Show this help screen
-
-${orange('Examples')}
-  npx fabrica-e-commerce build
-  npx fabrica-e-commerce list
-  npx fabrica-e-commerce vins
-  npx fabrica-e-commerce info
-`);
+  const content = [
+    bold(orange('Commands')),
+    '',
+    `  ${bold('build')}    Connect Supabase, collect secrets, deploy or run locally`,
+    `  ${bold('list')}     Show Fabrica projects (local & cloud)`,
+    `  ${bold('env')}      View and update environment variables for any project`,
+    `  ${bold('rerun')}    Re-run or re-open an existing project`,
+    `  ${bold('vins')}     Verify & auto-install CLI dependencies`,
+    `  ${bold('info')}     Package, bridge, repo and storage info`,
+    `  ${bold('help')}     Show this screen`,
+    '',
+    bold(orange('Examples')),
+    '',
+    `  ${dimOrange('$')} npx fabrica-e-commerce build`,
+    `  ${dimOrange('$')} npx fabrica-e-commerce env`,
+    `  ${dimOrange('$')} npx fabrica-e-commerce rerun`,
+    `  ${dimOrange('$')} npx fabrica-e-commerce list`,
+    '',
+    dim('Creator: SPARROW AI SOLUTION'),
+  ].join('\n');
+  console.log(orange('  │'));
+  console.log(boxen(content, {
+    title: bold(orange('Help')),
+    titleAlignment: 'left',
+    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    borderStyle: 'round',
+    borderColor: '#ff8a00',
+  }));
 }