cvc-tui 0.4.4 → 0.4.7

package/dist/components/appChrome.js

@@ -0,0 +1,252 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } 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 { useStore } from '@nanostores/react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import unicodeSpinners from 'unicode-animations';
+import { $delegationState } from '../app/delegationStore.js';
+import { useTurnSelector } from '../app/turnStore.js';
+import { $uiState } from '../app/uiStore.js';
+import { FACES } from '../content/faces.js';
+import { VERBS } from '../content/verbs.js';
+import { fmtDuration } from '../domain/messages.js';
+import { stickyPromptFromViewport } from '../domain/viewport.js';
+import { buildSubagentTree, treeTotals, widthByDepth } from '../lib/subagentTree.js';
+import { fmtK } from '../lib/text.js';
+import { useScrollbarSnapshot, useViewportSnapshot } from '../lib/viewportStore.js';
+const FACE_TICK_MS = 2500;
+const HEART_COLORS = ['#ff5fa2', '#ff4d6d'];
+// Keep verb segment width stable so status-bar content to the right doesn't
+// jitter when the ticker rotates between short/long verbs.
+export const VERB_PAD_LEN = VERBS.reduce((max, v) => Math.max(max, v.length), 0) + 1; // + ellipsis
+export const padVerb = (verb) => `${verb}…`.padEnd(VERB_PAD_LEN, ' ');
+// Compact alternates for the `emoji` and `ascii` indicator styles.
+// Each entry is a fixed-width (display-width) glyph.
+const EMOJI_FRAMES = ['⚕ ', '🌀', '🤔', '✨', '🍵', '🔮'];
+const ASCII_FRAMES = ['|', '/', '-', '\\'];
+// Faster tick for spinner-style indicators — they read as motion only
+// at frame rates closer to their authored interval.
+const SPINNER_TICK_MS = 100;
+const renderIndicator = (style, tick) => {
+    if (style === 'kaomoji') {
+        return { frame: FACES[tick % FACES.length] ?? '', intervalMs: FACE_TICK_MS, showVerb: true };
+    }
+    if (style === 'emoji') {
+        return {
+            frame: EMOJI_FRAMES[tick % EMOJI_FRAMES.length] ?? '⚕ ',
+            intervalMs: SPINNER_TICK_MS * 6,
+            showVerb: true
+        };
+    }
+    if (style === 'ascii') {
+        return {
+            frame: ASCII_FRAMES[tick % ASCII_FRAMES.length] ?? '|',
+            intervalMs: SPINNER_TICK_MS,
+            showVerb: true
+        };
+    }
+    // 'unicode' — braille spinner (fixed 1-col).  Authored interval is
+    // ~80ms; honour it but bound below at a safe minimum so React
+    // re-renders stay reasonable.  This style is for users who want
+    // the cleanest possible status, so no verb rotation either.
+    const spinner = unicodeSpinners.braille;
+    const frame = spinner.frames[tick % spinner.frames.length] ?? '⠋';
+    return { frame, intervalMs: Math.max(SPINNER_TICK_MS, spinner.interval), showVerb: false };
+};
+function FaceTicker({ color, startedAt }) {
+    const ui = useStore($uiState);
+    const style = ui.indicatorStyle;
+    const [tick, setTick] = useState(() => Math.floor(Math.random() * 1000));
+    const [verbTick, setVerbTick] = useState(() => Math.floor(Math.random() * VERBS.length));
+    const [now, setNow] = useState(() => Date.now());
+    // Pre-compute cadence + verb-visibility for the active style so an
+    // `/indicator` switch re-arms the interval (and skips the verb timer
+    // for verb-less styles like `unicode`) without leaving the previous
+    // timer dangling.
+    const { intervalMs, showVerb } = renderIndicator(style, 0);
+    useEffect(() => {
+        const glyph = setInterval(() => setTick(n => n + 1), intervalMs);
+        const clock = setInterval(() => setNow(Date.now()), 1000);
+        // Verb timer is gated on `showVerb` — `unicode` style hides the verb
+        // entirely, so cycling `verbTick` would be an avoidable re-render.
+        const verb = showVerb ? setInterval(() => setVerbTick(n => n + 1), FACE_TICK_MS) : null;
+        return () => {
+            clearInterval(glyph);
+            clearInterval(clock);
+            if (verb !== null) {
+                clearInterval(verb);
+            }
+        };
+    }, [intervalMs, showVerb]);
+    const { frame } = renderIndicator(style, tick);
+    const verb = VERBS[verbTick % VERBS.length] ?? '';
+    const verbSegment = showVerb ? ` ${padVerb(verb)}` : '';
+    // Leading space keeps a gap between the frame and the duration when the
+    // verb segment is hidden (e.g. `unicode` spinner style).  When the verb
+    // IS shown, its trailing padding already provides the gap, so the extra
+    // space is harmless.
+    const durationSegment = startedAt ? ` · ${fmtDuration(now - startedAt)}` : '';
+    return (_jsxs(Text, { color: color, children: [frame, verbSegment, durationSegment] }));
+}
+function ctxBarColor(pct, t) {
+    if (pct == null) {
+        return t.color.muted;
+    }
+    if (pct >= 95) {
+        return t.color.statusCritical;
+    }
+    if (pct > 80) {
+        return t.color.statusBad;
+    }
+    if (pct >= 50) {
+        return t.color.statusWarn;
+    }
+    return t.color.statusGood;
+}
+function ctxBar(pct, w = 10) {
+    const p = Math.max(0, Math.min(100, pct ?? 0));
+    const filled = Math.round((p / 100) * w);
+    return '█'.repeat(filled) + '░'.repeat(w - filled);
+}
+function SpawnHud({ t }) {
+    // Tight HUD that only appears when the session is actually fanning out.
+    // Colour escalates to warn/error as depth or concurrency approaches the cap.
+    const delegation = useStore($delegationState);
+    const subagents = useTurnSelector(state => state.subagents);
+    const tree = useMemo(() => buildSubagentTree(subagents), [subagents]);
+    const totals = useMemo(() => treeTotals(tree), [tree]);
+    if (!totals.descendantCount && !delegation.paused) {
+        return null;
+    }
+    const maxDepth = delegation.maxSpawnDepth;
+    const maxConc = delegation.maxConcurrentChildren;
+    const depth = Math.max(0, totals.maxDepthFromHere);
+    const active = totals.activeCount;
+    // `max_concurrent_children` is a per-parent cap, not a global one.
+    // `activeCount` sums every running agent across the tree and would
+    // over-warn for multi-orchestrator runs.  The widest level of the tree
+    // is a closer proxy to "most concurrent spawns that could be hitting a
+    // single parent's slot budget".
+    const widestLevel = widthByDepth(tree).reduce((a, b) => Math.max(a, b), 0);
+    const depthRatio = maxDepth ? depth / maxDepth : 0;
+    const concRatio = maxConc ? widestLevel / maxConc : 0;
+    const ratio = Math.max(depthRatio, concRatio);
+    const color = delegation.paused || ratio >= 1 ? t.color.error : ratio >= 0.66 ? t.color.warn : t.color.muted;
+    const pieces = [];
+    if (delegation.paused) {
+        pieces.push('⏸ paused');
+    }
+    if (totals.descendantCount > 0) {
+        const depthLabel = maxDepth ? `${depth}/${maxDepth}` : `${depth}`;
+        pieces.push(`d${depthLabel}`);
+        if (active > 0) {
+            // Label pairs the widest-level count (drives concRatio above) with
+            // the total active count for context.  `W/cap` triggers the warn,
+            // `+N` is everything else currently running across the tree.
+            const extra = Math.max(0, active - widestLevel);
+            const widthLabel = maxConc ? `${widestLevel}/${maxConc}` : `${widestLevel}`;
+            const suffix = extra > 0 ? `+${extra}` : '';
+            pieces.push(`⚡${widthLabel}${suffix}`);
+        }
+    }
+    const atCap = depthRatio >= 1 || concRatio >= 1;
+    return (_jsxs(Text, { color: color, children: [atCap ? ' │ ⚠ ' : ' │ ', pieces.join(' ')] }));
+}
+function SessionDuration({ startedAt }) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        setNow(Date.now());
+        const id = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(id);
+    }, [startedAt]);
+    return fmtDuration(now - startedAt);
+}
+const effortLabel = (effort) => {
+    const value = String(effort ?? '')
+        .trim()
+        .toLowerCase();
+    return value && value !== 'medium' && value !== 'normal' && value !== 'default' ? value : '';
+};
+const shortModelLabel = (model) => model
+    .split('/')
+    .pop()
+    .replace(/^claude[-_]/, '')
+    .replace(/^anthropic[-_]/, '')
+    .replace(/[-_]/g, ' ')
+    .replace(/\b(\d+)\s+(\d+)\b/g, '$1.$2')
+    .trim();
+const modelLabel = (model, effort, fast) => [shortModelLabel(model), effortLabel(effort), fast ? 'fast' : ''].filter(Boolean).join(' ');
+export function GoodVibesHeart({ tick, t }) {
+    const [active, setActive] = useState(false);
+    const [color, setColor] = useState(t.color.accent);
+    useEffect(() => {
+        if (tick <= 0) {
+            return;
+        }
+        const palette = [t.color.error, t.color.warn, t.color.accent];
+        setColor(palette[Math.floor(Math.random() * palette.length)]);
+        setActive(true);
+        const id = setTimeout(() => setActive(false), 650);
+        return () => clearTimeout(id);
+    }, [t.color.accent, tick]);
+    if (!active) {
+        return null;
+    }
+    return _jsx(Text, { color: color, children: "\u2665" });
+}
+export function StatusRule({ cwdLabel, cols, busy, status, statusColor, model, modelFast, modelReasoningEffort, usage, bgCount, sessionStartedAt, showCost, turnStartedAt, voiceLabel, t }) {
+    const pct = usage.context_percent;
+    const barColor = ctxBarColor(pct, t);
+    const ctxLabel = usage.context_max
+        ? `${fmtK(usage.context_used ?? 0)}/${fmtK(usage.context_max)}`
+        : usage.total > 0
+            ? `${fmtK(usage.total)} tok`
+            : '';
+    const bar = usage.context_max ? ctxBar(pct) : '';
+    const leftWidth = Math.max(12, cols - cwdLabel.length - 3);
+    return (_jsxs(Box, { height: 1, children: [_jsx(Box, { flexShrink: 1, width: leftWidth, children: _jsxs(Text, { color: t.color.border, wrap: "truncate-end", children: ['─ ', busy ? (_jsx(FaceTicker, { color: statusColor, startedAt: turnStartedAt })) : (_jsx(Text, { color: statusColor, children: status })), _jsxs(Text, { color: t.color.muted, children: [" \u2502 ", modelLabel(model, modelReasoningEffort, modelFast)] }), ctxLabel ? _jsxs(Text, { color: t.color.muted, children: [" \u2502 ", ctxLabel] }) : null, bar ? (_jsxs(Text, { color: t.color.muted, children: [' │ ', _jsxs(Text, { color: barColor, children: ["[", bar, "]"] }), " ", _jsx(Text, { color: barColor, children: pct != null ? `${pct}%` : '' })] })) : null, sessionStartedAt ? (_jsxs(Text, { color: t.color.muted, children: [' │ ', _jsx(SessionDuration, { startedAt: sessionStartedAt })] })) : null, typeof usage.compressions === 'number' && usage.compressions > 0 ? (_jsxs(Text, { color: t.color.muted, children: [' │ ', _jsxs(Text, { color: usage.compressions >= 10 ? t.color.error : usage.compressions >= 5 ? t.color.warn : t.color.muted, children: ["cmp ", usage.compressions] })] })) : null, _jsx(SpawnHud, { t: t }), voiceLabel ? (_jsxs(Text, { color: voiceLabel.startsWith('●') ? t.color.error : voiceLabel.startsWith('◉') ? t.color.warn : t.color.muted, children: [' │ ', voiceLabel] })) : null, bgCount > 0 ? _jsxs(Text, { color: t.color.muted, children: [" \u2502 ", bgCount, " bg"] }) : null, showCost && typeof usage.cost_usd === 'number' ? (_jsxs(Text, { color: t.color.muted, children: [" \u2502 $", usage.cost_usd.toFixed(4)] })) : null] }) }), _jsx(Text, { color: t.color.border, children: " \u2500 " }), _jsx(Text, { color: t.color.label, children: cwdLabel })] }));
+}
+export function FloatBox({ children, color }) {
+    return (_jsx(Box, { alignSelf: "flex-start", borderColor: color, borderStyle: "double", flexDirection: "column", marginTop: 1, opaque: true, paddingX: 1, children: children }));
+}
+export function StickyPromptTracker({ messages, offsets, scrollRef, onChange }) {
+    const { atBottom, bottom, top } = useViewportSnapshot(scrollRef);
+    const text = stickyPromptFromViewport(messages, offsets, top, bottom, atBottom);
+    useEffect(() => onChange(text), [onChange, text]);
+    return null;
+}
+export function TranscriptScrollbar({ scrollRef, t }) {
+    const [hover, setHover] = useState(false);
+    const [grab, setGrab] = useState(null);
+    const grabRef = useRef(null);
+    const { scrollHeight: total, top: pos, viewportHeight: vp } = useScrollbarSnapshot(scrollRef);
+    if (!vp) {
+        return _jsx(Box, { width: 1 });
+    }
+    const s = scrollRef.current;
+    const scrollable = total > vp;
+    const thumb = scrollable ? Math.max(1, Math.round((vp * vp) / total)) : vp;
+    const travel = Math.max(1, vp - thumb);
+    const thumbTop = scrollable ? Math.round((pos / Math.max(1, total - vp)) * travel) : 0;
+    const thumbColor = grab !== null ? t.color.primary : hover ? t.color.accent : t.color.border;
+    const trackColor = hover ? t.color.border : t.color.muted;
+    const jump = (row, offset) => {
+        if (!s || !scrollable) {
+            return;
+        }
+        s.scrollTo(Math.round((Math.max(0, Math.min(travel, row - offset)) / travel) * Math.max(0, total - vp)));
+    };
+    return (_jsx(Box, { flexDirection: "column", onMouseDown: (e) => {
+            const row = Math.max(0, Math.min(vp - 1, e.localRow ?? 0));
+            const off = row >= thumbTop && row < thumbTop + thumb ? row - thumbTop : Math.floor(thumb / 2);
+            grabRef.current = off;
+            setGrab(off);
+            jump(row, off);
+        }, onMouseDrag: (e) => jump(Math.max(0, Math.min(vp - 1, e.localRow ?? 0)), grabRef.current ?? Math.floor(thumb / 2)), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onMouseUp: () => {
+            grabRef.current = null;
+            setGrab(null);
+        }, width: 1, children: !scrollable ? (_jsxs(Text, { color: trackColor, dim: true, children: [' \n'.repeat(Math.max(0, vp - 1)), ' '] })) : (_jsxs(_Fragment, { children: [thumbTop > 0 ? (_jsx(Text, { color: trackColor, dim: !hover, children: `${'│\n'.repeat(Math.max(0, thumbTop - 1))}${thumbTop > 0 ? '│' : ''}` })) : null, thumb > 0 ? (_jsx(Text, { color: thumbColor, children: `${'┃\n'.repeat(Math.max(0, thumb - 1))}${thumb > 0 ? '┃' : ''}` })) : null, vp - thumbTop - thumb > 0 ? (_jsx(Text, { color: trackColor, dim: !hover, children: `${'│\n'.repeat(Math.max(0, vp - thumbTop - thumb - 1))}${vp - thumbTop - thumb > 0 ? '│' : ''}` })) : null] })) }));
+}

