agen-vektor 0.3.2 → 0.3.4

package/dist/tui/app.js

@@ -184,6 +184,10 @@ class App {
                 this.scroll = 0;
                 this.addSystem('Conversation cleared.');
                 break;
+            case 'ctrl_d':
+                // EOF / Ctrl+D — another way to quit (handy on mobile where Ctrl is awkward)
+                this.exitRequested = true;
+                break;
             case 'tab':
                 this.modal = { type: 'commands' };
                 break;
@@ -706,7 +710,7 @@ class App {
         return (0, terminal_1.getTerminalSize)().cols;
     }
     chatHeight() {
-        return Math.max(1, (0, terminal_1.getTerminalSize)().rows - 6);
+        return Math.max(1, (0, terminal_1.getTerminalSize)().rows - 7);
     }
     render() {
         const { rows, cols } = (0, terminal_1.getTerminalSize)();
@@ -721,32 +725,49 @@ class App {
             spinner: this.spinner.frame(),
             running: this.running,
         };
+        const frame = theme_1.THEME.borderBright;
+        const innerW = Math.max(4, cols - 2);
+        // Narrow terminals (mobile portrait) fall back to ASCII borders.
+        const wide = cols >= 60;
+        const bl = wide ? terminal_1.BOX.bl : '+';
+        const br = wide ? terminal_1.BOX.br : '+';
+        const hz = wide ? terminal_1.BOX.h : '-';
+        const vr = wide ? terminal_1.BOX.v : '|';
+        const trtee = wide ? terminal_1.BOX.teeRight : '+';
+        const tltee = wide ? terminal_1.BOX.teeLeft : '+';
         const parts = [];
-        parts.push((0, statusbar_1.renderHeader)(cols, info));
-        parts.push((0, statusbar_1.renderProjectBar)(cols, info));
-        // Chat area
+        // Row 1-2: framed header + project bar
+        parts.push((0, terminal_1.cursorTo)(1, 1) + terminal_1.ANSI.clearLineEnd + (0, statusbar_1.renderHeader)(cols, info));
+        parts.push((0, terminal_1.cursorTo)(2, 1) + terminal_1.ANSI.clearLineEnd + (0, statusbar_1.renderProjectBar)(cols, info));
+        // Row 3: separator
+        parts.push((0, terminal_1.cursorTo)(3, 1) + terminal_1.ANSI.clearLineEnd + frame + trtee + hz.repeat(innerW) + tltee + theme_1.THEME.reset);
+        // Chat area (rows 4..) — each line wrapped in the frame
         const chatH = this.chatHeight();
-        const chatW = cols;
+        const chatW = innerW;
         const all = (0, chat_1.renderMessages)(this.messages, chatW);
         const maxScroll = Math.max(0, all.length - chatH);
         this.scroll = Math.min(this.scroll, maxScroll);
         const visible = all.slice(this.scroll, this.scroll + chatH);
-        const chatTop = 3;
+        const chatTop = 4;
+        const empty = ' '.repeat(innerW);
         for (let i = 0; i < chatH; i++) {
-            const content = visible[i] !== undefined ? visible[i] : '';
-            parts.push((0, terminal_1.cursorTo)(chatTop + i, 1) + terminal_1.ANSI.clearLineEnd + content);
+            const content = visible[i] !== undefined ? visible[i] : empty;
+            parts.push((0, terminal_1.cursorTo)(chatTop + i, 1) + terminal_1.ANSI.clearLineEnd + frame + vr + theme_1.THEME.reset + ' ' + content + ' ' + frame + vr + theme_1.THEME.reset);
         }
-        // Separator
+        // Separator between chat and input
         const sepRow = chatTop + chatH;
-        parts.push((0, terminal_1.cursorTo)(sepRow, 1) + terminal_1.ANSI.clearLineEnd + theme_1.THEME.border + terminal_1.BOX.h.repeat(Math.min(cols, 120)) + theme_1.THEME.reset);
-        // Input
+        parts.push((0, terminal_1.cursorTo)(sepRow, 1) + terminal_1.ANSI.clearLineEnd + frame + trtee + hz.repeat(innerW) + tltee + theme_1.THEME.reset);
+        // Input row
         const inputRow = sepRow + 1;
-        const rendered = this.input.render(cols);
-        parts.push((0, terminal_1.cursorTo)(inputRow, 1) + terminal_1.ANSI.clearLineEnd + rendered.line);
-        const cursorCol = rendered.cursorCol + 1;
-        // Status bar
+        const rendered = this.input.render(innerW);
+        parts.push((0, terminal_1.cursorTo)(inputRow, 1) + terminal_1.ANSI.clearLineEnd + frame + vr + theme_1.THEME.reset + ' ' + rendered.line + ' ' + frame + vr + theme_1.THEME.reset);
+        const cursorCol = rendered.cursorCol + 3;
+        // Status bar row
         const statusRow = inputRow + 1;
         parts.push((0, terminal_1.cursorTo)(statusRow, 1) + terminal_1.ANSI.clearLineEnd + (0, statusbar_1.renderStatusBar)(cols, info));
+        // Bottom border
+        const bottomRow = statusRow + 1;
+        parts.push((0, terminal_1.cursorTo)(bottomRow, 1) + terminal_1.ANSI.clearLineEnd + frame + bl + hz.repeat(innerW) + br + theme_1.THEME.reset);
         // Modal overlay
         if (this.modal.type !== 'none') {
             const overlay = this.renderModal(rows, cols);

package/dist/tui/chat.js

@@ -33,18 +33,26 @@ function boxMessage(m, width) {
     const toolName = m.tool ? ` ${theme_1.THEME.warn}${m.tool}${theme_1.THEME.reset}` : '';
     const inner = Math.max(8, width - 4);
     const border = style.color;
+    // Narrow terminals (mobile) fall back to ASCII so borders stay aligned.
+    const ascii = width < 58;
+    const tl = ascii ? '+' : terminal_1.BOX.tl;
+    const tr = ascii ? '+' : terminal_1.BOX.tr;
+    const bl = ascii ? '+' : terminal_1.BOX.bl;
+    const br = ascii ? '+' : terminal_1.BOX.br;
+    const hz = ascii ? '-' : terminal_1.BOX.h;
+    const vr = ascii ? '|' : terminal_1.BOX.v;
     const out = [];
     // Top border
-    out.push(border + terminal_1.BOX.tl + terminal_1.BOX.h.repeat(inner + 2) + terminal_1.BOX.tr + theme_1.THEME.reset);
-    // Title row: ● prefix · model / tool badge
-    out.push(`${border}${terminal_1.BOX.v}${theme_1.THEME.reset} ` + (0, terminal_1.pad)(title + toolName + meta, inner) + ` ${border}${terminal_1.BOX.v}${theme_1.THEME.reset}`);
+    out.push(border + tl + hz.repeat(inner + 2) + tr + theme_1.THEME.reset);
+    // Title row: ● prefix · model / tool badge (truncated to fit narrow widths)
+    out.push(`${border}${vr}${theme_1.THEME.reset} ` + (0, terminal_1.pad)((0, terminal_1.truncate)(title + toolName + meta, inner), inner) + ` ${border}${vr}${theme_1.THEME.reset}`);
     // Content rows
     const body = m.content || '(no content)';
     for (const line of (0, terminal_1.wrapText)(body, inner)) {
-        out.push(`${border}${terminal_1.BOX.v}${theme_1.THEME.reset} ` + (0, terminal_1.pad)(line, inner) + ` ${border}${terminal_1.BOX.v}${theme_1.THEME.reset}`);
+        out.push(`${border}${vr}${theme_1.THEME.reset} ` + (0, terminal_1.pad)(line, inner) + ` ${border}${vr}${theme_1.THEME.reset}`);
     }
     // Bottom border + blank separator
-    out.push(border + terminal_1.BOX.bl + terminal_1.BOX.h.repeat(inner + 2) + terminal_1.BOX.br + theme_1.THEME.reset);
+    out.push(border + bl + hz.repeat(inner + 2) + br + theme_1.THEME.reset);
     out.push('');
     return out;
 }

package/dist/tui/statusbar.js

@@ -5,11 +5,35 @@ exports.renderProjectBar = renderProjectBar;
 exports.renderStatusBar = renderStatusBar;
 /**
  * Status bar — top header + project bar + bottom hint bar.
- * Uses the VectorHead theme with a live spinner while busy.
+ * Renders inside the VectorHead frame (Freebuff-style borders):
+ *   ╭─ VectorHead ● status ─── provider · model ─╮
+ *   │ Project: ~/x    Mode: ask                  │
+ *   │ ENTER Send · TAB Commands · ? Help  ● ask  │
  */
 const terminal_1 = require("../utils/terminal");
 const theme_1 = require("./theme");
-/** Render the top header line: VectorHead ● status .... provider · model */
+const frame = theme_1.THEME.borderBright;
+/**
+ * Frame characters. Narrow terminals (mobile portrait, ~<60 cols) fall back
+ * to ASCII so borders never misalign on fonts without box-drawing glyphs.
+ */
+function frameChars(width) {
+    if (width < 60)
+        return { tl: '+', tr: '+', bl: '+', br: '+', v: '|' };
+    return { tl: terminal_1.BOX.tl, tr: terminal_1.BOX.tr, bl: terminal_1.BOX.bl, br: terminal_1.BOX.br, v: terminal_1.BOX.v };
+}
+/** Split two ANSI strings across `inner` columns, truncating with … if needed. */
+function fitTwo(left, right, inner) {
+    const avail = inner - 3; // spaces around both sides
+    const l = (0, terminal_1.stripAnsi)(left).length;
+    const r = (0, terminal_1.stripAnsi)(right).length;
+    if (l + r <= avail)
+        return { left, right };
+    const maxL = Math.max(0, Math.floor((avail * l) / (l + r)));
+    const maxR = Math.max(0, avail - maxL);
+    return { left: (0, terminal_1.truncate)(left, maxL), right: (0, terminal_1.truncate)(right, maxR) };
+}
+/** Render the top framed header line: ╭─ VectorHead ● status ... provider · model ─╮ */
 function renderHeader(width, info) {
     const brand = `${theme_1.THEME.bold}${theme_1.THEME.accent}VectorHead${theme_1.THEME.reset}`;
     const dot = info.connected ? `${theme_1.THEME.success}●${theme_1.THEME.reset}` : `${theme_1.THEME.error}○${theme_1.THEME.reset}`;
@@ -18,20 +42,24 @@ function renderHeader(width, info) {
     const provider = `${theme_1.THEME.dim}${info.provider}${theme_1.THEME.reset}`;
     const model = `${theme_1.THEME.accentDim}${info.model}${theme_1.THEME.reset}`;
     const right = `${provider} · ${model}`;
-    const rightWidth = (0, terminal_1.stripAnsi)(right).length;
-    const leftWidth = Math.max(0, width - rightWidth - 2);
-    const line = (0, terminal_1.pad)(left, leftWidth) + ' ' + right;
-    return theme_1.THEME.bgBar + (0, terminal_1.pad)(line, width) + theme_1.THEME.reset;
+    const inner = Math.max(2, width - 2);
+    const fit = fitTwo(left, right, inner);
+    const mid = Math.max(1, inner - (0, terminal_1.stripAnsi)(fit.left).length - (0, terminal_1.stripAnsi)(fit.right).length - 3);
+    const c = frameChars(width);
+    return `${frame}${c.tl}${theme_1.THEME.reset} ${fit.left}${' '.repeat(mid)}${fit.right} ${frame}${c.tr}${theme_1.THEME.reset}`;
 }
-/** Render the project line: Project: <path> .... Mode: ask|yolo */
+/** Render the framed project line: │ Project: <path> ... Mode: ask │ */
 function renderProjectBar(width, info) {
     const label = `${theme_1.THEME.dim}Project:${theme_1.THEME.reset} ${theme_1.THEME.text}${info.project}${theme_1.THEME.reset}`;
     const modeColor = info.mode === 'yolo' ? theme_1.THEME.warn : theme_1.THEME.muted;
     const mode = `${theme_1.THEME.dim}Mode:${theme_1.THEME.reset} ${modeColor}${info.mode}${theme_1.THEME.reset}`;
-    const line = `${label}    ${mode}`;
-    return theme_1.THEME.bgBar + (0, terminal_1.pad)(line, width) + theme_1.THEME.reset;
+    const inner = Math.max(2, width - 2);
+    const fit = fitTwo(label, mode, inner);
+    const mid = Math.max(1, inner - (0, terminal_1.stripAnsi)(fit.left).length - (0, terminal_1.stripAnsi)(fit.right).length - 3);
+    const c = frameChars(width);
+    return `${frame}${c.v}${theme_1.THEME.reset} ${fit.left}${' '.repeat(mid)}${fit.right} ${frame}${c.v}${theme_1.THEME.reset}`;
 }
-/** Render the bottom hint/status bar with live spinner. */
+/** Render the framed bottom hint/status bar with live spinner. */
 function renderStatusBar(width, info) {
     const left = `ENTER ${theme_1.THEME.accent}Send${theme_1.THEME.reset}  TAB ${theme_1.THEME.accent}Commands${theme_1.THEME.reset}  CTRL+C ${theme_1.THEME.accent}Stop${theme_1.THEME.reset}  ? ${theme_1.THEME.accent}Help${theme_1.THEME.reset}`;
     let right = '';
@@ -41,7 +69,9 @@ function renderStatusBar(width, info) {
     const conn = info.connected ? `${theme_1.THEME.success}●${theme_1.THEME.reset}` : `${theme_1.THEME.error}○${theme_1.THEME.reset}`;
     const mode = info.mode === 'yolo' ? `${theme_1.THEME.warn}YOLO${theme_1.THEME.reset}` : `${theme_1.THEME.muted}ask${theme_1.THEME.reset}`;
     right += `${conn} ${mode}`;
-    const rightWidth = (0, terminal_1.stripAnsi)(right).length;
-    const leftWidth = Math.max(0, width - rightWidth - 1);
-    return theme_1.THEME.bgBar + (0, terminal_1.pad)(left, leftWidth) + ' ' + right + theme_1.THEME.reset;
+    const inner = Math.max(2, width - 2);
+    const fit = fitTwo(left, right, inner);
+    const mid = Math.max(1, inner - (0, terminal_1.stripAnsi)(fit.left).length - (0, terminal_1.stripAnsi)(fit.right).length - 3);
+    const c = frameChars(width);
+    return `${frame}${c.v}${theme_1.THEME.reset} ${fit.left}${' '.repeat(mid)}${fit.right} ${frame}${c.v}${theme_1.THEME.reset}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agen-vektor",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "VectorHead (agen-vektor) — AI Coding Agent CLI/TUI for Linux & Termux. Multi-provider, tool calling, session, permission system.",
   "type": "commonjs",
   "bin": {