zoe-agent 0.3.1

package/dist/adapters/cli/tui/components/command-palette.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+import { fuzzyFilter } from './autocomplete.js';
+const MAX_VISIBLE = 8;
+/**
+ * Ctrl+P command palette: type to fuzzy-filter commands + skills, ↑/↓ to
+ * navigate, Enter to run, Esc to close. Owns its input (the prompt is hidden
+ * while the palette is open).
+ */
+export function CommandPalette({ commands, skills, onRun, onClose }) {
+    const theme = useTheme();
+    const [query, setQuery] = useState('');
+    const [selected, setSelected] = useState(0);
+    const matches = fuzzyFilter([...commands, ...skills], query);
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.return) {
+            const m = matches[Math.min(selected, matches.length - 1)] ?? matches[0];
+            if (m)
+                onRun(m.name);
+            return;
+        }
+        if (key.upArrow) {
+            setSelected((i) => Math.max(0, i - 1));
+        }
+        else if (key.downArrow) {
+            setSelected((i) => Math.min(matches.length - 1, i + 1));
+        }
+        else if (key.backspace || key.delete) {
+            setQuery((q) => q.slice(0, -1));
+            setSelected(0);
+        }
+        else if (input && !key.ctrl && !key.meta && input.length >= 1 && input >= ' ') {
+            setQuery((q) => q + input);
+            setSelected(0);
+        }
+    });
+    const half = Math.floor(MAX_VISIBLE / 2);
+    const start = Math.max(0, Math.min(selected - half, matches.length - MAX_VISIBLE));
+    const visible = matches.slice(start, start + MAX_VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.purple, paddingLeft: 1, paddingRight: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.purple, bold: true, children: "\u276F " }), _jsx(Text, { color: theme.fg, children: query }), _jsxs(Text, { color: theme.fgDim, children: [" ", matches.length > 0 ? `(↑↓ select, Enter run, Esc close)` : '— no matches'] })] }), visible.map((s, i) => {
+                const sel = start + i === selected;
+                return (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: sel ? theme.blue : undefined, color: sel ? theme.bg : theme.green, children: [sel ? '▶ ' : '  ', s.name] }), s.description ? _jsxs(Text, { color: theme.fgDim, children: [" ", s.description.split('\n')[0].slice(0, 40)] }) : null] }, s.name));
+            }), matches.length > MAX_VISIBLE ? (_jsxs(Text, { color: theme.fgDim, children: ["  ", matches.length - MAX_VISIBLE, " more"] })) : null] }));
+}

package/dist/adapters/cli/tui/components/diff-viewer.d.ts

@@ -0,0 +1,5 @@
+export declare function DiffViewer({ oldContent, newContent, expanded }: {
+    oldContent: string | null;
+    newContent: string;
+    expanded: boolean;
+}): import("react").JSX.Element;

package/dist/adapters/cli/tui/components/diff-viewer.js

