fix(ui): Correct mouse click cursor positioning for wide characters

[SandyTao520]

TLDR

This PR fixes an issue where clicking on wide characters (e.g., CJK characters) in the input prompt would position the cursor incorrectly. Previously, the logic assumed a 1:1 mapping between visual columns and character indices, which is incorrect for characters taking up multiple columns.

Dive Deeper

The moveToVisualPosition function in text-buffer.ts was updated to correctly calculate the logical cursor position from a visual click coordinate.

• It now iterates through the characters of the line, summing up their visual widths (using string-width).
• It checks if the clicked column falls within a character's visual range.
• If the click is on the second half of a wide character (width >= 2), it snaps the cursor to the after position of that character.
• preferredCol is updated to track the logical character offset rather than the raw visual column, improving vertical navigation consistency across lines with mixed character widths.

Reviewer Test Plan

1. Open the CLI.
2. Type some wide characters, e.g., "你好世界" (Hello World in Chinese).
3. Click on the left half of '好'. The cursor should appear between '你' and '好'.
4. Click on the right half of '好'. The cursor should appear between '好' and '世'.
5. Verify that clicking on regular ASCII text still works as expected.

Testing Matrix

	🍏	🪟	🐧
npm run	✅	❓	❓
npx	✅	❓	❓
Docker	❓	❓	❓
Podman	❓	-	-
Seatbelt	❓	-	-

Linked issues / bugs

[gemini-code-assist]

Summary of Changes

Hello @SandyTao520, 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 resolves a critical UI bug affecting cursor positioning when users interact with wide characters in the CLI's input prompt. By overhauling the moveToVisualPosition function, the system now accurately translates visual click coordinates into logical character indices, ensuring a precise and intuitive cursor experience, especially for languages with multi-width characters. This significantly improves the usability and accessibility of the input prompt for a global user base.

Highlights

• Cursor Positioning Fix: Corrected an issue where clicking on wide characters (e.g., CJK) in the input prompt resulted in incorrect cursor placement.
• moveToVisualPosition Update: The moveToVisualPosition function in text-buffer.ts was refactored to accurately map visual click coordinates to logical cursor positions, considering the varying widths of characters.
• Wide Character Handling: The updated logic now iterates through characters, calculates their visual widths, and precisely determines the cursor's logical offset, including snapping to the correct position when clicking on the second half of a wide character.
• Vertical Navigation Improvement: The preferredCol state is now updated with the logical character offset, enhancing consistency for vertical cursor navigation across lines containing mixed character widths.
• New Test Case: A dedicated test case was added to text-buffer.test.ts to specifically validate the correct behavior of moveToVisualPosition with wide characters.

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]

Summary of Changes

Hello @SandyTao520, 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 addresses a critical UI bug where mouse clicks on wide characters within the CLI's input prompt would misplace the cursor. The core problem stemmed from an incorrect assumption about character width in visual rendering. The solution refines the cursor positioning logic to accurately account for multi-width characters, significantly improving the user experience for input involving internationalized text and ensuring precise cursor control.

Highlights

• Cursor Positioning Fix: Resolved an issue where clicking on wide characters (e.g., CJK characters) in the input prompt resulted in incorrect cursor placement. The previous logic assumed a 1:1 visual column to character index mapping, which is now corrected.
• Improved moveToVisualPosition Logic: The moveToVisualPosition function in text-buffer.ts has been updated to accurately calculate the logical cursor position from a visual click coordinate. It now iterates through characters, sums their visual widths, and correctly positions the cursor, including snapping to the 'after' position for wide characters clicked on their second half.
• Enhanced Vertical Navigation: The preferredCol variable is now updated to track the logical character offset instead of the raw visual column. This change improves consistency for vertical navigation across lines containing characters of varying widths.
• New Test Case for Wide Characters: A new test case has been added to text-buffer.test.ts specifically to verify the correct behavior of moveToVisualPosition with wide characters (Chinese), ensuring the fix works as expected.

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 correctly addresses an issue with mouse cursor positioning for wide characters by calculating character widths. The new logic in moveToVisualPosition properly iterates through characters to map a visual column to a logical character offset. The accompanying test case for CJK characters is a great addition.

I've found a critical issue where the new cursor snapping logic is incorrectly applied to single-width characters, which would break expected mouse behavior for regular text. I've also noted a high-severity issue regarding an inconsistency between the implementation and documentation for preferredCol that should be addressed to maintain code clarity. Please see my detailed comments.

[github-actions]

Size Change: +450 B (0%)

Total Size: 21.1 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	21.1 MB	+450 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}

[gemini-code-assist]

Code Review

This pull request provides a solid fix for incorrect cursor positioning when clicking on wide characters. The logic in moveToVisualPosition is well-reasoned, correctly calculating the logical character offset from visual click coordinates by iterating through characters and summing their widths. This properly handles multi-column characters. The new test case for Chinese characters is comprehensive and effectively validates the fix. The related change to update preferredCol to use a logical offset is also a good improvement for consistent vertical navigation. The changes are correct and improve the user experience.

[jacob314]

Works really nicely. I a few days we'll want to align our measurement with Ink's using the same code to tokenize text and cache measurements of characters but that is a problem for another day.