Enhance file search functionality: limit visible files and handle file reading errors

Author: habedi

src/ui/FileSearch.tsx

@@ -3,19 +3,22 @@ import { Box, Text } from "ink";
 
 type FileSearchProps = {
     query: string;
-    files: string[];
+    visibleFiles: string[];
+    totalFiles: number;
     selectedIndex: number;
 };
 
-export function FileSearch({ query, files, selectedIndex }: FileSearchProps) {
+export function FileSearch({ query, visibleFiles, totalFiles, selectedIndex }: FileSearchProps) {
+    const hiddenFiles = totalFiles - visibleFiles.length;
     return (
         <Box flexDirection="column" borderStyle="round" borderColor="yellow">
             <Text>Searching for: {query}</Text>
-            {files.map((file, index) => (
+            {visibleFiles.map((file, index) => (
                 <Text key={file} color={selectedIndex === index ? "blue" : "white"}>
                     {file}
                 </Text>
             ))}
+            {hiddenFiles > 0 && <Text>...and {hiddenFiles} more</Text>}
         </Box>
     );
 }

src/ui/UserInput.tsx

@@ -7,12 +7,15 @@ import { useShallow } from "zustand/react/shallow";
 import { FileSearch } from "./FileSearch.js";
 import { runTool } from "@/agent/tools/index.js";
 
+const MAX_VISIBLE_FILES = 5;
+
 export function UserInput() {
     const [useStateInput, setInputValue] = useState("");
     const [searchActive, setSearchActive] = useState(false);
     const [searchQuery, setSearchQuery] = useState("");
     const [searchResults, setSearchResults] = useState<string[]>([]);
     const [selectedIndex, setSelectedIndex] = useState(0);
+    const [visibleFileCount, setVisibleFileCount] = useState(MAX_VISIBLE_FILES);
 
     const {
         startAgent,
@@ -60,6 +63,7 @@ export function UserInput() {
             setSearchActive(true);
             setSearchQuery(query);
             setSelectedIndex(0);
+            setVisibleFileCount(MAX_VISIBLE_FILES);
         } else {
             setSearchActive(false);
         }
@@ -90,7 +94,13 @@ export function UserInput() {
             if (key.upArrow) {
                 setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
             } else if (key.downArrow) {
-                setSelectedIndex((prev) => (prev < searchResults.length - 1 ? prev + 1 : prev));
+                setSelectedIndex((prev) => {
+                    const newIndex = prev + 1;
+                    if (newIndex >= visibleFileCount && newIndex < searchResults.length) {
+                        setVisibleFileCount((prevCount) => prevCount + 1);
+                    }
+                    return newIndex < searchResults.length ? newIndex : prev;
+                });
             }
         } else if (!isThinking) {
             if (key.upArrow) {
@@ -107,7 +117,7 @@ export function UserInput() {
         }
     });
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
         const value = useStateInput.trim();
 
         if (value === "/help") {
@@ -128,10 +138,21 @@ export function UserInput() {
             const lastAtIndex = useStateInput.lastIndexOf("@");
             const file = searchResults[selectedIndex];
             if (file) {
-                const newValue = `${useStateInput.slice(0, lastAtIndex)}@${file} `;
-                setInputValue(newValue);
-                setSearchActive(false);
-                setSearchResults([]);
+                try {
+                    const content = await runTool(
+                        { toolName: "readFile", args: { path: file } },
+                        config!,
+                    );
+                    const fileBlock = `File: ${file}\n\n${content}`;
+                    const newValue = `${useStateInput.slice(0, lastAtIndex)}${fileBlock}`;
+                    setInputValue(newValue);
+                } catch (error) {
+                    const newValue = `${useStateInput.slice(0, lastAtIndex)}@${file} `;
+                    setInputValue(newValue);
+                } finally {
+                    setSearchActive(false);
+                    setSearchResults([]);
+                }
             }
             return;
         }
@@ -178,12 +199,15 @@ export function UserInput() {
         }
     };
 
+    const visibleFiles = searchResults.slice(0, visibleFileCount);
+
     return (
         <Box flexDirection="column">
             {searchActive && searchResults.length > 0 && (
                 <FileSearch
                     query={searchQuery}
-                    files={searchResults}
+                    visibleFiles={visibleFiles}
+                    totalFiles={searchResults.length}
                     selectedIndex={selectedIndex}
                 />
             )}