@@ -0,0 +1,109 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Inline unified-diff renderer for `write_file` tool calls.
+ *
+ * Renders the DiffViewLine[] from `computeDiffLines` as green `+` / red `-` /
+ * dim ` ` lines with padded line numbers. Unchanged runs not adjacent to a
+ * change are collapsed with a `… N unchanged lines skipped` marker (Pi-style,
+ * research.md R4). Collapsed-by-default with a `… N more lines` expand hint
+ * (Ctrl+O toggles `expanded` globally in app.tsx).
+ *
+ * Rendered as ONE `<Text>` with nested colored spans separated by `\n` — the
+ * canonical ink pattern for multi-line colored text (a `<Box>` of separate
+ * `<Text>` rows mis-measures on some line widths).
+ */
+import { Text } from 'ink';
+import { useMemo } from 'react';
+import { useTheme } from '../hooks/use-theme.js';
+import { computeDiffLines } from '../diff/line-diff.js';
+const CONTEXT = 3; // context lines retained around each changed run
+const COLLAPSED_BUDGET = 50; // max diff lines shown when collapsed
+/** Collapse runs of unchanged context not within `context` lines of a change. */
+function collapseContext(lines, context) {
+    const keep = new Array(lines.length).fill(false);
+    for (let i = 0; i < lines.length; i++) {
+        if (lines[i].kind !== 'context') {
+            const from = Math.max(0, i - context);
+            const to = Math.min(lines.length - 1, i + context);
+            for (let j = from; j <= to; j++)
+                keep[j] = true;
+        }
+    }
+    const items = [];
+    let run = 0;
+    for (let i = 0; i < lines.length; i++) {
+        if (keep[i]) {
+            if (run > 0) {
+                items.push({ type: 'skip', count: run });
+                run = 0;
+            }
+            items.push({ type: 'line', line: lines[i] });
+        }
+        else {
+            run++;
+        }
+    }
+    if (run > 0)
+        items.push({ type: 'skip', count: run });
+    return items;
+}
+function linePrefix(line, width) {
+    if (line.kind === 'added')
+        return `+${String(line.newLineNo).padStart(width)} ${line.text}`;
+    if (line.kind === 'removed')
+        return `-${String(line.oldLineNo).padStart(width)} ${line.text}`;
+    return ` ${String(line.oldLineNo).padStart(width)} ${line.text}`;
+}
+function lineColor(line, theme) {
+    return line.kind === 'added' ? theme.green : line.kind === 'removed' ? theme.red : theme.fgDim;
+}
+export function DiffViewer({ oldContent, newContent, expanded }) {
+    const theme = useTheme();
+    const lines = useMemo(() => computeDiffLines(oldContent, newContent), [oldContent, newContent]);
+    const items = useMemo(() => collapseContext(lines, CONTEXT), [lines]);
+    // No diffable lines ⇒ either a brand-new empty file or an empty→empty rewrite.
+    if (lines.length === 0) {
+        return _jsxs(Text, { color: theme.fgDim, children: [" ", oldContent === null ? '(new empty file)' : '(no changes)'] });
+    }
+    if (!lines.some((l) => l.kind !== 'context')) {
+        return _jsx(Text, { color: theme.fgDim, children: " (no changes)" });
+    }
+    const maxNo = lines.reduce((m, l) => Math.max(m, l.kind === 'added' ? l.newLineNo : l.kind === 'removed' ? l.oldLineNo : l.newLineNo), 1);
+    const width = String(maxNo).length;
+    let shown = items;
+    let dropped = 0;
+    if (!expanded) {
+        const kept = [];
+        let count = 0;
+        for (const it of items) {
+            if (it.type === 'line' && count >= COLLAPSED_BUDGET) {
+                dropped++;
+                continue;
+            }
+            kept.push(it);
+            if (it.type === 'line')
+                count++;
+        }
+        shown = kept;
+    }
+    // Trim a trailing skip marker (nothing follows it).
+    if (shown.length > 0 && shown[shown.length - 1].type === 'skip') {
+        shown = shown.slice(0, -1);
+    }
+    const nodes = [];
+    shown.forEach((it, i) => {
+        if (i > 0)
+            nodes.push('\n');
+        if (it.type === 'skip') {
+            nodes.push(_jsx(Text, { color: theme.fgDim, children: ` … ${it.count} unchanged line${it.count === 1 ? '' : 's'} skipped` }, `s${i}`));
+        }
+        else {
+            nodes.push(_jsx(Text, { color: lineColor(it.line, theme), children: linePrefix(it.line, width) }, `l${i}`));
+        }
+    });
+    if (dropped > 0) {
+        nodes.push('\n');
+        nodes.push(_jsx(Text, { color: theme.fgDim, children: ` … ${dropped} more line${dropped === 1 ? '' : 's'} (Ctrl+O to expand)` }, "more"));
+    }
+    return _jsx(Text, { children: nodes });
+}

