byterover-cli 1.4.0 → 1.6.0

package/dist/tui/components/inline-prompts/inline-select.js

@@ -29,6 +29,7 @@ export function InlineSelect({ choices, maxVisibleItems = 7, message, onSelect,
     });
     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: colors.text, children: [_jsx(Text, { color: colors.secondary, children: "? " }), message] }), _jsx(Box, { flexDirection: "column", children: visibleChoices.map((choice, index) => {
                     const actualIndex = windowStart + index;
-                    return (_jsxs(Text, { color: actualIndex === selectedIndex ? colors.primary : colors.text, children: [actualIndex === selectedIndex ? '❯ ' : '  ', choice.name] }, choice.name));
-                }) }), selectedChoice?.description && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.secondary, children: selectedChoice.description }) }))] }));
+                    const isSelected = actualIndex === selectedIndex;
+                    return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.text, children: [isSelected ? '❯ ' : '  ', choice.name] }), choice.description && (_jsxs(Text, { color: colors.dimText, children: [" \u00B7 ", choice.description] }))] }, choice.name));
+                }) })] }));
 }

package/dist/tui/components/model-dialog.d.ts

@@ -0,0 +1,63 @@
+/**
+ * ModelDialog Component
+ *
+ * Interactive dialog for selecting LLM models.
+ * Features:
+ * - Grouped display: Favorites, Recent, All models
+ * - Tags: [Current], [Free], pricing info
+ * - Fuzzy search filtering
+ * - Favorite toggle with 'f' key
+ * - Keyboard navigation
+ */
+import React from 'react';
+/**
+ * Model information for display in the dialog.
+ */
+export interface ModelItem {
+    /** Context window size */
+    contextLength?: number;
+    /** Optional description */
+    description?: string;
+    /** Model ID (e.g., 'anthropic/claude-3.5-sonnet') */
+    id: string;
+    /** Whether this is the current active model */
+    isCurrent: boolean;
+    /** Whether this model is a favorite */
+    isFavorite: boolean;
+    /** Whether this model is free */
+    isFree?: boolean;
+    /** Whether this model was recently used */
+    isRecent: boolean;
+    /** Display name */
+    name: string;
+    /** Pricing per million tokens */
+    pricing?: {
+        inputPerM: number;
+        outputPerM: number;
+    };
+    /** Provider name (e.g., 'Anthropic', 'OpenAI') */
+    provider?: string;
+}
+/**
+ * Props for ModelDialog.
+ */
+export interface ModelDialogProps {
+    /** Currently active model ID */
+    activeModelId?: string;
+    /** Whether the dialog is active for keyboard input */
+    isActive?: boolean;
+    /** Array of models to display */
+    models: ModelItem[];
+    /** Callback when dialog is cancelled */
+    onCancel: () => void;
+    /** Callback when a model is selected */
+    onSelect: (model: ModelItem) => void;
+    /** Callback when favorite is toggled */
+    onToggleFavorite?: (model: ModelItem) => void;
+    /** Provider name for title */
+    providerName?: string;
+}
+/**
+ * ModelDialog displays a list of models for selection.
+ */
+export declare const ModelDialog: React.FC<ModelDialogProps>;

