zoe-agent 0.3.1

package/dist/adapters/cli/tui/layout.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared layout constants for the TUI.
+ *
+ * `HORIZONTAL_PADDING` insets every rendered line from the terminal edges.
+ * It is applied both to the root `<Box>` (live area: prompt, status,
+ * permission) and to each `<Static>` item (message history) — Ink's `<Static>`
+ * renders at full terminal width and ignores parent padding, so history items
+ * must pad themselves.
+ *
+ * Why pad at all: a line that fills the terminal's final column triggers an
+ * auto-wrap (a phantom blank row below). Keeping every line ≤ `columns - 2`
+ * avoids that and gives the TUI a gutter on both sides; Ink reflows within the
+ * reduced width on resize.
+ */
+export declare const HORIZONTAL_PADDING = 1;

package/dist/adapters/cli/tui/layout.js

@@ -0,0 +1,15 @@
+/**
+ * Shared layout constants for the TUI.
+ *
+ * `HORIZONTAL_PADDING` insets every rendered line from the terminal edges.
+ * It is applied both to the root `<Box>` (live area: prompt, status,
+ * permission) and to each `<Static>` item (message history) — Ink's `<Static>`
+ * renders at full terminal width and ignores parent padding, so history items
+ * must pad themselves.
+ *
+ * Why pad at all: a line that fills the terminal's final column triggers an
+ * auto-wrap (a phantom blank row below). Keeping every line ≤ `columns - 2`
+ * avoids that and gives the TUI a gutter on both sides; Ink reflows within the
+ * reduced width on resize.
+ */
+export const HORIZONTAL_PADDING = 1;

package/dist/adapters/cli/tui/logo/gradient.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Tokyo Night rainbow gradient for the Zoe Agent logo. Pure, deterministic, no
+ * dependency. Each cell at (row, col) within a (rows × cols) grid is projected
+ * onto the 45° axis: `t = (col + row) / ((cols-1) + (rows-1))` — sweeps
+ * bottom-left → top-right; for a single row it reduces to a horizontal sweep.
+ *
+ * Interpolation is RGB between ADJACENT palette stops (red→orange→yellow→green
+ * →cyan→blue→purple). Adjacent rainbow hues lerp cleanly (no muddy mid-tones),
+ * and since the stops ARE the Tokyo Night accents, the result stays on-palette.
+ */
+export declare function rainbowCellColor(row: number, col: number, rows: number, cols: number, stops: readonly string[]): string;

package/dist/adapters/cli/tui/logo/gradient.js

@@ -0,0 +1,31 @@
+/**
+ * Tokyo Night rainbow gradient for the Zoe Agent logo. Pure, deterministic, no
+ * dependency. Each cell at (row, col) within a (rows × cols) grid is projected
+ * onto the 45° axis: `t = (col + row) / ((cols-1) + (rows-1))` — sweeps
+ * bottom-left → top-right; for a single row it reduces to a horizontal sweep.
+ *
+ * Interpolation is RGB between ADJACENT palette stops (red→orange→yellow→green
+ * →cyan→blue→purple). Adjacent rainbow hues lerp cleanly (no muddy mid-tones),
+ * and since the stops ARE the Tokyo Night accents, the result stays on-palette.
+ */
+export function rainbowCellColor(row, col, rows, cols, stops) {
+    const maxCol = Math.max(0, cols - 1);
+    const maxRow = Math.max(0, rows - 1);
+    const span = maxCol + maxRow;
+    const t = span <= 0 ? 0 : Math.max(0, Math.min(1, (col + row) / span));
+    const n = Math.max(1, stops.length - 1);
+    const seg = t * n;
+    const i = Math.min(Math.floor(seg), stops.length - 2);
+    const frac = seg - i;
+    const a = hexToRgb(stops[i]);
+    const b = hexToRgb(stops[i + 1]);
+    return rgbToHex(a[0] + (b[0] - a[0]) * frac, a[1] + (b[1] - a[1]) * frac, a[2] + (b[2] - a[2]) * frac);
+}
+function hexToRgb(hex) {
+    const h = hex.replace('#', '');
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+function rgbToHex(r, g, b) {
+    const c = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, '0');
+    return `#${c(r)}${c(g)}${c(b)}`;
+}

