fix(cli): extensions dialog UX polish

[jacob314]

Summary

This PR introduces several UX improvements to the settings dialog, specifically focusing on the SearchableList component. It includes better scrolling, clearer visual indicators, and refactoring search input logic into a reusable useSearchBuffer hook.

Demo:
https://screencast.googleplex.com/cast/NjY1MjA1NzMxNzUzOTg0MHxhYjgxYWExNS1lMg

Details

• Visual Indicators: Updated selection cursor in SearchableList to use a ● character with proper styling instead of >.
• Scrolling Enhancements: Improved scroll offset calculation directly during render for SearchableList to prevent visual flicker.
• Refactoring: Abstracted the search buffer logic out of SettingsDialog and useRegistrySearch into a new useSearchBuffer hook for better code organization and reusability.
• Dynamic Sizing: ExtensionRegistryView now calculates maxItemsToShow dynamically based on available terminal height from useUIState().
• Bug Fix: Fixed an issue in useRegistrySearch where an unstable onSearch prop could cause performance degradation via useEffect.

Related Issues

Fixes #19697

How to Validate

• Open the extensions dialog using the CLI.
• Navigate up and down using arrow keys; the selection indicator (●) should follow.
  You should now be able to navigate with consistent behavior to the settings dialog (e.g. the list scrolls when you are at the top or bottom rather than odd behavior keeping a line in the middle selected).
• Open the Extension Registry view and verify that the number of extensions displayed adjusts dynamically to your terminal size.

[gemini-cli]

Hi @jacob314, thank you so much for your contribution to Gemini CLI! We really appreciate the time and effort you've put into this.

We're making some updates to our contribution process to improve how we track and review changes. Please take a moment to review our recent discussion post: Improving Our Contribution Process & Introducing New Guidelines.

Key Update: Starting January 26, 2026, the Gemini CLI project will require all pull requests to be associated with an existing issue. Any pull requests not linked to an issue by that date will be automatically closed.

Thank you for your understanding and for being a part of our community!

[gemini-code-assist]

Summary of Changes

Hello @jacob314, 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 focuses on refining the user experience of dialogs and searchable lists within the CLI. It introduces a new custom hook to encapsulate search buffer logic, enhances the scrolling behavior of searchable lists to provide a smoother and more intuitive navigation, and updates visual cues for selected items. Additionally, it improves the adaptability of list displays by dynamically adjusting the number of visible items based on terminal dimensions.

Highlights

• Refactored Search Buffer Logic: Extracted the search input buffer logic into a new useSearchBuffer custom hook, centralizing its functionality and improving code organization.
• Enhanced Searchable List Scrolling: Implemented a more robust scrolling mechanism for SearchableList components, ensuring the active item remains visible and adding visual scroll indicators (▲/▼) when content exceeds the display area.
• Updated Active Item Indicator: Changed the visual indicator for the currently selected item in lists from a > character to a ● (bullet point) for improved aesthetics and clarity.
• Dynamic Item Display Calculation: Introduced dynamic calculation of maxItemsToShow in ExtensionRegistryView based on available terminal height, optimizing the display for different terminal sizes.

Changelog

• packages/cli/src/ui/components/SettingsDialog.tsx
  • Replaced direct useTextBuffer usage with the new useSearchBuffer hook for search input.
• packages/cli/src/ui/components/shared/SearchableList.test.tsx
  • Updated test assertions to reflect the new active item indicator (● instead of >).
• packages/cli/src/ui/components/shared/SearchableList.tsx
  • Introduced state and useLayoutEffect for managing scroll offset to prevent visual flicker.
  • Removed previous scroll offset calculation logic.
  • Modified the active item rendering to use a ● indicator and adjusted styling.
  • Added conditional rendering for scroll indicators (▲/▼) when the list content is scrollable.
• packages/cli/src/ui/components/shared/snapshots/SearchableList.test.tsx.snap
  • Updated snapshot to reflect the change in the active item indicator from > to ●.
• packages/cli/src/ui/components/views/ExtensionRegistryView.test.tsx
  • Expanded the useUIState mock to include terminalHeight and staticExtraHeight for accurate testing of dynamic item display.
• packages/cli/src/ui/components/views/ExtensionRegistryView.tsx
  • Imported useUIState to access terminal dimensions.
  • Implemented a useMemo hook to dynamically calculate maxItemsToShow based on terminal height and static UI elements.
  • Updated the active item indicator in the renderItem function from > to ●.
  • Applied the dynamically calculated maxItemsToShow to the SearchableList component.
• packages/cli/src/ui/hooks/useRegistrySearch.ts
  • Replaced direct useTextBuffer integration with the new useSearchBuffer hook.
  • Removed useUIState import and related viewport width calculations, as these are now handled within useSearchBuffer.
  • Added a useRef to prevent onSearch from being called on the initial render.
• packages/cli/src/ui/hooks/useSearchBuffer.ts
  • Added a new custom hook useSearchBuffer to encapsulate the logic for creating and managing a text buffer specifically for search inputs, including viewport width calculation based on useUIState.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

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. ↩

[github-actions]

Size Change: +1.54 kB (+0.01%)

Total Size: 25.2 MB

Filename	Size	Change
./bundle/gemini.js	25.2 MB	+1.54 kB (+0.01%)

ℹ️ View Unchanged

Filename	Size
./bundle/sandbox-macos-permissive-open.sb	890 B
./bundle/sandbox-macos-permissive-proxied.sb	1.31 kB
./bundle/sandbox-macos-restrictive-open.sb	3.36 kB
./bundle/sandbox-macos-restrictive-proxied.sb	3.56 kB
./bundle/sandbox-macos-strict-open.sb	4.82 kB
./bundle/sandbox-macos-strict-proxied.sb	5.02 kB

_{compressed-size-action}

[gemini-code-assist]

Code Review

This pull request introduces several excellent UX improvements, particularly in the SearchableList component, which now features more intuitive scrolling and clearer visual indicators. The refactoring of search input logic into the useSearchBuffer hook is a great step towards better code organization and reusability. I've identified one potential high-severity issue in the useRegistrySearch hook's useEffect implementation that could lead to performance degradation if the onSearch prop is not stable. My review includes a specific suggestion to make this more robust.

[chrstnb]

Looks good to me! Thanks for adding the searchBuffer-- very nice.

FWIW e.g., the selected item icon was from the mocks, but I like the way this looks and feels so I say we get it in and get people testing it.

[jacob314]

If we want to use that selection icon across the whole product that is fine (I like it better as well) but we should not be using different icons in different parts of the product.