@gxp-dev/tools 2.0.16 → 2.0.18

package/bin/lib/tui/components/CommandInput.tsx

@@ -35,13 +35,14 @@ const COMMANDS = [
   { cmd: '/extract-config', args: '--overwrite', desc: 'Overwrite existing config values' },
 
   // AI commands
-  { cmd: '/gemini', args: '', desc: 'Open Gemini AI chat panel' },
-  { cmd: '/gemini', args: 'enable', desc: 'Set up Google authentication' },
-  { cmd: '/gemini', args: 'ask <query>', desc: 'Quick AI question' },
-  { cmd: '/gemini', args: 'status', desc: 'Check AI auth status' },
-  { cmd: '/gemini', args: 'logout', desc: 'Log out from Gemini' },
-  { cmd: '/gemini', args: 'clear', desc: 'Clear conversation history' },
-  { cmd: '/ai', args: '', desc: 'Open Gemini AI chat (alias)' },
+  { cmd: '/ai', args: '', desc: 'Open AI chat with current provider' },
+  { cmd: '/ai', args: 'model', desc: 'Show available AI providers' },
+  { cmd: '/ai', args: 'model claude', desc: 'Switch to Claude AI' },
+  { cmd: '/ai', args: 'model codex', desc: 'Switch to Codex AI' },
+  { cmd: '/ai', args: 'model gemini', desc: 'Switch to Gemini AI' },
+  { cmd: '/ai', args: 'ask <query>', desc: 'Quick AI question' },
+  { cmd: '/ai', args: 'status', desc: 'Check provider availability' },
+  { cmd: '/ai', args: 'clear', desc: 'Clear conversation history' },
 
   // General
   { cmd: '/help', args: '', desc: 'Show all commands' },
@@ -63,28 +64,53 @@ interface CommandInputProps {
 
 export default function CommandInput({ onSubmit, activeService, onSuggestionsChange }: CommandInputProps) {
   const [value, setValue] = useState('');
+  const [filterValue, setFilterValue] = useState(''); // What we filter suggestions by (doesn't change when arrowing)
   const [history, setHistory] = useState<string[]>([]);
   const [historyIndex, setHistoryIndex] = useState(-1);
   const [selectedSuggestion, setSelectedSuggestion] = useState(0);
+  const [isNavigating, setIsNavigating] = useState(false); // True when user is arrowing through suggestions
 
-  // Use ref to track if we should skip the next onChange (after programmatic update)
-  const skipNextChange = useRef(false);
-  // Track previous suggestion count to avoid unnecessary parent updates
-  const prevSuggestionCount = useRef(0);
+  // Track if suggestions are currently shown to avoid flicker
+  const prevShowSuggestions = useRef(false);
 
-  // Filter commands based on typed value
+  // Maximum visible suggestions in the dropdown
+  const MAX_VISIBLE = 8;
+
+  // Filter commands based on filterValue (stays stable while navigating with arrows)
   const suggestions = useMemo(() => {
-    if (!value.startsWith('/')) return [];
+    if (!filterValue.startsWith('/')) return [];
 
-    const search = value.toLowerCase();
+    const search = filterValue.toLowerCase();
     return COMMANDS.filter(c => {
       const fullCmd = c.args ? `${c.cmd} ${c.args}` : c.cmd;
       return fullCmd.toLowerCase().includes(search) ||
              c.cmd.toLowerCase().startsWith(search);
-    }).slice(0, 8); // Limit to 8 suggestions for cleaner UI
-  }, [value]);
+    });
+  }, [filterValue]);
+
+  // Calculate visible window of suggestions (scrolls to keep selection visible)
+  const { visibleSuggestions, startIndex } = useMemo(() => {
+    if (suggestions.length <= MAX_VISIBLE) {
+      return { visibleSuggestions: suggestions, startIndex: 0 };
+    }
 
-  const showSuggestions = value.startsWith('/') && value.length >= 1 && suggestions.length > 0;
+    // Calculate window to keep selected item visible
+    let start = 0;
+    if (selectedSuggestion >= MAX_VISIBLE) {
+      // Selected item is beyond initial window, scroll down
+      start = selectedSuggestion - MAX_VISIBLE + 1;
+    }
+    // Ensure we don't go past the end
+    start = Math.min(start, suggestions.length - MAX_VISIBLE);
+    start = Math.max(0, start);
+
+    return {
+      visibleSuggestions: suggestions.slice(start, start + MAX_VISIBLE),
+      startIndex: start,
+    };
+  }, [suggestions, selectedSuggestion]);
+
+  const showSuggestions = filterValue.startsWith('/') && filterValue.length >= 1 && suggestions.length > 0;
 
   // Helper to build full command string from suggestion
   const buildFullCommand = useCallback((suggestion: typeof COMMANDS[0]): string => {
@@ -97,11 +123,13 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
     return suggestion.cmd;
   }, []);
 