package/dist/adapters/cli/tui/overlays/help-dialog.d.ts

@@ -0,0 +1,4 @@
+/** Keybinding reference overlay. Esc (or ?) to close. */
+export declare function HelpDialog({ onClose }: {
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/adapters/cli/tui/overlays/help-dialog.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../hooks/use-theme.js';
+const KEYS = [
+    ['Ctrl+P', 'Command palette'],
+    ['Ctrl+L', 'Clear conversation'],
+    ['Ctrl+O', 'Expand/collapse tool output'],
+    ['Ctrl+C', 'Abort run / exit (idle)'],
+    ['Esc', 'Abort current run'],
+    ['Enter', 'Send message (accepts autocomplete)'],
+    ['Shift+Enter', 'New line (also Alt+Enter / Ctrl+J)'],
+    ['↑ / ↓', 'Move lines (history at top/bottom edge)'],
+    ['Tab', 'Accept autocomplete'],
+    ['↑/↓', 'Navigate autocomplete'],
+    ['/ + Enter', 'Run slash command'],
+    ['@path', 'Insert file reference'],
+];
+/** Keybinding reference overlay. Esc (or ?) to close. */
+export function HelpDialog({ onClose }) {
+    const theme = useTheme();
+    useInput((input, key) => {
+        if (key.escape || input === '?')
+            onClose();
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.cyan, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.cyan, bold: true, children: "Keyboard Shortcuts" }), KEYS.map(([k, desc]) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.green, children: k.padEnd(16) }), _jsx(Text, { color: theme.fgDim, children: desc })] }, k))), _jsx(Text, { color: theme.fgDim, children: "Esc to close" })] }));
+}

package/dist/adapters/cli/tui/overlays/model-selector.d.ts

@@ -0,0 +1,14 @@
+export interface ModelOption {
+    providerType: string;
+    modelId: string;
+    modelName: string;
+}
+interface ModelSelectorProps {
+    options: ModelOption[];
+    currentModel: string;
+    onSwitch: (providerType: string, modelId: string) => void;
+    onClose: () => void;
+}
+/** Ctrl+M provider/model picker. ↑/↓ navigate, Enter switches, Esc closes. */
+export declare function ModelSelector({ options, currentModel, onSwitch, onClose }: ModelSelectorProps): import("react").JSX.Element;
+export {};

package/dist/adapters/cli/tui/overlays/model-selector.js