package/dist/tui/components/model-dialog.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ModelDialog Component
+ *
+ * Interactive dialog for selecting LLM models.
+ * Features:
+ * - Grouped display: Favorites, Recent, All models
+ * - Tags: [Current], [Free], pricing info
+ * - Fuzzy search filtering
+ * - Favorite toggle with 'f' key
+ * - Keyboard navigation
+ */
+import { Box, Text } from 'ink';
+import { useMemo } from 'react';
+import { useTheme } from '../contexts/theme-context.js';
+import { SelectableList } from './selectable-list.js';
+/**
+ * Format pricing for display.
+ */
+function formatPricing(pricing) {
+    if (!pricing)
+        return '';
+    const avgPrice = (pricing.inputPerM + pricing.outputPerM) / 2;
+    if (avgPrice < 0.01)
+        return '$<0.01/M';
+    return `$${avgPrice.toFixed(2)}/M`;
+}
+/**
+ * Format context length for display.
+ */
+function formatContextLength(contextLength) {
+    if (!contextLength)
+        return '';
+    if (contextLength >= 1_000_000) {
+        return `${(contextLength / 1_000_000).toFixed(1)}M ctx`;
+    }
+    if (contextLength >= 1000) {
+        return `${Math.round(contextLength / 1000)}K ctx`;
+    }
+    return `${contextLength} ctx`;
+}
+/**
+ * Get group name for a model item.
+ */
+function getModelGroup(model) {
+    if (model.isFavorite)
+        return 'Favorites';
+    if (model.isRecent)
+        return 'Recent';
+    return model.provider ?? 'Models';
+}
+/**
+ * ModelDialog displays a list of models for selection.
+ */
+export const ModelDialog = ({ activeModelId, isActive = true, models, onCancel, onSelect, onToggleFavorite, providerName = 'Provider', }) => {
+    const { theme: { colors } } = useTheme();
+    // Sort models: favorites first, then recent, then by provider
+    const sortedModels = useMemo(() => [...models].sort((a, b) => {
+        // Favorites first
+        if (a.isFavorite && !b.isFavorite)
+            return -1;
+        if (!a.isFavorite && b.isFavorite)
+            return 1;
+        // Then recent
+        if (a.isRecent && !b.isRecent)
+            return -1;
+        if (!a.isRecent && b.isRecent)
+            return 1;
+        // Then by provider
+        const providerCompare = (a.provider ?? '').localeCompare(b.provider ?? '');
+        if (providerCompare !== 0)
+            return providerCompare;
+        // Then by name
+        return a.name.localeCompare(b.name);
+    }), [models]);
+    // Find current model for the list
+    const currentModel = sortedModels.find((m) => m.id === activeModelId);
+    // Custom keybinds for favorite toggle
+    const keybinds = onToggleFavorite
+        ? [
+            {
+                action: (item) => onToggleFavorite(item),
+                key: 'f',
+                label: 'Favorite',
+            },
+        ]
+        : [];
+    return (_jsx(SelectableList, { currentItem: currentModel, filterKeys: (item) => [item.id, item.name, item.description ?? '', item.provider ?? ''], getCurrentKey: (item) => item.id, groupBy: getModelGroup, isActive: isActive, items: sortedModels, keybinds: keybinds, keyExtractor: (item) => item.id, onCancel: onCancel, onSelect: (item) => onSelect(item), renderItem: (item, isActive, isCurrent) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { backgroundColor: isActive ? colors.dimText : undefined, color: isActive ? colors.text : colors.text, children: item.name.padEnd(30) }), _jsxs(Box, { gap: 1, children: [isCurrent && (_jsx(Text, { color: colors.primary, children: "(Current)" })), item.isFree && !isCurrent && (_jsx(Text, { color: colors.primary, children: "[Free]" })), item.isFavorite && !isCurrent && (_jsx(Text, { color: colors.warning, children: "\u2605" }))] }), _jsxs(Box, { gap: 1, children: [item.pricing && !item.isFree && (_jsx(Text, { color: colors.dimText, children: formatPricing(item.pricing) })), item.contextLength && (_jsx(Text, { color: colors.dimText, children: formatContextLength(item.contextLength) }))] })] })), searchPlaceholder: "Search models...", title: `Select Model - ${providerName}` }));
+};

package/dist/tui/components/onboarding/onboarding-flow.js

