dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/components/overlays/SearchOverlay.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SearchOverlay Component
+ * Interactive search overlay with real-time results and navigation
+ */
+import { useState, useEffect, useRef, forwardRef, useImperativeHandle, useCallback, } from 'react';
+import { Box, Text } from 'ink';
+const MAX_VISIBLE_RESULTS = 6;
+const SEARCH_DEBOUNCE_MS = 300;
+/**
+ * Interactive search overlay - search messages across sessions
+ */
+const SearchOverlay = forwardRef(function SearchOverlay({ isVisible, onClose, onSelectResult, agent }, ref) {
+    const [state, setState] = useState({
+        query: '',
+        results: [],
+        isLoading: false,
+        selectedIndex: 0,
+        total: 0,
+        hasMore: false,
+        error: null,
+    });
+    const searchTimeoutRef = useRef(null);
+    const scrollOffset = useRef(0);
+    // Monotonic counter to prevent out-of-order async responses from overwriting newer results
+    const searchSeqRef = useRef(0);
+    // Reset state when becoming visible
+    useEffect(() => {
+        if (isVisible) {
+            setState({
+                query: '',
+                results: [],
+                isLoading: false,
+                selectedIndex: 0,
+                total: 0,
+                hasMore: false,
+                error: null,
+            });
+            scrollOffset.current = 0;
+        }
+    }, [isVisible]);
+    // Debounced search
+    const performSearch = useCallback(async (query) => {
+        // Increment sequence to track this request
+        const seq = ++searchSeqRef.current;
+        if (!query.trim()) {
+            setState((prev) => ({
+                ...prev,
+                results: [],
+                total: 0,
+                hasMore: false,
+                isLoading: false,
+                error: null,
+            }));
+            return;
+        }
+        setState((prev) => ({ ...prev, isLoading: true, error: null }));
+        try {
+            const response = await agent.searchMessages(query, { limit: 20 });
+            // Only apply results if this is still the latest request
+            if (seq !== searchSeqRef.current)
+                return;
+            setState((prev) => ({
+                ...prev,
+                results: response.results,
+                total: response.total,
+                hasMore: response.hasMore,
+                isLoading: false,
+                selectedIndex: 0,
+            }));
+            scrollOffset.current = 0;
+        }
+        catch (error) {
+            // Only apply error if this is still the latest request
+            if (seq !== searchSeqRef.current)
+                return;
+            setState((prev) => ({
+                ...prev,
+                results: [],
+                total: 0,
+                hasMore: false,
+                isLoading: false,
+                error: error instanceof Error ? error.message : 'Search failed',
+            }));
+        }
+    }, [agent]);
+    // Handle input changes with debounce
+    const updateQuery = useCallback((newQuery) => {
+        setState((prev) => ({ ...prev, query: newQuery }));
+        // Clear existing timeout
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        // Debounce search
+        searchTimeoutRef.current = setTimeout(() => {
+            void performSearch(newQuery);
+        }, SEARCH_DEBOUNCE_MS);
+    }, [performSearch]);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Handle keyboard input
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            if (!isVisible)
+                return false;
+            // Escape to close
+            if (key.escape) {
+                onClose();
+                return true;
+            }
+            // Enter to select result
+            if (key.return && state.results.length > 0) {
+                const selectedResult = state.results[state.selectedIndex];
+                if (selectedResult && onSelectResult) {
+                    onSelectResult(selectedResult);
+                }
+                onClose();
+                return true;
+            }
+            // Arrow up
+            if (key.upArrow) {
+                setState((prev) => {
+                    const newIndex = Math.max(0, prev.selectedIndex - 1);
+                    // Adjust scroll offset if needed
+                    if (newIndex < scrollOffset.current) {
+                        scrollOffset.current = newIndex;
+                    }
+                    return { ...prev, selectedIndex: newIndex };
+                });
+                return true;
+            }
+            // Arrow down
+            if (key.downArrow) {
+                setState((prev) => {
+                    const newIndex = Math.min(prev.results.length - 1, prev.selectedIndex + 1);
+                    // Adjust scroll offset if needed
+                    if (newIndex >= scrollOffset.current + MAX_VISIBLE_RESULTS) {
+                        scrollOffset.current = newIndex - MAX_VISIBLE_RESULTS + 1;
+                    }
+                    return { ...prev, selectedIndex: newIndex };
+                });
+                return true;
+            }
+            // Backspace
+            if (key.backspace || key.delete) {
+                updateQuery(state.query.slice(0, -1));
+                return true;
+            }
+            // Regular character input
+            if (input && !key.ctrl && !key.meta) {
+                updateQuery(state.query + input);
+                return true;
+            }
+            return false;
+        },
+    }), [isVisible, onClose, onSelectResult, state, updateQuery]);
+    if (!isVisible)
+        return null;
+    // Calculate visible results window
+    const visibleResults = state.results.slice(scrollOffset.current, scrollOffset.current + MAX_VISIBLE_RESULTS);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Search Messages" }), state.total > 0 && (_jsxs(Text, { color: "gray", children: [' ', "(", state.total, " result", state.total !== 1 ? 's' : '', ")"] }))] }), _jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "> " }), _jsx(Text, { children: state.query }), _jsx(Text, { color: "cyan", children: "_" })] }), state.isLoading && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellowBright", children: "Searching..." }) })), state.error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: state.error }) })), !state.isLoading && state.results.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [visibleResults.map((result, idx) => {
+                        const actualIndex = scrollOffset.current + idx;
+                        const isSelected = actualIndex === state.selectedIndex;
+                        const roleColor = result.message.role === 'user'
+                            ? 'blue'
+                            : result.message.role === 'assistant'
+                                ? 'green'
+                                : 'yellowBright';
+                        return (_jsxs(Box, { flexDirection: "column", paddingLeft: isSelected ? 0 : 2, children: [_jsxs(Box, { children: [isSelected && (_jsx(Text, { color: "cyan", bold: true, children: '> ' })), _jsx(Text, { color: "gray", children: result.sessionId.slice(0, 8) }), _jsx(Text, { children: " " }), _jsxs(Text, { color: roleColor, bold: isSelected, children: ["[", result.message.role, "]"] })] }), _jsx(Box, { paddingLeft: isSelected ? 2 : 0, children: _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: ['  ', truncateContext(result.context, 60)] }) })] }, `${result.sessionId}-${result.messageIndex}`));
+                    }), state.results.length > MAX_VISIBLE_RESULTS && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["Showing ", scrollOffset.current + 1, "-", Math.min(scrollOffset.current + MAX_VISIBLE_RESULTS, state.results.length), ' ', "of ", state.results.length, state.hasMore ? '+' : ''] }) }))] })), !state.isLoading && state.query && state.results.length === 0 && !state.error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["No results found for \"", state.query, "\""] }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "\u2191\u2193 navigate \u2022 Enter select \u2022 Esc close" }) })] }));
+});
+/**
+ * Truncate context text for display
+ */
+function truncateContext(context, maxLength) {
+    // Clean up whitespace
+    const cleaned = context.replace(/\s+/g, ' ').trim();
+    if (cleaned.length <= maxLength) {
+        return cleaned;
+    }
+    return cleaned.slice(0, maxLength - 3) + '...';
+}
+export default SearchOverlay;