package/dist/components/appLayout.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { AlternateScreen, Box, NoSelect, ScrollBox, Text } from '../vendor/cvc-ink/index.js';
+import { useStore } from '@nanostores/react';
+import { Fragment, memo, useMemo, useRef } from 'react';
+import { useGateway } from '../app/gatewayContext.js';
+import { $isBlocked, $overlayState, patchOverlayState } from '../app/overlayStore.js';
+import { $uiState } from '../app/uiStore.js';
+import { INLINE_MODE, SHOW_FPS } from '../config/env.js';
+import { FULL_RENDER_TAIL_ITEMS } from '../config/limits.js';
+import { PLACEHOLDER } from '../content/placeholders.js';
+import { COMPOSER_PROMPT_GAP_WIDTH, composerPromptWidth, inputVisualHeight, stableComposerColumns } from '../lib/inputMetrics.js';
+import { PerfPane } from '../lib/perfPane.js';
+import { AgentsOverlay } from './agentsOverlay.js';
+import { GoodVibesHeart, StatusRule, StickyPromptTracker, TranscriptScrollbar } from './appChrome.js';
+import { FloatingOverlays, PromptZone } from './appOverlays.js';
+import { Banner, Panel, SessionPanel } from './branding.js';
+import { buildLocalSessionInfo } from '../lib/localSessionInfo.js';
+import { FpsOverlay } from './fpsOverlay.js';
+import { HelpHint } from './helpHint.js';
+import { MessageLine } from './messageLine.js';
+import { QueuedMessages } from './queuedMessages.js';
+import { LiveTodoPanel, StreamingAssistant } from './streamingAssistant.js';
+import { TextInput } from './textInput.js';
+const PromptPrefix = memo(function PromptPrefix({ bold = false, color, promptText, width }) {
+    const glyphWidth = Math.max(1, width - COMPOSER_PROMPT_GAP_WIDTH);
+    return (_jsxs(Box, { width: width, children: [_jsx(Box, { width: glyphWidth, children: _jsx(Text, { bold: bold, color: color, children: promptText }) }), _jsx(Box, { width: COMPOSER_PROMPT_GAP_WIDTH })] }));
+});
+const TranscriptPane = memo(function TranscriptPane({ actions, composer, progress, transcript }) {
+    const ui = useStore($uiState);
+    // LiveTodoPanel rides as a child of the latest user-message row so it
+    // visually belongs to the prompt and follows it during scroll. -1 when
+    // empty → row.index === -1 is always false → no render.
+    const lastUserIdx = useMemo(() => {
+        const items = transcript.historyItems;
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (items[i].role === 'user') {
+                return i;
+            }
+        }
+        return -1;
+    }, [transcript.historyItems]);
+    // Index of the first user-role message; every later user message gets a
+    // small dash above it so multi-turn transcripts visually segment by
+    // turn. -1 when no user message has been sent yet → no separator ever
+    // renders.
+    const firstUserIdx = useMemo(() => transcript.historyItems.findIndex(m => m.role === 'user'), [transcript.historyItems]);
+    return (_jsxs(_Fragment, { children: [_jsx(ScrollBox, { flexDirection: "column", flexGrow: 1, flexShrink: 1, onClick: (e) => {
+                    if (e.cellIsBlank) {
+                        actions.clearSelection();
+                    }
+                }, ref: transcript.scrollRef, stickyScroll: true, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [transcript.virtualHistory.topSpacer > 0 ? _jsx(Box, { height: transcript.virtualHistory.topSpacer }) : null, transcript.virtualRows.slice(transcript.virtualHistory.start, transcript.virtualHistory.end).map(row => (_jsxs(Box, { flexDirection: "column", ref: transcript.virtualHistory.measureRef(row.key), children: [row.msg.role === 'user' && firstUserIdx >= 0 && row.index > firstUserIdx && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: ui.theme.color.border, children: "\u2500\u2500\u2500" }) })), row.msg.kind === 'intro' ? (_jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsx(Banner, { t: ui.theme }), _jsx(SessionPanel, { info: row.msg.info ?? buildLocalSessionInfo(), sid: ui.sid, t: ui.theme })] })) : row.msg.kind === 'panel' && row.msg.panelData ? (_jsx(Panel, { sections: row.msg.panelData.sections, t: ui.theme, title: row.msg.panelData.title })) : (_jsx(MessageLine, { cols: composer.cols, compact: ui.compact, detailsMode: ui.detailsMode, detailsModeCommandOverride: ui.detailsModeCommandOverride, limitHistoryRender: row.index < transcript.historyItems.length - FULL_RENDER_TAIL_ITEMS, msg: row.msg, sections: ui.sections, t: ui.theme })), row.index === lastUserIdx && _jsx(LiveTodoPanel, {})] }, row.key))), transcript.virtualHistory.bottomSpacer > 0 ? _jsx(Box, { height: transcript.virtualHistory.bottomSpacer }) : null, _jsx(StreamingAssistant, { cols: composer.cols, compact: ui.compact, detailsMode: ui.detailsMode, detailsModeCommandOverride: ui.detailsModeCommandOverride, progress: progress, sections: ui.sections })] }) }), _jsx(NoSelect, { flexShrink: 0, marginLeft: 1, children: _jsx(TranscriptScrollbar, { scrollRef: transcript.scrollRef, t: ui.theme }) }), _jsx(StickyPromptTracker, { messages: transcript.historyItems, offsets: transcript.virtualHistory.offsets, onChange: actions.setStickyPrompt, scrollRef: transcript.scrollRef })] }));
+});
+const ComposerPane = memo(function ComposerPane({ actions, composer, status }) {
+    const ui = useStore($uiState);
+    const isBlocked = useStore($isBlocked);
+    const sh = (composer.inputBuf[0] ?? composer.input).startsWith('!');
+    const promptText = sh ? '$' : ui.theme.brand.prompt;
+    const promptWidth = composerPromptWidth(promptText);
+    const promptBlank = ' '.repeat(promptWidth);
+    const inputColumns = stableComposerColumns(composer.cols, promptWidth);
+    const inputHeight = inputVisualHeight(composer.input, inputColumns);
+    const inputMouseRef = useRef(null);
+    const captureInputDrag = (e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.stopImmediatePropagation?.();
+        inputMouseRef.current?.startAtBeginning();
+    };
+    // Drag origin matches the input box's top-left, so localRow / localCol
+    // map directly into TextInput coords (after backing out the prompt cell).
+    const dragFromPromptRow = (e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.stopImmediatePropagation?.();
+        inputMouseRef.current?.dragAt(e.localRow ?? 0, (e.localCol ?? 0) - promptWidth);
+    };
+    // Spacer rows live on a different vertical origin; only the column is
+    // parent-aligned with the input. Force row=0 so vertical drags can't
+    // jump the cursor to the wrong wrapped line.
+    const dragFromSpacer = (e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.stopImmediatePropagation?.();
+        inputMouseRef.current?.dragAt(0, (e.localCol ?? 0) - promptWidth);
+    };
+    const endInputDrag = () => inputMouseRef.current?.end();
+    return (_jsxs(NoSelect, { flexDirection: "column", flexShrink: 0, fromLeftEdge: true, onClick: (e) => {
+            if (e.cellIsBlank) {
+                actions.clearSelection();
+            }
+        }, paddingX: 1, children: [_jsx(QueuedMessages, { cols: composer.cols, queued: composer.queuedDisplay, queueEditIdx: composer.queueEditIdx, t: ui.theme }), ui.bgTasks.size > 0 && (_jsxs(Text, { color: ui.theme.color.muted, children: [ui.bgTasks.size, " background ", ui.bgTasks.size === 1 ? 'task' : 'tasks', " running"] })), status.showStickyPrompt ? (_jsxs(Text, { color: ui.theme.color.muted, wrap: "truncate-end", children: [_jsx(Text, { color: ui.theme.color.label, children: "\u21B3 " }), status.stickyPrompt] })) : (_jsx(Box, { height: 1, onMouseDown: captureInputDrag, onMouseDrag: dragFromSpacer, onMouseUp: endInputDrag })), _jsx(StatusRulePane, { at: "top", composer: composer, status: status }), _jsxs(Box, { flexDirection: "column", marginTop: ui.statusBar === 'top' ? 0 : 1, position: "relative", children: [_jsx(FloatingOverlays, { cols: composer.cols, compIdx: composer.compIdx, completions: composer.completions, onModelSelect: actions.onModelSelect, onPickerSelect: actions.resumeById, pagerPageSize: composer.pagerPageSize }), composer.input === '?' && !composer.inputBuf.length && _jsx(HelpHint, { t: ui.theme }), !isBlocked && (_jsxs(_Fragment, { children: [composer.inputBuf.map((line, i) => (_jsxs(Box, { children: [_jsx(Box, { width: promptWidth, children: i === 0 ? (_jsx(PromptPrefix, { color: ui.theme.color.muted, promptText: promptText, width: promptWidth })) : (_jsx(Text, { color: ui.theme.color.muted, children: promptBlank })) }), _jsx(Text, { color: ui.theme.color.text, children: line || ' ' })] }, i))), _jsxs(Box, { onMouseDown: captureInputDrag, onMouseDrag: dragFromPromptRow, onMouseUp: endInputDrag, position: "relative", width: Math.max(1, composer.cols - 2), children: [_jsx(Box, { width: promptWidth, children: sh ? (_jsx(PromptPrefix, { color: ui.theme.color.shellDollar, promptText: promptText, width: promptWidth })) : composer.inputBuf.length ? (_jsx(Text, { color: ui.theme.color.prompt, children: promptBlank })) : (_jsx(PromptPrefix, { bold: true, color: ui.theme.color.prompt, promptText: promptText, width: promptWidth })) }), _jsx(Box, { flexGrow: 0, flexShrink: 0, height: inputHeight, width: inputColumns, children: _jsx(TextInput, { columns: inputColumns, mouseApiRef: inputMouseRef, onChange: composer.updateInput, onPaste: composer.handleTextPaste, onSubmit: composer.submit, placeholder: composer.empty ? PLACEHOLDER : ui.busy ? 'Ctrl+C to interrupt…' : '', value: composer.input, voiceRecordKey: composer.voiceRecordKey }) }), _jsx(Box, { position: "absolute", right: 0, children: _jsx(GoodVibesHeart, { t: ui.theme, tick: status.goodVibesTick }) })] })] }))] }), !composer.empty && !ui.sid && _jsxs(Text, { color: ui.theme.color.muted, children: ["\u2695 ", ui.status] }), _jsx(StatusRulePane, { at: "bottom", composer: composer, status: status })] }));
+});
+const AgentsOverlayPane = memo(function AgentsOverlayPane() {
+    const { gw } = useGateway();
+    const ui = useStore($uiState);
+    const overlay = useStore($overlayState);
+    return (_jsx(AgentsOverlay, { gw: gw, initialHistoryIndex: overlay.agentsInitialHistoryIndex, onClose: () => patchOverlayState({ agents: false, agentsInitialHistoryIndex: 0 }), t: ui.theme }));
+});
+const StatusRulePane = memo(function StatusRulePane({ at, composer, status }) {
+    const ui = useStore($uiState);
+    if (ui.statusBar !== at) {
+        return null;
+    }
+    return (_jsx(Box, { marginTop: at === 'top' ? 1 : 0, children: _jsx(StatusRule, { bgCount: ui.bgTasks.size, busy: ui.busy, cols: composer.cols, cwdLabel: status.cwdLabel, model: ui.info?.model ?? '', modelFast: ui.info?.fast || ui.info?.service_tier === 'priority', modelReasoningEffort: ui.info?.reasoning_effort, sessionStartedAt: status.sessionStartedAt, showCost: ui.showCost, status: ui.status, statusColor: status.statusColor, t: ui.theme, turnStartedAt: status.turnStartedAt, usage: ui.usage, voiceLabel: status.voiceLabel }) }));
+});
+export const AppLayout = memo(function AppLayout({ actions, composer, mouseTracking, progress, status, transcript }) {
+    const overlay = useStore($overlayState);
+    const ui = useStore($uiState);
+    // Inline mode skips AlternateScreen so the host terminal's native
+    // scrollback captures rows scrolled off the top; composer + progress
+    // stay anchored via normal flex-column flow.
+    const Shell = INLINE_MODE ? Fragment : AlternateScreen;
+    const shellProps = INLINE_MODE ? {} : { mouseTracking };
+    return (_jsx(Shell, { ...shellProps, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { flexDirection: "row", flexGrow: 1, children: overlay.agents ? (_jsx(PerfPane, { id: "agents", children: _jsx(AgentsOverlayPane, {}) })) : (_jsx(PerfPane, { id: "transcript", children: _jsx(TranscriptPane, { actions: actions, composer: composer, progress: progress, transcript: transcript }) })) }), !overlay.agents && (_jsxs(_Fragment, { children: [_jsx(PerfPane, { id: "prompt", children: _jsx(PromptZone, { cols: composer.cols, onApprovalChoice: actions.answerApproval, onClarifyAnswer: actions.answerClarify, onSecretSubmit: actions.answerSecret, onSudoSubmit: actions.answerSudo }) }), _jsx(PerfPane, { id: "composer", children: _jsx(ComposerPane, { actions: actions, composer: composer, status: status }) }), SHOW_FPS && (_jsx(Box, { flexShrink: 0, justifyContent: "flex-end", paddingRight: 1, children: _jsx(FpsOverlay, { t: ui.theme }) }))] }))] }) }));
+});