@@ -77,7 +77,10 @@ export const OnboardingFlow = ({ availableHeight, onInitComplete }) => {
     const renderCurateContent = () => {
         // Show execution progress if curate is running
         if (curateLog) {
-            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { heights: { ...messageItem, maxContentLines: maxOutputLines }, log: curateLog }), hasCurated && !curateAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'curate', onEnter: () => setCurateAcknowledged(true) }))] }));
+            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { heights: {
+                            ...messageItem,
+                            maxContentLines: maxOutputLines
+                        }, isExpand: false, isSelected: true, log: curateLog, shouldShowExpand: false }), hasCurated && !curateAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'curate', onEnter: () => setCurateAcknowledged(true) }))] }));
         }
         // Show copyable prompt when waiting
         return (_jsxs(Box, { backgroundColor: colors.bg2, flexDirection: "column", padding: 1, width: "100%", children: [_jsx(Text, { color: colors.text, wrap: "wrap", children: "Try saying this to your AI Agent:" }), _jsx(Box, { marginBottom: 1, paddingLeft: 4, children: _jsx(Text, { color: colors.primary, wrap: "wrap", children: CURATE_PROMPT }) }), _jsxs(Text, { children: [_jsx(CopyablePrompt, { buttonLabel: "[ctrl+y] to copy", isActive: mode === 'activity' && currentStep === 'curate', textToCopy: CURATE_PROMPT }), _jsx(Text, { color: colors.dimText, children: " | [Esc] to skip onboarding" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.dimText, children: "Waiting for curate..." }) })] }));
@@ -86,7 +89,10 @@ export const OnboardingFlow = ({ availableHeight, onInitComplete }) => {
     const renderQueryContent = () => {
         // Show execution progress if query is running
         if (queryLog) {
-            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { heights: { ...messageItem, maxContentLines: maxOutputLines }, log: queryLog }), hasQueried && !queryAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'query', onEnter: () => setQueryAcknowledged(true) }))] }));
+            return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(LogItem, { heights: {
+                            ...messageItem,
+                            maxContentLines: maxOutputLines
+                        }, isExpand: false, isSelected: true, log: queryLog, shouldShowExpand: false }), hasQueried && !queryAcknowledged && (_jsx(EnterPrompt, { action: "continue", active: mode === 'activity' && currentStep === 'query', onEnter: () => setQueryAcknowledged(true) }))] }));
         }
         // Show copyable prompt when waiting
         return (_jsxs(Box, { backgroundColor: colors.bg2, flexDirection: "column", padding: 1, width: "100%", children: [_jsx(Text, { color: colors.text, wrap: "wrap", children: "You can now query your memory:" }), _jsx(Box, { marginBottom: 1, paddingLeft: 4, children: _jsx(Text, { color: colors.primary, wrap: "wrap", children: QUERY_PROMPT }) }), _jsxs(Text, { children: [_jsx(CopyablePrompt, { buttonLabel: "[ctrl+y] to copy", isActive: mode === 'activity' && currentStep === 'query', textToCopy: QUERY_PROMPT }), _jsx(Text, { color: colors.dimText, children: " | [Esc] to skip onboarding" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.dimText, children: "Waiting for query..." }) })] }));

package/dist/tui/components/provider-dialog.d.ts

@@ -0,0 +1,27 @@
+/**
+ * ProviderDialog Component
+ *
+ * Interactive dialog for selecting and connecting to LLM providers.
+ * Shows available providers grouped by category with connection status.
+ */
+import React from 'react';
+import { type ProviderDefinition } from '../../core/domain/entities/provider-registry.js';
+/**
+ * Props for ProviderDialog.
+ */
+export interface ProviderDialogProps {
+    /** Currently active provider ID */
+    activeProviderId: string;
+    /** Set of connected provider IDs */
+    connectedProviders: Set<string>;
+    /** Whether the dialog is active for keyboard input */
+    isActive?: boolean;
+    /** Callback when dialog is cancelled */
+    onCancel: () => void;
+    /** Callback when a provider is selected */
+    onSelect: (provider: ProviderDefinition) => void;
+}
+/**
+ * ProviderDialog displays a list of available providers for selection.
+ */
+export declare const ProviderDialog: React.FC<ProviderDialogProps>;

package/dist/tui/components/provider-dialog.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ProviderDialog Component
+ *
+ * Interactive dialog for selecting and connecting to LLM providers.
+ * Shows available providers grouped by category with connection status.
+ */
+import { Box, Text } from 'ink';
+import { useMemo } from 'react';
+import { getProvidersGroupedByCategory, } from '../../core/domain/entities/provider-registry.js';
+import { useTheme } from '../contexts/theme-context.js';
+import { SelectableList } from './selectable-list.js';
+/**
+ * ProviderDialog displays a list of available providers for selection.
+ */
+export const ProviderDialog = ({ activeProviderId, connectedProviders, isActive = true, onCancel, onSelect, }) => {
+    const { theme: { colors } } = useTheme();
+    // Get providers with connection status
+    const providerItems = useMemo(() => {
+        const { other, popular } = getProvidersGroupedByCategory();
+        const allProviders = [...popular, ...other];
+        return allProviders.map((provider) => ({
+            ...provider,
+            isConnected: connectedProviders.has(provider.id),
+            isCurrent: provider.id === activeProviderId,
+        }));
+    }, [activeProviderId, connectedProviders]);
+    // Find current provider for the list
+    const currentProvider = providerItems.find((p) => p.isCurrent);
+    return (_jsx(SelectableList, { currentItem: currentProvider, filterKeys: (item) => [item.id, item.name, item.description], getCurrentKey: (item) => item.id, groupBy: (item) => (item.category === 'popular' ? 'Popular' : 'Other'), isActive: isActive, items: providerItems, keyExtractor: (item) => item.id, onCancel: onCancel, onSelect: (item) => onSelect(item), renderItem: (item, isActive, isCurrent) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { backgroundColor: isActive ? colors.dimText : undefined, color: isActive ? colors.text : colors.text, children: item.name.padEnd(15) }), _jsx(Text, { color: colors.dimText, children: item.description }), item.isConnected && !isCurrent && (_jsx(Text, { color: colors.primary, children: "[Connected]" })), isCurrent && (_jsx(Text, { color: colors.primary, children: "(Current)" }))] })), searchPlaceholder: "Search providers...", title: "Connect a Provider" }));
+};

