byterover-cli 0.3.5 → 0.4.0

package/dist/tui/components/execution/index.js

@@ -0,0 +1,11 @@
+/**
+ * Execution Components
+ *
+ * Reusable components for displaying execution state (tool calls, progress, content).
+ */
+export { ExecutionChanges } from './execution-changes.js';
+export { ExecutionContent, truncateContent } from './execution-content.js';
+export { ExecutionInput } from './execution-input.js';
+export { ExecutionProgress } from './execution-progress.js';
+export { ExecutionStatus } from './execution-status.js';
+export { LogItem } from './log-item.js';

package/dist/tui/components/execution/log-item.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Log Item Component
+ *
+ * Displays a single activity log entry with header, input, progress, content, and changes.
+ */
+import React from 'react';
+import type { ActivityLog } from '../../types.js';
+interface LogItemProps {
+    /** The activity log to display */
+    log: ActivityLog;
+    /** Maximum number of content lines before truncation */
+    maxContentLines: number;
+    /** Maximum number of progress items to show (default: 3) */
+    maxProgressItems?: number;
+}
+export declare const LogItem: React.FC<LogItemProps>;
+export {};

package/dist/tui/components/execution/log-item.js

@@ -0,0 +1,25 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Log Item Component
+ *
+ * Displays a single activity log entry with header, input, progress, content, and changes.
+ */
+import { Box, Spacer, Text } from 'ink';
+import { useTheme } from '../../hooks/index.js';
+import { ExecutionChanges } from './execution-changes.js';
+import { ExecutionContent } from './execution-content.js';
+import { ExecutionInput } from './execution-input.js';
+import { ExecutionProgress } from './execution-progress.js';
+import { ExecutionStatus } from './execution-status.js';
+/** Default maximum number of visible progress items */
+const DEFAULT_MAX_PROGRESS_ITEMS = 3;
+export const LogItem = ({ log, maxContentLines, maxProgressItems = DEFAULT_MAX_PROGRESS_ITEMS, }) => {
+    const { theme: { colors }, } = useTheme();
+    // Format timestamp as local time HH:MM:SS
+    const hours = log.timestamp.getHours().toString().padStart(2, '0');
+    const minutes = log.timestamp.getMinutes().toString().padStart(2, '0');
+    const seconds = log.timestamp.getSeconds().toString().padStart(2, '0');
+    const displayTime = `${hours}:${minutes}:${seconds}`;
+    const displayTools = Math.min(log.progress?.length ?? 0, maxProgressItems) + 1;
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, width: "100%", children: [_jsxs(Box, { children: [_jsxs(Text, { color: log.type === 'curate' ? colors.curateCommand : colors.queryCommand, children: ["[", log.type, "] "] }), _jsxs(Text, { color: colors.dimText, children: ["@", log.source ?? 'system'] }), _jsx(Spacer, {}), _jsxs(Text, { color: colors.dimText, children: ["[", displayTime, "]"] })] }), _jsx(ExecutionInput, { input: log.input }), _jsxs(Box, { flexDirection: "column", children: [log.progress && _jsx(ExecutionProgress, { maxItems: maxProgressItems, progress: log.progress }), _jsx(ExecutionStatus, { status: log.status })] }), (log.status === 'failed' || log.status === 'completed') && (_jsx(ExecutionContent, { content: log.content ?? '', isError: log.status === 'failed', maxLines: maxContentLines - displayTools })), log.status === 'completed' && _jsx(ExecutionChanges, { created: log.changes.created, updated: log.changes.updated })] }));
+};

package/dist/tui/components/footer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Footer Component - Dynamic based on active tab
+ */
+import React from 'react';
+export declare const Footer: React.FC;

package/dist/tui/components/footer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Footer Component - Dynamic based on active tab
+ */
+import { Box, Text } from 'ink';
+import { useMode } from '../contexts/use-mode.js';
+import { useTheme } from '../contexts/use-theme.js';
+export const Footer = () => {
+    const { shortcuts } = useMode();
+    const { theme: { colors } } = useTheme();
+    return (_jsx(Box, { gap: 1, paddingX: 1, width: "100%", children: shortcuts.map((shortcut, index) => (_jsxs(Box, { children: [index > 0 && _jsx(Text, { color: colors.dimText, children: " \u2022  " }), _jsx(Text, { color: colors.text, children: shortcut.key }), _jsxs(Text, { color: colors.dimText, children: [" ", shortcut.description] })] }, shortcut.key))) }));
+};

