feat(agent-file-preview): show previews in files overlay

src/renderer/components/FileTree/FileTree.tsx

@@ -49,6 +49,8 @@ export function FileTree(props: FileTreeProps) {
     searchKeyword = '',
     onSearchKeywordChange,
     searchPlaceholder,
+    searchToolbar,
+    searchClearLabel,
     emptyState
   } = props
 
@@ -114,28 +116,31 @@ export function FileTree(props: FileTreeProps) {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="relative px-2 py-2">
-        <Search
-          size={14}
-          className="-translate-y-1/2 pointer-events-none absolute top-1/2 left-4 text-muted-foreground"
-        />
-        <Input
-          type="text"
-          value={searchKeyword}
-          onChange={(e) => onSearchKeywordChange?.(e.target.value)}
-          placeholder={searchPlaceholder}
-          className="h-8 pr-7 pl-7 text-sm"
-          data-testid="file-tree-search-input"
-        />
-        {searchKeyword && (
-          <button
-            type="button"
-            aria-label="Clear search"
-            onClick={() => onSearchKeywordChange?.('')}
-            className="-translate-y-1/2 absolute top-1/2 right-3 flex size-5 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground">
-            <X size={13} />
-          </button>
-        )}
+      <div className="flex items-center gap-2 px-2 py-2">
+        <div className="relative min-w-0 flex-1">
+          <Search
+            size={14}
+            className="-translate-y-1/2 pointer-events-none absolute top-1/2 left-2 text-muted-foreground"
+          />
+          <Input
+            type="text"
+            value={searchKeyword}
+            onChange={(e) => onSearchKeywordChange?.(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="h-8 min-w-0 flex-1 pr-7 pl-7 text-sm"
+            data-testid="file-tree-search-input"
+          />
+          {searchKeyword && (
+            <button
+              type="button"
+              aria-label={searchClearLabel ?? 'Clear search'}
+              onClick={() => onSearchKeywordChange?.('')}
+              className="-translate-y-1/2 absolute top-1/2 right-1 flex size-5 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground">
+              <X size={13} />
+            </button>
+          )}
+        </div>
+        {searchToolbar}
       </div>
       <div className="min-h-0 flex-1">{tree}</div>
     </div>

src/renderer/components/FileTree/FileTreeRow.tsx

@@ -79,7 +79,6 @@ export function FileTreeRow(props: FileTreeRowProps) {
       data-node-id={node.id}
       data-kind={node.kind}
       onClick={handleRowClick}
-      onContextMenu={(e) => e.stopPropagation()}
       title={node.name}
       style={indent}
       className={cn(

src/renderer/components/FileTree/__tests__/FileTree.test.tsx

@@ -166,6 +166,27 @@ describe('FileTree - editable form (all callbacks)', () => {
 
     expect(screen.getByText('Menu for Root')).toBeInTheDocument()
   })
+
+  it('stops row context-menu events after opening the row menu', () => {
+    const onWrapperContextMenu = vi.fn()
+
+    render(
+      <div onContextMenu={onWrapperContextMenu}>
+        <FileTree
+          nodes={nodes}
+          defaultExpandedIds={new Set(['root'])}
+          getMenuItems={(n) => [{ type: 'item', id: `menu-${n.id}`, label: `Menu for ${n.name}`, onSelect: () => {} }]}
+          renderList={passthroughRenderList}
+        />
+      </div>
+    )
+
+    const rootRow = screen.getByText('Root').closest('[data-node-id="root"]')!
+    fireEvent.contextMenu(rootRow)
+
+    expect(screen.getByText('Menu for Root')).toBeInTheDocument()
+    expect(onWrapperContextMenu).not.toHaveBeenCalled()
+  })
 })
 
 describe('FileTree - icon behaviour', () => {
@@ -243,8 +264,15 @@ describe('FileTree - icon behaviour', () => {
 
 describe('FileTree - search box', () => {
   it('does not render the search input when showSearch is omitted', () => {
-    render(<FileTree nodes={nodes} renderList={passthroughRenderList} />)
+    render(
+      <FileTree
+        nodes={nodes}
+        searchToolbar={<span data-testid="search-toolbar">Tools</span>}
+        renderList={passthroughRenderList}
+      />
+    )
     expect(screen.queryByTestId('file-tree-search-input')).toBeNull()
+    expect(screen.queryByTestId('search-toolbar')).toBeNull()
   })
 
   it('renders the search input when showSearch is true', () => {
@@ -290,6 +318,30 @@ describe('FileTree - search box', () => {
     expect(onSearchKeywordChange).toHaveBeenCalledWith('a')
   })
 
+  it('renders the search toolbar and keeps the clear button usable', async () => {
+    const onSearchKeywordChange = vi.fn()
+    const user = userEvent.setup()
+    render(
+      <FileTree
+        nodes={nodes}
+        showSearch
+        searchKeyword="abc"
+        searchClearLabel="Clear files search"
+        searchToolbar={
+          <button type="button" data-testid="search-toolbar">
+            Refresh
+          </button>
+        }
+        onSearchKeywordChange={onSearchKeywordChange}
+        renderList={passthroughRenderList}
+      />
+    )
+
+    expect(screen.getByTestId('search-toolbar')).toBeInTheDocument()
+    await user.click(screen.getByLabelText('Clear files search'))
+    expect(onSearchKeywordChange).toHaveBeenCalledWith('')
+  })
+
   it('clears the keyword via the clear button', async () => {
     const onSearchKeywordChange = vi.fn()
     const user = userEvent.setup()

src/renderer/components/FileTree/types.ts

@@ -71,6 +71,10 @@ export interface FileTreeProps {
   onSearchKeywordChange?: (keyword: string) => void
   /** Placeholder for the search input. */
   searchPlaceholder?: string
+  /** Optional trailing toolbar rendered on the search row. */
+  searchToolbar?: React.ReactNode
+  /** Accessible label for the search clear button. */
+  searchClearLabel?: string
 
   emptyState?: React.ReactNode
 }