@@ -0,0 +1,43 @@
+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';
+const MAX_VISIBLE = 10;
+/** Ctrl+M provider/model picker. ↑/↓ navigate, Enter switches, Esc closes. */
+export function ModelSelector({ options, currentModel, onSwitch, onClose }) {
+    const theme = useTheme();
+    const [selected, setSelected] = useState(() => {
+        const idx = options.findIndex((o) => o.modelId === currentModel);
+        return idx >= 0 ? idx : 0;
+    });
+    useInput((_input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.return) {
+            const o = options[Math.min(selected, options.length - 1)];
+            if (o)
+                onSwitch(o.providerType, o.modelId);
+            return;
+        }
+        if (key.upArrow)
+            setSelected((i) => Math.max(0, i - 1));
+        else if (key.downArrow)
+            setSelected((i) => Math.min(options.length - 1, i + 1));
+    });
+    if (options.length === 0) {
+        return (_jsx(Box, { borderStyle: "round", borderColor: theme.purple, paddingLeft: 1, paddingRight: 1, children: _jsx(Text, { color: theme.fgDim, children: "No configured providers with models. Set API keys via /setup." }) }));
+    }
+    const half = Math.floor(MAX_VISIBLE / 2);
+    const start = Math.max(0, Math.min(selected - half, options.length - MAX_VISIBLE));
+    const visible = options.slice(start, start + MAX_VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.purple, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.purple, bold: true, children: "Model Selector" }), _jsx(Text, { color: theme.fgDim, children: "\u2191/\u2193 navigate \u00B7 Enter switches model + provider \u00B7 Esc close" }), visible.map((o, i) => {
+                const absIdx = start + i;
+                const sel = absIdx === selected;
+                const isCurrent = o.modelId === currentModel;
+                const prevPt = i > 0 ? visible[i - 1].providerType : (start > 0 ? options[start - 1].providerType : null);
+                const showHeader = o.providerType !== prevPt;
+                return (_jsxs(Box, { flexDirection: "column", children: [showHeader ? _jsxs(Text, { color: theme.purple, bold: true, children: ["  ", o.providerType] }) : null, _jsxs(Text, { backgroundColor: sel ? theme.blue : undefined, color: sel ? theme.bg : isCurrent ? theme.green : theme.fg, children: [sel ? '▶ ' : '  ', isCurrent ? '✓ ' : '  ', o.modelName] })] }, `${o.providerType}/${o.modelId}`));
+            }), options.length > MAX_VISIBLE ? (_jsxs(Text, { color: theme.fgDim, children: ["  ", options.length - MAX_VISIBLE, " more"] })) : null] }));
+}

package/dist/adapters/cli/tui/overlays/session-selector.d.ts

@@ -0,0 +1,35 @@
+/** A saved session, projected for the selector. */
+export interface SessionListItem {
+    id: string;
+    /** Searchable display text — first user message, truncated. */
+    preview: string;
+    /** Epoch ms of the last update. */
+    updatedAt: number;
+    /** role:"user" count — a proxy for "turns". */
+    userMessageCount: number;
+    /** role:"tool" count — how many tool calls executed. */
+    toolCallCount: number;
+    /** role:"assistant" count — model responses (≈ turns). */
+    assistantMessageCount: number;
+    /** Optional user-set title (metadata.title); takes precedence over preview. */
+    title?: string;
+    provider?: string;
+    model?: string;
+}
+interface SessionSelectorProps {
+    sessions: SessionListItem[];
+    currentSessionId: string;
+    onSelect: (id: string) => void;
+    onDelete: (id: string) => void;
+    onExport: (id: string) => void;
+    onTranscript: (id: string) => void;
+    onRename: (id: string, title: string) => Promise<boolean>;
+    onClose: () => void;
+}
+/**
+ * `/sessions` overlay: fuzzy search to filter, ↑/↓ navigate, Enter resumes,
+ * `d` deletes, `e` exports JSON, `t` writes transcript, `r` renames,
+ * Esc closes. Rename mode shows a TextInput inline; Enter commits, Esc cancels.
+ */
+export declare function SessionSelector({ sessions, currentSessionId, onSelect, onDelete, onExport, onTranscript, onRename, onClose }: SessionSelectorProps): import("react").JSX.Element;
+export {};

package/dist/adapters/cli/tui/overlays/session-selector.js

