bhooai-nexus 2.0.11 → 2.0.13

package/packages/nexus-cli/src/devPanel.ts

@@ -18,11 +18,12 @@
  *
  * Zero dependencies: raw ANSI + readline keypress via src/tui.ts.
  */
-import { existsSync } from 'node:fs';
+import { existsSync, appendFileSync } 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 { tmpdir } from 'node:os';
+import { ANSI, Tui, stripAnsi, resolveCliBin, spawnNode, getTermSize, type KeyInfo } from './tui.js';
+import { fitCell, clipVisible, divider, boxAround, keyHint, sectionHeader } from './layout.js';
 import { getCommands, runCommand } from './dispatcher.js';
 import { ServiceManager } from './devServiceManager.js';
 import { FEATURES, detectFeatures, installFeature, readRegistry } from './features.js';
@@ -37,12 +38,12 @@ type Tab = 'services' | 'logs' | 'commands' | 'features' | 'settings';
 
 let isCapturing = false;
 
-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' },
+const TABS: Array<{ id: Tab; label: string; icon: string }> = [
+  { id: 'services', label: 'Services', icon: '' },
+  { id: 'logs', label: 'Logs', icon: '' },
+  { id: 'commands', label: 'Commands', icon: '' },
+  { id: 'features', label: 'Features', icon: '' },
+  { id: 'settings', label: 'Settings', icon: '' },
 ];
 
 /** Per-tab color theme: active tab fills with `bg` + `fg` text; content tints with `accent`. */
@@ -58,6 +59,26 @@ function tabAccent(tab: Tab): string {
   return TAB_THEME[tab]?.accent ?? ANSI.cyan;
 }
 
+/** Normalize key name across platforms (Windows Terminal vs Unix).
+ *  Node's readline may emit sequence-only on Windows for arrows/Tab/Esc. */
+function effectiveName(key: KeyInfo, str: string): string {
+  if (key.name) return key.name;
+  const seq = key.sequence;
+  if (!seq) return str && str.length === 1 ? str.toLowerCase() : '';
+  if (seq === '\r' || seq === '\n' || seq === '\r\n') return 'return';
+  if (seq === '\x1b') return 'escape';
+  if (seq === '\x09' || seq === '\x1b[Z') return 'tab';
+  if (seq === '\x1b[A' || seq === '\x1bOA' || seq === '\x1b[a') return 'up';
+  if (seq === '\x1b[B' || seq === '\x1bOB') return 'down';
+  if (seq === '\x1b[C' || seq === '\x1bOC') return 'right';
+  if (seq === '\x1b[D' || seq === '\x1bOD') return 'left';
+  if (seq === '\x7f' || seq === '\x08') return 'backspace';
+  if (seq === '\x03') return 'c'; // Ctrl+C raw
+  if (seq === ' ' || str === ' ') return 'space';
+  if (str && str.length === 1 && !key.ctrl && !key.meta) return str.toLowerCase();
+  return '';
+}
+
 /** Commands that need a real TTY (their own prompts) — suspend the panel. */
 const INTERACTIVE_COMMANDS = new Set(['init', 'add', 'plugin', 'queue:work']);
 