package/dist/cli/ink-cli/components/overlays/SessionSelectorRefactored.d.ts

@@ -3,6 +3,8 @@
  * Now a thin wrapper around BaseSelector
  * Eliminates ~200 lines of code by using base component
  */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
 import type { DextoAgent } from '@dexto/core';
 interface SessionSelectorProps {
     isVisible: boolean;
@@ -11,11 +13,14 @@ interface SessionSelectorProps {
     agent: DextoAgent;
     currentSessionId?: string | undefined;
 }
+export interface SessionSelectorHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
 /**
  * Session selector - now a thin wrapper around BaseSelector
  * Provides data fetching and formatting only
  * Uses explicit currentSessionId prop (WebUI pattern) instead of getCurrentSessionId
  */
-export default function SessionSelector({ isVisible, onSelectSession, onClose, agent, currentSessionId, }: SessionSelectorProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const SessionSelector: React.ForwardRefExoticComponent<SessionSelectorProps & React.RefAttributes<SessionSelectorHandle>>;
+export default SessionSelector;
 //# sourceMappingURL=SessionSelectorRefactored.d.ts.map

package/dist/cli/ink-cli/components/overlays/SessionSelectorRefactored.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionSelectorRefactored.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/SessionSelectorRefactored.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAC;AAI/D,UAAU,oBAAoB;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,SAAS,EACT,eAAe,EACf,OAAO,EACP,KAAK,EACL,gBAAgB,GACnB,EAAE,oBAAoB,2CAoItB"}
+{"version":3,"file":"SessionSelectorRefactored.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/SessionSelectorRefactored.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAC;AAI/D,UAAU,oBAAoB;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAQD;;;;GAIG;AACH,QAAA,MAAM,eAAe,oGA+JpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cli/ink-cli/components/overlays/SessionSelectorRefactored.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Now a thin wrapper around BaseSelector
  * Eliminates ~200 lines of code by using base component
  */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
 import { Text } from 'ink';
 import { logger } from '@dexto/core';
 import { BaseSelector } from '../base/BaseSelector.js';
@@ -13,7 +13,14 @@ import { BaseSelector } from '../base/BaseSelector.js';
  * Provides data fetching and formatting only
  * Uses explicit currentSessionId prop (WebUI pattern) instead of getCurrentSessionId
  */
-export default function SessionSelector({ isVisible, onSelectSession, onClose, agent, currentSessionId, }) {
+const SessionSelector = forwardRef(function SessionSelector({ isVisible, onSelectSession, onClose, agent, currentSessionId }, ref) {
+    const baseSelectorRef = useRef(null);
+    // Forward handleInput to BaseSelector
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            return baseSelectorRef.current?.handleInput(input, key) ?? false;
+        },
+    }), []);
     const [sessions, setSessions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -77,10 +84,16 @@ export default function SessionSelector({ isVisible, onSelectSession, onClose, a
     // Format session for display
     const formatSession = (session) => {
         const parts = [];
+        // Add title if available, otherwise use "Session" as fallback
         if (session.metadata?.title) {
             parts.push(session.metadata.title);
         }
+        else {
+            parts.push('Session');
+        }
+        // Always show short ID
         parts.push(session.id.slice(0, 8));
+        // Show last activity time if available
         if (session.metadata?.lastActivity) {
             const now = Date.now();
             const diff = now - session.metadata.lastActivity;
@@ -103,10 +116,11 @@ export default function SessionSelector({ isVisible, onSelectSession, onClose, a
         return parts.join(' • ');
     };
     // Format session item for display
-    const formatItem = (session, isSelected) => (_jsxs(_Fragment, { children: [_jsx(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: formatSession(session) }), session.isCurrent && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: [' ', "\u2190 Current"] }))] }));
+    const formatItem = (session, isSelected) => (_jsxs(_Fragment, { children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: formatSession(session) }), session.isCurrent && (_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: [' ', "\u2190 Current"] }))] }));
     // Handle selection
     const handleSelect = (session) => {
         onSelectSession(session.id);
     };
