feat: redesign header to be compact with ASCII icon by keithguerin · Pull Request #18713 · google-gemini/gemini-cli

keithguerin · 2026-02-10T07:11:40Z

Summary

Redesigns the Gemini CLI header into a compact layout with an ASCII icon and primary/secondary identity text.

Details

Compact Header: Replaces large ASCII logo with a 4-line icon and side-by-side text block.
Identity Display: Shows version, authentication email, and user tier (e.g., Gemini Code Assist for individuals).
Component Updates:
- AppHeader.tsx: Implements the new compact structure.
- Tips.tsx: Simplified tips content and formatting.
- HorizontalLine.tsx: Added position prop ("top", "center", "bottom") supporting ‾ (overline) and _ (underline) styles.
Cleanup: Commented out HorizontalLine and removed sandbox warning for now as requested.

Related Issues

Fixes #18715

How to Validate

Run the CLI: npm start
Verify the new compact header layout:
- Icon on the left.
- 4 lines of text on the right (Version, Email, Tier).
Verify simplified tips appear below.
Run npm run build to confirm compilation.

Pre-Merge Checklist

gemini-cli · 2026-02-10T07:11:51Z

Hi @keithguerin, 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-cli · 2026-02-10T07:11:52Z

Hi there! Thank you for your contribution to Gemini CLI.

To improve our contribution process and better track changes, we now require all pull requests to be associated with an existing issue, as announced in our recent discussion and as detailed in our CONTRIBUTING.md.

This pull request is being closed because it is not currently linked to an issue. Once you have updated the description of this PR to link an issue (e.g., by adding Fixes #123 or Related to #123), it will be automatically reopened.

How to link an issue:
Add a keyword followed by the issue number (e.g., Fixes #123) in the description of your pull request. For more details on supported keywords and how linking works, please refer to the GitHub Documentation on linking pull requests to issues.

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

gemini-code-assist · 2026-02-10T07:11:58Z

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 significantly refactors the Gemini CLI's user interface by introducing a more compact and informative header. The changes aim to provide users with essential application and account details at a glance, improving the overall clarity and user experience of the command-line interface. Additionally, the update streamlines the display of initial usage tips and enhances a shared UI component for greater flexibility.

Highlights

Compact Header Redesign: The Gemini CLI header has been redesigned into a compact, 4-line layout, replacing the previous large ASCII logo with a smaller ASCII icon and side-by-side text.
Enhanced Identity Display: The new header now prominently displays key identity information including the CLI version, user authentication email, and the user's tier (e.g., 'Gemini Code Assist for individuals').
Simplified Tips Component: The Tips.tsx component has been updated to provide a more concise and simplified list of getting started tips, removing some conditional content.
Flexible Horizontal Line Component: The HorizontalLine.tsx component now includes a position prop, allowing it to render different border styles ('top' for overline, 'bottom' for underline, or 'center' for single line).
Cleanup and Refinements: Minor cleanup was performed, including commenting out the HorizontalLine usage in AppHeader.tsx and removing a sandbox warning as requested.

Changelog

packages/cli/src/ui/components/AppHeader.tsx
- Replaced the previous Header and UserIdentity components with a new compact header structure.
- Integrated a new ASCII icon and dynamic text display for version, update status, user email, and tier name.
- Added imports for Text, useMemo, UserAccountManager, AuthType, theme, ThemedGradient, and CliSpinner.
- Removed the nightly prop from useUIState destructuring.
- Implemented logic to fetch and display user authentication details and tier information.
- Commented out the usage of HorizontalLine within the component.
packages/cli/src/ui/components/Tips.tsx
- Simplified the list of displayed tips, removing the conditional tip related to GEMINI.md files.
- Adjusted the formatting and content of the remaining tips for conciseness.
- Removed the config prop from the component's interface and usage.
packages/cli/src/ui/components/shared/HorizontalLine.tsx
- Added width and position props to control the line's dimensions and style.
- Introduced LinePosition type for specifying line placement ('top', 'center', 'bottom').
- Defined overlineStyle and underlineStyle objects to support different border characters.
- Modified the borderStyle logic to dynamically apply overlineStyle, underlineStyle, or 'single' based on the position prop.

Activity

No specific activity (comments, reviews, progress) 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.

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 well-designed compact header for the CLI, improving the user interface by making it less cluttered. The changes are mostly well-implemented, with a nice enhancement to the HorizontalLine component and simplification of the Tips component. However, I've identified a critical compilation error related to prop handling in the Tips component that needs to be addressed in both Tips.tsx and AppHeader.tsx. Additionally, there's a high-severity performance concern in AppHeader.tsx due to synchronous file I/O during the render cycle, which could negatively impact UI responsiveness.

gemini-code-assist · 2026-02-10T07:13:50Z

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

      )}
