feat: enhance FileBrowserDialog and PathInput with search functionality

- Added Kbd and KbdGroup components for keyboard shortcuts in FileBrowserDialog.
- Implemented search functionality in PathInput, allowing users to search files and directories.
- Updated PathInput to handle file system entries and selection from search results.
- Improved UI/UX with better focus management and search input handling.

apps/ui/src/components/dialogs/file-browser-dialog.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { PathInput } from '@/components/ui/path-input';
+import { Kbd, KbdGroup } from '@/components/ui/kbd';
 import { getJSON, setJSON } from '@/lib/storage';
 import { getDefaultWorkspaceDirectory, saveLastProjectDirectory } from '@/lib/workspace-config';
 
@@ -232,7 +233,7 @@ export function FileBrowserDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-popover border-border max-w-3xl max-h-[85vh] overflow-hidden flex flex-col p-4">
+      <DialogContent className="bg-popover border-border max-w-3xl max-h-[85vh] overflow-hidden flex flex-col p-4 focus:outline-none focus-visible:outline-none">
         <DialogHeader className="pb-1">
           <DialogTitle className="flex items-center gap-2 text-base">
             <FolderOpen className="w-4 h-4 text-brand-500" />
@@ -252,6 +253,12 @@ export function FileBrowserDialog({
             error={!!error}
             onNavigate={handleNavigate}
             onHome={handleGoHome}
+            entries={directories.map((dir) => ({ ...dir, isDirectory: true }))}
+            onSelectEntry={(entry) => {
+              if (entry.isDirectory) {
+                handleSelectDirectory(entry);
+              }
+            }}
           />
 
           {/* Recent folders */}
@@ -366,12 +373,14 @@ export function FileBrowserDialog({
           >
             <FolderOpen className="w-3.5 h-3.5 mr-1.5" />
             Select Current Folder
-            <kbd className="ml-2 px-1.5 py-0.5 text-[10px] bg-background/50 rounded border border-border">
+            <KbdGroup className="ml-1">
+              <Kbd>
                 {typeof navigator !== 'undefined' && navigator.platform?.includes('Mac')
                   ? '⌘'
                   : 'Ctrl'}
-              +↵
+              </Kbd>
-            </kbd>
+              <Kbd>↵</Kbd>
+            </KbdGroup>
           </Button>
         </DialogFooter>
       </DialogContent>

apps/ui/src/components/ui/path-input.tsx

@@ -1,6 +1,6 @@
 import { useEffect, Fragment, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import { useState, useRef, useCallback, useMemo } from 'react';
-import { Home, ArrowLeft, Pencil, ArrowRight } from 'lucide-react';
+import { Home, ArrowLeft, Pencil, ArrowRight, Search, Folder, File, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -11,6 +11,14 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from '@/components/ui/command';
 import { cn } from '@/lib/utils';
 
 interface BreadcrumbSegment {
@@ -52,6 +60,12 @@ function parseBreadcrumbs(path: string): BreadcrumbSegment[] {
   });
 }
 
+interface FileSystemEntry {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+}
+
 interface PathInputProps {
   /** Current resolved path */
   currentPath: string;
@@ -63,12 +77,18 @@ interface PathInputProps {
   error?: boolean;
   /** Placeholder text for the input field */
   placeholder?: string;
+  /** Placeholder text for the search input field */
+  searchPlaceholder?: string;
   /** Called when user navigates to a path (via breadcrumb click, enter key, or navigation buttons) */
   onNavigate: (path: string) => void;
   /** Called when user clicks home button (navigates to home directory) */
   onHome: () => void;
   /** Additional className for the container */
   className?: string;
+  /** List of files and directories in current path for search functionality */
+  entries?: FileSystemEntry[];
+  /** Called when user selects an entry from search results */
+  onSelectEntry?: (entry: FileSystemEntry) => void;
 }
 
 function PathInput({
@@ -77,11 +97,15 @@ function PathInput({
   loading = false,
   error,
   placeholder = 'Paste or type a full path (e.g., /home/user/projects/myapp)',
+  searchPlaceholder = 'Search...',
   onNavigate,
   onHome,
   className,
+  entries = [],
+  onSelectEntry,
 }: PathInputProps) {
   const [isEditing, setIsEditing] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [pathInput, setPathInput] = useState(currentPath);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -103,6 +127,21 @@ function PathInput({
     }
   }, [error, isEditing]);
 
+  // Focus search input when search opens
+  useEffect(() => {
+    if (isSearchOpen) {
+      // Small delay to ensure the CommandInput is rendered
+      setTimeout(() => {
+        const searchInput = containerRef.current?.querySelector(
+          '[data-slot="command-input"]'
+        ) as HTMLInputElement;
+        if (searchInput) {
+          searchInput.focus();
+        }
+      }, 0);
+    }
+  }, [isSearchOpen]);
+
   const handleGoToParent = useCallback(() => {
     if (parentPath) {
       onNavigate(parentPath);
@@ -163,6 +202,7 @@ function PathInput({
       // Don't trigger if clicking on a button or already editing
       if (
         isEditing ||
+        isSearchOpen ||
         (e.target as HTMLElement).closest('button') ||
         (e.target as HTMLElement).closest('a')
       ) {
@@ -170,9 +210,59 @@ function PathInput({
       }
       setIsEditing(true);
     },
-    [isEditing]
+    [isEditing, isSearchOpen]
   );
 
+  const handleSelectEntry = useCallback(
+    (entry: FileSystemEntry) => {
+      if (onSelectEntry) {
+        onSelectEntry(entry);
+      }
+      setIsSearchOpen(false);
+    },
+    [onSelectEntry]
+  );
+
+  // Global keyboard shortcut to activate search (/)
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+      // Activate search with '/' key (unless in an input field)
+      if (
+        e.key === '/' &&
+        !isEditing &&
+        !isSearchOpen &&
+        !(e.target as HTMLElement).matches('input, textarea')
+      ) {
+        e.preventDefault();
+        setIsSearchOpen(true);
+      }
+      // Close search with Escape key
+      if (e.key === 'Escape' && isSearchOpen) {
+        e.preventDefault();
+        e.stopPropagation(); // Prevent parent modal from closing
+        setIsSearchOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleGlobalKeyDown, true); // Use capture phase
+    return () => window.removeEventListener('keydown', handleGlobalKeyDown, true);
+  }, [isEditing, isSearchOpen]);
+
+  // Close search when clicking outside
+  useEffect(() => {
+    if (!isSearchOpen) return;
+
+    const handleClickOutside = (e: globalThis.MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (containerRef.current && !containerRef.current.contains(target)) {
+        setIsSearchOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isSearchOpen]);
+
   const breadcrumbs = useMemo(() => parseBreadcrumbs(currentPath), [currentPath]);
 
   const showBreadcrumbs = currentPath && !isEditing && !loading && !error;
@@ -210,10 +300,59 @@ function PathInput({
       </div>
 
       {/* Path display / input */}
+      <div className="flex-1 relative min-w-0">
+        {/* Search Popover - positioned to overlap the input */}
+        {isSearchOpen && (
+          <div className="absolute inset-0 z-50">
+            <div className="relative w-full h-full">
+              <div className="absolute inset-0 bg-popover border border-border rounded-md shadow-lg">
+                <Command className="h-auto max-h-[300px]">
+                  <div className="flex items-center gap-2 px-3 **:data-[slot=command-input-wrapper]:border-0 **:data-[slot=command-input-wrapper]:px-0">
+                    <CommandInput placeholder={searchPlaceholder} className="h-8 flex-1" />
+                    <div className="flex items-center gap-1 shrink-0 ml-auto">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setIsSearchOpen(false)}
+                        className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                        aria-label="Close search"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </Button>
+                      <kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] bg-muted rounded border border-border text-muted-foreground">
+                        ESC
+                      </kbd>
+                    </div>
+                  </div>
+                  <CommandList>
+                    <CommandEmpty>No files or directories found</CommandEmpty>
+                    <CommandGroup>
+                      {entries.map((entry) => (
+                        <CommandItem
+                          key={entry.path}
+                          value={entry.name}
+                          onSelect={() => handleSelectEntry(entry)}
+                        >
+                          {entry.isDirectory ? (
+                            <Folder className="w-3.5 h-3.5 text-brand-500 mr-2" />
+                          ) : (
+                            <File className="w-3.5 h-3.5 text-muted-foreground mr-2" />
+                          )}
+                          <span className="flex-1 truncate font-mono text-xs">{entry.name}</span>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </div>
+            </div>
+          </div>
+        )}
+
         <div
           onClick={handleContainerClick}
           className={cn(
-          'flex-1 flex items-center gap-2 min-w-0 h-8 px-3 rounded-md border bg-background/50 transition-colors',
+            'flex items-center gap-2 min-w-0 h-8 px-3 rounded-md border bg-background/50 transition-colors',
             error
               ? 'border-destructive focus-within:border-destructive'
               : 'border-input focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
@@ -244,20 +383,35 @@ function PathInput({
                           </BreadcrumbLink>
                         )}
                       </BreadcrumbItem>
-                    {!crumb.isLast && <BreadcrumbSeparator className="[&>svg]:size-3.5 shrink-0" />}
+                      {!crumb.isLast && (
+                        <BreadcrumbSeparator className="[&>svg]:size-3.5 shrink-0" />
+                      )}
                     </Fragment>
                   ))}
                 </BreadcrumbList>
               </Breadcrumb>
+              <div className="flex items-center gap-0.5 shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setIsSearchOpen(true)}
+                  className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                  aria-label="Search files and directories"
+                  title="Search files and directories"
+                  disabled={loading || entries.length === 0}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
                 <Button
                   variant="ghost"
                   size="icon"
                   onClick={handleStartEditing}
-              className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
+                  className="h-6 w-6 text-muted-foreground hover:text-foreground"
                   aria-label="Edit path"
                 >
                   <Pencil className="w-3.5 h-3.5" />
                 </Button>
+              </div>
             </>
           ) : (
             <>
@@ -289,8 +443,9 @@ function PathInput({
           )}
         </div>
       </div>
+    </div>
   );
 }
 
 export { PathInput, parseBreadcrumbs };
-export type { PathInputProps, BreadcrumbSegment };
+export type { PathInputProps, BreadcrumbSegment, FileSystemEntry };