package/dist/tui/components/reasoning-text.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Reasoning Text Component
+ *
+ * Displays LLM thinking/reasoning content with distinct visual styling.
+ * Following OpenCode's pattern: muted colors, left border, "Thinking:" prefix.
+ */
+import React from 'react';
+interface ReasoningTextProps {
+    /** The accumulated reasoning content to display */
+    content: string;
+    /** Whether reasoning is still in progress */
+    isStreaming: boolean;
+    /** Maximum lines to display (0 = unlimited) */
+    maxLines?: number;
+}
+/**
+ * Component that displays thinking/reasoning content with visual distinction.
+ *
+ * Features:
+ * - Left border to visually separate from regular content
+ * - Muted/dim colors to indicate background reasoning
+ * - "Thinking:" prefix for clarity
+ * - Animated spinner during streaming
+ */
+export declare const ReasoningText: React.FC<ReasoningTextProps>;
+export {};

package/dist/tui/components/reasoning-text.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reasoning Text Component
+ *
+ * Displays LLM thinking/reasoning content with distinct visual styling.
+ * Following OpenCode's pattern: muted colors, left border, "Thinking:" prefix.
+ */
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { memo } from 'react';
+import { useTheme } from '../hooks/index.js';
+/**
+ * Memoized spinner component to prevent unnecessary re-renders
+ */
+const ThinkingSpinner = memo(() => {
+    const { theme: { colors }, } = useTheme();
+    return (_jsx(Text, { color: colors.dimText, children: _jsx(Spinner, { type: "dots" }) }));
+});
+ThinkingSpinner.displayName = 'ThinkingSpinner';
+/**
+ * Component that displays thinking/reasoning content with visual distinction.
+ *
+ * Features:
+ * - Left border to visually separate from regular content
+ * - Muted/dim colors to indicate background reasoning
+ * - "Thinking:" prefix for clarity
+ * - Animated spinner during streaming
+ */
+export const ReasoningText = memo(({ content, isStreaming, maxLines = 0 }) => {
+    const { theme: { colors }, } = useTheme();
+    // Truncate content if maxLines is specified
+    const displayContent = maxLines > 0 ? truncateToLines(content, maxLines) : content;
+    // Don't render anything if no content
+    if (!content) {
+        return isStreaming ? (_jsxs(Box, { children: [_jsx(ThinkingSpinner, {}), _jsx(Text, { color: colors.dimText, children: " Thinking..." })] })) : null;
+    }
+    return (_jsxs(Box, { borderColor: colors.border, borderLeft: true, borderStyle: "single", flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: colors.dimText, italic: true, children: " Thinking:" }), isStreaming && (_jsxs(Text, { color: colors.dimText, children: [' ', _jsx(ThinkingSpinner, {})] }))] }), _jsx(Text, { color: colors.dimText, wrap: "wrap", children: displayContent })] }));
+});
+ReasoningText.displayName = 'ReasoningText';
+/**
+ * Truncate content to specified number of lines
+ */
+function truncateToLines(content, maxLines) {
+    const lines = content.split('\n');
+    if (lines.length <= maxLines) {
+        return content;
+    }
+    return lines.slice(0, maxLines).join('\n') + '\n...';
+}

