cvc-tui 0.4.4 → 0.4.5

package/dist/components/overlays/skillsHub.js

@@ -0,0 +1,71 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-nocheck
+// 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/prompts.js

@@ -0,0 +1,95 @@
+import { jsxs as _jsxs, 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 { Box, Text, useInput } from '../vendor/cvc-ink/index.js';
+import { useState } from 'react';
+import { isMac } from '../lib/platform.js';
+import { TextInput } from './textInput.js';
+const OPTS = ['once', 'session', 'always', 'deny'];
+const LABELS = { always: 'Always allow', deny: 'Deny', once: 'Allow once', session: 'Allow this session' };
+const CMD_PREVIEW_LINES = 10;
+export function ApprovalPrompt({ onChoice, req, t }) {
+    const [sel, setSel] = useState(0);
+    useInput((ch, key) => {
+        if (key.upArrow && sel > 0) {
+            setSel(s => s - 1);
+        }
+        if (key.downArrow && sel < OPTS.length - 1) {
+            setSel(s => s + 1);
+        }
+        const n = parseInt(ch, 10);
+        if (n >= 1 && n <= OPTS.length) {
+            onChoice(OPTS[n - 1]);
+            return;
+        }
+        if (key.return) {
+            onChoice(OPTS[sel]);
+        }
+    });
+    const rawLines = req.command.split('\n');
+    const shown = rawLines.slice(0, CMD_PREVIEW_LINES);
+    const overflow = rawLines.length - shown.length;
+    return (_jsxs(Box, { borderColor: t.color.warn, borderStyle: "double", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: t.color.warn, children: ["\u26A0 approval required \u00B7 ", req.description] }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [shown.map((line, i) => (_jsx(Text, { color: t.color.text, wrap: "truncate-end", children: line || ' ' }, i))), overflow > 0 ? (_jsxs(Text, { color: t.color.muted, children: ["\u2026 +", overflow, " more line", overflow === 1 ? '' : 's', " (full text above)"] })) : null] }), _jsx(Text, {}), OPTS.map((o, i) => (_jsx(Text, { children: _jsxs(Text, { bold: sel === i, color: sel === i ? t.color.warn : t.color.muted, inverse: sel === i, children: [sel === i ? '▸ ' : '  ', i + 1, ". ", LABELS[o]] }) }, o))), _jsx(Text, { color: t.color.muted, children: "\u2191/\u2193 select \u00B7 Enter confirm \u00B7 1-4 quick pick \u00B7 Ctrl+C deny" })] }));
+}
+export function ClarifyPrompt({ cols = 80, onAnswer, onCancel, req, t }) {
+    const [sel, setSel] = useState(0);
+    const [custom, setCustom] = useState('');
+    const [typing, setTyping] = useState(false);
+    const choices = req.choices ?? [];
+    const heading = (_jsxs(Text, { bold: true, children: [_jsx(Text, { color: t.color.accent, children: "ask" }), _jsxs(Text, { color: t.color.text, children: [" ", req.question] })] }));
+    useInput((ch, key) => {
+        if (key.escape) {
+            typing && choices.length ? setTyping(false) : onCancel();
+            return;
+        }
+        if (typing || !choices.length) {
+            return;
+        }
+        if (key.upArrow && sel > 0) {
+            setSel(s => s - 1);
+        }
+        if (key.downArrow && sel < choices.length) {
+            setSel(s => s + 1);
+        }
+        if (key.return) {
+            sel === choices.length ? setTyping(true) : choices[sel] && onAnswer(choices[sel]);
+        }
+        const n = parseInt(ch);
+        if (n >= 1 && n <= choices.length) {
+            onAnswer(choices[n - 1]);
+        }
+    });
+    if (typing || !choices.length) {
+        return (_jsxs(Box, { flexDirection: "column", children: [heading, _jsxs(Box, { children: [_jsx(Text, { color: t.color.label, children: '> ' }), _jsx(TextInput, { columns: Math.max(20, cols - 6), onChange: setCustom, onSubmit: onAnswer, value: custom })] }), _jsxs(Text, { color: t.color.muted, children: ["Enter send \u00B7 Esc ", choices.length ? 'back' : 'cancel', " \u00B7", ' ', isMac ? 'Cmd+C copy · Cmd+V paste · Ctrl+C cancel' : 'Ctrl+C cancel'] })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [heading, [...choices, 'Other (type your answer)'].map((c, i) => (_jsx(Text, { children: _jsxs(Text, { bold: sel === i, color: sel === i ? t.color.label : t.color.muted, inverse: sel === i, children: [sel === i ? '▸ ' : '  ', i + 1, ". ", c] }) }, i))), _jsxs(Text, { color: t.color.muted, children: ["\u2191/\u2193 select \u00B7 Enter confirm \u00B7 1-", choices.length, " quick pick \u00B7 Esc/Ctrl+C cancel"] })] }));
+}
+export function ConfirmPrompt({ onCancel, onConfirm, req, t }) {
+    const [sel, setSel] = useState(0);
+    useInput((ch, key) => {
+        const lower = ch.toLowerCase();
+        if (key.escape || (key.ctrl && lower === 'c') || lower === 'n') {
+            return onCancel();
+        }
+        if (lower === 'y') {
+            return onConfirm();
+        }
+        if (key.upArrow) {
+            setSel(0);
+        }
+        if (key.downArrow) {
+            setSel(1);
+        }
+        if (key.return) {
+            sel === 0 ? onCancel() : onConfirm();
+        }
+    });
+    const accent = req.danger ? t.color.error : t.color.warn;
+    const rows = [
+        { color: t.color.text, label: req.cancelLabel ?? 'No' },
+        { color: req.danger ? t.color.error : t.color.text, label: req.confirmLabel ?? 'Yes' }
+    ];
+    return (_jsxs(Box, { borderColor: accent, borderStyle: "double", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: accent, children: [req.danger ? '⚠' : '?', " ", req.title] }), req.detail ? (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: t.color.text, wrap: "truncate-end", children: req.detail }) })) : null, _jsx(Text, {}), rows.map((row, i) => (_jsxs(Text, { children: [_jsx(Text, { color: sel === i ? accent : t.color.muted, children: sel === i ? '▸ ' : '  ' }), _jsx(Text, { color: sel === i ? row.color : t.color.muted, children: row.label })] }, row.label))), _jsx(Text, { color: t.color.muted, children: "\u2191/\u2193 select \u00B7 Enter confirm \u00B7 Y/N quick \u00B7 Esc cancel" })] }));
+}