@@ -0,0 +1,162 @@
+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 '../components/text-input.js';
+const MAX_VISIBLE = 10;
+const PREVIEW_LEN = 60;
+/**
+ * `/sessions` overlay: fuzzy search to filter, ↑/↓ navigate, Enter resumes,
+ * `d` deletes, `e` exports JSON, `t` writes transcript, `r` renames,
+ * Esc closes. Rename mode shows a TextInput inline; Enter commits, Esc cancels.
+ */
+export function SessionSelector({ sessions, currentSessionId, onSelect, onDelete, onExport, onTranscript, onRename, onClose }) {
+    const theme = useTheme();
+    const [query, setQuery] = useState('');
+    const [selected, setSelected] = useState(() => {
+        const idx = sessions.findIndex((s) => s.id === currentSessionId);
+        return idx >= 0 ? idx : 0;
+    });
+    const [hint, setHint] = useState(null);
+    const [renameMode, setRenameMode] = useState(false);
+    const [renameValue, setRenameValue] = useState('');
+    // Subsequence match on preview (case-insensitive). Keeps the component
+    // self-contained — sessions carry their own id, no projection needed.
+    const matches = query
+        ? sessions.filter((s) => isSubsequence((s.title ?? s.preview).toLowerCase(), query.toLowerCase()))
+        : sessions;
+    // Clamp the cursor when the list shrinks (delete, filter) so it never points
+    // past the last row — otherwise the highlight silently disappears.
+    useEffect(() => {
+        setSelected((i) => Math.min(i, Math.max(0, matches.length - 1)));
+    }, [matches.length]);
+    const currentMatch = () => matches[Math.min(selected, matches.length - 1)] ?? matches[0];
+    // Rename mode owns input entirely (TextInput component).
+    if (renameMode) {
+        const submitRename = async () => {
+            const title = renameValue.trim();
+            const m = currentMatch();
+            if (m && title) {
+                const ok = await onRename(m.id, title);
+                setHint(ok ? `Renamed to "${title}"` : `Rename failed.`);
+            }
+            setRenameMode(false);
+            setRenameValue('');
+        };
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.purple, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.purple, bold: true, children: "Rename session" }), _jsx(TextInput, { value: renameValue, onChange: setRenameValue, onSubmit: () => { void submitRename(); }, placeholder: "Enter new title\u2026" }), _jsx(Text, { color: theme.fgDim, children: "Enter to confirm \u00B7 Esc to cancel" })] }));
+    }
+    useInput((input, key) => {
+        if (hint)
+            setHint(null);
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.return) {
+            const m = currentMatch();
+            if (m)
+                onSelect(m.id);
+            return;
+        }
+        if (key.upArrow) {
+            setSelected((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelected((i) => Math.min(matches.length - 1, i + 1));
+            return;
+        }
+        // Action keys (d/e/t/r) only fire when NOT searching — so typing those
+        // letters into the query box works normally. When the query is empty,
+        // they operate on the selected row.
+        if (!query && input && !key.ctrl && !key.meta) {
+            if (input === 'd') {
+                const m = currentMatch();
+                if (m && m.id !== currentSessionId) {
+                    onDelete(m.id);
+                    setHint(`Deleted session ${m.id.slice(0, 8)}`);
+                }
+                return;
+            }
+            if (input === 'e') {
+                const m = currentMatch();
+                if (m) {
+                    onExport(m.id);
+                    setHint(`Exported ${m.id.slice(0, 8)} to JSON`);
+                }
+                return;
+            }
+            if (input === 't') {
+                const m = currentMatch();
+                if (m) {
+                    onTranscript(m.id);
+                    setHint(`Transcript of ${m.id.slice(0, 8)} written`);
+                }
+                return;
+            }
+            if (input === 'r') {
+                const m = currentMatch();
+                if (m) {
+                    setRenameValue(m.title ?? '');
+                    setRenameMode(true);
+                }
+                return;
+            }
+        }
+        if (key.backspace || key.delete) {
+            setQuery((q) => q.slice(0, -1));
+            setSelected(0);
+        }
+        else if (input && !key.ctrl && !key.meta && input >= ' ') {
+            setQuery((q) => q + input);
+            setSelected(0);
+        }
+    });
+    const half = Math.floor(MAX_VISIBLE / 2);
+    const start = matches.length > MAX_VISIBLE
+        ? Math.max(0, Math.min(selected - half, matches.length - MAX_VISIBLE))
+        : 0;
+    const visible = matches.slice(start, start + MAX_VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.purple, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.purple, bold: true, children: "Sessions" }), _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 resume · type to search · d/e/t/r delete/export/transcript/rename · Esc)' : '— no matches'] })] }), hint ? _jsxs(Text, { color: theme.yellow, children: ["  ", hint] }) : null, visible.length === 0 ? (_jsx(Text, { color: theme.fgDim, children: "  No saved sessions yet. Chat to create one." })) : (visible.map((s, i) => {
+                const absIdx = start + i;
+                const sel = absIdx === selected;
+                const isCurrent = s.id === currentSessionId;
+                const label = s.title ?? truncate(s.preview, PREVIEW_LEN);
+                const subLabel = s.title ? truncate(s.preview, PREVIEW_LEN) : null;
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { backgroundColor: sel ? theme.blue : undefined, color: sel ? theme.bg : isCurrent ? theme.green : theme.fg, children: [sel ? '▶ ' : '  ', isCurrent ? '✓ ' : '  ', label] }) }), subLabel ? (_jsxs(Text, { color: theme.fgDim, children: ["      ", subLabel] })) : null, _jsxs(Text, { color: theme.fgDim, children: ["      ", relativeTime(s.updatedAt), " \u00B7 ", s.userMessageCount, " turns \u00B7 ", s.toolCallCount, " tools", s.model ? ` · ${s.model}` : ''] })] }, s.id));
+            })), matches.length > MAX_VISIBLE ? (_jsxs(Text, { color: theme.fgDim, children: ["  ", matches.length - MAX_VISIBLE, " more"] })) : null] }));
+}
+function truncate(s, n) {
+    const oneLine = s.split('\n')[0].trim();
+    return oneLine.length > n ? oneLine.slice(0, n - 1) + '…' : oneLine;
+}
+/** Do query's chars appear in order within text? (empty query matches all) */
+function isSubsequence(text, query) {
+    if (!query)
+        return true;
+    let qi = 0;
+    for (let i = 0; i < text.length && qi < query.length; i++) {
+        if (text[i] === query[qi])
+            qi++;
+    }
+    return qi === query.length;
+}
+/** Compact relative time, e.g. "2h ago", "3d ago". No deps. */
+function relativeTime(epochMs) {
+    const sec = Math.floor((Date.now() - epochMs) / 1000);
+    if (sec < 60)
+        return 'just now';
+    const min = Math.floor(sec / 60);
+    if (min < 60)
+        return `${min}m ago`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24)
+        return `${hr}h ago`;
+    const day = Math.floor(hr / 24);
+    if (day < 30)
+        return `${day}d ago`;
+    const mo = Math.floor(day / 30);
+    if (mo < 12)
+        return `${mo}mo ago`;
+    return `${Math.floor(mo / 12)}y ago`;
+}

