cvc-tui 0.1.0

package/dist/app/slash/registry.js

@@ -0,0 +1,79 @@
+// Central CVC slash command registry. Mirrors Hermes ui-tui surface so
+// users coming from Hermes feel at home, but every command is owned by CVC.
+import { coreCommands } from './commands/core.js';
+import { debugCommands } from './commands/debug.js';
+import { opsCommands } from './commands/ops.js';
+import { sessionCommands } from './commands/session.js';
+import { setupCommands } from './commands/setup.js';
+import { toggleCommands } from './commands/toggles.js';
+export const SLASH_COMMANDS = [
+    ...coreCommands,
+    ...sessionCommands,
+    ...opsCommands,
+    ...setupCommands,
+    ...toggleCommands,
+    ...debugCommands,
+];
+const byName = new Map(SLASH_COMMANDS.flatMap(cmd => [cmd.name, ...(cmd.aliases ?? [])].map(n => [n.toLowerCase(), cmd])));
+export function findSlashCommand(name) {
+    return byName.get(name.replace(/^\//, '').toLowerCase());
+}
+export function listSlashNames() {
+    return SLASH_COMMANDS.map(c => `/${c.name}`).sort();
+}
+/**
+ * Returns "/"-prefixed canonical names + aliases. Used by completion.ts to
+ * populate slash candidates. Keeps both names ("listSlashNames" and
+ * "listCommandNames") exported so older slice modules don't drift.
+ */
+export function listCommandNames() {
+    const all = new Set();
+    for (const c of SLASH_COMMANDS) {
+        all.add(`/${c.name}`);
+        for (const a of c.aliases ?? [])
+            all.add(`/${a}`);
+    }
+    return Array.from(all).sort();
+}
+/**
+ * Parse a raw input line and dispatch it. Returns true if it WAS a slash
+ * command (handled or not), false if the line should be treated as a normal
+ * user message.
+ *
+ * Strip a single matched layer of surrounding quotes from `arg`. This is the
+ * same affordance Hermes ui-tui applies to inputs like `/title 'foo bar'` or
+ * `/title "foo bar"` — users coming from a shell expect quoting to "just
+ * work" for arguments containing spaces.
+ */
+export function unquoteArg(arg) {
+    const t = arg.trim();
+    if (t.length < 2)
+        return t;
+    const first = t.charCodeAt(0);
+    const last = t.charCodeAt(t.length - 1);
+    if (first === last && (first === 34 /* " */ || first === 39 /* ' */)) {
+        return t.slice(1, -1);
+    }
+    return t;
+}
+export async function dispatchSlash(line, ctx) {
+    if (!line.startsWith('/'))
+        return false;
+    const trimmed = line.trim();
+    const sp = trimmed.indexOf(' ');
+    const head = sp === -1 ? trimmed.slice(1) : trimmed.slice(1, sp);
+    const rawArg = sp === -1 ? '' : trimmed.slice(sp + 1);
+    const arg = unquoteArg(rawArg);
+    const cmd = findSlashCommand(head);
+    if (!cmd) {
+        ctx.emit({ kind: 'sys', text: `unknown command: /${head} — try /help` });
+        return true;
+    }
+    try {
+        await cmd.run(arg, ctx, trimmed);
+    }
+    catch (err) {
+        ctx.emit({ kind: 'sys', text: `command failed: ${String(err)}` });
+    }
+    return true;
+}

package/dist/app/slash/types.js

@@ -0,0 +1,16 @@
+// CVC slash command framework — minimal, self-contained.
+// Mirrors the Hermes ui-tui slash surface but with a much smaller ctx so
+// commands stay easy to test and the TUI can grow the surface incrementally.
+// Helper used by every toggle-style command.
+export const flagFromArg = (arg, current) => {
+    if (!arg)
+        return !current;
+    const m = arg.trim().toLowerCase();
+    if (m === 'on' || m === 'true' || m === '1')
+        return true;
+    if (m === 'off' || m === 'false' || m === '0')
+        return false;
+    if (m === 'toggle' || m === 'cycle')
+        return !current;
+    return null;
+};

package/dist/app/turnStore.js

@@ -0,0 +1,60 @@
+// Turn-lifecycle store: tracks the active turn + transcript.
+// Extended in Slice 12A to support streaming deltas: `appendDelta`
+// mutates the in-flight assistant message in place.
+import { atom } from 'nanostores';
+export const $messages = atom([]);
+export const $turn = atom(null);
+let _idCounter = 0;
+export const newId = (prefix = 'm') => `${prefix}-${Date.now()}-${++_idCounter}`;
+export function appendMessage(msg) {
+    $messages.set([...$messages.get(), msg]);
+}
+export function startTurn(id) {
+    $turn.set({ id, status: 'streaming', startedAt: Date.now() });
+}
+export function endTurn(error) {
+    const cur = $turn.get();
+    if (!cur)
+        return;
+    $turn.set({
+        ...cur,
+        status: error ? 'error' : 'done',
+        endedAt: Date.now(),
+        error,
+    });
+}
+export function clearTranscript() {
+    $messages.set([]);
+    $turn.set(null);
+}
+/** Append a streaming text delta to the *last* assistant message. */
+export function appendDelta(text) {
+    if (!text)
+        return;
+    const list = $messages.get();
+    if (list.length === 0)
+        return;
+    const last = list[list.length - 1];
+    if (last.role !== 'assistant')
+        return;
+    const updated = { ...last, content: last.content + text };
+    $messages.set([...list.slice(0, -1), updated]);
+}
+/** Begin a new assistant turn — adds an empty assistant message + flips $turn. */
+export function beginAssistantTurn() {
+    const id = newId('a');
+    startTurn(id);
+    appendMessage({ id, role: 'assistant', content: '', ts: Date.now() });
+    return id;
+}
+/** Push a user message into the transcript. */
+export function pushSystemMessage(content) {
+    const id = newId('sys');
+    appendMessage({ id, role: 'system', content, ts: Date.now() });
+    return id;
+}
+export function pushUserMessage(content) {
+    const id = newId('u');
+    appendMessage({ id, role: 'user', content, ts: Date.now() });
+    return id;
+}

package/dist/app/uiStore.js

@@ -0,0 +1,31 @@
+// UI-wide store: terminal dimensions, focus, modal visibility, theme overrides,
+// active overlay (modelPicker | sessionPicker | skillsHub | help | null).
+import { atom, map } from 'nanostores';
+import { CVC_THEME } from '../types.js';
+export const $ui = map({
+    cols: process.stdout.columns ?? 80,
+    rows: process.stdout.rows ?? 24,
+    focused: 'input',
+    modal: null,
+    busy: false,
+});
+export const $theme = atom(CVC_THEME);
+/** Active full-screen overlay (mutually exclusive with the composer). */
+export const $activeOverlay = atom(null);
+export function openOverlay(name) {
+    $activeOverlay.set(name);
+    $ui.setKey('focused', 'modal');
+    $ui.setKey('modal', name);
+}
+export function closeOverlay() {
+    $activeOverlay.set(null);
+    $ui.setKey('focused', 'input');
+    $ui.setKey('modal', null);
+}
+export function setBusy(b) {
+    $ui.setKey('busy', b);
+}
+export function setSize(cols, rows) {
+    $ui.setKey('cols', cols);
+    $ui.setKey('rows', rows);
+}

package/dist/app.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { useStore } from '@nanostores/react';
+import { AppLayout } from './components/appLayout.js';
+import { Branding } from './components/branding.js';
+import { TextInput } from './components/textInput.js';
+import { Thinking } from './components/thinking.js';
+import { Transcript } from './components/transcript.js';
+import { appendDelta, beginAssistantTurn, endTurn, pushUserMessage, pushSystemMessage, } from './app/turnStore.js';
+import { $ui, $activeOverlay, openOverlay, closeOverlay, setBusy } from './app/uiStore.js';
+import { CVC_THEME } from './types.js';
+import { dispatchSlash } from './app/slash/registry.js';
+import { ModelPicker } from './components/overlays/modelPicker.js';
+import { SessionPicker, loadSessions } from './components/overlays/sessionPicker.js';
+import { SkillsHub } from './components/overlays/skillsHub.js';
+import { HelpOverlay } from './components/overlays/helpOverlay.js';
+import { ConfirmPrompt } from './components/overlays/confirmPrompt.js';
+import { SecretPrompt } from './components/overlays/secretPrompt.js';
+import { $prompt } from './app/promptStore.js';
+const InputLine = ({ onSubmit }) => {
+    const [value, setValue] = useState('');
+    const ui = useStore($ui);
+    const overlay = useStore($activeOverlay);
+    const prompt = useStore($prompt);
+    if (overlay || prompt)
+        return null; // overlay/prompt owns input
+    if (ui.busy)
+        return _jsx(Thinking, { label: "thinking" });
+    return (_jsx(TextInput, { value: value, onChange: setValue, onSubmit: (v) => {
+            const trimmed = v.trim();
+            setValue('');
+            if (trimmed)
+                onSubmit(trimmed);
+        }, placeholder: "ask CVC anything" }));
+};
+const StatusLine = ({ error }) => {
+    if (!error)
+        return null;
+    return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: CVC_THEME.primary, children: ["\u26A0 ", error] }) }));
+};
+const Overlays = ({ gateway, onPickModel, onPickSession, onPickSkill }) => {
+    const overlay = useStore($activeOverlay);
+    const [sessions, setSessions] = useState([]);
+    const [skills, setSkills] = useState([]);
+    useEffect(() => {
+        if (overlay === 'sessionPicker') {
+            try {
+                setSessions(loadSessions());
+            }
+            catch {
+                setSessions([]);
+            }
+        }
+        if (overlay === 'skillsHub' && gateway) {
+            gateway
+                .send('skills.list', {})
+                .then((res) => {
+                const items = Array.isArray(res?.skills) ? res.skills : [];
+                setSkills(items);
+            })
+                .catch(() => setSkills([]));
+        }
+    }, [overlay, gateway]);
+    if (!overlay)
+        return null;
+    if (overlay === 'help')
+        return _jsx(HelpOverlay, { onClose: closeOverlay });
+    if (overlay === 'modelPicker') {
+        // Static provider list — gateway can extend later via models.list RPC.
+        const providers = [
+            { slug: 'github-copilot', name: 'GitHub Copilot', models: ['claude-sonnet-4.6', 'gpt-5', 'gemini-2.5-pro'] },
+            { slug: 'nvidia-nim', name: 'NVIDIA NIM', models: ['nemotron-3-super-120b', 'kimi-k2.5', 'minimax-m2.5'] },
+            { slug: 'google', name: 'Google', models: ['gemini-3.1-pro-preview', 'gemini-3.1-flash-lite', 'gemma-4-31b'] },
+        ];
+        return (_jsx(ModelPicker, { providers: providers, onSelect: (p, m) => { onPickModel(`${p}/${m}`); closeOverlay(); }, onCancel: closeOverlay }));
+    }
+    if (overlay === 'sessionPicker') {
+        return (_jsx(SessionPicker, { sessions: sessions, onSelect: (id) => {
+                const s = sessions.find((x) => x.id === id);
+                if (s)
+                    onPickSession(s);
+                closeOverlay();
+            }, onCancel: closeOverlay }));
+    }
+    if (overlay === 'skillsHub') {
+        return (_jsx(SkillsHub, { skills: skills, onActivate: (s) => { onPickSkill(s); closeOverlay(); }, onCancel: closeOverlay }));
+    }
+    return null;
+};
+const Prompts = () => {
+    const prompt = useStore($prompt);
+    if (!prompt)
+        return null;
+    if (prompt.kind === 'confirm')
+        return _jsx(ConfirmPrompt, {});
+    if (prompt.kind === 'secret')
+        return _jsx(SecretPrompt, {});
+    return null;
+};
+export const App = ({ version, model, gateway }) => {
+    const { exit } = useApp();
+    const [error, setError] = useState(null);
+    const [activeModel, setActiveModel] = useState(model);
+    const gatewayRef = useRef(gateway ?? null);
+    useInput((input, key) => {
+        if (key.ctrl && (input === 'c' || input === 'd')) {
+            exit();
+        }
+    });
+    useEffect(() => {
+        return () => {
+            void gatewayRef.current?.close().catch(() => { });
+        };
+    }, []);
+    const handleEffect = useMemo(() => (effect) => {
+        switch (effect.kind) {
+            case 'sys':
+                if (effect.text)
+                    pushSystemMessage(effect.text);
+                return;
+            case 'panel':
+            case 'page':
+                if (effect.title)
+                    pushSystemMessage(`── ${effect.title} ──`);
+                for (const sec of effect.sections ?? []) {
+                    if (sec.title)
+                        pushSystemMessage(`▸ ${sec.title}`);
+                    if (sec.text)
+                        pushSystemMessage(sec.text);
+                    for (const [k, v] of sec.rows ?? [])
+                        pushSystemMessage(`  ${k}: ${v}`);
+                }
+                return;
+            case 'overlay':
+                if (effect.overlay === 'modelPicker')
+                    openOverlay('modelPicker');
+                else if (effect.overlay === 'sessionPicker')
+                    openOverlay('sessionPicker');
+                else if (effect.overlay === 'skillsHub')
+                    openOverlay('skillsHub');
+                else if (effect.overlay === 'help')
+                    openOverlay('help');
+                else
+                    pushSystemMessage(`overlay '${effect.overlay}' not yet implemented`);
+                return;
+            case 'rpc':
+                if (effect.method && gatewayRef.current) {
+                    void gatewayRef.current
+                        .send(effect.method, effect.params ?? {})
+                        .catch((err) => setError(`rpc ${effect.method}: ${err.message}`));
+                }
+                return;
+            case 'die':
+                exit();
+                return;
+            case 'patchUi':
+            case 'noop':
+            default:
+                return;
+        }
+    }, [exit]);
+    const handleSubmit = async (text) => {
+        // Slash command path
+        if (text.startsWith('/')) {
+            const ctx = {
+                sid: null,
+                ui: {},
+                emit: handleEffect,
+                history: () => [],
+                rpc: gatewayRef.current
+                    ? (method, params) => gatewayRef.current.send(method, params ?? {})
+                    : undefined,
+            };
+            pushUserMessage(text);
+            await dispatchSlash(text, ctx);
+            return;
+        }
+        // Normal chat path
+        const gw = gatewayRef.current;
+        if (!gw) {
+            setError('gateway not connected');
+            return;
+        }
+        pushUserMessage(text);
+        beginAssistantTurn();
+        setBusy(true);
+        setError(null);
+        try {
+            await gw.sendChat({ message: text }, {
+                onDelta: (chunk) => appendDelta(chunk),
+                onError: (err) => setError(err.message),
+            });
+            endTurn();
+        }
+        catch (err) {
+            const msg = err.message;
+            setError(msg);
+            endTurn(msg);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(AppLayout, { children: [_jsx(Branding, { version: version, model: activeModel }), _jsx(Transcript, {}), _jsx(StatusLine, { error: error }), _jsx(Overlays, { gateway: gatewayRef.current, onPickModel: (m) => {
+                    setActiveModel(m);
+                    pushSystemMessage(`model → ${m}`);
+                    if (gatewayRef.current) {
+                        void gatewayRef.current.send('model.set', { model: m }).catch(() => { });
+                    }
+                }, onPickSession: (s) => {
+                    pushSystemMessage(`session → ${s.id}`);
+                    if (gatewayRef.current) {
+                        void gatewayRef.current.send('session.resume', { id: s.id });
+                    }
+                }, onPickSkill: (s) => {
+                    pushSystemMessage(`skill → ${s.name}`);
+                } }), _jsx(Prompts, {}), _jsx(InputLine, { onSubmit: handleSubmit })] }));
+};

package/dist/banner.js

@@ -0,0 +1,20 @@
+// CVC ASCII banner. Rendered once at startup by <Branding/>.
+// Colour applied at render-time via Ink <Text color="..."> wrappers.
+export const CVC_BANNER = String.raw `
+  ██████╗██╗   ██╗ ██████╗
+ ██╔════╝██║   ██║██╔════╝
+ ██║     ██║   ██║██║
+ ██║     ╚██╗ ██╔╝██║
+ ╚██████╗ ╚████╔╝ ╚██████╗
+  ╚═════╝  ╚═══╝   ╚═════╝
+`.trim();
+export const CVC_TAGLINE = 'Cognitive Version Control';
+export const BANNER_COLOR = '#e63946';
+export const TAGLINE_COLOR = '#4a9eff';
+/**
+ * Returns the banner as a plain (uncoloured) string suitable for tests
+ * and for non-TTY fallbacks. The TTY renderer colours it via Ink.
+ */
+export function renderBannerPlain({ version = '0.0.1', model = 'unknown' } = {}) {
+    return [CVC_BANNER, '', `${CVC_TAGLINE}  v${version}  ·  model: ${model}`].join('\n');
+}

package/dist/components/appLayout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Box, useStdout } from 'ink';
+import { setSize } from '../app/uiStore.js';
+/**
+ * Root flex container. Tracks terminal resizes and pushes dims into the UI store
+ * so child components can react via nanostores selectors.
+ */
+export const AppLayout = ({ children }) => {
+    const { stdout } = useStdout();
+    useEffect(() => {
+        const onResize = () => {
+            setSize(stdout.columns ?? 80, stdout.rows ?? 24);
+        };
+        onResize();
+        stdout.on('resize', onResize);
+        return () => {
+            stdout.off('resize', onResize);
+        };
+    }, [stdout]);
+    return (_jsx(Box, { flexDirection: "column", width: "100%", paddingX: 1, paddingY: 0, children: children }));
+};