+
      {!(settings.merged.ui.hideTips || config.getScreenReader()) &&
        showTips && <Tips config={config} />}


The config prop has been removed from the Tips component, but it is still being passed here. This should be removed to fix the compilation error.

Suggested change

showTips && <Tips config={config} />}

showTips && <Tips />}

gemini-code-assist · 2026-02-10T07:13:50Z

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

+  const { email, tierName } = useMemo(() => {
+    if (!authType) {
+      return { email: undefined, tierName: undefined };
+    }
+    const userAccountManager = new UserAccountManager();
+    return {
+      email: userAccountManager.getCachedGoogleAccount(),
+      tierName: config.getUserTierName(),
+    };
+  }, [config, authType]);


The useMemo hook executes userAccountManager.getCachedGoogleAccount(), which performs synchronous file I/O. This blocks the render thread and can lead to UI unresponsiveness. This data should be fetched asynchronously, for example, within a useEffect hook that updates component state.

gemini-cli · 2026-02-10T07:17:46Z

Thank you for linking an issue! This pull request has been automatically reopened.

github-actions · 2026-02-10T07:22:31Z

Size Change: -9.32 kB (-0.04%)

Total Size: 25.8 MB

Filename	Size	Change
`./bundle/gemini.js`	25.3 MB	-9.32 kB (-0.04%)

ℹ️ 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 · 2026-02-10T17:42:16Z

Ask gemini to truncate the lines (either with overflow:hidden or ellipses your UX call). Right now this looks bad when the terminal is very narrow

jacob314 · 2026-02-10T17:46:09Z

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