-    return (_jsx(BaseSelector, { items: sessions, isVisible: isVisible, isLoading: isLoading, selectedIndex: selectedIndex, onSelectIndex: setSelectedIndex, onSelect: handleSelect, onClose: onClose, formatItem: formatItem, title: "Select Session", borderColor: "cyan", loadingMessage: "Loading sessions...", emptyMessage: "No sessions found" }));
-}
+    return (_jsx(BaseSelector, { ref: baseSelectorRef, items: sessions, isVisible: isVisible, isLoading: isLoading, selectedIndex: selectedIndex, onSelectIndex: setSelectedIndex, onSelect: handleSelect, onClose: onClose, formatItem: formatItem, title: "Select Session", borderColor: "cyan", loadingMessage: "Loading sessions...", emptyMessage: "No sessions found" }));
+});
+export default SessionSelector;

package/dist/cli/ink-cli/components/overlays/SessionSubcommandSelector.d.ts

@@ -0,0 +1,21 @@
+/**
+ * SessionSubcommandSelector Component
+ * Shows session management options (list, history, delete, switch)
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+export type SessionAction = 'list' | 'history' | 'delete' | 'switch';
+interface SessionSubcommandSelectorProps {
+    isVisible: boolean;
+    onSelect: (action: SessionAction) => void;
+    onClose: () => void;
+}
+export interface SessionSubcommandSelectorHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Session subcommand selector - shows session management options
+ */
+declare const SessionSubcommandSelector: React.ForwardRefExoticComponent<SessionSubcommandSelectorProps & React.RefAttributes<SessionSubcommandSelectorHandle>>;
+export default SessionSubcommandSelector;
+//# sourceMappingURL=SessionSubcommandSelector.d.ts.map

