fix(web): restore composer mention menu highlight and scroll sync

[GuilhermeVieiraDev]

What Changed

Fixed the composer @ mention menu so keyboard navigation keeps the highlighted item in view.

Also restored a single highlight owner for the menu. Arrow key navigation now goes back through Base UI's built-in highlight handling, which fixes the duplicate-highlight behavior where one item could stay visually selected while another became active from keyboard navigation.

Why

The @ mention picker had two related issues:

• Using ArrowDown / ArrowUp could move the active item without scrolling the menu, so the real selection could end up outside the visible area.
• The menu was also mixing Base UI highlight state with a separate app-managed active style, which could make it look like two items were selected at once.

This change keeps highlight ownership in one place and adds scroll sync on the active item, which makes keyboard navigation behave like a normal command menu again.

UI Changes

Before:

• The highlighted item could move out of view when navigating with the keyboard
• The menu could appear to have two selected items at once

Screencast.From.2026-03-21.21-48-42.mp4

After:

• The active item stays scrolled into view during keyboard navigation
• The menu only shows one highlighted item at a time

Screencast.From.2026-03-21.21-50-58.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Note

Restore keyboard highlight ownership and scroll behavior in the composer mention menu

• Rewires nudgeComposerMenuHighlight in ChatView.tsx to dispatch ArrowUp/ArrowDown keyboard events to a hidden CommandInput instead of computing the next item locally, delegating highlight ownership back to the Command component.
• Adds a useEffect in ComposerCommandMenu.tsx that calls scrollIntoView({block:"nearest"}) on the active item whenever the highlighted item changes, keeping it visible during keyboard navigation.
• Exposes data-active and data-path attributes on ComposerCommandMenuItem and adds scroll-my-2 to improve scroll positioning.
• Adds a browser test in ChatView.browser.tsx that seeds many project entries, navigates with ArrowDown, and asserts the list scrolls and the selected path is inserted into the prompt.

^{Macroscope summarized 7ed9e84.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 328d470c-7198-4b1c-80c8-4faca249925e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting to disable sequence diagrams in the walkthrough.