fix(web-ui): let the '@' reference picker own its keys while open

The picker is an overlay layer, so the overlay coordinator routes its
keyboard from the document after the React handlers run. The composer key
handler therefore consumed ArrowDown as history navigation and Enter as
send before the picker could move or accept a row, which left the list
reachable by ArrowUp only and made Enter submit the draft.

Release the keys the picker owns while it is open instead of relying on
event order, and keep the composer path for every other key.

Author: kev1n77

src/web-ui/src/flow_chat/components/ChatInput.tsx

@@ -217,6 +217,7 @@ import {
   replaceLeadingSlashCommandWithSkillToken,
 } from '../utils/skillPromptReference';
 import { resolveChatInputQuickSkillShortcuts } from '../utils/chatInputQuickSkills';
+import { contextPickerOwnsKey } from '../utils/chatInputKeyOwnership';
 import { useDeepReviewConsent } from './DeepReviewConsentDialog';
 import { useSessionReviewActivity } from '../hooks/useSessionReviewActivity';
 import { shouldBlockReviewCommand } from '../utils/deepReviewCommandGuard';
@@ -5619,6 +5620,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       return;
     }
 
+    // The '@' reference picker owns its navigation and acceptance keys through
+    // its overlay layer, which the coordinator routes after React handlers.
+    if (contextPickerOwnsKey({ contextPickerActive: contextTriggerState.isActive, key: e.key })) {
+      return;
+    }
+
     if (slashCommandState.isActive) {
         const items = getActiveSlashPickerItems();
         const maxIndex = Math.max(0, items.length - 1);
@@ -5813,7 +5820,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       handleSendOrCancel();
     }
 
-  }, [canUseThreadGoal, handleSendOrCancel, submitBtwFromInput, submitGoalFromInput, derivedState, dispatchInput, slashCommandState, getActiveSlashPickerItems, selectSlashCommandAction, selectSlashExternalPromptCommand, selectSlashPromptCommand, selectSlashAcpCommand, selectSlashSkill, getRichTextTriggerController, historyIndex, inputHistory, savedDraft, inputState.value, hasSendableInput, currentSessionId, isBtwSession, showTargetSwitcher, setInputTarget, removeContext, t]);
+  }, [canUseThreadGoal, handleSendOrCancel, submitBtwFromInput, submitGoalFromInput, derivedState, dispatchInput, slashCommandState, contextTriggerState.isActive, getActiveSlashPickerItems, selectSlashCommandAction, selectSlashExternalPromptCommand, selectSlashPromptCommand, selectSlashAcpCommand, selectSlashSkill, getRichTextTriggerController, historyIndex, inputHistory, savedDraft, inputState.value, hasSendableInput, currentSessionId, isBtwSession, showTargetSwitcher, setInputTarget, removeContext, t]);
 
   const handleImeCompositionStart = useCallback(() => {
     isImeComposingRef.current = true;

src/web-ui/src/flow_chat/utils/chatInputKeyOwnership.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { contextPickerOwnsKey } from './chatInputKeyOwnership';
+
+describe('context picker key ownership', () => {
+  it('releases navigation and acceptance keys so the open picker handles them', () => {
+    for (const key of ['ArrowUp', 'ArrowDown', 'Enter', 'Tab']) {
+      expect(contextPickerOwnsKey({ contextPickerActive: true, key })).toBe(true);
+    }
+  });
+
+  it('keeps history navigation and send while the picker is closed', () => {
+    for (const key of ['ArrowUp', 'ArrowDown', 'Enter', 'Tab']) {
+      expect(contextPickerOwnsKey({ contextPickerActive: false, key })).toBe(false);
+    }
+  });
+
+  it('leaves typing and caret keys with the editor', () => {
+    for (const key of ['a', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Escape']) {
+      expect(contextPickerOwnsKey({ contextPickerActive: true, key })).toBe(false);
+    }
+  });
+});

src/web-ui/src/flow_chat/utils/chatInputKeyOwnership.ts

@@ -0,0 +1,22 @@
+/**
+ * Keys the '@' reference picker consumes while it is open.
+ */
+const CONTEXT_PICKER_OWNED_KEYS: ReadonlySet<string> = new Set([
+  'ArrowUp',
+  'ArrowDown',
+  'Enter',
+  'Tab',
+]);
+
+/**
+ * The '@' reference picker is an overlay layer, so the overlay coordinator routes
+ * its keyboard from the document after React handlers. The composer must release
+ * every key the picker consumes instead of relying on event order; otherwise the
+ * picker loses ArrowDown to history navigation and Enter to send.
+ */
+export function contextPickerOwnsKey(params: {
+  contextPickerActive: boolean;
+  key: string;
+}): boolean {
+  return params.contextPickerActive && CONTEXT_PICKER_OWNED_KEYS.has(params.key);
+}