agen-vektor 0.3.4 → 0.3.5

package/dist/cli/keyboard.js

@@ -90,8 +90,7 @@ function parseKey(data) {
                 const parts = s.slice(i + 3, e).split(';').map(Number);
                 if (parts.length >= 3) {
                     const [b, x, y] = parts;
-                    const kind = b !== undefined && (b & 64) !== 0 ? 'scroll_up' : b !== undefined && (b & 65) === 65 ? 'scroll_down' : 'click';
-                    events.push({ name: 'mouse', kind, x, y });
+                    events.push({ name: 'mouse', kind: mouseKind(b ?? 0), x, y });
                 }
                 i = e + 1;
                 continue;
@@ -113,10 +112,9 @@ function parseKey(data) {
                     // X10-style mouse
                     const m = seq.match(/^<(\d+);(\d+);(\d+)([Mm])$/);
                     if (m) {
-                        const b = Number(m[1]);
                         events.push({
                             name: 'mouse',
-                            kind: b === 64 ? 'scroll_up' : b === 65 ? 'scroll_down' : 'click',
+                            kind: mouseKind(Number(m[1])),
                             x: Number(m[2]),
                             y: Number(m[3]),
                         });
@@ -251,6 +249,18 @@ function parseKey(data) {
     }
     return events;
 }
+/**
+ * Map an SGR/X10 mouse button code to a semantic kind.
+ * Wheel-up is button 64, wheel-down is 65; modifier bits (4 shift, 8 meta,
+ * 16 ctrl) may be OR-ed in, so bit tests must not be exact equality.
+ */
+function mouseKind(b) {
+    if ((b & 64) === 64 && (b & 1) === 0)
+        return 'scroll_up';
+    if ((b & 65) === 65)
+        return 'scroll_down';
+    return 'click';
+}
 /**
  * Enter raw mode. Returns a cleanup function.
  * Works with process.stdin on Linux, macOS, and Termux.

package/dist/tui/app.js

@@ -123,7 +123,8 @@ class App {
         }
         switch (ev.name) {
             case 'char':
-                if (ev.char === '?')
+                // '?' opens help only on an empty input, so questions can be typed
+                if (ev.char === '?' && this.input.value.length === 0)
                     this.modal = { type: 'help' };
                 else if (ev.char)
                     this.input.insert(ev.char);
@@ -710,7 +711,7 @@ class App {
         return (0, terminal_1.getTerminalSize)().cols;
     }
     chatHeight() {
-        return Math.max(1, (0, terminal_1.getTerminalSize)().rows - 7);
+        return Math.max(1, (0, terminal_1.getTerminalSize)().rows - 6);
     }
     render() {
         const { rows, cols } = (0, terminal_1.getTerminalSize)();
@@ -725,49 +726,34 @@ 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 = [];
-        // Row 1-2: framed header + project bar
+        // Row 1-2: header + project line
         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
+        parts.push((0, terminal_1.cursorTo)(3, 1) + terminal_1.ANSI.clearLineEnd + theme_1.THEME.border + terminal_1.BOX.h.repeat(Math.min(cols, 120)) + theme_1.THEME.reset);
+        // Chat area (rows 4..) — clean Freebuff-style message blocks
         const chatH = this.chatHeight();
-        const chatW = innerW;
-        const all = (0, chat_1.renderMessages)(this.messages, chatW);
+        const all = (0, chat_1.renderMessages)(this.messages, cols);
         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 = 4;
-        const empty = ' '.repeat(innerW);
         for (let i = 0; i < chatH; i++) {
-            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);
+            const content = visible[i] !== undefined ? visible[i] : '';
+            parts.push((0, terminal_1.cursorTo)(chatTop + i, 1) + terminal_1.ANSI.clearLineEnd + content);
         }
         // Separator between chat and input
         const sepRow = chatTop + chatH;
-        parts.push((0, terminal_1.cursorTo)(sepRow, 1) + terminal_1.ANSI.clearLineEnd + frame + trtee + hz.repeat(innerW) + tltee + theme_1.THEME.reset);
+        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 row
         const inputRow = sepRow + 1;
-        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;
+        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 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

@@ -4,16 +4,25 @@ exports.renderMessages = renderMessages;
 exports.defaultScroll = defaultScroll;
 exports.clampScroll = clampScroll;
 /**
- * Chat view — renders conversation messages as boxed blocks with scrolling.
- * Message types: user, assistant (streamed), tool, system/status, plan.
- * Each message renders as a bordered box (Freebuff-style):
- *   ╭───────────────────────────╮
- *   │ ● VectorHead · model      │
- *   │ content                   │
- *   ╰───────────────────────────╯
+ * Chat view — renders conversation messages the Freebuff way:
+ * clean plain-text blocks with a small colored label row. User messages
+ * are right-aligned (chat-style bubble), everything else left-aligned.
+ * No boxes or frames — stays aligned on narrow/mobile terminals.
+ *
+ *   ● VectorHead · model
+ *     Inspecting project...
+ *
+ *                        ● YOU
+ *                        perbaiki error auth
+ *
+ *   ⚙ shell · $ npm test
  */
 const theme_1 = require("./theme");
 const terminal_1 = require("../utils/terminal");
+/** Right-align a string to a fixed visible width (leading padding). */
+function padLeft(str, width) {
+    return ' '.repeat(Math.max(0, width - (0, terminal_1.visibleWidth)(str))) + str;
+}
 const KIND_STYLE = {
     user: { prefix: 'YOU', color: theme_1.THEME.gold },
     assistant: { prefix: 'VectorHead', color: theme_1.THEME.accent },
@@ -23,44 +32,31 @@ const KIND_STYLE = {
     success: { prefix: '✓', color: theme_1.THEME.success },
     warning: { prefix: '⚠', color: theme_1.THEME.warn },
 };
-/** Render one message as a boxed block. Box width = `width` (whole chat area). */
-function boxMessage(m, width) {
+/** Render one message as a label row + wrapped content (user right-aligned). */
+function renderMessage(m, width) {
     const style = KIND_STYLE[m.kind];
     const prefix = m.prefix || style.prefix;
-    const dot = m.streaming ? `${theme_1.THEME.warn}◐${theme_1.THEME.reset} ` : `${style.color}●${theme_1.THEME.reset} `;
-    const title = `${dot}${theme_1.THEME.bold}${style.color}${prefix}${theme_1.THEME.reset}`;
+    const dot = m.streaming ? `${theme_1.THEME.warn}◐${theme_1.THEME.reset}` : `${style.color}●${theme_1.THEME.reset}`;
     const meta = m.meta ? ` ${theme_1.THEME.dim}${m.meta}${theme_1.THEME.reset}` : '';
     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 + 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 rightAlign = m.kind === 'user';
+    // Label row: ● Label · tool · model (right-aligned for user, truncated to fit narrow widths)
+    const label = `${dot} ${theme_1.THEME.bold}${style.color}${prefix}${theme_1.THEME.reset}${toolName}${meta}`;
+    const out = [rightAlign ? padLeft((0, terminal_1.truncate)(label, width), width) : (0, terminal_1.truncate)(label, width)];
+    // Content rows — wrapped to fit; user wraps the full width for a flush right edge
     const body = m.content || '(no content)';
-    for (const line of (0, terminal_1.wrapText)(body, inner)) {
-        out.push(`${border}${vr}${theme_1.THEME.reset} ` + (0, terminal_1.pad)(line, inner) + ` ${border}${vr}${theme_1.THEME.reset}`);
+    const wrapW = rightAlign ? width : Math.max(4, width - 2);
+    for (const line of (0, terminal_1.wrapText)(body, wrapW)) {
+        out.push(rightAlign ? padLeft(line, width) : `  ${line}`);
     }
-    // Bottom border + blank separator
-    out.push(border + bl + hz.repeat(inner + 2) + br + theme_1.THEME.reset);
-    out.push('');
+    out.push(''); // blank separator between messages
     return out;
 }
 /** Precompute the full list of rendered lines for all messages. */
 function renderMessages(messages, width) {
     const out = [];
     for (const m of messages) {
-        out.push(...boxMessage(m, width));
+        out.push(...renderMessage(m, width));
     }
     return out;
 }

package/dist/tui/components.js

@@ -19,24 +19,24 @@ function renderModal(opts, rows, cols) {
     const left = Math.max(1, Math.floor((cols - innerWidth - 2) / 2));
     const borderColor = opts.danger ? theme_1.THEME.error : theme_1.THEME.borderBright;
     const lines = [];
-    const topBorder = borderColor + terminal_1.BOX.tl + terminal_1.BOX.h.repeat(innerWidth) + terminal_1.BOX.tr;
     const bottomBorder = borderColor + terminal_1.BOX.bl + terminal_1.BOX.h.repeat(innerWidth) + terminal_1.BOX.br;
-    // Title placement
-    const t = (0, terminal_1.pad)(title.slice(0, innerWidth - 2), innerWidth);
+    const contentW = innerWidth - 2; // visible area between the side borders
+    // Title row: ╭─ Title ────────────────╮ (exactly innerWidth+2 wide)
+    const t = (0, terminal_1.truncate)(title, contentW);
     lines.push((0, terminal_1.cursorTo)(top, left) +
-        topBorder.slice(0, 2) +
+        borderColor + terminal_1.BOX.tl + terminal_1.BOX.h +
         theme_1.THEME.bold + theme_1.THEME.textBright + t + theme_1.THEME.reset + borderColor +
-        topBorder.slice(2));
+        terminal_1.BOX.h.repeat(Math.max(0, innerWidth - 1 - (0, terminal_1.visibleWidth)(t))) + terminal_1.BOX.tr);
     const maxBody = height - footerLines.length - 2;
     for (let i = 0; i < maxBody; i++) {
         const content = bodyLines[i] ?? '';
-        const lineStr = (0, terminal_1.pad)(content, innerWidth);
+        const lineStr = (0, terminal_1.pad)((0, terminal_1.truncate)(content, contentW), contentW);
         lines.push((0, terminal_1.cursorTo)(top + 1 + i, left) + borderColor + terminal_1.BOX.v + ' ' + lineStr + theme_1.THEME.reset + borderColor + ' ' + terminal_1.BOX.v);
     }
     for (let i = 0; i < footerLines.length; i++) {
         const row = top + 1 + maxBody + i;
         const content = footerLines[i] ?? '';
-        const lineStr = (0, terminal_1.pad)(content, innerWidth);
+        const lineStr = (0, terminal_1.pad)((0, terminal_1.truncate)(content, contentW), contentW);
         lines.push((0, terminal_1.cursorTo)(row, left) + borderColor + terminal_1.BOX.v + ' ' + theme_1.THEME.dim + lineStr + theme_1.THEME.reset + borderColor + ' ' + terminal_1.BOX.v);
     }
     lines.push((0, terminal_1.cursorTo)(top + height - 1, left) + bottomBorder);
@@ -52,7 +52,9 @@ function renderSelector(opts) {
     const left = Math.max(1, Math.floor((opts.cols - innerWidth - 2) / 2));
     const lines = [];
     const borderColor = terminal_1.ANSI.cyan;
-    const t = (0, terminal_1.pad)(opts.title.slice(0, innerWidth - 2), innerWidth);
+    const contentW = innerWidth - 2;
+    // Title row: ╭── Title ────────────╮ (exactly innerWidth+2 wide)
+    const t = (0, terminal_1.truncate)(opts.title, contentW);
     lines.push((0, terminal_1.cursorTo)(top, left) +
         borderColor + terminal_1.BOX.tl + terminal_1.BOX.h.repeat(2) +
         terminal_1.ANSI.bold + terminal_1.ANSI.white + t + terminal_1.ANSI.reset + borderColor +
@@ -67,19 +69,19 @@ function renderSelector(opts) {
             const label = marker + option.label;
             const hint = option.hint ? terminal_1.ANSI.dim + ' — ' + option.hint + terminal_1.ANSI.reset : '';
             if (idx === opts.selected) {
-                content = terminal_1.ANSI.bold + terminal_1.ANSI.cyan + (0, terminal_1.pad)(label, innerWidth - (0, terminal_1.visibleWidth)(hint)) + terminal_1.ANSI.reset + hint;
+                content = terminal_1.ANSI.bold + terminal_1.ANSI.cyan + (0, terminal_1.truncate)(label, contentW - (0, terminal_1.visibleWidth)(hint)) + terminal_1.ANSI.reset + hint;
             }
             else {
-                content = (0, terminal_1.pad)(label, innerWidth - (0, terminal_1.visibleWidth)(hint)) + hint;
+                content = (0, terminal_1.truncate)(label, contentW - (0, terminal_1.visibleWidth)(hint)) + hint;
             }
         }
         else {
-            content = ' '.repeat(innerWidth);
+            content = '';
         }
-        lines.push((0, terminal_1.cursorTo)(row, left) + borderColor + terminal_1.BOX.v + ' ' + content + terminal_1.ANSI.reset + ' ' + terminal_1.BOX.v);
+        lines.push((0, terminal_1.cursorTo)(row, left) + borderColor + terminal_1.BOX.v + ' ' + (0, terminal_1.pad)(content, contentW) + theme_1.THEME.reset + ' ' + terminal_1.BOX.v);
     }
     const footerText = opts.footer ? opts.footer : '↑↓ navigate · Enter select · Esc cancel';
-    const f = (0, terminal_1.pad)(footerText.slice(0, innerWidth - 2), innerWidth);
+    const f = (0, terminal_1.truncate)(footerText, contentW);
     lines.push((0, terminal_1.cursorTo)(top + visible + 1, left) +
         borderColor + terminal_1.BOX.bl + terminal_1.BOX.h.repeat(2) + theme_1.THEME.dim + f + theme_1.THEME.reset + borderColor +
         terminal_1.BOX.h.repeat(Math.max(0, innerWidth - 2 - (0, terminal_1.visibleWidth)(f))) + terminal_1.BOX.br);

package/dist/tui/input.js

@@ -107,7 +107,9 @@ class InputBox {
             let start = this.cursor - Math.floor(available / 2);
             start = Math.max(0, Math.min(start, this.text.length - available));
             display = this.text.slice(start, start + available);
-            cursorCol = prefix.length + (this.cursor - start);
+            // Visible column: prefix width (2) + offset inside the window.
+            // (prefix.length is the raw ANSI byte length — must not be used here.)
+            cursorCol = prefixWidth + (this.cursor - start);
         }
         let suffix = '';
         if (!this.text && this.hint) {

package/dist/tui/statusbar.js

@@ -4,27 +4,15 @@ exports.renderHeader = renderHeader;
 exports.renderProjectBar = renderProjectBar;
 exports.renderStatusBar = renderStatusBar;
 /**
- * Status bar — top header + project bar + bottom hint bar.
- * Renders inside the VectorHead frame (Freebuff-style borders):
- *   ╭─ VectorHead ● status ─── provider · model ─╮
- *   │ Project: ~/x    Mode: ask                  │
- *   │ ENTER Send · TAB Commands · ? Help  ● ask  │
+ * Status bar — top header + project line + bottom hint bar.
+ * Clean Freebuff-style lines (no frames), truncated to fit narrow/mobile
+ * terminals.
  */
 const terminal_1 = require("../utils/terminal");
 const theme_1 = require("./theme");
-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 avail = Math.max(4, inner);
     const l = (0, terminal_1.stripAnsi)(left).length;
     const r = (0, terminal_1.stripAnsi)(right).length;
     if (l + r <= avail)
@@ -33,7 +21,7 @@ function fitTwo(left, right, inner) {
     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 ─╮ */
+/** Render the top 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}`;
@@ -42,24 +30,20 @@ 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 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}`;
+    const fit = fitTwo(left, right, width);
+    const mid = Math.max(1, width - (0, terminal_1.stripAnsi)(fit.left).length - (0, terminal_1.stripAnsi)(fit.right).length - 1);
+    return theme_1.THEME.bgBar + (0, terminal_1.pad)(`${fit.left}${' '.repeat(mid)}${fit.right}`, width) + theme_1.THEME.reset;
 }
-/** Render the framed project line: │ Project: <path> ... Mode: ask │ */
+/** Render the 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 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}`;
+    const fit = fitTwo(label, mode, width);
+    const mid = Math.max(1, width - (0, terminal_1.stripAnsi)(fit.left).length - (0, terminal_1.stripAnsi)(fit.right).length - 1);
+    return theme_1.THEME.bgBar + (0, terminal_1.pad)(`${fit.left}${' '.repeat(mid)}${fit.right}`, width) + theme_1.THEME.reset;
 }
-/** Render the framed bottom hint/status bar with live spinner. */
+/** Render the 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 = '';
@@ -69,9 +53,7 @@ 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 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}`;
+    const fit = fitTwo(left, right, width);
+    const mid = Math.max(1, width - (0, terminal_1.stripAnsi)(fit.left).length - (0, terminal_1.stripAnsi)(fit.right).length - 1);
+    return theme_1.THEME.bgBar + (0, terminal_1.pad)(`${fit.left}${' '.repeat(mid)}${fit.right}`, width) + theme_1.THEME.reset;
 }

package/dist/utils/terminal.js

@@ -91,7 +91,8 @@ function getTerminalSize() {
 }
 /**
  * Wrap text to a given width, respecting ANSI escape sequences so they
- * are not counted toward the visible length.
+ * are not counted toward the visible length. Surrogate pairs (emoji) are
+ * counted as a single 2-column character.
  */
 function wrapText(text, width) {
     if (width <= 0)
@@ -129,14 +130,16 @@ function wrapText(text, width) {
             i++;
             continue;
         }
-        // Measure visible width (approximate wide chars as 2)
-        const w = ch.charCodeAt(0) > 0x2fff ? 2 : 1;
+        // One full code point — surrogate pairs count as a single 2-column char.
+        const cp = text.codePointAt(i);
+        const unit = String.fromCodePoint(cp);
+        const w = cp > 0x2fff ? 2 : 1;
         if (visibleLen + w > width && visibleLen > 0) {
             flushLine();
         }
-        current += ch;
+        current += unit;
         visibleLen += w;
-        i++;
+        i += unit.length;
     }
     flushLine();
     return lines;
@@ -145,11 +148,11 @@ function wrapText(text, width) {
 function stripAnsi(text) {
     return text.replace(/\x1b\[[0-9;]*[A-Za-z]/g, '');
 }
-/** Visible width of a string without ANSI codes. */
+/** Visible width of a string without ANSI codes (emoji counted as 2). */
 function visibleWidth(text) {
     let w = 0;
     for (const ch of stripAnsi(text)) {
-        w += ch.charCodeAt(0) > 0x2fff ? 2 : 1;
+        w += ch.codePointAt(0) > 0x2fff ? 2 : 1;
     }
     return w;
 }
@@ -160,12 +163,40 @@ function pad(str, width) {
         return str;
     return str + ' '.repeat(width - len);
 }
-/** Truncate a string (with ANSI) to a max visible width. */
+/**
+ * Truncate a string (with ANSI) to a max visible width. ANSI sequences are
+ * copied verbatim so colors survive; when truncated, one column is reserved
+ * for '…' and a closing reset is appended so styling never bleeds out.
+ */
 function truncate(str, width) {
-    const clean = stripAnsi(str);
-    if (clean.length <= width)
+    if (width <= 0)
+        return '';
+    if (visibleWidth(str) <= width)
         return str;
-    return clean.slice(0, Math.max(0, width - 1)) + '…';
+    const ESC_RE = /^\x1b\[[0-9;]*[A-Za-z]/;
+    let out = '';
+    let vis = 0;
+    let i = 0;
+    while (i < str.length && vis < width - 1) {
+        const ch = str[i];
+        if (ch === '\x1b') {
+            const m = str.slice(i).match(ESC_RE);
+            if (m) {
+                out += m[0];
+                i += m[0].length;
+                continue;
+            }
+        }
+        const cp = str.codePointAt(i);
+        const unit = String.fromCodePoint(cp);
+        const w = cp > 0x2fff ? 2 : 1;
+        if (vis + w > width - 1)
+            break; // wide char leaves no room for '…'
+        out += unit;
+        vis += w;
+        i += unit.length;
+    }
+    return out + '…' + exports.ANSI.reset;
 }
 /** Render a line with a trailing newline reset applied. */
 function line(text = '') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agen-vektor",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "VectorHead (agen-vektor) — AI Coding Agent CLI/TUI for Linux & Termux. Multi-provider, tool calling, session, permission system.",
   "type": "commonjs",
   "bin": {
@@ -13,7 +13,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && chmod +x dist/cli/index.js",
     "dev": "tsx src/cli/index.ts",
     "start": "node dist/cli/index.js",
     "test": "tsx --test tests/*.test.ts",