package/dist/components/queuedMessages.js

@@ -0,0 +1,24 @@
+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 } from '../vendor/cvc-ink/index.js';
+import { compactPreview } from '../lib/text.js';
+export const QUEUE_WINDOW = 3;
+export function getQueueWindow(queueLen, queueEditIdx) {
+    const start = queueEditIdx === null ? 0 : Math.max(0, Math.min(queueEditIdx - 1, Math.max(0, queueLen - QUEUE_WINDOW)));
+    const end = Math.min(queueLen, start + QUEUE_WINDOW);
+    return { end, showLead: start > 0, showTail: end < queueLen, start };
+}
+export function QueuedMessages({ cols, queueEditIdx, queued, t }) {
+    if (!queued.length) {
+        return null;
+    }
+    const q = getQueueWindow(queued.length, queueEditIdx);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: t.color.muted, dimColor: true, children: `queued (${queued.length})${queueEditIdx !== null ? ` · editing ${queueEditIdx + 1} · Ctrl+X delete · Esc cancel` : ''}` }), q.showLead && (_jsxs(Text, { color: t.color.muted, dimColor: true, children: [' ', "\u2026"] })), queued.slice(q.start, q.end).map((item, i) => {
+                const idx = q.start + i;
+                const active = queueEditIdx === idx;
+                return (_jsxs(Text, { color: active ? t.color.accent : t.color.muted, dimColor: true, children: [active ? '▸' : ' ', " ", idx + 1, ". ", compactPreview(item, Math.max(16, cols - 10))] }, `${idx}-${item.slice(0, 16)}`));
+            }), q.showTail && (_jsxs(Text, { color: t.color.muted, dimColor: true, children: ['  ', "\u2026and ", queued.length - q.end, " more"] }))] }));
+}

package/dist/components/sessionPicker.js