package/dist/tui/components/header.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Header Component
+ *
+ * Sticky header with:
+ * - Adaptive ASCII/Text Logo (based on terminal size)
+ * - Connected agent status
+ * - Queue stats (pending/processing)
+ */
+import React from 'react';
+import type { QueueStats } from '../types.js';
+interface HeaderProps {
+    compact?: boolean;
+    connectedAgent?: string;
+    queueStats?: QueueStats;
+    showQueueStats?: boolean;
+}
+export declare const Header: React.FC<HeaderProps>;
+export {};

package/dist/tui/components/header.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Header Component
+ *
+ * Sticky header with:
+ * - Adaptive ASCII/Text Logo (based on terminal size)
+ * - Connected agent status
+ * - Queue stats (pending/processing)
+ */
+import { Box, Spacer, Text } from 'ink';
+import { useServices } from '../contexts/index.js';
+import { useTheme } from '../contexts/use-theme.js';
+import { Logo } from './logo.js';
+export const Header = ({ compact, connectedAgent, queueStats, showQueueStats }) => {
+    const { version } = useServices();
+    const { theme } = useTheme();
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(Logo, { compact: compact, version: version }), _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Box, { gap: 2, children: connectedAgent && (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: "\u25CF " }), _jsx(Text, { color: "gray", children: connectedAgent })] })) }), showQueueStats && (_jsxs(Box, { paddingRight: 1, children: [_jsx(Spacer, {}), _jsx(Text, { children: "~ in queue: " }), _jsx(Text, { color: theme.colors.warning, children: queueStats?.pending ?? 0 }), _jsx(Text, { children: " | running: " }), _jsx(Text, { color: theme.colors.primary, children: queueStats?.processing ?? 0 })] }))] })] }));
+};

package/dist/tui/components/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * TUI Components
+ */
+export { EnterPrompt } from './enter-prompt.js';
+export { ExecutionChanges, ExecutionContent, ExecutionInput, ExecutionProgress, ExecutionStatus, LogItem, truncateContent, } from './execution/index.js';
+export { Footer } from './footer.js';
+export { Header } from './header.js';
+export { Logo } from './logo.js';
+export type { LogoVariant } from './logo.js';
+export { MessageItem } from './message-item.js';
+export { CopyablePrompt, OnboardingFlow, OnboardingStep } from './onboarding/index.js';
+export type { OnboardingStepType } from './onboarding/index.js';
+export { OutputLog } from './output-log.js';
+export { ScrollableList } from './scrollable-list.js';
+export type { ScrollableListProps } from './scrollable-list.js';
+export { Suggestions } from './suggestions.js';
+export { TabBar } from './tab-bar.js';

package/dist/tui/components/index.js

@@ -0,0 +1,14 @@
+/**
+ * TUI Components
+ */
+export { EnterPrompt } from './enter-prompt.js';
+export { ExecutionChanges, ExecutionContent, ExecutionInput, ExecutionProgress, ExecutionStatus, LogItem, truncateContent, } from './execution/index.js';
+export { Footer } from './footer.js';
+export { Header } from './header.js';
+export { Logo } from './logo.js';
+export { MessageItem } from './message-item.js';
+export { CopyablePrompt, OnboardingFlow, OnboardingStep } from './onboarding/index.js';
+export { OutputLog } from './output-log.js';
+export { ScrollableList } from './scrollable-list.js';
+export { Suggestions } from './suggestions.js';
+export { TabBar } from './tab-bar.js';

package/dist/tui/components/inline-prompts/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Inline Prompt Components
+ *
+ * Generic reusable prompt components for TUI streaming commands.
+ */
+export { InlineConfirm } from './inline-confirm.js';
+export type { InlineConfirmProps } from './inline-confirm.js';
+export { InlineFileSelector } from './inline-file-selector.js';
+export type { InlineFileSelectorProps } from './inline-file-selector.js';
+export { InlineInput } from './inline-input.js';
+export type { InlineInputProps } from './inline-input.js';
+export { InlineSearch } from './inline-search.js';
+export type { InlineSearchProps } from './inline-search.js';
+export { InlineSelect } from './inline-select.js';
+export type { InlineSelectProps } from './inline-select.js';

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

@@ -0,0 +1,10 @@
+/**
+ * Inline Prompt Components
+ *
+ * Generic reusable prompt components for TUI streaming commands.
+ */
+export { InlineConfirm } from './inline-confirm.js';
+export { InlineFileSelector } from './inline-file-selector.js';
+export { InlineInput } from './inline-input.js';
+export { InlineSearch } from './inline-search.js';
+export { InlineSelect } from './inline-select.js';