package/dist/components/appOverlays.js

@@ -0,0 +1,65 @@
+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 { useStore } from '@nanostores/react';
+import { useGateway } from '../app/gatewayContext.js';
+import { $overlayState, patchOverlayState } from '../app/overlayStore.js';
+import { $uiSessionId, $uiTheme } from '../app/uiStore.js';
+import { FloatBox } from './appChrome.js';
+import { MaskedPrompt } from './maskedPrompt.js';
+import { ModelPicker } from './modelPicker.js';
+import { OverlayHint } from './overlayControls.js';
+import { ApprovalPrompt, ClarifyPrompt, ConfirmPrompt } from './prompts.js';
+import { SessionPicker } from './sessionPicker.js';
+import { SkillsHub } from './skillsHub.js';
+const COMPLETION_WINDOW = 16;
+export function PromptZone({ cols, onApprovalChoice, onClarifyAnswer, onSecretSubmit, onSudoSubmit }) {
+    const overlay = useStore($overlayState);
+    const theme = useStore($uiTheme);
+    if (overlay.approval) {
+        return (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingX: 1, paddingY: 1, children: _jsx(ApprovalPrompt, { onChoice: onApprovalChoice, req: overlay.approval, t: theme }) }));
+    }
+    if (overlay.confirm) {
+        const req = overlay.confirm;
+        const onConfirm = () => {
+            patchOverlayState({ confirm: null });
+            req.onConfirm();
+        };
+        const onCancel = () => patchOverlayState({ confirm: null });
+        return (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingX: 1, paddingY: 1, children: _jsx(ConfirmPrompt, { onCancel: onCancel, onConfirm: onConfirm, req: req, t: theme }) }));
+    }
+    if (overlay.clarify) {
+        return (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingX: 1, paddingY: 1, children: _jsx(ClarifyPrompt, { cols: cols, onAnswer: onClarifyAnswer, onCancel: () => onClarifyAnswer(''), req: overlay.clarify, t: theme }) }));
+    }
+    if (overlay.sudo) {
+        return (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingX: 1, paddingY: 1, children: _jsx(MaskedPrompt, { cols: cols, icon: "\uD83D\uDD10", label: "sudo password required", onSubmit: onSudoSubmit, t: theme }) }));
+    }
+    if (overlay.secret) {
+        return (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingX: 1, paddingY: 1, children: _jsx(MaskedPrompt, { cols: cols, icon: "\uD83D\uDD11", label: overlay.secret.prompt, onSubmit: onSecretSubmit, sub: `for ${overlay.secret.envVar}`, t: theme }) }));
+    }
+    return null;
+}
+export function FloatingOverlays({ cols, compIdx, completions, onModelSelect, onPickerSelect, pagerPageSize }) {
+    const { gw } = useGateway();
+    const overlay = useStore($overlayState);
+    const sid = useStore($uiSessionId);
+    const theme = useStore($uiTheme);
+    const hasAny = overlay.modelPicker || overlay.pager || overlay.picker || overlay.skillsHub || completions.length;
+    if (!hasAny) {
+        return null;
+    }
+    // Fixed viewport centered on compIdx — previously the slice end was
+    // compIdx + 8 so the dropdown grew from 8 rows to 16 as the user scrolled
+    // down, bouncing the height on every keystroke.
+    const viewportSize = Math.min(COMPLETION_WINDOW, completions.length);
+    const start = Math.max(0, Math.min(compIdx - Math.floor(COMPLETION_WINDOW / 2), completions.length - viewportSize));
+    return (_jsxs(Box, { alignItems: "flex-start", bottom: "100%", flexDirection: "column", left: 0, position: "absolute", right: 0, children: [overlay.picker && (_jsx(FloatBox, { color: theme.color.border, children: _jsx(SessionPicker, { gw: gw, onCancel: () => patchOverlayState({ picker: false }), onSelect: onPickerSelect, t: theme }) })), overlay.modelPicker && (_jsx(FloatBox, { color: theme.color.border, children: _jsx(ModelPicker, { gw: gw, onCancel: () => patchOverlayState({ modelPicker: false }), onSelect: onModelSelect, sessionId: sid, t: theme }) })), overlay.skillsHub && (_jsx(FloatBox, { color: theme.color.border, children: _jsx(SkillsHub, { gw: gw, onClose: () => patchOverlayState({ skillsHub: false }), t: theme }) })), overlay.pager && (_jsx(FloatBox, { color: theme.color.border, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [overlay.pager.title && (_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.color.primary, children: overlay.pager.title }) })), overlay.pager.lines.slice(overlay.pager.offset, overlay.pager.offset + pagerPageSize).map((line, i) => (_jsx(Text, { children: line }, i))), _jsx(Box, { marginTop: 1, children: _jsx(OverlayHint, { t: theme, children: overlay.pager.offset + pagerPageSize < overlay.pager.lines.length
+                                    ? `↑↓/jk line · Enter/Space/PgDn page · b/PgUp back · g/G top/bottom · Esc/q close (${Math.min(overlay.pager.offset + pagerPageSize, overlay.pager.lines.length)}/${overlay.pager.lines.length})`
+                                    : `end · ↑↓/jk · b/PgUp back · g top · Esc/q close (${overlay.pager.lines.length} lines)` }) })] }) })), !!completions.length && (_jsx(FloatBox, { color: theme.color.primary, children: _jsx(Box, { flexDirection: "column", width: Math.max(28, cols - 6), children: completions.slice(start, start + viewportSize).map((item, i) => {
+                        const active = start + i === compIdx;
+                        return (_jsxs(Box, { backgroundColor: active ? theme.color.completionCurrentBg : theme.color.completionBg, flexDirection: "row", width: "100%", children: [_jsxs(Text, { bold: true, color: theme.color.label, children: [' ', item.display] }), item.meta ? (_jsxs(Text, { backgroundColor: active ? theme.color.completionMetaCurrentBg : theme.color.completionMetaBg, color: theme.color.muted, children: [' ', item.meta] })) : null] }, `${start + i}:${item.text}:${item.display}:${item.meta ?? ''}`));
+                    }) }) }))] }));
+}

