cvc-tui 0.4.4 → 0.4.7

package/dist/components/modelPicker.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+// SPDX-License-Identifier: MIT
+// Ported from CVC Agent (https://github.com/NousResearch/cvc)
+// Original Copyright (c) 2025 Nous Research. CVC adaptations (c) 2026 Jai Kumar Meena.
+import { Box, Text, useInput, useStdout } from '../vendor/cvc-ink/index.js';
+import { useEffect, useMemo, useState } from 'react';
+import { providerDisplayNames } from '../domain/providers.js';
+import { TUI_SESSION_MODEL_FLAG } from '../domain/slash.js';
+import { asRpcResult, rpcErrorMessage } from '../lib/rpc.js';
+import { OverlayHint, useOverlayKeys, windowItems } from './overlayControls.js';
+const VISIBLE = 12;
+const MIN_WIDTH = 40;
+const MAX_WIDTH = 90;
+export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }) {
+    const [providers, setProviders] = useState([]);
+    const [currentModel, setCurrentModel] = useState('');
+    const [err, setErr] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [persistGlobal, setPersistGlobal] = useState(false);
+    const [providerIdx, setProviderIdx] = useState(0);
+    const [modelIdx, setModelIdx] = useState(0);
+    const [stage, setStage] = useState('provider');
+    const [keyInput, setKeyInput] = useState('');
+    const [keySaving, setKeySaving] = useState(false);
+    const [keyError, setKeyError] = useState('');
+    const { stdout } = useStdout();
+    // Pin the picker to a stable width so the FloatBox parent (which shrinks-
+    // to-fit with alignSelf="flex-start") doesn't resize as long provider /
+    // model names scroll into view, and so `wrap="truncate-end"` on each row
+    // has an actual constraint to truncate against.
+    const width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, (stdout?.columns ?? 80) - 6));
+    useEffect(() => {
+        gw.request('model.options', sessionId ? { session_id: sessionId } : {})
+            .then(raw => {
+            const r = asRpcResult(raw);
+            if (!r) {
+                setErr('invalid response: model.options');
+                setLoading(false);
+                return;
+            }
+            const next = r.providers ?? [];
+            setProviders(next);
+            setCurrentModel(String(r.model ?? ''));
+            setProviderIdx(Math.max(0, next.findIndex(p => p.is_current)));
+            setModelIdx(0);
+            setStage('provider');
+            setErr('');
+            setLoading(false);
+        })
+            .catch((e) => {
+            setErr(rpcErrorMessage(e));
+            setLoading(false);
+        });
+    }, [gw, sessionId]);
+    const provider = providers[providerIdx];
+    const models = provider?.models ?? [];
+    const names = useMemo(() => providerDisplayNames(providers), [providers]);
+    const back = () => {
+        if (stage === 'model' || stage === 'key' || stage === 'disconnect') {
+            setStage('provider');
+            setModelIdx(0);
+            setKeyInput('');
+            setKeyError('');
+            setKeySaving(false);
+            return;
+        }
+        onCancel();
+    };
+    useOverlayKeys({ onBack: back, onClose: onCancel });
+    useInput((ch, key) => {
+        // Key entry stage handles its own input
+        if (stage === 'key') {
+            if (keySaving) {
+                return;
+            }
+            if (key.return) {
+                if (!keyInput.trim()) {
+                    return;
+                }
+                setKeySaving(true);
+                setKeyError('');
+                gw.request('model.save_key', {
+                    slug: provider?.slug,
+                    api_key: keyInput.trim(),
+                    ...(sessionId ? { session_id: sessionId } : {}),
+                })
+                    .then(raw => {
+                    const r = asRpcResult(raw);
+                    if (!r?.provider) {
+                        setKeyError('failed to save key');
+                        setKeySaving(false);
+                        return;
+                    }
+                    // Update the provider in our list with fresh data
+                    setProviders(prev => prev.map(p => p.slug === r.provider.slug ? r.provider : p));
+                    setKeyInput('');
+                    setKeySaving(false);
+                    setStage('model');
+                    setModelIdx(0);
+                })
+                    .catch((e) => {
+                    setKeyError(rpcErrorMessage(e));
+                    setKeySaving(false);
+                });
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setKeyInput(v => v.slice(0, -1));
+                return;
+            }
+            // ctrl+u clears input
+            if (ch === '\u0015') {
+                setKeyInput('');
+                return;
+            }
+            if (ch && !key.ctrl && !key.meta) {
+                setKeyInput(v => v + ch);
+            }
+            return;
+        }
+        // Disconnect confirmation stage
+        if (stage === 'disconnect') {
+            if (ch.toLowerCase() === 'y' || key.return) {
+                if (!provider) {
+                    setStage('provider');
+                    return;
+                }
+                setKeySaving(true);
+                gw.request('model.disconnect', {
+                    slug: provider.slug,
+                    ...(sessionId ? { session_id: sessionId } : {}),
+                })
+                    .then(raw => {
+                    const r = asRpcResult(raw);
+                    if (r?.disconnected) {
+                        // Mark provider as unauthenticated in local state
+                        setProviders(prev => prev.map(p => p.slug === provider.slug
+                            ? { ...p, authenticated: false, models: [], total_models: 0, warning: p.key_env ? `paste ${p.key_env} to activate` : 'run `hermes model` to configure' }
+                            : p));
+                    }
+                    setKeySaving(false);
+                    setStage('provider');
+                })
+                    .catch(() => {
+                    setKeySaving(false);
+                    setStage('provider');
+                });
+                return;
+            }
+            if (ch.toLowerCase() === 'n' || key.escape) {
+                setStage('provider');
+                return;
+            }
+            return;
+        }
+        const count = stage === 'provider' ? providers.length : models.length;
+        const sel = stage === 'provider' ? providerIdx : modelIdx;
+        const setSel = stage === 'provider' ? setProviderIdx : setModelIdx;
+        if (key.upArrow && sel > 0) {
+            setSel(v => v - 1);
+            return;
+        }
+        if (key.downArrow && sel < count - 1) {
+            setSel(v => v + 1);
+            return;
+        }
+        if (key.return) {
+            if (stage === 'provider') {
+                if (!provider) {
+                    return;
+                }
+                if (provider.authenticated === false) {
+                    // api_key providers: prompt for key inline
+                    if (provider.auth_type === 'api_key' && provider.key_env) {
+                        setStage('key');
+                        setKeyInput('');
+                        setKeyError('');
+                    }
+                    // Other auth types: no-op (warning shown tells them to run hermes model)
+                    return;
+                }
+                setStage('model');
+                setModelIdx(0);
+                return;
+            }
+            const model = models[modelIdx];
+            if (provider && model) {
+                onSelect(`${model} --provider ${provider.slug}${persistGlobal ? ' --global' : ` ${TUI_SESSION_MODEL_FLAG}`}`);
+            }
+            else {
+                setStage('provider');
+            }
+            return;
+        }
+        if (ch.toLowerCase() === 'g') {
+            setPersistGlobal(v => !v);
+            return;
+        }
+        // Disconnect: only in provider stage, only for authenticated providers
+        if (ch.toLowerCase() === 'd' && stage === 'provider' && provider?.authenticated !== false) {
+            setStage('disconnect');
+            return;
+        }
+    });
+    if (loading) {
+        return _jsx(Text, { color: t.color.muted, children: "loading models\u2026" });
+    }
+    if (err) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: t.color.label, children: ["error: ", err] }), _jsx(OverlayHint, { t: t, children: "Esc/q cancel" })] }));
+    }
+    if (!providers.length) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: t.color.muted, children: "no providers available" }), _jsx(OverlayHint, { t: t, children: "Esc/q cancel" })] }));
+    }
+    // ── Key entry stage ──────────────────────────────────────────────────
+    if (stage === 'key' && provider) {
+        const masked = keyInput ? '•'.repeat(Math.min(keyInput.length, 40)) : '';
+        return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { bold: true, color: t.color.accent, wrap: "truncate-end", children: ["Configure ", provider.name] }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: "Paste your API key below (saved to ~/.hermes/.env)" }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: " " }), _jsxs(Text, { color: t.color.muted, wrap: "truncate-end", children: [provider.key_env, ":"] }), _jsxs(Text, { color: t.color.accent, wrap: "truncate-end", children: ['  ', masked || '(empty)', keySaving ? '' : '▎'] }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: " " }), keyError ? (_jsxs(Text, { color: t.color.label, wrap: "truncate-end", children: ["error: ", keyError] })) : keySaving ? (_jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: "saving\u2026" })) : (_jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: " " })), _jsx(OverlayHint, { t: t, children: "Enter save \u00B7 Ctrl+U clear \u00B7 Esc back" })] }));
+    }
+    // ── Disconnect confirmation stage ─────────────────────────────────────
+    if (stage === 'disconnect' && provider) {
+        return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { bold: true, color: t.color.accent, wrap: "truncate-end", children: ["Disconnect ", provider.name, "?"] }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: " " }), _jsxs(Text, { color: t.color.muted, wrap: "truncate-end", children: ["This removes saved credentials for ", provider.name, "."] }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: "You can re-authenticate later by selecting it again." }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: " " }), keySaving ? (_jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: "disconnecting\u2026" })) : (_jsx(OverlayHint, { t: t, children: "y/Enter confirm \u00B7 n/Esc cancel" }))] }));
+    }
+    // ── Provider selection stage ─────────────────────────────────────────
+    if (stage === 'provider') {
+        const rows = providers.map((p, i) => {
+            const authMark = p.authenticated === false ? '○' : p.is_current ? '*' : '●';
+            const modelCount = p.total_models ?? p.models?.length ?? 0;
+            const suffix = p.authenticated === false
+                ? (p.auth_type === 'api_key' ? '(no key)' : '(needs setup)')
+                : `${modelCount} models`;
+            return `${authMark} ${names[i]} · ${suffix}`;
+        });
+        const { items, offset } = windowItems(rows, providerIdx, VISIBLE);
+        return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { bold: true, color: t.color.accent, wrap: "truncate-end", children: "Select provider (step 1/2)" }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: "Full model IDs on the next step \u00B7 Enter to continue" }), _jsxs(Text, { color: t.color.muted, wrap: "truncate-end", children: ["Current: ", currentModel || '(unknown)'] }), _jsx(Text, { color: t.color.label, wrap: "truncate-end", children: provider?.warning ? `warning: ${provider.warning}` : ' ' }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: offset > 0 ? ` ↑ ${offset} more` : ' ' }), Array.from({ length: VISIBLE }, (_, i) => {
+                    const row = items[i];
+                    const idx = offset + i;
+                    const p = providers[idx];
+                    const dimmed = p?.authenticated === false;
+                    return row ? (_jsxs(Text, { bold: providerIdx === idx, color: providerIdx === idx ? t.color.accent : dimmed ? t.color.label : t.color.muted, inverse: providerIdx === idx, wrap: "truncate-end", children: [providerIdx === idx ? '▸ ' : '  ', idx + 1, ". ", row] }, providers[idx]?.slug ?? `row-${idx}`)) : (_jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: ' ' }, `pad-${i}`));
+                }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: offset + VISIBLE < rows.length ? ` ↓ ${rows.length - offset - VISIBLE} more` : ' ' }), _jsxs(Text, { color: t.color.muted, wrap: "truncate-end", children: ["persist: ", persistGlobal ? 'global' : 'session', " \u00B7 g toggle"] }), _jsx(OverlayHint, { t: t, children: "\u2191/\u2193 select \u00B7 Enter choose \u00B7 d disconnect \u00B7 Esc/q cancel" })] }));
+    }
+    // ── Model selection stage ────────────────────────────────────────────
+    const { items, offset } = windowItems(models, modelIdx, VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { bold: true, color: t.color.accent, wrap: "truncate-end", children: "Select model (step 2/2)" }), _jsxs(Text, { color: t.color.muted, wrap: "truncate-end", children: [names[providerIdx] || '(unknown provider)', " \u00B7 Esc back"] }), _jsx(Text, { color: t.color.label, wrap: "truncate-end", children: provider?.warning ? `warning: ${provider.warning}` : ' ' }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: offset > 0 ? ` ↑ ${offset} more` : ' ' }), Array.from({ length: VISIBLE }, (_, i) => {
+                const row = items[i];
+                const idx = offset + i;
+                if (!row) {
+                    return !models.length && i === 0 ? (_jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: "no models listed for this provider" }, "empty")) : (_jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: ' ' }, `pad-${i}`));
+                }
+                const prefix = modelIdx === idx ? '▸ ' : row === currentModel ? '* ' : '  ';
+                return (_jsxs(Text, { bold: modelIdx === idx, color: modelIdx === idx ? t.color.accent : t.color.muted, inverse: modelIdx === idx, wrap: "truncate-end", children: [prefix, idx + 1, ". ", row] }, `${provider?.slug ?? 'prov'}:${idx}:${row}`));
+            }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: offset + VISIBLE < models.length ? ` ↓ ${models.length - offset - VISIBLE} more` : ' ' }), _jsxs(Text, { color: t.color.muted, wrap: "truncate-end", children: ["persist: ", persistGlobal ? 'global' : 'session', " \u00B7 g toggle"] }), _jsx(OverlayHint, { t: t, children: models.length ? '↑/↓ select · Enter switch · Esc back · q close' : 'Enter/Esc back · q close' })] }));
+}