package/dist/adapters/cli/tui/overlays/settings-overlay.d.ts

@@ -0,0 +1,24 @@
+export interface SettingItem {
+    dotKey: string;
+    value: string;
+    category: string;
+    label: string;
+    type: 'string' | 'number' | 'boolean' | 'enum';
+    secret: boolean;
+    enumValues?: string[];
+    restartRequired: boolean;
+}
+interface SettingsEditorProps {
+    settings: SettingItem[];
+    onSet: (dotKey: string, value: string) => Promise<void>;
+    onClose: () => void;
+}
+/**
+ * Type-aware settings editor.
+ * - browse: ↑/↓ navigate categorized list; Enter edits.
+ * - select (boolean/enum): ←/→ cycle through options; Enter saves.
+ * - input (string/number/secret): type a value; Enter saves.
+ * After saving, the caller refreshes the list so the new value is visible.
+ */
+export declare function SettingsEditor({ settings, onSet, onClose }: SettingsEditorProps): import("react").JSX.Element;
+export {};

package/dist/adapters/cli/tui/overlays/settings-overlay.js

@@ -0,0 +1,126 @@
+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';
+const MAX_VISIBLE = 12;
+/** Options for a setting (boolean → ['true','false']; enum → enumValues). */
+function optionsFor(s) {
+    if (s.type === 'boolean')
+        return ['true', 'false'];
+    return s.enumValues ?? [];
+}
+/**
+ * Type-aware settings editor.
+ * - browse: ↑/↓ navigate categorized list; Enter edits.
+ * - select (boolean/enum): ←/→ cycle through options; Enter saves.
+ * - input (string/number/secret): type a value; Enter saves.
+ * After saving, the caller refreshes the list so the new value is visible.
+ */
+export function SettingsEditor({ settings, onSet, onClose }) {
+    const theme = useTheme();
+    const [mode, setMode] = useState('browse');
+    const [selected, setSelected] = useState(0);
+    const [inputVal, setInputVal] = useState('');
+    const [optIdx, setOptIdx] = useState(0);
+    const [feedback, setFeedback] = useState('');
+    const cur = settings[selected];
+    const enterEdit = () => {
+        if (!cur)
+            return;
+        setFeedback('');
+        if (cur.type === 'boolean' || cur.type === 'enum') {
+            const opts = optionsFor(cur);
+            const idx = opts.indexOf(cur.value);
+            setOptIdx(idx >= 0 ? idx : 0);
+            setMode('select');
+        }
+        else {
+            setInputVal(cur.value === '(not set)' || cur.value === '******' ? '' : cur.value);
+            setMode('input');
+        }
+    };
+    const save = (value) => {
+        if (!cur)
+            return;
+        void onSet(cur.dotKey, value)
+            .then(() => { setFeedback(`✓ ${cur.label} saved${cur.restartRequired ? ' (restart required)' : ''}`); })
+            .catch(() => { setFeedback(`✗ Failed to save ${cur.label}`); });
+        setMode('browse');
+    };
+    useInput((input, key) => {
+        if (mode === 'browse') {
+            if (key.escape) {
+                onClose();
+                return;
+            }
+            if (key.return) {
+                enterEdit();
+                return;
+            }
+            if (key.upArrow) {
+                setSelected((i) => Math.max(0, i - 1));
+                setFeedback('');
+            }
+            if (key.downArrow) {
+                setSelected((i) => Math.min(settings.length - 1, i + 1));
+                setFeedback('');
+            }
+            return;
+        }
+        if (mode === 'select') {
+            if (key.escape) {
+                setMode('browse');
+                return;
+            }
+            if (key.return) {
+                save(optionsFor(cur)[optIdx]);
+                return;
+            }
+            if (key.leftArrow || key.upArrow)
+                setOptIdx((i) => Math.max(0, i - 1));
+            if (key.rightArrow || key.downArrow)
+                setOptIdx((i) => Math.min(optionsFor(cur).length - 1, i + 1));
+            return;
+        }
+        // input mode
+        if (key.escape) {
+            setMode('browse');
+            return;
+        }
+        if (key.return) {
+            save(inputVal);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setInputVal((v) => v.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && input.length >= 1 && input >= ' ' && !/\x1b?\[\d[\d;]*[~A-Za-z]/.test(input)) {
+            setInputVal((v) => v + input);
+        }
+    });
+    // ── Select mode (boolean / enum) ──────────────────────────────────────
+    if (mode === 'select' && cur) {
+        const opts = optionsFor(cur);
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.cyan, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.cyan, bold: true, children: cur.label }), _jsx(Text, { color: theme.fgDim, children: cur.dotKey }), _jsx(Box, { marginTop: 1, children: opts.map((o, i) => (_jsx(Box, { children: _jsx(Text, { backgroundColor: i === optIdx ? theme.blue : undefined, color: i === optIdx ? theme.bg : i === opts.indexOf(cur.value) ? theme.green : theme.fgDim, children: i === optIdx ? ` ◉ ${o} ` : ` ○ ${o} ` }) }, o))) }), _jsxs(Text, { color: theme.fgDim, children: ["\u2190/\u2192 change \u00B7 Enter save \u00B7 Esc cancel", cur.restartRequired ? ' · ⚠ restart required' : ''] })] }));
+    }
+    // ── Input mode (string / number / secret) ─────────────────────────────
+    if (mode === 'input' && cur) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.cyan, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.cyan, bold: true, children: cur.label }), _jsx(Text, { color: theme.fgDim, children: cur.dotKey }), _jsxs(Text, { color: theme.fgDim, children: ["Current: ", cur.value] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.green, bold: true, children: "\u203A " }), _jsx(Text, { color: cur.secret ? theme.yellow : theme.fg, children: cur.secret ? '•'.repeat(inputVal.length) : inputVal }), _jsx(Text, { color: theme.fgDim, children: " _" })] }), _jsxs(Text, { color: theme.fgDim, children: ["Enter save \u00B7 Esc cancel", cur.restartRequired ? ' · ⚠ restart required' : ''] })] }));
+    }
+    // ── Browse mode ───────────────────────────────────────────────────────
+    const half = Math.floor(MAX_VISIBLE / 2);
+    const start = Math.max(0, Math.min(selected - half, settings.length - MAX_VISIBLE));
+    const visible = settings.slice(start, start + MAX_VISIBLE);
+    let lastCat = start > 0 ? settings[start - 1]?.category : null;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.purple, paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { color: theme.purple, bold: true, children: "Settings" }), _jsx(Text, { color: theme.fgDim, children: "\u2191/\u2193 navigate \u00B7 Enter edit \u00B7 Esc close" }), feedback ? _jsx(Text, { color: feedback.startsWith('✓') ? theme.green : theme.red, children: feedback }) : null, visible.map((s) => {
+                const idx = settings.indexOf(s);
+                const sel = idx === selected;
+                const showCat = s.category !== lastCat;
+                lastCat = s.category;
+                const valDisplay = s.type === 'boolean'
+                    ? (s.value === 'true' ? '✓ on' : '✗ off')
+                    : s.value;
+                return (_jsxs(Box, { flexDirection: "column", children: [showCat ? _jsxs(Text, { color: theme.cyan, bold: true, children: ["  ", s.category] }) : null, _jsxs(Box, { children: [_jsxs(Text, { backgroundColor: sel ? theme.blue : undefined, color: sel ? theme.bg : theme.fg, children: [sel ? '▶ ' : '  ', s.label] }), _jsx(Text, { backgroundColor: sel ? theme.blue : undefined, color: sel ? theme.bg : theme.fgDim, children: sel ? ` = ${valDisplay}` : `  ${valDisplay}` }), s.restartRequired ? _jsx(Text, { color: theme.yellow, children: " \u26A0" }) : null] })] }, s.dotKey));
+            }), settings.length > MAX_VISIBLE ? (_jsxs(Text, { color: theme.fgDim, children: ["  ", start + 1, "\u2013", Math.min(start + MAX_VISIBLE, settings.length), " of ", settings.length] })) : null] }));
+}

