@bhooai/nexus-cli 2.0.3 → 2.0.5

package/src/devPanel.ts

@@ -1,49 +1,31 @@
 /**
- * devPanel — full-screen Nexus Console TUI.
+ * devPanel — full-screen Nexus Console TUI (redesigned).
  *
- * Three panes:
- *   1. Services — managed by ServiceManager (start/stop/restart/logs)
- *   2. Commands — palette auto-built from the command registry (getCommands())
- *   3. Output — selected service logs OR command output
+ * Two-pane layout:
+ *   LEFT   tab rail — Services · Logs · Commands · Features · Settings
+ *   RIGHT  content for the active tab
  *
  * Keybindings:
- *   ↑/↓        move selection (within active list)
- *   Enter      run selected command / start selected service
- *   Tab        switch active pane (services ⇄ commands)
- *   s / t / r  start / stop / restart selected service
- *   l          cycle log source (service logs ⇄ command output)
- *   q / Esc    quit (kills all services)
- *   ?          help
+ *   Tab / ← / →   switch tab
+ *   ↑/↓           move selection in the active tab
+ *   Enter         run selected command / start service / install feature
+ *   s / t / r     start / stop / restart selected service
+ *   l             jump to Logs
+ *   a             install selected feature (Features tab)
+ *   d             run doctor (Settings tab)
+ *   ?             help
+ *   q / Esc       quit (kills all services)
  *
- * Zero dependencies: raw ANSI + readline keypress.
+ * Zero dependencies: raw ANSI + readline keypress via src/tui.ts.
  */
-import { stdin as input, stdout as output } from 'node:process';
-import { spawn } from 'node:child_process';
 import { existsSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname, join } from 'node:path';
-import * as readline from 'node:readline';
+import { join } from 'node:path';
+import { stdout as output } from 'node:process';
+import { ANSI, Tui, stripAnsi, resolveCliBin, spawnNode, type KeyInfo } from './tui.js';
+import { fitCell, clipVisible, divider, boxAround } from './layout.js';
 import { getCommands, runCommand } from './dispatcher.js';
 import { ServiceManager } from './devServiceManager.js';
