feat(input): show paths in file mentions

src/web-ui/src/flow_chat/components/FileMentionPicker.scss

@@ -190,13 +190,19 @@
 
   &__item-name {
     flex: 1;
+    min-width: 0;
     font-size: var(--bf-appearance-token-flowchat-font-size-sm);
     font-weight: 400;
     color: var(--bf-appearance-token-color-text-primary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: var(--bf-appearance-token-flowchat-support-line-height);
+
+    &--with-path {
+      flex: 0 1 auto;
+      max-width: 50%;
+    }
   }
 
   &__item-detail {
@@ -208,6 +214,12 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  &__item-path {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: none;
+  }
 
   &__expand-icon {
     flex-shrink: 0;

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

@@ -536,8 +536,24 @@ export const FileMentionPicker: React.FC<FileMentionPickerProps> = ({
                   onMouseEnter={() => setSelectedIndex(index)}
                 >
                   {isSession ? <MessageCircle size={13} className="file-mention-picker__icon file-mention-picker__icon--session" /> : file?.isDirectory ? <Folder size={13} className="file-mention-picker__icon file-mention-picker__icon--folder" /> : <File size={13} className="file-mention-picker__icon file-mention-picker__icon--file" />}
-                  <span data-bf-component="file-mention-picker" data-bf-part="itemName" className="file-mention-picker__item-name">{session?.sessionName ?? file?.name}</span>
+                  <span
+                    data-bf-component="file-mention-picker"
+                    data-bf-part="itemName"
+                    className={`file-mention-picker__item-name${file && !file.referenceStableKey ? ' file-mention-picker__item-name--with-path' : ''}`}
+                  >
+                    {session?.sessionName ?? file?.name}
+                  </span>
                   {session && <span data-bf-component="file-mention-picker" data-bf-part="itemDetail" className="file-mention-picker__item-detail">{session.workspaceLabel}</span>}
+                  {file && !file.referenceStableKey && (
+                    <span
+                      data-bf-component="file-mention-picker"
+                      data-bf-part="itemDetail"
+                      className="file-mention-picker__item-detail file-mention-picker__item-path"
+                      title={file.relativePath}
+                    >
+                      {file.relativePath}
+                    </span>
+                  )}
                   {file?.referenceStableKey && (
                     <span data-bf-component="file-mention-picker" data-bf-part="itemDetail" className="file-mention-picker__item-detail">
                       {file.referenceDescription || file.path}

src/web-ui/src/flow_chat/components/FileMentionPickerOverlay.test.tsx

@@ -3,6 +3,7 @@
 import React, { act, useRef } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { workspaceAPI } from '@/infrastructure/api';
 import { FileMentionPicker } from './FileMentionPicker';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -53,6 +54,7 @@ describe('FileMentionPicker overlay', () => {
   let root: Root;
 
   beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
     container = document.createElement('div');
     document.body.appendChild(container);
     root = createRoot(container);
@@ -75,4 +77,27 @@ describe('FileMentionPicker overlay', () => {
     expect(picker?.parentElement?.getAttribute('data-bf-overlay-host')).toBe('true');
     expect(picker?.style.visibility).toBe('visible');
   });
+
+  it('shows the workspace-relative path after the file name', async () => {
+    vi.mocked(workspaceAPI.getDirectoryChildren).mockResolvedValueOnce([
+      {
+        path: '/workspace/src/App.tsx',
+        name: 'App.tsx',
+        isDirectory: false,
+      },
+    ]);
+
+    await act(async () => {
+      root.render(<Harness />);
+      await Promise.resolve();
+    });
+
+    const item = document.querySelector('[data-bf-part="item"]');
+    const itemName = item?.querySelector('[data-bf-part="itemName"]');
+    const itemPath = item?.querySelector('[data-bf-part="itemDetail"]');
+    expect(itemName?.textContent).toBe('App.tsx');
+    expect(itemName?.classList.contains('file-mention-picker__item-name--with-path')).toBe(true);
+    expect(itemPath?.textContent).toBe('src/App.tsx');
+    expect(itemPath?.classList.contains('file-mention-picker__item-path')).toBe(true);
+  });
 });