cvc-tui 0.1.0

package/dist/components/overlays/overlayUtils.js

@@ -0,0 +1,18 @@
+// Tiny shared helpers for CVC arrow-key navigable overlays.
+// Keeps modelPicker / sessionPicker / skillsHub / helpOverlay consistent
+// without dragging in the heavier Hermes 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,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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,92 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// 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" })] }));
+};

package/dist/components/overlays/skillsHub.js

@@ -0,0 +1,70 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// CVC skillsHub overlay — list skills (via gateway or supplied prop), search/filter,
+// arrow-key navigable, Enter triggers an onActivate callback (e.g. to inject the
+// skill into the next user message).
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { CVC_THEME } from '../../types.js';
+import { filterRows, windowItems } from './overlayUtils.js';
+const VISIBLE = 12;
+export const SkillsHub = ({ skills, loadSkills, onActivate, onCancel, }) => {
+    const [all, setAll] = useState(skills ?? []);
+    const [loading, setLoading] = useState(!skills && Boolean(loadSkills));
+    const [query, setQuery] = useState('');
+    const [idx, setIdx] = useState(0);
+    useEffect(() => {
+        if (skills || !loadSkills)
+            return;
+        let cancelled = false;
+        loadSkills()
+            .then(list => {
+            if (!cancelled) {
+                setAll(list);
+                setLoading(false);
+            }
+        })
+            .catch(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [skills, loadSkills]);
+    const filtered = useMemo(() => filterRows(all, query, s => `${s.name} ${s.description ?? ''} ${s.category ?? ''}`), [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)
+                onActivate(s);
+            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 => {
+        const cat = s.category ? `[${s.category}] ` : '';
+        const desc = s.description ? ` — ${s.description}` : '';
+        return `${cat}${s.name}${desc}`;
+    });
+    const { items, offset } = windowItems(rows, safeIdx, VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: CVC_THEME.primary, bold: true, children: ["Skills Hub (", filtered.length, "/", all.length, ")"] }), _jsxs(Text, { dimColor: true, children: ["filter: ", query || '(none)'] }), loading ? (_jsx(Text, { dimColor: true, children: "loading skills\u2026" })) : items.length === 0 ? (_jsx(Text, { dimColor: true, children: "no skills match" })) : (_jsxs(_Fragment, { children: [offset > 0 ? _jsx(Text, { dimColor: true, children: ` ↑ ${offset} more` }) : _jsx(Text, { children: " " }), 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]?.name ?? `sk-${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 activate \u00B7 Esc cancel" })] }));
+};

package/dist/components/streamingMarkdown.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Streaming markdown renderer for the CVC TUI.
+//
+// Behaviour parity with Hermes' streamingMarkdown:
+//   * Splits in-flight text at the last stable top-level block boundary
+//     (a blank line OUTSIDE a fenced code block) so the stable prefix is
+//     memoised and only the unstable suffix re-tokenises on each delta.
+//   * The stable prefix is monotonically growing (stored in a ref), so
+//     React reuses the cached subtree across deltas.
+//
+// Block support:
+//   * ATX headings (#, ##, …)        — bold, accent-coloured by level
+//   * Fenced code (``` / ~~~) w/ syntax highlighting via cli-highlight
+//   * Bullet & numbered lists (incl. nesting via leading whitespace)
+//   * Blockquotes (`> …`)            — dim left bar
+//   * Horizontal rules (---, ***)
+//   * Inline: **bold**, *italic*, `code`, ~~strike~~, [text](url)
+//   * Bare URLs and OSC 8 hyperlinks (terminal-clickable)
+//
+// Implementation notes:
+//   * We do NOT use marked's full HTML pipeline — the lexer is enough.
+//     marked.lexer() returns block tokens; we recurse into inline tokens
+//     ourselves so we can control Ink primitives exactly.
+//   * Code highlighting is opt-in per language. cli-highlight already
+//     emits ANSI escapes (which Ink's <Text> passes through).
+//   * Links: we render them as OSC 8 hyperlinks via a raw escape string
+//     wrapped in <Text> — terminals that don't understand OSC 8 will
+//     simply show the visible text portion.
+import { Fragment, memo, useRef } from 'react';
+import { Box, Text } from 'ink';
+import { marked } from 'marked';
+import { highlight, supportsLanguage } from 'cli-highlight';
+import { CVC_THEME } from '../types.js';
+const ESC = '\x1b';
+const OSC8_OPEN = (url) => `${ESC}]8;;${url}${ESC}\\`;
+const OSC8_CLOSE = `${ESC}]8;;${ESC}\\`;
+/** Wrap visible text with OSC 8 hyperlink escape so terminals make it clickable. */
+export const osc8Link = (url, label) => `${OSC8_OPEN(url)}${label}${OSC8_CLOSE}`;
+// -- stable-boundary chunker ---------------------------------------------------
+/** Count whether `s[0..end)` ends inside an open ``` / ~~~ fence. */
+const fenceOpenAt = (s, end) => {
+    let codeOpen = false;
+    let i = 0;
+    while (i < end) {
+        const nl = s.indexOf('\n', i);
+        const lineEnd = nl < 0 || nl > end ? end : nl;
+        const line = s.slice(i, lineEnd).trim();
+        if (/^(?:`{3,}|~{3,})/.test(line)) {
+            codeOpen = !codeOpen;
+        }
+        if (nl < 0 || nl >= end)
+            break;
+        i = nl + 1;
+    }
+    return codeOpen;
+};
+/** Last \n\n boundary outside a fenced block, returned as start-of-next-block index. */
+export const findStableBoundary = (text) => {
+    let idx = text.length;
+    while (idx > 0) {
+        const boundary = text.lastIndexOf('\n\n', idx - 1);
+        if (boundary < 0)
+            return -1;
+        const splitAt = boundary + 2;
+        if (!fenceOpenAt(text, splitAt))
+            return splitAt;
+        idx = boundary;
+    }
+    return -1;
+};
+// -- inline rendering ---------------------------------------------------------
+const HEADING_COLOURS = {
+    1: CVC_THEME.primary, // CVC red
+    2: CVC_THEME.accent,
+    3: CVC_THEME.accent,
+};
+const renderInline = (tokens, key = 0) => {
+    if (!tokens)
+        return null;
+    const out = [];
+    tokens.forEach((tok, i) => {
+        const k = `${key}-${i}`;
+        switch (tok.type) {
+            case 'text':
+            case 'escape':
+                out.push(_jsx(Text, { children: tok.text ?? tok.raw ?? '' }, k));
+                break;
+            case 'strong':
+                out.push(_jsx(Text, { bold: true, children: renderInline(tok.tokens, i) }, k));
+                break;
+            case 'em':
+                out.push(_jsx(Text, { italic: true, children: renderInline(tok.tokens, i) }, k));
+                break;
+            case 'del':
+                out.push(_jsx(Text, { strikethrough: true, children: renderInline(tok.tokens, i) }, k));
+                break;
+            case 'codespan':
+                out.push(_jsxs(Text, { color: CVC_THEME.accent, backgroundColor: "#1b2735", children: [' ', tok.text ?? '', ' '] }, k));
+                break;
+            case 'link': {
+                const href = tok.href ?? '';
+                const label = (tok.text ?? href) || '';
+                // OSC 8 — embed the click target in the escape sequence so the
+                // visible text is just the label (still styled accent+underline).
+                out.push(_jsx(Text, { color: CVC_THEME.accent, underline: true, children: osc8Link(href, label) }, k));
+                break;
+            }
+            case 'br':
+                out.push(_jsx(Text, { children: '\n' }, k));
+                break;
+            case 'image': {
+                const href = tok.href ?? '';
+                const label = tok.text ?? '';
+                out.push(_jsxs(Text, { color: CVC_THEME.dim, children: ["[image: ", label, "] ", href] }, k));
+                break;
+            }
+            default:
+                out.push(_jsx(Text, { children: tok.raw ?? tok.text ?? '' }, k));
+        }
+    });
+    return out;
+};
+// -- block rendering ----------------------------------------------------------
+const renderCodeBlock = (text, lang, k) => {
+    const language = (lang ?? '').trim().toLowerCase();
+    let body = text;
+    if (language && supportsLanguage(language)) {
+        try {
+            body = highlight(text, { language, ignoreIllegals: true });
+        }
+        catch {
+            body = text;
+        }
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginY: 0, children: [language ? _jsxs(Text, { color: CVC_THEME.dim, children: ["\u2500 ", language] }) : null, body.split('\n').map((line, i) => (_jsx(Text, { children: line }, i)))] }, k));
+};
+const renderListItem = (item, ordered, index, k) => {
+    const bullet = ordered ? `${index + 1}. ` : '• ';
+    return (_jsxs(Box, { children: [_jsx(Text, { color: CVC_THEME.accent, children: bullet }), _jsx(Box, { flexDirection: "column", children: item.tokens?.map((child, ci) => (_jsx(Fragment, { children: renderBlock(child, `${k}-${ci}`) }, ci))) })] }, k));
+};
+const renderBlock = (tok, k) => {
+    switch (tok.type) {
+        case 'heading': {
+            const t = tok;
+            const colour = HEADING_COLOURS[t.depth] ?? CVC_THEME.dim;
+            return (_jsx(Box, { children: _jsxs(Text, { bold: true, color: colour, children: ['#'.repeat(t.depth), ' ', renderInline(t.tokens)] }) }, k));
+        }
+        case 'paragraph': {
+            const t = tok;
+            return (_jsx(Text, { children: renderInline(t.tokens) }, k));
+        }
+        case 'code': {
+            const t = tok;
+            return renderCodeBlock(t.text ?? '', t.lang ?? undefined, k);
+        }
+        case 'blockquote': {
+            const t = tok;
+            return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: CVC_THEME.dim, children: "\u2502 " }), _jsx(Box, { flexDirection: "column", children: (t.tokens ?? []).map((child, ci) => (_jsx(Fragment, { children: renderBlock(child, `${k}-${ci}`) }, ci))) })] }, k));
+        }
+        case 'list': {
+            const t = tok;
+            return (_jsx(Box, { flexDirection: "column", children: t.items.map((it, i) => renderListItem(it, !!t.ordered, i, `${k}-i${i}`)) }, k));
+        }
+        case 'hr':
+            return (_jsx(Text, { color: CVC_THEME.dim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }, k));
+        case 'space':
+            return _jsx(Text, { children: " " }, k);
+        case 'html':
+            return _jsx(Text, { children: tok.text }, k);
+        case 'text': {
+            const t = tok;
+            const inline = t.tokens;
+            return (_jsx(Text, { children: inline ? renderInline(inline) : t.text }, k));
+        }
+        default:
+            return (_jsx(Text, { children: tok.raw ?? '' }, k));
+    }
+};
+const lexerOptions = { gfm: true, breaks: false };
+/** Public: render arbitrary markdown as a stack of Ink Box/Text nodes. */
+export const Markdown = memo(function Markdown({ text }) {
+    if (!text)
+        return null;
+    let tokens = [];
+    try {
+        tokens = marked.lexer(text, lexerOptions);
+    }
+    catch {
+        return _jsx(Text, { children: text });
+    }
+    return (_jsx(Box, { flexDirection: "column", children: tokens.map((tok, i) => (_jsx(Fragment, { children: renderBlock(tok, `b${i}`) }, i))) }));
+});
+/**
+ * StreamingMarkdown — the renderer used while a turn is in flight.
+ * Splits `content` at the last safe block boundary so the stable prefix
+ * memoises across deltas (avoiding O(N) re-tokenisation per chunk).
+ */
+export const StreamingMarkdown = memo(function StreamingMarkdown({ content, color, }) {
+    const stableRef = useRef('');
+    if (!content.startsWith(stableRef.current)) {
+        stableRef.current = '';
+    }
+    const boundary = findStableBoundary(content);
+    if (boundary > stableRef.current.length) {
+        stableRef.current = content.slice(0, boundary);
+    }
+    const stable = stableRef.current;
+    const unstable = content.slice(stable.length);
+    if (!content)
+        return null;
+    if (color) {
+        // Plain-text override path (used for user echo bubbles).
+        return _jsx(Text, { color: color, children: content });
+    }
+    if (!stable)
+        return _jsx(Markdown, { text: unstable });
+    if (!unstable)
+        return _jsx(Markdown, { text: stable });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Markdown, { text: stable }), _jsx(Markdown, { text: unstable })] }));
+});