agent-tool-forge 0.3.0

package/lib/views/forge.js

@@ -0,0 +1,410 @@
+/**
+ * Forge View — 12-phase tool generation dialogue (phases 0–11, split-panel TUI).
+ */
+
+import blessed from 'blessed';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { resolveModelConfig } from '../api-client.js';
+import { forgeStep, createInitialState, getPhaseIndex, PHASES } from '../forge-engine.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = resolve(__dirname, '../..');
+
+function loadEnv() {
+  const envPath = resolve(PROJECT_ROOT, '.env');
+  if (!existsSync(envPath)) return {};
+  const out = {};
+  for (const line of readFileSync(envPath, 'utf-8').split('\n')) {
+    const t = line.trim();
+    if (!t || t.startsWith('#')) continue;
+    const eq = t.indexOf('=');
+    if (eq === -1) continue;
+    out[t.slice(0, eq).trim()] = t.slice(eq + 1).trim().replace(/^["']|["']$/g, '');
+  }
+  return out;
+}
+
+export function createView({
+  screen, content, config, navigate, setFooter,
+  screenKey, openPopup, closePopup, startService
+}) {
+  const container = blessed.box({ top: 0, left: 0, width: '100%', height: '100%', tags: true });
+  // Escape/b navigates back immediately — session state is auto-persisted.
+
+  const phaseBar = blessed.box({
+    parent: container, top: 0, left: 0, width: '100%', height: 1,
+    tags: true, style: { fg: '#888888' }
+  });
+
+  const log = blessed.log({
+    parent: container, top: 1, left: 0, width: '55%', height: '100%-5',
+    tags: true, scrollable: true, alwaysScroll: true, keys: true, mouse: true,
+    border: { type: 'line' }, label: ' Dialogue ',
+    style: { border: { fg: '#333333' }, focus: { border: { fg: 'cyan' } } },
+    scrollbar: { ch: '│', style: { fg: '#555555' } }
+  });
+
+  const specPanel = blessed.scrollablebox({
+    parent: container, top: 1, left: '55%', width: '45%', height: '100%-5',
+    tags: true, scrollable: true, alwaysScroll: true, keys: true, vi: true, mouse: true,
+    border: { type: 'line' }, label: ' Live Spec ',
+    style: { border: { fg: '#333333' }, focus: { border: { fg: 'cyan' } } },
+    scrollbar: { ch: '│', style: { fg: '#555555' } }
+  });
+
+  const statusBar = blessed.box({
+    parent: container, bottom: 3, left: 0, width: '100%', height: 1, tags: true,
+    style: { fg: '#888888' }
+  });
+
+  const inputBox = blessed.textbox({
+    parent: container, bottom: 0, left: 0, width: '100%', height: 3,
+    border: { type: 'line' },
+    label: ' Message (Enter send, Esc shortcuts, Tab panel) ',
+    style: { border: { fg: '#333333' }, focus: { border: { fg: 'cyan' } } }
+  });
+
+  setFooter(
+    ' {cyan-fg}Enter{/cyan-fg} send  {cyan-fg}Esc{/cyan-fg} shortcuts  ' +
+    '{cyan-fg}e{/cyan-fg} edit  {cyan-fg}s{/cyan-fg} skip  {cyan-fg}m{/cyan-fg} compare  {cyan-fg}b{/cyan-fg} back'
+  );
+
+  // ── Explicit input mode management ──────────────────────────────────────
+  let inputActive = false;
+
+  function startInput() {
+    inputActive = true;
+    inputBox.focus();
+    inputBox.style.border = { fg: 'cyan' };
+    log.style.border = { fg: '#333333' };
+    specPanel.style.border = { fg: '#333333' };
+    screen.render();
+    inputBox.readInput((err, value) => {
+      inputActive = false;
+      if (err || value === undefined || value === null) {
+        // Escape — exit to command mode
+        log.focus();
+        log.style.border = { fg: 'cyan' };
+        inputBox.style.border = { fg: '#333333' };
+        screen.render();
+        return;
+      }
+      // Enter — submit
+      const text = (value || '').trim();
+      inputBox.clearValue();
+      screen.render();
+      if (text) {
+        doStep(text);
+      } else {
+        startInput();
+      }
+    });
+  }
+
+  let forgeState = createInitialState();
+  let busy = false;
+  let previewPending = false;
+  let currentModelConfig = null;
+  let db = null;
+  let updateToolGenerationFn = null;
+
+  // ── Log helpers ────────────────────────────────────────────────────────
+  const appendSystem   = (t) => log.log(`{#555555-fg}── ${t} ──{/#555555-fg}`);
+  const appendUser     = (t) => { log.log(''); log.log(`{cyan-fg}{bold}You:{/bold}{/cyan-fg}  ${t}`); };
+  const appendAssistant = (t) => {
+    if (!t?.trim()) return;
+    log.log(`{green-fg}{bold}Forge:{/bold}{/green-fg} ${t.replace(/\n/g, '\n        ')}`);
+  };
+  const setStatus = (t) => {
+    statusBar.setContent(t ? ` {#888888-fg}${t}{/#888888-fg}` : '');
+    screen.render();
+  };
+
+  function updateSpecPanel() {
+    const raw = JSON.stringify(forgeState.spec, null, 2);
+    specPanel.setContent(raw.replace(/: null/g, ': {#444444-fg}null{/#444444-fg}'));
+  }
+
+  function updatePhaseBar() {
+    const idx = getPhaseIndex(forgeState.phase);
+    const n = idx === -1 ? '?' : idx + 1;
+    phaseBar.setContent(
+      ` {cyan-fg}Phase ${n}/${PHASES.length}: ${forgeState.phase}{/cyan-fg}` +
+      `  {#888888-fg}Model: ${currentModelConfig?.model || 'n/a'}{/#888888-fg}`
+    );
+  }
+
+  function saveToDb() {
+    if (!db || !forgeState.generationId || !updateToolGenerationFn) return;
+    try {
+      updateToolGenerationFn(db, forgeState.generationId, {
+        phases_completed: getPhaseIndex(forgeState.phase),
+        spec_json: JSON.stringify(forgeState.spec),
+        status: forgeState.phase === 'done' ? 'complete' : 'in_progress'
+      });
+    } catch (_) { /* non-fatal */ }
+  }
+
+  // ── File preview popup ─────────────────────────────────────────────────
+  function showFilePreview(files) {
+    previewPending = true;
+    const lines = [];
+    for (const key of ['toolFile', 'testFile']) {
+      const f = files[key];
+      if (!f) continue;
+      lines.push(`{bold}{cyan-fg}${key === 'toolFile' ? 'Tool' : 'Test'}: ${f.path}{/cyan-fg}{/bold}`);
+      lines.push('{#333333-fg}' + '─'.repeat(60) + '{/#333333-fg}');
+      lines.push(f.content);
+      lines.push('');
+    }
+    if (files.barrelDiff) {
+      lines.push(`{bold}{cyan-fg}Barrel: ${files.barrelDiff.path}{/cyan-fg}{/bold}`);
+      lines.push(files.barrelDiff.lineToAdd);
+    }
+
+    const popup = blessed.scrollablebox({
+      parent: screen, border: 'line',
+      top: 1, left: 2, right: 2, bottom: 3,
+      label: ' Generated Files — [y] write  [e] editor  [n] abort ',
+      tags: true, scrollable: true, alwaysScroll: true, keys: true, vi: true, mouse: true,
+      content: lines.join('\n'),
+      scrollbar: { ch: '│', style: { fg: '#555555' } },
+      style: { border: { fg: 'cyan' } }
+    });
+
+    openPopup?.();
+    popup.focus();
+    screen.render();
+
+    function closePreview() {
+      closePopup?.();
+      popup.destroy();
+      screen.render();
+      startInput();
+    }
+
+    popup.key('y', async () => {
+      previewPending = false;
+      closePreview();
+      try {
+        if (files.toolFile) {
+          mkdirSync(dirname(files.toolFile.path), { recursive: true });
+          writeFileSync(files.toolFile.path, files.toolFile.content, 'utf-8');
+        }
+        if (files.testFile) {
+          mkdirSync(dirname(files.testFile.path), { recursive: true });
+          writeFileSync(files.testFile.path, files.testFile.content, 'utf-8');
+        }
+        if (files.barrelDiff) {
+          let barrel = existsSync(files.barrelDiff.path)
+            ? readFileSync(files.barrelDiff.path, 'utf-8') : '';
+          if (!barrel.includes(files.barrelDiff.lineToAdd)) {
+            writeFileSync(
+              files.barrelDiff.path,
+              barrel + (barrel.endsWith('\n') ? '' : '\n') + files.barrelDiff.lineToAdd + '\n',
+              'utf-8'
+            );
+          }
+        }
+        appendSystem('Files written successfully.');
+      } catch (err) {
+        appendSystem(`Write error: ${err.message}`);
+      }
+      await doStep(null);
+    });
+
+    popup.key('n', () => {
+      previewPending = false;
+      closePreview();
+      appendSystem("File write aborted. Describe changes and I'll regenerate.");
+    });
+
+    popup.key('e', async () => {
+      if (!files.toolFile?.path) {
+        previewPending = false;
+        closePreview();
+        appendSystem('No tool file path to open in editor.');
+        return;
+      }
+      const { spawn } = await import('child_process');
+      screen.program.disableMouse();
+      screen.program.normalBuffer();
+      const child = spawn(process.env.EDITOR || 'vi', [files.toolFile.path], { stdio: 'inherit' });
+      child.on('exit', () => {
+        screen.program.alternateBuffer();
+        screen.program.enableMouse();
+        previewPending = false;
+        closePreview();
+      });
+    });
+
+    popup.key(['escape', 'b'], () => { previewPending = false; closePreview(); appendSystem('File preview closed.'); });
+  }
+
+  // ── Action handler ─────────────────────────────────────────────────────
+  async function handleAction(action) {
+    if (action.type === 'write_file') {
+      setStatus('Generating files…');
+      try {
+        const { generateToolFiles } = await import('../forge-file-writer.js');
+        const files = await generateToolFiles({
+          spec: forgeState.spec, projectConfig: config,
+          projectRoot: process.cwd(), modelConfig: currentModelConfig, existingTools: []
+        });
+        showFilePreview(files);
+      } catch (err) { appendSystem(`File generation failed: ${err.message}`); }
+
+    } else if (action.type === 'run_tests') {
+      appendSystem('Run tests manually: ' + (action.payload?.command || 'npm test'));
+
+    } else if (action.type === 'write_evals') {
+      appendSystem('Eval generation starting…');
+      try {
+        const { generateEvals } = await import('../forge-eval-generator.js');
+        const r = await generateEvals({
+          spec: forgeState.spec, allTools: [], projectConfig: config,
+          projectRoot: process.cwd(), modelConfig: currentModelConfig
+        });
+        mkdirSync(dirname(r.goldenPath), { recursive: true });
+        writeFileSync(r.goldenPath, JSON.stringify(r.goldenCases, null, 2), 'utf-8');
+        writeFileSync(r.labeledPath, JSON.stringify(r.labeledCases, null, 2), 'utf-8');
+        appendSystem(`Evals written: ${r.goldenPath}, ${r.labeledPath}`);
+      } catch (err) { appendSystem(`Eval generation failed: ${err.message}`); }
+
+    } else if (action.type === 'write_verifiers') {
+      appendSystem('Verifier generation starting…');
+      try {
+        const { generateVerifiers } = await import('../forge-verifier-generator.js');
+        const r = await generateVerifiers({
+          spec: forgeState.spec, projectConfig: config,
+          projectRoot: process.cwd(), modelConfig: currentModelConfig
+        });
+        for (const vf of r.verifierFiles) {
+          mkdirSync(dirname(vf.path), { recursive: true });
+          writeFileSync(vf.path, vf.content, 'utf-8');
+        }
+        appendSystem(`${r.verifierFiles.length} verifier(s) written.`);
+      } catch (err) { appendSystem(`Verifier generation failed: ${err.message}`); }
+
+    } else if (action.type === 'compare_models') {
+      navigate('model-compare');
+    }
+  }
+
+  // ── Core step ──────────────────────────────────────────────────────────
+  async function doStep(userInput) {
+    if (busy) return;
+    busy = true;
+    if (userInput) appendUser(userInput);
+    setStatus('Thinking…');
+    try {
+      const result = await forgeStep({
+        state: forgeState, userInput, modelConfig: currentModelConfig,
+        existingTools: [], projectConfig: config, projectRoot: process.cwd()
+      });
+      forgeState = result.nextState;
+      if (result.assistantText) appendAssistant(result.assistantText);
+      updateSpecPanel();
+      updatePhaseBar();
+      for (const action of result.actions || []) await handleAction(action);
+      saveToDb();
+    } catch (err) {
+      appendSystem(`Error: ${err.message}`);
+    }
+    setStatus('');
+    busy = false;
+    screen.render();
+    if (!previewPending) {
+      startInput();
+    }
+  }
+
+  // ── Init ───────────────────────────────────────────────────────────────
+  setImmediate(async () => {
+    const env = loadEnv();
+    currentModelConfig = resolveModelConfig(config, env, 'generation');
+
+    if (!currentModelConfig.apiKey) {
+      appendSystem('No API key found. Add ANTHROPIC_API_KEY or OPENAI_API_KEY in Settings → API Keys.');
+      inputBox.style.border = { fg: 'red' };
+      updatePhaseBar();
+      updateSpecPanel();
+      screen.render();
+      return;
+    }
+
+    try {
+      const dbMod = await import('../db.js');
+      db = dbMod.getDb(resolve(process.cwd(), config?.dbPath || 'forge.db'));
+      updateToolGenerationFn = dbMod.updateToolGeneration;
+      forgeState.generationId = dbMod.insertToolGeneration(db, {
+        tool_name: 'new_tool',
+        started_at: new Date().toISOString(),
+        generation_model: currentModelConfig.model
+      });
+    } catch (err) { appendSystem(`DB init failed (non-fatal): ${err.message}`); }
+
+    if (config._forgeTarget) {
+      const t = config._forgeTarget;
+      forgeState.spec = { ...forgeState.spec, ...t.spec };
+      forgeState.phase = 'confirm';
+      appendSystem(`Re-forging: ${t.spec?.name || t.toolName || '(unknown)'}`);
+    }
+
+    // If returning from model-compare with a chosen spec, apply it
+    if (config._chosenSpec) {
+      forgeState = { ...forgeState, spec: { ...forgeState.spec, ...config._chosenSpec } };
+      config._chosenSpec = null; // consume it
+      appendSystem('Applied spec from model comparison.');
+    }
+
+    updatePhaseBar();
+    updateSpecPanel();
+    await doStep(null);
+  });
+
+  // ── Input (managed by startInput / readInput) ────────────────────────
+
+  // ── Key bindings ───────────────────────────────────────────────────────
+
+  // e/i = enter input mode (vim-style)
+  screenKey(['e', 'i'], () => {
+    if (inputActive) return;
+    startInput();
+  });
+
+  screenKey('tab', () => {
+    if (inputActive) {
+      inputBox.cancel();
+    } else if (screen.focused === log) {
+      specPanel.focus();
+      log.style.border = { fg: '#333333' };
+      specPanel.style.border = { fg: 'cyan' };
+      screen.render();
+    } else {
+      startInput();
+    }
+  });
+
+  screenKey('s', () => {
+    if (inputActive || busy || previewPending) return;
+    doStep('skip');
+  });
+
+  screenKey('m', () => {
+    if (inputActive || busy || previewPending) return;
+    config._forgeState = forgeState;
+    config._forgeInput = null;
+    navigate('model-compare');
+  });
+
+  screenKey('b', () => {
+    if (inputActive) return;
+    navigate('main-menu');
+  });
+
+  container.refresh = () => { /* live view — no-op */ };
+  return container;
+}

package/lib/views/main-menu.js

@@ -0,0 +1,275 @@
+/**
+ * Main Menu View — Title banner + navigable list with color-coded inline stats.
+ */
+
+import blessed from 'blessed';
+import { existsSync, readFileSync, unlinkSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = resolve(__dirname, '../..');
+const LOCK_FILE = resolve(PROJECT_ROOT, '.forge-service.lock');
+
+function readLock() {
+  if (!existsSync(LOCK_FILE)) return null;
+  try { return JSON.parse(readFileSync(LOCK_FILE, 'utf-8')); } catch (_) { return null; }
+}
+import { loadApis } from '../api-loader.js';
+import { getExistingTools, getToolsWithMetadata } from '../tools-scanner.js';
+import { getExistingVerifiers } from '../verifier-scanner.js';
+import { inferOutputGroups, getVerifiersForGroups } from '../output-groups.js';
+
+const MENU_ITEMS = [
+  { key: 'tools-evals',        label: 'Tools & Evals',       icon: '⚙' },
+  { key: 'forge',              label: 'Forge Tool',          icon: '⚒' },
+  { key: 'forge-agent',        label: 'Forge Agent',         icon: '◈' },
+  { key: 'endpoints',          label: 'Endpoints',           icon: '⇄' },
+  { key: 'verifier-coverage',  label: 'Verifier Coverage',   icon: '✔' },
+  { key: 'performance',        label: 'Performance',         icon: '▲' },
+  { key: 'chat',               label: 'Chat / Test Model',   icon: '◎' },
+  { key: 'settings',           label: 'Settings',            icon: '⊙' },
+  { key: 'run-evals',          label: 'Run Evals',           icon: '▶' },
+];
+
+const BANNER_HEIGHT = 5;
+
+async function buildStats(config) {
+  const project = config?.project || {};
+  const api = config?.api || {};
+  const verification = config?.verification || {};
+
+  const tools = getExistingTools(project);
+
+  let endpoints = [];
+  let uncovered = 0;
+  try {
+    endpoints = await loadApis(api);
+    const toolSet = new Set(tools.map((t) => t.toLowerCase().replace(/-/g, '_')));
+    uncovered = endpoints.filter((e) => {
+      const name = (e.name || '').toLowerCase().replace(/-/g, '_');
+      return !toolSet.has(name);
+    }).length;
+  } catch (_) { /* no api config */ }
+
+  let allCovered = false;
+  try {
+    const toolMeta = getToolsWithMetadata(project);
+    const verifiers = getExistingVerifiers(verification);
+    allCovered = toolMeta.length > 0 && toolMeta.every((t) => {
+      const groups = inferOutputGroups(t);
+      return getVerifiersForGroups(groups).some((v) => verifiers.includes(v));
+    });
+  } catch (_) { /* skip */ }
+
+  let hasEvalHistory = false;
+  try {
+    const dbPath = resolve(process.cwd(), config?.dbPath || 'forge.db');
+    if (existsSync(dbPath)) {
+      const { getDb, getEvalSummary } = await import('../db.js');
+      hasEvalHistory = getEvalSummary(getDb(dbPath)).length > 0;
+    }
+  } catch (_) { /* sqlite not available */ }
+
+  let generationStats = { complete: 0, inProgress: 0 };
+  try {
+    const dbPath = resolve(process.cwd(), config?.dbPath || 'forge.db');
+    if (existsSync(dbPath)) {
+      const { getDb, getToolGenerations } = await import('../db.js');
+      const generations = getToolGenerations(getDb(dbPath));
+      generationStats.complete = generations.filter((g) => g.status === 'complete').length;
+      generationStats.inProgress = generations.filter((g) => g.status === 'in_progress').length;
+    }
+  } catch (_) { /* sqlite not available */ }
+
+  const model = config?.model || 'not set';
+
+  let chatProvider = 'no key';
+  try {
+    const envPath = resolve(process.cwd(), '.env');
+    if (existsSync(envPath)) {
+      const envText = readFileSync(envPath, 'utf-8');
+      if (/ANTHROPIC_API_KEY\s*=\s*\S/.test(envText)) chatProvider = 'anthropic';
+      else if (/OPENAI_API_KEY\s*=\s*\S/.test(envText)) chatProvider = 'openai';
+    }
+  } catch (_) { /* skip */ }
+
+  const serviceRunning = readLock() !== null;
+  return { toolsCount: tools.length, uncovered, endpointsTotal: endpoints.length, allCovered, hasEvalHistory, model, chatProvider, serviceRunning, generationStats };
+}
+
+function colorStat(text, level) {
+  // level: 'good' | 'warn' | 'neutral' | 'dim'
+  if (level === 'good')    return `{green-fg}${text}{/green-fg}`;
+  if (level === 'warn')    return `{yellow-fg}${text}{/yellow-fg}`;
+  if (level === 'neutral') return `{white-fg}${text}{/white-fg}`;
+  return `{#888888-fg}${text}{/#888888-fg}`;
+}
+
+function buildItems(stats) {
+  const toolsStat    = colorStat(`${stats.toolsCount} tool${stats.toolsCount !== 1 ? 's' : ''}`, stats.toolsCount > 0 ? 'good' : 'dim');
+  const forgeStat    = stats.generationStats.complete > 0 || stats.generationStats.inProgress > 0
+    ? colorStat(`${stats.generationStats.complete} complete`, 'good') +
+      (stats.generationStats.inProgress > 0 ? '  ' + colorStat(`${stats.generationStats.inProgress} in progress`, 'warn') : '')
+    : colorStat('no sessions yet', 'dim');
+  const epStat       = colorStat(`${stats.endpointsTotal} total`, 'neutral') +
+    (stats.uncovered > 0 ? ', ' + colorStat(`${stats.uncovered} uncovered`, 'warn') : '');
+  const verifStat    = stats.allCovered ? colorStat('✓ all covered', 'good') : colorStat('⚠ gaps detected', 'warn');
+  const perfStat     = stats.hasEvalHistory ? colorStat('has history', 'good') : colorStat('no history', 'dim');
+  const chatStat     = stats.chatProvider !== 'no key'
+    ? colorStat(`via ${stats.chatProvider}`, 'good')
+    : colorStat('no api key', 'dim');
+  const modelStat    = colorStat(stats.model, 'neutral');
+
+  // Column widths: icon (2) + num (2) + label (22) + stat
+  const row = (num, icon, label, stat) =>
+    ` {bold}${num}{/bold}  ${icon}  {white-fg}${label.padEnd(22)}{/white-fg}${stat}`;
+
+  const agentStat = colorStat('stage-aware chat', 'dim');
+
+  return [
+    row('1', MENU_ITEMS[0].icon, MENU_ITEMS[0].label, toolsStat),
+    row('2', MENU_ITEMS[1].icon, MENU_ITEMS[1].label, forgeStat),
+    row('3', MENU_ITEMS[2].icon, MENU_ITEMS[2].label, agentStat),
+    row('4', MENU_ITEMS[3].icon, MENU_ITEMS[3].label, epStat),
+    row('5', MENU_ITEMS[4].icon, MENU_ITEMS[4].label, verifStat),
+    row('6', MENU_ITEMS[5].icon, MENU_ITEMS[5].label, perfStat),
+    row('7', MENU_ITEMS[6].icon, MENU_ITEMS[6].label, chatStat),
+    row('8', MENU_ITEMS[7].icon, MENU_ITEMS[7].label, modelStat),
+    row('9', MENU_ITEMS[8].icon, MENU_ITEMS[8].label, colorStat('eval runner', 'dim')),
+  ];
+}
+
+export function createView({ screen, content, config, navigate, setFooter, screenKey, startService }) {
+  const container = blessed.box({
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    tags: true
+  });
+
+  let serviceRunning = false;
+
+  // ── Title banner ──────────────────────────────────────────────────────────
+  const banner = blessed.box({
+    parent: container,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: BANNER_HEIGHT,
+    tags: true,
+    border: { type: 'line' },
+    style: { border: { fg: 'blue' } },
+    align: 'center',
+    valign: 'middle',
+    content: [
+      '',
+      ' {bold}{cyan-fg}⚒  T O O L   F O R G E{/cyan-fg}{/bold} ',
+      ' {#555555-fg}Build · Test · Verify{/#555555-fg} ',
+    ].join('\n')
+  });
+
+  // ── Divider between banner and list ───────────────────────────────────────
+  const divider = blessed.box({
+    parent: container,
+    top: BANNER_HEIGHT,
+    left: 0,
+    width: '100%',
+    height: 1,
+    tags: true,
+    content: '{#333333-fg}' + '─'.repeat(screen.width || 200) + '{/#333333-fg}'
+  });
+
+  // ── Service notice bar (1 row, shown when service is not running) ─────────
+  const noticeBar = blessed.box({
+    parent: container,
+    top: BANNER_HEIGHT + 1,
+    left: 0,
+    width: '100%',
+    height: 1,
+    tags: true
+  });
+
+  // ── Menu list ─────────────────────────────────────────────────────────────
+  const list = blessed.list({
+    parent: container,
+    top: BANNER_HEIGHT + 2,
+    left: 2,
+    width: '100%-4',
+    height: `100%-${BANNER_HEIGHT + 4}`,
+    tags: true,
+    keys: true,
+    vi: true,
+    mouse: true,
+    style: {
+      selected: { bg: '#1a3a5c', bold: true },
+      item: { fg: 'white' }
+    }
+  });
+
+  list.on('select', (item, index) => {
+    const target = MENU_ITEMS[index];
+    if (target) navigate(target.key);
+  });
+
+  list.key(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (ch) => {
+    const idx = parseInt(ch, 10) - 1;
+    if (MENU_ITEMS[idx]) navigate(MENU_ITEMS[idx].key);
+  });
+
+  // ── s = toggle service (start / stop) ───────────────────────────────────
+  let lastStatsJson = '';
+
+  screenKey('s', () => {
+    if (serviceRunning) {
+      const lock = readLock();
+      if (lock?.pid && Number.isInteger(lock.pid) && lock.pid > 0) {
+        try { process.kill(lock.pid); } catch (_) { /* already dead */ }
+      }
+      try { unlinkSync(LOCK_FILE); } catch (_) { /* ignore */ }
+      serviceRunning = false;
+      lastStatsJson = ''; // force next refresh to re-render
+    } else {
+      startService?.();
+    }
+  });
+
+  setFooter(
+    ' {cyan-fg}↑↓{/cyan-fg} navigate  {cyan-fg}Enter{/cyan-fg} select' +
+    '  {cyan-fg}1-9{/cyan-fg} jump  {cyan-fg}s{/cyan-fg} service  {cyan-fg}q{/cyan-fg} quit'
+  );
+
+  container.refresh = async () => {
+    try {
+      const stats = await buildStats(config);
+      const statsJson = JSON.stringify(stats);
+      if (statsJson === lastStatsJson) return; // no change — skip render
+      lastStatsJson = statsJson;
+
+      serviceRunning = stats.serviceRunning;
+      list.setItems(buildItems(stats));
+
+      if (!serviceRunning) {
+        noticeBar.setContent(
+          ' {yellow-fg}⚡ Service stopped{/yellow-fg}' +
+          '  {cyan-fg}s{/cyan-fg} {#888888-fg}to start{/#888888-fg}'
+        );
+      } else {
+        noticeBar.setContent(
+          ' {green-fg}⚡ Service running{/green-fg}' +
+          '  {cyan-fg}s{/cyan-fg} {#888888-fg}to stop{/#888888-fg}'
+        );
+      }
+    } catch (_) {
+      list.setItems(MENU_ITEMS.map((m, i) => ` ${i + 1}  ${m.icon}  ${m.label}`));
+    }
+    screen.render();
+  };
+
+  container.refresh();
+  list.focus();
+
+  return container;
+}
+