package/dist/adapters/cli/tui/components/error-message.d.ts

@@ -0,0 +1,5 @@
+import type { ErrorEntry } from '../types.js';
+/** An error entry — red glyph + message. */
+export declare function ErrorMessage({ entry }: {
+    entry: ErrorEntry;
+}): import("react").JSX.Element;

package/dist/adapters/cli/tui/components/error-message.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+/** An error entry — red glyph + message. */
+export function ErrorMessage({ entry }) {
+    const theme = useTheme();
+    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.red, bold: true, children: "\u2717 " }), _jsx(Text, { color: theme.red, children: entry.message })] }));
+}

package/dist/adapters/cli/tui/components/footer.d.ts

@@ -0,0 +1,20 @@
+import type { CumulativeUsage, PermissionLevel } from '../../../../core/types.js';
+interface FooterProps {
+    providerType: string;
+    model: string;
+    usage: CumulativeUsage;
+    permissionLevel?: PermissionLevel;
+    skillCount: number;
+    gatewayOn: boolean;
+    mcpCount: number;
+    /** Last turn's input size in tokens (the current context-window usage). */
+    contextTokens: number;
+    /** The active model's max context in tokens (undefined if unknown). */
+    contextWindow?: number;
+}
+/**
+ * Fixed bottom status bar: provider | model | context-window | cost | permission
+ * | skills | gw. Context-window + cost update live from the agent's usage.
+ */
+export declare function Footer({ providerType, model, usage, permissionLevel, skillCount, gatewayOn, mcpCount, contextTokens, contextWindow, }: FooterProps): import("react").JSX.Element;
+export {};

package/dist/adapters/cli/tui/components/footer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+/** "12k/200k (6%)" when the limit is known, else just the used amount. */
+function fmtContext(used, limit) {
+    if (!limit)
+        return `${Math.round(used / 1000)}k`;
+    const pct = Math.round((used / limit) * 100);
+    return `${Math.round(used / 1000)}k/${Math.round(limit / 1000)}k (${pct}%)`;
+}
+/**
+ * Fixed bottom status bar: provider | model | context-window | cost | permission
+ * | skills | gw. Context-window + cost update live from the agent's usage.
+ */
+export function Footer({ providerType, model, usage, permissionLevel, skillCount, gatewayOn, mcpCount, contextTokens, contextWindow, }) {
+    const theme = useTheme();
+    const sep = _jsx(Text, { color: theme.fgGutter, children: " \u2502 " });
+    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.purple, children: providerType }), sep, _jsx(Text, { color: theme.cyan, children: model }), sep, _jsx(Text, { color: theme.fgDim, children: fmtContext(contextTokens, contextWindow) }), sep, _jsxs(Text, { color: theme.fgDim, children: ["$", usage.totalCost.toFixed(2)] }), sep, _jsx(Text, { color: theme.fgDim, children: permissionLevel ?? 'moderate' }), sep, _jsxs(Text, { color: theme.fgDim, children: [skillCount, " skills"] }), sep, _jsxs(Text, { color: gatewayOn ? theme.green : theme.fgDim, children: ["gw: ", gatewayOn ? `on (${mcpCount})` : 'off'] })] }));
+}

package/dist/adapters/cli/tui/components/goal-status.d.ts

@@ -0,0 +1,12 @@
+export interface Todo {
+    description: string;
+    status: string;
+}
+/**
+ * GoalStatus — renders the agent's task list as bordered feed entries with
+ * status glyphs. Completed tasks are dimmed. Triggered when the agent calls
+ * the `manage_todos` tool (detected in tool-call-block).
+ */
+export declare function GoalStatus({ todos }: {
+    todos: Todo[];
+}): import("react").JSX.Element;