package/dist/cli/ink-cli/components/overlays/SessionSubcommandSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionSubcommandSelector.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/SessionSubcommandSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,UAAU,8BAA8B;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,+BAA+B;IAC5C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAgBD;;GAEG;AACH,QAAA,MAAM,yBAAyB,wHA2D7B,CAAC;AAEH,eAAe,yBAAyB,CAAC"}

package/dist/cli/ink-cli/components/overlays/SessionSubcommandSelector.js

@@ -0,0 +1,42 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SessionSubcommandSelector Component
+ * Shows session management options (list, history, delete, switch)
+ */
+import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Text } from 'ink';
+import { BaseSelector } from '../base/BaseSelector.js';
+const SESSION_OPTIONS = [
+    { action: 'list', label: 'list', description: 'List all sessions', icon: '📋' },
+    { action: 'switch', label: 'switch', description: 'Switch to another session', icon: '🔄' },
+    { action: 'history', label: 'history', description: 'Show session history', icon: '📜' },
+    { action: 'delete', label: 'delete', description: 'Delete a session', icon: '🗑️' },
+];
+/**
+ * Session subcommand selector - shows session management options
+ */
+const SessionSubcommandSelector = forwardRef(function SessionSubcommandSelector({ isVisible, onSelect, onClose }, ref) {
+    const baseSelectorRef = useRef(null);
+    // Forward handleInput to BaseSelector
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            return baseSelectorRef.current?.handleInput(input, key) ?? false;
+        },
+    }), []);
+    const [options] = useState(SESSION_OPTIONS);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Reset selection when becoming visible
+    useEffect(() => {
+        if (isVisible) {
+            setSelectedIndex(0);
+        }
+    }, [isVisible]);
+    // Format option for display
+    const formatItem = (option, isSelected) => (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [option.icon, " "] }), _jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: option.label }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: [" - ", option.description] })] }));
+    // Handle selection
+    const handleSelect = (option) => {
+        onSelect(option.action);
+    };
+    return (_jsx(BaseSelector, { ref: baseSelectorRef, items: options, isVisible: isVisible, isLoading: false, selectedIndex: selectedIndex, onSelectIndex: setSelectedIndex, onSelect: handleSelect, onClose: onClose, formatItem: formatItem, title: "Session Management", borderColor: "blue", emptyMessage: "No options available" }));
+});
+export default SessionSubcommandSelector;

package/dist/cli/ink-cli/components/overlays/StreamSelector.d.ts

