Refactor: Enhance @-command, Autocomplete, and Input Stability (#279)

packages/cli/src/ui/App.tsx

@@ -96,17 +96,8 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
 
   const isInputActive = streamingState === StreamingState.Idle && !initError;
 
-  const {
+  // query and setQuery are now managed by useState here
-    query,
+  const [query, setQuery] = useState('');
-    setQuery,
-    handleSubmit: handleHistorySubmit,
-    inputKey,
-    setInputKey,
-  } = useInputHistory({
-    userMessages,
-    onSubmit: handleFinalSubmit,
-    isActive: isInputActive,
-  });
 
   const completion = useCompletion(
     query,
@@ -115,6 +106,22 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
     slashCommands,
   );
 
+  const {
+    handleSubmit: handleHistorySubmit,
+    inputKey,
+    setInputKey,
+  } = useInputHistory({
+    userMessages,
+    onSubmit: (value) => {
+      // Adapt onSubmit to use the lifted setQuery
+      handleFinalSubmit(value);
+      setQuery(''); // Clear query from the App's state
+    },
+    isActive: isInputActive && !completion.showSuggestions,
+    query,
+    setQuery,
+  });
+
   // --- Render Logic ---
 
   const { staticallyRenderedHistoryItems, updatableHistoryItems } =

packages/cli/src/ui/components/InputPrompt.tsx

@@ -39,93 +39,83 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
 }) => {
   const { isFocused } = useFocus({ autoFocus: true });
 
-  const handleAutocomplete = useCallback(() => {
+  const handleAutocomplete = useCallback(
-    if (
+    (indexToUse: number) => {
-      activeSuggestionIndex < 0 ||
+      if (indexToUse < 0 || indexToUse >= suggestions.length) {
-      activeSuggestionIndex >= suggestions.length
+        return;
-    ) {
+      }
-      return;
+      const selectedSuggestion = suggestions[indexToUse];
-    }
+      const trimmedQuery = query.trimStart();
-    const selectedSuggestion = suggestions[activeSuggestionIndex];
-    const trimmedQuery = query.trimStart();
 
-    if (trimmedQuery.startsWith('/')) {
+      if (trimmedQuery.startsWith('/')) {
-      // Handle / command completion
+        // Handle / command completion
-      const slashIndex = query.indexOf('/');
+        const slashIndex = query.indexOf('/');
-      const base = query.substring(0, slashIndex + 1);
+        const base = query.substring(0, slashIndex + 1);
-      const newValue = base + selectedSuggestion.value;
+        const newValue = base + selectedSuggestion.value;
-      setQuery(newValue);
+        setQuery(newValue);
-    } else {
-      // Handle @ command completion
-      const atIndex = query.lastIndexOf('@');
-      if (atIndex === -1) return;
-
-      // Find the part of the query after the '@'
-      const pathPart = query.substring(atIndex + 1);
-      // Find the last slash within that part
-      const lastSlashIndexInPath = pathPart.lastIndexOf('/');
-
-      let base = '';
-      if (lastSlashIndexInPath === -1) {
-        // No slash after '@', replace everything after '@'
-        base = query.substring(0, atIndex + 1);
       } else {
-        // Slash found, keep everything up to and including the last slash
+        // Handle @ command completion
-        base = query.substring(0, atIndex + 1 + lastSlashIndexInPath + 1);
+        const atIndex = query.lastIndexOf('@');
+        if (atIndex === -1) return;
+
+        // Find the part of the query after the '@'
+        const pathPart = query.substring(atIndex + 1);
+        // Find the last slash within that part
+        const lastSlashIndexInPath = pathPart.lastIndexOf('/');
+
+        let base = '';
+        if (lastSlashIndexInPath === -1) {
+          // No slash after '@', replace everything after '@'
+          base = query.substring(0, atIndex + 1);
+        } else {
+          // Slash found, keep everything up to and including the last slash
+          base = query.substring(0, atIndex + 1 + lastSlashIndexInPath + 1);
+        }
+
+        const newValue = base + selectedSuggestion.value;
+        setQuery(newValue);
       }
 
-      const newValue = base + selectedSuggestion.value;
+      resetCompletion(); // Hide suggestions after selection
-      setQuery(newValue);
+      setInputKey((k) => k + 1); // Increment key to force re-render and cursor reset
-    }
+    },
-
+    [query, setQuery, suggestions, resetCompletion, setInputKey],
-    resetCompletion(); // Hide suggestions after selection
+  );
-    setInputKey((k) => k + 1); // Increment key to force re-render and cursor reset
-  }, [
-    query,
-    setQuery,
-    suggestions,
-    activeSuggestionIndex,
-    resetCompletion,
-    setInputKey,
-  ]);
 
   useInput(
     (input: string, key: Key) => {
-      let handled = false;
+      if (!isFocused) {
+        return;
+      }
 
       if (showSuggestions) {
         if (key.upArrow) {
           navigateUp();
-          handled = true;
         } else if (key.downArrow) {
           navigateDown();
-          handled = true;
+        } else if (key.tab) {
-        } else if ((key.tab || key.return) && activeSuggestionIndex >= 0) {
+          if (suggestions.length > 0) {
-          handleAutocomplete();
+            const targetIndex =
-          handled = true;
+              activeSuggestionIndex === -1 ? 0 : activeSuggestionIndex;
+            if (targetIndex < suggestions.length) {
+              handleAutocomplete(targetIndex);
+            }
+          }
+        } else if (key.return) {
+          if (activeSuggestionIndex >= 0) {
+            handleAutocomplete(activeSuggestionIndex);
+          } else {
+            if (query.trim()) {
+              onSubmit(query);
+            }
+          }
         } else if (key.escape) {
           resetCompletion();
-          handled = true;
         }
       }
-
+      // Enter key when suggestions are NOT showing is handled by TextInput's onSubmit prop below
-      // Only submit on Enter if it wasn't handled above
-      if (!handled && key.return) {
-        if (query.trim()) {
-          onSubmit(query);
-        }
-        handled = true;
-      }
-
-      if (
-        handled &&
-        showSuggestions &&
-        (key.upArrow || key.downArrow || key.tab || key.escape || key.return)
-      ) {
-        // No explicit preventDefault needed, handled flag stops further processing
-      }
     },
-    { isActive: isFocused },
+    { isActive: true },
   );
 
   return (
@@ -138,7 +128,15 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
           onChange={setQuery}
           placeholder="Enter your message or use tools (e.g., @src/file.txt)..."
           onSubmit={() => {
-            /* onSubmit is handled by useInput hook above */
+            // This onSubmit is for the TextInput component itself.
+            // It should only fire if suggestions are NOT showing,
+            // as useInput handles Enter when suggestions are visible.
+            const trimmedQuery = query.trim();
+            if (!showSuggestions && trimmedQuery) {
+              onSubmit(trimmedQuery);
+            }
+            // If suggestions ARE showing, useInput's Enter handler
+            // would have already dealt with it (either completing or submitting).
           }}
         />
       </Box>

packages/cli/src/ui/hooks/atCommandProcessor.ts

@@ -106,16 +106,25 @@ export async function handleAtCommand({
   // Add the original user query to history first
   addItem({ type: 'user', text: query }, userMessageTimestamp);
 
+  // If the atPath is just "@", pass the original query to the LLM
+  if (atPath === '@') {
+    setDebugMessage('Lone @ detected, passing directly to LLM.');
+    return { processedQuery: [{ text: query }], shouldProceed: true };
+  }
+
   const pathPart = atPath.substring(1); // Remove leading '@'
 
+  // This error condition is for cases where pathPart becomes empty *after* the initial "@" check,
+  // which is unlikely with the current parser but good for robustness.
   if (!pathPart) {
     addItem(
-      { type: 'error', text: 'Error: No path specified after @.' },
+      { type: 'error', text: 'Error: No valid path specified after @ symbol.' },
       userMessageTimestamp,
     );
     return { processedQuery: null, shouldProceed: false };
   }
 
+  const contentLabel = pathPart;
   const toolRegistry = config.getToolRegistry();
   const readManyFilesTool = toolRegistry.getTool('read_many_files');
 
@@ -129,7 +138,6 @@ export async function handleAtCommand({
 
   // Determine path spec (file or directory glob)
   let pathSpec = pathPart;
-  const contentLabel = pathPart;
   try {
     const absolutePath = path.resolve(config.getTargetDir(), pathPart);
     const stats = await fs.stat(absolutePath);

packages/cli/src/ui/hooks/useInputHistory.ts

@@ -4,13 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useInput } from 'ink';
 
 interface UseInputHistoryProps {
   userMessages: readonly string[];
   onSubmit: (value: string) => void;
   isActive: boolean;
+  query: string;
+  setQuery: React.Dispatch<React.SetStateAction<string>>;
 }
 
 interface UseInputHistoryReturn {
@@ -25,8 +27,9 @@ export function useInputHistory({
   userMessages,
   onSubmit,
   isActive,
+  query,
+  setQuery,
 }: UseInputHistoryProps): UseInputHistoryReturn {
-  const [query, setQuery] = useState('');
   const [historyIndex, setHistoryIndex] = useState<number>(-1);
   const [originalQueryBeforeNav, setOriginalQueryBeforeNav] =
     useState<string>('');
@@ -41,9 +44,8 @@ export function useInputHistory({
     (value: string) => {
       const trimmedValue = value.trim();
       if (trimmedValue) {
-        onSubmit(trimmedValue);
+        onSubmit(trimmedValue); // This will call handleFinalSubmit, which then calls setQuery('') from App.tsx
       }
-      setQuery('');
       resetHistoryNav();
     },
     [onSubmit, resetHistoryNav],

packages/cli/src/ui/utils/commandUtils.ts

@@ -13,8 +13,8 @@
  * @returns True if the query looks like an '@' command, false otherwise.
  */
 export const isAtCommand = (query: string): boolean =>
-  // Check if starts with @ OR has a space, then @, then a non-space character.
+  // Check if starts with @ OR has a space, then @
-  query.startsWith('@') || /\s@\S/.test(query);
+  query.startsWith('@') || /\s@/.test(query);
 
 /**
  * Checks if a query string potentially represents an '/' command.