agen-vektor 0.1.0 → 0.2.0

package/README.md

@@ -57,10 +57,10 @@ Then:
 vector
 ```
 
-### From npm (once published)
+### From npm
 
 ```bash
-npm install -g vector-cli
+npm install -g agen-vektor
 vector
 ```
 
@@ -69,7 +69,7 @@ vector
 ```bash
 pkg update && pkg upgrade
 pkg install nodejs git
-npm install -g vector-cli
+npm install -g agen-vektor
 vector
 ```
 

package/dist/tui/app.js

@@ -53,6 +53,7 @@ const chat_1 = require("./chat");
 const input_1 = require("./input");
 const statusbar_1 = require("./statusbar");
 const components_1 = require("./components");
+const theme_1 = require("./theme");
 const diff_1 = require("./diff");
 const planner_1 = require("../agent/planner");
 const session_1 = require("../agent/session");
@@ -76,6 +77,7 @@ class App {
     pendingPrompt = '';
     planToExecute = null;
     abortController = null;
+    spinner = new theme_1.Spinner();
     constructor(agent, opts) {
         this.agent = agent;
         this.opts = opts;
@@ -219,7 +221,8 @@ class App {
         this.scroll = 0;
         this.running = true;
         this.status = 'Thinking';
-        this.statusColor = terminal_1.ANSI.yellow;
+        this.statusColor = (0, theme_1.statusColor)('Thinking');
+        this.spinner.reset();
         this.abortController = new AbortController();
         // Show plan first if requested
         if (this.opts.showPlan) {
@@ -259,6 +262,7 @@ class App {
             kind: 'assistant',
             content: '',
             streaming: true,
+            meta: this.agent.config.model,
         }) - 1;
         this.agent.setCallbacks({
             onDelta: (delta) => {
@@ -268,7 +272,7 @@ class App {
             },
             onStatus: (status) => {
                 this.status = status;
-                this.statusColor = status.startsWith('✗') || status.includes('error') || status.includes('Error') ? terminal_1.ANSI.red : terminal_1.ANSI.yellow;
+                this.statusColor = (0, theme_1.statusColor)(status);
             },
             onToolCall: (tool, args) => {
                 let preview = '';
@@ -680,12 +684,14 @@ class App {
         const { rows, cols } = (0, terminal_1.getTerminalSize)();
         const info = {
             status: this.status,
-            statusColor: this.statusColor,
+            statusColor: (0, theme_1.statusColor)(this.status),
             model: this.agent.config.model,
             provider: this.agent.config.provider,
             project: this.agent.cwd,
             connected: this.connected,
             mode: this.agent.config.permissionMode,
+            spinner: this.spinner.frame(),
+            running: this.running,
         };
         const parts = [];
         parts.push((0, statusbar_1.renderHeader)(cols, info));
@@ -704,7 +710,7 @@ class App {
         }
         // Separator
         const sepRow = chatTop + chatH;
-        parts.push((0, terminal_1.cursorTo)(sepRow, 1) + terminal_1.ANSI.clearLineEnd + terminal_1.ANSI.dim + terminal_1.BOX.h.repeat(Math.min(cols, 120)) + terminal_1.ANSI.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
         const inputRow = sepRow + 1;
         const rendered = this.input.render(cols);
@@ -712,7 +718,7 @@ class App {
         const cursorCol = rendered.cursorCol + 1;
         // Status bar
         const statusRow = inputRow + 1;
-        parts.push((0, terminal_1.cursorTo)(statusRow, 1) + terminal_1.ANSI.clearLineEnd + (0, statusbar_1.renderStatusBar)(info, cols));
+        parts.push((0, terminal_1.cursorTo)(statusRow, 1) + terminal_1.ANSI.clearLineEnd + (0, statusbar_1.renderStatusBar)(cols, info));
         // Modal overlay
         if (this.modal.type !== 'none') {
             const overlay = this.renderModal(rows, cols);
@@ -867,7 +873,11 @@ class App {
                     ],
                 }, rows, cols);
             case 'confirm':
-                return (0, components_1.renderModal)({ title: m.title, body: m.body }, rows, cols);
+                return (0, components_1.renderConfirm)({
+                    title: m.title,
+                    body: m.body,
+                    focused: 'confirm',
+                }, rows, cols);
             case 'apikey':
                 return (0, components_1.renderModal)({
                     title: `API key for ${m.provider}`,

package/dist/tui/chat.js

@@ -7,15 +7,15 @@ exports.clampScroll = clampScroll;
  * Chat view — renders conversation messages with scrolling.
  * Message types: user, assistant (streamed), tool, system/status, plan.
  */
-const terminal_1 = require("../utils/terminal");
+const theme_1 = require("./theme");
 const KIND_STYLE = {
-    user: { prefix: 'YOU', color: terminal_1.ANSI.brightBlue },
-    assistant: { prefix: 'VECTOR', color: terminal_1.ANSI.brightGreen },
-    tool: { prefix: 'TOOL', color: terminal_1.ANSI.brightYellow },
-    system: { prefix: '···', color: terminal_1.ANSI.gray },
-    error: { prefix: '✗', color: terminal_1.ANSI.brightRed },
-    success: { prefix: '✓', color: terminal_1.ANSI.brightGreen },
-    warning: { prefix: '⚠', color: terminal_1.ANSI.brightYellow },
+    user: { prefix: 'YOU', color: theme_1.THEME.info },
+    assistant: { prefix: 'VECTOR', 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 },
 };
 function plainLines(text, width) {
     const lines = text.split('\n');
@@ -37,29 +37,15 @@ function renderMessages(messages, width) {
     for (const m of messages) {
         const style = KIND_STYLE[m.kind];
         const prefix = m.prefix || style.prefix;
-        const header = `${style.color}${terminal_1.ANSI.bold}${prefix}${terminal_1.ANSI.reset}${m.streaming ? terminal_1.ANSI.blink + ' ▍' + terminal_1.ANSI.reset : ''}`;
-        const headerLine = m.tool ? `${header} ${terminal_1.ANSI.dim}${m.tool}${terminal_1.ANSI.reset}` : header;
-        out.push(headerLine);
+        const dot = m.streaming ? `${theme_1.THEME.warn}◐${theme_1.THEME.reset} ` : `${style.color}●${theme_1.THEME.reset} `;
+        const header = `${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}` : '';
+        out.push(header + toolName + meta);
         const body = m.content || '(no content)';
+        const bar = `${style.color}│${theme_1.THEME.reset} `;
         for (const line of plainLines(body, width)) {
-            if (m.kind === 'user') {
-                out.push(`${terminal_1.ANSI.brightBlue}│ ${line}${terminal_1.ANSI.reset}`);
-            }
-            else if (m.kind === 'tool') {
-                out.push(`${terminal_1.ANSI.brightYellow}│ ${line}${terminal_1.ANSI.reset}`);
-            }
-            else if (m.kind === 'error') {
-                out.push(`${terminal_1.ANSI.brightRed}│ ${line}${terminal_1.ANSI.reset}`);
-            }
-            else if (m.kind === 'success') {
-                out.push(`${terminal_1.ANSI.brightGreen}│ ${line}${terminal_1.ANSI.reset}`);
-            }
-            else if (m.kind === 'warning') {
-                out.push(`${terminal_1.ANSI.brightYellow}│ ${line}${terminal_1.ANSI.reset}`);
-            }
-            else {
-                out.push(`  ${line}`);
-            }
+            out.push(`${bar}${line}`);
         }
         out.push(''); // blank line between messages
     }

package/dist/tui/components.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderModal = renderModal;
 exports.renderSelector = renderSelector;
+exports.renderConfirm = renderConfirm;
 /**
  * Reusable TUI components — modal overlay and list selector.
  */
 const terminal_1 = require("../utils/terminal");
+const theme_1 = require("./theme");
 /** Render a centered modal box. Returns the box's top row (1-based). */
 function renderModal(opts, rows, cols) {
     const title = opts.title;
@@ -15,7 +17,7 @@ function renderModal(opts, rows, cols) {
     const height = Math.min(rows - 2, bodyLines.length + footerLines.length + 4);
     const top = Math.max(1, Math.floor((rows - height) / 2));
     const left = Math.max(1, Math.floor((cols - innerWidth - 2) / 2));
-    const borderColor = opts.danger ? terminal_1.ANSI.brightRed : terminal_1.ANSI.cyan;
+    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;
@@ -23,19 +25,19 @@ function renderModal(opts, rows, cols) {
     const t = (0, terminal_1.pad)(title.slice(0, innerWidth - 2), innerWidth);
     lines.push((0, terminal_1.cursorTo)(top, left) +
         topBorder.slice(0, 2) +
-        terminal_1.ANSI.bold + terminal_1.ANSI.white + t + terminal_1.ANSI.reset + borderColor +
+        theme_1.THEME.bold + theme_1.THEME.textBright + t + theme_1.THEME.reset + borderColor +
         topBorder.slice(2));
     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);
-        lines.push((0, terminal_1.cursorTo)(top + 1 + i, left) + borderColor + terminal_1.BOX.v + ' ' + lineStr + terminal_1.ANSI.reset + borderColor + ' ' + terminal_1.BOX.v);
+        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);
-        lines.push((0, terminal_1.cursorTo)(row, left) + borderColor + terminal_1.BOX.v + ' ' + terminal_1.ANSI.dim + lineStr + terminal_1.ANSI.reset + borderColor + ' ' + terminal_1.BOX.v);
+        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);
     return { top, lines };
@@ -79,7 +81,28 @@ function renderSelector(opts) {
     const footerText = opts.footer ? opts.footer : '↑↓ navigate · Enter select · Esc cancel';
     const f = (0, terminal_1.pad)(footerText.slice(0, innerWidth - 2), innerWidth);
     lines.push((0, terminal_1.cursorTo)(top + visible + 1, left) +
-        borderColor + terminal_1.BOX.bl + terminal_1.BOX.h.repeat(2) + terminal_1.ANSI.dim + f + terminal_1.ANSI.reset + borderColor +
+        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);
     return { top, lines };
 }
+/**
+ * Render a confirm dialog with a focused button ([OK] / [Cancel]).
+ * Body lines may contain ANSI codes; width is computed from content.
+ */
+function renderConfirm(opts, rows, cols) {
+    const confirmLabel = opts.confirmLabel || 'OK';
+    const cancelLabel = opts.cancelLabel || 'Cancel';
+    const focused = opts.focused || 'confirm';
+    const confirmBtn = focused === 'confirm'
+        ? `${theme_1.THEME.bgPanel}${theme_1.THEME.bold}${opts.danger ? theme_1.THEME.error : theme_1.THEME.accent} ${confirmLabel} ${theme_1.THEME.reset}`
+        : `${theme_1.THEME.faint} ${confirmLabel} ${theme_1.THEME.reset}`;
+    const cancelBtn = focused === 'cancel'
+        ? `${theme_1.THEME.bgPanel}${theme_1.THEME.bold}${theme_1.THEME.muted} ${cancelLabel} ${theme_1.THEME.reset}`
+        : `${theme_1.THEME.faint} ${cancelLabel} ${theme_1.THEME.reset}`;
+    const body = [...opts.body, '', `${confirmBtn}   ${cancelBtn}`];
+    return renderModal({
+        title: opts.title,
+        body,
+        danger: opts.danger,
+    }, rows, cols);
+}

package/dist/tui/diff.js

@@ -4,44 +4,105 @@ exports.diffLines = diffLines;
 exports.computeDiff = computeDiff;
 exports.renderDiffModal = renderDiffModal;
 /**
- * Diff viewer — renders unified diffs with color, plus a
- * modal with Accept / Reject actions.
+ * Diff viewer — renders unified diffs with hunk headers and color,
+ * plus a modal with Accept / Reject actions.
  */
-const terminal_1 = require("../utils/terminal");
+const theme_1 = require("./theme");
 const components_1 = require("./components");
-/** Compute a minimal unified diff between two strings (line-based). */
+/**
+ * Compute a line-based unified diff with hunk headers (@@ -x,y +x,y @@).
+ * Uses LCS for small inputs; falls back to a full replace view for large ones.
+ */
 function diffLines(oldText, newText) {
-    return computeDiff(oldText, newText);
+    return computeDiff(oldText, newText).map((l) => l.text);
 }
 function computeDiff(oldText, newText) {
-    const oldLines = (oldText || '').split('\n');
-    const newLines = (newText || '').split('\n');
-    // Simple LCS-based diff for small files; falls back to full replace view.
+    const oldLines = splitLines(oldText);
+    const newLines = splitLines(newText);
+    // Large inputs: LCS is O(n*m); fall back to a simple full-replace view.
     if (oldLines.length * newLines.length > 250_000) {
-        const out = ['- (old) file content:'];
+        const out = [];
+        out.push({ type: 'file', text: `- old (${oldLines.length} lines)` });
         for (const l of oldLines)
-            out.push(`- ${l}`);
-        out.push('+ (new) file content:');
+            out.push({ type: 'del', text: `-${l}` });
+        out.push({ type: 'file', text: `+ new (${newLines.length} lines)` });
         for (const l of newLines)
-            out.push(`+ ${l}`);
+            out.push({ type: 'add', text: `+${l}` });
         return out;
     }
     const ops = lcsDiff(oldLines, newLines);
     const out = [];
+    // Rolling window of up to 3 context lines before a change.
+    const pendingContext = [];
+    // Current hunk buffer + its start positions.
+    let hunk = [];
+    let hunkOldStart = 0;
+    let hunkNewStart = 0;
+    // How many context lines currently trail the changes inside the hunk.
+    let trailingContext = 0;
+    let oldLine = 1;
+    let newLine = 1;
+    const flushHunk = () => {
+        if (hunk.length === 0)
+            return;
+        const oldCount = hunk.filter((l) => l.type !== 'add').length;
+        const newCount = hunk.filter((l) => l.type !== 'del').length;
+        out.push({ type: 'hunk', text: `@@ -${hunkOldStart},${oldCount} +${hunkNewStart},${newCount} @@` });
+        for (const l of hunk)
+            out.push(l);
+        hunk = [];
+        trailingContext = 0;
+    };
     for (const op of ops) {
-        if (op.type === 'same')
-            out.push(`  ${op.line}`);
-        else if (op.type === 'del')
-            out.push(`${terminal_1.ANSI.red}- ${op.line}${terminal_1.ANSI.reset}`);
+        if (op.type === 'same') {
+            if (hunk.length > 0 && trailingContext < 3) {
+                hunk.push({ type: 'same', text: ` ${op.line}` });
+                trailingContext++;
+                oldLine++;
+                newLine++;
+                continue;
+            }
+            if (hunk.length > 0)
+                flushHunk();
+            pendingContext.push({ type: 'same', text: ` ${op.line}` });
+            if (pendingContext.length > 3) {
+                const dropped = pendingContext.shift();
+                if (dropped)
+                    out.push(dropped);
+            }
+            oldLine++;
+            newLine++;
+            continue;
+        }
+        // A change: start or continue the hunk.
+        if (hunk.length === 0) {
+            hunkOldStart = oldLine - pendingContext.length;
+            hunkNewStart = newLine - pendingContext.length;
+            hunk = [...pendingContext];
+            pendingContext.length = 0;
+        }
+        hunk.push(op.type === 'del' ? { type: 'del', text: `-${op.line}` } : { type: 'add', text: `+${op.line}` });
+        trailingContext = 0;
+        if (op.type === 'del')
+            oldLine++;
         else
-            out.push(`${terminal_1.ANSI.green}+ ${op.line}${terminal_1.ANSI.reset}`);
+            newLine++;
+    }
+    flushHunk();
+    if (out.length === 0) {
+        out.push({ type: 'file', text: '(no changes)' });
     }
     return out;
 }
+function splitLines(text) {
+    const lines = (text || '').split('\n');
+    if (text.endsWith('\n'))
+        lines.pop();
+    return lines;
+}
 function lcsDiff(a, b) {
     const n = a.length;
     const m = b.length;
-    // DP table
     const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
     for (let i = n - 1; i >= 0; i--) {
         for (let j = m - 1; j >= 0; j--) {
@@ -79,14 +140,26 @@ function lcsDiff(a, b) {
     }
     return out;
 }
+function renderDiffLine(l) {
+    if (l.type === 'hunk')
+        return `${theme_1.THEME.accentDim}${theme_1.THEME.bold}${l.text}${theme_1.THEME.reset}`;
+    if (l.type === 'file')
+        return `${theme_1.THEME.gold}${theme_1.THEME.bold}${l.text}${theme_1.THEME.reset}`;
+    if (l.type === 'del')
+        return `${theme_1.THEME.error}${l.text}${theme_1.THEME.reset}`;
+    if (l.type === 'add')
+        return `${theme_1.THEME.success}${l.text}${theme_1.THEME.reset}`;
+    return `${theme_1.THEME.faint}${l.text}${theme_1.THEME.reset}`;
+}
 /** Render the diff modal with a header per file. */
 function renderDiffModal(entries, rows, cols, scroll, selectedAccept) {
     const innerWidth = Math.max(20, cols - 4);
     const body = [];
     for (const e of entries) {
-        body.push(`${terminal_1.ANSI.bold}${terminal_1.ANSI.brightCyan}── ${e.path}${terminal_1.ANSI.reset}`);
-        const diffLines = computeDiff(e.oldContent || '', e.newContent);
-        body.push(...diffLines);
+        body.push(`${theme_1.THEME.bold}${theme_1.THEME.accent}── ${e.path}${theme_1.THEME.reset}`);
+        for (const l of computeDiff(e.oldContent || '', e.newContent)) {
+            body.push(renderDiffLine(l));
+        }
         body.push('');
     }
     // Scroll window
@@ -94,7 +167,9 @@ function renderDiffModal(entries, rows, cols, scroll, selectedAccept) {
     const maxScroll = Math.max(0, body.length - visibleLines);
     const s = Math.min(scroll, maxScroll);
     const windowLines = body.slice(s, s + visibleLines);
-    const footer = `${selectedAccept === 'accept' ? terminal_1.ANSI.bold + terminal_1.ANSI.green + '[Accept]' + terminal_1.ANSI.reset : '[Accept]'}   ${selectedAccept === 'reject' ? terminal_1.ANSI.bold + terminal_1.ANSI.red + '[Reject]' + terminal_1.ANSI.reset : '[Reject]'}   ↑↓ scroll · ←→ choose · Enter confirm · Esc cancel`;
+    const accept = selectedAccept === 'accept' ? `${theme_1.THEME.bold}${theme_1.THEME.success}[Accept]${theme_1.THEME.reset}` : `[Accept]`;
+    const reject = selectedAccept === 'reject' ? `${theme_1.THEME.bold}${theme_1.THEME.error}[Reject]${theme_1.THEME.reset}` : `[Reject]`;
+    const footer = `${accept}   ${reject}   ↑↓ scroll · ←→ choose · Enter confirm · Esc cancel`;
     const modal = (0, components_1.renderModal)({
         title: `Diff — ${entries.length} file(s)`,
         body: windowLines,

package/dist/tui/statusbar.js

@@ -1,32 +1,47 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderStatusBar = renderStatusBar;
 exports.renderHeader = renderHeader;
 exports.renderProjectBar = renderProjectBar;
+exports.renderStatusBar = renderStatusBar;
 /**
- * Status bar — bottom hint bar + top header rendering.
+ * Status bar — top header + project bar + bottom hint bar.
+ * Uses the VECTOR theme with a live spinner while busy.
  */
 const terminal_1 = require("../utils/terminal");
-function renderStatusBar(info, width) {
-    const left = `ENTER Send · TAB Commands · CTRL+C Stop · ? Help`;
-    const right = `${info.connected ? terminal_1.ANSI.green + '●' : terminal_1.ANSI.red + '○'}${terminal_1.ANSI.reset} ${info.mode === 'yolo' ? terminal_1.ANSI.yellow + 'YOLO' + terminal_1.ANSI.reset : 'ask'}`;
-    const leftWidth = width - right.length - 1;
-    return terminal_1.ANSI.bgBlack + (0, terminal_1.pad)(left.slice(0, Math.max(0, leftWidth)), Math.max(0, leftWidth)) + right + terminal_1.ANSI.reset;
-}
+const theme_1 = require("./theme");
+/** Render the top header line: VECTOR ● status .... provider · model */
 function renderHeader(width, info) {
-    const brand = `${terminal_1.ANSI.bold}${terminal_1.ANSI.brightCyan}VECTOR${terminal_1.ANSI.reset}`;
-    const status = `${info.statusColor}●${terminal_1.ANSI.reset} ${info.status}`;
+    const brand = `${theme_1.THEME.bold}${theme_1.THEME.accent}VECTOR${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 right = `${terminal_1.ANSI.dim}${info.provider}${terminal_1.ANSI.reset} · ${info.model}`;
-    const rightWidth = visible(right);
+    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 terminal_1.ANSI.bgBlack + (0, terminal_1.pad)(line, width) + terminal_1.ANSI.reset;
+    return theme_1.THEME.bgBar + (0, terminal_1.pad)(line, width) + theme_1.THEME.reset;
 }