@@ -0,0 +1,130 @@
+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, useState } from 'react';
+import { asRpcResult, rpcErrorMessage } from '../lib/rpc.js';
+import { OverlayHint, useOverlayKeys, windowOffset } from './overlayControls.js';
+const VISIBLE = 15;
+const MIN_WIDTH = 60;
+const MAX_WIDTH = 120;
+const age = (ts) => {
+    const d = (Date.now() / 1000 - ts) / 86400;
+    if (d < 1) {
+        return 'today';
+    }
+    if (d < 2) {
+        return 'yesterday';
+    }
+    return `${Math.floor(d)}d ago`;
+};
+export function SessionPicker({ gw, onCancel, onSelect, t }) {
+    const [items, setItems] = useState([]);
+    const [err, setErr] = useState('');
+    const [sel, setSel] = useState(0);
+    const [loading, setLoading] = useState(true);
+    // When non-null, the user pressed `d` on this index and we're waiting for
+    // a second `d`/`D` to confirm deletion.  Any other key cancels the prompt.
+    const [confirmDelete, setConfirmDelete] = useState(null);
+    const [deleting, setDeleting] = useState(false);
+    const { stdout } = useStdout();
+    const width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, (stdout?.columns ?? 80) - 6));
+    useOverlayKeys({ onClose: onCancel });
+    useEffect(() => {
+        gw.request('session.list', { limit: 200 })
+            .then(raw => {
+            const r = asRpcResult(raw);
+            if (!r) {
+                setErr('invalid response: session.list');
+                setLoading(false);
+                return;
+            }
+            setItems(r.sessions ?? []);
+            setErr('');
+            setLoading(false);
+        })
+            .catch((e) => {
+            setErr(rpcErrorMessage(e));
+            setLoading(false);
+        });
+    }, [gw]);
+    const performDelete = (index) => {
+        const target = items[index];
+        if (!target || deleting) {
+            return;
+        }
+        setDeleting(true);
+        gw.request('session.delete', { session_id: target.id })
+            .then(raw => {
+            const r = asRpcResult(raw);
+            if (!r || r.deleted !== target.id) {
+                setErr('invalid response: session.delete');
+                setDeleting(false);
+                return;
+            }
+            setItems(prev => {
+                const next = prev.filter((_, i) => i !== index);
+                setSel(s => Math.max(0, Math.min(s, next.length - 1)));
+                return next;
+            });
+            setErr('');
+            setDeleting(false);
+        })
+            .catch((e) => {
+            setErr(rpcErrorMessage(e));
+            setDeleting(false);
+        });
+    };
+    useInput((ch, key) => {
+        if (deleting) {
+            return;
+        }
+        if (confirmDelete !== null) {
+            if (ch?.toLowerCase() === 'd') {
+                const idx = confirmDelete;
+                setConfirmDelete(null);
+                performDelete(idx);
+            }
+            else {
+                setConfirmDelete(null);
+            }
+            return;
+        }
+        if (key.upArrow && sel > 0) {
+            setSel(s => s - 1);
+        }
+        if (key.downArrow && sel < items.length - 1) {
+            setSel(s => s + 1);
+        }
+        if (key.return && items[sel]) {
+            onSelect(items[sel].id);
+            return;
+        }
+        if (ch?.toLowerCase() === 'd' && items[sel]) {
+            setConfirmDelete(sel);
+            return;
+        }
+        const n = parseInt(ch);
+        if (n >= 1 && n <= Math.min(9, items.length)) {
+            onSelect(items[n - 1].id);
+        }
+    });
+    if (loading) {
+        return _jsx(Text, { color: t.color.muted, children: "loading sessions\u2026" });
+    }
+    if (err && !items.length) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: t.color.label, children: ["error: ", err] }), _jsx(OverlayHint, { t: t, children: "Esc/q cancel" })] }));
+    }
+    if (!items.length) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: t.color.muted, children: "no previous sessions" }), _jsx(OverlayHint, { t: t, children: "Esc/q cancel" })] }));
+    }
+    const offset = windowOffset(items.length, sel, VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { bold: true, color: t.color.accent, children: "Resume Session" }), offset > 0 && _jsxs(Text, { color: t.color.muted, children: ["  \u2191 ", offset, " more"] }), items.slice(offset, offset + VISIBLE).map((s, vi) => {
+                const i = offset + vi;
+                const selected = sel === i;
+                const pendingDelete = confirmDelete === i;
+                return (_jsxs(Box, { children: [_jsx(Text, { bold: selected, color: selected ? t.color.accent : t.color.muted, inverse: selected, children: selected ? '▸ ' : '  ' }), _jsx(Box, { width: 30, children: _jsxs(Text, { bold: selected, color: selected ? t.color.accent : t.color.muted, inverse: selected, children: [String(i + 1).padStart(2), ". [", s.id, "]"] }) }), _jsx(Box, { width: 30, children: _jsxs(Text, { bold: selected, color: selected ? t.color.accent : t.color.muted, inverse: selected, children: ["(", s.message_count, " msgs, ", age(s.started_at), ", ", s.source || 'tui', ")"] }) }), _jsx(Text, { bold: selected, color: pendingDelete ? t.color.label : selected ? t.color.accent : t.color.muted, inverse: selected, wrap: "truncate-end", children: pendingDelete ? 'press d again to delete' : s.title || s.preview || '(untitled)' })] }, s.id));
+            }), offset + VISIBLE < items.length && _jsxs(Text, { color: t.color.muted, children: ["  \u2193 ", items.length - offset - VISIBLE, " more"] }), err && _jsxs(Text, { color: t.color.label, children: ["error: ", err] }), deleting ? (_jsx(OverlayHint, { t: t, children: "deleting\u2026" })) : (_jsx(OverlayHint, { t: t, children: "\u2191/\u2193 select \u00B7 Enter resume \u00B7 1-9 quick \u00B7 d delete \u00B7 Esc/q cancel" }))] }));
+}

