From b7673c6ff24a22249bf942b5f5a8c476676e5117 Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Sat, 10 Oct 2026 13:17:01 +0800
Subject: [PATCH] fix(flow-chat): accept directories from the context picker on
 Enter and click

Enter, Tab, and a row click in the '@' reference picker now add the highlighted directory or file as context instead of descending into a directory, so accepting a row never changes the browsing level. Entering a directory stays on the explicit affordances: the arrow keys and a click on the trailing chevron, which now carries a localized tooltip. Adds one locale string per locale for that tooltip.
---
 .../components/ChatContextPicker.tsx          |  31 +++--
 .../ChatContextPickerOverlay.test.tsx         | 121 +++++++++++++++++-
 src/web-ui/src/locales/en-US/flow-chat.json   |   1 +
 src/web-ui/src/locales/zh-CN/flow-chat.json   |   1 +
 src/web-ui/src/locales/zh-TW/flow-chat.json   |   1 +
 5 files changed, 144 insertions(+), 11 deletions(-)

diff --git a/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx b/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx
index f47e6e1da8..f3ce6ad847 100644
--- a/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx
@@ -670,8 +670,13 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
     onClose();
   }, [onAddImage, onClose, onRetrySkills, onSelectContext, onSelectSkill, onSelectMcp, openSource]);
 
-  const handleItemClick = useCallback((selection: ContextPickerItem) => {
-    if (selection.kind === 'file' && selection.item.isDirectory && !isSearchMode) {
+  const handleItemClick = useCallback((selection: ContextPickerItem, event: React.MouseEvent<HTMLElement>) => {
+    // Browsing keeps its own affordance: the trailing chevron opens a directory,
+    // while a row click accepts the row exactly like Enter. Both input devices
+    // therefore select a directory without leaving the current level.
+    const clickedEnterAffordance = event.target instanceof Element
+      && Boolean(event.target.closest('[data-openbitfun-part="indicator"]'));
+    if (selection.kind === 'file' && selection.item.isDirectory && !isSearchMode && clickedEnterAffordance) {
       enterDirectory(selection.item);
       return;
     }
@@ -712,13 +717,13 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
       }
       case 'Enter':
       case 'Tab': {
+        // Accepting a row always selects it, including a directory. Browsing a
+        // directory stays on the explicitly navigational keys (ArrowRight in,
+        // ArrowLeft out) so acceptance and navigation never share one key.
         event.preventDefault();
         event.stopPropagation();
         const selected = displayItems[selectedIndex];
-        if (selected) {
-          if (event.key === 'Tab' && selected.kind !== 'source') handleSelect(selected);
-          else handleItemClick(selected);
-        }
+        if (selected) handleSelect(selected);
         break;
       }
       case 'Escape':
@@ -727,7 +732,7 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
         onClose();
         break;
     }
-  }, [canNavigateBack, displayItems, enterDirectory, goBack, handleItemClick, handleSelect, isOpen, isSearchMode, onClose, openSource, selectedIndex]);
+  }, [canNavigateBack, displayItems, enterDirectory, goBack, handleSelect, isOpen, isSearchMode, onClose, openSource, selectedIndex]);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -893,6 +898,7 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
                     : 'chatInput.boostSkillsLoadFailed')
                   : session?.sessionName ?? skill?.name ?? mcp?.label ?? file?.name;
               const skillDescription = skill?.description?.trim() || undefined;