-
-const ANSI = {
-  reset: '\x1b[0m',
-  bold: '\x1b[1m',
-  dim: '\x1b[2m',
-  clear: '\x1b[2J\x1b[H',
-  altOn: '\x1b[?1049h',
-  altOff: '\x1b[?1049l',
-  hideCursor: '\x1b[?25l',
-  showCursor: '\x1b[?25h',
-  move: (r: number, c: number) => `\x1b[${r};${c}H`,
-  cyan: '\x1b[36m',
-  green: '\x1b[32m',
-  yellow: '\x1b[33m',
-  red: '\x1b[31m',
-  blue: '\x1b[34m',
-  magenta: '\x1b[35m',
-  dimGray: '\x1b[90m',
-};
+import { FEATURES, detectFeatures, installFeature, readRegistry } from './features.js';
 
 export interface DevPanelOptions {
   services: ServiceManager;
@@ -51,12 +33,27 @@ export interface DevPanelOptions {
   onQuit?: () => void;
 }
 
-interface CommandItem {
-  name: string;
-  label: string;
-  desc: string;
-  needsArgs: boolean;
-  interactive: boolean;
+type Tab = 'services' | 'logs' | 'commands' | 'features' | 'settings';
+
+const TABS: Array<{ id: Tab; label: string }> = [
+  { id: 'services', label: 'Services' },
+  { id: 'logs', label: 'Logs' },
+  { id: 'commands', label: 'Commands' },
+  { id: 'features', label: 'Features' },
+  { id: 'settings', label: 'Settings' },
+];
+
+/** Per-tab color theme: active tab fills with `bg` + `fg` text; content tints with `accent`. */
+const TAB_THEME: Record<Tab, { bg: string; fg: string; accent: string }> = {
+  services:  { bg: ANSI.bgCyan,    fg: ANSI.black, accent: ANSI.cyan },
+  logs:      { bg: ANSI.bgYellow,  fg: ANSI.black, accent: ANSI.yellow },
+  commands:  { bg: ANSI.bgMagenta, fg: ANSI.white, accent: ANSI.magenta },
+  features:  { bg: ANSI.bgGreen,   fg: ANSI.black, accent: ANSI.green },
+  settings:  { bg: ANSI.bgBlue,    fg: ANSI.white, accent: ANSI.blue },
+};
+
+function tabAccent(tab: Tab): string {
+  return TAB_THEME[tab]?.accent ?? ANSI.cyan;
 }
 
 /** Commands that need a real TTY (their own prompts) — suspend the panel. */
@@ -68,35 +65,394 @@ const ARG_COMMANDS = new Set([
   'make:middleware', 'make:validator', 'make:job', 'make:event', 'make:listener',
   'make:policy', 'make:resource', 'make:request', 'make:mail', 'make:room',
   'make:subgraph', 'make:seeder', 'make:migration', 'make:provider', 'make:plugin',
-  'db:seed', 'db:migrate', 'db:rollback', 'queue:retry',
+  'db:seed', 'db:migrate', 'db:rollback', 'queue:retry', 'add',
 ]);
 
+interface CommandItem {
+  name: string;
+  desc: string;
+  needsArgs: boolean;
+  interactive: boolean;
+}
+
+interface PanelState {
+  tab: Tab;
+  svcIndex: number;
+  cmdIndex: number;
+  featIndex: number;
+  installed: Set<string>;
+  featureMsg: string[];
+  settingsLines: string[];
+  commandOutput: string[];
+  argMode: { cmd: CommandItem; buffer: string } | null;
+  showHelp: boolean;
+  confirmQuit: boolean;
+  quitIndex: number;
+  quit: boolean;
+}
+
+export async function startDevPanel(opts: DevPanelOptions): Promise<void> {
+  const { services } = opts;
+  const projectRoot = process.cwd();
+  const commands = commandItems();
+  const grouped = groupCommands(commands);
+  const palette = flattenPalette(grouped);
+
+  const installed = await detectFeatures(projectRoot);
+  const state: PanelState = {
+    tab: 'services',
+    svcIndex: 0,
+    cmdIndex: 0,
+    featIndex: 0,
+    installed,
+    featureMsg: [],
+    settingsLines: [],
+    commandOutput: [],
+    argMode: null,
+    showHelp: false,
+    confirmQuit: false,
+    quitIndex: 0,
+    quit: false,
+  };
+
+  let lastRender = 0;
+
+  function throttledRender(): void {
+    const now = Date.now();
+    if (now - lastRender < 80) return;
+    lastRender = now;
+    render();
+  }
+
+  function render(): void {
+    if (state.quit) return;
+    tui.draw(buildRows(state, services, palette, projectRoot), helpText(state));
+  }
+
+  const tui = new Tui((str, key) => {
+    onKey(state, str, key, { services, palette, projectRoot, tui, redraw: render });
+  });
+
+  // wire service log redraws
+  services.onLog = () => throttledRender();
+
+  await refreshSettings(state, projectRoot, render);
+  tui.enter();
+  render();
+
+  await tui.wait();
+  tui.exit();
+  services.onLog = null;
+  opts.onQuit?.();
+}
+
+interface Ctx {
+  services: ServiceManager;
+  palette: PaletteRow[];
+  projectRoot: string;
+  tui: Tui;
+  redraw: () => void;
+}
+
+function onKey(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
+  // ---- quit confirmation card ----
+  if (state.confirmQuit) {
+    if (key.name === 'escape' || key.name === 'q') {
+      state.confirmQuit = false;
+      ctx.redraw();
+      return;
+    }
+    if (key.name === 'up' || key.name === 'left') {
+      state.quitIndex = 0;
+      ctx.redraw();
+      return;
+    }
+    if (key.name === 'down' || key.name === 'right') {
+      state.quitIndex = 1;
+      ctx.redraw();
+      return;
+    }
+    if (key.name === 'return' || key.name === 'enter') {
+      if (state.quitIndex === 0) {
+        state.quit = true; // Yes — quit
+        ctx.tui.quit = true;
+      } else {
+        state.confirmQuit = false; // No — stay
+      }
+      return;
+    }
+    if (key.name === 'c' && key.ctrl) {
+      // Second Ctrl+C inside the card = force quit immediately.
+      state.quit = true;
+      ctx.tui.quit = true;
+      return;
+    }
+    return;
+  }
+
+  if (state.argMode) {
+    handleArgMode(state, str, key, ctx);
+    ctx.redraw();
+    return;
+  }
+  if (key.name === 'c' && key.ctrl) {
+    state.confirmQuit = true;
+    state.quitIndex = 0;
+    ctx.redraw();
+    return;
+  }
+  if (key.name === 'q') {
+    state.confirmQuit = true;
+    state.quitIndex = 0;
+    ctx.redraw();
+    return;
+  }
+  if (key.name === 'escape') {
+    if (state.showHelp) { state.showHelp = false; ctx.redraw(); }
+    else { state.confirmQuit = true; state.quitIndex = 0; ctx.redraw(); }
+    return;
+  }
+  if (key.name === '?') {
+    state.showHelp = !state.showHelp;
+    ctx.redraw();
+    return;
+  }
+  if (state.showHelp) return;
+
+  switch (key.name) {
+    case 'tab': {
+      const idx = TABS.findIndex((t) => t.id === state.tab);
+      state.tab = TABS[(idx + 1) % TABS.length]?.id ?? 'services';
+      if (state.tab === 'settings') void refreshSettings(state, ctx.projectRoot, ctx.redraw);
+      break;
+    }
+    case 'left': {
+      const idx = TABS.findIndex((t) => t.id === state.tab);
+      state.tab = TABS[(idx - 1 + TABS.length) % TABS.length]?.id ?? 'services';
+      if (state.tab === 'settings') void refreshSettings(state, ctx.projectRoot, ctx.redraw);
+      break;
+    }
+    case 'right': {
+      const idx = TABS.findIndex((t) => t.id === state.tab);
+      state.tab = TABS[(idx + 1) % TABS.length]?.id ?? 'services';
+      if (state.tab === 'settings') void refreshSettings(state, ctx.projectRoot, ctx.redraw);
+      break;
+    }
+    case 'up':
+      move(state, -1, ctx);
+      break;
+    case 'down':
+      move(state, 1, ctx);
+      break;
+    case 'return':
+    case 'enter':
+      void activate(state, ctx);
+      break;
+    case 's':
+      ctx.services.start(ctx.services.services[state.svcIndex]?.name ?? '');
+      break;
+    case 't':
+      ctx.services.stop(ctx.services.services[state.svcIndex]?.name ?? '');
+      break;
+    case 'r':
+      ctx.services.restart(ctx.services.services[state.svcIndex]?.name ?? '');
+      break;
+    case 'l':
+      state.tab = 'logs';
+      break;
+    case 'a':
+      if (state.tab === 'features') void installSelected(state, ctx);
+      break;
+    case 'd':
+      if (state.tab === 'settings') void runSpawned('doctor', [], ctx);
+      break;
+  }
+  ctx.redraw();
+}
+
+function move(state: PanelState, dir: number, ctx: Ctx): void {
+  switch (state.tab) {
+    case 'services':
+    case 'logs':
+      state.svcIndex = clamp(state.svcIndex + dir, 0, Math.max(0, ctx.services.services.length - 1));
+      break;
+    case 'commands':
+      state.cmdIndex = prevSelectable(ctx.palette, state.cmdIndex, dir);
+      break;
+    case 'features':
+      state.featIndex = clamp(state.featIndex + dir, 0, FEATURES.length - 1);
+      break;
+  }
+}
+
+function handleArgMode(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
+  const argMode = state.argMode;
+  if (!argMode) return;
+  if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+    state.argMode = null;
+    return;
+  }
+  if (key.name === 'return' || key.name === 'enter') {
+    const cmd = argMode.cmd;
+    state.argMode = null;
+    void runSelectedCommand(state, cmd, argMode.buffer, ctx);
+    return;
+  }
+  if (key.name === 'backspace') {
+    argMode.buffer = argMode.buffer.slice(0, -1);
+  } else if (str && !key.ctrl && !key.meta) {
+    argMode.buffer += str;
+  }
+}
+
+async function activate(state: PanelState, ctx: Ctx): Promise<void> {
+  switch (state.tab) {
+    case 'services':
+    case 'logs': {
+      const svc = ctx.services.services[state.svcIndex];
+      if (svc) {
+        if (svc.status === 'stopped' || svc.status === 'crashed') ctx.services.start(svc.name);
+        else ctx.services.restart(svc.name);
+      }
+      break;
+    }
+    case 'commands': {
+      const row = ctx.palette[state.cmdIndex];
+      if (row && row.kind === 'cmd') {
+        if (row.cmd.needsArgs) state.argMode = { cmd: row.cmd, buffer: '' };
+        else void runSelectedCommand(state, row.cmd, '', ctx);
+      }
+      break;
+    }
+    case 'features':
+      await installSelected(state, ctx);
+      break;
+  }
+}
+
+async function installSelected(state: PanelState, ctx: Ctx): Promise<void> {
+  const id = FEATURES[state.featIndex]?.id;
+  if (!id) return;
+  if (state.installed.has(id)) {
+    state.featureMsg = [`${id} is already installed.`];
+    ctx.redraw();
+    return;
+  }
+  const res = await installFeature(process.cwd(), id);
+  state.featureMsg = [...res.messages];
+  if (res.addedApps.length > 0) {
+    state.featureMsg.push('', 'Restart the console (q, then npm run dev) to pick up new apps.');
+  }
+  state.installed = await detectFeatures(process.cwd());
+  ctx.redraw();
+}
+
+async function runSelectedCommand(state: PanelState, cmd: CommandItem, inlineArgs: string, ctx: Ctx): Promise<void> {
+  state.commandOutput = [];
+  ctx.redraw();
+
+  if (cmd.interactive) {
+    // Suspend panel → real TTY → resume.
+    ctx.tui.suspend();
+    try {
+      const bin = resolveCliBin();
+      const args = inlineArgs ? [cmd.name, ...inlineArgs.trim().split(/\s+/)] : [cmd.name];
+      await spawnNode(bin, args);
+    } catch (err) {
+      push(state, `✗ ${cmd.name} failed: ${(err as Error).message}`);
+    }
+    ctx.tui.resume();
+    ctx.redraw();
+    return;
+  }
+
+  const argv = inlineArgs ? inlineArgs.trim().split(/\s+/) : [];
+  const origOut = process.stdout.write.bind(process.stdout);
+  const origErr = process.stderr.write.bind(process.stderr);
+  const sink = (chunk: string | Buffer) => {
+    push(state, String(chunk));
+    return true;
+  };
+  (process.stdout as unknown as { write: Function }).write = sink;
+  (process.stderr as unknown as { write: Function }).write = sink;
+  try {
+    await runCommand(cmd.name, argv);
+    push(state, `\n${ANSI.green}✓ ${cmd.name}${ANSI.reset} finished`);
+  } catch (err) {
+    push(state, `\n${ANSI.red}✗ ${cmd.name} failed:${ANSI.reset} ${(err as Error).message}`);
+  } finally {
+    (process.stdout as unknown as { write: Function }).write = origOut;
+    (process.stderr as unknown as { write: Function }).write = origErr;
+  }
+  ctx.redraw();
+}
+
+function push(state: PanelState, text: string): void {
+  for (const line of text.split('\n')) {
+    state.commandOutput.push(stripAnsi(line));
+  }
+  if (state.commandOutput.length > 200) state.commandOutput.splice(0, state.commandOutput.length - 200);
+}
+
+async function runSpawned(cmd: string, args: string[], ctx: Ctx): Promise<void> {
+  ctx.tui.suspend();
+  try {
+    const bin = resolveCliBin();
+    await spawnNode(bin, [cmd, ...args]);
+  } catch { /* ignore */ }
+  ctx.tui.resume();
+  ctx.redraw();
+}
+
+// ---------------------------------------------------------------------------
+// Settings
+// ---------------------------------------------------------------------------
+
+async function refreshSettings(state: PanelState, projectRoot: string, redraw: () => void): Promise<void> {
+  const reg = await readRegistry(projectRoot);
+  const lines: string[] = [
+    `${ANSI.bold}Project${ANSI.reset}`,
+    `  ${projectRoot}`,
+    '',
+    `${ANSI.bold}Ports (.nexus-ports.json)${ANSI.reset}`,
+  ];
+  for (const [app, port] of Object.entries(reg)) {
+    lines.push(`  ${app.padEnd(18)} ${port}`);
+  }
+  if (Object.keys(reg).length === 0) lines.push(`  ${ANSI.dim}No ports registered.${ANSI.reset}`);
+  lines.push('', `${ANSI.bold}Environment${ANSI.reset}`);
+  lines.push(`  ${existsSync(join(projectRoot, '.env')) ? `${ANSI.dim}.env present${ANSI.reset}` : `${ANSI.dim}.env not found${ANSI.reset}`}`);
+  state.settingsLines = lines;
+  redraw();
+}
+
+// ---------------------------------------------------------------------------
+// Commands palette
+// ---------------------------------------------------------------------------
+
 function commandItems(): CommandItem[] {
   return getCommands().map((c) => ({
     name: c.name,
-    label: c.name,
     desc: c.description ?? '',
     needsArgs: ARG_COMMANDS.has(c.name),
     interactive: INTERACTIVE_COMMANDS.has(c.name),
   }));
 }
 
-/** Categorize commands for the palette grouping. */
 function groupOf(name: string): string {
   if (name.startsWith('make:')) return 'make:*';
   if (name.startsWith('db:')) return 'data';
   if (name.startsWith('queue:')) return 'queue';
   if (name.startsWith('plugin')) return 'plugins';
   if (name === 'down' || name === 'up') return 'maintenance';
-  if (['init', 'dev', 'build', 'test', 'doctor'].includes(name)) return 'project';
   return 'project';
 }
 
 const GROUPS = ['project', 'make:*', 'data', 'queue', 'plugins', 'maintenance'];
 
-export async function startDevPanel(opts: DevPanelOptions): Promise<void> {
-  const { services } = opts;
-  const items = commandItems();
+type PaletteRow = { kind: 'header'; label: string } | { kind: 'cmd'; cmd: CommandItem };
+
+function groupCommands(items: CommandItem[]): Map<string, CommandItem[]> {
   const grouped = new Map<string, CommandItem[]>();
   for (const g of GROUPS) grouped.set(g, []);
   for (const item of items) {
@@ -104,337 +460,237 @@ export async function startDevPanel(opts: DevPanelOptions): Promise<void> {
     if (!grouped.has(g)) grouped.set(g, []);
     grouped.get(g)!.push(item);
   }
+  return grouped;
+}
 
-  // Flatten palette (with group header markers).
-  type Row = { kind: 'header'; label: string } | { kind: 'cmd'; cmd: CommandItem };
-  const palette: Row[] = [];
+function flattenPalette(grouped: Map<string, CommandItem[]>): PaletteRow[] {
+  const palette: PaletteRow[] = [];
   for (const g of GROUPS) {
     const list = grouped.get(g) ?? [];
     if (list.length === 0) continue;
     palette.push({ kind: 'header', label: g });
     for (const cmd of list) palette.push({ kind: 'cmd', cmd });
   }
+  return palette;
+}
 
-  // ---- state ----
-  let activePane: 'services' | 'commands' = 'services';
-  let svcIndex = 0;
-  let cmdIndex = 0;
-  let logSource: string | 'commands' = services.services[0]?.name ?? 'commands';
-  let commandOutput: string[] = [];
-  let argMode: { cmd: CommandItem; buffer: string } | null = null;
-  let showHelp = false;
-  let quit = false;
-  let lastRender = 0;
-
-  // ---- raw keyboard ----
-  input.setRawMode?.(true);
-  input.resume?.();
-  output.write(ANSI.altOn + ANSI.hideCursor);
-
-  const keypressHandler = (str: string, key: any) => {
-    if (argMode) {
-      if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
-        argMode = null;
-        render();
-      } else if (key.name === 'return' || key.name === 'enter') {
-        const { cmd, buffer } = argMode;
-        argMode = null;
-        void runSelectedCommand(cmd, buffer);
-      } else if (key.name === 'backspace') {
-        argMode.buffer = argMode.buffer.slice(0, -1);
-      } else if (str && !key.ctrl && !key.meta) {
-        argMode.buffer += str;
-      }
-      render();
-      return;
-    }
-
-    if (key.name === 'c' && key.ctrl) {
-      quit = true;
-      return;
-    }
-    if (key.name === 'escape' || key.name === 'q') {
-      if (showHelp) showHelp = false;
-      else quit = true;
-      return;
-    }
-    if (key.name === '?') {
-      showHelp = !showHelp;
-    }
-    if (showHelp) return;
-
-    switch (key.name) {
-      case 'up':
-        if (activePane === 'services') svcIndex = Math.max(0, svcIndex - 1);
-        else cmdIndex = prevSelectable(cmdIndex, -1, palette);
-        break;
-      case 'down':
-        if (activePane === 'services') svcIndex = Math.min(services.services.length - 1, svcIndex + 1);
-        else cmdIndex = prevSelectable(cmdIndex, 1, palette);
-        break;
-      case 'tab':
-        activePane = activePane === 'services' ? 'commands' : 'services';
-        break;
-      case 'return':
-      case 'enter':
-        if (activePane === 'services') {
-          const svc = services.services[svcIndex];
-          if (svc) {
-            if (svc.status === 'stopped' || svc.status === 'crashed') services.start(svc.name);
-            else services.restart(svc.name);
-          }
-        } else {
-          const row = palette[cmdIndex];
-          if (row && row.kind === 'cmd') {
-            const cmd = row.cmd;
-            if (cmd.needsArgs) {
-              argMode = { cmd, buffer: '' };
-            } else {
-              void runSelectedCommand(cmd, '');
-            }
-          }
-        }
-        break;
-      case 's':
-        services.start(services.services[svcIndex]?.name ?? '');
-        break;
-      case 't':
-        services.stop(services.services[svcIndex]?.name ?? '');
-        break;
-      case 'r':
-        services.restart(services.services[svcIndex]?.name ?? '');
-        break;
-      case 'l':
-        cycleLogSource();
-        break;
-    }
-    render();
-  };
-
-  function prevSelectable(current: number, dir: number, list: Row[]): number {
-    let i = current;
-    for (let step = 0; step < list.length; step++) {
-      i = (i + dir + list.length) % list.length;
-      const row = list[i];
-      if (row && row.kind === 'cmd') return i;
-    }
-    return current;
+function prevSelectable(list: PaletteRow[], current: number, dir: number): number {
+  let i = current;
+  for (let step = 0; step < list.length; step++) {
+    i = (i + dir + list.length) % list.length;
+    const row = list[i];
+    if (row && row.kind === 'cmd') return i;
   }
+  return current;
+}
 
-  function cycleLogSource(): void {
-    const names = services.services.map((s) => s.name);
-    const targets = [...names, 'commands'];
-    const idx = targets.indexOf(logSource);
-    logSource = targets[(idx + 1) % targets.length] ?? 'commands';
+// ---------------------------------------------------------------------------
+// Rendering
+// ---------------------------------------------------------------------------
+
+const RAIL_W = 20;
+
+function buildRows(state: PanelState, services: ServiceManager, palette: PaletteRow[], projectRoot: string): string[] {
+  const W = output.columns || 80;
+  const contentW = Math.max(W - 2, 20);
+  const rows: string[] = [];
+  rows.push(`${ANSI.bold}${ANSI.cyan} Nexus Console${ANSI.reset}${ANSI.dim} — BhooAI Nexus · ${services.services.length} service(s)${ANSI.reset}`);
+  rows.push('');
+  rows.push(renderTabBar(state, W));
+  rows.push(divider(W));
+  rows.push('');
+
+  const content = renderContent(state, services, palette, projectRoot, contentW);
+  for (const line of content) rows.push(clipVisible(line, contentW));
+
+  // Crash banner: show if any service is in crashed state.
+  const crashed = services.services.filter((s) => s.status === 'crashed');
+  if (crashed.length > 0) {
+    rows.push('');
+    const msg = ` ⚠ ${crashed.length} service(s) crashed — select and press s to restart `;
+    rows.push(`${ANSI.bgRed}${ANSI.white}${ANSI.bold}${fitCell(msg, contentW)}${ANSI.reset}`);
   }
 
-  async function runSelectedCommand(cmd: CommandItem, inlineArgs: string): Promise<void> {
-    commandOutput = [];
-    setLogSource('commands');
-    render();
-
-    if (cmd.interactive) {
-      // Suspend panel → real TTY → resume.
-      suspend();
-      try {
-        const bin = resolveCliBin();
-        const args = inlineArgs ? [cmd.name, ...inlineArgs.trim().split(/\s+/)] : [cmd.name];
-        await spawnNode(bin, args);
-      } catch (err) {
-        pushCommandOutput(`✗ ${cmd.name} failed: ${(err as Error).message}`);
-      }
-      resume();
-      render();
-      return;
-    }
-
-    const argv = inlineArgs ? inlineArgs.trim().split(/\s+/) : [];
-    const origOut = process.stdout.write.bind(process.stdout);
-    const origErr = process.stderr.write.bind(process.stderr);
-    const sink = (chunk: string | Buffer, isErr = false) => {
-      const text = String(chunk);
-      pushCommandOutput(text);
-      return true;
-    };
-    (process.stdout as unknown as { write: Function }).write = (chunk: string | Buffer) => sink(chunk, false);
-    (process.stderr as unknown as { write: Function }).write = (chunk: string | Buffer) => sink(chunk, true);
-    try {
-      await runCommand(cmd.name, argv);
-      pushCommandOutput(`\n${ANSI.green}✓ ${cmd.name}${ANSI.reset} finished`);
-    } catch (err) {
-      pushCommandOutput(`\n${ANSI.red}✗ ${cmd.name} failed:${ANSI.reset} ${(err as Error).message}`);
-    } finally {
-      (process.stdout as unknown as { write: Function }).write = origOut;
-      (process.stderr as unknown as { write: Function }).write = origErr;
-    }
-    render();
+  if (state.confirmQuit) {
+    rows.push('');
+    rows.push(...renderQuitCard(state, contentW));
   }
-
-  function setLogSource(source: string): void {
-    logSource = source;
+  if (state.argMode) {
+    rows.push('');
+    rows.push(`${ANSI.cyan}${state.argMode.cmd.name}${ANSI.reset} ${state.argMode.buffer}█`);
   }
-
-  function pushCommandOutput(text: string): void {
-    const lines = text.split('\n');
-    for (const line of lines) {
-      commandOutput.push(stripAnsi(line));
-    }
-    if (commandOutput.length > 200) commandOutput.splice(0, commandOutput.length - 200);
-    throttledRender();
+  if (state.showHelp) {
+    rows.push('');
+    rows.push(helpBody());
   }
+  return rows;
+}
+
+/** A bordered confirmation card asking whether to quit (kills all services). */
+function renderQuitCard(state: PanelState, contentW: number): string[] {
+  const innerW = Math.min(Math.max(contentW - 6, 30), 50);
+  const inner: string[] = [
+    `${ANSI.bold}${ANSI.yellow}Quit the dev console?${ANSI.reset}`,
+    '',
+    `${ANSI.dim}All running services will be stopped.${ANSI.reset}`,
+    '',
+  ];
+  const options = ['Yes, quit', 'Cancel'];
+  options.forEach((label, i) => {
+    const sel = i === state.quitIndex;
+    const marker = sel ? `${ANSI.cyan}▶${ANSI.reset}` : ' ';
+    const text = sel ? `${ANSI.bold}${label}${ANSI.reset}` : label;
+    inner.push(`${marker} ${text}`);
+  });
+  return boxAround(inner, innerW);
+}
 
-  function suspend(): void {
-    input.setRawMode?.(false);
-    output.write(ANSI.altOff + ANSI.showCursor);
+/** Horizontal tab bar across the top. Active tab = filled background in its theme; others = dim. */
+function renderTabBar(state: PanelState, W: number): string {
+  const cellW = Math.max(Math.floor(W / TABS.length), 8);
+  const parts: string[] = [];
+  for (const t of TABS) {
+    const theme = TAB_THEME[t.id];
+    const active = t.id === state.tab;
+    if (active && theme) {
+      // Filled cell: bg + readable fg + bold label, padded with bg spaces.
+      const label = ` ${t.label} `;
+      const cell = `${theme.bg}${theme.fg}${ANSI.bold}${fitCell(label, cellW)}${ANSI.reset}`;
+      parts.push(cell);
+    } else {
+      const accent = theme?.accent ?? ANSI.dimGray;
+      const label = ` ${t.label} `;
+      const cell = `${ANSI.dim}${accent}${fitCell(label, cellW)}${ANSI.reset}`;
+      parts.push(cell);
+    }
   }
+  // Join with single spaces; clip to width.
+  const bar = parts.join(' ');
+  return clipVisible(bar, W);
+}
 
-  function resume(): void {
-    input.setRawMode?.(true);
-    input.resume?.();
-    output.write(ANSI.altOn + ANSI.hideCursor);
+function renderContent(state: PanelState, services: ServiceManager, palette: PaletteRow[], projectRoot: string, contentW: number): string[] {
+  const accent = tabAccent(state.tab);
+  switch (state.tab) {
+    case 'services': return renderServices(state, services, accent, contentW);
+    case 'logs': return renderLogs(state, services, accent, contentW);
+    case 'commands': return renderCommands(state, palette, accent, contentW);
+    case 'features': return renderFeaturesTab(state, accent, contentW);
+    case 'settings': return renderSettingsTab(state, accent);
   }
+}
 
-  // ---- render ----
-  function throttledRender(): void {
-    const now = Date.now();
-    if (now - lastRender < 80) return;
-    lastRender = now;
-    render();
+function statusDot(status: string): string {
+  switch (status) {
+    case 'running': return `${ANSI.green}●${ANSI.reset}`;
+    case 'starting': return `${ANSI.yellow}◐${ANSI.reset}`;
+    case 'crashed': return `${ANSI.red}✗${ANSI.reset}`;
+    default: return `${ANSI.dimGray}○${ANSI.reset}`;
   }
+}
 
-  function render(): void {
-    if (quit) return;
-    if (!output.isTTY) return;
-    const { rows, columns } = output as unknown as { rows: number; columns: number };
-    const H = rows || 24;
-    const W = columns || 80;
-
-    const lines: string[] = [];
-    lines.push(`${ANSI.bold}${ANSI.cyan} Nexus Console ${ANSI.reset}${ANSI.dim}— BhooAI Nexus${ANSI.reset} ${ANSI.dim}(${services.services.length} services, ${palette.length - GROUPS.length} commands)${ANSI.reset}`);
-    lines.push('');
-
-    // --- Services pane ---
-    lines.push(`${ANSI.bold}${ANSI.blue} SERVICES ${ANSI.reset}`);
-    services.services.forEach((svc, i) => {
-      const sel = activePane === 'services' && i === svcIndex;
-      const marker = sel ? `${ANSI.cyan}▶${ANSI.reset}` : ' ';
-      const dot = statusDot(svc.status);
-      const name = sel ? `${ANSI.bold}${svc.name}${ANSI.reset}` : svc.name;
-      const pid = svc.pid ? String(svc.pid) : '—';
-      const restarts = svc.restarts ? String(svc.restarts) : '0';
-      lines.push(` ${marker} ${name.padEnd(18)} :${String(svc.port).padEnd(6)} ${dot} ${svc.status.padEnd(8)} ${pid.padEnd(7)} ${restarts}`);
-    });
-    lines.push('');
-
-    // --- Commands pane ---
-    lines.push(`${ANSI.bold}${ANSI.magenta} COMMANDS ${ANSI.reset}`);
-    const visible = palette.slice(0, Math.min(palette.length, H - lines.length - 8));
-    visible.forEach((row, i) => {
-      if (row.kind === 'header') {
-        lines.push(` ${ANSI.dim}${row.label.toUpperCase()}${ANSI.reset}`);
-      } else {
-        const isSelected = activePane === 'commands' && palette.indexOf(row) === cmdIndex;
-        const marker = isSelected ? `${ANSI.cyan}▶${ANSI.reset}` : ' ';
-        const label = isSelected ? `${ANSI.bold}${row.cmd.label}${ANSI.reset}` : row.cmd.label;
-        const desc = row.cmd.desc ? `${ANSI.dim}${row.cmd.desc}${ANSI.reset}` : '';
-        lines.push(` ${marker} ${label.padEnd(22)} ${desc}`);
+function renderServices(state: PanelState, services: ServiceManager, accent: string, _contentW: number): string[] {
+  const out = [`${ANSI.bold}${accent} SERVICES${ANSI.reset}${ANSI.dim}  (s start · t stop · r restart)${ANSI.reset}`, ''];
+  services.services.forEach((svc, i) => {
+    const sel = i === state.svcIndex;
+    const marker = sel ? `${ANSI.cyan}▶${ANSI.reset}` : ' ';
+    const name = sel ? `${ANSI.bold}${svc.name}${ANSI.reset}` : svc.name;
+    const pid = svc.pid ? String(svc.pid) : '—';
+    const restarts = svc.restarts ? String(svc.restarts) : '0';
+    const exitCode = svc.lastExit?.code != null ? ` exit:${svc.lastExit.code}` : '';
+    const exitTag = svc.status === 'crashed' ? `${ANSI.red}${exitCode}${ANSI.reset}` : '';
+    out.push(` ${marker} ${fitCell(name, 18)} :${fitCell(String(svc.port), 6)} ${statusDot(svc.status)} ${fitCell(svc.status, 8)} ${fitCell(pid, 7)} ${restarts}${exitTag}`);
+    // Inline crash log under the crashed service row.
+    if (svc.status === 'crashed' && svc.lastCrashLog.length > 0) {
+      for (const line of svc.lastCrashLog.slice(-4)) {
+        out.push(`   ${ANSI.red}│${ANSI.reset} ${clipVisible(line, _contentW - 6)}`);
       }
-    });
-    lines.push('');
-
-    // --- Output pane ---
-    const outputTitle = logSource === 'commands' ? 'COMMAND OUTPUT' : `LOGS: ${logSource}`;
-    lines.push(`${ANSI.bold}${ANSI.yellow} ${outputTitle} ${ANSI.reset}`);
-    const src = logSource === 'commands' ? commandOutput : services.tail(logSource, 60);
-    const availH = H - lines.length - 3;
-    const tail = src.slice(-Math.max(availH, 1));
-    for (const line of tail) lines.push(` ${ANSI.dim}|${ANSI.reset} ${line}`);
-
-    // --- help bar ---
-    const helpText = showHelp
-      ? ` ↑/↓ select · Enter run/start · Tab pane · s start · t stop · r restart · l logs · q quit · ? help`
-      : `↑/↓ select · Enter run · Tab pane · s/t/r start/stop/restart · l logs · c cmds · q quit · ? help`;
-
-    // Arg prompt line
-    if (argMode) {
-      lines.push('');
-      lines.push(`${ANSI.cyan}${argMode.cmd.name}${ANSI.reset} ${argMode.buffer}█`);
     }
+  });
+  if (services.services.length === 0) out.push(` ${ANSI.dim}No services discovered.${ANSI.reset}`);
+  return out;
+}
 
-    // Assemble output: keep within terminal height.
-    const body = lines.slice(0, H - 1);
-    let out = ANSI.clear;
-    out += body.join('\n');
-    out += ANSI.move(H, 1);
-    out += `${ANSI.dim}${helpText}${ANSI.reset}`;
-    if (argMode) {
-      out += ANSI.move(H - 1, 1);
-    }
-    output.write(out);
-  }
+function renderLogs(state: PanelState, services: ServiceManager, accent: string, contentW: number): string[] {
+  const out = [`${ANSI.bold}${accent} LOGS${ANSI.reset}${ANSI.dim}  (↑/↓ pick service)${ANSI.reset}`, ''];
+  services.services.forEach((svc, i) => {
+    const sel = i === state.svcIndex;
+    const marker = sel ? `${ANSI.cyan}▶${ANSI.reset}` : ' ';
+    const name = sel ? `${ANSI.bold}${svc.name}${ANSI.reset}` : svc.name;
+    const exitTag = svc.status === 'crashed' && svc.lastExit?.code != null ? `${ANSI.red} exit:${svc.lastExit.code}${ANSI.reset}` : '';
+    out.push(` ${marker} ${statusDot(svc.status)} ${fitCell(name, 18)} :${svc.port}${exitTag}`);
+  });
+  out.push('');
+  const source = services.services[state.svcIndex]?.name ?? '';
+  const tail = source ? services.tail(source, 20) : [];
+  for (const line of tail) out.push(` ${ANSI.dim}|${ANSI.reset} ${clipVisible(line, contentW - 3)}`);
+  if (tail.length === 0) out.push(` ${ANSI.dim}No logs yet for ${source || 'selected service'}.${ANSI.reset}`);
+  return out;
+}
 
-  function statusDot(status: string): string {
-    switch (status) {
-      case 'running': return `${ANSI.green}●${ANSI.reset}`;
-      case 'starting': return `${ANSI.yellow}◐${ANSI.reset}`;
-      case 'crashed': return `${ANSI.red}✗${ANSI.reset}`;
-      default: return `${ANSI.dimGray}○${ANSI.reset}`;
+function renderCommands(state: PanelState, palette: PaletteRow[], accent: string, contentW: number): string[] {
+  const out = [`${ANSI.bold}${accent} COMMANDS${ANSI.reset}${ANSI.dim}  (Enter run · args inline)${ANSI.reset}`, ''];
+  const visible = palette.slice(0, 18);
+  visible.forEach((row) => {
+    if (row.kind === 'header') {
+      out.push(` ${ANSI.dim}${row.label.toUpperCase()}${ANSI.reset}`);
+    } else {
+      const isSelected = palette.indexOf(row) === state.cmdIndex;
+      const marker = isSelected ? `${ANSI.cyan}▶${ANSI.reset}` : ' ';
+      const label = isSelected ? `${ANSI.bold}${row.cmd.name}${ANSI.reset}` : row.cmd.name;
+      const arg = row.cmd.needsArgs ? `${ANSI.dim} <name>${ANSI.reset}` : '';
+      const desc = row.cmd.desc ? `${ANSI.dim}${row.cmd.desc}${ANSI.reset}` : '';
+      const head = ` ${marker} ${fitCell(label, 18)}${arg}`;
+      out.push(`${head} ${clipVisible(desc, Math.max(contentW - 22, 8))}`);
     }
+  });
+  if (state.commandOutput.length > 0) {
+    out.push('');
+    out.push(`${ANSI.bold}${ANSI.yellow} OUTPUT${ANSI.reset}`);
+    for (const line of state.commandOutput.slice(-12)) out.push(` ${ANSI.dim}|${ANSI.reset} ${clipVisible(line, contentW - 3)}`);
   }
+  return out;
+}
 
-  // wire service log redraws
-  services.onLog = () => throttledRender();
-
-  // ---- keypress wiring ----
-  readline.emitKeypressEvents(input);
-  input.on('keypress', keypressHandler);
-
-  // Intercept SIGINT/SIGTERM (Ctrl+C already handled by keypress ctrl-c).
-  const onSignal = () => {
-    quit = true;
-  };
-  process.on('SIGINT', onSignal);
-  process.on('SIGTERM', onSignal);
-
-  render();
-
-  // Wait for quit.
-  while (!quit) {
-    await new Promise((r) => setTimeout(r, 100));
+function renderFeaturesTab(state: PanelState, accent: string, contentW: number): string[] {
+  const out = [`${ANSI.bold}${accent} FEATURES${ANSI.reset}${ANSI.dim}  (a or Enter installs)${ANSI.reset}`, ''];
+  const statusW = 12;
+  const descW = Math.max(contentW - 18 - statusW - 6, 8);
+  FEATURES.forEach((f, i) => {
+    const sel = i === state.featIndex;
+    const on = state.installed.has(f.id);
+    const marker = sel ? `${ANSI.cyan}▶${ANSI.reset}` : ' ';
+    const status = on ? `${ANSI.green}installed${ANSI.reset}` : `${ANSI.dimGray}available${ANSI.reset}`;
+    const name = sel ? `${ANSI.bold}${f.name}${ANSI.reset}` : f.name;
+    out.push(` ${marker} ${fitCell(name, 18)} ${fitCell(status, statusW)} ${clipVisible(`${ANSI.dim}${f.desc}${ANSI.reset}`, descW)}`);
+  });
+  if (state.featureMsg.length > 0) {
+    out.push('');
+    for (const m of state.featureMsg) out.push(` ${ANSI.dim}·${ANSI.reset} ${clipVisible(m, contentW - 3)}`);
   }
+  return out;
+}
 
-  // ---- cleanup ----
-  input.removeListener('keypress', keypressHandler);
-  input.setRawMode?.(false);
-  output.write(ANSI.altOff + ANSI.showCursor);
-  process.removeListener('SIGINT', onSignal);
-  process.removeListener('SIGTERM', onSignal);
-  opts.onQuit?.();
+function renderSettingsTab(state: PanelState, accent: string): string[] {
+  return [
+    `${ANSI.bold}${accent} SETTINGS${ANSI.reset}${ANSI.dim}  (d runs doctor)${ANSI.reset}`,
+    '',
+    ...state.settingsLines,
+  ];
 }
 
-function spawnNode(bin: string, args: string[]): Promise<void> {
-  return new Promise((resolve) => {
-    const child = spawn(process.execPath, [bin, ...args], { stdio: 'inherit', cwd: process.cwd() });
-    child.on('exit', () => resolve());
-    child.on('error', () => resolve());
-  });
+function helpBody(): string {
+  return `${ANSI.dim}Tab/←/→ switch tab · ↑/↓ select · Enter run/start/install · s/t/r service controls
+l logs · a install feature · d doctor · ? help · q/Esc quit (kills services)${ANSI.reset}`;
 }
 
-/**
- * Resolve the CLI bin for suspend-mode commands.
- *
- * Works in the monorepo (packages/nexus-cli/src/devPanel.ts → bin/nexus.js)
- * AND when installed as @bhooai/nexus-cli (its own bin/nexus.js), falling back
- * to `npx` semantics.
- */
-function resolveCliBin(): string {
-  const here = dirname(fileURLToPath(import.meta.url));
-  // From src/devPanel.ts: ../../bin/nexus.js reaches the CLI package's own bin.
-  const ownBin = join(here, '..', '..', 'bin', 'nexus.js');
-  if (existsSync(ownBin)) return ownBin;
-  return join(here, '..', '..', '..', '..', 'bin', 'nexus.js');
+function helpText(state: PanelState): string {
+  if (state.confirmQuit) return `${ANSI.dim}↑/↓ choose · Enter confirm · Esc cancel · Ctrl+C force quit${ANSI.reset}`;
+  if (state.showHelp) return ` ? help · q quit${ANSI.dim}   (kills all services on quit)${ANSI.reset}`;
+  if (state.argMode) return `↑/↓ navigate · Enter run · Esc cancel`;
+  return `${ANSI.dim}Tab pane · ↑/↓ select · Enter run · s/t/r start/stop/restart · l logs · a add feature · q quit · ? help${ANSI.reset}`;
 }
 
-function stripAnsi(text: string): string {
-  return text.replace(/\x1b\[[0-9;]*m/g, '');
+function clamp(n: number, lo: number, hi: number): number {
+  return Math.min(Math.max(n, lo), Math.max(lo, hi));
 }