agent-tool-forge 0.3.0

package/lib/views/settings.js

@@ -0,0 +1,829 @@
+/**
+ * Settings View — Model selector, system prompt editor, forge skill prompt, .env manager.
+ */
+
+import blessed from 'blessed';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = resolve(__dirname, '../..');
+const CONFIG_FILE = resolve(PROJECT_ROOT, 'forge.config.json');
+const ENV_FILE = resolve(PROJECT_ROOT, '.env');
+const SKILL_FILE = resolve(PROJECT_ROOT, 'skills/forge-tool/SKILL.md');
+
+const CLAUDE_MODELS = [
+  'claude-opus-4-6',
+  'claude-sonnet-4-6',
+  'claude-haiku-4-5-20251001'
+];
+
+const OPENAI_MODELS = [
+  'gpt-4o',
+  'gpt-4o-mini',
+  'o1',
+  'o3-mini'
+];
+
+const GOOGLE_MODELS = [
+  'gemini-2.0-flash',
+  'gemini-2.5-pro-exp'
+];
+
+const DEEPSEEK_MODELS = [
+  'deepseek-chat',
+  'deepseek-reasoner'
+];
+
+/**
+ * Build the model list based on which API keys are present in .env.
+ * Always includes Claude models (forge-tool always uses Claude).
+ * Adds provider sections when matching keys are detected.
+ * Always ends with a "Custom..." entry.
+ */
+function buildModelList(envMap) {
+  const sections = [
+    { header: '── Anthropic (forge-tool) ──────────────', models: CLAUDE_MODELS }
+  ];
+
+  const hasOpenAI   = Object.keys(envMap).some((k) => /OPENAI/i.test(k));
+  const hasGoogle   = Object.keys(envMap).some((k) => /GOOGLE|GEMINI/i.test(k));
+  const hasDeepSeek = Object.keys(envMap).some((k) => /DEEPSEEK/i.test(k));
+
+  if (hasOpenAI)   sections.push({ header: '── OpenAI ──────────────────────────────', models: OPENAI_MODELS });
+  if (hasGoogle)   sections.push({ header: '── Google ──────────────────────────────', models: GOOGLE_MODELS });
+  if (hasDeepSeek) sections.push({ header: '── DeepSeek ────────────────────────────', models: DEEPSEEK_MODELS });
+
+  // Flat list with divider labels (not selectable) interleaved
+  const items = [];   // display strings
+  const values = [];  // corresponding model strings (null for divider rows)
+
+  for (const section of sections) {
+    items.push(`{#555555-fg}${section.header}{/#555555-fg}`);
+    values.push(null); // divider — not selectable
+    for (const m of section.models) {
+      items.push(m);
+      values.push(m);
+    }
+  }
+
+  items.push('{#555555-fg}────────────────────────────────────────{/#555555-fg}');
+  values.push(null);
+  items.push('  Custom model...');
+  values.push('__custom__');
+
+  return { items, values };
+}
+
+function loadConfig() {
+  try { return JSON.parse(readFileSync(CONFIG_FILE, 'utf-8')); } catch (_) { return {}; }
+}
+
+function saveConfig(cfg) {
+  writeFileSync(CONFIG_FILE, JSON.stringify(cfg, null, 2), 'utf-8');
+}
+
+function loadEnv() {
+  if (!existsSync(ENV_FILE)) return {};
+  const lines = readFileSync(ENV_FILE, 'utf-8').split('\n');
+  const out = {};
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#')) continue;
+    const eqIdx = trimmed.indexOf('=');
+    if (eqIdx === -1) continue;
+    const key = trimmed.slice(0, eqIdx).trim();
+    const val = trimmed.slice(eqIdx + 1).trim().replace(/^["']|["']$/g, '');
+    out[key] = val;
+  }
+  return out;
+}
+
+function saveEnv(envMap) {
+  const lines = Object.entries(envMap).map(([k, v]) => `${k}=${v}`);
+  writeFileSync(ENV_FILE, lines.join('\n') + '\n', 'utf-8');
+}
+
+function maskValue(val) {
+  if (!val || val.length <= 4) return '****';
+  return val.slice(0, 3) + '****';
+}
+
+export function createView({ screen, content, config, navigate, setFooter, screenKey, openPopup, closePopup, startService }) {
+  const list = blessed.list({
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    tags: true,
+    keys: true,
+    vi: true,
+    mouse: true,
+    style: {
+      selected: { bg: 'blue', fg: 'white', bold: true },
+      item: { fg: 'white' }
+    },
+    padding: { top: 1, left: 2 }
+  });
+
+  setFooter(' {bold}↑↓{/bold} navigate  {bold}Enter{/bold} select section  {bold}r{/bold} refresh  {bold}b{/bold} back');
+
+  function afterPopupClose() {
+    list.refresh();
+    list.focus();
+    screen.render();
+  }
+
+  list.on('select', (item, index) => {
+    switch (index) {
+      case 0: showModelSelector(screen, config, openPopup, closePopup, 'generation', afterPopupClose); break;
+      case 1: showModelSelector(screen, config, openPopup, closePopup, 'eval', afterPopupClose); break;
+      case 2: showModelSelector(screen, config, openPopup, closePopup, 'verifier', afterPopupClose); break;
+      case 3: showModelSelector(screen, config, openPopup, closePopup, 'secondary', afterPopupClose); break;
+      case 4: showPromptEditor(screen, config, 'agent', openPopup, closePopup, afterPopupClose); break;
+      case 5: showPromptEditor(screen, config, 'skill', openPopup, closePopup, afterPopupClose); break;
+      case 6: showApiSourceEditor(screen, config, openPopup, closePopup, afterPopupClose); break;
+      case 7: showEnvManager(screen, config, openPopup, closePopup, afterPopupClose); break;
+      case 8: showModelMatrixEditor(screen, config, openPopup, closePopup, afterPopupClose); break;
+    }
+  });
+
+  let lastSettingsJson = '';
+
+  list.refresh = () => {
+    const cfg = loadConfig();
+    const envMap = loadEnv();
+
+    // Quick change detection — skip render if nothing changed
+    const snapshot = JSON.stringify({ cfg, envKeys: Object.keys(envMap) });
+    if (snapshot === lastSettingsJson) return;
+    lastSettingsJson = snapshot;
+    const envCount = Object.keys(envMap).length;
+
+    const systemPromptStatus = cfg.systemPromptPath
+      ? `{green-fg}${cfg.systemPromptPath}{/green-fg}`
+      : '{#888888-fg}not configured{/#888888-fg}';
+
+    const skillStatus = existsSync(SKILL_FILE)
+      ? '{green-fg}skills/forge-tool/SKILL.md{/green-fg}'
+      : '{red-fg}not found{/red-fg}';
+
+    const models = cfg.models || {};
+    const generationModelDisplay = (models.generation || cfg.model)
+      ? `{cyan-fg}${models.generation || cfg.model}{/cyan-fg}`
+      : '{yellow-fg}not set (default: claude-sonnet-4-6){/yellow-fg}';
+    const evalModelDisplay = models.eval
+      ? `{cyan-fg}${models.eval}{/cyan-fg}`
+      : '{#888888-fg}default (claude-sonnet-4-6){/#888888-fg}';
+    const verifierModelDisplay = models.verifier
+      ? `{cyan-fg}${models.verifier}{/cyan-fg}`
+      : '{#888888-fg}default (claude-sonnet-4-6){/#888888-fg}';
+    const secondaryModelDisplay = models.secondary
+      ? `{cyan-fg}${models.secondary}{/cyan-fg}`
+      : '{#888888-fg}not set (model comparison disabled){/#888888-fg}';
+
+    // Detect which API providers have keys
+    const providers = [];
+    if (Object.keys(envMap).some((k) => /ANTHROPIC/i.test(k)))  providers.push('{green-fg}Anthropic{/green-fg}');
+    if (Object.keys(envMap).some((k) => /OPENAI/i.test(k)))     providers.push('{green-fg}OpenAI{/green-fg}');
+    if (Object.keys(envMap).some((k) => /GOOGLE|GEMINI/i.test(k))) providers.push('{green-fg}Google{/green-fg}');
+    if (Object.keys(envMap).some((k) => /DEEPSEEK/i.test(k)))   providers.push('{green-fg}DeepSeek{/green-fg}');
+    const keysSummary = envCount === 0
+      ? '{#888888-fg}no keys{/#888888-fg}'
+      : `${envCount} key(s)${providers.length ? '  ' + providers.join(' ') : ''}`;
+
+    // API source status
+    const apiSource = cfg.api?.manifestPath || cfg.api?.discovery?.url || cfg.api?.discovery?.file;
+    const apiSourceStatus = apiSource
+      ? `{green-fg}${apiSource}{/green-fg}`
+      : '{yellow-fg}not configured{/yellow-fg}';
+
+    const matrix = cfg.modelMatrix || [];
+    const matrixDisplay = matrix.length > 0
+      ? `{cyan-fg}${matrix.length} model(s): ${matrix.join(', ')}{/cyan-fg}`
+      : '{#888888-fg}not configured (add models to compare){/#888888-fg}';
+
+    const row = (num, label, val) =>
+      `  {bold}${num}.{/bold} {white-fg}${label.padEnd(22)}{/white-fg}${val}`;
+
+    list.setItems([
+      row('1', 'Generation Model', generationModelDisplay),
+      row('2', 'Eval Model',       evalModelDisplay),
+      row('3', 'Verifier Model',   verifierModelDisplay),
+      row('4', 'Secondary Model',  secondaryModelDisplay),
+      row('5', 'Agent System Prompt', systemPromptStatus),
+      row('6', 'Forge Skill Prompt',  skillStatus),
+      row('7', 'API Source',          apiSourceStatus),
+      row('8', 'API Keys / Secrets',  keysSummary),
+      row('9', 'Model Matrix',        matrixDisplay)
+    ]);
+    screen.render();
+  };
+
+  list.refresh();
+  list.focus();
+  return list;
+}
+
+function showModelSelector(screen, config, openPopup, closePopup, role = 'generation', onClose) {
+  const cfg = loadConfig();
+  const current = (cfg.models?.[role] || (role === 'generation' ? cfg.model : null)) || '';
+  const envMap = loadEnv();
+  const { items, values } = buildModelList(envMap);
+
+  // Mark current selection
+  const markedItems = items.map((label, i) => {
+    const val = values[i];
+    if (!val || val === '__custom__') return `  ${label}`;
+    return val === current
+      ? `  {green-fg}● ${val}{/green-fg}`
+      : `    ${val}`;
+  });
+
+  const noteHeight = 2;
+  const listHeight = Math.min(items.length + noteHeight + 4, 24);
+
+  const roleLabel = role.charAt(0).toUpperCase() + role.slice(1);
+
+  const popup = blessed.box({
+    parent: screen,
+    border: 'line',
+    height: listHeight,
+    width: 54,
+    top: 'center',
+    left: 'center',
+    label: ` Select ${roleLabel} Model `,
+    tags: true,
+    style: { border: { fg: 'blue' } }
+  });
+
+  // Note about what this field controls
+  blessed.box({
+    parent: popup,
+    top: 0,
+    left: 1,
+    width: '100%-2',
+    height: 1,
+    tags: true,
+    content: `{#888888-fg}Controls which model is used for ${role} tasks{/#888888-fg}`
+  });
+
+  const list = blessed.list({
+    parent: popup,
+    top: noteHeight,
+    left: 0,
+    width: '100%',
+    height: listHeight - noteHeight - 2,
+    tags: true,
+    keys: true,
+    vi: true,
+    style: { selected: { bg: '#1a3a5c', fg: 'white' } },
+    items: markedItems
+  });
+
+  function applySelection(idx) {
+    const val = values[idx];
+    if (val === null) return; // divider row — skip
+    if (val === '__custom__') {
+      closePopup?.();      // close the model list popup
+      popup.destroy();
+      screen.render();
+      openPopup?.();       // open for the new text prompt
+      const prompt = blessed.prompt({
+        parent: screen,
+        border: 'line',
+        height: 'shrink',
+        width: 'half',
+        top: 'center',
+        left: 'center',
+        label: ' Custom Model Name ',
+        tags: true,
+        keys: true
+      });
+      prompt.input('Enter model ID (e.g. gpt-4o, gemini-2.0-flash):', current, (err, val) => {
+        closePopup?.();    // close the text prompt
+        if (!err && val && val.trim()) {
+          cfg.models = cfg.models || {};
+          cfg.models[role] = val.trim();
+          try { saveConfig(cfg); } catch (_) { onClose?.(); return; }
+          if (!config.models) config.models = {};
+          config.models[role] = val.trim();
+          if (role === 'generation') config.model = val.trim();
+        }
+        onClose?.();
+      });
+      return;
+    }
+    cfg.models = cfg.models || {};
+    cfg.models[role] = val;
+    try { saveConfig(cfg); } catch (_) { onClose?.(); return; }
+    if (!config.models) config.models = {};
+    config.models[role] = val;
+    // Backwards compat: also update config.model for generation role
+    if (role === 'generation') config.model = val;
+    closePopup?.();
+    popup.destroy();
+    onClose?.();
+  }
+
+  openPopup?.();
+  list.on('select', (item, idx) => applySelection(idx));
+  list.key(['escape', 'b'], () => { closePopup?.(); popup.destroy(); onClose?.(); });
+  list.focus();
+  screen.render();
+}
+
+function showPromptEditor(screen, config, type, openPopup, closePopup, onClose) {
+  const cfg = loadConfig();
+  let filePath, label;
+
+  if (type === 'agent') {
+    filePath = cfg.systemPromptPath ? resolve(PROJECT_ROOT, cfg.systemPromptPath) : null;
+    label = ' Agent System Prompt ';
+  } else {
+    filePath = SKILL_FILE;
+    label = ' Forge Skill Prompt ';
+  }
+
+  let content = '';
+  if (filePath && existsSync(filePath)) {
+    try { content = readFileSync(filePath, 'utf-8'); } catch (_) { content = '(could not read file)'; }
+  } else if (type === 'agent' && !cfg.systemPromptPath) {
+    content = '(systemPromptPath not set in forge.config.json)';
+  } else {
+    content = '(file not found: ' + filePath + ')';
+  }
+
+  const box = blessed.scrollablebox({
+    parent: screen,
+    border: 'line',
+    top: 1,
+    left: 2,
+    right: 2,
+    bottom: 3,
+    label,
+    tags: false,
+    scrollable: true,
+    alwaysScroll: true,
+    keys: true,
+    content,
+    scrollbar: { ch: '│', style: { fg: 'white' } }
+  });
+
+  const helpBar = blessed.box({
+    parent: screen,
+    bottom: 1,
+    left: 0,
+    width: '100%',
+    height: 1,
+    tags: true,
+    content: ' {bold}e{/bold} edit in $EDITOR  {bold}p{/bold} change path  {bold}Escape{/bold} close',
+    style: { bg: 'black', fg: 'white' }
+  });
+
+  box.key('e', async () => {
+    if (!filePath) return;
+    const editor = process.env.EDITOR || 'vi';
+    const { spawn } = await import('child_process');
+    screen.program.disableMouse();
+    screen.program.normalBuffer();
+    const child = spawn(editor, [filePath], { stdio: 'inherit' });
+    child.on('exit', () => {
+      screen.program.alternateBuffer();
+      screen.program.enableMouse();
+      screen.render();
+    });
+  });
+
+  openPopup?.();
+
+  box.key('p', () => {
+    if (type !== 'agent') return; // Only agent path is changeable
+    const prompt = blessed.prompt({
+      parent: screen,
+      border: 'line',
+      height: 'shrink',
+      width: 'half',
+      top: 'center',
+      left: 'center',
+      label: ' Set System Prompt Path ',
+      tags: true,
+      keys: true
+    });
+    prompt.input('Enter path to system prompt file:', cfg.systemPromptPath || '', (err, val) => {
+      if (!err && val) {
+        cfg.systemPromptPath = val;
+        try { saveConfig(cfg); } catch (_) { box.focus(); screen.render(); return; }
+        config.systemPromptPath = val;
+        // Reload the file content in the box
+        const newPath = resolve(PROJECT_ROOT, val);
+        let newContent = '';
+        if (existsSync(newPath)) {
+          try { newContent = readFileSync(newPath, 'utf-8'); } catch (_) { newContent = '(could not read file)'; }
+        } else {
+          newContent = '(file not found: ' + val + ')';
+        }
+        filePath = newPath;
+        box.setContent(newContent);
+      }
+      box.focus();
+      screen.render();
+    });
+  });
+
+  box.key(['escape', 'b', 'q'], () => {
+    closePopup?.();
+    box.destroy();
+    helpBar.destroy();
+    onClose?.();
+  });
+
+  box.focus();
+  screen.render();
+}
+
+function showApiSourceEditor(screen, config, openPopup, closePopup, onClose) {
+  const cfg = loadConfig();
+  const api = cfg.api || {};
+
+  // Determine current values
+  const currentManifest = api.manifestPath || '';
+  const currentDiscoveryUrl = api.discovery?.url || '';
+  const currentDiscoveryFile = api.discovery?.file || '';
+
+  const box = blessed.form({
+    parent: screen,
+    border: 'line',
+    top: 2,
+    left: 4,
+    right: 4,
+    height: 14,
+    label: ' Configure API Source ',
+    tags: true,
+    keys: true
+  });
+
+  blessed.text({ parent: box, top: 0, left: 1, tags: true,
+    content: '{#888888-fg}Set one or more sources. Manifest overrides OpenAPI for the same endpoint.{/#888888-fg}' });
+
+  blessed.text({ parent: box, top: 2, left: 1, content: 'Manifest path:   ' });
+  const manifestInput = blessed.textbox({
+    parent: box, top: 2, left: 18, right: 2, height: 1,
+    inputOnFocus: true, style: { fg: 'white', bg: '#1a3a5c' },
+    value: currentManifest
+  });
+
+  blessed.text({ parent: box, top: 4, left: 1, content: 'OpenAPI URL:     ' });
+  const urlInput = blessed.textbox({
+    parent: box, top: 4, left: 18, right: 2, height: 1,
+    inputOnFocus: true, style: { fg: 'white', bg: '#1a3a5c' },
+    value: currentDiscoveryUrl
+  });
+
+  blessed.text({ parent: box, top: 6, left: 1, content: 'OpenAPI file:    ' });
+  const fileInput = blessed.textbox({
+    parent: box, top: 6, left: 18, right: 2, height: 1,
+    inputOnFocus: true, style: { fg: 'white', bg: '#1a3a5c' },
+    value: currentDiscoveryFile
+  });
+
+  const statusBar = blessed.box({ parent: box, bottom: 2, left: 1, right: 1, height: 1, tags: true });
+
+  const saveBtn = blessed.button({
+    parent: box, bottom: 0, left: 1, width: 10, height: 1, content: ' Save ',
+    style: { bg: 'green', fg: 'white', focus: { bg: 'blue' } }, keys: true, mouse: true
+  });
+  const cancelBtn = blessed.button({
+    parent: box, bottom: 0, left: 13, width: 10, height: 1, content: ' Cancel ',
+    style: { bg: 'red', fg: 'white', focus: { bg: 'blue' } }, keys: true, mouse: true
+  });
+
+  function doClose() {
+    closePopup?.();
+    box.destroy();
+    onClose?.();
+  }
+
+  saveBtn.on('press', () => {
+    const manifest = manifestInput.getValue().trim();
+    const url = urlInput.getValue().trim();
+    const file = fileInput.getValue().trim();
+
+    cfg.api = cfg.api || {};
+    if (manifest) {
+      cfg.api.manifestPath = manifest;
+    } else {
+      delete cfg.api.manifestPath;
+    }
+    if (url || file) {
+      cfg.api.discovery = { type: 'openapi' };
+      if (url) cfg.api.discovery.url = url;
+      if (file) cfg.api.discovery.file = file;
+    } else {
+      delete cfg.api.discovery;
+    }
+    // Sync runtime config
+    config.api = cfg.api;
+
+    try {
+      saveConfig(cfg);
+      statusBar.setContent('{green-fg}Saved!{/green-fg}');
+      screen.render();
+      setTimeout(doClose, 600);
+    } catch (err) {
+      statusBar.setContent(`{red-fg}Save failed: ${err.message}{/red-fg}`);
+      screen.render();
+    }
+  });
+
+  cancelBtn.on('press', doClose);
+  box.key(['escape', 'b'], doClose);
+
+  openPopup?.();
+  manifestInput.focus();
+  screen.render();
+}
+
+function showModelMatrixEditor(screen, config, openPopup, closePopup, onClose) {
+  const cfg = loadConfig();
+  let matrix = [...(cfg.modelMatrix || [])];
+
+  const container = blessed.box({
+    parent: screen,
+    border: 'line',
+    top: 2,
+    left: 4,
+    right: 4,
+    height: 18,
+    label: ' Model Comparison Matrix ',
+    tags: true
+  });
+
+  blessed.text({
+    parent: container, top: 0, left: 1, tags: true,
+    content: '{#888888-fg}Models run in parallel when "Compare models" is triggered from Tools & Evals.{/#888888-fg}'
+  });
+
+  const modelList = blessed.list({
+    parent: container,
+    top: 2, left: 1, right: 1, height: 10,
+    tags: true, keys: true, vi: true,
+    style: {
+      selected: { bg: '#1a3a5c', fg: 'white' },
+      item: { fg: 'white' }
+    }
+  });
+
+  const statusBar = blessed.box({
+    parent: container, bottom: 2, left: 1, right: 1, height: 1, tags: true
+  });
+
+  const helpBar = blessed.box({
+    parent: container, bottom: 0, left: 1, right: 1, height: 1, tags: true,
+    content: ' {bold}n{/bold} add  {bold}d{/bold} delete  {bold}s{/bold} save  {bold}Escape{/bold} cancel'
+  });
+
+  function renderList() {
+    if (matrix.length === 0) {
+      modelList.setItems(['{#888888-fg}(no models — press n to add){/#888888-fg}']);
+    } else {
+      modelList.setItems(matrix.map((m) => `  ${m}`));
+    }
+    screen.render();
+  }
+
+  renderList();
+
+  modelList.key('n', () => {
+    const envMap = loadEnv();
+    const { items, values } = buildModelList(envMap);
+    const popup = blessed.list({
+      parent: screen,
+      border: 'line',
+      height: Math.min(items.length + 4, 20),
+      width: 54,
+      top: 'center', left: 'center',
+      label: ' Add Model to Matrix ',
+      tags: true, keys: true, vi: true,
+      style: { border: { fg: 'blue' }, selected: { bg: '#1a3a5c', fg: 'white' } },
+      items: items.map((it, i) => values[i] === null ? `  ${it}` : `    ${it}`)
+    });
+    popup.on('select', (item, idx) => {
+      const val = values[idx];
+      if (!val || val === null) return;
+      let modelName = val;
+      if (val === '__custom__') {
+        popup.destroy();
+        const prompt = blessed.prompt({
+          parent: screen, border: 'line', height: 'shrink', width: 'half',
+          top: 'center', left: 'center', label: ' Custom Model ', tags: true, keys: true
+        });
+        prompt.input('Model ID:', '', (err, v) => {
+          if (!err && v?.trim() && !matrix.includes(v.trim())) {
+            matrix.push(v.trim());
+            renderList();
+          }
+          screen.render();
+        });
+        return;
+      }
+      popup.destroy();
+      if (!matrix.includes(modelName)) {
+        matrix.push(modelName);
+        renderList();
+      }
+      modelList.focus();
+      screen.render();
+    });
+    popup.key(['escape', 'q'], () => { popup.destroy(); modelList.focus(); screen.render(); });
+    popup.focus();
+    screen.render();
+  });
+
+  modelList.key('d', () => {
+    const idx = modelList.selected;
+    if (matrix.length === 0 || idx >= matrix.length) return;
+    matrix.splice(idx, 1);
+    renderList();
+  });
+
+  modelList.key('s', () => {
+    cfg.modelMatrix = matrix;
+    saveConfig(cfg);
+    config.modelMatrix = matrix;
+    statusBar.setContent('{green-fg}Saved!{/green-fg}');
+    screen.render();
+    setTimeout(() => {
+      closePopup?.();
+      container.destroy();
+      onClose?.();
+    }, 600);
+  });
+
+  openPopup?.();
+  container.key(['escape', 'b'], () => { closePopup?.(); container.destroy(); onClose?.(); });
+  modelList.focus();
+  screen.render();
+}
+
+function showEnvManager(screen, config, openPopup, closePopup, onClose) {
+  let envMap = loadEnv();
+  let unsaved = false;
+
+  const container = blessed.box({
+    parent: screen,
+    border: 'line',
+    top: 1,
+    left: 2,
+    right: 2,
+    bottom: 3,
+    label: ' API Keys / Secrets ',
+    tags: true
+  });
+
+  const table = blessed.listtable({
+    parent: container,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%-2',
+    tags: true,
+    keys: true,
+    vi: true,
+    style: {
+      header: { bold: true, fg: 'cyan' },
+      cell: { selected: { bg: 'blue', fg: 'white' } }
+    },
+    pad: 1
+  });
+
+  const statusBar = blessed.box({
+    parent: container,
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: 1,
+    tags: true
+  });
+
+  const helpBar = blessed.box({
+    parent: screen,
+    bottom: 1,
+    left: 0,
+    width: '100%',
+    height: 1,
+    tags: true,
+    content: ' {bold}Enter{/bold} edit  {bold}n{/bold} new key  {bold}d{/bold} delete  {bold}s{/bold} save  {bold}Escape{/bold} close',
+    style: { bg: 'black', fg: 'white' }
+  });
+
+  function renderTable() {
+    const entries = Object.entries(envMap);
+    if (entries.length === 0) {
+      table.setData([['Key', 'Value'], ['(no keys)', '']]);
+    } else {
+      table.setData([['Key', 'Value'], ...entries.map(([k, v]) => [k, maskValue(v)])]);
+    }
+    statusBar.setContent(unsaved ? ' {yellow-fg}⚠ Unsaved changes — press s to save{/yellow-fg}' : ' {green-fg}Saved{/green-fg}');
+    screen.render();
+  }
+
+  renderTable();
+
+  table.key('enter', () => {
+    const idx = table.selected;
+    if (idx < 1) return;
+    const entries = Object.entries(envMap);
+    if (!entries[idx - 1]) return;
+    const [key, currentVal] = entries[idx - 1];
+
+    const prompt = blessed.prompt({
+      parent: screen,
+      border: 'line',
+      height: 'shrink',
+      width: 'half',
+      top: 'center',
+      left: 'center',
+      label: ` Edit ${key} `,
+      tags: true,
+      keys: true
+    });
+    prompt.input(`New value for ${key}:`, currentVal, (err, val) => {
+      if (!err && val !== null && val !== undefined) {
+        envMap[key] = val;
+        unsaved = true;
+        renderTable();
+      }
+    });
+  });
+
+  table.key('n', () => {
+    const prompt = blessed.prompt({
+      parent: screen,
+      border: 'line',
+      height: 'shrink',
+      width: 'half',
+      top: 'center',
+      left: 'center',
+      label: ' New Key ',
+      tags: true,
+      keys: true
+    });
+    prompt.input('Key name:', '', (err, key) => {
+      if (!err && key) {
+        const prompt2 = blessed.prompt({
+          parent: screen,
+          border: 'line',
+          height: 'shrink',
+          width: 'half',
+          top: 'center',
+          left: 'center',
+          label: ` Value for ${key} `,
+          tags: true,
+          keys: true
+        });
+        prompt2.input('Value:', '', (err2, val) => {
+          if (!err2) {
+            envMap[key] = val || '';
+            unsaved = true;
+            renderTable();
+          }
+        });
+      }
+    });
+  });
+
+  table.key('d', () => {
+    const idx = table.selected;
+    if (idx < 1) return;
+    const entries = Object.entries(envMap);
+    if (!entries[idx - 1]) return;
+    const [key] = entries[idx - 1];
+    delete envMap[key];
+    unsaved = true;
+    renderTable();
+  });
+
+  table.key('s', () => {
+    saveEnv(envMap);
+    unsaved = false;
+    renderTable();
+  });
+
+  openPopup?.();
+
+  function closeEnvManager() {
+    closePopup?.();
+    container.destroy();
+    helpBar.destroy();
+    onClose?.();
+  }
+
+  container.key(['escape', 'b'], closeEnvManager);
+  table.key(['escape', 'b'], closeEnvManager);
+
+  table.focus();
+  screen.render();
+}
+