dexto 1.2.4 → 1.2.5

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInput, Text } from 'ink';
+/**
+ * Custom input component that handles keyboard shortcuts
+ * Fully custom implementation without TextInput to properly handle shortcuts
+ */
+export default function CustomInput({ value, onChange, onSubmit, placeholder, isProcessing = false, onWordDelete, onLineDelete, onToggleMultiLine, }) {
+    // Handle all keyboard input directly
+    useInput((inputChar, key) => {
+        if (isProcessing)
+            return;
+        // Shift+Enter = toggle multi-line mode
+        if (key.return && key.shift) {
+            onToggleMultiLine?.();
+            return;
+        }
+        // Enter = submit
+        if (key.return) {
+            onSubmit(value);
+            return;
+        }
+        // Ctrl+U = line delete (Unix standard, also what Cmd+Backspace becomes)
+        if (key.ctrl && inputChar === 'u') {
+            onLineDelete?.();
+            return;
+        }
+        // Ctrl+W = word delete (Unix standard, also what Option+Backspace becomes)
+        if (key.ctrl && inputChar === 'w') {
+            onWordDelete?.();
+            return;
+        }
+        // Regular backspace/delete
+        if (key.backspace || key.delete) {
+            onChange(value.slice(0, -1));
+            return;
+        }
+        // Regular character input
+        if (inputChar && !key.ctrl && !key.meta) {
+            onChange(value + inputChar);
+        }
+    }, { isActive: true });
+    // Render with block cursor highlighting the character at cursor position
+    if (!value && placeholder) {
+        // Empty input - highlight first character of placeholder
+        const firstChar = placeholder[0] || ' ';
+        const rest = placeholder.slice(1);
+        return (_jsxs(Text, { children: [_jsx(Text, { color: "black", backgroundColor: "green", children: firstChar }), _jsx(Text, { dimColor: true, children: rest })] }));
+    }
+    // Has value - highlight character after end (space)
+    return (_jsxs(Text, { children: [value, _jsx(Text, { color: "black", backgroundColor: "green", children: ' ' })] }));
+}

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