-  // Notify parent when suggestions change (debounced to reduce flicker)
+  // Notify parent when suggestions visibility changes (not on every count change)
+  // This reduces flicker by only updating when suggestions appear/disappear
   useEffect(() => {
-    const count = showSuggestions ? suggestions.length + 2 : 0;
-    if (count !== prevSuggestionCount.current) {
-      prevSuggestionCount.current = count;
+    if (showSuggestions !== prevShowSuggestions.current) {
+      prevShowSuggestions.current = showSuggestions;
+      const visibleCount = Math.min(suggestions.length, MAX_VISIBLE);
+      const count = showSuggestions ? visibleCount + 4 : 0; // +4 for borders, scroll indicators, hint line
       onSuggestionsChange?.(count);
     }
   }, [showSuggestions, suggestions.length, onSuggestionsChange]);
@@ -114,31 +142,42 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
   }, [suggestions.length, selectedSuggestion]);
 
   useInput((input, key) => {
-    // Tab to autocomplete selected suggestion
+    // Tab to autocomplete selected suggestion and commit it
     if (key.tab && showSuggestions && suggestions[selectedSuggestion]) {
       const suggestion = suggestions[selectedSuggestion];
       const fullCmd = buildFullCommand(suggestion);
-      skipNextChange.current = true;
       setValue(fullCmd);
+      setFilterValue(fullCmd); // Commit the selection to filter
       setSelectedSuggestion(0);
+      setIsNavigating(false);
       return;
     }
 
     // Up/Down to navigate suggestions when showing (circular navigation)
     if (showSuggestions) {
       if (key.upArrow) {
+        setIsNavigating(true);
         setSelectedSuggestion(prev => {
-          // Wrap to bottom when at top
-          if (prev <= 0) return suggestions.length - 1;
-          return prev - 1;
+          const newIndex = prev <= 0 ? suggestions.length - 1 : prev - 1;
+          // Update display value to show selected command
+          const suggestion = suggestions[newIndex];
+          if (suggestion) {
+            setValue(buildFullCommand(suggestion));
+          }
+          return newIndex;
         });
         return;
       }
       if (key.downArrow) {
+        setIsNavigating(true);
         setSelectedSuggestion(prev => {
-          // Wrap to top when at bottom
-          if (prev >= suggestions.length - 1) return 0;
-          return prev + 1;
+          const newIndex = prev >= suggestions.length - 1 ? 0 : prev + 1;
+          // Update display value to show selected command
+          const suggestion = suggestions[newIndex];
+          if (suggestion) {
+            setValue(buildFullCommand(suggestion));
+          }
+          return newIndex;
         });
         return;
       }
@@ -147,19 +186,22 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
       if (key.upArrow && history.length > 0) {
         const newIndex = Math.min(historyIndex + 1, history.length - 1);
         setHistoryIndex(newIndex);
-        skipNextChange.current = true;
-        setValue(history[history.length - 1 - newIndex] || '');
+        const historyValue = history[history.length - 1 - newIndex] || '';
+        setValue(historyValue);
+        setFilterValue(historyValue);
         return;
       }
 
       if (key.downArrow) {
         const newIndex = Math.max(historyIndex - 1, -1);
         setHistoryIndex(newIndex);
-        skipNextChange.current = true;
         if (newIndex < 0) {
           setValue('');
+          setFilterValue('');
         } else {
-          setValue(history[history.length - 1 - newIndex] || '');
+          const historyValue = history[history.length - 1 - newIndex] || '';
+          setValue(historyValue);
+          setFilterValue(historyValue);
         }
         return;
       }
@@ -168,8 +210,10 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
     // Escape to clear input or close suggestions
     if (key.escape) {
       setValue('');
+      setFilterValue('');
       setSelectedSuggestion(0);
       setHistoryIndex(-1);
+      setIsNavigating(false);
       return;
     }
   });
@@ -182,21 +226,21 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
 
     // Reset state
     setValue('');
+    setFilterValue('');
     setHistoryIndex(-1);
     setSelectedSuggestion(0);
+    setIsNavigating(false);
 
     // Call handler
     onSubmit(input);
   }, [onSubmit]);
 
