fix: improve Ctrl+R reverse search (#18075)

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

@@ -2775,6 +2775,23 @@ describe('InputPrompt', () => {
       });
       unmount();
     });
+
+    it('ensures Ctrl+R search results are prioritized newest-to-oldest by reversing userMessages', async () => {
+      props.shellModeActive = false;
+      props.userMessages = ['oldest', 'middle', 'newest'];
+
+      renderWithProviders(<InputPrompt {...props} />);
+
+      const calls = vi.mocked(useReverseSearchCompletion).mock.calls;
+      const commandSearchCall = calls.find(
+        (call) =>
+          call[1] === props.userMessages ||
+          (Array.isArray(call[1]) && call[1][0] === 'newest'),
+      );
+
+      expect(commandSearchCall).toBeDefined();
+      expect(commandSearchCall![1]).toEqual(['newest', 'middle', 'oldest']);
+    });
   });
 
   describe('Tab focus toggle', () => {

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

@@ -197,9 +197,14 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     reverseSearchActive,
   );
 
+  const reversedUserMessages = useMemo(
+    () => [...userMessages].reverse(),
+    [userMessages],
+  );
+
   const commandSearchCompletion = useReverseSearchCompletion(
     buffer,
-    userMessages,
+    reversedUserMessages,
     commandSearchActive,
   );
 

packages/cli/src/ui/components/shared/ExpandableText.test.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import chalk from 'chalk';
 import { describe, it, expect } from 'vitest';
 import { render } from '../../../test-utils/render.js';
 import { ExpandableText, MAX_WIDTH } from './ExpandableText.js';
@@ -76,6 +77,7 @@ describe('ExpandableText', () => {
       100,
     );
     expect(lastFrame()).toMatchSnapshot();
+    expect(lastFrame()).toContain(chalk.inverse(userInput));
     unmount();
   });
 

packages/cli/src/ui/components/shared/ExpandableText.tsx

@@ -119,11 +119,7 @@ const _ExpandableText: React.FC<ExpandableTextProps> = ({
       {before}
       {match
         ? match.split(/(\s+)/).map((part, index) => (
-            <Text
+            <Text key={`match-${index}`} inverse color={textColor}>
-              key={`match-${index}`}
-              color={theme.background.primary}
-              backgroundColor={theme.text.primary}
-            >
               {part}
             </Text>
           ))