package/dist/tui/components/inline-prompts/inline-confirm.d.ts

@@ -0,0 +1,17 @@
+/**
+ * InlineConfirm Component
+ *
+ * Generic inline yes/no confirmation prompt.
+ * Shows (Y/n) or (N/y) based on default value.
+ * User types y/n and presses Enter to submit.
+ */
+import React from 'react';
+export interface InlineConfirmProps {
+    /** Default value (default: true = Yes) */
+    default?: boolean;
+    /** The prompt message */
+    message: string;
+    /** Callback when user confirms or cancels */
+    onConfirm: (value: boolean) => void;
+}
+export declare function InlineConfirm({ default: defaultValue, message, onConfirm, }: InlineConfirmProps): React.ReactElement;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InlineConfirm Component
+ *
+ * Generic inline yes/no confirmation prompt.
+ * Shows (Y/n) or (N/y) based on default value.
+ * User types y/n and presses Enter to submit.
+ */
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { useState } from 'react';
+import { useTheme } from '../../hooks/index.js';
+export function InlineConfirm({ default: defaultValue = true, message, onConfirm, }) {
+    const { theme: { colors }, } = useTheme();
+    const [input, setInput] = useState('');
+    // Format hint based on default: (Y/n) or (N/y)
+    const hint = defaultValue ? '(Y/n)' : '(N/y)';
+    const handleSubmit = (value) => {
+        const trimmed = value.trim().toLowerCase();
+        if (trimmed === 'y' || trimmed === 'yes') {
+            onConfirm(true);
+        }
+        else if (trimmed === 'n' || trimmed === 'no') {
+            onConfirm(false);
+        }
+        else {
+            // Empty or invalid input uses default
+            onConfirm(defaultValue);
+        }
+    };
+    return (_jsxs(Box, { children: [_jsx(Text, { color: colors.secondary, children: "? " }), _jsxs(Text, { color: colors.text, children: [message, " "] }), _jsxs(Text, { color: colors.secondary, children: [hint, " "] }), _jsx(TextInput, { onChange: setInput, onSubmit: handleSubmit, value: input })] }));
+}

package/dist/tui/components/inline-prompts/inline-file-selector.d.ts

@@ -0,0 +1,43 @@
+/**
+ * InlineFileSelector Component
+ *
+ * Tree-view file/directory selector similar to inquirer-file-selector.
+ *
+ * Two modes:
+ * - 'file': Select files only, folders are for navigation
+ * - 'directory': Select and list folders only
+ *
+ * Navigation:
+ * - Up/Down arrows: Move selection
+ * - Right arrow: Navigate into folder
+ * - Enter: Select current item (only works when item matches mode)
+ * - Left arrow/Backspace: Go up one directory level
+ * - Escape: Cancel selection (if allowCancel is true)
+ *
+ * Features:
+ * - Path breadcrumb showing current location
+ * - Sliding window for long lists
+ * - Filter support
+ * - Cannot navigate above basePath
+ */
+import React from 'react';
+import type { FileSelectorItemResult } from '../../types.js';
+/** Selection mode for the file selector */
+export type FileSelectorMode = 'directory' | 'file';
+export interface InlineFileSelectorProps {
+    /** Allow user to cancel selection */
+    allowCancel?: boolean;
+    /** Base path to start from (cannot navigate above this) */
+    basePath: string;
+    /** Filter function to show/hide items (applied after mode filter) */
+    filter?: (item: FileSelectorItemResult) => boolean;
+    /** The prompt message */
+    message: string;
+    /** Selection mode: 'file' or 'directory' (default: 'file') */
+    mode?: FileSelectorMode;
+    /** Callback when user selects or cancels */
+    onSelect: (item: FileSelectorItemResult | null) => void;
+    /** Number of items visible at once */
+    pageSize?: number;
+}
+export declare function InlineFileSelector({ allowCancel, basePath, filter, message, mode, onSelect, pageSize, }: InlineFileSelectorProps): React.ReactElement;

