agen-vektor 0.3.5 → 0.3.6

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) {
@@ -241,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…';
@@ -356,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;
@@ -725,6 +727,7 @@ 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 parts = [];
         // Row 1-2: header + project line
@@ -732,9 +735,9 @@ class App {
         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 + 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
+        // Chat area (rows 4..) — Freebuff-style message blocks (welcome screen when empty)
         const chatH = this.chatHeight();
-        const all = (0, chat_1.renderMessages)(this.messages, cols);
+        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);

package/dist/tui/chat.js

@@ -3,54 +3,98 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMessages = renderMessages;
 exports.defaultScroll = defaultScroll;
 exports.clampScroll = clampScroll;
+exports.renderWelcome = renderWelcome;
 /**
- * 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.
+ * 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 · model
- *     Inspecting project...
+ *   ██╗...VECTORHEAD logo (welcome only)
+ *   VectorHead will run commands on your behalf to help you build.
+ *   Directory /home/x
  *
- *                        ● YOU
- *                        perbaiki error auth
+ *   │ Inspecting project...            (user, italic, green bar)
  *
- *   ⚙ shell · $ npm test
+ *   Saya cek dulu file auth.ts.          (assistant)
+ *
+ *   ⚙ shell · $ npm test                 (tool, dim)
  */
 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;
+/** 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;
 }
-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 label row + wrapped content (user right-aligned). */
+/** Render one message as Freebuff-style lines. */
 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 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 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)';
-    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}`);
+    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;
+        }
     }
-    out.push(''); // blank separator between messages
-    return out;
 }
 /** Precompute the full list of rendered lines for all messages. */
 function renderMessages(messages, width) {
@@ -69,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

@@ -51,13 +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 borderColor = theme_1.THEME.accent;
     const contentW = innerWidth - 2;
-    // Title row: ╭── Title ────────────╮ (exactly innerWidth+2 wide)
+    // 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;
@@ -69,7 +69,7 @@ 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.truncate)(label, contentW - (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.truncate)(label, contentW - (0, terminal_1.visibleWidth)(hint)) + hint;

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;

package/dist/tui/statusbar.js

@@ -4,9 +4,10 @@ exports.renderHeader = renderHeader;
 exports.renderProjectBar = renderProjectBar;
 exports.renderStatusBar = renderStatusBar;
 /**
- * Status bar — top header + project line + bottom hint bar.
- * Clean Freebuff-style lines (no frames), truncated to fit narrow/mobile
- * terminals.
+ * 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");
@@ -28,7 +29,7 @@ function renderHeader(width, info) {
     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 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);
@@ -36,22 +37,29 @@ function renderHeader(width, info) {
 }
 /** 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 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 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 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);

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

@@ -135,7 +135,25 @@ function wrapText(text, width) {
         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 += unit;
         visibleLen += w;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agen-vektor",
-  "version": "0.3.5",
+  "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": {