google-gemini / google-gemini/gemini-cli
React State Race Condition in ToolConfirmationMessage Causing Duplicate Renderings
- Dominant language
- TypeScript
- Stars
- 107k
- Forks
- 14.6k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 45
Description
### Description
There is an Ink/React state race condition when a user confirms a tool execution. Calling `handleConfirm` immediately upon keypress unmounts the tool UI component while the UI is still calculating its expanded state. This concurrently triggers `setConstrainHeight`, causing Ink to draw duplicate footers and visual artifacts on the terminal.
**Location**: [packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx#L264-L276](https://github.com/google-gemini/gemini-cli/blob/main/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx#L264-L276)
### Why it's important
The current code utilizes a `useEffect` workaround bridged by an `isCancelling` state boolean to intentionally delay the execution to the next render cycle. While this prevents the duplicate footers, it is a band-aid solution. With the ongoing migration to a new renderer, this component’s state management needs to be fundamentally decoupled from the height constraints so that state changes are processed synchronously without visual tearing.
Contributor guide
Research direction
Start in packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx at lines 264-276, reading handleConfirm, the useEffect workaround, and isCancelling state. Reproduce confirmation while the expanded state is being calculated and observe the duplicate footers or terminal artifacts. Done means state changes no longer race with height constraints and the tool UI renders without duplicate footers during confirmation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- cli
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100