package/dist/components/branding.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { CVC_BANNER, CVC_TAGLINE, BANNER_COLOR, TAGLINE_COLOR } from '../banner.js';
+export const Branding = ({ version = '0.0.1', model = 'unknown' }) => {
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: BANNER_COLOR, bold: true, children: CVC_BANNER }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: TAGLINE_COLOR, children: CVC_TAGLINE }), _jsx(Text, { color: "gray", children: `  v${version}  ·  ` }), _jsx(Text, { color: "white", children: model })] })] }));
+};

package/dist/components/overlays/confirmPrompt.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useStore } from '@nanostores/react';
+import { $prompt, resolveActivePrompt } from '../../app/promptStore.js';
+export const ConfirmPrompt = () => {
+    const cur = useStore($prompt);
+    if (!cur || cur.kind !== 'confirm')
+        return null;
+    const destructive = !!cur.destructive;
+    useInput((input, key) => {
+        if (key.escape) {
+            resolveActivePrompt(null);
+            return;
+        }
+        if (input === 'y' || input === 'Y') {
+            resolveActivePrompt(true);
+            return;
+        }
+        if (input === 'n' || input === 'N' || key.return) {
+            resolveActivePrompt(false);
+            return;
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: destructive ? '#e63946' : '#4a9eff', bold: true, children: destructive ? '⚠  ' : '? ' }), _jsx(Text, { children: cur.prompt })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "[y/N] \u00B7 Enter = no \u00B7 Esc = cancel" }) })] }));
+};