@@ -0,0 +1,20 @@
+/**
+ * StreamSelector Component
+ * Interactive selector for toggling streaming mode
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+interface StreamSelectorProps {
+    isVisible: boolean;
+    onSelect: (enabled: boolean) => void;
+    onClose: () => void;
+}
+export interface StreamSelectorHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Stream selector - toggle streaming on/off
+ */
+declare const StreamSelector: React.ForwardRefExoticComponent<StreamSelectorProps & React.RefAttributes<StreamSelectorHandle>>;
+export default StreamSelector;
+//# sourceMappingURL=StreamSelector.d.ts.map

package/dist/cli/ink-cli/components/overlays/StreamSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamSelector.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/StreamSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAI/D,UAAU,mBAAmB;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAUD;;GAEG;AACH,QAAA,MAAM,cAAc,kGAuFnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cli/ink-cli/components/overlays/StreamSelector.js

@@ -0,0 +1,58 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StreamSelector Component
+ * Interactive selector for toggling streaming mode
+ */
+import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Text } from 'ink';
+import { BaseSelector } from '../base/BaseSelector.js';
+import { isStreamingEnabled, setStreamingEnabled } from '../../state/streaming-state.js';
+/**
+ * Stream selector - toggle streaming on/off
+ */
+const StreamSelector = forwardRef(function StreamSelector({ isVisible, onSelect, onClose }, ref) {
+    const baseSelectorRef = useRef(null);
+    // Forward handleInput to BaseSelector
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            return baseSelectorRef.current?.handleInput(input, key) ?? false;
+        },
+    }), []);
+    const [options, setOptions] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Build options list with current indicator
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        const currentEnabled = isStreamingEnabled();
+        const optionList = [
+            {
+                id: 'enabled',
+                label: 'Enabled (Experimental)',
+                description: 'Show responses as they are generated',
+                icon: '▶️',
+                isCurrent: currentEnabled,
+            },
+            {
+                id: 'disabled',
+                label: 'Disabled',
+                description: 'Show complete response when finished (default)',
+                icon: '⏸️',
+                isCurrent: !currentEnabled,
+            },
+        ];
+        setOptions(optionList);
+        // Set initial selection to current state
+        setSelectedIndex(currentEnabled ? 0 : 1);
+    }, [isVisible]);
+    // Format option item for display
+    const formatItem = (option, isSelected) => (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [option.icon, " "] }), _jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: option.label }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: [" - ", option.description] }), option.isCurrent && (_jsxs(Text, { color: "green", bold: true, children: [' ', "\u2713"] }))] }));
+    // Handle selection
+    const handleSelect = (option) => {
+        const enabled = option.id === 'enabled';
+        setStreamingEnabled(enabled);
+        onSelect(enabled);
+    };
+    return (_jsx(BaseSelector, { ref: baseSelectorRef, items: options, isVisible: isVisible, isLoading: false, selectedIndex: selectedIndex, onSelectIndex: setSelectedIndex, onSelect: handleSelect, onClose: onClose, formatItem: formatItem, title: "Streaming Mode", borderColor: "cyan", emptyMessage: "No options available" }));
+});
+export default StreamSelector;

package/dist/cli/ink-cli/components/overlays/ToolBrowser.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ToolBrowser Component
+ * Interactive browser for exploring available tools
+ * Features:
+ * - Search/filter tools by name
+ * - View tool details (description, schema)
+ * - Shows source (MCP server or Internal)
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+import type { DextoAgent } from '@dexto/core';
+interface ToolBrowserProps {
+    isVisible: boolean;
+    onClose: () => void;
+    agent: DextoAgent;
+}
+export interface ToolBrowserHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Tool browser with search and detail views
+ */
+declare const ToolBrowser: React.ForwardRefExoticComponent<ToolBrowserProps & React.RefAttributes<ToolBrowserHandle>>;
+export default ToolBrowser;
+//# sourceMappingURL=ToolBrowser.d.ts.map

package/dist/cli/ink-cli/components/overlays/ToolBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolBrowser.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/ToolBrowser.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,UAAU,gBAAgB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAeD;;GAEG;AACH,QAAA,MAAM,WAAW,4FAoWf,CAAC;AAyQH,eAAe,WAAW,CAAC"}