package/dist/adapters/cli/tui/components/goal-status.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+const GLYPHS = {
+    pending: '[ ]',
+    in_progress: '[~]',
+    completed: '[✓]',
+    blocked: '[!]',
+};
+/**
+ * GoalStatus — renders the agent's task list as bordered feed entries with
+ * status glyphs. Completed tasks are dimmed. Triggered when the agent calls
+ * the `manage_todos` tool (detected in tool-call-block).
+ */
+export function GoalStatus({ todos }) {
+    const theme = useTheme();
+    const colorFor = (s) => s === 'completed' ? theme.green
+        : s === 'in_progress' ? theme.yellow
+            : s === 'blocked' ? theme.red
+                : theme.fgDim;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.purple, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.purple, bold: true, children: "Tasks" }), todos.map((t, i) => (_jsxs(Box, { children: [_jsxs(Text, { children: [GLYPHS[t.status] ?? '[ ]', " "] }), _jsx(Text, { color: colorFor(t.status), dimColor: t.status === 'completed', children: t.description })] }, i)))] }));
+}

package/dist/adapters/cli/tui/components/info-message.d.ts

@@ -0,0 +1,5 @@
+import type { InfoEntry } from '../types.js';
+/** An info/warning/status line entry — dim, no speaker token. */
+export declare function InfoMessage({ entry }: {
+    entry: InfoEntry;
+}): import("react").JSX.Element;

package/dist/adapters/cli/tui/components/info-message.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+/** An info/warning/status line entry — dim, no speaker token. */
+export function InfoMessage({ entry }) {
+    const theme = useTheme();
+    return (_jsx(Box, { children: _jsx(Text, { color: theme.fgDim, children: entry.content }) }));
+}

package/dist/adapters/cli/tui/components/logo-banner.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Zoe Agent logo — figlet wordmark with a Tokyo Night 45° rainbow gradient
+ * (lolcat-style sweep, our palette) + a dim descriptor. Rendered as the first
+ * feed entry (kind: 'logo') on a fresh session, so it scrolls away as the user
+ * chats.
+ */
+export declare function LogoBanner(): import("react").JSX.Element;

package/dist/adapters/cli/tui/components/logo-banner.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import figlet from 'figlet';
+import { useTheme } from '../hooks/use-theme.js';
+import { rainbowCellColor } from '../logo/gradient.js';
+// figlet is lazy-loaded: this module only imports under the interactive TUI
+// (app.tsx → message-area → here), so headless/SDK/Server never pull it in.
+const WORDMARK = 'Zoe Agent';
+// "ANSI Compact" = solid-block figlet font (~54 cols) — the block vibe of Delta
+// Corps Priest 1 at a size that fits an 80-col terminal. Swap here for another
+// figlet font (e.g. 'Small Block' = 25 cols pixelated, 'Delta Corps Priest 1' =
+// ~102 cols wide). figlet has no scale option, so the font IS the size.
+const FONT = 'ANSI Compact';
+const VERSION = '0.3.0'; // keep in sync with package.json
+// Render once at module load; rstrip each line to drop invisible trailing spaces.
+const ART_LINES = figlet
+    .textSync(WORDMARK, { font: FONT, horizontalLayout: 'default' })
+    .replace(/\s+$/, '')
+    .split('\n')
+    .map((l) => l.replace(/\s+$/, ''));
+const ROWS = ART_LINES.length;
+const COLS = Math.max(...ART_LINES.map((l) => [...l].length));
+/**
+ * Zoe Agent logo — figlet wordmark with a Tokyo Night 45° rainbow gradient
+ * (lolcat-style sweep, our palette) + a dim descriptor. Rendered as the first
+ * feed entry (kind: 'logo') on a fresh session, so it scrolls away as the user
+ * chats.
+ */
+export function LogoBanner() {
+    const theme = useTheme();
+    const stops = [theme.red, theme.orange, theme.yellow, theme.green, theme.cyan, theme.blue, theme.purple];
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [ART_LINES.map((line, r) => (_jsx(Box, { children: [...line].map((ch, c) => ch === ' ' ? (_jsx(Text, { children: " " }, c)) : (_jsx(Text, { color: rainbowCellColor(r, c, ROWS, COLS, stops), children: ch }, c))) }, r))), _jsxs(Text, { color: theme.fgDim, children: [" by hashangit \u00B7 v", VERSION] })] }));
+}

