feat: Add reverse search capability for shell commands (#4793)

1 files changed, 13 insertions, 4 deletions

diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
index 0620665f..9c4b5687 100644
--- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx
+++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
@@ -6,10 +6,12 @@
 
 import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
+import { PrepareLabel } from './PrepareLabel.js';
 export interface Suggestion {
   label: string;
   value: string;
   description?: string;
+  matchedIndex?: number;
 }
 interface SuggestionsDisplayProps {
   suggestions: Suggestion[];
@@ -58,18 +60,25 @@ export function SuggestionsDisplay({
         const originalIndex = startIndex + index;
         const isActive = originalIndex === activeIndex;
         const textColor = isActive ? Colors.AccentPurple : Colors.Gray;
+        const labelElement = (
+          <PrepareLabel
+            label={suggestion.label}
+            matchedIndex={suggestion.matchedIndex}
+            userInput={userInput}
+            textColor={textColor}
+          />
+        );
 
         return (
-          <Box key={`${suggestion}-${originalIndex}`} width={width}>
+          <Box key={`${suggestion.value}-${originalIndex}`} width={width}>
             <Box flexDirection="row">
               {userInput.startsWith('/') ? (
                 // only use box model for (/) command mode
                 <Box width={20} flexShrink={0}>
-                  <Text color={textColor}>{suggestion.label}</Text>
+                  {labelElement}
                 </Box>
               ) : (
-                // use regular text for other modes (@ context)
-                <Text color={textColor}>{suggestion.label}</Text>
+                labelElement
               )}
               {suggestion.description ? (
                 <Box flexGrow={1}>