package/dist/components/skillsHub.js

@@ -0,0 +1,165 @@
+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, useState } from 'react';
+import { rpcErrorMessage } from '../lib/rpc.js';
+import { OverlayHint, useOverlayKeys, windowItems, windowOffset } from './overlayControls.js';
+const VISIBLE = 12;
+const MIN_WIDTH = 40;
+const MAX_WIDTH = 90;
+export function SkillsHub({ gw, onClose, t }) {
+    const [skillsByCat, setSkillsByCat] = useState({});
+    const [selectedCat, setSelectedCat] = useState('');
+    const [catIdx, setCatIdx] = useState(0);
+    const [skillIdx, setSkillIdx] = useState(0);
+    const [stage, setStage] = useState('category');
+    const [info, setInfo] = useState(null);
+    const [installing, setInstalling] = useState(false);
+    const [err, setErr] = useState('');
+    const [loading, setLoading] = useState(true);
+    const { stdout } = useStdout();
+    const width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, (stdout?.columns ?? 80) - 6));
+    useEffect(() => {
+        gw.request('skills.manage', { action: 'list' })
+            .then(r => {
+            setSkillsByCat(r?.skills ?? {});
+            setErr('');
+            setLoading(false);
+        })
+            .catch((e) => {
+            setErr(rpcErrorMessage(e));
+            setLoading(false);
+        });
+    }, [gw]);
+    const cats = Object.keys(skillsByCat).sort();
+    const skills = selectedCat ? (skillsByCat[selectedCat] ?? []) : [];
+    const skillName = skills[skillIdx] ?? '';
+    const back = () => {
+        if (stage === 'actions') {
+            setStage('skill');
+            setInfo(null);
+            setErr('');
+            return;
+        }
+        if (stage === 'skill') {
+            setStage('category');
+            setSkillIdx(0);
+            return;
+        }
+        onClose();
+    };
+    useOverlayKeys({ disabled: installing, onBack: back, onClose });
+    const inspect = (name) => {
+        setInfo(null);
+        setErr('');
+        gw.request('skills.manage', { action: 'inspect', query: name })
+            .then(r => setInfo(r?.info ?? { name }))
+            .catch((e) => setErr(rpcErrorMessage(e)));
+    };
+    const install = (name) => {
+        setInstalling(true);
+        setErr('');
+        gw.request('skills.manage', { action: 'install', query: name })
+            .then(() => onClose())
+            .catch((e) => setErr(rpcErrorMessage(e)))
+            .finally(() => setInstalling(false));
+    };
+    useInput((ch, key) => {
+        if (installing) {
+            return;
+        }
+        if (stage === 'actions') {
+            if (key.return) {
+                setStage('skill');
+                setInfo(null);
+                setErr('');
+                return;
+            }
+            if (ch.toLowerCase() === 'x' && skillName) {
+                install(skillName);
+                return;
+            }
+            if (ch.toLowerCase() === 'i' && skillName) {
+                inspect(skillName);
+            }
+            return;
+        }
+        const count = stage === 'category' ? cats.length : skills.length;
+        const sel = stage === 'category' ? catIdx : skillIdx;
+        const setSel = stage === 'category' ? setCatIdx : setSkillIdx;
+        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 === 'category') {
+                const cat = cats[catIdx];
+                if (!cat) {
+                    return;
+                }
+                setSelectedCat(cat);
+                setSkillIdx(0);
+                setStage('skill');
+                return;
+            }
+            const name = skills[skillIdx];
+            if (name) {
+                setStage('actions');
+                inspect(name);
+            }
+            return;
+        }
+        const n = ch === '0' ? 10 : parseInt(ch, 10);
+        if (!Number.isNaN(n) && n >= 1 && n <= Math.min(10, count)) {
+            const next = windowOffset(count, sel, VISIBLE) + n - 1;
+            if (stage === 'category') {
+                const cat = cats[next];
+                if (cat) {
+                    setSelectedCat(cat);
+                    setCatIdx(next);
+                    setSkillIdx(0);
+                    setStage('skill');
+                }
+                return;
+            }
+            const name = skills[next];
+            if (name) {
+                setSkillIdx(next);
+                setStage('actions');
+                inspect(name);
+            }
+        }
+    });
+    if (loading) {
+        return _jsx(Text, { color: t.color.muted, children: "loading skills\u2026" });
+    }
+    if (err && stage === 'category') {
+        return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { color: t.color.label, children: ["error: ", err] }), _jsx(OverlayHint, { t: t, children: "Esc/q cancel" })] }));
+    }
+    if (!cats.length) {
+        return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { color: t.color.muted, children: "no skills available" }), _jsx(OverlayHint, { t: t, children: "Esc/q cancel" })] }));
+    }
+    if (stage === 'category') {
+        const rows = cats.map(c => `${c} · ${skillsByCat[c]?.length ?? 0} skills`);
+        const { items, offset } = windowItems(rows, catIdx, VISIBLE);
+        return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { bold: true, color: t.color.accent, children: "Skills Hub" }), _jsx(Text, { color: t.color.muted, children: "select a category" }), offset > 0 && _jsxs(Text, { color: t.color.muted, children: [" \u2191 ", offset, " more"] }), items.map((row, i) => {
+                    const idx = offset + i;
+                    return (_jsxs(Text, { bold: catIdx === idx, color: catIdx === idx ? t.color.accent : t.color.muted, inverse: catIdx === idx, wrap: "truncate-end", children: [catIdx === idx ? '▸ ' : '  ', i + 1, ". ", row] }, row));
+                }), offset + VISIBLE < rows.length && _jsxs(Text, { color: t.color.muted, children: [" \u2193 ", rows.length - offset - VISIBLE, " more"] }), _jsx(OverlayHint, { t: t, children: "\u2191/\u2193 select \u00B7 Enter open \u00B7 1-9,0 quick \u00B7 Esc/q cancel" })] }));
+    }
+    if (stage === 'skill') {
+        const { items, offset } = windowItems(skills, skillIdx, VISIBLE);
+        return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { bold: true, color: t.color.accent, children: selectedCat }), _jsxs(Text, { color: t.color.muted, children: [skills.length, " skill(s)"] }), !skills.length ? _jsx(Text, { color: t.color.muted, children: "no skills in this category" }) : null, offset > 0 && _jsxs(Text, { color: t.color.muted, children: [" \u2191 ", offset, " more"] }), items.map((row, i) => {
+                    const idx = offset + i;
+                    return (_jsxs(Text, { bold: skillIdx === idx, color: skillIdx === idx ? t.color.accent : t.color.muted, inverse: skillIdx === idx, wrap: "truncate-end", children: [skillIdx === idx ? '▸ ' : '  ', i + 1, ". ", row] }, row));
+                }), offset + VISIBLE < skills.length && (_jsxs(Text, { color: t.color.muted, children: [" \u2193 ", skills.length - offset - VISIBLE, " more"] })), _jsx(OverlayHint, { t: t, children: skills.length ? '↑/↓ select · Enter open · 1-9,0 quick · Esc back · q close' : 'Esc back · q close' })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Text, { bold: true, color: t.color.accent, children: info?.name ?? skillName }), _jsx(Text, { color: t.color.muted, children: info?.category ?? selectedCat }), info?.description ? _jsx(Text, { color: t.color.text, children: info.description }) : null, info?.path ? _jsxs(Text, { color: t.color.muted, children: ["path: ", info.path] }) : null, !info && !err ? _jsx(Text, { color: t.color.muted, children: "loading\u2026" }) : null, err ? _jsxs(Text, { color: t.color.label, children: ["error: ", err] }) : null, installing ? _jsx(Text, { color: t.color.accent, children: "installing\u2026" }) : null, _jsx(OverlayHint, { t: t, children: "i reinspect \u00B7 x reinstall \u00B7 Enter/Esc back \u00B7 q close" })] }));
+}