package/dist/tui/components/inline-prompts/inline-file-selector.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InlineFileSelector Component
+ *
+ * Tree-view file/directory selector similar to inquirer-file-selector.
+ *
+ * Two modes:
+ * - 'file': Select files only, folders are for navigation
+ * - 'directory': Select and list folders only
+ *
+ * Navigation:
+ * - Up/Down arrows: Move selection
+ * - Right arrow: Navigate into folder
+ * - Enter: Select current item (only works when item matches mode)
+ * - Left arrow/Backspace: Go up one directory level
+ * - Escape: Cancel selection (if allowCancel is true)
+ *
+ * Features:
+ * - Path breadcrumb showing current location
+ * - Sliding window for long lists
+ * - Filter support
+ * - Cannot navigate above basePath
+ */
+import { Box, Text, useInput } from 'ink';
+import fs from 'node:fs';
+import path from 'node:path';
+import { useEffect, useMemo, useState } from 'react';
+import { useTheme } from '../../hooks/index.js';
+const DEFAULT_PAGE_SIZE = 7;
+export function InlineFileSelector({ allowCancel = false, basePath, filter, message, mode = 'file', onSelect, pageSize = DEFAULT_PAGE_SIZE, }) {
+    const { theme: { colors }, } = useTheme();
+    const [currentPath, setCurrentPath] = useState(basePath);
+    const [items, setItems] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [windowStart, setWindowStart] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    // Normalize paths for comparison
+    const normalizedBasePath = useMemo(() => path.resolve(basePath), [basePath]);
+    const normalizedCurrentPath = useMemo(() => path.resolve(currentPath), [currentPath]);
+    // Check if we can go up (not at basePath)
+    const canGoUp = normalizedCurrentPath !== normalizedBasePath;
+    // Load directory contents
+    useEffect(() => {
+        const loadItems = async () => {
+            setIsLoading(true);
+            try {
+                const entries = fs.readdirSync(currentPath, { withFileTypes: true });
+                let fileItems = entries.map((entry) => ({
+                    isDirectory: entry.isDirectory(),
+                    name: entry.name,
+                    path: path.join(currentPath, entry.name),
+                }));
+                // In directory mode, only show directories
+                if (mode === 'directory') {
+                    fileItems = fileItems.filter((item) => item.isDirectory);
+                }
+                // Apply custom filter
+                if (filter) {
+                    fileItems = fileItems.filter((item) => filter(item));
+                }
+                // Sort: directories first, then alphabetically
+                fileItems.sort((a, b) => {
+                    if (a.isDirectory !== b.isDirectory) {
+                        return a.isDirectory ? -1 : 1;
+                    }
+                    return a.name.localeCompare(b.name);
+                });
+                // Add "." for selecting current folder (in directory mode)
+                if (mode === 'directory') {
+                    fileItems.unshift({
+                        isDirectory: true,
+                        name: '.',
+                        path: currentPath,
+                    });
+                }
+                setItems(fileItems);
+                setSelectedIndex(0);
+                setWindowStart(0);
+            }
+            catch {
+                // Handle permission errors or other issues
+                setItems([]);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadItems();
+    }, [currentPath, filter, mode]);
+    // Calculate visible items (sliding window)
+    const visibleItems = useMemo(() => items.slice(windowStart, windowStart + pageSize), [items, windowStart, pageSize]);
+    // Check if selected item can be selected based on mode
+    const canSelectItem = (item) => {
+        if (!item)
+            return false;
+        if (mode === 'file')
+            return !item.isDirectory;
+        if (mode === 'directory')
+            return item.isDirectory;
+        return false;
+    };
+    // Handle Enter key selection
+    const handleEnterKey = () => {
+        const selected = items[selectedIndex];
+        // In directory mode with empty folder, select current path
+        if (mode === 'directory' && items.length === 0) {
+            onSelect({
+                isDirectory: true,
+                name: path.basename(currentPath),
+                path: currentPath,
+            });
+            return;
+        }
+        // Select current folder on "." selection (directory mode)
+        if (selected?.name === '.' && mode === 'directory') {
+            onSelect(selected);
+            return;
+        }
+        // Navigate into folder (same as right arrow)
+        if (selected?.isDirectory) {
+            setCurrentPath(selected.path);
+            return;
+        }
+        // Select file (in file mode)
+        if (canSelectItem(selected)) {
+            onSelect(selected);
+        }
+    };
+    // Handle keyboard input
+    useInput((_input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => {
+                const newIndex = Math.max(0, prev - 1);
+                // Adjust window if selection goes above visible area
+                if (newIndex < windowStart) {
+                    setWindowStart(newIndex);
+                }
+                return newIndex;
+            });
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => {
+                const newIndex = Math.min(items.length - 1, prev + 1);
+                // Adjust window if selection goes below visible area
+                if (newIndex >= windowStart + pageSize) {
+                    setWindowStart(newIndex - pageSize + 1);
+                }
+                return newIndex;
+            });
+        }
+        else if (key.rightArrow) {
+            // Navigate into directory
+            const selected = items[selectedIndex];
+            if (selected?.isDirectory && selected.name !== '.') {
+                setCurrentPath(selected.path);
+            }
+        }
+        else if (key.return) {
+            handleEnterKey();
+        }
+        else if (key.backspace || key.leftArrow) {
+            // Go up one level (if not at basePath)
+            if (canGoUp) {
+                setCurrentPath(path.dirname(currentPath));
+            }
+        }
+        else if (key.escape && allowCancel) {
+            onSelect(null);
+        }
+    });
+    // Get relative path for display
+    const displayPath = normalizedCurrentPath.replace(process.cwd(), '') || '.';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: colors.text, children: [_jsx(Text, { color: colors.secondary, children: "? " }), message] }), _jsx(Text, { color: colors.primary, children: displayPath }), _jsx(Box, { borderBottom: false, borderColor: colors.border, borderLeft: false, borderRight: false, borderStyle: "single", borderTop: true, flexDirection: "column", children: isLoading ? (_jsx(Text, { color: colors.dimText, children: "Loading..." })) : visibleItems.length === 0 ? (_jsx(Text, { color: colors.warning, children: mode === 'directory' ? '(empty folder) Press Enter to select this location' : '(no files)' })) : (visibleItems.map((item, index) => {
+                    const actualIndex = windowStart + index;
+                    const isSelected = actualIndex === selectedIndex;
+                    const icon = index === visibleItems.length - 1 ? '└──' : '├──';
+                    const suffix = item.isDirectory && item.name !== '.' ? '/' : '';
+                    const isSelectable = canSelectItem(item) || item.name === '.';
+                    // Dim items that can't be selected (except "." for folder selection)
+                    const itemColor = isSelected ? colors.primary : isSelectable ? colors.text : colors.dimText;
+                    // Display label for "."
+                    const displayName = item.name === '.' ? '. (select this folder)' : item.name;
+                    return (_jsxs(Text, { color: itemColor, children: [isSelected ? '❯ ' : '  ', icon, " ", displayName, suffix] }, item.path));
+                })) }), items.length > pageSize && (_jsxs(Text, { color: colors.dimText, dimColor: true, children: [windowStart > 0 ? '↑ ' : '  ', selectedIndex + 1, "/", items.length, windowStart + pageSize < items.length ? ' ↓' : '  '] })), _jsxs(Text, { dimColor: true, children: ['[↑↓] navigate  [→] open  [←] up  [Enter] select', mode === 'file' ? ' file' : ' folder', allowCancel ? '  [Esc] cancel' : ''] })] }));
+}