package/dist/components/overlayControls.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+// SPDX-License-Identifier: MIT
+// Ported from CVC Agent (https://github.com/NousResearch/cvc)
+// Original Copyright (c) 2025 Nous Research. CVC adaptations (c) 2026 Jai Kumar Meena.
+import { Text, useInput } from '../vendor/cvc-ink/index.js';
+export function useOverlayKeys({ disabled = false, onBack, onClose }) {
+    useInput((ch, key) => {
+        if (disabled) {
+            return;
+        }
+        if (ch === 'q') {
+            return onClose();
+        }
+        if (key.escape) {
+            return onBack ? onBack() : onClose();
+        }
+    });
+}
+export function OverlayHint({ children, t }) {
+    return (_jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: children }));
+}
+export const windowOffset = (count, selected, visible) => Math.max(0, Math.min(selected - Math.floor(visible / 2), count - visible));
+export function windowItems(items, selected, visible) {
+    const offset = windowOffset(items.length, selected, visible);
+    return {
+        items: items.slice(offset, offset + visible),
+        offset
+    };
+}

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,76 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+// 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,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+// 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,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+// CVC modelPicker overlay — arrow-key navigable, two-stage (provider → model).
+// Behavior parity with CVC 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'] })] }));
+};

package/dist/components/overlays/overlayUtils.js

