opencode-auto-agent 1.3.1 → 1.4.0

package/bin/cli.js

@@ -15,6 +15,9 @@
 
 import { resolve } from "node:path";
 import { argv, exit, cwd } from "node:process";
+import { existsSync, readFileSync } from "node:fs";
+
+import { configureUI } from "../src/lib/ui.js";
 
 // ── Arg parsing (zero-dep) ─────────────────────────────────────────────────
 const args = argv.slice(2);
@@ -31,6 +34,8 @@ const flags = Object.fromEntries(
 
 const TARGET_DIR = resolve(flags.dir || cwd());
 
+configureUI(loadUIOptions(TARGET_DIR, flags));
+
 // ── Command router ─────────────────────────────────────────────────────────
 async function main() {
   switch (command) {
@@ -183,6 +188,9 @@ async function showConfig(targetDir) {
   kv("Tasks path", config.tasksPath || "PRD.md");
   kv("Docs path", config.docsPath || "Docs");
   kv("Output path", config.outputPath || "./");
+  kv("UI theme", config.ui?.theme || "rich");
+  kv("UI compact", config.ui?.compact || "auto");
+  kv("UI animations", String(config.ui?.animations ?? true));
 
   if (config.models) {
     section("Model Assignments");
@@ -277,6 +285,9 @@ async function printHelp() {
   console.log(cmd("--dry-run", "Assemble context without launching Ralphy"));
   console.log(cmd("--models", "Reconfigure model assignments (with setup)"));
   console.log(cmd("--verbose", "Show extra detail (doctor, run)"));
+  console.log(cmd("--ui-theme=<rich|minimal>", "UI theme style"));
+  console.log(cmd("--ui-compact=<auto|on|off>", "Compact layout behavior"));
+  console.log(cmd("--ui-animations=<true|false>", "Enable animated UI cues"));
   console.log(cmd("--version, -v", "Show version"));
   console.log();
 
@@ -316,6 +327,49 @@ async function loadPkg() {
   }
 }
 
+function loadUIOptions(targetDir, cliFlags) {
+  const configUi = readProjectUiConfig(targetDir);
+  const flagUi = parseUiFlags(cliFlags);
+  return { ...configUi, ...flagUi };
+}
+
+function readProjectUiConfig(targetDir) {
+  try {
+    const configPath = resolve(targetDir, ".opencode", "config.json");
+    if (!existsSync(configPath)) return {};
+    const parsed = JSON.parse(readFileSync(configPath, "utf8"));
+    if (!parsed?.ui || typeof parsed.ui !== "object") return {};
+    return {
+      theme: parsed.ui.theme,
+      compact: parsed.ui.compact,
+      animations: parsed.ui.animations,
+    };
+  } catch {
+    return {};
+  }
+}
+
+function parseUiFlags(cliFlags) {
+  const out = {};
+
+  if (cliFlags["ui-theme"]) out.theme = String(cliFlags["ui-theme"]);
+  if (cliFlags["ui-compact"]) out.compact = String(cliFlags["ui-compact"]);
+  if (cliFlags["ui-animations"] !== undefined) {
+    const val = parseBoolFlag(cliFlags["ui-animations"]);
+    if (val !== null) out.animations = val;
+  }
+
+  return out;
+}
+
+function parseBoolFlag(value) {
+  if (typeof value === "boolean") return value;
+  const v = String(value).trim().toLowerCase();
+  if (["1", "true", "yes", "y", "on"].includes(v)) return true;
+  if (["0", "false", "no", "n", "off"].includes(v)) return false;
+  return null;
+}
+
 // ── Run ────────────────────────────────────────────────────────────────────
 main().catch((err) => {
   import("../src/lib/ui.js").then(({ error: uiError }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-auto-agent",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Scaffold and run an AI agent team powered by Ralphy + OpenCode. Presets for Java, Spring Boot, Next.js, and more.",
   "license": "MIT",
   "type": "module",

package/src/commands/doctor.js

@@ -146,6 +146,13 @@ export async function doctor(targetDir, { verbose = false } = {}) {
     } else {
       softWarn("Docs directory", `${config.docsPath || "Docs"} not found (optional)`);
     }
+
+    if (config.ui && typeof config.ui === "object") {
+      const theme = config.ui.theme || "rich";
+      const compact = config.ui.compact || "auto";
+      const animations = config.ui.animations ?? true;
+      pass("UI config", `theme=${theme}, compact=${compact}, animations=${String(animations)}`);
+    }
   }
 
   // ── 4. Model validation against live discovery ────────────────────────────

package/src/commands/init.js

@@ -272,6 +272,11 @@ function buildProjectConfig(preset, modelMapping) {
       workflowSteps: WORKFLOW_STEPS,
       requirePlanApproval: false,
     },
+    ui: {
+      theme: "rich",
+      compact: "auto",
+      animations: true,
+    },
   };
 }
 

package/src/commands/setup.js

@@ -196,6 +196,11 @@ export async function setup(targetDir, preset, { models: reconfigModels, nonInte
   config.preset = chosenPreset;
   config.models = modelMapping;
   config.version = SCHEMA_VERSION;
+  config.ui = config.ui || {
+    theme: "rich",
+    compact: "auto",
+    animations: true,
+  };
 
   // Update agents section
   if (!config.agents) config.agents = {};

package/src/lib/ui.js

@@ -54,6 +54,22 @@ const BOX = {
   tee_r: "\u251c", tee_l: "\u2524",
 };
 
+const UI_DEFAULTS = {
+  theme: "rich",
+  compact: "auto",
+  animations: true,
+};
+
+const uiState = { ...UI_DEFAULTS };
+let sectionCounter = 0;
+
+export function configureUI(options = {}) {
+  const next = { ...uiState, ...options };
+  uiState.theme = next.theme === "minimal" ? "minimal" : "rich";
+  uiState.compact = ["on", "off", "auto"].includes(next.compact) ? next.compact : "auto";
+  uiState.animations = Boolean(next.animations);
+}
+
 // ── Layout helpers ─────────────────────────────────────────────────────────
 
 /**
@@ -75,19 +91,24 @@ export function hr(char = BOX.h, width) {
  * Print a styled header banner (OpenCode-style).
  */
 export function banner(title, subtitle) {
-  const w = Math.min(termWidth(), 72);
-  const pad = (s, len) => {
-    const stripped = stripAnsi(s);
-    return s + " ".repeat(Math.max(0, len - stripped.length));
-  };
+  const indent = uiIndent();
+  if (uiState.theme === "minimal") {
+    console.log();
+    console.log(`${indent}${c.bold(title)}`);
+    if (subtitle) console.log(`${indent}${c.dim(subtitle)}`);
+    console.log();
+    return;
+  }
+
+  const innerWidth = Math.max(32, Math.min(termWidth() - 8, 72));
 
   console.log();
-  console.log(c.cyan(`  ${BOX.tl}${BOX.h.repeat(w - 4)}${BOX.tr}`));
-  console.log(c.cyan(`  ${BOX.v}`) + " " + c.bold(c.brightCyan(pad(title, w - 6))) + c.cyan(BOX.v));
+  console.log(c.cyan(`${indent}${BOX.tl}${BOX.h.repeat(innerWidth + 2)}${BOX.tr}`));
+  console.log(c.cyan(`${indent}${BOX.v}`) + ` ${c.bold(c.brightCyan(centerAnsi(title, innerWidth)))} ` + c.cyan(BOX.v));
   if (subtitle) {
-    console.log(c.cyan(`  ${BOX.v}`) + " " + c.gray(pad(subtitle, w - 6)) + c.cyan(BOX.v));
+    console.log(c.cyan(`${indent}${BOX.v}`) + ` ${c.gray(centerAnsi(subtitle, innerWidth))} ` + c.cyan(BOX.v));
   }
-  console.log(c.cyan(`  ${BOX.bl}${BOX.h.repeat(w - 4)}${BOX.br}`));
+  console.log(c.cyan(`${indent}${BOX.bl}${BOX.h.repeat(innerWidth + 2)}${BOX.br}`));
   console.log();
 }
 
@@ -95,9 +116,22 @@ export function banner(title, subtitle) {
  * Print a section header.
  */
 export function section(title) {
+  const indent = uiIndent();
+  if (uiState.theme === "minimal") {
+    console.log();
+    console.log(`${indent}${c.bold(title)}`);
+    console.log(`${indent}${"-".repeat(Math.max(4, stripAnsi(title).length))}`);
+    return;
+  }
+
+  const frame = ["◐", "◓", "◑", "◒"][sectionCounter++ % 4];
   console.log();
-  console.log(`  ${c.bold(c.cyan(title))}`);
-  console.log(`  ${c.gray(BOX.h.repeat(stripAnsi(title).length + 2))}`);
+  if (supportsAnimatedUi()) {
+    stdout.write(`\x1b[2K${indent}${c.gray(frame)} ${c.gray(title)}\r`);
+  }
+  const heading = `${c.brightCyan(frame)} ${c.bold(c.cyan(title))}`;
+  console.log(`${indent}${heading}`);
+  console.log(`${indent}${c.gray(BOX.h.repeat(stripAnsi(title).length + 2))}`);
 }
 
 /**
@@ -114,25 +148,29 @@ export function status(icon, label, detail) {
     star:  c.yellow("\u2605"),
   };
   const i = icons[icon] || icon;
+  const indent = uiIndent();
+  const maxLabel = Math.max(12, Math.min(isCompactMode() ? 36 : 46, termWidth() - (isCompactMode() ? 18 : 26)));
+  const labelText = padAnsiEnd(truncateAnsi(label, maxLabel), maxLabel);
   const d = detail ? c.gray(` ${detail}`) : "";
-  console.log(`  ${i} ${label}${d}`);
+  console.log(`${indent}${i} ${labelText}${d}`);
 }
 
 /**
  * Print a key-value pair.
  */
 export function kv(key, value) {
-  console.log(`  ${c.gray(key + ":")} ${c.white(String(value))}`);
+  console.log(`${uiIndent()}${c.gray(key + ":")} ${c.white(String(value))}`);
 }
 
 /**
  * Print an error block.
  */
 export function error(message, hint) {
+  const indent = uiIndent();
   console.log();
-  console.log(`  ${c.bgRed(" ERROR ")} ${c.red(message)}`);
+  console.log(`${indent}${c.bgRed(" ERROR ")} ${c.red(message)}`);
   if (hint) {
-    console.log(`          ${c.gray(hint)}`);
+    console.log(`${indent}${" ".repeat(8)}${c.gray(hint)}`);
   }
   console.log();
 }
@@ -141,9 +179,10 @@ export function error(message, hint) {
  * Print a warning block.
  */
 export function warn(message, hint) {
-  console.log(`  ${c.bgYellow(" WARN ")} ${c.yellow(message)}`);
+  const indent = uiIndent();
+  console.log(`${indent}${c.bgYellow(" WARN ")} ${c.yellow(message)}`);
   if (hint) {
-    console.log(`         ${c.gray(hint)}`);
+    console.log(`${indent}${" ".repeat(7)}${c.gray(hint)}`);
   }
 }
 
@@ -151,8 +190,9 @@ export function warn(message, hint) {
  * Print a success block.
  */
 export function success(message) {
+  const indent = uiIndent();
   console.log();
-  console.log(`  ${c.bgGreen(" OK ")} ${c.green(message)}`);
+  console.log(`${indent}${c.bgGreen(" OK ")} ${c.green(message)}`);
   console.log();
 }
 
@@ -160,14 +200,26 @@ export function success(message) {
  * Print a boxed list of items.
  */
 export function boxList(title, items) {
-  const w = Math.min(termWidth(), 68);
+  const indent = uiIndent();
+  if (uiState.theme === "minimal") {
+    console.log();
+    console.log(`${indent}${c.bold(title)}`);
+    for (const item of items) {
+      console.log(`${indent}- ${truncateAnsi(item, Math.max(20, termWidth() - indent.length - 4))}`);
+    }
+    return;
+  }
+
+  const innerWidth = Math.max(26, Math.min(termWidth() - 8, 68));
   console.log();
-  console.log(c.gray(`  ${BOX.tl}${BOX.h} ${c.bold(c.white(title))} ${c.gray(BOX.h.repeat(Math.max(0, w - stripAnsi(title).length - 6)))}${c.gray(BOX.tr)}`));
+  console.log(c.gray(`${indent}${BOX.tl}${BOX.h.repeat(innerWidth + 2)}${BOX.tr}`));
+  console.log(c.gray(`${indent}${BOX.v}`) + ` ${c.bold(c.white(centerAnsi(title, innerWidth)))} ` + c.gray(BOX.v));
+  console.log(c.gray(`${indent}${BOX.tee_r}${BOX.h.repeat(innerWidth + 2)}${BOX.tee_l}`));
   for (const item of items) {
-    const line = `  ${c.gray(BOX.v)} ${item}`;
-    console.log(line + " ".repeat(Math.max(0, w - stripAnsi(line).length + 2)) + c.gray(BOX.v));
+    const line = padAnsiEnd(truncateAnsi(item, innerWidth), innerWidth);
+    console.log(c.gray(`${indent}${BOX.v}`) + ` ${line} ` + c.gray(BOX.v));
   }
-  console.log(c.gray(`  ${BOX.bl}${BOX.h.repeat(w - 2)}${BOX.br}`));
+  console.log(c.gray(`${indent}${BOX.bl}${BOX.h.repeat(innerWidth + 2)}${BOX.br}`));
 }
 
 // ── Spinner ────────────────────────────────────────────────────────────────
@@ -177,22 +229,27 @@ const SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u283
 export function createSpinner(text) {
   let i = 0;
   let interval = null;
+  const colors = uiState.theme === "minimal"
+    ? [c.gray]
+    : [c.cyan, c.brightCyan, c.blue, c.magenta];
 
   return {
     start() {
       interval = setInterval(() => {
-        const frame = c.cyan(SPINNER_FRAMES[i % SPINNER_FRAMES.length]);
-        stdout.write(`\r  ${frame} ${text}`);
+        const colorFn = colors[i % colors.length];
+        const frame = colorFn(SPINNER_FRAMES[i % SPINNER_FRAMES.length]);
+        const trail = supportsAnimatedUi() && uiState.theme !== "minimal" ? c.gray(" •") : "";
+        stdout.write(`\r${uiIndent()}${frame} ${text}${trail}`);
         i++;
       }, 80);
     },
     stop(finalText) {
       if (interval) clearInterval(interval);
-      stdout.write(`\r  ${c.green("\u2713")} ${finalText || text}\n`);
+      stdout.write(`\r${uiIndent()}${c.green("\u2713")} ${finalText || text}\n`);
     },
     fail(finalText) {
       if (interval) clearInterval(interval);
-      stdout.write(`\r  ${c.red("\u2717")} ${finalText || text}\n`);
+      stdout.write(`\r${uiIndent()}${c.red("\u2717")} ${finalText || text}\n`);
     },
   };
 }
@@ -206,7 +263,7 @@ export async function confirm(question, defaultYes = true) {
   const rl = createInterface({ input: stdin, output: stdout });
   const hint = defaultYes ? "Y/n" : "y/N";
   return new Promise((resolve) => {
-    rl.question(`  ${c.cyan("?")} ${question} ${c.gray(`(${hint})`)} `, (answer) => {
+    rl.question(`${uiIndent()}${c.cyan("?")} ${question} ${c.gray(`(${hint})`)} `, (answer) => {
       rl.close();
       const a = answer.trim().toLowerCase();
       if (a === "") resolve(defaultYes);
@@ -222,7 +279,7 @@ export async function input(question, defaultValue = "") {
   const rl = createInterface({ input: stdin, output: stdout });
   const hint = defaultValue ? c.gray(` (${defaultValue})`) : "";
   return new Promise((resolve) => {
-    rl.question(`  ${c.cyan("?")} ${question}${hint} `, (answer) => {
+    rl.question(`${uiIndent()}${c.cyan("?")} ${question}${hint} `, (answer) => {
       rl.close();
       resolve(answer.trim() || defaultValue);
     });
@@ -258,7 +315,7 @@ export async function select(title, items) {
         stdout.write(`\x1b[${totalLines}A`);
       }
 
-      stdout.write(`\x1b[2K  ${c.cyan("?")} ${c.bold(title)}\n`);
+      stdout.write(`\x1b[2K${uiIndent()}${c.cyan("?")} ${c.bold(title)}\n`);
       for (let i = 0; i < visible.length; i++) {
         const itemIndex = start + i;
         const item = visible[i];
@@ -266,13 +323,13 @@ export async function select(title, items) {
         const pointer = isSelected ? c.cyan("\u25B6") : " ";
         const label = isSelected ? c.cyan(item.label) : c.white(item.label);
         const hint = item.hint ? c.gray(` ${item.hint}`) : "";
-        stdout.write(`\x1b[2K  ${pointer} ${label}${hint}\n`);
+        stdout.write(`\x1b[2K${uiIndent()}${pointer} ${label}${hint}\n`);
       }
 
       const range = `${start + 1}-${end}`;
       const moreAbove = start > 0 ? c.gray("↑") : c.gray(" ");
       const moreBelow = end < items.length ? c.gray("↓") : c.gray(" ");
-      stdout.write(`\x1b[2K  ${c.gray(`[${range}/${items.length}] ${moreAbove}${moreBelow} arrows/jk + enter`)}` + "\n");
+      stdout.write(`\x1b[2K${uiIndent()}${c.gray(`[${range}/${items.length}] ${moreAbove}${moreBelow} arrows/jk + enter`)}` + "\n");
       hasRendered = true;
     };
 
@@ -300,7 +357,7 @@ export async function select(title, items) {
           stdout.write("\x1b[2K\n");
         }
         stdout.write(`\x1b[${totalLines}A`);
-        stdout.write(`\x1b[2K  ${c.green("\u2713")} ${c.bold(title)} ${c.cyan(items[cursor].label)}\n`);
+        stdout.write(`\x1b[2K${uiIndent()}${c.green("\u2713")} ${c.bold(title)} ${c.cyan(items[cursor].label)}\n`);
         resolve(items[cursor]);
         return;
       }
@@ -350,7 +407,7 @@ export async function multiSelect(title, items) {
         stdout.write(`\x1b[${totalLines}A`);
       }
 
-      stdout.write(`\x1b[2K  ${c.cyan("?")} ${c.bold(title)} ${c.gray("(space to toggle)")}\n`);
+      stdout.write(`\x1b[2K${uiIndent()}${c.cyan("?")} ${c.bold(title)} ${c.gray("(space to toggle)")}\n`);
       for (let i = 0; i < visible.length; i++) {
         const itemIndex = start + i;
         const item = visible[i];
@@ -360,13 +417,13 @@ export async function multiSelect(title, items) {
         const check = isSelected ? c.green("\u25C9") : c.gray("\u25CB");
         const label = isCursor ? c.cyan(item.label) : c.white(item.label);
         const hint = item.hint ? c.gray(` ${item.hint}`) : "";
-        stdout.write(`\x1b[2K  ${pointer} ${check} ${label}${hint}\n`);
+        stdout.write(`\x1b[2K${uiIndent()}${pointer} ${check} ${label}${hint}\n`);
       }
 
       const range = `${start + 1}-${end}`;
       const moreAbove = start > 0 ? c.gray("↑") : c.gray(" ");
       const moreBelow = end < items.length ? c.gray("↓") : c.gray(" ");
-      stdout.write(`\x1b[2K  ${c.gray(`[${range}/${items.length}] ${moreAbove}${moreBelow} arrows/jk + space + enter`)}` + "\n");
+      stdout.write(`\x1b[2K${uiIndent()}${c.gray(`[${range}/${items.length}] ${moreAbove}${moreBelow} arrows/jk + space + enter`)}` + "\n");
       hasRendered = true;
     };
 
@@ -394,7 +451,7 @@ export async function multiSelect(title, items) {
           stdout.write("\x1b[2K\n");
         }
         stdout.write(`\x1b[${totalLines}A`);
-        stdout.write(`\x1b[2K  ${c.green("\u2713")} ${c.bold(title)} ${c.cyan(result.map((r) => r.label).join(", "))}\n`);
+        stdout.write(`\x1b[2K${uiIndent()}${c.green("\u2713")} ${c.bold(title)} ${c.cyan(result.map((r) => r.label).join(", "))}\n`);
         resolve(result);
         return;
       }
@@ -423,18 +480,27 @@ export async function multiSelect(title, items) {
  * @param {string[][]} rows
  */
 export function table(headers, rows) {
+  const indent = uiIndent();
+  const compact = isCompactMode();
   const colWidths = headers.map((h, i) => {
     const maxData = rows.reduce((max, row) => Math.max(max, stripAnsi(String(row[i] || "")).length), 0);
-    return Math.max(stripAnsi(h).length, maxData) + 2;
+    return Math.max(stripAnsi(h).length, maxData) + (compact ? 1 : 2);
   });
 
-  const headerLine = headers.map((h, i) => c.bold(h.padEnd(colWidths[i]))).join(c.gray(" \u2502 "));
-  console.log(`  ${headerLine}`);
-  console.log(`  ${colWidths.map((w) => c.gray(BOX.h.repeat(w))).join(c.gray("\u2500\u253c\u2500"))}`);
+  fitColumnsToViewport(colWidths, headers, rows, compact);
+
+  const colSep = compact ? c.gray("\u2502") : c.gray(" \u2502 ");
+  const ruleSep = compact ? c.gray("\u253c") : c.gray("\u2500\u253c\u2500");
+
+  const headerLine = headers.map((h, i) => c.bold(padAnsiEnd(truncateAnsi(h, colWidths[i]), colWidths[i]))).join(colSep);
+  console.log(`${indent}${headerLine}`);
+  console.log(`${indent}${colWidths.map((w) => c.gray(BOX.h.repeat(w))).join(ruleSep)}`);
 
   for (const row of rows) {
-    const line = row.map((cell, i) => String(cell || "").padEnd(colWidths[i])).join(c.gray(" \u2502 "));
-    console.log(`  ${line}`);
+    const line = row
+      .map((cell, i) => padAnsiEnd(truncateAnsi(cell, colWidths[i]), colWidths[i]))
+      .join(colSep);
+    console.log(`${indent}${line}`);
   }
 }
 
@@ -448,6 +514,76 @@ export function stripAnsi(str) {
   return str.replace(/\x1b\[[0-9;]*m/g, "");
 }
 
+function centerAnsi(value, width) {
+  const text = String(value || "");
+  const visible = stripAnsi(text).length;
+  if (visible >= width) return text;
+  const left = Math.floor((width - visible) / 2);
+  const right = width - visible - left;
+  return " ".repeat(left) + text + " ".repeat(right);
+}
+
+function truncateAnsi(value, maxLen = 40) {
+  const text = String(value || "");
+  const plain = stripAnsi(text);
+  if (plain.length <= maxLen) return text;
+  return `${plain.slice(0, maxLen - 1)}…`;
+}
+
+function padAnsiEnd(value, width) {
+  const text = String(value || "");
+  const visible = stripAnsi(text).length;
+  if (visible >= width) return text;
+  return text + " ".repeat(width - visible);
+}
+
+function fitColumnsToViewport(colWidths, headers, rows, compact) {
+  const sepWidth = compact ? 1 : 3;
+  const indentWidth = uiIndent().length;
+  const minCol = compact ? 6 : 8;
+  const maxLine = Math.max(32, termWidth() - indentWidth - 1);
+
+  const total = () => colWidths.reduce((sum, w) => sum + w, 0) + sepWidth * Math.max(0, colWidths.length - 1);
+  if (total() <= maxLine) return;
+
+  const priorities = headers.map((_, i) => i).sort((a, b) => {
+    const wa = colWidths[a];
+    const wb = colWidths[b];
+    return wb - wa;
+  });
+
+  while (total() > maxLine) {
+    let changed = false;
+    for (const idx of priorities) {
+      if (colWidths[idx] > minCol) {
+        colWidths[idx]--;
+        changed = true;
+      }
+      if (total() <= maxLine) break;
+    }
+    if (!changed) break;
+  }
+
+  if (total() > maxLine && rows.length > 0) {
+    const last = colWidths.length - 1;
+    colWidths[last] = Math.max(minCol, maxLine - (total() - colWidths[last]));
+  }
+}
+
+function isCompactMode() {
+  if (uiState.compact === "on") return true;
+  if (uiState.compact === "off") return false;
+  return termWidth() < 96;
+}
+
+function uiIndent() {
+  return isCompactMode() ? " " : "  ";
+}
+
+function supportsAnimatedUi() {
+  return Boolean(uiState.animations && stdin.isTTY && stdout.isTTY);
+}
+
 /**
  * Truncate a string to maxLen, adding ellipsis if needed.
  */
@@ -510,30 +646,30 @@ function supportsInteractiveMenu() {
 }
 
 async function selectFallback(title, items) {
-  console.log(`  ${c.cyan("?")} ${c.bold(title)}`);
+  console.log(`${uiIndent()}${c.cyan("?")} ${c.bold(title)}`);
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     const hint = item.hint ? ` ${c.gray(item.hint)}` : "";
-    console.log(`    ${String(i + 1).padStart(2, " ")}) ${item.label}${hint}`);
+    console.log(`${uiIndent()}  ${String(i + 1).padStart(2, " ")}) ${item.label}${hint}`);
   }
   const answer = await input("Choose an option number", "1");
   const idx = clampIndex(parseInt(answer, 10) - 1, items.length);
-  console.log(`  ${c.green("\u2713")} ${c.bold(title)} ${c.cyan(items[idx].label)}`);
+  console.log(`${uiIndent()}${c.green("\u2713")} ${c.bold(title)} ${c.cyan(items[idx].label)}`);
   return items[idx];
 }
 
 async function multiSelectFallback(title, items) {
-  console.log(`  ${c.cyan("?")} ${c.bold(title)}`);
+  console.log(`${uiIndent()}${c.cyan("?")} ${c.bold(title)}`);
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     const mark = item.selected ? "*" : " ";
     const hint = item.hint ? ` ${c.gray(item.hint)}` : "";
-    console.log(`    ${String(i + 1).padStart(2, " ")}) [${mark}] ${item.label}${hint}`);
+    console.log(`${uiIndent()}  ${String(i + 1).padStart(2, " ")}) [${mark}] ${item.label}${hint}`);
   }
   const answer = await input("Choose option numbers (comma-separated)", "1");
   const indexes = parseMultiNumberInput(answer, items.length);
   const selected = indexes.map((i) => items[i]);
-  console.log(`  ${c.green("\u2713")} ${c.bold(title)} ${c.cyan(selected.map((it) => it.label).join(", "))}`);
+  console.log(`${uiIndent()}${c.green("\u2713")} ${c.bold(title)} ${c.cyan(selected.map((it) => it.label).join(", "))}`);
   return selected;
 }
 

package/src/lib/ui.test.js

@@ -1,7 +1,7 @@
 import test from "node:test";
 import assert from "node:assert/strict";
 
-import { buildSelectedIndexSet, getVisibleWindow, getMaxVisibleMenuItems } from "./ui.js";
+import { buildSelectedIndexSet, getVisibleWindow, getMaxVisibleMenuItems, table, c, stripAnsi } from "./ui.js";
 
 test("buildSelectedIndexSet keeps original indexes", () => {
   const items = [
@@ -39,3 +39,35 @@ test("getMaxVisibleMenuItems enforces safe min/max", () => {
   assert.equal(getMaxVisibleMenuItems(12), 6);
   assert.equal(getMaxVisibleMenuItems(40), 20);
 });
+
+test("table aligns ANSI-styled cells", () => {
+  const output = [];
+  const originalLog = console.log;
+  console.log = (line) => output.push(stripAnsi(String(line)));
+
+  try {
+    table(
+      ["Agent Role", "Model", "Mode"],
+      [
+        [c.bold("orchestrator"), c.cyan("google/gemini-3-pro"), c.gray("primary")],
+        [c.bold("qa"), c.cyan("openai/gpt-5.3-codex"), c.gray("subagent")],
+      ]
+    );
+  } finally {
+    console.log = originalLog;
+  }
+
+  assert.ok(output.length >= 4);
+  const firstRow = output[2];
+  const secondRow = output[3];
+
+  const firstSeps = [...firstRow.matchAll(/│/g)].map((m) => m.index);
+  const secondSeps = [...secondRow.matchAll(/│/g)].map((m) => m.index);
+
+  assert.equal(firstSeps.length, 2);
+  assert.equal(secondSeps.length, 2);
+  assert.deepEqual(firstSeps, secondSeps);
+  assert.ok(firstRow.includes("orchestrator"));
+  assert.ok(firstRow.includes("google/gemini-3-pro"));
+  assert.ok(secondRow.includes("openai/gpt-5.3-codex"));
+});