-  const { email, tierName } = useMemo(() => {
-    if (!authType) {
-      return { email: undefined, tierName: undefined };
+  useEffect(() => {


revert this change. this change. it has no benefit as moving inside a useEffect is just as blocking and the real fix would be harder.

jacob314 · 2026-02-10T17:48:00Z

Pull Request Review - PR 18713

Thanks for the contribution! Here are some points to address:

1. Conventional Commits

The PR title "Redesign header to be compact with ASCII icon" is missing a prefix. Please update it to follow Conventional Commits (e.g., feat: redesign header to be compact with ASCII icon).

2. Regression: "Authenticated with undefined"

In AppHeader.tsx, if authType is not defined, the header now renders Authenticated with undefined /auth. The previous implementation in UserIdentity.tsx would return null if authType was missing. We should maintain that behavior to avoid displaying broken identity information.

3. Regression: Onboarding Tips

The dynamic tip about GEMINI.md files was removed from Tips.tsx. This tip is an important way for users to discover project-specific customization. Please restore the check for config.getGeminiMdFileCount().

4. Test Quality (`Tips.test.tsx`)

Standards: Please use toMatchSnapshot() instead of raw toContain assertions for verifying the rendered output. This is our project standard for Ink components.
Coverage: The parameterized tests (it.each) that covered different file counts were removed. These should be restored along with the dynamic tip logic.

5. Narrow Terminal Support

The layout currently breaks in narrow terminals. Using the wrap="truncate-end" prop on the Text components in the identity section of AppHeader.tsx would handle this more gracefully.

6. Synchronous File I/O

While moving getCachedGoogleAccount() to useEffect prevents it from blocking the initial React frame, it still uses readFileSync under the hood. This blocks the single-threaded Node.js event loop. We should avoid synchronous I/O in the UI layer.

7. Unused Code Cleanup

The changes to HorizontalLine.tsx are currently commented out in AppHeader.tsx. If they aren't ready for use, they should be removed or moved to a separate PR to keep this one focused.

keithguerin · 2026-02-10T19:53:14Z

I have addressed feedback item #6 by deleting the custom authentication logic I had previously added to AppHeader.tsx. Instead, I am now correctly reusing the <UserIdentity /> component (which already handles the authentication display logic).

I'll follow up with addresses for the remaining feedback items momentarily.

fix(ui): move sync file I/O out of render loop in AppHeader test(ui): update AppHeader snapshots test(ui): fix Tips test and update all snapshots for compact header

…eader

jacob314 · 2026-03-02T20:43:43Z

I've pushed cleanup to remove slop in render.tsx and remove the png. I'll fast follow with a change to fix the regression in UserIdentity.tsx

jacob314

) Co-authored-by: Jacob Richman <jacob314@gmail.com>

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

gemini-cli bot closed this Feb 10, 2026

gemini-code-assist bot reviewed Feb 10, 2026

View reviewed changes

gemini-cli bot reopened this Feb 10, 2026

gemini-cli bot added the area/core Issues related to User Interface, OS Support, Core Functionality label Feb 10, 2026

keithguerin changed the title ~~feat(ui): redesign header to be compact with ASCII icon~~ Redesign header to be compact with ASCII icon Feb 10, 2026

gemini-cli bot added priority/p1 Important and should be addressed in the near term. 🔒 maintainer only ⛔ Do not contribute. Internal roadmap item. labels Feb 10, 2026

jacob314 self-requested a review February 10, 2026 17:30

jacob314 reviewed Feb 10, 2026

View reviewed changes

SandyTao520 force-pushed the main branch from 4a78a96 to 0bf3a01 Compare February 26, 2026 03:03

keithguerin force-pushed the feat/redesign-header-compact branch 4 times, most recently from 1fb5d59 to 3e03fab Compare February 27, 2026 23:46

github-actions bot mentioned this pull request Feb 28, 2026

📊 AI CLI 工具社区动态日报 2026-02-28 duanyytop/agents-radar#23

Open

keithguerin changed the title ~~Redesign header to be compact with ASCII icon~~ feat: redesign header to be compact with ASCII icon Feb 28, 2026

keithguerin added 5 commits February 27, 2026 16:25

feat(ui): redesign header to be compact with ASCII icon

f307ff0

fix(ui): move sync file I/O out of render loop in AppHeader test(ui): update AppHeader snapshots test(ui): fix Tips test and update all snapshots for compact header

fix(ui): reuse UserIdentity component in AppHeader per TL feedback

39754c5

feat(ui): redesign header to be compact with ASCII icon

c656168

fix(ui): move sync file I/O out of render loop in AppHeader

22f20d8

test(ui): fix Tips test and update all snapshots for compact header

a4857ca

keithguerin added 5 commits February 27, 2026 16:25

test(ui): update AppHeader snapshots after reusing UserIdentity

f75d6e4

test(ui): update snapshots and fix test utility crashes for compact h…

b32ca37

…eader

test(ui): update snapshots after rebase and clean build

84d5f30

chore: update copyright year

e7a2b18

test(ui): update snapshots and address reviewer feedback

f576e5b

keithguerin force-pushed the feat/redesign-header-compact branch from 3e03fab to f576e5b Compare February 28, 2026 00:25

keithguerin added a commit that referenced this pull request Mar 2, 2026

Merge pull request #18713 from feat/redesign-header-compact

093a68c

keithguerin mentioned this pull request Mar 2, 2026

feat(ui): Refresh Gemini CLI experience (UX Demo) #20806

Draft

10 tasks

jacob314 added 2 commits March 2, 2026 12:06

Merge branch 'main' into feat/redesign-header-compact

16e1e0b

Revert unintended changes to render.tsx and startup-header.png

6da8abc

jacob314 approved these changes Mar 2, 2026

View reviewed changes

jacob314 enabled auto-merge March 2, 2026 20:44

jacob314 added this pull request to the merge queue Mar 2, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Mar 2, 2026

jacob314 added this pull request to the merge queue Mar 2, 2026

Merged via the queue into main with commit 31ca57e Mar 2, 2026
27 checks passed

jacob314 deleted the feat/redesign-header-compact branch March 2, 2026 21:27

gemini-code-assist bot mentioned this pull request Mar 3, 2026

Changelog for v0.33.0-preview.0 #21030

Merged

BryanBradfo pushed a commit to BryanBradfo/gemini-cli that referenced this pull request Mar 5, 2026

feat: redesign header to be compact with ASCII icon (google-gemini#18713

193f3d7

) Co-authored-by: Jacob Richman <jacob314@gmail.com>

struckoff pushed a commit to struckoff/gemini-cli that referenced this pull request Mar 6, 2026

feat: redesign header to be compact with ASCII icon (google-gemini#18713

c1f1f6d

) Co-authored-by: Jacob Richman <jacob314@gmail.com>

liamhelmer pushed a commit to badal-io/gemini-cli that referenced this pull request Mar 12, 2026

feat: redesign header to be compact with ASCII icon (google-gemini#18713

4cf7196

) Co-authored-by: Jacob Richman <jacob314@gmail.com>

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-cli bot commented Feb 10, 2026

Uh oh!

gemini-cli bot commented Feb 10, 2026

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!

gemini-cli bot commented Feb 10, 2026

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 commented Feb 10, 2026

Uh oh!

jacob314 Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

jacob314 commented Feb 10, 2026

Pull Request Review - PR 18713

1. Conventional Commits

2. Regression: "Authenticated with undefined"

3. Regression: Onboarding Tips

4. Test Quality (Tips.test.tsx)

5. Narrow Terminal Support

6. Synchronous File I/O

7. Unused Code Cleanup

Uh oh!

keithguerin commented Feb 10, 2026

Uh oh!

jacob314 commented Mar 2, 2026

Uh oh!

jacob314 left a comment

Choose a reason for hiding this comment

Uh oh!

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

4. Test Quality (`Tips.test.tsx`)