dexto 1.2.4 → 1.2.5

package/dist/cli/ink-cli/components/SlashCommandAutocomplete.js

@@ -0,0 +1,320 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getAllCommands } from '../../commands/interactive-commands/commands.js';
+/**
+ * Get match score for prompt: 0 = no match, 1 = description/title match, 2 = name includes, 3 = name starts with
+ */
+function getPromptMatchScore(prompt, query) {
+    if (!query)
+        return 3; // Show all when no query
+    const lowerQuery = query.toLowerCase();
+    const name = prompt.name.toLowerCase();
+    const description = (prompt.description || '').toLowerCase();
+    const title = (prompt.title || '').toLowerCase();
+    // Highest priority: name starts with query
+    if (name.startsWith(lowerQuery)) {
+        return 3;
+    }
+    // Second priority: name includes query
+    if (name.includes(lowerQuery)) {
+        return 2;
+    }
+    // Lowest priority: description or title includes query
+    if (description.includes(lowerQuery) || title.includes(lowerQuery)) {
+        return 1;
+    }
+    return 0; // No match
+}
+/**
+ * Check if prompt matches query (for filtering)
+ */
+function matchesPromptQuery(prompt, query) {
+    return getPromptMatchScore(prompt, query) > 0;
+}
+/**
+ * Simple fuzzy match - checks if query matches system command name or description
+ * Returns a score: 0 = no match, 1 = description match, 2 = alias match, 3 = name includes, 4 = name starts with
+ */
+function getSystemCommandMatchScore(cmd, query) {
+    if (!query)
+        return 4; // Show all when no query
+    const lowerQuery = query.toLowerCase();
+    const name = cmd.name.toLowerCase();
+    const description = (cmd.description || '').toLowerCase();
+    // Highest priority: name starts with query
+    if (name.startsWith(lowerQuery)) {
+        return 4;
+    }
+    // Second priority: name includes query
+    if (name.includes(lowerQuery)) {
+        return 3;
+    }
+    // Third priority: aliases match
+    if (cmd.aliases) {
+        for (const alias of cmd.aliases) {
+            const lowerAlias = alias.toLowerCase();
+            if (lowerAlias.startsWith(lowerQuery)) {
+                return 2;
+            }
+            if (lowerAlias.includes(lowerQuery)) {
+                return 2;
+            }
+        }
+    }
+    // Lowest priority: description includes query
+    if (description.includes(lowerQuery)) {
+        return 1;
+    }
+    return 0; // No match
+}
+/**
+ * Check if command matches query (for filtering)
+ */
+function matchesSystemCommandQuery(cmd, query) {
+    return getSystemCommandMatchScore(cmd, query) > 0;
+}
+export default function SlashCommandAutocomplete({ isVisible, searchQuery, onSelectPrompt, onSelectSystemCommand, onLoadIntoInput, onClose, onCreatePrompt, agent, }) {
+    const [prompts, setPrompts] = useState([]);
+    const [systemCommands, setSystemCommands] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const selectedIndexRef = useRef(0);
+    const MAX_VISIBLE_ITEMS = 10; // Increased to show more items
+    // Keep ref in sync
+    useEffect(() => {
+        selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+    // Fetch prompts and system commands from agent
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        let cancelled = false;
+        setIsLoading(true);
+        const fetchCommands = async () => {
+            try {
+                // Fetch prompts
+                const promptSet = await agent.listPrompts();
+                const promptList = Object.values(promptSet).map((p) => ({
+                    ...p,
+                    kind: 'prompt',
+                }));
+                // Fetch system commands
+                const allCommands = getAllCommands();
+                const commandList = allCommands.map((cmd) => ({
+                    kind: 'system',
+                    name: cmd.name,
+                    description: cmd.description,
+                    ...(cmd.category && { category: cmd.category }),
+                    ...(cmd.aliases && { aliases: cmd.aliases }),
+                }));
+                if (!cancelled) {
+                    setPrompts(promptList);
+                    setSystemCommands(commandList);
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                if (!cancelled) {
+                    console.error(`Error in fetchCommands: ${error instanceof Error ? error.message : String(error)}`);
+                    setPrompts([]);
+                    setSystemCommands([]);
+                    setIsLoading(false);
+                }
+            }
+        };
+        void fetchCommands();
+        return () => {
+            cancelled = true;
+        };
+    }, [isVisible, agent]);
+    // Extract command name from search query (only the first word after /)
+    const commandQuery = useMemo(() => {
+        if (!searchQuery.startsWith('/'))
+            return '';
+        const afterSlash = searchQuery.slice(1).trim();
+        // Only take the first word (command name), not the arguments
+        const spaceIndex = afterSlash.indexOf(' ');
+        return spaceIndex > 0 ? afterSlash.slice(0, spaceIndex) : afterSlash;
+    }, [searchQuery]);
+    // Filter prompts and system commands based on query
+    const filteredPrompts = useMemo(() => {
+        if (!commandQuery) {
+            return prompts;
+        }
+        // Filter and sort by match score (highest first)
+        return prompts
+            .filter((p) => matchesPromptQuery(p, commandQuery))
+            .sort((a, b) => {
+            const scoreA = getPromptMatchScore(a, commandQuery);
+            const scoreB = getPromptMatchScore(b, commandQuery);
+            return scoreB - scoreA; // Higher score first
+        });
+    }, [prompts, commandQuery]);
+    const filteredSystemCommands = useMemo(() => {
+        if (!commandQuery) {
+            return systemCommands;
+        }
+        // Filter and sort by match score (highest first)
+        return systemCommands
+            .filter((cmd) => matchesSystemCommandQuery(cmd, commandQuery))
+            .sort((a, b) => {
+            const scoreA = getSystemCommandMatchScore(a, commandQuery);
+            const scoreB = getSystemCommandMatchScore(b, commandQuery);
+            return scoreB - scoreA; // Higher score first
+        });
+    }, [systemCommands, commandQuery]);
+    // Check if user has started typing arguments (hide autocomplete if so)
+    const hasArguments = useMemo(() => {
+        if (!searchQuery.startsWith('/'))
+            return false;
+        const afterSlash = searchQuery.slice(1).trim();
+        return afterSlash.includes(' ');
+    }, [searchQuery]);
+    // Show create option only if query doesn't match any commands and is a valid prompt name
+    const showCreateOption = useMemo(() => {
+        if (!commandQuery)
+            return false; // Don't show create when just "/"
+        if (hasArguments)
+            return false; // Don't show create when typing arguments
+        // Only show create if no matches and query looks like a prompt name (no spaces, valid chars)
+        return (filteredPrompts.length === 0 &&
+            filteredSystemCommands.length === 0 &&
+            commandQuery.length > 0);
+    }, [commandQuery, hasArguments, filteredPrompts.length, filteredSystemCommands.length]);
+    // Combine items: system commands first, then prompts, then create option
+    // Hide autocomplete if user has started typing arguments
+    const combinedItems = useMemo(() => {
+        if (hasArguments) {
+            return []; // Hide autocomplete when typing arguments
+        }
+        const items = [];
+        // System commands first (they're more commonly used)
+        filteredSystemCommands.forEach((cmd) => items.push({ kind: 'system', command: cmd }));
+        // Then prompts
+        filteredPrompts.forEach((prompt) => items.push({ kind: 'prompt', prompt }));
+        // Create option last
+        if (showCreateOption) {
+            items.push({ kind: 'create' });
+        }
+        return items;
+    }, [hasArguments, showCreateOption, filteredPrompts, filteredSystemCommands]);
+    // Reset selected index and scroll when items change
+    useEffect(() => {
+        setSelectedIndex(0);
+        setScrollOffset(0);
+    }, [combinedItems.length]);
+    // Auto-scroll to keep selected item visible
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            // Selected item is above visible area, scroll up
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex >= scrollOffset + MAX_VISIBLE_ITEMS) {
+            // Selected item is below visible area, scroll down
+            setScrollOffset(Math.max(0, selectedIndex - MAX_VISIBLE_ITEMS + 1));
+        }
+    }, [selectedIndex, scrollOffset]);
+    // Calculate visible items based on scroll offset
+    const visibleItems = useMemo(() => {
+        return combinedItems.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS);
+    }, [combinedItems, scrollOffset]);
+    // Handle keyboard navigation
+    useInput((input, key) => {
+        if (!isVisible)
+            return;
+        const itemsLength = combinedItems.length;
+        if (itemsLength === 0)
+            return;
+        switch (key.upArrow) {
+            case true:
+                setSelectedIndex((prev) => (prev - 1 + itemsLength) % itemsLength);
+                break;
+        }
+        switch (key.downArrow) {
+            case true:
+                setSelectedIndex((prev) => (prev + 1) % itemsLength);
+                break;
+        }
+        switch (key.escape) {
+            case true:
+                onClose();
+                break;
+        }
+        // Tab: Load command into input (for editing before execution)
+        if (key.tab && itemsLength > 0) {
+            const item = combinedItems[selectedIndexRef.current];
+            if (!item)
+                return;
+            if (item.kind === 'create') {
+                // For create, load the command name into input
+                onLoadIntoInput?.(`/${commandQuery || 'name'}`);
+            }
+            else if (item.kind === 'system') {
+                // Load system command into input
+                onLoadIntoInput?.(`/${item.command.name}`);
+            }
+            else {
+                // Load prompt command into input
+                const argsString = item.prompt.arguments && item.prompt.arguments.length > 0
+                    ? ' ' +
+                        item.prompt.arguments
+                            .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
+                            .join(' ')
+                    : '';
+                onLoadIntoInput?.(`/${item.prompt.name}${argsString}`);
+            }
+            return;
+        }
+        // Enter: Always execute the highlighted command/prompt
+        if (key.return && itemsLength > 0) {
+            const item = combinedItems[selectedIndexRef.current];
+            if (!item)
+                return;
+            if (item.kind === 'create') {
+                onCreatePrompt?.();
+            }
+            else if (item.kind === 'system') {
+                onSelectSystemCommand?.(item.command.name);
+            }
+            else {
+                onSelectPrompt(item.prompt);
+            }
+        }
+    }, { isActive: isVisible });
+    if (!isVisible)
+        return null;
+    // Hide autocomplete when user is typing arguments
+    if (hasArguments)
+        return null;
+    if (isLoading) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "Loading commands..." }) }));
+    }
+    if (combinedItems.length === 0) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "No commands found" }) }));
+    }
+    const hasMoreAbove = scrollOffset > 0;
+    const hasMoreBelow = scrollOffset + MAX_VISIBLE_ITEMS < combinedItems.length;
+    const totalItems = combinedItems.length;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "cyan", flexDirection: "column", height: Math.min(MAX_VISIBLE_ITEMS + 3, totalItems + 3), children: [_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["Commands (", selectedIndex + 1, "/", totalItems, ") - \u2191\u2193 to navigate, Tab to load, Enter to execute, Esc to close"] }) }), hasMoreAbove && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2191 (", scrollOffset, " more above)"] }) })), visibleItems.map((item, visibleIndex) => {
+                const actualIndex = scrollOffset + visibleIndex;
+                const isSelected = actualIndex === selectedIndex;
+                if (item.kind === 'create') {
+                    return (_jsx(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, children: _jsxs(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: ["+ Create new prompt: /", commandQuery || 'name'] }) }, "create"));
+                }
+                if (item.kind === 'system') {
+                    const cmd = item.command;
+                    return (_jsxs(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, flexDirection: "row", children: [_jsxs(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: ["/", cmd.name] }), cmd.description && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: ['    ', cmd.description] })), cmd.category && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: [' ', "(", cmd.category, ")"] }))] }, `system-${cmd.name}`));
+                }
+                // Prompt command
+                const prompt = item.prompt;
+                const description = prompt.title || prompt.description || '';
+                const argsString = prompt.arguments && prompt.arguments.length > 0
+                    ? prompt.arguments
+                        .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
+                        .join(' ')
+                    : '';
+                return (_jsxs(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, flexDirection: "row", children: [_jsxs(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: ["/", prompt.name] }), argsString && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: [' ', argsString] })), description && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: ['    ', description] }))] }, `prompt-${prompt.name}`));
+            }), hasMoreBelow && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2193 (", totalItems - scrollOffset - MAX_VISIBLE_ITEMS, " more below)"] }) }))] }));
+}

