agen-vektor 0.3.4 → 0.3.6

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

@@ -78,6 +78,7 @@ class App {
     planToExecute = null;
     abortController = null;
     spinner = new theme_1.Spinner();
+    runStart = null;
     constructor(agent, opts) {
         this.agent = agent;
         this.opts = opts;
@@ -90,7 +91,6 @@ class App {
     start() {
         this.connected = true;
         this.status = 'Ready';
-        this.addSystem('VectorHead ready. Type a request or press ? for help.');
         if (this.opts.continueSession && this.sessionName) {
             const sess = (0, session_1.loadSession)(this.sessionName);
             if (sess) {
@@ -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);
@@ -240,6 +241,7 @@ class App {
         this.statusColor = (0, theme_1.statusColor)('Thinking');
         this.spinner.reset();
         this.abortController = new AbortController();
+        this.runStart = Date.now();
         // Show plan first if requested
         if (this.opts.showPlan) {
             this.status = 'Planning…';
@@ -355,6 +357,7 @@ class App {
                     m.content = '(no response)';
             }
             this.running = false;
+            this.runStart = null;
             if (this.statusColor !== terminal_1.ANSI.red) {
                 this.status = 'Ready';
                 this.statusColor = terminal_1.ANSI.green;
@@ -710,7 +713,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)();
@@ -724,50 +727,36 @@ class App {
             mode: this.agent.config.permissionMode,
             spinner: this.spinner.frame(),
             running: this.running,
+            elapsed: this.running && this.runStart !== null ? Math.floor((Date.now() - this.runStart) / 1000) : undefined,
         };
-        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..) — Freebuff-style message blocks (welcome screen when empty)
         const chatH = this.chatHeight();
-        const chatW = innerW;
-        const all = (0, chat_1.renderMessages)(this.messages, chatW);
+        const all = this.messages.length === 0 ? (0, chat_1.renderWelcome)(cols, chatH, this.agent.cwd) : (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

@@ -3,64 +3,104 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMessages = renderMessages;
 exports.defaultScroll = defaultScroll;
 exports.clampScroll = clampScroll;
+exports.renderWelcome = renderWelcome;
 /**
- * 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 (adopted from
+ * CodebuffAI/freebuff TUI):
+ *   - user messages: green left bar + italic text (no label)
+ *   - assistant messages: plain foreground text
+ *   - tool calls: compact dim blocks (⚙ tool · preview)
+ * No boxes or frames — stays aligned on narrow/mobile terminals.
+ *
+ *   ██╗...VECTORHEAD logo (welcome only)
+ *   VectorHead will run commands on your behalf to help you build.
+ *   Directory /home/x
+ *
+ *   │ Inspecting project...            (user, italic, green bar)
+ *
+ *   Saya cek dulu file auth.ts.          (assistant)
+ *
+ *   ⚙ shell · $ npm test                 (tool, dim)
  */
 const theme_1 = require("./theme");
 const terminal_1 = require("../utils/terminal");
-const KIND_STYLE = {
-    user: { prefix: 'YOU', color: theme_1.THEME.gold },
-    assistant: { prefix: 'VectorHead', color: theme_1.THEME.accent },
-    tool: { prefix: 'TOOL', color: theme_1.THEME.warn },
-    system: { prefix: '···', color: theme_1.THEME.muted },
-    error: { prefix: '✗', color: theme_1.THEME.error },
-    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) {
-    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 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
+/** Center a string (with ANSI) horizontally within `width`. */
+function center(str, width) {
+    const pad = Math.max(0, Math.floor((width - (0, terminal_1.visibleWidth)(str)) / 2));
+    return ' '.repeat(pad) + str;
+}
+/** Render one message as Freebuff-style lines. */
+function renderMessage(m, width) {
     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 out = [];
+    switch (m.kind) {
+        case 'user': {
+            // Green vertical bar + italic text — Freebuff's signature user style.
+            const bar = `${theme_1.THEME.userLine}│${theme_1.THEME.reset}`;
+            const inner = Math.max(4, width - 2);
+            for (const line of (0, terminal_1.wrapText)(body, inner)) {
+                out.push(`${bar} ${terminal_1.ANSI.italic}${line}${theme_1.THEME.reset}`);
+            }
+            out.push('');
+            return out;
+        }
+        case 'tool': {
+            // Compact dim block: ⚙ tool · preview, then dim result lines.
+            const label = m.tool ? `⚙ ${m.tool}` : '⚙';
+            const parts = body.split('\n');
+            const first = `${theme_1.THEME.warn}${label}${theme_1.THEME.reset} ${theme_1.THEME.faint}${(parts[0] || '').trim()}${theme_1.THEME.reset}`;
+            if (first.trim()) {
+                for (const line of (0, terminal_1.wrapText)(first, width))
+                    out.push(line);
+            }
+            const rest = parts.slice(1).filter((l) => l.trim());
+            if (rest.length > 0) {
+                for (const line of (0, terminal_1.wrapText)(rest.join('\n'), Math.max(4, width - 2))) {
+                    out.push(`${theme_1.THEME.faint}${line}${theme_1.THEME.reset}`);
+                }
+            }
+            out.push('');
+            return out;
+        }
+        case 'system':
+            for (const line of (0, terminal_1.wrapText)(body, width))
+                out.push(`${theme_1.THEME.faint}${line}${theme_1.THEME.reset}`);
+            out.push('');
+            return out;
+        case 'error':
+            for (const line of (0, terminal_1.wrapText)(body, width))
+                out.push(`${theme_1.THEME.error}${line}${theme_1.THEME.reset}`);
+            out.push('');
+            return out;
+        case 'success':
+            for (const line of (0, terminal_1.wrapText)(body, width))
+                out.push(`${theme_1.THEME.success}${line}${theme_1.THEME.reset}`);
+            out.push('');
+            return out;
+        case 'warning':
+            for (const line of (0, terminal_1.wrapText)(body, width))
+                out.push(`${theme_1.THEME.warn}${line}${theme_1.THEME.reset}`);
+            out.push('');
+            return out;
+        default: {
+            // Assistant: plain foreground text (Freebuff style — no label).
+            const marker = m.streaming ? `${theme_1.THEME.info}◐ ${theme_1.THEME.reset}` : '';
+            const lines = (0, terminal_1.wrapText)(body, width);
+            if (lines.length === 0)
+                lines.push('(no content)');
+            for (let i = 0; i < lines.length; i++) {
+                out.push(i === 0 ? `${marker}${lines[i]}` : lines[i]);
+            }
+            out.push('');
+            return out;
+        }
     }
-    // Bottom border + blank separator
-    out.push(border + bl + hz.repeat(inner + 2) + br + theme_1.THEME.reset);
-    out.push('');
-    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;
 }
@@ -73,3 +113,44 @@ function clampScroll(offset, messages, width, height) {
     const max = Math.max(0, all.length - height);
     return Math.min(Math.max(0, offset), max);
 }
+/** Full-width VECTORHEAD ASCII logo (white, Freebuff block style). */
+const VECTORHEAD_LOGO = [
+    '██╗   ██╗███████╗ ██████╗████████╗ ██████╗ ██████╗ ██╗  ██╗███████╗ █████╗ ██████╗',
+    '██║   ██║██╔════╝██╔════╝╚══██╔══╝██╔═══██╗██╔══██╗██║  ██║██╔════╝██╔══██╗██╔══██╗',
+    '██║   ██║█████╗  ██║        ██║   ██║   ██║██████╔╝███████║█████╗  ███████║██║  ██║',
+    '╚██╗ ██╔╝██╔══╝  ██║        ██║   ██║   ██║██╔══██╗██╔══██║██╔══╝  ██╔══██║██║  ██║',
+    ' ╚████╔╝ ███████╗╚██████╗   ██║   ╚██████╔╝██║  ██║██║  ██║███████╗██║  ██║██████╔╝',
+    '  ╚═══╝  ╚══════╝ ╚═════╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═════╝ ',
+];
+/**
+ * Freebuff-style welcome screen (shown while the chat is empty): logo,
+ * tagline and Directory line, centered in the chat area. On narrow
+ * terminals the full logo is replaced by a compact wordmark.
+ */
+function renderWelcome(width, height, cwd) {
+    const lines = [];
+    if (width >= 85) { // full logo is ~82 cols; narrower terminals get the wordmark
+        for (const l of VECTORHEAD_LOGO)
+            lines.push(`${theme_1.THEME.textBright}${l}${theme_1.THEME.reset}`);
+    }
+    else {
+        lines.push(`${theme_1.THEME.accent}▮${theme_1.THEME.reset} ${theme_1.THEME.bold}${theme_1.THEME.textBright}VectorHead${theme_1.THEME.reset}`);
+    }
+    lines.push('');
+    for (const t of ['VectorHead will run commands on your behalf', 'to help you build.']) {
+        for (const line of (0, terminal_1.wrapText)(t, Math.max(10, width - 4))) {
+            lines.push(`${theme_1.THEME.muted}${line}${theme_1.THEME.reset}`);
+        }
+    }
+    lines.push('');
+    lines.push(`${theme_1.THEME.muted}Directory ${theme_1.THEME.directory}${(0, terminal_1.truncate)(cwd, Math.max(10, width - 12))}${theme_1.THEME.reset}`);
+    const centered = lines.map((l) => center(l, width));
+    const padTop = Math.max(0, Math.floor((height - centered.length) / 2));
+    const out = [];
+    for (let i = 0; i < padTop; i++)
+        out.push('');
+    out.push(...centered);
+    while (out.length < height)
+        out.push('');
+    return out.slice(0, Math.max(0, height));
+}

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);
@@ -51,11 +51,13 @@ function renderSelector(opts) {
     const top = Math.max(1, Math.floor((opts.rows - height) / 2));
     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 borderColor = theme_1.THEME.accent;
+    const contentW = innerWidth - 2;
+    // Title row: ╭── Title ────────────╮ (exactly innerWidth+2 wide, green accent)
+    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 +
+        terminal_1.ANSI.bold + theme_1.THEME.textBright + t + terminal_1.ANSI.reset + borderColor +
         terminal_1.BOX.h.repeat(Math.max(0, innerWidth - 2 - (0, terminal_1.visibleWidth)(t))) + terminal_1.BOX.tr);
     for (let i = 0; i < visible; i++) {
         const idx = start + i;
@@ -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 + theme_1.THEME.accent + (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

@@ -5,6 +5,7 @@ exports.InputBox = void 0;
  * Input box — single-line text input with cursor, history, and hints.
  */
 const terminal_1 = require("../utils/terminal");
+const theme_1 = require("./theme");
 class InputBox {
     text = '';
     cursor = 0;
@@ -97,7 +98,7 @@ class InputBox {
     }
     /** Render the input line, returns the cursor column (0-based within line). */
     render(width) {
-        const prefix = `${terminal_1.ANSI.fg(220)}❯${terminal_1.ANSI.reset} `;
+        const prefix = `${theme_1.THEME.accent}❯${terminal_1.ANSI.reset} `;
         const prefixWidth = 2; // ❯ + space (ANSI codes are invisible)
         const available = Math.max(1, width - prefixWidth - 1);
         let display = this.text;
@@ -107,7 +108,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,16 @@ 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 status bar.
+ * Freebuff-style clean lines (no shortcut hints), truncated to fit
+ * narrow/mobile terminals. Bottom bar shows live status, spinner and
+ * an elapsed timer while the agent is working.
  */
 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,45 +22,46 @@ 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}`;
     const status = `${dot} ${(0, theme_1.statusColor)(info.status)}${info.status}${theme_1.THEME.reset}`;
     const left = `${brand}  ${status}`;
     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 model = `${theme_1.THEME.faint}${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 label = `${theme_1.THEME.dim}Project:${theme_1.THEME.reset} ${theme_1.THEME.muted}${info.project}${theme_1.THEME.reset}`;
+    const modeColor = info.mode === 'yolo' ? theme_1.THEME.warn : theme_1.THEME.faint;
     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 status bar: live status + spinner + elapsed timer. */
 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 = '';
+    const statusColorCode = (0, theme_1.statusColor)(info.status);
+    let left;
     if (info.running && info.spinner) {
-        right = `${(0, theme_1.statusColor)(info.status)}${info.spinner}${theme_1.THEME.reset} `;
+        left = `${statusColorCode}${info.spinner}${theme_1.THEME.reset} ${statusColorCode}${info.status}${theme_1.THEME.reset}`;
+    }
+    else {
+        left = `${statusColorCode}${info.status}${theme_1.THEME.reset}`;
+    }
+    let right = '';
+    if (info.running && info.elapsed !== undefined) {
+        right += `${theme_1.THEME.dim}${info.elapsed}s${theme_1.THEME.reset} `;
     }
     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}`;
+    const mode = info.mode === 'yolo' ? `${theme_1.THEME.warn}YOLO${theme_1.THEME.reset}` : `${theme_1.THEME.faint}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/tui/theme.js

@@ -3,25 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = exports.SPINNERS = exports.THEME = void 0;
 exports.statusColor = statusColor;
 /**
- * VectorHead theme — consistent premium palette for the TUI.
- * Warm dark palette with orange accent + gold highlights.
+ * VectorHead theme — Freebuff-style palette (adopted from CodebuffAI/freebuff dark theme).
+ * Primary brand green #9EFC62, slate neutrals, gray AI line, green user line.
  */
 exports.THEME = {
-    accent: '\x1b[38;5;208m', // bright orange
-    accentDim: '\x1b[38;5;172m',
-    gold: '\x1b[38;5;220m',
-    text: '\x1b[38;5;252m',
+    accent: '\x1b[38;5;156m', // Freebuff primary green (#9EFC62 ≈ 156)
+    accentDim: '\x1b[38;5;120m',
+    gold: '\x1b[38;5;220m', // markdown heading yellow (#facc15 ≈ 220)
+    text: '\x1b[38;5;255m', // foreground #f1f5f9 ≈ 255
     textBright: '\x1b[38;5;255m',
-    muted: '\x1b[38;5;244m',
-    faint: '\x1b[38;5;240m',
-    border: '\x1b[38;5;94m',
-    borderBright: '\x1b[38;5;208m',
+    muted: '\x1b[38;5;250m', // #acb3bf ≈ 250
+    faint: '\x1b[38;5;244m',
+    directory: '\x1b[38;5;249m', // #9CA3AF ≈ 249
+    border: '\x1b[38;5;60m', // slate #536175 ≈ 60
+    borderBright: '\x1b[38;5;156m',
     success: '\x1b[38;5;114m',
-    warn: '\x1b[38;5;215m',
+    warn: '\x1b[38;5;215m', // #FFA500 ≈ 215
     error: '\x1b[38;5;203m',
-    info: '\x1b[38;5;111m',
-    bgBar: '\x1b[48;5;235m',
-    bgPanel: '\x1b[48;5;236m',
+    info: '\x1b[38;5;156m',
+    // Message indicator lines (Freebuff): gray for AI, green for user
+    aiLine: '\x1b[38;5;244m',
+    userLine: '\x1b[38;5;156m',
+    bgBar: '\x1b[48;5;236m',
+    bgPanel: '\x1b[48;5;237m',
     bold: '\x1b[1m',
     dim: '\x1b[2m',
     reset: '\x1b[0m',
@@ -39,8 +43,8 @@ function statusColor(status) {
         return exports.THEME.success;
     if (s.includes('stopped') || s.includes('cancel'))
         return exports.THEME.muted;
-    if (s.includes('thinking') || s.includes('plan'))
-        return exports.THEME.info;
+    if (s.includes('thinking') || s.includes('plan') || s.includes('work'))
+        return exports.THEME.accent;
     if (s.includes('run') || s.includes('exec'))
         return exports.THEME.accent;
     return exports.THEME.info;

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,34 @@ 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();
+            // Word-aware wrap (Freebuff uses wrapMode: 'word'): break at the last
+            // space so words are not split mid-word. ANSI codes never contain a
+            // space, so lastIndexOf(' ') on the raw buffer is safe.
+            const lastSpace = current.lastIndexOf(' ');
+            if (lastSpace > 0) {
+                const carried = current.slice(lastSpace + 1);
+                const carriedW = visibleWidth(carried);
+                if (carriedW > 0 && carriedW + w <= width) {
+                    lines.push(current.slice(0, lastSpace));
+                    current = carried;
+                    visibleLen = carriedW;
+                }
+                else {
+                    flushLine();
+                }
+            }
+            else {
+                flushLine();
+            }
         }
-        current += ch;
+        current += unit;
         visibleLen += w;
-        i++;
+        i += unit.length;
     }
     flushLine();
     return lines;
@@ -145,11 +166,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 +181,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.6",
   "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",