-  // Handle text input changes
+  // Handle text input changes - updates both value and filter
   const handleChange = useCallback((v: string) => {
-    if (skipNextChange.current) {
-      skipNextChange.current = false;
-      return;
-    }
     setValue(v);
+    setFilterValue(v); // When user types, update filter to match
     setSelectedSuggestion(0);
+    setIsNavigating(false);
   }, []);
 
   // Get context-specific hints for current tab
@@ -227,32 +271,48 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
           borderColor="gray"
           marginBottom={0}
         >
-          {suggestions.map((suggestion, index) => (
-            <Box key={`${suggestion.cmd}-${suggestion.args}-${index}`} paddingX={1}>
-              <Text
-                backgroundColor={index === selectedSuggestion ? 'blue' : undefined}
-                color={index === selectedSuggestion ? 'white' : 'cyan'}
-                bold={index === selectedSuggestion}
-              >
-                {suggestion.cmd}
-              </Text>
-              {suggestion.args && (
+          {/* Scroll up indicator */}
+          {startIndex > 0 && (
+            <Box paddingX={1}>
+              <Text color="gray">↑ {startIndex} more above</Text>
+            </Box>
+          )}
+          {visibleSuggestions.map((suggestion, visibleIndex) => {
+            const actualIndex = startIndex + visibleIndex;
+            const isSelected = actualIndex === selectedSuggestion;
+            return (
+              <Box key={`${suggestion.cmd}-${suggestion.args}-${actualIndex}`} paddingX={1}>
+                <Text
+                  backgroundColor={isSelected ? 'blue' : undefined}
+                  color={isSelected ? 'white' : 'cyan'}
+                  bold={isSelected}
+                >
+                  {suggestion.cmd}
+                </Text>
+                {suggestion.args && (
+                  <Text
+                    color={isSelected ? 'white' : 'gray'}
+                    backgroundColor={isSelected ? 'blue' : undefined}
+                  >
+                    {' '}{suggestion.args}
+                  </Text>
+                )}
+                <Text color="gray"> - </Text>
                 <Text
-                  color={index === selectedSuggestion ? 'white' : 'gray'}
-                  backgroundColor={index === selectedSuggestion ? 'blue' : undefined}
+                  color={isSelected ? 'white' : 'gray'}
+                  dimColor={!isSelected}
                 >
-                  {' '}{suggestion.args}
+                  {suggestion.desc}
                 </Text>
-              )}
-              <Text color="gray"> - </Text>
-              <Text
-                color={index === selectedSuggestion ? 'white' : 'gray'}
-                dimColor={index !== selectedSuggestion}
-              >
-                {suggestion.desc}
-              </Text>
+              </Box>
+            );
+          })}
+          {/* Scroll down indicator */}
+          {startIndex + MAX_VISIBLE < suggestions.length && (
+            <Box paddingX={1}>
+              <Text color="gray">↓ {suggestions.length - startIndex - MAX_VISIBLE} more below</Text>
             </Box>
-          ))}
+          )}
           <Box paddingX={1}>
             <Text dimColor>Tab complete · ↑↓ select · Esc cancel</Text>
           </Box>