package/dist/adapters/cli/tui/components/markdown.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Minimal CommonMark-subset renderer for assistant messages: code fences,
+ * inline code, **bold**, [links](url), bullet lists, and headings. Custom
+ * (no `marked` dependency — its marked-terminal peer conflicts on v18).
+ */
+export declare function Markdown({ content }: {
+    content: string;
+}): React.ReactElement;

package/dist/adapters/cli/tui/components/markdown.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+const INLINE_RE = /\*\*(.+?)\*\*|`(.+?)`|\[(.+?)\]\(([^)]+)\)/g;
+function parseInline(text) {
+    const segments = [];
+    let last = 0;
+    let m;
+    INLINE_RE.lastIndex = 0;
+    while ((m = INLINE_RE.exec(text)) !== null) {
+        if (m.index > last)
+            segments.push({ kind: 'text', text: text.slice(last, m.index) });
+        if (m[1] !== undefined)
+            segments.push({ kind: 'bold', text: m[1] });
+        else if (m[2] !== undefined)
+            segments.push({ kind: 'code', text: m[2] });
+        else if (m[3] !== undefined)
+            segments.push({ kind: 'link', text: m[3], url: m[4] });
+        last = INLINE_RE.lastIndex;
+    }
+    if (last < text.length)
+        segments.push({ kind: 'text', text: text.slice(last) });
+    return segments;
+}
+function InlineText({ text }) {
+    const theme = useTheme();
+    const segments = parseInline(text);
+    return (_jsx(Text, { children: segments.map((s, i) => {
+            if (s.kind === 'bold')
+                return _jsx(Text, { bold: true, children: s.text }, i);
+            if (s.kind === 'code')
+                return _jsx(Text, { backgroundColor: theme.bgHighlight, color: theme.orange, children: s.text }, i);
+            if (s.kind === 'link')
+                return _jsx(Text, { color: theme.cyan, children: s.text }, i);
+            return _jsx(Text, { children: s.text }, i);
+        }) }));
+}
+function parseBlocks(content) {
+    const lines = content.split('\n');
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        if (line.startsWith('```')) {
+            const code = [];
+            i++;
+            while (i < lines.length && !lines[i].startsWith('```')) {
+                code.push(lines[i]);
+                i++;
+            }
+            i++; // closing fence
+            blocks.push({ type: 'code', lines: code });
+        }
+        else if (/^#{1,6}\s/.test(line)) {
+            blocks.push({ type: 'heading', text: line.replace(/^#{1,6}\s/, '') });
+            i++;
+        }
+        else if (/^\s*[-*]\s+/.test(line)) {
+            blocks.push({ type: 'list', text: line.replace(/^\s*[-*]\s+/, '') });
+            i++;
+        }
+        else if (line.trim() === '') {
+            i++; // collapse blanks
+        }
+        else {
+            blocks.push({ type: 'paragraph', text: line });
+            i++;
+        }
+    }
+    return blocks;
+}
+/**
+ * Minimal CommonMark-subset renderer for assistant messages: code fences,
+ * inline code, **bold**, [links](url), bullet lists, and headings. Custom
+ * (no `marked` dependency — its marked-terminal peer conflicts on v18).
+ */
+export function Markdown({ content }) {
+    const theme = useTheme();
+    const blocks = parseBlocks(content);
+    return (_jsx(Box, { flexDirection: "column", children: blocks.map((b, i) => {
+            if (b.type === 'code') {
+                return (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.fgGutter, paddingLeft: 1, paddingRight: 1, children: b.lines.map((l, j) => (_jsx(Text, { color: theme.fgDim, children: l || ' ' }, j))) }, i));
+            }
+            if (b.type === 'heading') {
+                return (_jsx(Text, { bold: true, color: theme.purple, children: _jsx(InlineText, { text: b.text }) }, i));
+            }
+            if (b.type === 'list') {
+                return (_jsxs(Box, { children: [_jsx(Text, { color: theme.green, children: "\u2022 " }), _jsx(InlineText, { text: b.text })] }, i));
+            }
+            return _jsx(Text, { children: _jsx(InlineText, { text: b.text }) }, i);
+        }) }));
+}