package/dist/components/overlays/helpOverlay.js

@@ -0,0 +1,75 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// CVC helpOverlay — full-screen /help overlay listing every slash command
+// from the central registry, grouped by category. Arrow-key scrollable.
+import { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { CVC_THEME } from '../../types.js';
+import { SLASH_COMMANDS } from '../../app/slash/registry.js';
+import { windowItems } from './overlayUtils.js';
+const VISIBLE = 18;
+const ORDER = [
+    'core',
+    'session',
+    'ops',
+    'setup',
+    'toggles',
+    'debug',
+    'other',
+];
+const TITLES = {
+    core: 'Core',
+    session: 'Sessions',
+    ops: 'Models · Skills · Tools',
+    setup: 'Setup',
+    toggles: 'Toggles',
+    debug: 'Debug',
+    other: 'Other',
+};
+function groupCommands() {
+    const buckets = new Map();
+    for (const c of SLASH_COMMANDS) {
+        if (c.hidden)
+            continue;
+        const k = (c.category ?? 'other');
+        if (!buckets.has(k))
+            buckets.set(k, []);
+        buckets.get(k).push(c);
+    }
+    const rows = [];
+    for (const k of ORDER) {
+        const list = buckets.get(k);
+        if (!list || list.length === 0)
+            continue;
+        rows.push({ kind: 'header', text: TITLES[k] ?? String(k) });
+        list.sort((a, b) => a.name.localeCompare(b.name));
+        for (const c of list) {
+            const aliases = c.aliases?.length ? ` (${c.aliases.map(a => `/${a}`).join(', ')})` : '';
+            rows.push({ kind: 'cmd', text: `/${c.name}${aliases} — ${c.help}`, cmd: c });
+        }
+    }
+    return rows;
+}
+export const HelpOverlay = ({ onClose }) => {
+    const rows = useMemo(groupCommands, []);
+    const [top, setTop] = useState(0);
+    useInput((input, key) => {
+        if (key.escape || input === 'q' || (key.ctrl && input === 'c'))
+            return onClose();
+        if (key.upArrow && top > 0)
+            return setTop(top - 1);
+        if (key.downArrow && top < Math.max(0, rows.length - VISIBLE))
+            return setTop(top + 1);
+        if (key.pageUp)
+            return setTop(Math.max(0, top - VISIBLE));
+        if (key.pageDown)
+            return setTop(Math.min(Math.max(0, rows.length - VISIBLE), top + VISIBLE));
+    });
+    const { items, offset } = windowItems(rows, top + Math.floor(VISIBLE / 2), VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: CVC_THEME.primary, bold: true, children: ["CVC \u2014 slash commands (", rows.filter(r => r.kind === 'cmd').length, ")"] }), offset > 0 ? _jsx(Text, { dimColor: true, children: ` ↑ ${offset} more` }) : _jsx(Text, { children: " " }), items.map((row, i) => {
+                const k = `${offset + i}-${row.kind}`;
+                if (row.kind === 'header') {
+                    return (_jsx(Text, { color: CVC_THEME.primary, bold: true, children: row.text }, k));
+                }
+                return (_jsxs(Text, { dimColor: false, children: ['  ', row.text] }, k));
+            }), offset + VISIBLE < rows.length ? (_jsx(Text, { dimColor: true, children: ` ↓ ${rows.length - offset - VISIBLE} more` })) : (_jsx(Text, { children: " " })), _jsx(Text, { dimColor: true, children: "\u2191/\u2193 scroll \u00B7 PgUp/PgDn page \u00B7 Esc/q close" })] }));
+};