package/dist/tui/components/selectable-list.d.ts

@@ -0,0 +1,54 @@
+/**
+ * SelectableList Component
+ *
+ * An interactive list with selection, search, grouping, and keyboard navigation.
+ * Inspired by OpenCode's List component patterns.
+ *
+ * Features:
+ * - Keyboard navigation (↑/↓, j/k, Enter, Esc)
+ * - Fuzzy search filtering
+ * - Grouping with headers
+ * - Current item indicator (●)
+ * - Customizable item rendering
+ */
+import React from 'react';
+/**
+ * Props for SelectableList component.
+ */
+export interface SelectableListProps<T> {
+    /** Available height in lines */
+    availableHeight?: number;
+    /** Current/selected item (shows ● indicator) */
+    currentItem?: T;
+    /** Keys to use for filtering (searched with fuzzy match) */
+    filterKeys: (item: T) => string[];
+    /** Function to get item key for comparison with currentItem */
+    getCurrentKey?: (item: T) => string;
+    /** Optional grouping function */
+    groupBy?: (item: T) => string;
+    /** Initial search value */
+    initialSearch?: string;
+    /** Whether keyboard input is active */
+    isActive?: boolean;
+    /** Array of items to display */
+    items: T[];
+    /** Custom keybinds */
+    keybinds?: Array<{
+        action: (item: T) => void;
+        key: string;
+        label: string;
+    }>;
+    /** Function to get unique key for each item */
+    keyExtractor: (item: T) => string;
+    /** Callback when selection is cancelled (Esc) */
+    onCancel?: () => void;
+    /** Callback when an item is selected */
+    onSelect: (item: T) => void;
+    /** Function to render each item */
+    renderItem: (item: T, isActive: boolean, isCurrent: boolean) => React.ReactNode;
+    /** Placeholder for search input */
+    searchPlaceholder?: string;
+    /** Title for the list */
+    title?: string;
+}
+export declare function SelectableList<T>({ availableHeight, currentItem, filterKeys, getCurrentKey, groupBy, initialSearch, isActive, items, keybinds, keyExtractor, onCancel, onSelect, renderItem, searchPlaceholder, title, }: SelectableListProps<T>): React.ReactElement;

