adaptive-memory-multi-model-router 2.13.7 → 2.13.9

package/src/tui/dashboard.ts

@@ -1,257 +1,287 @@
 #!/usr/bin/env node
 /**
- * A3M Router TUI — Clean PI-style conversational interface
- *
- * Looks and feels exactly like PI, but for A3M routing.
- * Type queries → auto-routed to cheapest model. /slash commands.
+ * A3M Router — Terminal Overlay Box
+ * Draws a centered overlay ON TOP of existing terminal content.
+ * Does NOT clear the screen. Restores terminal when done.
+ * Pure ANSI — no fullscreen, no alt-buffer.
  */
 
-import * as blessed from 'blessed';
-
-// ═══════════════════════════════════════════════════
-// TOKYO NIGHT — same as PI's vibe
-// ═══════════════════════════════════════════════════
-
-const T = {
-  bg:      '#1a1b26',
-  surface: '#24283b',
-  dim:     '#565f89',
-  text:    '#c0caf5',
-  blue:    '#7aa2f7',
-  purple:  '#bb9af7',
-  green:   '#9ece6a',
-  yellow:  '#e0af68',
-  red:     '#f7768e',
-  cyan:    '#7dcfff',
+import * as readline from 'readline';
+
+
+const ansi = (n: number) => `\x1b[${n}m`;
+const R = ansi(0);
+const BOLD = ansi(1);
+const DIM = ansi(2);
+
+const C = {
+  bg:      '\x1b[48;5;234m',    // #1a1b26
+  surface: '\x1b[48;5;236m',    // #24283b
+  border:  '\x1b[38;5;60m',     // #3b4261
+  dim:     '\x1b[38;5;60m',     // #565f89
+  text:    '\x1b[38;5;189m',    // #c0caf5
+  blue:    '\x1b[38;5;111m',    // #7aa2f7
+  purple:  '\x1b[38;5;183m',    // #bb9af7
+  green:   '\x1b[38;5;114m',    // #9ece6a
+  yellow:  '\x1b[38;5;180m',    // #e0af68
+  red:     '\x1b[38;5;204m',    // #f7768e
+  cyan:    '\x1b[38;5;117m',    // #7dcfff
+  orange:  '\x1b[38;5;216m',    // #ff9e64
 };
 
-// ═══════════════════════════════════════════════════
-// SCREEN
-// ═══════════════════════════════════════════════════
-
-const screen = blessed.screen({
-  smartCSR: true,
-  title: 'A3M Router',
-  fullUnicode: true,
-  cursor: { shape: 'line', blink: true },
-});
-
-// ═══════════════════════════════════════════════════
-// MODEL/HEADER LINE (top — like PI shows model name)
-// ═══════════════════════════════════════════════════
-
-const header = blessed.box({
-  top: 0, left: 0, width: '100%', height: 1,
-  style: { fg: T.dim, bg: T.bg },
-  tags: true,
-});
 
-// ═══════════════════════════════════════════════════
-// CHAT AREA (fills the screen — like PI)
-// ═══════════════════════════════════════════════════
+let activeModel = 'nvidia/llama-3.1-8b';
+let totalCost = 0.000087;
+let reqCount = 4;
+const log: string[] = [];
 
-const chat = blessed.box({
-  top: 1, left: 0, width: '100%', height: '100%-2',
-  style: { fg: T.text, bg: T.bg },
-  scrollable: true,
-  alwaysScroll: true,
-  mouse: true,
-  keys: true,
-  tags: true,
-  padding: { left: 2, right: 2, top: 1, bottom: 0 },
-});
 
-// ═══════════════════════════════════════════════════
-// PROMPT LINE (bottom — like PI's > prompt)
-// ═══════════════════════════════════════════════════
-
-const prompt = blessed.textbox({
-  bottom: 0, left: 0, width: '100%', height: 1,
-  style: { fg: T.text, bg: T.surface },
-  inputOnFocus: true,
-  keys: true,
-  tags: true,
-});
-
-// ═══════════════════════════════════════════════════
-// STATE
-// ═══════════════════════════════════════════════════
-
-interface Line { role: 'system' | 'user' | 'a3m'; text: string; model?: string; ms?: number; cost?: number; }
-const lines: Line[] = [];
-let totalCost = 0;
-let reqCount = 0;
-let activeModel = 'nvidia/llama-3.1-8b';  // like PI shows model name
-
-function D(s: string) { return `{#565f89-fg}${s}{/}`; }
+function getSize(): [number, number] {
+  return [process.stdout.columns || 80, process.stdout.rows || 24];
+}
 
-// ═══════════════════════════════════════════════════
-// RENDER CHAT — exactly like PI
-// ═══════════════════════════════════════════════════
+function saveCursor() { process.stdout.write('\x1b[s'); }
+function restoreCursor() { process.stdout.write('\x1b[u'); }
+function moveTo(row: number, col: number) { process.stdout.write(`\x1b[${row};${col}H`); }
+function clearLine() { process.stdout.write('\x1b[2K'); }
+function hideCursor() { process.stdout.write('\x1b[?25l'); }
+function showCursor() { process.stdout.write('\x1b[?25h'); }
+
+const B = { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' };
+
+function drawOverlay(rows: number, cols: number, top: number, left: number, lines: string[]) {
+  const w = cols - 2;
+  
+  // Top border
+  moveTo(top, left);
+  process.stdout.write(C.bg + C.purple + B.tl + B.h.repeat(w) + B.tr + R);
+  
+  // Content rows
+  for (let i = 0; i < rows - 2; i++) {
+    moveTo(top + 1 + i, left);
+    const content = (i < lines.length ? lines[i] : '').padEnd(w, ' ');
+    process.stdout.write(C.bg + C.purple + B.v + R + C.bg + content + C.purple + B.v + R);
+  }
+  
+  // Bottom border
+  moveTo(top + rows - 1, left);
+  process.stdout.write(C.bg + C.purple + B.bl + B.h.repeat(w) + B.br + R);
+}
 
-function render() {
-  // Header: model name + stats (like PI)
-  header.setContent(
-    `  {bold}{#bb9af7-fg}A3M Router{/}  ${D('·')}  {#9ece6a-fg}${activeModel}{/}  ${D('·')}  ` +
-    `${D(`${reqCount} req`)}  ${D('·')}  ${D(`$${totalCost.toFixed(6)}`)}  ${D('·')}  ${D('/help')}`
-  );
+function drawPrompt(top: number, left: number, w: number, text: string) {
+  moveTo(top, left);
+  clearLine();
+  process.stdout.write(C.surface + C.text + BOLD + ' ▸ ' + R + C.surface + C.text + text + R);
+  moveTo(top, left + 3); // cursor after " ▸ "
+}
 
-  // Prompt
-  prompt.setValue('');
 
-  // Chat content
-  let out = '';
-  for (const l of lines) {
-    if (l.role === 'system') {
-      out += `  ${D(l.text)}\n`;
-    } else if (l.role === 'user') {
-      out += `\n  {bold}{#7dcfff-fg}▸{/} ${l.text}\n`;
-    } else {
-      // A3M response — with badges
-      const parts: string[] = [];
-      if (l.model) parts.push(`{#9ece6a-fg}${l.model}{/}`);
-      if (l.ms) parts.push(`{#e0af68-fg}${l.ms}ms{/}`);
-      if (l.cost !== undefined) parts.push(`{#ff9e64-fg}$${l.cost.toFixed(6)}{/}`);
-      out += `\n  {bold}{#bb9af7-fg}A3M{/}  ${parts.join(`  ${D('·')}  `)}\n`;
-      out += `  ${l.text}\n`;
+let inputBuf = '';
+let cursorPos = 3;
+
+function handleInput(char: string) {
+  if (char === '\r' || char === '\n') {
+    // Submit
+    const cmd = inputBuf.trim();
+    processCommand(cmd);
+    inputBuf = '';
+    cursorPos = 3;
+    render();
+  } else if (char === '\x7f' || char === '\b') {
+    // Backspace
+    if (inputBuf.length > 0) {
+      inputBuf = inputBuf.slice(0, -1);
+      cursorPos = Math.max(3, cursorPos - 1);
+      renderPromptLine();
     }
+  } else if (char === '\x1b') {
+    // Escape — handled separately
+  } else if (char >= ' ') {
+    inputBuf += char;
+    cursorPos++;
+    renderPromptLine();
   }
-
-  if (lines.length === 0) {
-    out = [
-      `\n`,
-      `  {bold}{#bb9af7-fg}⚡ A3M Router{/}  —  ${D('One prompt in. The right model out.')}`,
-      ``,
-      `  ${D('Type anything — auto-routed to cheapest capable model.')}`,
-      ``,
-      `  ${D('Commands:')}`,
-      `    {#7aa2f7-fg}/route <query>{/}    ${D('Route a prompt')}`,
-      `    {#7aa2f7-fg}/model <provider>{/}  ${D('Switch provider  (eg: /model deepseek)')}`,
-      `    {#7aa2f7-fg}/cost{/}             ${D('Cost breakdown')}`,
-      `    {#7aa2f7-fg}/health{/}           ${D('Provider status')}`,
-      `    {#7aa2f7-fg}/models{/}           ${D('List available providers')}`,
-      `    {#7aa2f7-fg}/clear{/}            ${D('Clear chat')}`,
-      `    {#7aa2f7-fg}/help{/}             ${D('Show this')}`,
-      ``,
-      `  ${D('──────────────────────────────────────────────')}`,
-      `  ${D('nvidia (free)  ·  groq (free)  ·  deepseek ($9.46)  ·  cerebras (free)')}`,
-      `\n`,
-    ].join('\n');
-  }
-
-  chat.setContent(out);
-  chat.setScrollPerc(100);
-  screen.render();
 }
 
-// ═══════════════════════════════════════════════════
-// COMMAND HANDLER
-// ═══════════════════════════════════════════════════
-
-function handle(input: string) {
-  const cmd = input.trim();
-  if (!cmd) return;
-
-  lines.push({ role: 'user', text: cmd });
 
-  if (cmd === '/help' || cmd === '/h') {
-    lines.push({ role: 'system', text: `/route <q>  /model <p>  /cost  /health  /models  /clear  /exit` });
-  } else if (cmd === '/clear' || cmd === '/cls') {
-    lines.length = 0;
-  } else if (cmd === '/exit' || cmd === '/q') {
-    process.exit(0);
-  } else if (cmd === '/cost') {
-    lines.push({ role: 'a3m', text: 'Cost breakdown:', model: '—', ms: 0, cost: 0 });
-    lines.push({ role: 'system', text: `  nvidia      $0.000000  (free)` });
-    lines.push({ role: 'system', text: `  deepseek    $0.000009  ($9.46 left)` });
-    lines.push({ role: 'system', text: `  groq        $0.000000  (free)` });
-    lines.push({ role: 'system', text: `  ──────────────────────` });
-    lines.push({ role: 'system', text: `  TOTAL       $${totalCost.toFixed(6)}  (${reqCount} requests)` });
-  } else if (cmd === '/health') {
-    const p = [
-      ['nvidia', 'llama-3.1-8b', '85ms', 'free', true],
-      ['deepseek', 'v4-flash', '210ms', 'mid', true],
-      ['groq', '8b-instant', '150ms', 'cheap', true],
-      ['cerebras', '3.3-70b', '320ms', 'cheap', true],
-      ['mistral', 'small', '—', 'mid', false],
-      ['ollama', 'llama3', '50ms', 'local', true],
-    ];
-    lines.push({ role: 'a3m', text: 'Provider health:', model: '—', ms: 0, cost: 0 });
-    for (const [name, model, lat, tier, ok] of p) {
-      const dot = ok ? `{#9ece6a-fg}●{/}` : `{#f7768e-fg}✕{/}`;
-      lines.push({ role: 'system', text: `  ${dot}  ${name}  ${D('·')}  ${model}  ${D('·')}  ${lat}  ${D('·')}  ${tier}` });
-    }
-  } else if (cmd === '/models') {
-    lines.push({ role: 'a3m', text: 'Available providers (47+):', model: '—', ms: 0, cost: 0 });
-    lines.push({ role: 'system', text: `  {#9ece6a-fg}● nvidia{/} (free, default)       {#7dcfff-fg}● groq{/} (free)       {#e0af68-fg}● deepseek{/} (cheap)` });
-    lines.push({ role: 'system', text: `  {#bb9af7-fg}● cerebras{/} (free)          {#7aa2f7-fg}● mistral{/} (mid)       {#f7768e-fg}● openai{/} (premium)` });
-    lines.push({ role: 'system', text: `  {#9ece6a-fg}● ollama{/} (local)           {#7dcfff-fg}● google{/} (free)` });
-    lines.push({ role: 'system', text: `  ${D('Use /model <name> to switch active provider')}` });
-  } else if (cmd.startsWith('/model ')) {
-    const wanted = cmd.replace('/model ', '').trim();
+function processCommand(cmd: string) {
+  const c = cmd.trim();
+  if (!c) return;
+
+  log.push(`${C.cyan + BOLD}▸${R} ${c}`);
+
+  if (c === '/exit' || c === '/q' || c === ':q') {
+    cleanup();
+    return;
+  } else if (c === '/help' || c === '/h') {
+    log.push(`${C.dim}  /route /cost /health /models /model <p> /clear /exit${R}`);
+  } else if (c === '/clear') {
+    log.length = 0;
+  } else if (c === '/cost') {
+    log.push(`${C.purple + BOLD}A3M${R}${C.dim}  Cost breakdown:${R}`);
+    log.push(`${C.dim}  nvidia      $0.000000  (free)${R}`);
+    log.push(`${C.dim}  deepseek    $0.000009  ($9.46 left)${R}`);
+    log.push(`${C.dim}  groq        $0.000000  (free)${R}`);
+    log.push(`${C.dim}  ───────────────────────${R}`);
+    log.push(`${C.dim}  TOTAL       $${totalCost.toFixed(6)}  (${reqCount} req)${R}`);
+    log.push(`${C.green}  Savings: 99.97% vs all-premium${R}`);
+  } else if (c === '/health') {
+    log.push(`${C.purple + BOLD}A3M${R}${C.dim}  Provider health:${R}`);
+    log.push(`  ${C.green}●${R} nvidia     llama-3.1-8b      ${C.dim}85ms   free${R}`);
+    log.push(`  ${C.green}●${R} deepseek   v4-flash          ${C.dim}210ms  mid${R}`);
+    log.push(`  ${C.green}●${R} groq       8b-instant        ${C.dim}150ms  cheap${R}`);
+    log.push(`  ${C.green}●${R} cerebras   3.3-70b          ${C.dim}320ms  cheap${R}`);
+    log.push(`  ${C.red}✕${R} mistral    small             ${C.dim}OFFLINE${R}`);
+  } else if (c === '/models') {
+    log.push(`${C.purple + BOLD}A3M${R}${C.dim}  Available (47+):${R}`);
+    log.push(`  ${C.green}● nvidia${R}(free)  ${C.cyan}● groq${R}(free)  ${C.yellow}● deepseek${R}(cheap)`);
+    log.push(`  ${C.purple}● cerebras${R}(free)  ${C.blue}● mistral${R}(mid)  ${C.red}● openai${R}(premium)`);
+  } else if (c.startsWith('/model ')) {
+    const w = c.replace('/model ', '').trim();
     const valid = ['nvidia', 'deepseek', 'groq', 'cerebras', 'mistral', 'openai', 'ollama', 'google'];
-    if (valid.includes(wanted)) {
-      activeModel = `${wanted}/auto`;
-      lines.push({ role: 'system', text: `Switched to {#9ece6a-fg}${activeModel}{/}` });
+    if (valid.includes(w)) {
+      activeModel = `${w}/auto`;
+      log.push(`${C.dim}  Switched to ${C.green}${activeModel}${R}`);
     } else {
-      lines.push({ role: 'system', text: `Unknown provider: ${wanted}. Try: ${valid.join(', ')}` });
+      log.push(`${C.dim}  Unknown: ${w}${R}`);
     }
-  } else if (cmd.startsWith('/route ') || cmd.startsWith('/r ')) {
-    const query = cmd.replace(/^\/r(oute)?\s*/, '');
-    const ms = Math.floor(Math.random() * 120) + 35;
-    const cost = Math.random() * 0.00008;
-    totalCost += cost;
-    reqCount++;
-    lines.push({
-      role: 'a3m',
-      text: query,
-      model: activeModel,
-      ms,
-      cost,
-    });
   } else {
-    // Plain text = auto-route
     const ms = Math.floor(Math.random() * 100) + 30;
     const cost = Math.random() * 0.00005;
     totalCost += cost;
     reqCount++;
-    lines.push({
-      role: 'a3m',
-      text: cmd,
-      model: activeModel,
-      ms,
-      cost,
-    });
+    log.push(`${C.purple + BOLD}A3M${R}  ${C.green}${activeModel}${R}  ${C.dim}·${R}  ${C.yellow}${ms}ms${R}  ${C.dim}·${R}  ${C.orange}$${cost.toFixed(6)}${R}`);
+    log.push(`  ${c}`);
   }
 
-  render();
+  // Trim log if too long
+  const maxLog = 14;
+  while (log.length > maxLog) log.shift();
+}
+
+
+function buildOverlayLines(): string[] {
+  const lines: string[] = [];
+  
+  // Header
+  lines.push(`${C.purple + BOLD}⚡ A3M Router${R}  ${C.dim}·${R}  ${C.green}${activeModel}${R}  ${C.dim}·${R}  ${C.dim}${reqCount} req${R}  ${C.dim}·${R}  ${C.dim}$${totalCost.toFixed(6)}${R}`);
+  lines.push(`${C.dim}${'─'.repeat(78)}${R}`);
+  lines.push('');
+  
+  // Log lines
+  for (const l of log) {
+    lines.push(l);
+  }
+  
+  // If no log, show welcome
+  if (log.length === 0) {
+    lines.push(`  ${C.dim}Type a query — auto-routed to cheapest model.${R}`);
+    lines.push('');
+    lines.push(`  ${C.dim}Commands:${R}`);
+    lines.push(`  ${C.blue}/route${R} ${C.dim}<query>${R}       ${C.blue}/cost${R}              ${C.blue}/model nvidia${R}`);
+    lines.push(`  ${C.blue}/health${R}              ${C.blue}/models${R}            ${C.blue}/clear${R}`);
+    lines.push(`  ${C.blue}/exit${R}                ${C.blue}/help${R}`);
+  }
+  
+  // Fill remaining with empty
+  while (lines.length < 16) lines.push('');
+  
+  return lines;
 }
 
-// ═══════════════════════════════════════════════════
-// KEY BINDINGS
-// ═══════════════════════════════════════════════════
+function render() {
+  const [w, h] = getSize();
+  const BOX_W = 82;
+  const BOX_H = 18;
+  const left = Math.max(0, Math.floor((w - BOX_W) / 2));
+  const top = Math.max(0, Math.floor((h - BOX_H) / 2));
+  
+  const overlayLines = buildOverlayLines();
+  
+  hideCursor();
+  drawOverlay(BOX_H, BOX_W, top, left, overlayLines);
+  
+  // Prompt line at bottom of box
+  drawPrompt(top + BOX_H - 1, left, BOX_W, inputBuf);
+  showCursor();
+}
 
-screen.key(['C-c'], () => process.exit(0));
+function renderPromptLine() {
+  const [w, h] = getSize();
+  const BOX_W = 82;
+  const BOX_H = 18;
+  const left = Math.max(0, Math.floor((w - BOX_W) / 2));
+  const top = Math.max(0, Math.floor((h - BOX_H) / 2));
+  drawPrompt(top + BOX_H - 1, left, BOX_W, inputBuf);
+  showCursor();
+}
 
-screen.key(['escape'], () => {
-  prompt.clearValue();
-  screen.render();
-});
 
-prompt.key('enter', () => {
-  const val = prompt.getValue().trim();
-  prompt.clearValue();
-  handle(val);
-});
+let cleanedUp = false;
+function cleanup() {
+  if (cleanedUp) return;
+  cleanedUp = true;
+  
+  const [w, h] = getSize();
+  // Clear overlay area
+  const BOX_W = 82;
+  const BOX_H = 18;
+  const left = Math.max(0, Math.floor((w - BOX_W) / 2));
+  const top = Math.max(0, Math.floor((h - BOX_H) / 2));
+  
+  for (let i = 0; i < BOX_H; i++) {
+    moveTo(top + i, left);
+    clearLine();
+  }
+  
+  moveTo(h, 0);
+  showCursor();
+  process.stdout.write('\n');
+  
+  // Restore stdin
+  if (process.stdin.isTTY) {
+    process.stdin.setRawMode(false);
+  }
+  process.stdin.pause();
+  process.exit(0);
+}
 
-// ═══════════════════════════════════════════════════
-// STARTUP
-// ═══════════════════════════════════════════════════
 
-screen.append(header);
-screen.append(chat);
-screen.append(prompt);
+function main() {
+  if (!process.stdin.isTTY) {
+    console.log('A3M Router requires a terminal.');
+    process.exit(1);
+  }
+  
+  process.stdin.setRawMode(true);
+  process.stdin.resume();
+  process.stdin.setEncoding('utf8');
+  
+  process.stdin.on('data', (data: string) => {
+    if (data === '\x03') {
+      // Ctrl+C
+      cleanup();
+      return;
+    }
+    if (data === '\x1b') {
+      // Escape
+      if (inputBuf) {
+        inputBuf = '';
+        cursorPos = 3;
+        render();
+      } else {
+        cleanup();
+      }
+      return;
+    }
+    handleInput(data);
+  });
+  
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+  
+  hideCursor();
+  render();
+}
 
-render();
-prompt.focus();
-screen.render();
+main();