package/dist/adapters/cli/tui/components/message-area.d.ts

@@ -0,0 +1,19 @@
+import type { FeedEntry } from '../types.js';
+/**
+ * Scrollable feed. Completed entries render via Ink's `<Static>` (each item is
+ * painted once and scrolls into the terminal's native scrollback); the
+ * pending-permission prompt and "working…" indicator are live components in
+ * `app.tsx`.
+ *
+ * Width handling: `<Static>` writes each item at the full terminal width and
+ * ignores parent padding, so an item that fills `columns` triggers the
+ * terminal's auto-wrap (a phantom row below). Each item is therefore capped at
+ * `columns - HORIZONTAL_PADDING` with a matching left pad, giving a symmetric
+ * gutter and keeping every line `< columns`. `useStdout` reads the live column
+ * count so resize reflows correctly.
+ */
+export declare function MessageArea({ entries, staticKey, expanded }: {
+    entries: FeedEntry[];
+    staticKey: number;
+    expanded: boolean;
+}): import("react").JSX.Element;

package/dist/adapters/cli/tui/components/message-area.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Static, Text, useStdout } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+import { HORIZONTAL_PADDING } from '../layout.js';
+import { UserMessage } from './user-message.js';
+import { AssistantMessage } from './assistant-message.js';
+import { ToolCallBlock } from './tool-call-block.js';
+import { ErrorMessage } from './error-message.js';
+import { InfoMessage } from './info-message.js';
+import { LogoBanner } from './logo-banner.js';
+/** Renders one feed entry by kind. */
+function FeedItem({ entry, expanded }) {
+    switch (entry.kind) {
+        case 'user':
+            return _jsx(UserMessage, { entry: entry });
+        case 'assistant':
+            return _jsx(AssistantMessage, { entry: entry });
+        case 'tool':
+            return _jsx(ToolCallBlock, { entry: entry, expanded: expanded });
+        case 'error':
+            return _jsx(ErrorMessage, { entry: entry });
+        case 'info':
+            return _jsx(InfoMessage, { entry: entry });
+        case 'logo':
+            return _jsx(LogoBanner, {});
+    }
+}
+/**
+ * Scrollable feed. Completed entries render via Ink's `<Static>` (each item is
+ * painted once and scrolls into the terminal's native scrollback); the
+ * pending-permission prompt and "working…" indicator are live components in
+ * `app.tsx`.
+ *
+ * Width handling: `<Static>` writes each item at the full terminal width and
+ * ignores parent padding, so an item that fills `columns` triggers the
+ * terminal's auto-wrap (a phantom row below). Each item is therefore capped at
+ * `columns - HORIZONTAL_PADDING` with a matching left pad, giving a symmetric
+ * gutter and keeping every line `< columns`. `useStdout` reads the live column
+ * count so resize reflows correctly.
+ */
+export function MessageArea({ entries, staticKey, expanded }) {
+    const theme = useTheme();
+    const { stdout } = useStdout();
+    const columns = stdout?.columns ?? 80;
+    const itemWidth = Math.max(20, columns - HORIZONTAL_PADDING);
+    if (entries.length === 0) {
+        return (_jsx(Box, { paddingLeft: HORIZONTAL_PADDING, children: _jsx(Text, { color: theme.fgDim, children: "No messages yet \u2014 type a prompt and press Enter." }) }));
+    }
+    return (
+    // `key={staticKey}`: bumping it (on resize / expand-toggle) remounts
+    // <Static> for a full repaint. The caller resets Ink's accumulated
+    // `fullStaticOutput` first (see ink-reset.ts) so the remount doesn't
+    // duplicate history. Normal appends still render incrementally.
+    _jsx(Static, { items: entries, children: (entry) => (_jsx(Box, { width: itemWidth, paddingLeft: HORIZONTAL_PADDING, children: _jsx(FeedItem, { entry: entry, expanded: expanded }) }, entry.id)) }, staticKey));
+}