package/dist/cli/ink-cli/components/StatusBar.d.ts

@@ -0,0 +1,16 @@
+/**
+ * StatusBar Component
+ * Displays processing status and controls above the input area
+ */
+interface StatusBarProps {
+    isProcessing: boolean;
+    isThinking: boolean;
+    approvalQueueCount: number;
+}
+/**
+ * Status bar that shows processing state above input area
+ * Provides clear feedback on whether the agent is running or idle
+ */
+export declare function StatusBar({ isProcessing, isThinking, approvalQueueCount }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StatusBar.d.ts.map

package/dist/cli/ink-cli/components/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,UAAU,cAAc;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,EAAE,cAAc,2CAgDzF"}

package/dist/cli/ink-cli/components/StatusBar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StatusBar Component
+ * Displays processing status and controls above the input area
+ */
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+/**
+ * Status bar that shows processing state above input area
+ * Provides clear feedback on whether the agent is running or idle
+ */
+export function StatusBar({ isProcessing, isThinking, approvalQueueCount }) {
+    if (!isProcessing) {
+        // Show idle state - minimal, non-intrusive
+        return (_jsxs(Box, { paddingX: 1, marginBottom: 0, children: [_jsx(Text, { color: "green", children: "\u25CF" }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "Ready"] })] }));
+    }
+    // Show initial processing state (before streaming starts) - magenta color
+    // TODO: Rename this event/state to "reasoning" and associate it with actual reasoning tokens
+    // Currently "thinking" event fires before any response, not during reasoning token generation
+    if (isThinking) {
+        return (_jsxs(Box, { paddingX: 1, marginBottom: 0, flexDirection: "row", children: [_jsx(Text, { color: "magenta", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "magenta", children: " Processing" }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Press Esc or Ctrl+C to cancel"] })] }));
+    }
+    // Show active streaming state - cyan color
+    return (_jsxs(Box, { paddingX: 1, marginBottom: 0, flexDirection: "row", children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "cyan", children: " Processing" }), approvalQueueCount > 0 && (_jsxs(Text, { color: "yellow", children: [" \u2022 ", approvalQueueCount, " approval(s) queued"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Press Esc or Ctrl+C to cancel"] })] }));
+}

package/dist/cli/ink-cli/components/base/BaseAutocomplete.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Base Autocomplete Component
+ * Reusable autocomplete with filtering, scoring, and keyboard navigation
+ * Used by SlashCommandAutocomplete and ResourceAutocomplete
+ */
+import { type ReactNode } from 'react';
+export interface BaseAutocompleteProps<T> {
+    items: T[];
+    query: string;
+    isVisible: boolean;
+    isLoading?: boolean;
+    onSelect: (item: T) => void;
+    onLoadIntoInput?: (text: string) => void;
+    onClose: () => void;
+    filterFn: (item: T, query: string) => boolean;
+    scoreFn: (item: T, query: string) => number;
+    formatItem: (item: T, isSelected: boolean) => ReactNode;
+    formatLoadText?: (item: T) => string;
+    title: string;
+    maxVisibleItems?: number;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    borderColor?: string;
+}
+/**
+ * Generic autocomplete component with filtering, scoring, and keyboard navigation
+ */
+export declare function BaseAutocomplete<T>({ items, query, isVisible, isLoading, onSelect, onLoadIntoInput, onClose, filterFn, scoreFn, formatItem, formatLoadText, title, maxVisibleItems, loadingMessage, emptyMessage, borderColor, }: BaseAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=BaseAutocomplete.d.ts.map

package/dist/cli/ink-cli/components/base/BaseAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAutocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/base/BaseAutocomplete.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAc,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpF,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAChC,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,eAAe,EACf,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAU,EACV,cAAc,EACd,KAAK,EACL,eAAoB,EACpB,cAA6B,EAC7B,YAAiC,EACjC,WAAoB,GACvB,EAAE,qBAAqB,CAAC,CAAC,CAAC,kDA8I1B"}

package/dist/cli/ink-cli/components/base/BaseAutocomplete.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Base Autocomplete Component
+ * Reusable autocomplete with filtering, scoring, and keyboard navigation
+ * Used by SlashCommandAutocomplete and ResourceAutocomplete
+ */
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+/**
+ * Generic autocomplete component with filtering, scoring, and keyboard navigation
+ */
+export function BaseAutocomplete({ items, query, isVisible, isLoading = false, onSelect, onLoadIntoInput, onClose, filterFn, scoreFn, formatItem, formatLoadText, title, maxVisibleItems = 10, loadingMessage = 'Loading...', emptyMessage = 'No matches found', borderColor = 'cyan', }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const selectedIndexRef = useRef(0);
+    // Keep ref in sync
+    useEffect(() => {
+        selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+    // Filter and sort items
+    const filteredItems = useMemo(() => {
+        if (!query)
+            return items;
+        return items
+            .filter((item) => filterFn(item, query))
+            .sort((a, b) => {
+            const scoreA = scoreFn(a, query);
+            const scoreB = scoreFn(b, query);
+            return scoreB - scoreA; // Higher score first
+        });
+    }, [items, query, filterFn, scoreFn]);
+    // Reset selection when items change
+    useEffect(() => {
+        setSelectedIndex(0);
+        setScrollOffset(0);
+    }, [filteredItems.length]);
+    // Auto-scroll to keep selected item visible
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex >= scrollOffset + maxVisibleItems) {
+            setScrollOffset(Math.max(0, selectedIndex - maxVisibleItems + 1));
+        }
+    }, [selectedIndex, scrollOffset, maxVisibleItems]);
+    // Calculate visible items
+    const visibleItems = useMemo(() => {
+        return filteredItems.slice(scrollOffset, scrollOffset + maxVisibleItems);
+    }, [filteredItems, scrollOffset, maxVisibleItems]);
+    // Handle keyboard navigation
+    useInput((input, key) => {
+        if (!isVisible)
+            return;
+        const itemsLength = filteredItems.length;
+        if (itemsLength === 0)
+            return;
+        if (key.upArrow) {
+            setSelectedIndex((prev) => (prev - 1 + itemsLength) % itemsLength);
+        }
+        if (key.downArrow) {
+            setSelectedIndex((prev) => (prev + 1) % itemsLength);
+        }
+        if (key.escape) {
+            onClose();
+        }
+        // Tab: Load into input for editing
+        if (key.tab && onLoadIntoInput && formatLoadText && itemsLength > 0) {
+            const item = filteredItems[selectedIndexRef.current];
+            if (item) {
+                onLoadIntoInput(formatLoadText(item));
+            }
+            return;
+        }
+        // Enter: Select item
+        if (key.return && itemsLength > 0) {
+            const item = filteredItems[selectedIndexRef.current];
+            if (item) {
+                onSelect(item);
+            }
+        }
+    }, { isActive: isVisible });
+    if (!isVisible)
+        return null;
+    if (isLoading) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: loadingMessage }) }));
+    }
+    if (filteredItems.length === 0) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: emptyMessage }) }));
+    }
+    const hasMoreAbove = scrollOffset > 0;
+    const hasMoreBelow = scrollOffset + maxVisibleItems < filteredItems.length;
+    const totalItems = filteredItems.length;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: borderColor, flexDirection: "column", height: Math.min(maxVisibleItems + 3, totalItems + 3), children: [_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: [title, " (", selectedIndex + 1, "/", totalItems, ") - \u2191\u2193 navigate", onLoadIntoInput && ', Tab load', ', Enter select, Esc close'] }) }), hasMoreAbove && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2191 (", scrollOffset, " more above)"] }) })), visibleItems.map((item, visibleIndex) => {
+                const actualIndex = scrollOffset + visibleIndex;
+                const isSelected = actualIndex === selectedIndex;
+                return (_jsx(Box, { paddingX: 1, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex));
+            }), hasMoreBelow && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2193 (", totalItems - scrollOffset - maxVisibleItems, " more below)"] }) }))] }));
+}