package/dist/adapters/cli/tui/session-export.d.ts

@@ -0,0 +1,21 @@
+/**
+ * session-export — format a persisted session for export.
+ *
+ * Two formats:
+ * - `formatJson` — the full SessionData as pretty-printed JSON (lossless,
+ *   machine-readable, re-importable).
+ * - `formatTranscript` — a human-readable Markdown transcript rendering each
+ *   message with its role, tool-call names/args, and results.
+ *
+ * Both are pure functions over SessionData — no I/O, no deps — so they're
+ * trivially testable.
+ */
+import type { SessionData } from '../../../core/types.js';
+/** Lossless JSON dump of the full session record. */
+export declare function formatJson(session: SessionData): string;
+/**
+ * Human-readable Markdown transcript. Tool calls within an assistant message
+ * render as sub-sections; standalone role:"tool" results are joined by
+ * toolCallId (the same join the feed-serializer does for the TUI display).
+ */
+export declare function formatTranscript(session: SessionData): string;

package/dist/adapters/cli/tui/session-export.js

@@ -0,0 +1,63 @@
+/**
+ * session-export — format a persisted session for export.
+ *
+ * Two formats:
+ * - `formatJson` — the full SessionData as pretty-printed JSON (lossless,
+ *   machine-readable, re-importable).
+ * - `formatTranscript` — a human-readable Markdown transcript rendering each
+ *   message with its role, tool-call names/args, and results.
+ *
+ * Both are pure functions over SessionData — no I/O, no deps — so they're
+ * trivially testable.
+ */
+/** Lossless JSON dump of the full session record. */
+export function formatJson(session) {
+    return JSON.stringify(session, null, 2);
+}
+/**
+ * Human-readable Markdown transcript. Tool calls within an assistant message
+ * render as sub-sections; standalone role:"tool" results are joined by
+ * toolCallId (the same join the feed-serializer does for the TUI display).
+ */
+export function formatTranscript(session) {
+    const created = new Date(session.createdAt).toISOString();
+    const lines = [
+        `# Session ${session.id.slice(0, 8)}`,
+        '',
+        `Created: ${created}`,
+        `Messages: ${session.messages.length}`,
+        session.provider ? `Provider: ${session.provider}` : '',
+        session.model ? `Model: ${session.model}` : '',
+        '',
+        '---',
+        '',
+    ].filter((l) => l !== '' || true);
+    // Index tool results by toolCallId for rendering alongside the call.
+    const toolResults = new Map();
+    for (const m of session.messages) {
+        if (m.role === 'tool' && m.toolCallId)
+            toolResults.set(m.toolCallId, m.content);
+    }
+    for (const m of session.messages) {
+        if (m.role === 'system')
+            continue;
+        if (m.role === 'user') {
+            lines.push('## User', '', m.content, '');
+        }
+        else if (m.role === 'assistant') {
+            if (m.content)
+                lines.push('## Assistant', '', m.content, '');
+            if (m.toolCalls) {
+                for (const tc of m.toolCalls) {
+                    const result = tc.result ?? toolResults.get(tc.id);
+                    lines.push(`### Tool: ${tc.name}`, '');
+                    lines.push('```json', JSON.stringify(tc.arguments, null, 2), '```', '');
+                    if (result != null) {
+                        lines.push('**Result:**', '', '```', result, '```', '');
+                    }
+                }
+            }
+        }
+    }
+    return lines.join('\n');
+}