+/** Render the project line: Project: <path> .... Mode: ask|yolo */
 function renderProjectBar(width, info) {
-    const line = `${terminal_1.ANSI.dim}Project:${terminal_1.ANSI.reset} ${info.project}    ${terminal_1.ANSI.dim}Mode:${terminal_1.ANSI.reset} ${info.mode === 'yolo' ? terminal_1.ANSI.yellow + 'yolo' + terminal_1.ANSI.reset : 'ask'}`;
-    return terminal_1.ANSI.bgBlack + (0, terminal_1.pad)(line, width) + terminal_1.ANSI.reset;
+    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;
 }
-function visible(s) {
-    return s.replace(/\x1b\[[0-9;]*[A-Za-z]/g, '').length;
+/** 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 = '';
+    if (info.running && info.spinner) {
+        right = `${(0, theme_1.statusColor)(info.status)}${info.spinner}${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}`;
+    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;
 }

package/dist/tui/theme.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = exports.SPINNERS = exports.THEME = void 0;
+exports.statusColor = statusColor;
+/**
+ * VECTOR theme — consistent premium palette for the TUI.
+ * Dark cyber palette with cyan accent + gold highlights.
+ */
+exports.THEME = {
+    accent: '\x1b[38;5;51m', // bright cyan
+    accentDim: '\x1b[38;5;37m',
+    gold: '\x1b[38;5;220m',
+    text: '\x1b[38;5;252m',
+    textBright: '\x1b[38;5;255m',
+    muted: '\x1b[38;5;244m',
+    faint: '\x1b[38;5;240m',
+    border: '\x1b[38;5;66m',
+    borderBright: '\x1b[38;5;51m',
+    success: '\x1b[38;5;114m',
+    warn: '\x1b[38;5;215m',
+    error: '\x1b[38;5;203m',
+    info: '\x1b[38;5;111m',
+    bgBar: '\x1b[48;5;235m',
+    bgPanel: '\x1b[48;5;236m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    reset: '\x1b[0m',
+};
+/** Status → color mapping used by the header/statusbar. */
+function statusColor(status) {
+    const s = status.toLowerCase();
+    if (s.includes('error') || s.includes('fail') || s.includes('✗'))
+        return exports.THEME.error;
+    if (s.includes('warn') || s.includes('permission') || s.includes('⚠'))
+        return exports.THEME.warn;
+    if (s.includes('completed') || s.includes('success') || s.includes('✓'))
+        return exports.THEME.success;
+    if (s.includes('ready'))
+        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('run') || s.includes('exec'))
+        return exports.THEME.accent;
+    return exports.THEME.info;
+}
+/** Predefined spinner frame sets. */
+exports.SPINNERS = {
+    dots: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+    line: ['─', '╌', '╍', '═', '╍', '╌'],
+    arrows: ['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'],
+    pulse: ['●', '◐', '◑', '○'],
+};
+/** A frame-advancing spinner (call frame() on each render tick). */
+class Spinner {
+    frames;
+    index = 0;
+    ticks = 0;
+    constructor(frames = exports.SPINNERS.dots) {
+        this.frames = frames;
+    }
+    /** Advance and return the current frame. */
+    frame() {
+        // Advance roughly every 3rd call for a calm ~1.5s cycle at 50ms ticks
+        this.ticks++;
+        if (this.ticks % 3 === 0)
+            this.index = (this.index + 1) % this.frames.length;
+        return this.frames[this.index];
+    }
+    reset() {
+        this.index = 0;
+        this.ticks = 0;
+    }
+}
+exports.Spinner = Spinner;

package/package.json

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