package/dist/components/overlays/historySearch.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Reverse-incremental history search overlay (Ctrl+R).
+// Keystrokes refine the query; Up/Down moves through matches; Enter accepts;
+// Esc cancels.
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { searchHistory } from '../../app/historyStore.js';
+export const HistorySearch = ({ onAccept, onCancel }) => {
+    const [query, setQuery] = useState('');
+    const [index, setIndex] = useState(0);
+    const matches = searchHistory(query, 50);
+    const current = matches[index] ?? '';
+    useInput((input, key) => {
+        if (key.escape || (key.ctrl && input === 'g')) {
+            onCancel();
+            return;
+        }
+        if (key.return) {
+            if (current)
+                onAccept(current);
+            else
+                onCancel();
+            return;
+        }
+        if (key.upArrow || (key.ctrl && input === 'r')) {
+            if (matches.length > 0)
+                setIndex(Math.min(matches.length - 1, index + 1));
+            return;
+        }
+        if (key.downArrow || (key.ctrl && input === 's')) {
+            setIndex(Math.max(0, index - 1));
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery(query.slice(0, -1));
+            setIndex(0);
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && !key.tab) {
+            setQuery(query + input);
+            setIndex(0);
+            return;
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "#e63946", children: "(reverse-i-search)" }), _jsx(Text, { children: `'${query}': ` }), _jsx(Text, { children: current })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: matches.length > 0
+                        ? `${index + 1}/${matches.length} match${matches.length === 1 ? '' : 'es'} · ↑/↓ navigate · Enter accept · Esc cancel`
+                        : 'no matches · Esc cancel' }) })] }));
+};

