@bhooai/nexus-cli 2.0.2 → 2.0.4

package/src/devPanel.ts

@@ -0,0 +1,696 @@
+/**
+ * devPanel — full-screen Nexus Console TUI (redesigned).
+ *
+ * Two-pane layout:
+ *   LEFT   tab rail — Services · Logs · Commands · Features · Settings
+ *   RIGHT  content for the active tab
+ *
+ * Keybindings:
+ *   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 via src/tui.ts.
+ */
+import { existsSync } from 'node:fs';
+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';
+import { FEATURES, detectFeatures, installFeature, readRegistry } from './features.js';
+
+export interface DevPanelOptions {
+  services: ServiceManager;
+  /** Invoked on quit (after the panel exits) — used to kill all services. */
+  onQuit?: () => void;
+}
+
+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. */
+const INTERACTIVE_COMMANDS = new Set(['init', 'add', 'plugin', 'queue:work']);
+
+/** Commands that take a positional/flag arg we should collect inline. */
+const ARG_COMMANDS = new Set([
+  'make:route', 'make:controller', 'make:model', 'make:service', 'make:repository',
+  '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', '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,
+    desc: c.description ?? '',
+    needsArgs: ARG_COMMANDS.has(c.name),
+    interactive: INTERACTIVE_COMMANDS.has(c.name),
+  }));
+}
+
+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';
+  return 'project';
+}
+
+const GROUPS = ['project', 'make:*', 'data', 'queue', 'plugins', 'maintenance'];
+
+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) {
+    const g = groupOf(item.name);
+    if (!grouped.has(g)) grouped.set(g, []);
+    grouped.get(g)!.push(item);
+  }
+  return grouped;
+}
+
+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;
+}
+
+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;
+}
+
+// ---------------------------------------------------------------------------
+// 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}`);
+  }
+
+  if (state.confirmQuit) {
+    rows.push('');
+    rows.push(...renderQuitCard(state, contentW));
+  }
+  if (state.argMode) {
+    rows.push('');
+    rows.push(`${ANSI.cyan}${state.argMode.cmd.name}${ANSI.reset} ${state.argMode.buffer}█`);
+  }
+  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);
+}
+
+/** 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 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);
+  }
+}
+
+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 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)}`);
+      }
+    }
+  });
+  if (services.services.length === 0) out.push(` ${ANSI.dim}No services discovered.${ANSI.reset}`);
+  return 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 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;
+}
+
+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;
+}
+
+function renderSettingsTab(state: PanelState, accent: string): string[] {
+  return [
+    `${ANSI.bold}${accent} SETTINGS${ANSI.reset}${ANSI.dim}  (d runs doctor)${ANSI.reset}`,
+    '',
+    ...state.settingsLines,
+  ];
+}
+
+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}`;
+}
+
+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 clamp(n: number, lo: number, hi: number): number {
+  return Math.min(Math.max(n, lo), Math.max(lo, hi));
+}