package/dist/adapters/cli/tui/theme.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Tokyo Night Moon — color palette for the Zoe TUI.
+ *
+ * US1 imports these tokens directly (`import { theme } from '../theme.js'`);
+ * US3 wraps them in a React context via `use-theme.ts` so components can be
+ * re-themed without touching call sites. Hex values are the single source of
+ * truth for every component color — no inline hex elsewhere.
+ */
+export interface Theme {
+    bg: string;
+    bgHighlight: string;
+    fg: string;
+    fgDim: string;
+    fgGutter: string;
+    blue: string;
+    cyan: string;
+    green: string;
+    yellow: string;
+    red: string;
+    purple: string;
+    orange: string;
+}
+export declare const theme: Theme;

package/dist/adapters/cli/tui/theme.js

@@ -0,0 +1,22 @@
+/**
+ * Tokyo Night Moon — color palette for the Zoe TUI.
+ *
+ * US1 imports these tokens directly (`import { theme } from '../theme.js'`);
+ * US3 wraps them in a React context via `use-theme.ts` so components can be
+ * re-themed without touching call sites. Hex values are the single source of
+ * truth for every component color — no inline hex elsewhere.
+ */
+export const theme = {
+    bg: '#222436',
+    bgHighlight: '#2f334d',
+    fg: '#c8d3f5',
+    fgDim: '#828bb8',
+    fgGutter: '#3b4261',
+    blue: '#82aaff',
+    cyan: '#86e1fc',
+    green: '#c3e88d',
+    yellow: '#ffc777',
+    red: '#ff757f',
+    purple: '#c099ff',
+    orange: '#ff966c',
+};