Shortcuts: Move SectionHeader title below top line and refine styling by keithguerin · Pull Request #18721 · google-gemini/gemini-cli

keithguerin · 2026-02-10T07:52:07Z

Summary

Refine the SectionHeader component design as requested for the Shortcuts help panel. Moves the title below the top horizontal line and updates the styling to bold white for the title and secondary gray for the subtitle.

Details

Changed SectionHeader from flexDirection: row to column to stack the title below the line.
Added support for an optional subtitle prop in SectionHeader.
Styled the title with bold and white color.
Updated ShortcutsHelp to use the new title/subtitle structure: " Shortcuts" (bold white) and "See /help for more" (secondary gray).
Updated snapshots for SectionHeader and ShortcutsHelp.

Related Issues

Fixes #18717
Related to #18532

How to Validate

Start the CLI: npm run start
Press ? to open the shortcuts help.
Verify the header:
- Top line is full width.
- " Shortcuts" is bold white on the next line.
- "See /help for more" is gray next to it.
Run tests: npm test -w @google/gemini-cli -- src/ui/components/shared/SectionHeader.test.tsx src/ui/components/ShortcutsHelp.test.tsx

Pre-Merge Checklist

gemini-code-assist · 2026-02-10T07:52:23Z

Summary of Changes

Hello @keithguerin, 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 implements a design refinement for the SectionHeader component, primarily affecting the Shortcuts help panel. The changes restructure the header to display the main title below a full-width line, introducing distinct styling for the title and an optional subtitle, thereby enhancing the visual presentation and clarity of section headers within the CLI.

Highlights

SectionHeader Redesign: The SectionHeader component's visual design has been refined, moving the title below the top horizontal line.
Styling Updates: The title is now bold white, and a new optional subtitle is styled in secondary gray.
Component Structure: The SectionHeader component's flexDirection was changed from row to column to accommodate the new layout.
Subtitle Support: An optional subtitle prop was added to the SectionHeader component.
ShortcutsHelp Integration: The ShortcutsHelp component was updated to utilize the new SectionHeader title and subtitle structure.
Snapshot Updates: Associated snapshots for SectionHeader and ShortcutsHelp were updated to reflect the visual changes.

Changelog

packages/cli/src/ui/components/ShortcutsHelp.tsx
- Updated the SectionHeader component usage to separate the main title from the descriptive text into a new subtitle prop.
packages/cli/src/ui/components/snapshots/ShortcutsHelp.test.tsx.snap
- Adjusted snapshot tests to match the new visual layout of the ShortcutsHelp component's header.
packages/cli/src/ui/components/shared/SectionHeader.tsx
- Modified the SectionHeader component to accept an optional subtitle prop.
- Changed the flexDirection of the header's main Box from row to column.
- Applied new styling to the title (bold white) and subtitle (secondary gray).
- Restructured the header to place the title and subtitle below a full-width top line.
packages/cli/src/ui/components/shared/snapshots/SectionHeader.test.tsx.snap
- Updated snapshot tests for the SectionHeader component to reflect the new design and layout.

Activity

The author updated relevant documentation and README files.
Tests were added or updated to cover the changes.
Validation was performed on MacOS using npm run.
The pull request addresses issue design(cli): move SectionHeader title below top line and refine styling #18717 and is related to Epic: Improvements to User Help and Feature Discovery within Gemini CLI #18532.

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.

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 refines the SectionHeader component's design by moving the title below the separator line and adding support for a subtitle. The changes are well-implemented, and the suggestions to improve API consistency and robustness by making the caller responsible for spacing and ensuring subtitle truncation align with established UI consistency and layout predictability rules. These changes will make the SectionHeader component more predictable and maintainable.

gemini-code-assist · 2026-02-10T07:53:55Z

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

+      <Text color="white" bold wrap="truncate-end">
+        {title}
+      </Text>
+      {subtitle && <Text color={theme.text.secondary}> {subtitle}</Text>}


There are a couple of improvements that could be made to the subtitle handling for better consistency and robustness:

Spacing Consistency: The component currently adds a leading space to the subtitle. However, consumers of this component (like ShortcutsHelp.tsx) are already providing a leading space for the title prop. To make the component's API more consistent, SectionHeader should not add any spaces itself. The caller should be responsible for providing any necessary spacing for both title and subtitle.

Truncation: The subtitle does not have truncation enabled. If the combined title and subtitle are too long, the title will truncate but the subtitle will wrap to a new line, which can break the single-line layout. The subtitle should also be truncated to maintain the intended design.

Applying these changes will make the component more predictable and easier to use. Remember to update the call site in ShortcutsHelp.tsx to add the space to the subtitle prop.

Suggested change

{subtitle && <Text color={theme.text.secondary}> {subtitle}</Text>}

{subtitle && <Text color={theme.text.secondary} wrap="truncate-end">{subtitle}</Text>}

References

Maintaining consistency with existing UI behavior and component APIs across the repository to ensure predictability and ease of use.

Ensuring consistent layout by preventing dynamic wrapping or variable heights, even for single-line elements, to maintain a predictable design.

