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

[Aisha630]

TLDR

This pull request introduces a new feature to the CLI: command search functionality using Ctrl+r.

Dive Deeper

The implementation includes:

• Integration of useReverseSearchCompletion for command search, enabling incremental search.
• Updates to InputPrompt to handle Ctrl+r for activating command search and navigating suggestions.
• Enhancements to SuggestionsDisplay to support expanded suggestions for long commands.

Reviewer Test Plan

To validate this change:

1. Pull the branch and run the CLI.
2. Test the command search functionality by pressing Ctrl+r and typing a query.
3. Navigate through suggestions using arrow keys and verify expanded suggestions for long commands.

Testing Matrix

	🍏	🪟	🐧
npm run	✅	-	-
npx	-	-	-
Docker	-	-	-
Podman	-	-	-
Seatbelt	-	-	-

Linked issues / bugs

Resolves #5391

compressed.mp4

[gemini-code-assist]

Summary of Changes

Hello @Aisha630, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the CLI's usability by introducing a powerful new command search feature, accessible via Ctrl+r. This allows users to efficiently find and reuse previously executed commands through an incremental search experience. The changes also include improvements to how long command suggestions are displayed, enabling users to expand them for full visibility, alongside general performance optimizations for the UI components.

Highlights

• New Feature: Command Search (Ctrl+r): Introduced a new command search functionality in the CLI, allowing users to quickly find and recall past commands using Ctrl+r. This feature supports incremental searching, providing real-time suggestions as the user types.
• Enhanced Suggestions Display: Long command suggestions can now be expanded to view their full content within the suggestions display. Users can use the right arrow key to expand and left arrow key to collapse, improving readability for complex commands.
• Optimized Search Logic: The underlying search and completion logic has been refactored. The useReverseSearchCompletion hook is now more generic and includes performance optimizations such as input debouncing and intelligent caching of previous search results for faster incremental searches.
• UI/Performance Improvements: The PrepareLabel component, responsible for rendering suggestion text, has been optimized with React.memo for better performance and now intelligently truncates long labels while showing context around matched text.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a command search feature using Ctrl+r, which enhances the CLI's usability. The implementation is well-structured, particularly the refactoring of useReverseSearchCompletion to support incremental search with debouncing and caching, which improves performance.

I've identified a couple of high-severity issues that should be addressed:

1. A bug in the word count calculation for long suggestions, which could display incorrect information to the user.
2. A code duplication in the InputPrompt component for handling the escape key, which impacts maintainability.

I've provided specific code suggestions for both issues. Once these are addressed, the PR should be in excellent shape.

[jacob314]

Let me know when this is ready to review. It is currently marked as (draft) but looks quite close to being ready. Would like to discuss how we handle multiline prompts in the history. There are probably additional things we should consider to make that experience better. @miguelsolorio may have thoughts.
Can't wait for this PR! I've now seen two other PRs be proposed attempting this or a similar feature so I'm pretty sure users will be delighted when this lands.

[Aisha630]

Let me know when this is ready to review. It is currently marked as (draft) but looks quite close to being ready. Would like to discuss how we handle multiline prompts in the history. There are probably additional things we should consider to make that experience better. @miguelsolorio may have thoughts. Can't wait for this PR! I've now seen two other PRs be proposed attempting this or a similar feature so I'm pretty sure users will be delighted when this lands.

That is what I was thinking as well which is why I had kept it as a draft. I would appreciate any ideas about how to goi about handling multiline commands. Currently I have kept it pretty basic at truncation and optional expanding

[Aisha630]

/gemini review

[gemini-code-assist]

Code Review

This pull request adds command search functionality with Ctrl+r. The implementation is solid, but I've identified a few areas with code duplication that could be refactored to improve maintainability. I've also found a potential performance issue in the useReverseSearchCompletion hook due to a redundant dependency in a useEffect.

[Aisha630]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a command search feature (Ctrl+r) to the CLI, complementing the existing shell history reverse search. The implementation reuses the useReverseSearchCompletion hook for this new functionality, which is a good design choice. The changes also include UI enhancements for displaying and interacting with long suggestions, such as truncation and an expandable view.

The code is well-structured, and the refactoring to handle both search modes with shared logic in InputPrompt.tsx is a significant improvement. I've identified a couple of areas for improvement related to code duplication and magic numbers that would enhance maintainability.