package/dist/adapters/cli/tui/components/permission-prompt.d.ts

@@ -0,0 +1,13 @@
+interface PermissionPromptProps {
+    toolName: string;
+    args: Record<string, unknown>;
+    /** Called once with the user's decision. Double-fires are no-ops (use-agent clears the resolver). */
+    onResolve: (approve: boolean) => void;
+}
+/**
+ * Inline tool-approval prompt rendered in the feed while the agent is paused
+ * on `approveTool`. Stays within Ink's input handling — no stdin mode switch
+ * (unlike the readline path's inquirer suspend/resume).
+ */
+export declare function PermissionPrompt({ toolName, args, onResolve }: PermissionPromptProps): import("react").JSX.Element;
+export {};

package/dist/adapters/cli/tui/components/permission-prompt.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+/** One-line preview of the tool args. */
+function formatArgs(args) {
+    if (typeof args.command === 'string' && args.command.length > 0)
+        return args.command;
+    const json = JSON.stringify(args);
+    return json === '{}' ? '' : json;
+}
+/**
+ * Inline tool-approval prompt rendered in the feed while the agent is paused
+ * on `approveTool`. Stays within Ink's input handling — no stdin mode switch
+ * (unlike the readline path's inquirer suspend/resume).
+ */
+export function PermissionPrompt({ toolName, args, onResolve }) {
+    const theme = useTheme();
+    useInput((input) => {
+        const key = input.toLowerCase();
+        if (key === 'y')
+            onResolve(true);
+        else if (key === 'n')
+            onResolve(false);
+    });
+    const argsPreview = formatArgs(args);
+    return (_jsxs(Box, { borderStyle: "round", borderColor: theme.yellow, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.yellow, bold: true, children: "? " }), _jsx(Text, { color: theme.fg, children: "Run " }), _jsx(Text, { color: theme.purple, bold: true, children: toolName }), argsPreview ? _jsxs(Text, { color: theme.fgDim, children: [" ", truncate(argsPreview, 100)] }) : null, _jsx(Text, { color: theme.fg, children: "? [" }), _jsx(Text, { color: theme.green, bold: true, children: "y" }), _jsx(Text, { color: theme.fg, children: "/" }), _jsx(Text, { color: theme.red, bold: true, children: "n" }), _jsx(Text, { color: theme.fg, children: "]" })] }));
+}
+function truncate(text, max) {
+    if (text.length <= max)
+        return text;
+    return `${text.slice(0, max)}…`;
+}

package/dist/adapters/cli/tui/components/prompt-area.d.ts

@@ -0,0 +1,22 @@
+import { type Suggestion } from './autocomplete.js';
+interface PromptAreaProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    /** Recall previous/next prompt (↑ on the top line / ↓ on the bottom line). */
+    onHistoryUp?: () => void;
+    onHistoryDown?: () => void;
+    /** `/command` source (built-in registry). */
+    commands: Suggestion[];
+    /** `/<skill-name>` source. */
+    skills: Suggestion[];
+}
+/**
+ * Single-line input (custom TextInput) with a fuzzy autocomplete dropdown +
+ * input history. Typing `/` suggests slash commands + skills; typing `@`
+ * suggests project files (recursive index, fuzzy-matched). When the dropdown is
+ * open, ↑/↓ navigate it; when closed, ↑/↓ recall previous prompts. Tab/Enter
+ * accepts; a second Enter submits. Multi-line is P2 (PRD 19).
+ */
+export declare function PromptArea({ value, onChange, onSubmit, onHistoryUp, onHistoryDown, commands, skills }: PromptAreaProps): import("react").JSX.Element;
+export {};