package/dist/cli/ink-cli/components/base/BaseSelector.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Base Selector Component
+ * Reusable selector with keyboard navigation for lists
+ * Used by ModelSelector and SessionSelector
+ */
+import { type ReactNode } from 'react';
+export interface BaseSelectorProps<T> {
+    items: T[];
+    isVisible: boolean;
+    isLoading?: boolean;
+    selectedIndex: number;
+    onSelectIndex: (index: number) => void;
+    onSelect: (item: T) => void;
+    onClose: () => void;
+    formatItem: (item: T, isSelected: boolean) => ReactNode;
+    title: string;
+    maxVisibleItems?: number;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    borderColor?: string;
+}
+/**
+ * Generic selector component with keyboard navigation and scrolling
+ */
+export declare function BaseSelector<T>({ items, isVisible, isLoading, selectedIndex, onSelectIndex, onSelect, onClose, formatItem, title, maxVisibleItems, loadingMessage, emptyMessage, borderColor, }: BaseSelectorProps<T>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=BaseSelector.d.ts.map

package/dist/cli/ink-cli/components/base/BaseSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelector.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/base/BaseSelector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC5B,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,eAAoB,EACpB,cAA6B,EAC7B,YAA+B,EAC/B,WAAoB,GACvB,EAAE,iBAAiB,CAAC,CAAC,CAAC,kDAwHtB"}

package/dist/cli/ink-cli/components/base/BaseSelector.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Base Selector Component
+ * Reusable selector with keyboard navigation for lists
+ * Used by ModelSelector and SessionSelector
+ */
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+/**
+ * Generic selector component with keyboard navigation and scrolling
+ */
+export function BaseSelector({ items, isVisible, isLoading = false, selectedIndex, onSelectIndex, onSelect, onClose, formatItem, title, maxVisibleItems = 10, loadingMessage = 'Loading...', emptyMessage = 'No items found', borderColor = 'cyan', }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const selectedIndexRef = useRef(0);
+    // Keep ref in sync
+    useEffect(() => {
+        selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+    // Auto-scroll to keep selected item visible
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex >= scrollOffset + maxVisibleItems) {
+            setScrollOffset(Math.max(0, selectedIndex - maxVisibleItems + 1));
+        }
+    }, [selectedIndex, scrollOffset, maxVisibleItems]);
+    // Calculate visible items
+    const visibleItems = useMemo(() => {
+        return items.slice(scrollOffset, scrollOffset + maxVisibleItems);
+    }, [items, scrollOffset, maxVisibleItems]);
+    // Handle keyboard navigation
+    useInput((_inputChar, key) => {
+        if (!isVisible)
+            return;
+        const itemsLength = items.length;
+        if (itemsLength === 0)
+            return;
+        if (key.upArrow) {
+            const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
+            selectedIndexRef.current = nextIndex;
+            onSelectIndex(nextIndex);
+        }
+        if (key.downArrow) {
+            const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
+            selectedIndexRef.current = nextIndex;
+            onSelectIndex(nextIndex);
+        }
+        if (key.escape) {
+            onClose();
+        }
+        if (key.return && itemsLength > 0) {
+            const item = items[selectedIndexRef.current];
+            if (item !== undefined) {
+                onSelect(item);
+            }
+        }
+    }, { isActive: isVisible });
+    if (!isVisible)
+        return null;
+    if (isLoading) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: loadingMessage }) }));
+    }
+    if (items.length === 0) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: emptyMessage }) }));
+    }
+    const hasMoreAbove = scrollOffset > 0;
+    const hasMoreBelow = scrollOffset + maxVisibleItems < items.length;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: borderColor, flexDirection: "column", height: Math.min(maxVisibleItems + 3, items.length + 3), children: [_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: [title, " (", selectedIndex + 1, "/", items.length, ") - \u2191\u2193 to navigate, Enter to select, Esc to close"] }) }), hasMoreAbove && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2191 (", scrollOffset, " more above)"] }) })), visibleItems.map((item, visibleIndex) => {
+                const actualIndex = scrollOffset + visibleIndex;
+                const isSelected = actualIndex === selectedIndex;
+                return (_jsx(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, children: formatItem(item, isSelected) }, actualIndex));
+            }), hasMoreBelow && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2193 (", items.length - scrollOffset - maxVisibleItems, " more below)"] }) }))] }));
+}

