fix: overlay box rendering — proper sizing, bottom border, cursor positioning

Author: Das-rebel

dist/tui/dashboard.js

@@ -1,6 +1,6 @@
 {
   "name": "adaptive-memory-multi-model-router",
-  "version": "2.13.10",
+  "version": "2.13.11",
   "shortName": "A3M Router",
   "displayName": "A3M Router - Adaptive Memory Multi-Model Router",
   "description": "🔥 Fastest-growing npm LLM router — 0 to 10,024 downloads in 14 days. Parallel multi-LLM execution with independent benchmark validation (138ms baseline, +96ms proxy overhead), 47+ providers, 99.5% routing accuracy, 62% cost savings. Open-source AI gateway. Parallel ensemble, confidence scoring, query-type presets, persistent memory. Zero ML, 19.5KB. MIT.",

dist/tui/dashboard.js.map

@@ -47,34 +47,11 @@ 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 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 " ▸ "
+function stripAnsi(s: string): string {
+  return s.replace(/\x1b\[[0-9;]*m/g, '');
 }
 
+const B = { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' };
 
 let inputBuf = '';
 let cursorPos = 3;
@@ -160,59 +137,98 @@ function processCommand(cmd: string) {
 }
 
 
-function buildOverlayLines(): string[] {
+function buildOverlayLines(boxW: number): string[] {
+  const contentW = boxW - 4; // inside padding
   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}`);
+  // Header row
+  const hdr = `${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(hdr.padEnd(contentW));
+  
+  // Separator
+  lines.push(`${C.dim}${'─'.repeat(Math.max(0, contentW))}${R}`);
   lines.push('');
 
   // Log lines
   for (const l of log) {
-    lines.push(l);
+    lines.push(l.padEnd(contentW));
   }
 
-  // If no log, show welcome
+  // Welcome message if empty
   if (log.length === 0) {
-    lines.push(`  ${C.dim}Type a query — auto-routed to cheapest model.${R}`);
+    lines.push(`  ${C.dim}Type a query — auto-routed to cheapest model.${R}`.padEnd(contentW));
     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}`);
+    lines.push(`  ${C.dim}Commands:${R}`.padEnd(contentW));
+    lines.push(`  ${C.blue}/route${R} ${C.dim}<query>${R}       ${C.blue}/cost${R}              ${C.blue}/model nvidia${R}`.padEnd(contentW));
+    lines.push(`  ${C.blue}/health${R}              ${C.blue}/models${R}            ${C.blue}/clear${R}`.padEnd(contentW));
+    lines.push(`  ${C.blue}/exit${R}                ${C.blue}/help${R}`.padEnd(contentW));
   }
 
-  // Fill remaining with empty
-  while (lines.length < 16) lines.push('');
-  
   return lines;
 }
 
 function render() {
   const [w, h] = getSize();
-  const BOX_W = 82;
+  const BOX_W = Math.min(82, w - 4);
   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();
+  const overlayLines = buildOverlayLines(BOX_W);
 
   hideCursor();
-  drawOverlay(BOX_H, BOX_W, top, left, overlayLines);
 
-  // Prompt line at bottom of box
-  drawPrompt(top + BOX_H - 1, left, BOX_W, inputBuf);
+  // Draw the box
+  const innerW = BOX_W - 2;
+  
+  // Top border
+  moveTo(top, left);
+  clearLine();
+  process.stdout.write(C.bg + C.purple + B.tl + B.h.repeat(innerW) + B.tr + R);
+  
+  // Content rows (BOX_H - 3 for borders + prompt)
+  const contentRows = BOX_H - 3;
+  for (let i = 0; i < contentRows; i++) {
+    moveTo(top + 1 + i, left);
+    clearLine();
+    const content = (overlayLines[i] || '').slice(0, innerW);
+    const padded = content + ' '.repeat(Math.max(0, innerW - stripAnsi(content).length));
+    process.stdout.write(C.bg + C.purple + B.v + R + C.bg + padded + C.purple + B.v + R);
+  }
+  
+  // Prompt row (second-to-last)
+  const promptRow = top + 1 + contentRows;
+  moveTo(promptRow, left);
+  clearLine();
+  const promptText = `${BOLD} ▸ ${R}${inputBuf}`;
+  const promptPadded = promptText + ' '.repeat(Math.max(0, innerW - stripAnsi(promptText).length));
+  process.stdout.write(C.bg + C.purple + B.v + R + C.surface + promptPadded + C.purple + B.v + R);
+  // Cursor position
+  moveTo(promptRow, left + 2 + stripAnsi(BOLD + ' ▸ ' + R).length + inputBuf.length);
+  
+  // Bottom border
+  moveTo(promptRow + 1, left);
+  clearLine();
+  process.stdout.write(C.bg + C.purple + B.bl + B.h.repeat(innerW) + B.br + R);
+  
   showCursor();
 }
 
 function renderPromptLine() {
   const [w, h] = getSize();
-  const BOX_W = 82;
+  const BOX_W = Math.min(82, w - 4);
   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);
+  const innerW = BOX_W - 2;
+  const promptRow = top + 1 + (BOX_H - 3);
+  
+  moveTo(promptRow, left);
+  clearLine();
+  const promptText = `${BOLD} ▸ ${R}${inputBuf}`;
+  const promptPadded = promptText + ' '.repeat(Math.max(0, innerW - stripAnsi(promptText).length));
+  process.stdout.write(C.bg + C.purple + B.v + R + C.surface + promptPadded + C.purple + B.v + R);
+  moveTo(promptRow, left + 2 + stripAnsi(BOLD + ' ▸ ' + R).length + inputBuf.length);
   showCursor();
 }
 
@@ -223,8 +239,7 @@ function cleanup() {
   cleanedUp = true;
 
   const [w, h] = getSize();
-  // Clear overlay area
-  const BOX_W = 82;
+  const BOX_W = Math.min(82, w - 4);
   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));