fix: Fix auto complete bugs (#220)

src/cli/components/InputRich.tsx

@@ -454,32 +454,22 @@ export function Input({
   };
 
   // Handle slash command selection from autocomplete
-  const handleCommandSelect = (selectedCommand: string) => {
-    // Find the "/" at start of input and replace the command
-    const slashIndex = value.indexOf("/");
-    if (slashIndex === -1) return;
+  const handleCommandSelect = async (selectedCommand: string) => {
+    // For slash commands, submit immediately when selected from autocomplete
+    // This provides a better UX - selecting /model should open the model selector
+    const commandToSubmit = selectedCommand.trim();
 
-    const beforeSlash = value.slice(0, slashIndex);
-    const afterSlash = value.slice(slashIndex + 1);
-    const spaceIndex = afterSlash.indexOf(" ");
-
-    let newValue: string;
-    let newCursorPos: number;
-
-    // Replace the command part with the selected command
-    if (spaceIndex === -1) {
-      // No space after /command, replace to end
-      newValue = `${beforeSlash}${selectedCommand} `;
-      newCursorPos = newValue.length;
-    } else {
-      // Space exists, replace only the command part
-      const afterCommand = afterSlash.slice(spaceIndex);
-      newValue = `${beforeSlash}${selectedCommand}${afterCommand}`;
-      newCursorPos = beforeSlash.length + selectedCommand.length;
+    // Add to history if not a duplicate of the last entry
+    if (commandToSubmit && commandToSubmit !== history[history.length - 1]) {
+      setHistory([...history, commandToSubmit]);
     }
 
-    setValue(newValue);
-    setCursorPos(newCursorPos);
+    // Reset history navigation
+    setHistoryIndex(-1);
+    setTemporaryInput("");
+
+    setValue(""); // Clear immediately for responsiveness
+    await onSubmit(commandToSubmit);
   };
 
   // Get display name and color for permission mode

src/cli/hooks/useAutocompleteNavigation.ts

@@ -27,7 +27,7 @@ interface UseAutocompleteNavigationResult {
  */
 export function useAutocompleteNavigation<T>({
   matches,
-  maxVisible = 10,
+  maxVisible,
   onSelect,
   onActiveChange,
   manageActiveState = true,
@@ -55,7 +55,11 @@ export function useAutocompleteNavigation<T>({
   useInput((_input, key) => {
     if (!matches.length || disabled) return;
 
-    const maxIndex = Math.min(matches.length, maxVisible) - 1;
+    // If maxVisible is set, limit navigation to visible items; otherwise navigate all
+    const maxIndex =
+      maxVisible !== undefined
+        ? Math.min(matches.length, maxVisible) - 1
+        : matches.length - 1;
 
     if (key.upArrow) {
       setSelectedIndex((prev) => (prev > 0 ? prev - 1 : maxIndex));