@@ -126,24 +147,34 @@ export async function startDevPanel(opts: DevPanelOptions): Promise<void> {
   let throttleTimer: ReturnType<typeof setTimeout> | null = null;
 
   function throttledRender(): void {
-    if (isCapturing || state.quit) return;
+    if (isCapturing || state.quit) {
+      if (throttleTimer) { clearTimeout(throttleTimer); throttleTimer = null; }
+      return;
+    }
     const now = Date.now();
     if (now - lastRender < 80) {
       if (!throttleTimer) {
         throttleTimer = setTimeout(() => {
           throttleTimer = null;
+          if (isCapturing || state.quit) return;
           lastRender = Date.now();
-          render();
+          renderImmediate();
         }, 80);
       }
       return;
     }
     lastRender = now;
-    render();
+    renderImmediate();
+  }
+
+  function renderImmediate(): void {
+    if (state.quit || isCapturing) return;
+    tui.draw(buildRows(state, services, palette, projectRoot), helpText(state));
   }
 
   function render(): void {
     if (state.quit || isCapturing) return;
+    lastRender = Date.now();
     tui.draw(buildRows(state, services, palette, projectRoot), helpText(state));
   }
 
@@ -156,9 +187,12 @@ export async function startDevPanel(opts: DevPanelOptions): Promise<void> {
 
   await refreshSettings(state, projectRoot, render);
   tui.enter();
+  const onResize = () => render();
+  output.on('resize', onResize);
   render();
 
   await tui.wait();
+  output.off('resize', onResize);
   if (throttleTimer) { clearTimeout(throttleTimer); throttleTimer = null; }
   tui.exit();
   services.onLog = null;
@@ -173,25 +207,43 @@ interface Ctx {
   redraw: () => void;
 }
 
+function isCtrlC(str: string, key: KeyInfo, k: string): boolean {
+  return key.sequence === '\x03' || str === '\x03' || (k === 'c' && key.ctrl);
+}
+
 function onKey(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
+  const k = effectiveName(key, str);
+  const ctrlC = isCtrlC(str, key, k);
+  if (process.env.NEXUS_TUI_DEBUG) {
+    try {
+      const msg = `[key str=${JSON.stringify(str)} name=${key.name} seq=${JSON.stringify(key.sequence)} ctrl=${key.ctrl} k=${k} ctrlC=${ctrlC} tab=${state.tab}]\n`;
+      appendFileSync(join(tmpdir(), 'nexus-tui.log'), msg);
+    } catch {}
+  }
   // ---- quit confirmation card ----
   if (state.confirmQuit) {
-    if (key.name === 'escape' || key.name === 'q') {
+    if (k === 'escape' || k === 'n') {
       state.confirmQuit = false;
       ctx.redraw();
       return;
     }
-    if (key.name === 'up' || key.name === 'left') {
+    if (ctrlC || k === 'q' || k === 'y') {
+      // Second Ctrl+C / q / y inside the card = force quit immediately (quit in one go)
+      state.quit = true;
+      ctx.tui.quit = true;
+      return;
+    }
+    if (k === 'up' || k === 'left') {
       state.quitIndex = 0;
       ctx.redraw();
       return;
     }
-    if (key.name === 'down' || key.name === 'right') {
+    if (k === 'down' || k === 'right') {
       state.quitIndex = 1;
       ctx.redraw();
       return;
     }
-    if (key.name === 'return' || key.name === 'enter') {
+    if (k === 'return' || k === 'enter') {
       if (state.quitIndex === 0) {
         state.quit = true; // Yes — quit
         ctx.tui.quit = true;
@@ -200,12 +252,6 @@ function onKey(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
       }
       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;
   }
 
@@ -214,13 +260,13 @@ function onKey(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
     ctx.redraw();
     return;
   }
-  if (key.name === 'c' && key.ctrl) {
+  if (ctrlC) {
     state.confirmQuit = true;
     state.quitIndex = 0;
     ctx.redraw();
     return;
   }
-  if (key.name === 'escape') {
+  if (k === 'escape') {
     if (state.tab === 'commands' && state.cmdFilter) {
       state.cmdFilter = '';
       state.cmdIndex = 0;
@@ -232,7 +278,7 @@ function onKey(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
     else { state.confirmQuit = true; state.quitIndex = 0; ctx.redraw(); }
     return;
   }
-  if (key.name === '?') {
+  if (k === '?') {
     state.showHelp = !state.showHelp;
     ctx.redraw();
     return;
@@ -253,7 +299,7 @@ function onKey(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
     return;
   }
   // Backspace in commands tab = delete last filter char.
-  if (state.tab === 'commands' && key.name === 'backspace' && state.cmdFilter) {
+  if (state.tab === 'commands' && k === 'backspace' && state.cmdFilter) {
     state.cmdFilter = state.cmdFilter.slice(0, -1);
     const fp = filteredPalette(ctx.palette, state.cmdFilter);
     state.cmdIndex = Math.min(state.cmdIndex, fp.length - 1);
@@ -264,14 +310,14 @@ function onKey(state: PanelState, str: string, key: KeyInfo, ctx: Ctx): void {
     ctx.redraw();
     return;
   }
-  if (key.name === 'q') {
+  if (k === 'q') {
     state.confirmQuit = true;
     state.quitIndex = 0;
     ctx.redraw();
     return;
   }
 
-  switch (key.name) {
+  switch (k) {
     case 'tab': {
       const idx = TABS.findIndex((t) => t.id === state.tab);
       state.tab = TABS[(idx + 1) % TABS.length]?.id ?? 'services';
@@ -344,17 +390,18 @@ function move(state: PanelState, dir: number, ctx: Ctx): void {
 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')) {
+  const k = effectiveName(key, str);
+  if (k === 'escape' || (key.ctrl && k === 'c')) {
     state.argMode = null;
     return;
   }
-  if (key.name === 'return' || key.name === 'enter') {
+  if (k === 'return' || k === 'enter') {
     const cmd = argMode.cmd;
     state.argMode = null;
     void runSelectedCommand(state, cmd, argMode.buffer, ctx);
     return;
   }
-  if (key.name === 'backspace') {
+  if (k === 'backspace') {
     argMode.buffer = argMode.buffer.slice(0, -1);
   } else if (str && !key.ctrl && !key.meta) {
     argMode.buffer += str;
@@ -404,6 +451,34 @@ async function installSelected(state: PanelState, ctx: Ctx): Promise<void> {
   ctx.redraw();
 }
 
+/** Parse a shell-like arg string, respecting single/double quotes and backslash escaping. */
+function parseArgString(input: string): string[] {
+  const out: string[] = [];
+  let cur = '';
+  let inSingle = false;
+  let inDouble = false;
+  let escaped = false;
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i]!;
+    if (escaped) {
+      cur += ch;
+      escaped = false;
+    } else if (ch === '\\' && !inSingle) {
+      escaped = true;
+    } else if (ch === "'" && !inDouble) {
+      inSingle = !inSingle;
+    } else if (ch === '"' && !inSingle) {
+      inDouble = !inDouble;
+    } else if (/\s/.test(ch) && !inSingle && !inDouble) {
+      if (cur) { out.push(cur); cur = ''; }
+    } else {
+      cur += ch;
+    }
+  }
+  if (cur) out.push(cur);
+  return out;
+}
+
 async function runSelectedCommand(state: PanelState, cmd: CommandItem, inlineArgs: string, ctx: Ctx): Promise<void> {
   state.commandOutput = [];
   ctx.redraw();
@@ -416,7 +491,7 @@ async function runSelectedCommand(state: PanelState, cmd: CommandItem, inlineArg
     ctx.tui.suspend();
     try {
       const bin = resolveCliBin();
-      const args = inlineArgs ? [cmd.name, ...inlineArgs.trim().split(/\s+/)] : [cmd.name];
+      const args = inlineArgs ? [cmd.name, ...parseArgString(inlineArgs.trim())] : [cmd.name];
       await spawnNode(bin, args);
     } catch (err) {
       push(state, `✗ ${cmd.name} failed: ${(err as Error).message}`);
@@ -428,7 +503,7 @@ async function runSelectedCommand(state: PanelState, cmd: CommandItem, inlineArg
     return;
   }
 
-  const argv = inlineArgs ? inlineArgs.trim().split(/\s+/) : [];
+  const argv = inlineArgs ? parseArgString(inlineArgs.trim()) : [];
   const origOut = process.stdout.write.bind(process.stdout);
   const origErr = process.stderr.write.bind(process.stderr);
   const prevLog2 = ctx.services.onLog;
@@ -491,9 +566,9 @@ async function refreshSettings(state: PanelState, projectRoot: string, redraw: (
   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}`);
+  if (Object.keys(reg).length === 0) lines.push(`  ${ANSI.gray}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}`}`);
+  lines.push(`  ${existsSync(join(projectRoot, '.env')) ? `${ANSI.gray}.env present${ANSI.reset}` : `${ANSI.gray}.env not found${ANSI.reset}`}`);
   state.settingsLines = lines;
   redraw();
 }
@@ -577,7 +652,7 @@ function filteredPalette(palette: PaletteRow[], filter: string): PaletteRow[] {
 
 /** Available rows for the command list given terminal height and output section. */
 function commandsViewportHeight(state: PanelState): number {
-  const H = output.rows || 24;
+  const { rows: H } = getTermSize();
   // Header (2) + filter line (1 if active) + output section (2 + up to 12 lines)
   const outputH = state.commandOutput.length > 0 ? 2 + Math.min(state.commandOutput.length, 12) : 0;
   const filterH = state.cmdFilter ? 2 : 0; // filter line + blank
@@ -599,11 +674,20 @@ function clampScroll(state: PanelState, viewportH: number, listLen: number): voi
 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 { cols: W } = getTermSize();
+  const contentW = Math.max(W - 4, 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('');
+  // ── Header: brand left, project + health right ──
+  const projectName = projectRoot.split('/').pop()?.split('\\').pop() || 'project';
+  const running = services.services.filter((s) => s.status === 'running').length;
+  const total = services.services.length;
+  const healthDot = total === 0 ? `${ANSI.dimGray}○${ANSI.reset}` : running === total ? `${ANSI.green}●${ANSI.reset}` : running > 0 ? `${ANSI.yellow}◐${ANSI.reset}` : `${ANSI.red}●${ANSI.reset}`;
+  const headerLeft = `${ANSI.bold}${ANSI.cyanBright}Nexus${ANSI.reset} ${ANSI.bold}Console${ANSI.reset}`;
+  const headerRight = `${ANSI.gray}·${ANSI.reset} ${ANSI.gray}${projectName}${ANSI.reset}  ${healthDot} ${ANSI.bold}${running}${ANSI.reset}${ANSI.gray}/${total}${ANSI.reset} ${ANSI.gray}${total === 1 ? 'service' : 'services'}${ANSI.reset}`;
+  // On narrow terminals, show only left to keep top visible
+  const headerLine = W < 60 ? headerLeft : `${headerLeft}  ${headerRight}`;
+  rows.push(clipVisible(headerLine, W));
+  rows.push(`${ANSI.gray}${'─'.repeat(Math.min(W, 80))}${ANSI.reset}`);
   rows.push(renderTabBar(state, W));
   rows.push(divider(W));
   rows.push('');
@@ -615,7 +699,7 @@ function buildRows(state: PanelState, services: ServiceManager, palette: Palette
   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 `;
+    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}`);
   }
 
@@ -625,56 +709,60 @@ function buildRows(state: PanelState, services: ServiceManager, palette: Palette
   }
   if (state.argMode) {
     rows.push('');
-    rows.push(`${ANSI.cyan}${state.argMode.cmd.name}${ANSI.reset} ${state.argMode.buffer}█`);
+    const hint = `${ANSI.gray}Run:${ANSI.reset} ${ANSI.cyan}${state.argMode.cmd.name}${ANSI.reset} ${state.argMode.buffer}${ANSI.cyanBright}█${ANSI.reset}  ${ANSI.gray}(Enter to run · Esc to cancel)${ANSI.reset}`;
+    rows.push(hint);
   }
   if (state.showHelp) {
     rows.push('');
-    rows.push(helpBody());
+    const helpLines = helpBody().split('\n');
+    rows.push(...boxAround(helpLines, Math.min(contentW, 72)));
   }
   return rows;
 }
 
-/** A bordered confirmation card asking whether to quit (kills all services). */
+/** Centered confirmation card with stronger visual weight */
 function renderQuitCard(state: PanelState, contentW: number): string[] {
-  const innerW = Math.min(Math.max(contentW - 6, 30), 50);
+  const innerW = Math.min(Math.max(contentW - 10, 32), 52);
   const inner: string[] = [
-    `${ANSI.bold}${ANSI.yellow}Quit the dev console?${ANSI.reset}`,
+    `${ANSI.bold}${ANSI.yellowBright}  ⚠  Quit the dev console?${ANSI.reset}`,
     '',
-    `${ANSI.dim}All running services will be stopped.${ANSI.reset}`,
+    `${ANSI.gray}All running services will be stopped.${ANSI.reset}`,
+    `${ANSI.gray}Use ${ANSI.cyan}q${ANSI.gray} again to confirm, or ${ANSI.cyan}Esc${ANSI.gray} to stay.${ANSI.reset}`,
     '',
   ];
-  const options = ['Yes, quit', 'Cancel'];
+  const options = ['Yes, quit  — stop all', 'Cancel — stay'];
   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}`);
+    const marker = sel ? `${ANSI.cyanBright}▶${ANSI.reset}` : '  ';
+    const text = sel ? `${ANSI.cyanBright}${ANSI.bold}${label}${ANSI.reset}` : `${ANSI.gray}${label}${ANSI.reset}`;
+    const line = sel ? `${marker} ${text} ${ANSI.cyan}◀${ANSI.reset}` : `${marker} ${text}`;
+    inner.push(line);
   });
-  return boxAround(inner, innerW);
+  return boxAround(inner, innerW, ANSI.white);
 }
 
-/** Horizontal tab bar across the top. Active tab = filled background in its theme; others = dim. */
+/** Tab bar: only selected tab has background color, others are plain white text */
 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}`;
+    const theme = TAB_THEME[t.id];
+    const base = t.icon ? `${t.icon} ${t.label}` : t.label;
+    const label = ` ${base} `;
+    if (active) {
+      // Selected: per-tab bg + fg + bold
+      const cell = `${theme.bg}${theme.fg}${ANSI.bold}${label}${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);
+      // Unselected: no background, white text only — same padded width as active to keep alignment
+      parts.push(`${ANSI.white}${label}${ANSI.reset}`);
     }
   }
-  // Join with single spaces; clip to width.
-  const bar = parts.join(' ');
-  return clipVisible(bar, W);
+  const sep = ` `;
+  const bar = parts.join(sep);
+  const tabHint = `${ANSI.gray}  -- ${state.tab}${ANSI.reset}`;
+  const full = `${bar}${tabHint}`;
+  return clipVisible(full, W);
 }
 
 function renderContent(state: PanelState, services: ServiceManager, palette: PaletteRow[], projectRoot: string, contentW: number): string[] {
@@ -698,41 +786,69 @@ function statusDot(status: string): string {
 }
 
 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}`, ''];
+  const count = services.services.length;
+  const running = services.services.filter((s) => s.status === 'running').length;
+  const subtitle = count === 0 ? 'no services' : `${running}/${count} running  ·  s start · t stop · r restart`;
+  const out = [sectionHeader('SERVICES', accent, subtitle), ''];
+  if (count === 0) {
+    out.push(...boxAround([`${ANSI.gray}No services discovered.${ANSI.reset}`, `${ANSI.gray}Check that ${ANSI.cyan}apps/*${ANSI.gray} exists and has a runnable entry.${ANSI.reset}`], Math.min(_contentW - 4, 56)));
+    return out;
+  }
+  // Table header — widths match row columns (STATUS includes dot+space => 12)
+  const header = `   ${fitCell(`${ANSI.gray}SERVICE${ANSI.reset}`, 18)}  ${fitCell(`${ANSI.gray}PORT${ANSI.reset}`, 6)}  ${fitCell(`${ANSI.gray}STATUS${ANSI.reset}`, 12)}  ${fitCell(`${ANSI.gray}PID${ANSI.reset}`, 7)}  ${fitCell(`${ANSI.gray}RESTARTS${ANSI.reset}`, 8)}`;
+  out.push(header);
+  out.push(`${ANSI.gray}   ${'─'.repeat(18)}  ${'─'.repeat(6)}  ${'─'.repeat(12)}  ${'─'.repeat(7)}  ${'─'.repeat(8)}${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}`);
+    const marker = sel ? `${ANSI.cyanBright}▶${ANSI.reset}` : ' ';
+    const name = sel ? `${ANSI.bold}${ANSI.cyanBright}${svc.name}${ANSI.reset}` : svc.name;
+    const pid = svc.pid ? String(svc.pid) : `${ANSI.gray}—${ANSI.reset}`;
+    const restarts = svc.restarts ? String(svc.restarts) : `${ANSI.gray}0${ANSI.reset}`;
+    const exitCode = svc.lastExit?.code != null ? ` ${ANSI.gray}exit:${svc.lastExit.code}${ANSI.reset}` : '';
+    const statusText = svc.status === 'running' ? `${ANSI.green}${svc.status}${ANSI.reset}` : svc.status === 'starting' ? `${ANSI.yellow}${svc.status}${ANSI.reset}` : svc.status === 'crashed' ? `${ANSI.red}${svc.status}${ANSI.reset}` : `${ANSI.gray}${svc.status}${ANSI.reset}`;
+    const rowBg = sel ? `${ANSI.inverse}` : '';
+    const rowEnd = sel ? `${ANSI.reset}` : '';
+    // Status column is dot + space + text (12 cols) to align with header
+    const statusCell = fitCell(`${statusDot(svc.status)} ${statusText}`, 12);
+    out.push(` ${marker} ${fitCell(name, 18)}  ${fitCell(String(svc.port), 6)}  ${statusCell}  ${fitCell(pid, 7)}  ${fitCell(`${restarts}${exitCode}`, 8)}${rowEnd}`);
     // 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)}`);
+        out.push(`   ${ANSI.red}│${ANSI.reset} ${ANSI.gray}${clipVisible(line, _contentW - 6)}${ANSI.reset}`);
       }
     }
   });
-  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}`, ''];
+  const out = [sectionHeader('LOGS', accent, '↑/↓ pick service  ·  logs tail below'), ''];
+  // Service picker as compact table — header widths match row cells
+  const header = `   ${fitCell(`${ANSI.gray}SERVICE${ANSI.reset}`, 18)}  ${fitCell(`${ANSI.gray}PORT${ANSI.reset}`, 6)}  ${fitCell(`${ANSI.gray}STATUS${ANSI.reset}`, 12)}`;
+  out.push(header);
+  out.push(`${ANSI.gray}   ${'─'.repeat(18)}  ${'─'.repeat(6)}  ${'─'.repeat(12)}${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}`);
+    const marker = sel ? `${ANSI.cyanBright}▶${ANSI.reset}` : ' ';
+    const name = sel ? `${ANSI.bold}${ANSI.cyanBright}${svc.name}${ANSI.reset}` : svc.name;
+    const exitTag = svc.status === 'crashed' && svc.lastExit?.code != null ? ` ${ANSI.red}exit:${svc.lastExit.code}${ANSI.reset}` : '';
+    const statusCell = fitCell(`${svc.status}${exitTag}`, 12);
+    out.push(` ${marker} ${statusDot(svc.status)} ${fitCell(name, 18)}  ${fitCell(String(svc.port), 6)}  ${statusCell}`);
   });
   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}`);
+  const { rows: H } = getTermSize();
+  const maxTail = Math.max(Math.min(20, H - 12 - services.services.length), 4);
+  const tail = source ? services.tail(source, maxTail) : [];
+  // Log pane header
+  const logHeader = `${ANSI.gray}— ${ANSI.bold}${accent}${source || 'no service'}${ANSI.reset}${ANSI.gray} — ${tail.length} lines —${ANSI.reset}`;
+  out.push(logHeader);
+  out.push(`${ANSI.gray}${'─'.repeat(Math.min(contentW, 40))}${ANSI.reset}`);
+  if (tail.length === 0) {
+    out.push(` ${ANSI.gray}No logs yet for ${source || 'selected service'}. Start a service with ${ANSI.cyan}s${ANSI.gray}.${ANSI.reset}`);
+  } else {
+    for (const line of tail) out.push(` ${ANSI.gray}│${ANSI.reset} ${clipVisible(line, contentW - 3)}`);
+  }
   return out;
 }
 
@@ -741,20 +857,18 @@ function renderCommands(state: PanelState, palette: PaletteRow[], accent: string
   const vh = commandsViewportHeight(state);
   clampScroll(state, vh, fp.length);
 
-  const filterHint = state.cmdFilter
-    ? `${ANSI.dim}  (type to filter · Esc clears · Backspace deletes)${ANSI.reset}`
-    : `${ANSI.dim}  (Enter run · args inline · type to filter)${ANSI.reset}`;
-  const out = [`${ANSI.bold}${accent} COMMANDS${ANSI.reset}${filterHint}`, ''];
+  const subtitle = state.cmdFilter ? `filter: "${state.cmdFilter}" · Esc clears` : `Enter run · type to filter · ↑/↓ navigate`;
+  const out = [sectionHeader('COMMANDS', accent, subtitle), ''];
 
-  // Filter input line.
+  // Filter input line — more prominent with pill styling
   if (state.cmdFilter) {
-    out.push(` ${ANSI.cyan}Filter:${ANSI.reset} ${state.cmdFilter}█`);
+    out.push(` ${ANSI.gray}Filter${ANSI.reset}  ${ANSI.cyanBright}${ANSI.bold}${state.cmdFilter}${ANSI.reset}${ANSI.cyanBright}█${ANSI.reset}  ${ANSI.gray}(${fp.filter((r) => r.kind === 'cmd').length} matches)${ANSI.reset}`);
     out.push('');
   }
 
-  // Scroll-up indicator.
+  // Scroll-up indicator with subtle styling
   if (state.cmdScroll > 0) {
-    out.push(` ${ANSI.dim}↑ ${state.cmdScroll} more above${ANSI.reset}`);
+    out.push(` ${ANSI.gray}↑ ${state.cmdScroll} more above — scroll up${ANSI.reset}`);
   }
 
   const start = state.cmdScroll;
@@ -762,73 +876,113 @@ function renderCommands(state: PanelState, palette: PaletteRow[], accent: string
   for (let i = start; i < end; i++) {
     const row = fp[i]!;
     if (row.kind === 'header') {
-      out.push(` ${ANSI.dim}${row.label.toUpperCase()}${ANSI.reset}`);
+      const label = `─ ${row.label.toUpperCase()} ─`;
+      out.push(` ${ANSI.gray}${label}${ANSI.reset}`);
     } else {
       const isSelected = i === 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} <args>${ANSI.reset}` : '';
-      const desc = row.cmd.desc ? `${ANSI.dim}${row.cmd.desc}${ANSI.reset}` : '';
+      const marker = isSelected ? `${ANSI.cyanBright}▶${ANSI.reset}` : ' ';
+      const label = isSelected ? `${ANSI.bold}${ANSI.cyanBright}${row.cmd.name}${ANSI.reset}` : row.cmd.name;
+      const arg = row.cmd.needsArgs ? `${ANSI.gray} ${ANSI.italic}<args>${ANSI.reset}` : '';
+      const desc = row.cmd.desc ? `${ANSI.gray}${row.cmd.desc}${ANSI.reset}` : '';
       const head = ` ${marker} ${fitCell(label, 20)}${arg}`;
-      out.push(`${head} ${clipVisible(desc, Math.max(contentW - 24, 8))}`);
+      const line = `${head}  ${clipVisible(desc, Math.max(contentW - 26, 8))}`;
+      out.push(line);
     }
   }
 
   // Scroll-down indicator.
   if (end < fp.length) {
-    out.push(` ${ANSI.dim}↓ ${fp.length - end} more below${ANSI.reset}`);
+    out.push(` ${ANSI.gray}↓ ${fp.length - end} more below — keep scrolling${ANSI.reset}`);
   }
 
-  // Empty filter result.
+  // Empty filter result with helpful box
   if (fp.length === 0) {
-    out.push(` ${ANSI.dim}No commands match "${state.cmdFilter}"${ANSI.reset}`);
+    out.push('');
+    out.push(...boxAround([`${ANSI.gray}No commands match "${state.cmdFilter}"${ANSI.reset}`, `${ANSI.gray}Try a different filter or clear with ${ANSI.cyan}Esc${ANSI.gray}.${ANSI.reset}`], Math.min(contentW - 4, 48)));
   }
 
   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)}`);
+    const outHeader = `${ANSI.bold}${ANSI.yellowBright}▸ OUTPUT${ANSI.reset}  ${ANSI.gray}(${state.commandOutput.length} lines)${ANSI.reset}`;
+    out.push(outHeader);
+    out.push(`${ANSI.gray}${'─'.repeat(Math.min(contentW, 36))}${ANSI.reset}`);
+    for (const line of state.commandOutput.slice(-12)) out.push(` ${ANSI.gray}│${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 installedCount = state.installed.size;
+  const subtitle = `${installedCount}/${FEATURES.length} installed  ·  a or Enter installs`;
+  const out = [sectionHeader('FEATURES', accent, subtitle), ''];
+  const statusW = 13;
   const descW = Math.max(contentW - 18 - statusW - 6, 8);
+  // Header row
+  out.push(`   ${fitCell(`${ANSI.gray}FEATURE${ANSI.reset}`, 18)}  ${fitCell(`${ANSI.gray}STATUS${ANSI.reset}`, statusW)}  ${ANSI.gray}DESCRIPTION${ANSI.reset}`);
+  out.push(`${ANSI.gray}  ${'─'.repeat(18)}  ${'─'.repeat(statusW)}  ${'─'.repeat(descW)}${ANSI.reset}`);
   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)}`);
+    const marker = sel ? `${ANSI.cyanBright}▶${ANSI.reset}` : ' ';
+    const status = on ? `${ANSI.green}● installed${ANSI.reset}` : `${ANSI.gray}○ available${ANSI.reset}`;
+    const statusCell = on ? `${ANSI.greenBright}${fitCell(status, statusW)}${ANSI.reset}` : fitCell(status, statusW);
+    const name = sel ? `${ANSI.bold}${ANSI.cyanBright}${f.name}${ANSI.reset}` : f.name;
+    const desc = `${ANSI.gray}${f.desc}${ANSI.reset}`;
+    out.push(` ${marker} ${fitCell(name, 18)}  ${statusCell}  ${clipVisible(desc, descW)}`);
   });
   if (state.featureMsg.length > 0) {
     out.push('');
-    for (const m of state.featureMsg) out.push(` ${ANSI.dim}·${ANSI.reset} ${clipVisible(m, contentW - 3)}`);
+    out.push(`${ANSI.gray}${'─'.repeat(Math.min(contentW, 40))}${ANSI.reset}`);
+    for (const m of state.featureMsg) {
+      const isSuccess = m.includes('installed') || m.includes('✓');
+      const bullet = isSuccess ? `${ANSI.green}✓${ANSI.reset}` : `${ANSI.gray}·${ANSI.reset}`;
+      out.push(` ${bullet} ${clipVisible(isSuccess ? `${ANSI.green}${m}${ANSI.reset}` : 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,
-  ];
+  const out = [sectionHeader('SETTINGS', accent, 'd runs doctor  ·  environment & ports'), ''];
+  // Style the settingsLines with subtle indentation and accent
+  for (const line of state.settingsLines) {
+    if (line.startsWith('  ') || line.startsWith(`${ANSI.bold}`)) {
+      out.push(line);
+    } else if (line.trim() === '') {
+      out.push('');
+    } else {
+      out.push(`${ANSI.gray}${line}${ANSI.reset}`);
+    }
+  }
+  if (state.settingsLines.length === 0) {
+    out.push(`${ANSI.gray}Loading settings...${ANSI.reset}`);
+  }
+  out.push('');
+  out.push(`${ANSI.gray}Tip: edit ${ANSI.cyan}.env${ANSI.gray} or ${ANSI.cyan}.nexus-ports.json${ANSI.gray} then restart.${ANSI.reset}`);
+  return out;
 }
 
 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}`;
+  // Multi-line boxed help with grouped key hints
+  const cols = [
+    `${keyHint('Tab', 'switch tab')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('←→', 'tab')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('↑↓', 'move')}`,
+    `${keyHint('Enter', 'run/start')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('s/t/r', 'service')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('l', 'logs')}`,
+    `${keyHint('a', 'feature')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('d', 'doctor')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('?', 'help')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('q', 'quit')}`,
+  ];
+  return cols.join(`\n${ANSI.gray}  ${'─'.repeat(48)}${ANSI.reset}\n`);
 }
 
 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}`;
+  if (state.confirmQuit) return `${keyHint('↑↓', 'choose')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('Enter', 'confirm')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('Esc', 'cancel')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('Ctrl+C', 'force quit')}`;
+  if (state.showHelp) return `${keyHint('?', 'help')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('q', 'quit')}  ${ANSI.gray} — services stop on quit${ANSI.reset}`;
+  if (state.argMode) return `${keyHint('↑↓', 'navigate')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('Enter', 'run')}  ${ANSI.gray}·${ANSI.reset}  ${keyHint('Esc', 'cancel')}`;
+  // Context-aware footer: show relevant keys for current tab
+  const tab = state.tab;
+  if (tab === 'services') return `${keyHint('Tab', 'tab')}  ${keyHint('↑↓', 'select')}  ${keyHint('Enter/s', 'start')}  ${keyHint('t/r', 'stop/restart')}  ${keyHint('l', 'logs')}  ${keyHint('?', 'help')}`;
+  if (tab === 'logs') return `${keyHint('Tab', 'tab')}  ${keyHint('↑↓', 'service')}  ${keyHint('l', 'back')}  ${keyHint('q', 'quit')}`;
+  if (tab === 'commands') return `${keyHint('↑↓', 'pick')}  ${keyHint('Enter', 'run')}  ${keyHint('type', 'filter')}  ${keyHint('Esc', 'clear')}`;
+  if (tab === 'features') return `${keyHint('↑↓', 'pick')}  ${keyHint('a/Enter', 'install')}  ${keyHint('Tab', 'switch')}`;
+  return `${keyHint('Tab', 'switch')}  ${keyHint('↑↓', 'move')}  ${keyHint('Enter', 'action')}  ${keyHint('q', 'quit')}  ${keyHint('?', 'help')}`;
 }
 
 function clamp(n: number, lo: number, hi: number): number {