package/dist/components/branding.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, useStdout } from '../vendor/cvc-ink/index.js';
+import { useEffect, useState } from 'react';
+import unicodeSpinners from 'unicode-animations';
+import { artWidth, caduceus, CADUCEUS_WIDTH, logo, LOGO_WIDTH } from '../banner.js';
+import { flat } from '../lib/text.js';
+const LOADER_TICK_MS = 120;
+function InlineLoader({ label, t }) {
+    const [tick, setTick] = useState(0);
+    const spinner = unicodeSpinners.braille;
+    const frame = spinner.frames[tick % spinner.frames.length] ?? '⠋';
+    useEffect(() => {
+        const id = setInterval(() => setTick(n => n + 1), Math.max(LOADER_TICK_MS, spinner.interval));
+        return () => clearInterval(id);
+    }, [spinner.interval]);
+    return (_jsxs(Text, { color: t.color.muted, wrap: "truncate", children: [_jsx(Text, { color: t.color.accent, children: frame }), " ", label] }));
+}
+export function ArtLines({ lines }) {
+    return (_jsx(_Fragment, { children: lines.map(([c, text], i) => (_jsx(Text, { color: c, children: text }, i))) }));
+}
+export function Banner({ t }) {
+    const cols = useStdout().stdout?.columns ?? 80;
+    const logoLines = logo(t.color, t.bannerLogo || undefined);
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [cols >= (t.bannerLogo ? artWidth(logoLines) : LOGO_WIDTH) ? (_jsx(ArtLines, { lines: logoLines })) : (_jsx(Text, { bold: true, color: t.color.primary, children: `${t.brand.icon} CVC` })), _jsx(Text, { color: t.color.muted, children: `${t.brand.icon} Cognitive Version Control · git for your AI's mind` })] }));
+}
+// ── Collapsible helpers ──────────────────────────────────────────────
+function CollapseToggle({ count, open, suffix, t, title, onToggle }) {
+    return (_jsxs(Box, { onClick: onToggle, children: [_jsx(Text, { color: t.color.accent, children: open ? '▾ ' : '▸ ' }), _jsx(Text, { bold: true, color: t.color.accent, children: title }), typeof count === 'number' ? (_jsxs(Text, { color: t.color.muted, children: [" (", count, ")"] })) : null, suffix ? (_jsxs(Text, { color: t.color.muted, children: [" ", suffix] })) : null] }));
+}
+// ── SessionPanel ─────────────────────────────────────────────────────
+const SKILLS_MAX = 8;
+const TOOLSETS_MAX = 8;
+export function SessionPanel({ info, sid, t }) {
+    const cols = useStdout().stdout?.columns ?? 100;
+    const heroLines = caduceus(t.color, t.bannerHero || undefined);
+    const leftW = Math.min((artWidth(heroLines) || CADUCEUS_WIDTH) + 4, Math.floor(cols * 0.4));
+    const wide = cols >= 90 && leftW + 40 < cols;
+    const w = Math.max(20, wide ? cols - leftW - 14 : cols - 12);
+    const lineBudget = Math.max(12, w - 2);
+    const strip = (s) => (s.endsWith('_tools') ? s.slice(0, -6) : s);
+    // ── Local collapse state for each section ──
+    const [toolsOpen, setToolsOpen] = useState(true);
+    const [skillsOpen, setSkillsOpen] = useState(false);
+    const [systemOpen, setSystemOpen] = useState(false);
+    const [mcpOpen, setMcpOpen] = useState(false);
+    const truncLine = (pfx, items) => {
+        let line = '';
+        let shown = 0;
+        for (const item of [...items].sort()) {
+            const next = line ? `${line}, ${item}` : item;
+            if (pfx.length + next.length > lineBudget) {
+                return line ? `${line}, …+${items.length - shown}` : `${item}, …`;
+            }
+            line = next;
+            shown++;
+        }
+        return line;
+    };
+    // ── Collapsible skills section ──
+    const skillEntries = Object.entries(info.skills).sort();
+    const skillsTotal = flat(info.skills).length;
+    const skillsCatCount = skillEntries.length;
+    const skillsBody = () => {
+        if (info.lazy && skillEntries.length === 0) {
+            return _jsx(InlineLoader, { label: "scanning skills", t: t });
+        }
+        const shown = skillEntries.slice(0, SKILLS_MAX);
+        const overflow = skillEntries.length - SKILLS_MAX;
+        return (_jsxs(_Fragment, { children: [shown.map(([k, vs]) => (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: t.color.muted, children: [strip(k), ": "] }), _jsx(Text, { color: t.color.text, children: truncLine(strip(k) + ': ', vs) })] }, k))), overflow > 0 && (_jsxs(Text, { color: t.color.muted, children: ["(and ", overflow, " more categories\u2026)"] }))] }));
+    };
+    // ── Collapsible tools section ──
+    const toolEntries = Object.entries(info.tools).sort();
+    const toolsTotal = flat(info.tools).length;
+    const toolsBody = () => {
+        const shown = toolEntries.slice(0, TOOLSETS_MAX);
+        const overflow = toolEntries.length - TOOLSETS_MAX;
+        return (_jsxs(_Fragment, { children: [shown.map(([k, vs]) => (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: t.color.muted, children: [strip(k), ": "] }), _jsx(Text, { color: t.color.text, children: truncLine(strip(k) + ': ', vs) })] }, k))), overflow > 0 && (_jsxs(Text, { color: t.color.muted, children: ["(and ", overflow, " more toolsets\u2026)"] }))] }));
+    };
+    // ── Collapsible MCP section ──
+    const mcpBody = () => (_jsx(_Fragment, { children: (info.mcp_servers ?? []).map(s => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: t.color.muted, children: `  ${s.name} ` }), _jsx(Text, { color: t.color.muted, children: `[${s.transport}]` }), _jsx(Text, { color: t.color.muted, children: ": " }), s.connected ? (_jsxs(Text, { color: t.color.text, children: [s.tools, " tool", s.tools === 1 ? '' : 's'] })) : (_jsx(Text, { color: t.color.error, children: "failed" }))] }, s.name))) }));
+    // ── System prompt body ──
+    const sysPromptLen = (info.system_prompt ?? '').length;
+    const systemBody = () => {
+        if (sysPromptLen === 0) {
+            return _jsx(Text, { color: t.color.muted, children: "No system prompt loaded." });
+        }
+        return (_jsx(Text, { color: t.color.muted, children: info.system_prompt }));
+    };
+    return (_jsxs(Box, { borderColor: t.color.border, borderStyle: "round", marginBottom: 1, paddingX: 2, paddingY: 1, children: [wide && (_jsxs(Box, { flexDirection: "column", marginRight: 2, width: leftW, children: [_jsx(ArtLines, { lines: heroLines }), _jsx(Text, {}), _jsxs(Text, { color: t.color.accent, children: [info.model.split('/').pop(), _jsx(Text, { color: t.color.muted, children: " \u00B7 Nous Research" })] }), _jsx(Text, { color: t.color.muted, wrap: "truncate-end", children: info.cwd || process.cwd() }), sid && (_jsxs(Text, { children: [_jsx(Text, { color: t.color.sessionLabel, children: "Session: " }), _jsx(Text, { color: t.color.sessionBorder, children: sid })] }))] })), _jsxs(Box, { flexDirection: "column", width: w, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: t.color.primary, children: [t.brand.name, info.version ? ` v${info.version}` : '', info.release_date ? ` (${info.release_date})` : ''] }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(CollapseToggle, { onToggle: () => setToolsOpen(v => !v), open: toolsOpen, t: t, title: "Available Tools" }), toolsOpen && toolsBody()] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(CollapseToggle, { count: skillsTotal, onToggle: () => setSkillsOpen(v => !v), open: skillsOpen, suffix: skillsCatCount > 0 ? `in ${skillsCatCount} categor${skillsCatCount === 1 ? 'y' : 'ies'}` : undefined, t: t, title: "Available Skills" }), skillsOpen && skillsBody()] }), sysPromptLen > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(CollapseToggle, { onToggle: () => setSystemOpen(v => !v), open: systemOpen, suffix: `— ${sysPromptLen.toLocaleString()} chars`, t: t, title: "System Prompt" }), systemOpen && systemBody()] })), info.mcp_servers && info.mcp_servers.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(CollapseToggle, { count: info.mcp_servers.length, onToggle: () => setMcpOpen(v => !v), open: mcpOpen, suffix: "connected", t: t, title: "MCP Servers" }), mcpOpen && mcpBody()] })), _jsx(Text, {}), _jsxs(Text, { color: t.color.text, children: [toolsTotal, " tools", ' · ', skillsTotal, " skills", info.mcp_servers?.length ? ` · ${info.mcp_servers.length} MCP` : '', ' · ', _jsx(Text, { color: t.color.muted, children: "/help for commands" })] }), typeof info.update_behind === 'number' && info.update_behind > 0 && (_jsxs(Text, { bold: true, color: t.color.warn, children: ["! ", info.update_behind, " ", info.update_behind === 1 ? 'commit' : 'commits', " behind", _jsxs(Text, { bold: false, color: t.color.warn, dimColor: true, children: [' ', "- run", ' '] }), _jsx(Text, { bold: true, color: t.color.warn, children: info.update_command || 'hermes update' }), _jsxs(Text, { bold: false, color: t.color.warn, dimColor: true, children: [' ', "to update"] })] }))] })] }));
+}
+export function Panel({ sections, t, title }) {
+    return (_jsxs(Box, { borderColor: t.color.border, borderStyle: "round", flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsx(Text, { bold: true, color: t.color.primary, children: title }) }), sections.map((sec, si) => (_jsxs(Box, { flexDirection: "column", marginTop: si > 0 ? 1 : 0, children: [sec.title && (_jsx(Text, { bold: true, color: t.color.accent, children: sec.title })), sec.rows?.map(([k, v], ri) => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: t.color.muted, children: k.padEnd(20) }), _jsx(Text, { color: t.color.text, children: v })] }, ri))), sec.items?.map((item, ii) => (_jsx(Text, { color: t.color.text, wrap: "truncate", children: item }, ii))), sec.text && _jsx(Text, { color: t.color.muted, children: sec.text })] }, si)))] }));
+}

