dexto 1.3.0 → 1.4.0

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

@@ -1,6 +1,6 @@
 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 React, { useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, } from 'react';
+import { Box, Text } 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
@@ -65,17 +65,35 @@ function sortResources(resources, query) {
         return aName.localeCompare(bName);
     });
 }
-export default function ResourceAutocomplete({ isVisible, searchQuery, onSelectResource, onLoadIntoInput, onClose, agent, }) {
+/**
+ * Inner component - wrapped with React.memo below
+ */
+const ResourceAutocompleteInner = forwardRef(function ResourceAutocomplete({ isVisible, searchQuery, onSelectResource, onLoadIntoInput, onClose, agent }, ref) {
     const [resources, setResources] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [scrollOffset, setScrollOffset] = useState(0);
+    // Combined state to guarantee single render on navigation
+    const [selection, setSelection] = useState({ index: 0, offset: 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]);
+    const MAX_VISIBLE_ITEMS = 8;
+    // Update selection AND scroll offset in a single state update
+    // This guarantees exactly one render per navigation action
+    const updateSelection = useCallback((indexUpdater) => {
+        setSelection((prev) => {
+            const newIndex = typeof indexUpdater === 'function'
+                ? indexUpdater(prev.index)
+                : indexUpdater;
+            selectedIndexRef.current = newIndex;
+            // Calculate new scroll offset
+            let newOffset = prev.offset;
+            if (newIndex < prev.offset) {
+                newOffset = newIndex;
+            }
+            else if (newIndex >= prev.offset + MAX_VISIBLE_ITEMS) {
+                newOffset = Math.max(0, newIndex - MAX_VISIBLE_ITEMS + 1);
+            }
+            return { index: newIndex, offset: newOffset };
+        });
+    }, [MAX_VISIBLE_ITEMS]);
     // Fetch resources from agent
     useEffect(() => {
         if (!isVisible)
@@ -91,9 +109,9 @@ export default function ResourceAutocomplete({ isVisible, searchQuery, onSelectR
                     setIsLoading(false);
                 }
             }
-            catch (error) {
+            catch {
                 if (!cancelled) {
-                    console.error('Failed to fetch resources:', error);
+                    // Silently fail - don't use console.error as it interferes with Ink rendering
                     setResources([]);
                     setIsLoading(false);
                 }
@@ -122,96 +140,122 @@ export default function ResourceAutocomplete({ isVisible, searchQuery, onSelectR
         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
+    // Track items length for reset detection
+    const prevItemsLengthRef = useRef(filteredResources.length);
+    const itemsChanged = filteredResources.length !== prevItemsLengthRef.current;
+    // Derive clamped selection values during render (always valid, no setState needed)
+    // This prevents the double-render that was causing flickering
+    const selectedIndex = itemsChanged
+        ? 0
+        : Math.min(selection.index, Math.max(0, filteredResources.length - 1));
+    const scrollOffset = itemsChanged
+        ? 0
+        : Math.min(selection.offset, Math.max(0, filteredResources.length - MAX_VISIBLE_ITEMS));
+    // Sync state only when items actually changed AND state differs
+    // This effect runs AFTER render, updating state for next user interaction
     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));
+        if (itemsChanged) {
+            prevItemsLengthRef.current = filteredResources.length;
+            // Only setState if values actually differ (prevents unnecessary re-render)
+            if (selection.index !== 0 || selection.offset !== 0) {
+                selectedIndexRef.current = 0;
+                setSelection({ index: 0, offset: 0 });
+            }
+            else {
+                selectedIndexRef.current = 0;
+            }
         }
-    }, [selectedIndex, scrollOffset]);
+    }, [itemsChanged, filteredResources.length, selection.index, selection.offset]);
     // 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:
+    }, [filteredResources, scrollOffset, MAX_VISIBLE_ITEMS]);
+    // Expose handleInput method via ref
+    useImperativeHandle(ref, () => ({
+        handleInput: (_input, key) => {
+            if (!isVisible)
+                return false;
+            // Escape always closes, regardless of item count
+            if (key.escape) {
                 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}`);
+                return true;
             }
-            else {
-                // Fallback: just append @resource
-                const uriParts = resource.uri.split('/');
-                const reference = resource.name || uriParts[uriParts.length - 1] || resource.uri;
-                onLoadIntoInput?.(`${searchQuery}@${reference}`);
+            const itemsLength = filteredResources.length;
+            if (itemsLength === 0)
+                return false;
+            if (key.upArrow) {
+                updateSelection((prev) => (prev - 1 + itemsLength) % itemsLength);
+                return true;
             }
-            return;
-        }
-        // Enter to select
-        if (key.return && itemsLength > 0) {
-            const resource = filteredResources[selectedIndexRef.current];
-            if (resource) {
-                onSelectResource(resource);
+            if (key.downArrow) {
+                updateSelection((prev) => (prev + 1) % itemsLength);
+                return true;
             }
-        }
-    }, { isActive: isVisible });
+            // Tab to load into input (for editing before selection)
+            if (key.tab) {
+                const resource = filteredResources[selectedIndexRef.current];
+                if (!resource)
+                    return false;
+                // 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 true;
+            }
+            // Enter to select
+            if (key.return) {
+                const resource = filteredResources[selectedIndexRef.current];
+                if (resource) {
+                    onSelectResource(resource);
+                    return true;
+                }
+            }
+            // Don't consume other keys (typing, backspace, etc.)
+            return false;
+        },
+    }), [
+        isVisible,
+        filteredResources,
+        selectedIndexRef,
+        searchQuery,
+        onClose,
+        onLoadIntoInput,
+        onSelectResource,
+        updateSelection,
+    ]);
     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..." }) }));
+        return (_jsx(Box, { paddingX: 0, paddingY: 0, 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
+        return (_jsx(Box, { paddingX: 0, paddingY: 0, 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) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: "yellow", bold: true, children: ["Resources (", selectedIndex + 1, "/", totalItems, ") - \u2191\u2193 navigate, Tab load, Enter select, Esc close"] }) }), 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)"] }) }))] }));
-}
+                return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [isImage && (_jsx(Text, { color: isSelected ? 'cyan' : 'gray', children: "\uD83D\uDDBC\uFE0F " })), _jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: displayName }), resource.serverName && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: isSelected ? 'white' : 'gray', dimColor: !isSelected, children: ["[", resource.serverName, "]"] }) }))] }), _jsx(Box, { marginLeft: isImage ? 3 : 0, children: _jsx(Text, { color: isSelected ? 'white' : 'gray', dimColor: !isSelected, children: resource.uri }) }), resource.description && (_jsx(Box, { marginLeft: isImage ? 3 : 0, children: _jsx(Text, { color: isSelected ? 'white' : 'gray', dimColor: !isSelected, children: resource.description }) }))] }) }, resource.uri));
+            })] }));
+});
+/**
+ * Export with React.memo to prevent unnecessary re-renders from parent
+ * Only re-renders when props actually change (shallow comparison)
+ */
+const ResourceAutocomplete = React.memo(ResourceAutocompleteInner);
+export default ResourceAutocomplete;

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

@@ -1,15 +1,28 @@
+import React from 'react';
+import type { Key } from '../hooks/useInputOrchestrator.js';
 import type { PromptInfo } from '@dexto/core';
 import type { DextoAgent } from '@dexto/core';
+export interface SlashCommandAutocompleteHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
 interface SlashCommandAutocompleteProps {
     isVisible: boolean;
     searchQuery: string;
     onSelectPrompt: (prompt: PromptInfo) => void;
     onSelectSystemCommand?: (command: string) => void;
     onLoadIntoInput?: (command: string) => void;
+    onSubmitRaw?: ((text: string) => Promise<void> | void) | undefined;
     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;
+/**
+ * Inner component - wrapped with React.memo below
+ */
+declare const SlashCommandAutocompleteInner: React.ForwardRefExoticComponent<SlashCommandAutocompleteProps & React.RefAttributes<SlashCommandAutocompleteHandle>>;
+/**
+ * Export with React.memo to prevent unnecessary re-renders from parent
+ * Only re-renders when props actually change (shallow comparison)
+ */
+export declare const SlashCommandAutocomplete: typeof SlashCommandAutocompleteInner;
 export {};
 //# sourceMappingURL=SlashCommandAutocomplete.d.ts.map

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

@@ -1 +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,kDAkX/B"}
+{"version":3,"file":"SlashCommandAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/SlashCommandAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,MAAM,WAAW,8BAA8B;IAC3C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,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,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AA4GD;;GAEG;AACH,QAAA,MAAM,6BAA6B,sHA+ajC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAEhC,OAAO,6BAA6B,CAAC"}