+              const isEnterableDirectory = Boolean(file?.isDirectory) && !isSearchMode;
               return (
                 <ListboxOption data-overflow-trigger
                   active={index === selectedIndex}
@@ -903,8 +909,13 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
                   data-openbitfun-context-kind={selection.kind === 'source' || selection.kind === 'action'
                     ? selection.id
                     : selection.kind === 'mcp' ? `mcp-${selection.item.kind}` : selection.kind}
-                  indicator={selection.kind === 'source' || (file?.isDirectory && !isSearchMode)
-                    ? <Icon name="chevron-right" size="lg" aria-hidden="true" />
+                  indicator={selection.kind === 'source' || isEnterableDirectory
+                    ? <Icon
+                        aria-hidden="true"
+                        name="chevron-right"
+                        size="lg"
+                        title={isEnterableDirectory ? t('contextPicker.openDirectory') : undefined}
+                      />
                     : undefined}
                   leading={selection.kind === 'source'
                     ? selection.id === 'mcp'
@@ -943,7 +954,7 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
                     ?? (file?.referenceStableKey
                       ? file.referenceDescription || file.path
                       : undefined)}
-                  onClick={() => handleItemClick(selection)}
+                  onClick={(event) => handleItemClick(selection, event)}
                   onContextMenu={(event) => {
                     event.preventDefault();
                     if (file?.isDirectory) enterDirectory(file);
diff --git a/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx b/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx
index dc06b53ce8..f89f02ac8d 100644
--- a/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx
@@ -113,6 +113,10 @@ const option = (kind: string) => document.querySelector<HTMLElement>(
   `[data-openbitfun-context-kind="${kind}"]`,
 );
 
+/** Row click accepts a directory; this trailing region is what opens it. */
+const optionEnterAffordance = (row: Element | null | undefined) => row
+  ?.querySelector<HTMLElement>('[data-openbitfun-part="indicator"]');
+
 describe('ChatContextPicker overlay', () => {
   it('separates unavailable skill capabilities from scan errors in the picker', async () => {
     const unsupported = {
@@ -355,7 +359,7 @@ describe('ChatContextPicker overlay', () => {
     ]);
 
     await act(async () => {
-      item?.click();
+      optionEnterAffordance(item)?.click();
       await Promise.resolve();
     });
 
@@ -369,6 +373,121 @@ describe('ChatContextPicker overlay', () => {
     expect(nestedItem?.querySelector('[data-openbitfun-part="metadata"]')).toBeNull();
   });
 
+  it('selects a directory on Enter and keeps directory browsing on the arrow keys', async () => {
+    const onSelectContext = vi.fn();
+    const onClose = vi.fn();
+    vi.mocked(workspaceAPI.explorerGetChildren).mockResolvedValueOnce([
+      {
+        path: '/workspace/src',
+        name: 'src',
+        isDirectory: true,
+      },
+    ]);
+
+    await act(async () => {
+      root.render(<Harness onSelectContext={onSelectContext} onClose={onClose} />);
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Enter',
+        bubbles: true,
+        cancelable: true,
+      }));
+    });
+
+    expect(onSelectContext).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'directory',
+      directoryPath: '/workspace/src',
+      directoryName: 'src',
+      recursive: true,
+    }));
+    expect(onClose).toHaveBeenCalledOnce();
+    expect(workspaceAPI.explorerGetChildren).toHaveBeenCalledOnce();
+    expect(document.querySelector('[data-openbitfun-part="currentDirectoryPath"]')?.textContent)
+      .toBe('workspace');
+
+    vi.mocked(workspaceAPI.explorerGetChildren).mockResolvedValueOnce([
+      {
+        path: '/workspace/src/App.tsx',
+        name: 'App.tsx',
+        isDirectory: false,
+      },
+    ]);
+
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'ArrowRight',
+        bubbles: true,
+        cancelable: true,
+      }));
+      await Promise.resolve();
+    });
+
+    expect(workspaceAPI.explorerGetChildren).toHaveBeenLastCalledWith('workspace-id', '/workspace/src');
+    expect(document.querySelector('[data-openbitfun-part="currentDirectoryPath"]')?.textContent)
+      .toBe('workspace/src');
+    expect(document.querySelector<HTMLElement>('[data-openbitfun-part="option"]')?.textContent)
+      .toContain('App.tsx');
+    expect(onSelectContext).toHaveBeenCalledOnce();
+  });
+
+  it('selects a directory on a row click and enters it from the trailing chevron', async () => {
+    const onSelectContext = vi.fn();
+    const onClose = vi.fn();
+    vi.mocked(workspaceAPI.explorerGetChildren).mockResolvedValueOnce([
+      {
+        path: '/workspace/src',
+        name: 'src',
+        isDirectory: true,
+      },
+    ]);
+
+    await act(async () => {
+      root.render(<Harness onSelectContext={onSelectContext} onClose={onClose} />);
+      await Promise.resolve();
+    });
+
+    const row = document.querySelector<HTMLElement>('[data-openbitfun-part="option"]');
+    const enterAffordance = optionEnterAffordance(row);
+    expect(enterAffordance?.querySelector('[data-openbitfun-name="chevron-right"]')?.getAttribute('title'))
+      .toBe('contextPicker.openDirectory');
+
+    await act(async () => {
+      row?.click();
+      await Promise.resolve();
+    });
+
+    expect(onSelectContext).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'directory',
+      directoryPath: '/workspace/src',
+      directoryName: 'src',
+    }));
+    expect(onClose).toHaveBeenCalledOnce();
+    expect(workspaceAPI.explorerGetChildren).toHaveBeenCalledOnce();
+    expect(document.querySelector('[data-openbitfun-part="currentDirectoryPath"]')?.textContent)
+      .toBe('workspace');
+
+    vi.mocked(workspaceAPI.explorerGetChildren).mockResolvedValueOnce([
+      {
+        path: '/workspace/src/App.tsx',
+        name: 'App.tsx',
+        isDirectory: false,
+      },
+    ]);
+
+    await act(async () => {
+      enterAffordance?.click();
+      await Promise.resolve();
+    });
+
+    expect(workspaceAPI.explorerGetChildren).toHaveBeenLastCalledWith('workspace-id', '/workspace/src');
+    expect(document.querySelector('[data-openbitfun-part="currentDirectoryPath"]')?.textContent)
+      .toBe('workspace/src');
+    expect(onSelectContext).toHaveBeenCalledOnce();
+  });
+
   it('enters the Skill source and returns the selected Skill', async () => {
     const skill = {
       key: 'pdf-skill',
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 6d98b3e537..be4f9094c3 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -1116,6 +1116,7 @@
     "emptyDirectory": "Empty directory",
     "rootDirectory": "Root",
     "goBack": "Go back",
+    "openDirectory": "Open folder",
     "navHint": "Navigate",
     "enterHint": "Enter",
     "backHint": "Back",
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index 1b437b922a..335c390e4b 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -1116,6 +1116,7 @@
     "emptyDirectory": "空目录",
     "rootDirectory": "根目录",
     "goBack": "返回上一级",
+    "openDirectory": "进入目录",
     "navHint": "导航",
     "enterHint": "进入",
     "backHint": "返回",
diff --git a/src/web-ui/src/locales/zh-TW/flow-chat.json b/src/web-ui/src/locales/zh-TW/flow-chat.json
index d1028045fb..23f90ac627 100644
--- a/src/web-ui/src/locales/zh-TW/flow-chat.json
+++ b/src/web-ui/src/locales/zh-TW/flow-chat.json
@@ -1116,6 +1116,7 @@
     "emptyDirectory": "空目錄",
     "rootDirectory": "根目錄",
     "goBack": "返回上一級",
+    "openDirectory": "進入目錄",
     "navHint": "導航",
     "enterHint": "進入",
     "backHint": "返回",