package/dist/adapters/cli/tui/components/prompt-area.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+import { TextInput } from './text-input.js';
+import { Autocomplete, fuzzyFilter } from './autocomplete.js';
+import { getFileIndex } from '../file-index.js';
+/** Inspect the input's last token; return completion context if it's `/` or `@`. */
+function parseCompletion(value) {
+    const tokenStart = value.lastIndexOf(' ') + 1;
+    const token = value.slice(tokenStart);
+    if (token.startsWith('/'))
+        return { kind: '/', tokenStart, query: token.slice(1) };
+    if (token.startsWith('@'))
+        return { kind: '@', tokenStart, query: token.slice(1) };
+    return null;
+}
+/**
+ * Single-line input (custom TextInput) with a fuzzy autocomplete dropdown +
+ * input history. Typing `/` suggests slash commands + skills; typing `@`
+ * suggests project files (recursive index, fuzzy-matched). When the dropdown is
+ * open, ↑/↓ navigate it; when closed, ↑/↓ recall previous prompts. Tab/Enter
+ * accepts; a second Enter submits. Multi-line is P2 (PRD 19).
+ */
+export function PromptArea({ value, onChange, onSubmit, onHistoryUp, onHistoryDown, commands, skills }) {
+    const theme = useTheme();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [dismissed, setDismissed] = useState(false);
+    const [files, setFiles] = useState(() => getFileIndex());
+    const active = parseCompletion(value);
+    useEffect(() => {
+        setSelectedIndex(0);
+        setDismissed(false);
+    }, [active?.kind, active?.query]);
+    useEffect(() => {
+        if (active?.kind === '@')
+            setFiles(getFileIndex());
+    }, [active?.kind]);
+    const matches = active?.kind === '/'
+        ? fuzzyFilter([...commands, ...skills], active.query)
+        : active?.kind === '@'
+            ? fuzzyFilter(files.map((f) => ({ name: f })), active.query)
+            : [];
+    const showDropdown = !!active && !dismissed && matches.length > 0;
+    // ↑/↓ navigate the autocomplete dropdown when it's open; otherwise the
+    // TextInput owns ↑/↓ (line navigation + history at the top/bottom edge).
+    useInput((inputChar, key) => {
+        if (!showDropdown || !active)
+            return;
+        if (key.return || key.tab || inputChar === '\t') {
+            const sel = matches[Math.min(selectedIndex, matches.length - 1)] ?? matches[0];
+            if (sel) {
+                const completed = (active.kind === '/' ? '/' : '@') + sel.name;
+                onChange(value.slice(0, active.tokenStart) + completed + ' ');
+            }
+        }
+        else if (key.upArrow) {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((i) => Math.min(matches.length - 1, i + 1));
+        }
+        else if (key.escape) {
+            setDismissed(true);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [showDropdown && active ? (_jsx(Autocomplete, { suggestions: matches, selectedIndex: selectedIndex, prefix: active.kind })) : null, _jsxs(Box, { borderStyle: "round", borderColor: theme.fgGutter, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.green, bold: true, children: "\u203A " }), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit, ignoreReturn: showDropdown, ignoreArrows: showDropdown, onHistoryUp: onHistoryUp, onHistoryDown: onHistoryDown, placeholder: "Ask Zoe Agent \u2014 type / for commands, @ for files (Shift+Enter newline)" })] })] }));
+}