package/dist/components/streamingAssistant.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { useStore } from '@nanostores/react';
+import { memo } from 'react';
+import { toggleTodoCollapsed, useTurnSelector } from '../app/turnStore.js';
+import { $uiState } from '../app/uiStore.js';
+import { appendToolShelfMessage } from '../lib/liveProgress.js';
+import { MessageLine } from './messageLine.js';
+import { TodoPanel } from './todoPanel.js';
+const groupedSegments = (segments) => segments.reduce((acc, msg) => appendToolShelfMessage(acc, msg), []);
+export const StreamingAssistant = memo(function StreamingAssistant({ cols, compact, detailsMode, detailsModeCommandOverride, progress, sections }) {
+    const ui = useStore($uiState);
+    const streamSegments = useTurnSelector(state => state.streamSegments);
+    const streamPendingTools = useTurnSelector(state => state.streamPendingTools);
+    const streaming = useTurnSelector(state => state.streaming);
+    const activeTools = useTurnSelector(state => state.tools);
+    const showStreamingArea = Boolean(streaming);
+    if (!progress.showProgressArea && !showStreamingArea && !activeTools.length) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [groupedSegments(streamSegments).map((msg, i) => (_jsx(MessageLine, { cols: cols, compact: compact, detailsMode: detailsMode, detailsModeCommandOverride: detailsModeCommandOverride, msg: msg, sections: sections, t: ui.theme }, `seg:${i}`))), !!activeTools.length && (_jsx(MessageLine, { cols: cols, compact: compact, detailsMode: detailsMode, detailsModeCommandOverride: detailsModeCommandOverride, msg: { kind: 'trail', role: 'system', text: '' }, sections: sections, t: ui.theme, tools: activeTools })), showStreamingArea && (_jsx(MessageLine, { cols: cols, compact: compact, detailsMode: detailsMode, detailsModeCommandOverride: detailsModeCommandOverride, isStreaming: true, msg: {
+                    role: 'assistant',
+                    text: streaming,
+                    ...(streamPendingTools.length && { tools: streamPendingTools })
+                }, sections: sections, t: ui.theme })), !showStreamingArea && !!streamPendingTools.length && (_jsx(MessageLine, { cols: cols, compact: compact, detailsMode: detailsMode, detailsModeCommandOverride: detailsModeCommandOverride, msg: { kind: 'trail', role: 'system', text: '', tools: streamPendingTools }, sections: sections, t: ui.theme }))] }));
+});
+export const LiveTodoPanel = memo(function LiveTodoPanel() {
+    const ui = useStore($uiState);
+    const todos = useTurnSelector(state => state.todos);
+    const collapsed = useTurnSelector(state => state.todoCollapsed);
+    return _jsx(TodoPanel, { collapsed: collapsed, onToggle: toggleTodoCollapsed, t: ui.theme, todos: todos });
+});