feat (cli): Add command search using Ctrl+r (#5539)

Co-authored-by: Jacob Richman <jacob314@gmail.com>

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

@@ -6,8 +6,9 @@
 
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
-import { PrepareLabel } from './PrepareLabel.js';
+import { PrepareLabel, MAX_WIDTH } from './PrepareLabel.js';
 import { CommandKind } from '../commands/types.js';
+import { Colors } from '../colors.js';
 export interface Suggestion {
   label: string;
   value: string;
@@ -22,9 +23,12 @@ interface SuggestionsDisplayProps {
   width: number;
   scrollOffset: number;
   userInput: string;
+  mode: 'reverse' | 'slash';
+  expandedIndex?: number;
 }
 
 export const MAX_SUGGESTIONS_TO_SHOW = 8;
+export { MAX_WIDTH };
 
 export function SuggestionsDisplay({
   suggestions,
@@ -33,6 +37,8 @@ export function SuggestionsDisplay({
   width,
   scrollOffset,
   userInput,
+  mode,
+  expandedIndex,
 }: SuggestionsDisplayProps) {
   if (isLoading) {
     return (
@@ -60,7 +66,8 @@ export function SuggestionsDisplay({
   const maxLabelLength = Math.max(
     ...suggestions.map((s) => getFullLabel(s).length),
   );
-  const commandColumnWidth = Math.min(maxLabelLength, Math.floor(width * 0.5));
+  const commandColumnWidth =
+    mode === 'slash' ? Math.min(maxLabelLength, Math.floor(width * 0.5)) : 0;
 
   return (
     <Box flexDirection="column" paddingX={1} width={width}>
@@ -69,19 +76,26 @@ export function SuggestionsDisplay({
       {visibleSuggestions.map((suggestion, index) => {
         const originalIndex = startIndex + index;
         const isActive = originalIndex === activeIndex;
+        const isExpanded = originalIndex === expandedIndex;
         const textColor = isActive ? theme.text.accent : theme.text.secondary;
+        const isLong = suggestion.value.length >= MAX_WIDTH;
         const labelElement = (
           <PrepareLabel
-            label={suggestion.label}
+            label={suggestion.value}
             matchedIndex={suggestion.matchedIndex}
             userInput={userInput}
             textColor={textColor}
+            isExpanded={isExpanded}
           />
         );
 
         return (
           <Box key={`${suggestion.value}-${originalIndex}`} flexDirection="row">
-            <Box width={commandColumnWidth} flexShrink={0}>
+            <Box
+              {...(mode === 'slash'
+                ? { width: commandColumnWidth, flexShrink: 0 as const }
+                : { flexShrink: 1 as const })}
+            >
               <Box>
                 {labelElement}
                 {suggestion.commandKind === CommandKind.MCP_PROMPT && (
@@ -97,6 +111,11 @@ export function SuggestionsDisplay({
                 </Text>
               </Box>
             )}
+            {isActive && isLong && (
+              <Box>
+                <Text color={Colors.Gray}>{isExpanded ? ' ← ' : ' → '}</Text>
+              </Box>
+            )}
           </Box>
         );
       })}