feat(cli): overhaul thinking UI

[keithguerin]

Summary

This PR overhauls the inline thinking UI to match modern design standards and improves the visibility of status indicators. It replaces the thinking emoji in the status bar with a clear text-based indicator.

Details

• Inline Thinking overhaul:
  • Added a white, italicized " Thinking..." header at the start of thinking blocks.
  • Implemented a continuous gray vertical line (│) connecting all thoughts in a sequence.
  • Applied italic styling to thought subjects (bold+italic) and descriptions (italic).
  • Updated history management to treat each thought event as a unique item, preventing overwriting and ensuring correct grouping.
• Status Bar improvements:
  • Replaced the 💬 emoji with the text "Thinking... " for better clarity and accessibility.
• Tests:
  • Updated ThinkingMessage, LoadingIndicator, HistoryItemDisplay, and useGeminiStream tests to reflect the new UI and logic.

Related Issues

Closes #18724

How to Validate

1. Enable full inline thinking: /settings -> Inline Thinking = Full.
2. Ask a question that requires multiple thinking steps.
3. Observe the new " Thinking..." header and continuous vertical line in the chat history.
4. Observe the "Thinking... [subject]" text in the status bar while the model is responding.

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

[gemini-code-assist]

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 refines the user interface for the CLI, particularly focusing on how 'thinking' states and tips are presented. The changes aim to improve clarity and user experience by standardizing the visual representation of ongoing processes and making informative messages more distinct. This overhaul ensures a more consistent and accessible interaction for users tracking the model's activity.

Highlights

• Inline Thinking UI Overhaul: The inline thinking UI has been redesigned to meet modern design standards, featuring a 'Thinking...' header, a continuous gray vertical line connecting thoughts, and italic styling for thought subjects and descriptions.
• Status Bar Improvement: The '💬' emoji in the status bar has been replaced with the clearer text-based indicator 'Thinking... '.
• Tip Visibility Enhancement: Informative tips displayed in the loading area now include a 'Tip: ' prefix to differentiate them from model activity.
• History Management Update: The history management logic has been updated to treat each thought event as a unique item, preventing overwriting and ensuring correct grouping of thoughts.
• Test Updates: Relevant tests for ThinkingMessage, LoadingIndicator, HistoryItemDisplay, and useGeminiStream have been updated to reflect the new UI and logic changes.

Changelog

• packages/cli/src/ui/components/Composer.test.tsx
  • Updated test expectations for loading indicator text to reflect new thinking subject display.
• packages/cli/src/ui/components/Composer.tsx
  • Removed getInlineThinkingMode utility import and its usage.
  • Set thoughtLabel prop to undefined in LoadingIndicator.
• packages/cli/src/ui/components/HistoryItemDisplay.test.tsx
  • Added a new test case to verify the rendering of the 'Thinking...' header when isFirstThinking is true.
• packages/cli/src/ui/components/HistoryItemDisplay.tsx
  • Added isFirstThinking and isLastThinking props to the component interface.
  • Passed isFirstThinking and isLastThinking props to the ThinkingMessage component.
• packages/cli/src/ui/components/LoadingIndicator.test.tsx
  • Removed the mock for terminalUtils and shouldUseEmoji.
  • Updated assertions to expect 'Thinking... ' text instead of the '💬' emoji or 'o' ASCII character.
• packages/cli/src/ui/components/LoadingIndicator.tsx
  • Removed the import for shouldUseEmoji utility.
  • Modified the thinkingIndicator logic to always display 'Thinking... ' text when a thought is present, removing emoji/ASCII fallback.
• packages/cli/src/ui/components/MainContent.tsx
  • Modified the mapping of uiState.history and pendingHistoryItems to calculate and pass isFirstThinking and isLastThinking flags to HistoryItemDisplay.
• packages/cli/src/ui/components/messages/ThinkingMessage.test.tsx
  • Updated test descriptions and assertions to verify the presence of ' Thinking...' header and vertical line.
  • Removed assertions related to specific box drawing characters (┌, ┐, └, ┘).
• packages/cli/src/ui/components/messages/ThinkingMessage.tsx
  • Added isFirstThinking and isLastThinking props to the component.
  • Introduced VERTICAL_LINE_WIDTH constant for consistent vertical line rendering.
  • Refactored the rendering logic to conditionally display a ' Thinking...' header and a continuous vertical line based on isFirstThinking and isLastThinking props.
  • Adjusted content width calculation to account for the new vertical line.
• packages/cli/src/ui/hooks/useGeminiStream.test.tsx
  • Removed the expect.any(Number) argument from the addItem mock call in a test case.
• packages/cli/src/ui/hooks/useGeminiStream.ts
  • Modified the handleThoughtEvent callback to no longer pass userMessageTimestamp to the addItem function when adding thinking items to history.
• packages/cli/src/ui/hooks/useLoadingIndicator.test.tsx
  • Updated the expected possiblePhrases array to include the 'Tip: ' prefix for informative tips.
• packages/cli/src/ui/hooks/usePhraseCycler.test.tsx
  • Updated test assertions to verify that informative tips are prefixed with 'Tip: '.
• packages/cli/src/ui/hooks/usePhraseCycler.ts
  • Modified the logic to prepend 'Tip: ' to informative tips before setting the currentLoadingPhrase.

Activity

• The pull request author, keithguerin, provided a detailed summary of the changes, including an overview, specific details on inline thinking, status bar, and tip visibility improvements, and test updates.
• The author outlined validation steps for testing the new UI elements.
• The pre-merge checklist indicates that tests were added/updated and validation was performed on MacOS via npm run.

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 provides a significant overhaul to the thinking UI, making it clearer and more modern. It also improves the visibility of status indicators and tips. The changes are well-implemented across the UI components, hooks, and tests. The new thinking UI logic in ThinkingMessage.tsx is sound, and the props isFirstThinking and isLastThinking are correctly determined in MainContent.tsx. The status bar indicator is now text-based, and tips are prefixed with "Tip: ", both of which are good UX improvements. The related tests have been updated accordingly. The change to how thinking items are added to history in useGeminiStream.ts is a good bug fix that prevents thoughts from being overwritten. Overall, this is a solid PR that improves the CLI's user experience. I found no high or critical issues.

[github-actions]

Size Change: +1.9 kB (+0.01%)

Total Size: 26 MB

Filename	Size	Change
./bundle/gemini.js	25.5 MB	+1.9 kB (+0.01%)

ℹ️ 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]