@@ -0,0 +1,16 @@
+interface CustomTextInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    onWordDelete?: () => void;
+    onLineDelete?: () => void;
+    onNewline?: () => void;
+}
+/**
+ * Custom TextInput wrapper that handles keyboard shortcuts
+ * before TextInput consumes them
+ */
+export default function CustomTextInput({ value, onChange, onSubmit, placeholder, onWordDelete, onLineDelete, onNewline, }: CustomTextInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CustomTextInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomTextInput.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/CustomTextInput.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,GACZ,EAAE,oBAAoB,2CAyCtB"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInput } from 'ink';
+import TextInput from 'ink-text-input';
+/**
+ * Custom TextInput wrapper that handles keyboard shortcuts
+ * before TextInput consumes them
+ */
+export default function CustomTextInput({ value, onChange, onSubmit, placeholder, onWordDelete, onLineDelete, onNewline, }) {
+    // Use useInput to intercept keyboard shortcuts
+    // This needs to run with isActive: true to intercept before TextInput
+    useInput((inputChar, key) => {
+        // Handle Shift+Enter for newline
+        if (key.return && key.shift) {
+            onNewline?.();
+            return;
+        }
+        // Handle word deletion (Cmd+Delete or Cmd+Backspace on Mac, Ctrl+Delete or Ctrl+Backspace on Windows/Linux)
+        // Note: On Mac, Cmd+Backspace is the standard for word deletion
+        if ((key.delete || key.backspace) && (key.meta || key.ctrl)) {
+            onWordDelete?.();
+            return;
+        }
+        // Handle line deletion (Cmd+Shift+Delete or Ctrl+U)
+        if ((key.delete && key.meta && key.shift) || (key.ctrl && inputChar === 'u')) {
+            onLineDelete?.();
+            return;
+        }
+        // Handle Ctrl+Shift+Delete as additional word deletion shortcut (Windows/Linux)
+        if (key.delete && key.ctrl && key.shift) {
+            onWordDelete?.();
+            return;
+        }
+    }, { isActive: true });
+    return (_jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit, ...(placeholder ? { placeholder } : {}) }));
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Editable multi-line input component
+ * Allows editing text with newlines, submission with Cmd+Enter
+ */
+interface EditableMultiLineInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    isProcessing?: boolean;
+    onToggleSingleLine?: () => void;
+}
+/**
+ * Multi-line input component
+ * - Enter adds newline
+ * - Cmd+Enter or Ctrl+Enter to submit
+ * - Shift+Enter to toggle back to single-line
+ */
+export default function EditableMultiLineInput({ value, onChange, onSubmit, placeholder, isProcessing, onToggleSingleLine, }: EditableMultiLineInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditableMultiLineInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableMultiLineInput.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/EditableMultiLineInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,UAAU,2BAA2B;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC3C,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAoB,EACpB,kBAAkB,GACrB,EAAE,2BAA2B,2CAuF7B"}

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

@@ -0,0 +1,49 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+/**
+ * Multi-line input component
+ * - Enter adds newline
+ * - Cmd+Enter or Ctrl+Enter to submit
+ * - Shift+Enter to toggle back to single-line
+ */
+export default function EditableMultiLineInput({ value, onChange, onSubmit, placeholder, isProcessing = false, onToggleSingleLine, }) {
+    useInput((inputChar, key) => {
+        if (isProcessing)
+            return;
+        // Cmd+Enter or Ctrl+Enter = submit
+        if (key.return && (key.meta || key.ctrl)) {
+            onSubmit(value);
+            return;
+        }
+        // Shift+Enter = toggle back to single-line mode
+        if (key.return && key.shift) {
+            onToggleSingleLine?.();
+            return;
+        }
+        // Enter = add newline
+        if (key.return) {
+            onChange(value + '\n');
+            return;
+        }
+        // Backspace = delete last character
+        if (key.backspace || key.delete) {
+            onChange(value.slice(0, -1));
+            return;
+        }
+        // Regular character input (ignore modifier key combinations)
+        if (inputChar && !key.ctrl && !key.meta) {
+            onChange(value + inputChar);
+        }
+    }, { isActive: true });
+    // Split into lines for display
+    const lines = value ? value.split('\n') : [''];
+    const MAX_VISIBLE_LINES = 10;
+    // Calculate visible lines (show last N lines if content is too long)
+    const visibleLines = lines.length > MAX_VISIBLE_LINES ? lines.slice(-MAX_VISIBLE_LINES) : lines;
+    const hiddenCount = lines.length - visibleLines.length;
+    return (_jsxs(Box, { flexDirection: "column", paddingY: 1, children: [hiddenCount > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["... (", hiddenCount, " more lines above)"] }) })), visibleLines.map((line, index) => {
+                const isFirstVisibleLine = index === 0;
+                const isLastLine = index === visibleLines.length - 1;
+                return (_jsxs(Box, { flexDirection: "row", children: [isFirstVisibleLine ? (_jsx(Text, { color: "green", bold: true, children: '> ' })) : (_jsx(Text, { color: "green", dimColor: true, children: '  ' })), _jsxs(Text, { children: [!value && isFirstVisibleLine && placeholder ? (_jsx(Text, { dimColor: true, children: placeholder })) : (line || ' '), isLastLine && _jsx(Text, { color: "green", children: "\u258B" })] })] }, index));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Multi-line: Cmd+Enter (or Ctrl+Enter) to submit \u2022 Shift+Enter for single-line" }) })] }));
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Error Boundary Component
+ * Catches and displays errors in the component tree
+ */
+import React from 'react';
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,kBAAkB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,kBAAkB;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACvB;AAED,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAC1E,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIxD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAOjE,MAAM,IAAI,KAAK,CAAC,SAAS;CAiBrC"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Error Boundary Component
+ * Catches and displays errors in the component tree
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { logger } from '@dexto/core';
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        logger.error(`Error in ErrorBoundary: ${error.message}`, {
+            error,
+            componentStack: errorInfo.componentStack,
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "red", children: [_jsx(Text, { color: "red", bold: true, children: "\u274C CLI Error" }), _jsx(Text, { color: "red", children: this.state.error?.message || 'Unknown error' }), _jsx(Text, { color: "yellow", dimColor: true, children: "Press Ctrl+C to exit" })] }));
+        }
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,12 @@
+interface MultiLineInputProps {
+    value: string;
+    placeholder?: string;
+    prompt?: string;
+}
+/**
+ * Custom multi-line input display component
+ * Calculates height based on content and displays text with proper line breaks
+ */
+export default function MultiLineInput({ value, placeholder, prompt }: MultiLineInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MultiLineInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLineInput.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/MultiLineInput.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAa,EAAE,EAAE,mBAAmB,2CAsDhG"}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+/**
+ * Custom multi-line input display component
+ * Calculates height based on content and displays text with proper line breaks
+ */
+export default function MultiLineInput({ value, placeholder, prompt = '> ' }) {
+    // Calculate number of lines (split by newlines and count)
+    const lines = useMemo(() => {
+        if (!value)
+            return [];
+        return value.split('\n');
+    }, [value]);
+    const lineCount = lines.length;
+    // If empty, show placeholder
+    if (!value && placeholder) {
+        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "green", bold: true, children: prompt }), _jsx(Text, { dimColor: true, children: placeholder })] }));
+    }
+    // Display multi-line text - show last N lines if too many
+    const visibleLines = lineCount > 10 ? lines.slice(-10) : lines;
+    const startOffset = lineCount > 10 ? lineCount - 10 : 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [startOffset > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", dimColor: true, children: ["... (", startOffset, " more lines above)"] }) })), visibleLines.map((line, index) => {
+                const actualIndex = startOffset + index;
+                return (_jsxs(Box, { flexDirection: "row", children: [index === 0 && (_jsx(Text, { color: "green", bold: true, children: prompt })), index > 0 && (_jsx(Text, { color: "green", dimColor: true, children: ' '.repeat(prompt.length) })), _jsx(Text, { wrap: "wrap", children: line || ' ' })] }, actualIndex));
+            })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { ResourceMetadata } from '@dexto/core';
+import type { DextoAgent } from '@dexto/core';
+interface ResourceAutocompleteProps {
+    isVisible: boolean;
+    searchQuery: string;
+    onSelectResource: (resource: ResourceMetadata) => void;
+    onLoadIntoInput?: (text: string) => void;
+    onClose: () => void;
+    agent: DextoAgent;
+}
+export default function ResourceAutocomplete({ isVisible, searchQuery, onSelectResource, onLoadIntoInput, onClose, agent, }: ResourceAutocompleteProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ResourceAutocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/ResourceAutocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,yBAAyB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AA6ED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EACzC,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,KAAK,GACR,EAAE,yBAAyB,kDAyP3B"}

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

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+/**
+ * Get match score for resource: 0 = no match, 1 = description/URI match, 2 = name includes, 3 = name starts with
+ * Prioritizes name matches over description/URI matches
+ */
+function getResourceMatchScore(resource, query) {
+    if (!query)
+        return 3; // Show all when no query
+    const lowerQuery = query.toLowerCase();
+    const name = (resource.name || '').toLowerCase();
+    const uri = resource.uri.toLowerCase();
+    const uriFilename = uri.split('/').pop()?.toLowerCase() || '';
+    const description = (resource.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: URI filename starts with query
+    if (uriFilename.startsWith(lowerQuery)) {
+        return 2;
+    }
+    // Fourth priority: URI filename includes query
+    if (uriFilename.includes(lowerQuery)) {
+        return 2;
+    }
+    // Fifth priority: URI includes query
+    if (uri.includes(lowerQuery)) {
+        return 1;
+    }
+    // Lowest priority: description includes query
+    if (description.includes(lowerQuery)) {
+        return 1;
+    }
+    return 0; // No match
+}
+/**
+ * Check if resource matches query (for filtering)
+ */
+function matchesQuery(resource, query) {
+    return getResourceMatchScore(resource, query) > 0;
+}
+/**
+ * Sort resources by match score (highest first), then alphabetically
+ */
+function sortResources(resources, query) {
+    if (!query)
+        return resources;
+    const lowerQuery = query.toLowerCase();
+    return [...resources].sort((a, b) => {
+        const scoreA = getResourceMatchScore(a, lowerQuery);
+        const scoreB = getResourceMatchScore(b, lowerQuery);
+        // Sort by score first (higher score first)
+        if (scoreA !== scoreB) {
+            return scoreB - scoreA;
+        }
+        // If scores are equal, sort alphabetically by name
+        const aName = (a.name || '').toLowerCase();
+        const bName = (b.name || '').toLowerCase();
+        return aName.localeCompare(bName);
+    });
+}
+export default function ResourceAutocomplete({ isVisible, searchQuery, onSelectResource, onLoadIntoInput, onClose, agent, }) {
+    const [resources, setResources] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const selectedIndexRef = useRef(0);
+    const MAX_VISIBLE_ITEMS = 8; // Number of items visible at once
+    // Keep ref in sync
+    useEffect(() => {
+        selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+    // Fetch resources from agent
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        let cancelled = false;
+        setIsLoading(true);
+        const fetchResources = async () => {
+            try {
+                const resourceSet = await agent.listResources();
+                const resourceList = Object.values(resourceSet);
+                if (!cancelled) {
+                    setResources(resourceList);
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                if (!cancelled) {
+                    console.error('Failed to fetch resources:', error);
+                    setResources([]);
+                    setIsLoading(false);
+                }
+            }
+        };
+        void fetchResources();
+        return () => {
+            cancelled = true;
+        };
+    }, [isVisible, agent]);
+    // Extract query from @mention (everything after @)
+    const mentionQuery = useMemo(() => {
+        // Find the last @ that's at start or after space
+        const atIndex = searchQuery.lastIndexOf('@');
+        if (atIndex === -1)
+            return '';
+        // Check if @ is at start or preceded by space
+        const prevChar = searchQuery[atIndex - 1];
+        if (atIndex === 0 || (prevChar && /\s/.test(prevChar))) {
+            return searchQuery.slice(atIndex + 1).trim();
+        }
+        return '';
+    }, [searchQuery]);
+    // Filter and sort resources (no limit - scrolling handles it)
+    const filteredResources = useMemo(() => {
+        const matched = resources.filter((r) => matchesQuery(r, mentionQuery));
+        return sortResources(matched, mentionQuery);
+    }, [resources, mentionQuery]);
+    // Reset selected index and scroll when resources change
+    useEffect(() => {
+        setSelectedIndex(0);
+        setScrollOffset(0);
+    }, [filteredResources.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 visibleResources = useMemo(() => {
+        return filteredResources.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS);
+    }, [filteredResources, scrollOffset]);
+    // Handle keyboard navigation
+    useInput((input, key) => {
+        if (!isVisible)
+            return;
+        const itemsLength = filteredResources.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 to load into input (for editing before selection)
+        if (key.tab && itemsLength > 0) {
+            const resource = filteredResources[selectedIndexRef.current];
+            if (!resource)
+                return;
+            // Get the @ position and construct the text to load
+            const atIndex = searchQuery.lastIndexOf('@');
+            if (atIndex >= 0) {
+                const before = searchQuery.slice(0, atIndex + 1);
+                const uriParts = resource.uri.split('/');
+                const reference = resource.name || uriParts[uriParts.length - 1] || resource.uri;
+                onLoadIntoInput?.(`${before}${reference}`);
+            }
+            else {
+                // Fallback: just append @resource
+                const uriParts = resource.uri.split('/');
+                const reference = resource.name || uriParts[uriParts.length - 1] || resource.uri;
+                onLoadIntoInput?.(`${searchQuery}@${reference}`);
+            }
+            return;
+        }
+        // Enter to select
+        if (key.return && itemsLength > 0) {
+            const resource = filteredResources[selectedIndexRef.current];
+            if (resource) {
+                onSelectResource(resource);
+            }
+        }
+    }, { 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: "Loading resources..." }) }));
+    }
+    if (filteredResources.length === 0) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: mentionQuery
+                    ? `No resources match "${mentionQuery}"`
+                    : 'No resources available. Connect an MCP server or enable internal resources.' }) }));
+    }
+    const hasMoreAbove = scrollOffset > 0;
+    const hasMoreBelow = scrollOffset + MAX_VISIBLE_ITEMS < filteredResources.length;
+    const totalItems = filteredResources.length;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "yellow", flexDirection: "column", height: MAX_VISIBLE_ITEMS + 3, children: [_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["Resources (", selectedIndex + 1, "/", totalItems, ") - \u2191\u2193 to navigate, Tab to load, Enter to select, Esc to close"] }) }), hasMoreAbove && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2191 (", scrollOffset, " more above)"] }) })), visibleResources.map((resource, visibleIndex) => {
+                const actualIndex = scrollOffset + visibleIndex;
+                const isSelected = actualIndex === selectedIndex;
+                const uriParts = resource.uri.split('/');
+                const displayName = resource.name || uriParts[uriParts.length - 1] || resource.uri;
+                const isImage = (resource.mimeType || '').startsWith('image/');
+                return (_jsx(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [isImage && _jsx(Text, { color: isSelected ? 'black' : 'gray', children: "\uD83D\uDDBC\uFE0F " }), _jsx(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: displayName }), resource.serverName && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: ["[", resource.serverName, "]"] }) }))] }), _jsx(Box, { marginLeft: isImage ? 3 : 0, children: _jsx(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: resource.uri }) }), resource.description && (_jsx(Box, { marginLeft: isImage ? 3 : 0, children: _jsx(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: resource.description }) }))] }) }, resource.uri));
+            }), 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/SlashCommandAutocomplete.d.ts

@@ -0,0 +1,15 @@
+import type { PromptInfo } from '@dexto/core';
+import type { DextoAgent } from '@dexto/core';
+interface SlashCommandAutocompleteProps {
+    isVisible: boolean;
+    searchQuery: string;
+    onSelectPrompt: (prompt: PromptInfo) => void;
+    onSelectSystemCommand?: (command: string) => void;
+    onLoadIntoInput?: (command: string) => void;
+    onClose: () => void;
+    onCreatePrompt?: () => void;
+    agent: DextoAgent;
+}
+export default function SlashCommandAutocomplete({ isVisible, searchQuery, onSelectPrompt, onSelectSystemCommand, onLoadIntoInput, onClose, onCreatePrompt, agent, }: SlashCommandAutocompleteProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SlashCommandAutocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlashCommandAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/SlashCommandAutocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,UAAU,6BAA6B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;CACrB;AAmGD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC7C,SAAS,EACT,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,OAAO,EACP,cAAc,EACd,KAAK,GACR,EAAE,6BAA6B,kDAoX/B"}