package/dist/tui/components/inline-prompts/inline-input.d.ts

@@ -0,0 +1,19 @@
+/**
+ * InlineInput Component
+ *
+ * Generic inline text input prompt with validation.
+ * Shows validation errors below input.
+ * User types and presses Enter to submit.
+ */
+import React from 'react';
+export interface InlineInputProps {
+    /** The prompt message */
+    message: string;
+    /** Callback when user submits valid input */
+    onSubmit: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Validation function - return true if valid, or error message string */
+    validate?: (value: string) => boolean | string;
+}
+export declare function InlineInput({ message, onSubmit, placeholder, validate, }: InlineInputProps): React.ReactElement;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InlineInput Component
+ *
+ * Generic inline text input prompt with validation.
+ * Shows validation errors below input.
+ * User types and presses Enter to submit.
+ */
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { useState } from 'react';
+import { useTheme } from '../../hooks/index.js';
+export function InlineInput({ message, onSubmit, placeholder, validate, }) {
+    const { theme: { colors }, } = useTheme();
+    const [value, setValue] = useState('');
+    const [error, setError] = useState(null);
+    const handleSubmit = (inputValue) => {
+        // Clear previous error
+        setError(null);
+        // Run validation if provided
+        if (validate) {
+            const result = validate(inputValue);
+            if (result !== true) {
+                setError(typeof result === 'string' ? result : 'Invalid input');
+                return;
+            }
+        }
+        // Submit valid input
+        onSubmit(inputValue);
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: colors.secondary, children: "? " }), _jsxs(Text, { color: colors.text, children: [message, " "] }), _jsx(TextInput, { onChange: setValue, onSubmit: handleSubmit, placeholder: placeholder, value: value })] }), error && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: colors.errorText, children: error }) }))] }));
+}