gemini-code-assist · 2026-02-10T07:53:55Z

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

  return (
    <Box flexDirection="column" width="100%">
-      <SectionHeader title="Shortcuts (for more, see /help)" />
+      <SectionHeader title=" Shortcuts" subtitle="See /help for more" />


To complement the suggested change in SectionHeader.tsx, please add a leading space to the subtitle prop. This makes the caller responsible for all content spacing, leading to a more consistent and predictable component API.

Suggested change

<SectionHeader title=" Shortcuts" subtitle="See /help for more" />

<SectionHeader title=" Shortcuts" subtitle=" See /help for more" />

References

Maintaining consistency with existing UI behavior and component APIs across the repository to ensure predictability and ease of use.

github-actions · 2026-02-10T07:54:32Z

Size Change: +213 B (0%)

Total Size: 25.7 MB

ℹ️ View Unchanged

Filename	Size	Change
`./bundle/gemini.js`	25.3 MB	+213 B (0%)
`./bundle/node_modules/@google/gemini-cli-devtools/dist/client/main.js`	221 kB	0 B
`./bundle/node_modules/@google/gemini-cli-devtools/dist/src/_client-assets.js`	227 kB	0 B
`./bundle/node_modules/@google/gemini-cli-devtools/dist/src/index.js`	11.5 kB	0 B
`./bundle/node_modules/@google/gemini-cli-devtools/dist/src/types.js`	132 B	0 B
`./bundle/sandbox-macos-permissive-open.sb`	890 B	0 B
`./bundle/sandbox-macos-permissive-proxied.sb`	1.31 kB	0 B
`./bundle/sandbox-macos-restrictive-open.sb`	3.36 kB	0 B
`./bundle/sandbox-macos-restrictive-proxied.sb`	3.56 kB	0 B
`./bundle/sandbox-macos-strict-open.sb`	4.82 kB	0 B
`./bundle/sandbox-macos-strict-proxied.sb`	5.02 kB	0 B

_{compressed-size-action}

jacob314 · 2026-02-10T17:32:27Z

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

    />
+    <Box flexDirection="row">
+      <Text color="white" bold wrap="truncate-end">
+        {title}


use the them instead of "white"

jacob314 · 2026-02-10T17:34:23Z

The following feedback is from /review-frontend audited by Jacob:

Hardcoded Color: In packages/cli/src/ui/components/shared/SectionHeader.tsx, the title uses color="white". This may cause visibility issues for users with light terminal backgrounds. Please consider using theme.text.primary or omitting the color prop to ensure the component remains theme-agnostic.
Missing Test Coverage: The SectionHeader.test.tsx file does not currently exercise the new subtitle prop. Please add a test case to verify that the subtitle renders correctly and is captured in the snapshots.

jacob314

Approved after this quick to fix comments are addressed.

jacob314

…sting

… truncation

keithguerin requested a review from a team as a code owner February 10, 2026 07:52

keithguerin linked an issue Feb 10, 2026 that may be closed by this pull request

Epic: Improvements to User Help and Feature Discovery within Gemini CLI #18532

Closed

gemini-code-assist bot reviewed Feb 10, 2026

View reviewed changes

keithguerin changed the title ~~design(cli): move SectionHeader title below top line and refine styling~~ Shortcuts: Move SectionHeader title below top line and refine styling Feb 10, 2026

gemini-cli bot added area/core Issues related to User Interface, OS Support, Core Functionality 🔒 maintainer only ⛔ Do not contribute. Internal roadmap item. labels Feb 10, 2026

jacob314 reviewed Feb 10, 2026

View reviewed changes

jacob314 enabled auto-merge February 18, 2026 17:42

jacob314 approved these changes Feb 18, 2026

View reviewed changes

keithguerin added 4 commits February 23, 2026 23:48

design: move SectionHeader title below the top line

c462fd3

fix(cli): address PR review comments for SectionHeader styling and te…

c7419b3

…sting

fix(cli): implement final design refinements for subtitle spacing and…

5c8b497

… truncation

test: fix onRender metrics fallback in test utility and update snapshots

a0317cb

keithguerin force-pushed the 18532-epic-improvements-to-user-help-and-feature-discovery-within-gemini-cli branch from 255e2b0 to a0317cb Compare February 24, 2026 07:55

jacob314 added this pull request to the merge queue Feb 24, 2026

Merged via the queue into main with commit e69e23e Feb 24, 2026
27 checks passed

jacob314 deleted the 18532-epic-improvements-to-user-help-and-feature-discovery-within-gemini-cli branch February 24, 2026 08:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shortcuts: Move SectionHeader title below top line and refine styling#18721

Shortcuts: Move SectionHeader title below top line and refine styling#18721
jacob314 merged 4 commits intomainfrom
18532-epic-improvements-to-user-help-and-feature-discovery-within-gemini-cli

keithguerin commented Feb 10, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Feb 10, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Feb 10, 2026

Uh oh!

gemini-code-assist bot Feb 10, 2026

Uh oh!

github-actions bot commented Feb 10, 2026 •

edited

Loading

Uh oh!

jacob314 Feb 10, 2026

Uh oh!

jacob314 commented Feb 10, 2026

Uh oh!

jacob314 left a comment

Uh oh!

jacob314 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	{subtitle && <Text color={theme.text.secondary}> {subtitle}</Text>}
	{subtitle && <Text color={theme.text.secondary} wrap="truncate-end">{subtitle}</Text>}

	<SectionHeader title=" Shortcuts" subtitle="See /help for more" />
	<SectionHeader title=" Shortcuts" subtitle=" See /help for more" />

Conversation

keithguerin commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Related Issues

How to Validate

Pre-Merge Checklist

Uh oh!

gemini-code-assist bot commented Feb 10, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jacob314 Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

jacob314 commented Feb 10, 2026

Uh oh!

jacob314 left a comment

Choose a reason for hiding this comment

Uh oh!

jacob314 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

keithguerin commented Feb 10, 2026 •

edited

Loading

github-actions bot commented Feb 10, 2026 •

edited

Loading