package/dist/tui/components/selectable-list.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SelectableList Component
+ *
+ * An interactive list with selection, search, grouping, and keyboard navigation.
+ * Inspired by OpenCode's List component patterns.
+ *
+ * Features:
+ * - Keyboard navigation (↑/↓, j/k, Enter, Esc)
+ * - Fuzzy search filtering
+ * - Grouping with headers
+ * - Current item indicator (●)
+ * - Customizable item rendering
+ */
+import { Box, Text, useInput } from 'ink';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTheme } from '../contexts/theme-context.js';
+/**
+ * Simple fuzzy match function.
+ * Returns true if all characters in the search string appear in order in the target.
+ */
+function fuzzyMatch(search, target) {
+    const searchLower = search.toLowerCase();
+    const targetLower = target.toLowerCase();
+    let searchIndex = 0;
+    for (let i = 0; i < targetLower.length && searchIndex < searchLower.length; i++) {
+        if (targetLower[i] === searchLower[searchIndex]) {
+            searchIndex++;
+        }
+    }
+    return searchIndex === searchLower.length;
+}
+const MAX_VISIBLE_ITEMS = 10;
+export function SelectableList({ availableHeight = MAX_VISIBLE_ITEMS, currentItem, filterKeys, getCurrentKey, groupBy, initialSearch = '', isActive = true, items, keybinds = [], keyExtractor, onCancel, onSelect, renderItem, searchPlaceholder = 'Search...', title, }) {
+    const { theme: { colors } } = useTheme();
+    const [searchValue, setSearchValue] = useState(initialSearch);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Filter items based on search
+    const filteredItems = useMemo(() => {
+        if (!searchValue.trim()) {
+            return items;
+        }
+        return items.filter((item) => {
+            const searchableStrings = filterKeys(item);
+            return searchableStrings.some((str) => fuzzyMatch(searchValue, str));
+        });
+    }, [items, searchValue, filterKeys]);
+    // Group items if groupBy is provided
+    const groupedItems = useMemo(() => {
+        if (!groupBy) {
+            return [{ group: '', items: filteredItems }];
+        }
+        const groups = new Map();
+        for (const item of filteredItems) {
+            const group = groupBy(item);
+            if (!groups.has(group)) {
+                groups.set(group, []);
+            }
+            groups.get(group).push(item);
+        }
+        return [...groups.entries()].map(([group, groupItems]) => ({
+            group,
+            items: groupItems,
+        }));
+    }, [filteredItems, groupBy]);
+    // Flat list of items for navigation
+    const flatItems = useMemo(() => groupedItems.flatMap((g) => g.items), [groupedItems]);
+    // Reset selection when items change
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [searchValue]);
+    // Clamp selected index
+    useEffect(() => {
+        if (selectedIndex >= flatItems.length) {
+            setSelectedIndex(Math.max(0, flatItems.length - 1));
+        }
+    }, [flatItems.length, selectedIndex]);
+    const moveUp = useCallback(() => {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+    }, []);
+    const moveDown = useCallback(() => {
+        setSelectedIndex((prev) => Math.min(flatItems.length - 1, prev + 1));
+    }, [flatItems.length]);
+    const selectCurrent = useCallback(() => {
+        if (flatItems.length > 0 && selectedIndex < flatItems.length) {
+            onSelect(flatItems[selectedIndex]);
+        }
+    }, [flatItems, selectedIndex, onSelect]);
+    const handleNavigation = useCallback((input, key) => {
+        if (key.upArrow || input === 'k') {
+            moveUp();
+            return true;
+        }
+        if (key.downArrow || input === 'j') {
+            moveDown();
+            return true;
+        }
+        if (input === 'g' && !key.ctrl && !key.meta) {
+            setSelectedIndex(0);
+            return true;
+        }
+        if (input === 'G') {
+            setSelectedIndex(Math.max(0, flatItems.length - 1));
+            return true;
+        }
+        return false;
+    }, [flatItems.length, moveDown, moveUp]);
+    const handleCustomKeybinds = useCallback((input) => {
+        for (const keybind of keybinds) {
+            if (input === keybind.key && flatItems.length > 0) {
+                keybind.action(flatItems[selectedIndex]);
+                return true;
+            }
+        }
+        return false;
+    }, [flatItems, keybinds, selectedIndex]);
+    // Handle keyboard input
+    useInput((input, key) => {
+        // Navigation
+        if (handleNavigation(input, key)) {
+            return;
+        }
+        // Selection
+        if (key.return) {
+            selectCurrent();
+            return;
+        }
+        // Cancel
+        if (key.escape) {
+            onCancel?.();
+            return;
+        }
+        // Backspace for search
+        if (key.backspace || key.delete) {
+            setSearchValue((prev) => prev.slice(0, -1));
+            return;
+        }
+        // Custom keybinds
+        if (handleCustomKeybinds(input)) {
+            return;
+        }
+        // Type to search (printable characters)
+        if (input && input.length === 1 && !key.ctrl && !key.meta) {
+            setSearchValue((prev) => prev + input);
+        }
+    }, { isActive });
+    // Calculate visible window
+    const { visibleGroups, windowStart } = useMemo(() => {
+        if (flatItems.length === 0) {
+            return { visibleGroups: groupedItems, windowStart: 0 };
+        }
+        // Calculate how many items fit
+        const maxItems = Math.max(1, availableHeight - 4); // Reserve space for title, search, keybinds
+        // Center the selected item in the window
+        const halfWindow = Math.floor(maxItems / 2);
+        let start = selectedIndex - halfWindow;
+        start = Math.max(0, start);
+        start = Math.min(start, Math.max(0, flatItems.length - maxItems));
+        const visibleItemKeys = new Set(flatItems.slice(start, start + maxItems).map((item) => keyExtractor(item)));
+        // Filter groups to only include visible items
+        const visible = groupedItems
+            .map((g) => ({
+            group: g.group,
+            items: g.items.filter((item) => visibleItemKeys.has(keyExtractor(item))),
+        }))
+            .filter((g) => g.items.length > 0);
+        return { visibleGroups: visible, windowStart: start };
+    }, [groupedItems, flatItems, selectedIndex, availableHeight, keyExtractor]);
+    const hasMoreAbove = windowStart > 0;
+    const hasMoreBelow = windowStart + (availableHeight - 4) < flatItems.length;
+    // Get the key of the current item for comparison
+    const currentKey = currentItem && getCurrentKey ? getCurrentKey(currentItem) : undefined;
+    return (_jsxs(Box, { borderColor: colors.border, borderStyle: "single", flexDirection: "column", paddingX: 1, children: [title && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: colors.text, children: title }) })), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: colors.dimText, children: "\uD83D\uDD0D " }), _jsx(Text, { color: searchValue ? colors.text : colors.dimText, children: searchValue || searchPlaceholder }), _jsx(Text, { color: colors.primary, children: "\u258E" })] }), hasMoreAbove && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { color: colors.dimText, children: ["\u2191 ", windowStart, " more above"] }) })), flatItems.length === 0 ? (_jsx(Box, { paddingY: 1, children: _jsx(Text, { color: colors.dimText, children: "No items found" }) })) : (visibleGroups.map((group) => (_jsxs(Box, { flexDirection: "column", children: [group.group && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { bold: true, color: colors.primary, children: ["\u2500\u2500 ", group.group, " \u2500\u2500"] }) })), group.items.map((item) => {
+                        const key = keyExtractor(item);
+                        const flatIndex = flatItems.findIndex((i) => keyExtractor(i) === key);
+                        const isActive = flatIndex === selectedIndex;
+                        const isCurrent = currentKey !== undefined && getCurrentKey?.(item) === currentKey;
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: isActive ? colors.primary : colors.text, children: isCurrent ? '● ' : '  ' }), _jsx(Text, { backgroundColor: isActive ? colors.dimText : undefined, color: isActive ? colors.text : colors.text, children: isActive ? '❯ ' : '  ' }), renderItem(item, isActive, isCurrent)] }, key));
+                    })] }, group.group || '__ungrouped__')))), hasMoreBelow && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { color: colors.dimText, children: ["\u2193 ", flatItems.length - windowStart - (availableHeight - 4), " more below"] }) })), _jsxs(Box, { gap: 2, marginTop: 1, children: [_jsxs(Text, { color: colors.dimText, children: [_jsx(Text, { color: colors.text, children: "\u2191\u2193" }), " Navigate"] }), _jsxs(Text, { color: colors.dimText, children: [_jsx(Text, { color: colors.text, children: "Enter" }), " Select"] }), _jsxs(Text, { color: colors.dimText, children: [_jsx(Text, { color: colors.text, children: "Esc" }), " Cancel"] }), keybinds.map((kb) => (_jsxs(Text, { color: colors.dimText, children: [_jsx(Text, { color: colors.text, children: kb.key }), " ", kb.label] }, kb.key)))] })] }));
+}

