fix(cli): stabilize prompt layout to prevent jumping when typing

[NTaylorMullen]

Summary

This PR fixes a minor UI annoyance where typing in the prompt box would cause the entire UI to jump vertically.

Details

Previously, the shortcut hint (? for shortcuts) was removed from the DOM when the prompt buffer was not empty. This caused the layout to shift up by one line.

Changes:

• Added minHeight={1} to the shortcut hint container in Composer.tsx.
• Render a spacer (<Text> </Text>) when the hint is hidden while typing.
• This ensures the line occupied by the hint remains in the layout, providing a stable experience.

Related Issues

None.

How to Validate

1. Run the CLI: npm run build && npm start
2. Observe the ? for shortcuts hint in the bottom right.
3. Start typing.
4. Expected: The hint disappears, but the UI does not shift or jump vertically.
5. Delete the text.
6. Expected: The hint reappears after the debounce period.

Pre-Merge Checklist

• Updated relevant documentation and README (if needed)
• Added/updated tests (if needed)
• Noted breaking changes (if any)
• Validated on MacOS

[gemini-code-assist]

Summary of Changes

Hello, 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 resolves a minor UI annoyance in the CLI's prompt box where typing would cause the entire interface to jump vertically. The changes ensure that the area designated for the shortcut hint consistently occupies space, whether the hint is visible or not, thereby providing a stable and predictable user experience during text input.

Highlights

• UI Stability: Introduced minHeight={1} to the shortcut hint containers to reserve vertical space, preventing layout shifts.
• Layout Preservation: Implemented a spacer (<Text> </Text>) that renders when the shortcut hint is hidden, ensuring the hint's vertical space is always maintained.
• Test Updates: Refactored and updated related test cases to align with the new stable UI behavior for the shortcut hint.

Changelog

• packages/cli/src/ui/components/Composer.test.tsx
  • Removed a redundant test case for restoring the shortcuts hint.
  • Updated a test description to accurately reflect the behavior of hiding the shortcuts hint when text is typed.
• packages/cli/src/ui/components/Composer.tsx
  • Added minHeight={1} to the Box components that wrap the ShortcutsHint to prevent layout collapse.
  • Modified the rendering logic for ShortcutsHint to conditionally render a <Text> </Text> spacer when the hint is not visible, preserving its vertical footprint.
• packages/cli/src/ui/components/snapshots/Composer.test.tsx.snap
  • Updated snapshots to reflect the new stable layout and rendering of the composer component.

Activity

• No specific activity (comments, reviews, or progress updates) has been recorded for this pull request yet.

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

[gemini-code-assist]

Code Review

This pull request effectively addresses the UI jumping issue by ensuring that the space for the shortcut hint is always reserved. The changes in Composer.tsx correctly implement this logic using minHeight and conditional rendering of <Text> </Text>. However, a crucial test case for the restoration of the shortcuts hint after debounce when the buffer is empty appears to have been removed, creating a gap in test coverage that could lead to regressions in this crucial UI behavior.

I am having trouble creating individual review comments. Click here to see my feedback.

packages/cli/src/ui/components/Composer.test.tsx (823-832)

The test case restores shortcuts hint after 200ms debounce when buffer is empty was removed. This test specifically covered the scenario where the shortcuts hint reappears after the debounce period when the input buffer becomes empty. While the new tests cover the hiding of the hint, there isn't an explicit test that verifies its restoration after the buffer transitions from non-empty back to empty. This leaves a gap in test coverage for a crucial UI behavior, potentially allowing regressions where the hint might not reappear correctly.

[github-actions]

Size Change: -1.3 kB (0%)

Total Size: 26.4 MB

Filename	Size	Change
./bundle/gemini.js	26 MB	-1.3 kB (0%)

ℹ️ View Unchanged

Filename	Size
./bundle/node_modules/@google/gemini-cli-devtools/dist/client/main.js	221 kB
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/_client-assets.js	227 kB
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/index.js	11.5 kB
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/types.js	132 B
./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}

[jacob314]

[jacob314]

Would be good to polish before landing aligned with these comments from /review-frontend that are a little harsh but generally reasonable.

[jacob314]

This is a review from /review-frontend by Jacob.

Overall, the intention of this PR is good—preventing the UI from jumping when the user starts typing is a great improvement. However, there are a few issues with the current implementation that affect both the layout logic and the "minimal" UI mode.

1. Minimal Mode Blank Line & Snapshot Regression

The current approach introduces a permanent blank line above the prompt in minimal mode (which is clearly visible in the updated __snapshots__/Composer.test.tsx.snap). This defeats the purpose of the minimal UI.

When showUiDetails is false, this block:

{showUiDetails && showShortcutsHint ? (
  <ShortcutsHint />
) : (
  <Text> </Text>
)}

will evaluate to <Text> </Text> and render a blank space, even though the ShortcutsHint was never supposed to be taking up space here in minimal mode.

2. Still Jumps in Minimal Mode

The PR attempts to add the same <Text> </Text> fallback to the showMinimalMetaRow (where the shortcut hint lives during minimal mode). However, the visibility of that entire row is controlled by showMinimalMetaRow, which evaluates to false when showShortcutsHint becomes false (assuming no other indicators like context usage are visible).

Since the whole row unmounts when the user starts typing, the UI still jumps by one line in minimal mode. The <Box minHeight={1}> and <Text> </Text> inside it have no effect because their parent container (showMinimalMetaRow) unmounts.

3. Cleaner Solution: minHeight on the Container

Using <Text> </Text> as a spacer is generally an anti-pattern in Ink/Yoga. A much cleaner solution that avoids adding empty text nodes is to apply minHeight to the outer Box that contains the row components.

For the regular UI mode, applying minHeight={showUiDetails ? 1 : 0} to the parent container ensures the row takes up at least one line when showUiDetails is true, even if both the LoadingIndicator and the ShortcutsHint unmount. This completely prevents the jump in regular mode without needing <Text> </Text>.

Requested Changes

1. Please revert the use of <Text> </Text> and apply minHeight on the parent container instead for the regular UI mode to prevent layout jumping.
2. Please verify that minimal mode no longer renders an empty line when idle.
3. If you intend to fix the jumping in minimal mode as well, you will need to adjust the logic for showMinimalMetaRow so it stays mounted (perhaps with a minHeight={1} on its container) when the user types, rather than unmounting the entire row. If jumping in minimal mode is acceptable (since it's meant to be minimal), please revert the changes in the minimal mode section.
4. Please revert the snapshots, as the new blank lines in __snapshots__/Composer.test.tsx.snap for minimal mode are unintended regressions.