@@ -0,0 +1,19 @@
+// @ts-nocheck
+// Tiny shared helpers for CVC arrow-key navigable overlays.
+// Keeps modelPicker / sessionPicker / skillsHub / helpOverlay consistent
+// without dragging in the heavier CVC overlayControls surface.
+/** Window a list around the selected index so a cursor at any depth stays visible. */
+export function windowItems(all, selected, visible) {
+    if (all.length <= visible)
+        return { items: all, offset: 0 };
+    const half = Math.floor(visible / 2);
+    let offset = Math.max(0, Math.min(all.length - visible, selected - half));
+    return { items: all.slice(offset, offset + visible), offset };
+}
+/** Filter a list of strings by a case-insensitive substring (q is the query). */
+export function filterRows(rows, q, key) {
+    const needle = q.trim().toLowerCase();
+    if (!needle)
+        return rows;
+    return rows.filter(r => key(r).toLowerCase().includes(needle));
+}

package/dist/components/overlays/secretPrompt.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+// Secret prompt overlay — masked input. Resolves with the entered string,
+// or null on Esc.
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useStore } from '@nanostores/react';
+import { $prompt, resolveActivePrompt } from '../../app/promptStore.js';
+export const SecretPrompt = () => {
+    const cur = useStore($prompt);
+    const [value, setValue] = useState('');
+    if (!cur || cur.kind !== 'secret')
+        return null;
+    const mask = cur.mask !== false;
+    useInput((input, key) => {
+        if (key.escape) {
+            resolveActivePrompt(null);
+            return;
+        }
+        if (key.return) {
+            resolveActivePrompt(value);
+            setValue('');
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setValue(value.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && !key.tab) {
+            setValue(value + input);
+            return;
+        }
+    });
+    const display = mask ? '●'.repeat(value.length) : value;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "#e63946", bold: true, children: "\uD83D\uDD12 " }), _jsxs(Text, { children: [cur.prompt, " "] }), _jsx(Text, { children: display })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Enter to submit \u00B7 Esc to cancel" }) })] }));
+};