[Aisha630]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a command search feature using Ctrl+r. The useReverseSearchCompletion hook is enhanced for both shell and command history. I've identified one high-severity issue in the display logic for long command suggestions that could lead to a confusing UI. My review includes a specific suggestion to address this.

[Aisha630]

/gemini review

[gemini-code-assist]

Code Review

This pull request adds a command search feature using Ctrl+R, which is a great enhancement for the CLI. The implementation reuses the existing reverse search logic effectively. My review found a critical issue where suggestions for command search and reverse search are not displayed due to a rendering bug. I also found a high-severity issue with handling the expanded state of long suggestions. Addressing these will ensure the new feature works as intended.

[Aisha630]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a command search feature using Ctrl+R and enhances the display of long suggestions. The implementation of incremental search is a good improvement. However, I've identified a few critical issues that need to be addressed. The suggestions for the new search functionality are not being rendered due to a bug in the UI component. The feature to expand long suggestions is also broken because its state is incorrectly reset on every keypress. Additionally, the expanded view for suggestions is missing the highlighting of the user's query, which is a regression in user experience. Please see the detailed comments for suggestions on how to fix these issues.

[Aisha630]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a command search feature using Ctrl+r, which is a great addition. The implementation refactors the existing reverse search to be more generic and adds incremental search for better performance. However, there's a critical issue in the rendering logic for suggestions in InputPrompt.tsx that prevents the new search feature's suggestions from being displayed and also results in invalid JSX. My review includes a fix for this.

[Aisha630]

/gemini review

[jacob314]

Another view of the strange things happening when the completion is almost the full string.

Same text when selected to show how the blank text is just a black background so it is likely text that should have the background color but that is not working.

unclear why the text width is like it is. seems like we are not quite using the box model right in ink for it or something. the completions are set to have a width of 20 chars max yet that isn't respected (and shouldn't be because that would look silly).

I'll approve once this is addressed. Sorry this review has dragged on so long.

[Aisha630]

I'm seeing the following strange rendering artifacts.

cast.webm

i see why this happened. Text wrapping with React is a little bit weird wherein if a nested Text component is wrapped, styling can sometimes be overridden by that of its parent Text component. This is what caused this. And since the color was set to black, it basically became invisible on screen. I have fixed this now.

[Aisha630]

Another view of the strange things happening when the completion is almost the full string.

Same text when selected to show how the blank text is just a black background so it is likely text that should have the background color but that is not working.

unclear why the text width is like it is. seems like we are not quite using the box model right in ink for it or something. the completions are set to have a width of 20 chars max yet that isn't respected (and shouldn't be because that would look silly).

I'll approve once this is addressed. Sorry this review has dragged on so long.

I have fixed this as well. The width was weird since this was a slashCommand and that had a particular width set. However this should not be this way if reverse search mode is active so I have changed this as well now

[jacob314]

All the changes look good now. The one thing that is missing is test coverage. Please add some basic snapshot based tests for .tsx files changed so we don't accidentally regress this functionality. Cases such as the expand and collapse suggestion functionality are also worth testing.
The only UX concern I have is line breaking sometimes changes when lines are focused on. This is due to the arrows shown to expand and collapse entries. @miguelsolorio would be interested on your thoughts on this. Potentially we should insert a blank spot suitable for the arrows even when a line isn't focused to avoid relayout or just omit the arrows.
https://github.com/user-attachments/assets/9956b959-9b44-4b3a-ac43-8c2b0c665ffd
We can resolve that as a follow up so don't want to block landing this PR for that UI polish.

[Aisha630]

All the changes look good now. The one thing that is missing is test coverage. Please add some basic snapshot based tests for .tsx files changed so we don't accidentally regress this functionality. Cases such as the expand and collapse suggestion functionality are also worth testing. The only UX concern I have is line breaking sometimes changes when lines are focused on. This is due to the arrows shown to expand and collapse entries. @miguelsolorio would be interested on your thoughts on this. Potentially we should insert a blank spot suitable for the arrows even when a line isn't focused to avoid relayout or just omit the arrows. https://github.com/user-attachments/assets/9956b959-9b44-4b3a-ac43-8c2b0c665ffd We can resolve that as a follow up so don't want to block landing this PR for that UI polish.

Done. I have added tests for this functionality

Changes have been made