package/dist/components/fpsOverlay.js

@@ -0,0 +1,22 @@
+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.
+// FPS counter overlay (CVC_TUI_FPS=1). Zero-cost when disabled.
+import { Text } from '../vendor/cvc-ink/index.js';
+import { useStore } from '@nanostores/react';
+import { SHOW_FPS } from '../config/env.js';
+import { $fpsState } from '../lib/fpsStore.js';
+const fpsColor = (fps, t) => fps >= 50 ? t.color.statusGood : fps >= 30 ? t.color.statusWarn : t.color.error;
+export function FpsOverlay({ t }) {
+    if (!SHOW_FPS) {
+        return null;
+    }
+    return _jsx(FpsOverlayInner, { t: t });
+}
+function FpsOverlayInner({ t }) {
+    const { fps, lastDurationMs, totalFrames } = useStore($fpsState);
+    // Zero-pad widths so digit churn doesn't jitter the corner.
+    return (_jsxs(Text, { color: fpsColor(fps, t), children: [fps.toFixed(1).padStart(5), "fps \u00B7 ", lastDurationMs.toFixed(1).padStart(5), "ms \u00B7 #", totalFrames] }));
+}

package/dist/components/helpHint.js

@@ -0,0 +1,21 @@
+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 { HOTKEYS } from '../content/hotkeys.js';
+const COMMON_COMMANDS = [
+    ['/help', 'full list of commands + hotkeys'],
+    ['/clear', 'start a new session'],
+    ['/resume', 'resume a prior session'],
+    ['/details', 'control transcript detail level'],
+    ['/copy', 'copy selection or last assistant message'],
+    ['/quit', 'exit hermes']
+];
+const HOTKEY_PREVIEW = HOTKEYS.slice(0, 8);
+export function HelpHint({ t }) {
+    const labelW = Math.max(...COMMON_COMMANDS.map(([k]) => k.length), ...HOTKEY_PREVIEW.map(([k]) => k.length));
+    const pad = (s) => s + ' '.repeat(Math.max(0, labelW - s.length + 2));
+    return (_jsx(Box, { alignItems: "flex-start", bottom: "100%", flexDirection: "column", left: 0, position: "absolute", right: 0, children: _jsxs(Box, { alignSelf: "flex-start", borderColor: t.color.primary, borderStyle: "round", flexDirection: "column", marginBottom: 1, opaque: true, paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: t.color.primary, children: "? quick help" }), _jsx(Text, { color: t.color.muted, children: '  ·  type /help for the full panel  ·  backspace to dismiss' })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, color: t.color.accent, children: "Common commands" }) }), COMMON_COMMANDS.map(([k, v]) => (_jsxs(Text, { children: [_jsx(Text, { color: t.color.label, children: pad(k) }), _jsx(Text, { color: t.color.muted, children: v })] }, k))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, color: t.color.accent, children: "Hotkeys" }) }), HOTKEY_PREVIEW.map(([k, v]) => (_jsxs(Text, { children: [_jsx(Text, { color: t.color.label, children: pad(k) }), _jsx(Text, { color: t.color.muted, children: v })] }, k)))] }) }));
+}