package/dist/components/overlays/modelPicker.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// CVC modelPicker overlay — arrow-key navigable, two-stage (provider → model).
+// Behavior parity with Hermes ui-tui modelPicker, but consumes preloaded data
+// via props so it stays trivial to test and wire.
+import { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { CVC_THEME } from '../../types.js';
+import { windowItems } from './overlayUtils.js';
+const VISIBLE = 10;
+export const ModelPicker = ({ providers, currentModel, onSelect, onCancel, }) => {
+    const [stage, setStage] = useState('provider');
+    const [pIdx, setPIdx] = useState(() => Math.max(0, providers.findIndex(p => p.is_current)));
+    const [mIdx, setMIdx] = useState(0);
+    const provider = providers[pIdx];
+    const models = provider?.models ?? [];
+    useInput((_input, key) => {
+        if (key.escape) {
+            if (stage === 'model') {
+                setStage('provider');
+                setMIdx(0);
+                return;
+            }
+            onCancel();
+            return;
+        }
+        const count = stage === 'provider' ? providers.length : models.length;
+        const sel = stage === 'provider' ? pIdx : mIdx;
+        const setSel = stage === 'provider' ? setPIdx : setMIdx;
+        if (key.upArrow && sel > 0)
+            return setSel(sel - 1);
+        if (key.downArrow && sel < count - 1)
+            return setSel(sel + 1);
+        if (key.return) {
+            if (stage === 'provider') {
+                if (provider) {
+                    setStage('model');
+                    setMIdx(0);
+                }
+                return;
+            }
+            const m = models[mIdx];
+            if (provider && m)
+                onSelect(provider.slug, m);
+        }
+    });
+    const rows = useMemo(() => {
+        if (stage === 'provider') {
+            return providers.map(p => `${p.is_current ? '*' : '●'} ${p.name} · ${p.models.length} models`);
+        }
+        return models.map(m => `${m === currentModel ? '*' : ' '} ${m}`);
+    }, [stage, providers, models, currentModel]);
+    const sel = stage === 'provider' ? pIdx : mIdx;
+    const { items, offset } = windowItems(rows, sel, VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: CVC_THEME.primary, bold: true, children: stage === 'provider' ? 'Select provider (1/2)' : `Select model — ${provider?.name ?? ''} (2/2)` }), _jsx(Text, { dimColor: true, children: currentModel ? `current: ${currentModel}` : ' ' }), offset > 0 ? _jsx(Text, { dimColor: true, children: ` ↑ ${offset} more` }) : _jsx(Text, { children: " " }), items.map((row, i) => {
+                const idx = offset + i;
+                const active = sel === idx;
+                return (_jsxs(Text, { color: active ? CVC_THEME.primary : undefined, inverse: active, bold: active, children: [active ? '▸ ' : '  ', row] }, `${stage}-${idx}`));
+            }), offset + VISIBLE < rows.length ? (_jsx(Text, { dimColor: true, children: ` ↓ ${rows.length - offset - VISIBLE} more` })) : (_jsx(Text, { children: " " })), _jsxs(Text, { dimColor: true, children: ["\u2191/\u2193 select \u00B7 Enter choose \u00B7 Esc ", stage === 'model' ? 'back' : 'cancel'] })] }));
+};