chore: update colors for ask_user dialog

[jackwotherspoon]

Summary

Update the ask_user dialog tab headers to improve accessibility and visual consistency. The active tab now uses the green "success" color (matching the selection list) and is underlined to make it stand out more clearly in the terminal.

Details

• Modified the TabHeader component to change the active tab color from theme.text.accent (purple) to theme.status.success (green).
• Added the underline property to the active tab's Text component to enhance visibility and accessibility.
• These changes ensure the active step in multi-question dialogs is more prominent across different terminal themes.

Related Issues

Fixes #18542

How to Validate

1. Manual Verification: Run the ask_user demo to see the visual changes:

   npx tsx packages/cli/examples/ask-user-dialog-demo.tsx

2. Automated Tests: Run the relevant unit tests to ensure component logic remains sound:

   npm test -w @google/gemini-cli -- src/ui/components/shared/TabHeader.test.tsx src/ui/components/AskUserDialog.test.tsx

Pre-Merge Checklist

• Updated relevant documentation and README (if needed)
• Added/updated tests (if needed)
• Noted breaking changes (if any)
• Validated on required platforms/methods:
  • MacOS
    • npm run
    • npx
    • Docker
    • Podman
    • Seatbelt
  • Windows
    • npm run
    • npx
    • Docker
  • Linux
    • npm run
    • npx
    • Docker

[gemini-code-assist]

Summary of Changes

Hello @jackwotherspoon, 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 enhances the user experience and accessibility of the ask_user dialogs by visually distinguishing the active tab header. The changes involve updating the active tab's color to a more prominent success green and adding an underline, making it easier for users to identify the current step in multi-question dialogs across various terminal themes.

Highlights

• Active Tab Color Update: The active tab header color in ask_user dialogs has been changed from theme.text.accent (purple) to theme.status.success (green). This improves accessibility and visual consistency, making the active step more prominent.
• Active Tab Underline Added: An underline property has been added to the active tab header in ask_user dialogs. This further enhances visibility and accessibility, ensuring the active step stands out clearly across different terminal themes.

Changelog

• packages/cli/src/ui/components/shared/TabHeader.tsx
  • Modified the color prop of the Text component for the active tab (i === currentIndex) from theme.text.accent to theme.status.success.
  • Added the underline prop set to true for the Text component when the tab is active (i === currentIndex).

Activity

• The author has provided detailed instructions for manual verification by running npx tsx packages/cli/examples/ask-user-dialog-demo.tsx.
• Automated tests for TabHeader.test.tsx and AskUserDialog.test.tsx are suggested to ensure component logic remains sound.
• The pre-merge checklist indicates that tests have been added/updated and validation on MacOS (npm run) has been completed.

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 enhances the ask_user dialog by updating the active tab's styling for better visibility. The change to a green 'success' color and the addition of an underline are straightforward and effectively improve UI clarity and accessibility. The implementation is clean and I have no further suggestions.

[github-actions]

Size Change: +43 B (0%)

Total Size: 23.8 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	23.8 MB	+43 B (0%)
./bundle/sandbox-macos-permissive-closed.sb	1.03 kB	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-closed.sb	3.29 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

_{compressed-size-action}