package/dist/tui/components/streaming-text.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Streaming Text Component
+ *
+ * Displays incrementally streaming text content with an optional
+ * animated cursor indicator. Used for real-time LLM response display.
+ *
+ * Pattern inspired by OpenCode's streaming UI implementation.
+ */
+import React from 'react';
+interface StreamingTextProps {
+    /** The accumulated streaming content to display */
+    content: string;
+    /** Whether streaming is still in progress */
+    isStreaming: boolean;
+    /** Maximum lines to display (0 = unlimited) */
+    maxLines?: number;
+    /** Whether to show the streaming cursor/indicator */
+    showCursor?: boolean;
+}
+/**
+ * Component that displays streaming text with real-time updates.
+ *
+ * Features:
+ * - Markdown rendering for formatted content
+ * - Animated spinner during streaming
+ * - Optional line limiting for compact views
+ * - Smooth transition when streaming completes
+ */
+export declare const StreamingText: React.FC<StreamingTextProps>;
+export {};

package/dist/tui/components/streaming-text.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Streaming Text Component
+ *
+ * Displays incrementally streaming text content with an optional
+ * animated cursor indicator. Used for real-time LLM response display.
+ *
+ * Pattern inspired by OpenCode's streaming UI implementation.
+ */
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { memo } from 'react';
+import { useTheme } from '../hooks/index.js';
+import { Markdown } from './markdown.js';
+/**
+ * Memoized spinner component to prevent unnecessary re-renders
+ */
+const GeneratingSpinner = memo(() => {
+    const { theme: { colors }, } = useTheme();
+    return (_jsx(Text, { color: colors.dimText, children: _jsx(Spinner, { type: "dots" }) }));
+});
+GeneratingSpinner.displayName = 'GeneratingSpinner';
+/**
+ * Component that displays streaming text with real-time updates.
+ *
+ * Features:
+ * - Markdown rendering for formatted content
+ * - Animated spinner during streaming
+ * - Optional line limiting for compact views
+ * - Smooth transition when streaming completes
+ */
+export const StreamingText = memo(({ content, isStreaming, maxLines = 0, showCursor = true, }) => {
+    const { theme: { colors }, } = useTheme();
+    // Truncate content if maxLines is specified
+    const displayContent = maxLines > 0 ? truncateToLines(content, maxLines) : content;
+    // Don't render anything if no content
+    if (!content) {
+        return isStreaming ? (_jsxs(Box, { children: [_jsx(GeneratingSpinner, {}), _jsx(Text, { color: colors.dimText, children: " Generating..." })] })) : null;
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Markdown, { children: displayContent }), isStreaming && showCursor && (_jsxs(Box, { marginTop: 1, children: [_jsx(GeneratingSpinner, {}), _jsx(Text, { color: colors.dimText, children: " Generating..." })] }))] }));
+});
+StreamingText.displayName = 'StreamingText';
+/**
+ * Truncate content to specified number of lines
+ */
+function truncateToLines(content, maxLines) {
+    const lines = content.split('\n');
+    if (lines.length <= maxLines) {
+        return content;
+    }
+    return lines.slice(0, maxLines).join('\n') + '\n...';
+}