package/dist/components/overlays/sessionPicker.js

@@ -0,0 +1,93 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+// CVC sessionPicker overlay — lists ~/.cvc/sessions/*.json with timestamp +
+// first-message preview, arrow-key navigable, filter input.
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import { CVC_THEME } from '../../types.js';
+import { filterRows, windowItems } from './overlayUtils.js';
+const VISIBLE = 10;
+/** Load sessions from ~/.cvc/sessions/*.json. Resilient to malformed files. */
+export function loadSessions(dir = path.join(os.homedir(), '.cvc', 'sessions')) {
+    if (!fs.existsSync(dir))
+        return [];
+    const files = fs.readdirSync(dir).filter(f => f.endsWith('.json'));
+    const out = [];
+    for (const f of files) {
+        const fp = path.join(dir, f);
+        try {
+            const stat = fs.statSync(fp);
+            const raw = fs.readFileSync(fp, 'utf8');
+            const j = JSON.parse(raw);
+            const first = (j.messages ?? []).find(m => m.role === 'user');
+            const preview = (first?.content ?? '').replace(/\s+/g, ' ').trim().slice(0, 80) || '(empty)';
+            out.push({
+                id: j.id ?? f.replace(/\.json$/, ''),
+                path: fp,
+                mtime: stat.mtimeMs,
+                preview,
+                title: j.title,
+            });
+        }
+        catch {
+            // skip malformed
+        }
+    }
+    return out.sort((a, b) => b.mtime - a.mtime);
+}
+const fmtAge = (ms) => {
+    const d = Math.max(0, Date.now() - ms);
+    const m = Math.floor(d / 60000);
+    if (m < 1)
+        return 'just now';
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    return `${Math.floor(h / 24)}d ago`;
+};
+export const SessionPicker = ({ sessions, onSelect, onCancel }) => {
+    const [all, setAll] = useState(sessions ?? []);
+    const [query, setQuery] = useState('');
+    const [idx, setIdx] = useState(0);
+    useEffect(() => {
+        if (!sessions)
+            setAll(loadSessions());
+    }, [sessions]);
+    const filtered = useMemo(() => filterRows(all, query, s => `${s.title ?? ''} ${s.preview} ${s.id}`), [all, query]);
+    const safeIdx = Math.min(idx, Math.max(0, filtered.length - 1));
+    useInput((input, key) => {
+        if (key.escape)
+            return onCancel();
+        if (key.upArrow && safeIdx > 0)
+            return setIdx(safeIdx - 1);
+        if (key.downArrow && safeIdx < filtered.length - 1)
+            return setIdx(safeIdx + 1);
+        if (key.return) {
+            const s = filtered[safeIdx];
+            if (s)
+                onSelect(s.id);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery(q => q.slice(0, -1));
+            setIdx(0);
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && !key.tab) {
+            setQuery(q => q + input);
+            setIdx(0);
+        }
+    });
+    const rows = filtered.map(s => `${(s.title ?? s.id).slice(0, 24).padEnd(24)} · ${fmtAge(s.mtime).padEnd(10)} · ${s.preview}`);
+    const { items, offset } = windowItems(rows, safeIdx, VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: CVC_THEME.primary, bold: true, children: ["Sessions (", filtered.length, "/", all.length, ")"] }), _jsxs(Text, { dimColor: true, children: ["filter: ", query || '(none)'] }), offset > 0 ? _jsx(Text, { dimColor: true, children: ` ↑ ${offset} more` }) : _jsx(Text, { children: " " }), items.length === 0 ? (_jsx(Text, { dimColor: true, children: "no sessions" })) : (items.map((row, i) => {
+                const k = offset + i;
+                const active = safeIdx === k;
+                return (_jsxs(Text, { color: active ? CVC_THEME.primary : undefined, inverse: active, bold: active, children: [active ? '▸ ' : '  ', row] }, filtered[k]?.id ?? `s-${k}`));
+            })), offset + VISIBLE < rows.length ? (_jsx(Text, { dimColor: true, children: ` ↓ ${rows.length - offset - VISIBLE} more` })) : (_jsx(Text, { children: " " })), _jsx(Text, { dimColor: true, children: "type to filter \u00B7 \u2191/\u2193 select \u00B7 Enter resume \u00B7 Esc cancel" })] }));
+};