package/dist/cli/ink-cli/components/base/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Base components module exports
+ */
+export { BaseSelector, type BaseSelectorProps } from './BaseSelector.js';
+export { BaseAutocomplete, type BaseAutocompleteProps } from './BaseAutocomplete.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/cli/ink-cli/components/base/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/base/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/cli/ink-cli/components/base/index.js

@@ -0,0 +1,5 @@
+/**
+ * Base components module exports
+ */
+export { BaseSelector } from './BaseSelector.js';
+export { BaseAutocomplete } from './BaseAutocomplete.js';

package/dist/cli/ink-cli/components/chat/ChatView.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ChatView Component
+ * Main chat display area combining header and messages
+ */
+import type { Message, StartupInfo } from '../../state/types.js';
+interface ChatViewProps {
+    messages: Message[];
+    modelName: string;
+    sessionId?: string | undefined;
+    hasActiveSession: boolean;
+    startupInfo: StartupInfo;
+}
+/**
+ * Pure presentational component for chat area
+ * Combines header and message list
+ */
+export declare function ChatView({ messages, modelName, sessionId, hasActiveSession, startupInfo, }: ChatViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatView.d.ts.map

package/dist/cli/ink-cli/components/chat/ChatView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/ChatView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEjE,UAAU,aAAa;IACnB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,WAAW,GACd,EAAE,aAAa,2CAYf"}