package/dist/tui/components/inline-prompts/inline-search.d.ts

@@ -0,0 +1,20 @@
+/**
+ * InlineSearch Component
+ *
+ * Generic inline searchable selection prompt.
+ * Renders a search input with filterable list of options.
+ * Shows max 7 items with a sliding window that follows selection.
+ */
+import React from 'react';
+import type { PromptChoice } from '../../types.js';
+export interface InlineSearchProps<T = unknown> {
+    /** Maximum number of visible items in the dropdown (default: 7) */
+    maxVisibleItems?: number;
+    /** The prompt message */
+    message: string;
+    /** Callback when user selects a value */
+    onSelect: (value: T) => void;
+    /** Function that returns choices based on search input */
+    source: (input: string | undefined) => Array<PromptChoice<T>> | Promise<Array<PromptChoice<T>>>;
+}
+export declare function InlineSearch<T>({ maxVisibleItems, message, onSelect, source }: InlineSearchProps<T>): React.ReactElement;

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InlineSearch Component
+ *
+ * Generic inline searchable selection prompt.
+ * Renders a search input with filterable list of options.
+ * Shows max 7 items with a sliding window that follows selection.
+ */
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useEffect, useState } from 'react';
+import { useTheme, useVisibleWindow } from '../../hooks/index.js';
+const MAX_VISIBLE_ITEMS = 7;
+export function InlineSearch({ maxVisibleItems = MAX_VISIBLE_ITEMS, message, onSelect, source }) {
+    const { theme: { colors }, } = useTheme();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [choices, setChoices] = useState([]);
+    // Load choices based on search query
+    useEffect(() => {
+        const loadChoices = async () => {
+            const result = source(searchQuery || undefined);
+            const resolvedChoices = result instanceof Promise ? await result : result;
+            setChoices(resolvedChoices);
+        };
+        loadChoices();
+    }, [searchQuery, source]);
+    // Reset selected index when choices change
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [choices.length]);
+    // Calculate visible window based on selected index
+    const { visibleItems: visibleChoices, windowStart } = useVisibleWindow(choices, selectedIndex, maxVisibleItems);
+    // Handle keyboard input
+    useInput((_input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(choices.length - 1, prev + 1));
+        }
+        else if (key.return && choices[selectedIndex]) {
+            onSelect(choices[selectedIndex].value);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: colors.text, children: [_jsx(Text, { color: colors.secondary, children: "? " }), message, " ", _jsx(TextInput, { onChange: setSearchQuery, value: searchQuery })] }), _jsxs(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));
+                    }), choices.length === 0 && _jsxs(Text, { color: colors.errorText, children: ['> ', "No results found"] })] })] }));
+}

package/dist/tui/components/inline-prompts/inline-select.d.ts

@@ -0,0 +1,20 @@
+/**
+ * InlineSelect Component
+ *
+ * Generic inline selection prompt with multiple choices.
+ * Shows description of selected item below the list.
+ * Shows max items with a sliding window that follows selection.
+ */
+import React from 'react';
+import type { PromptChoice } from '../../types.js';
+export interface InlineSelectProps<T = unknown> {
+    /** Available choices */
+    choices: Array<PromptChoice<T>>;
+    /** Maximum number of visible items in the list (default: 7) */
+    maxVisibleItems?: number;
+    /** The prompt message */
+    message: string;
+    /** Callback when user selects a value */
+    onSelect: (value: T) => void;
+}
+export declare function InlineSelect<T>({ choices, maxVisibleItems, message, onSelect, }: InlineSelectProps<T>): React.ReactElement;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InlineSelect Component
+ *
+ * Generic inline selection prompt with multiple choices.
+ * Shows description of selected item below the list.
+ * Shows max items with a sliding window that follows selection.
+ */
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { useTheme, useVisibleWindow } from '../../hooks/index.js';
+export function InlineSelect({ choices, maxVisibleItems = 7, message, onSelect, }) {
+    const { theme: { colors }, } = useTheme();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectedChoice = choices[selectedIndex];
+    // Calculate visible window based on selected index
+    const { visibleItems: visibleChoices, windowStart } = useVisibleWindow(choices, selectedIndex, maxVisibleItems);
+    // Handle keyboard input
+    useInput((_input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(choices.length - 1, prev + 1));
+        }
+        else if (key.return && selectedChoice) {
+            onSelect(selectedChoice.value);
+        }
+    });
+    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 }) }))] }));
+}