dsh-explorer 0.1.0 → 0.1.1

package/src/client/ExplorerView.tsx

@@ -4,6 +4,7 @@ import {
   fetchTree,
   fetchBatchTree,
   fetchGitStatus,
+  fetchSearchWorkspace,
   apiCreateNewFile,
   apiCreateDirectory,
   apiRename,
@@ -12,24 +13,31 @@ import {
   type FsEntry,
   type FsListing,
   type GitStatusResult,
-} from './api.ts'
-import { ExplorerHeader } from './ExplorerHeader.tsx'
-import { ExplorerSearch } from './ExplorerSearch.tsx'
-import { ExplorerRow } from './ExplorerRow.tsx'
-import { ExplorerContextMenu } from './ExplorerContextMenu.tsx'
-import { ExplorerOptionsModal } from './ExplorerOptionsModal.tsx'
+} from './utils/api.ts'
+import { ExplorerHeader } from './components/ExplorerHeader.tsx'
+import { ExplorerSearch } from './components/ExplorerSearch.tsx'
+import { ExplorerContextMenu } from './components/ExplorerContextMenu.tsx'
+import { ExplorerEmptyContextMenu } from './components/ExplorerEmptyContextMenu.tsx'
+import { ExplorerOptionsModal } from './components/ExplorerOptionsModal.tsx'
+import { ExplorerDeleteModal } from './components/ExplorerDeleteModal.tsx'
+import { TreeNode } from './components/TreeNode.tsx'
+import { useLiveSync } from './hooks/useLiveSync.ts'
+import { useKeyboardNav } from './hooks/useKeyboardNav.ts'
 import {
   loadExplorerOptions,
   saveExplorerOptions,
   DEFAULT_OPTIONS,
   type ExplorerOptions,
-} from './options.ts'
+} from './utils/options.ts'
 import {
   insertMentionToComposer,
   insertSnippetToComposer,
   setLastKnownSessionId,
   baseName,
-} from './conversation-draft.ts'
+} from './utils/conversation-draft.ts'
+import { openFileInTab, safeService } from './utils/open-tab.ts'
+
+export { openFileInTab }
 
 interface ExplorerViewProps {
   ctx: any
@@ -37,373 +45,19 @@ interface ExplorerViewProps {
   initialCwd?: string
 }
 
-function safeService<T = any>(ctx: any, name: string): T | undefined {
-  if (!ctx) return undefined
-  try {
-    if (typeof ctx.get === 'function') {
-      const val = ctx.get(name)
-      if (val !== undefined) return val
-    }
-    return ctx[name]
-  } catch {
-    return undefined
-  }
-}
-
-export function openFileInTab(ctx: any, sessionId: string, filePath: string, relPath: string): void {
-  const normPath = filePath.replace(/\\/g, '/')
-  const fileName = baseName(filePath)
-
-  // 1. Try DSH betterSidebar editor tab
-  try {
-    const betterSidebar = safeService(ctx, 'betterSidebar')
-    if (betterSidebar && typeof betterSidebar.openTab === 'function') {
-      betterSidebar.openTab({
-        type: 'editor',
-        title: fileName,
-        path: filePath,
-        id: `editor:${filePath}`,
-      })
-      return
-    }
-  } catch {}
-
-  // 2. Try native DSH sidebarRight tab opener
-  try {
-    const sidebarRight = safeService(ctx, 'sidebarRight')
-    if (sidebarRight && typeof sidebarRight.openResource === 'function') {
-      const normRel = relPath.replace(/\\/g, '/')
-      const encodePath = (p: string) =>
-        p
-          .split('/')
-          .map((seg) => encodeURIComponent(seg).replace(/%3A/gi, ':'))
-          .join('/')
-      const address = sessionId
-        ? `dsh-resource://file/session/${encodeURIComponent(sessionId)}/${encodePath(normRel)}`
-        : `dsh-resource://file/absolute/${encodePath(normPath.replace(/^\/+/, ''))}`
-      sidebarRight.openResource(address)
-      return
-    }
-  } catch {}
-
-  // 3. Try tabs / editor service if registered
-  try {
-    const tabs = safeService(ctx, 'tabs')
-    if (tabs && typeof tabs.open === 'function') {
-      tabs.open({ path: filePath, title: fileName })
-      return
-    }
-  } catch {}
-
-  // 4. Try native host openWorkspacePath if native desktop
-  try {
-    const remote = ctx?.remote?.session
-    if (remote && typeof remote.openWorkspacePath === 'function') {
-      remote.openWorkspacePath({ path: filePath })
-      return
-    }
-  } catch {}
-
-  // 5. Fallback: open file in new browser window/tab
-  try {
-    window.open(`/dsh-explorer/api/read-file?path=${encodeURIComponent(filePath)}`, '_blank')
-  } catch {}
-}
-
-interface TreeNodeProps {
-  entry: FsEntry
-  depth: number
-  parentDir: string
-  rootPath: string
-  levels: Record<string, FsListing>
-  expanded: Set<string>
-  selected: Set<string>
-  focusedPath: string | null
-  gitStatusMap: Map<string, string>
-  filterText: string
-  creating: { parentDir: string; isDir: boolean } | null
-  creatingName: string
-  createInputRef: React.RefObject<HTMLInputElement>
-  options: ExplorerOptions
-  indentStep: number
-  iconSize: number
-  reloadDirectory: (dir: string) => Promise<void>
-  onToggle: (path: string) => void
-  onSelect: (path: string, e: React.MouseEvent) => void
-  onOpenFile: (filePath: string, relPath: string) => void
-  onContextMenu: (entry: FsEntry, relPath: string, e: React.MouseEvent) => void
-  onInsertReference: (relPath: string, isDir: boolean) => void
-  onCopyRelativePath: (relPath: string) => void
-  onRenameSubmit: (path: string, newName: string) => void
-  onDelete: (entry: FsEntry) => void
-  onCreatingNameChange: (val: string) => void
-  onCreatingKeyDown: (e: React.KeyboardEvent) => void
-  onCreatingBlur: () => void
-  getRelativePath: (path: string) => string
-}
-
-const TreeNode: React.FC<TreeNodeProps> = React.memo(({
-  entry,
-  depth,
-  rootPath,
-  levels,
-  expanded,
-  selected,
-  focusedPath,
-  gitStatusMap,
-  filterText,
-  creating,
-  creatingName,
-  createInputRef,
-  options,
-  indentStep,
-  iconSize,
-  reloadDirectory,
-  onToggle,
-  onSelect,
-  onOpenFile,
-  onContextMenu,
-  onInsertReference,
-  onCopyRelativePath,
-  onRenameSubmit,
-  onDelete,
-  onCreatingNameChange,
-  onCreatingKeyDown,
-  onCreatingBlur,
-  getRelativePath,
-}) => {
-  const relPath = getRelativePath(entry.path)
-  const normPath = entry.path.replace(/\\/g, '/')
-  const listing = levels[entry.path] ?? levels[normPath]
-  const hasLoaded = listing !== undefined
-
-  // Hidden files filter
-  if (!options.showHiddenFiles && (entry.hidden || entry.name.startsWith('.'))) {
-    return null
-  }
-
-  // Filter check
-  if (filterText) {
-    const selfMatches =
-      entry.name.toLowerCase().includes(filterText.toLowerCase()) ||
-      relPath.toLowerCase().includes(filterText.toLowerCase())
-    if (!selfMatches && !entry.isDir) {
-      return null
-    }
-  }
-
-  // Dynamically resolve compact chain from loaded levels (and entry.compactChain if present)
-  const compactChain = useMemo(() => {
-    if (!options.compactFolders || !entry.isDir) return undefined
-    const chain: FsEntry[] = [entry]
-    let curr = entry
-    let currListing = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')]
-
-    while (currListing && currListing.entries) {
-      const valid = options.showHiddenFiles
-        ? currListing.entries
-        : currListing.entries.filter((c) => !c.hidden && !c.name.startsWith('.'))
-      if (valid.length === 1 && valid[0]!.isDir) {
-        const next = valid[0]!
-        chain.push(next)
-        curr = next
-        currListing = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')]
-      } else {
-        break
-      }
-    }
-
-    return chain.length > 1 ? chain : undefined
-  }, [options.compactFolders, options.showHiddenFiles, entry, levels])
-
-  const isCompacted = compactChain !== undefined && compactChain.length > 1
-  const effectiveEntry = isCompacted ? compactChain[compactChain.length - 1]! : entry
-  const targetPath = effectiveEntry.path
-  const targetRelPath = getRelativePath(targetPath)
-  const isExpanded = entry.isDir && (expanded.has(entry.path) || expanded.has(targetPath) || Boolean(filterText))
-  const isSel = selected.has(entry.path) || selected.has(targetPath)
-  const isFoc = focusedPath === entry.path || focusedPath === targetPath
-  const normRel = targetRelPath.replace(/\\/g, '/').toLowerCase()
-  const status =
-    gitStatusMap.get(normRel) ??
-    gitStatusMap.get(targetPath.replace(/\\/g, '/').toLowerCase()) ??
-    gitStatusMap.get(relPath.replace(/\\/g, '/').toLowerCase())
-
-  // Target directory listing for compact folders
-  const targetListing = levels[targetPath] ?? levels[targetPath.replace(/\\/g, '/')]
-  const hasTargetLoaded = targetListing !== undefined
-
-  // Pre-load innermost folder if compact and expanded, or single-child probe
-  useEffect(() => {
-    if (isExpanded && targetPath !== entry.path && !hasTargetLoaded) {
-      reloadDirectory(targetPath)
-    }
-  }, [isExpanded, targetPath, entry.path, hasTargetLoaded, reloadDirectory])
-
-  // Pre-load single-child directories when compactFolders is enabled
-  useEffect(() => {
-    if (options.compactFolders && entry.isDir && entry.compact && !hasLoaded) {
-      reloadDirectory(entry.path)
-    }
-  }, [options.compactFolders, entry.isDir, entry.compact, hasLoaded, entry.path, reloadDirectory])
-
-  const handleToggle = () => {
-    if (isCompacted && targetPath !== entry.path) {
-      const isCurrentlyExpanded = expanded.has(entry.path) || expanded.has(targetPath)
-      if (isCurrentlyExpanded) {
-        if (expanded.has(entry.path)) onToggle(entry.path)
-        if (expanded.has(targetPath)) onToggle(targetPath)
-      } else {
-        onToggle(entry.path)
-        onToggle(targetPath)
-      }
-    } else {
-      onToggle(entry.path)
-    }
-  }
-
-  if (!entry.isDir) {
-    return (
-      <ExplorerRow
-        entry={entry}
-        depth={depth}
-        isExpanded={false}
-        isSelected={isSel}
-        isFocused={isFoc}
-        gitStatus={status}
-        relativePath={relPath}
-        indentStep={indentStep}
-        iconSize={iconSize}
-        enableMotion={options.enableMotion}
-        showGitBadges={options.showGitBadges}
-        compactFolders={options.compactFolders}
-        singleClickAction={options.singleClickAction}
-        onToggle={() => {}}
-        onSelect={(e) => onSelect(entry.path, e)}
-        onDoubleClick={() => onOpenFile(entry.path, relPath)}
-        onContextMenu={(e) => onContextMenu(entry, relPath, e)}
-        onInsertReference={() => onInsertReference(relPath, false)}
-        onCopyRelativePath={() => onCopyRelativePath(relPath)}
-        onRenameSubmit={(newName) => onRenameSubmit(entry.path, newName)}
-        onDelete={() => onDelete(entry)}
-      />
-    )
-  }
-
-  const visibleChildren = hasTargetLoaded && targetListing.entries
-    ? options.showHiddenFiles
-      ? targetListing.entries
-      : targetListing.entries.filter((c) => !c.hidden && !c.name.startsWith('.'))
-    : []
-
-  return (
-    <div className={css.folderGroup}>
-      <ExplorerRow
-        entry={entry}
-        depth={depth}
-        isExpanded={isExpanded}
-        isSelected={isSel}
-        isFocused={isFoc}
-        gitStatus={status}
-        relativePath={targetRelPath}
-        compactChain={compactChain}
-        indentStep={indentStep}
-        iconSize={iconSize}
-        enableMotion={options.enableMotion}
-        showGitBadges={options.showGitBadges}
-        compactFolders={options.compactFolders}
-        singleClickAction={options.singleClickAction}
-        onToggle={handleToggle}
-        onSelect={(e) => onSelect(targetPath, e)}
-        onContextMenu={(e) => onContextMenu(entry, targetRelPath, e)}
-        onInsertReference={() => onInsertReference(targetRelPath, true)}
-        onCopyRelativePath={() => onCopyRelativePath(targetRelPath)}
-        onRenameSubmit={(newName) => onRenameSubmit(entry.path, newName)}
-        onDelete={() => onDelete(entry)}
-      />
-
-      <div
-        className={`${css.folderChildren} ${isExpanded ? css.folderChildrenOpen : css.folderChildrenClosed}`}
-        style={!options.enableMotion ? { transition: 'none' } : undefined}
-      >
-        <div className={css.folderChildrenInner}>
-          {creating && (creating.parentDir === entry.path || creating.parentDir === targetPath) && (
-            <div className={css.row} style={{ paddingLeft: `${(depth + 1) * indentStep + 8}px` }}>
-              <span className={css.iconWrap}>{creating.isDir ? '📁' : '📄'}</span>
-              <input
-                ref={createInputRef}
-                autoFocus
-                type="text"
-                className={css.inlineInput}
-                placeholder={creating.isDir ? 'Folder name...' : 'File name...'}
-                value={creatingName}
-                onChange={(e) => onCreatingNameChange(e.target.value)}
-                onKeyDown={onCreatingKeyDown}
-                onBlur={onCreatingBlur}
-              />
-            </div>
-          )}
-          {visibleChildren.length > 0 ? (
-            visibleChildren.map((child) => (
-              <TreeNode
-                key={child.path}
-                entry={child}
-                depth={depth + 1}
-                parentDir={targetPath}
-                rootPath={rootPath}
-                levels={levels}
-                expanded={expanded}
-                selected={selected}
-                focusedPath={focusedPath}
-                gitStatusMap={gitStatusMap}
-                filterText={filterText}
-                creating={creating}
-                creatingName={creatingName}
-                createInputRef={createInputRef}
-                options={options}
-                indentStep={indentStep}
-                iconSize={iconSize}
-                reloadDirectory={reloadDirectory}
-                onToggle={onToggle}
-                onSelect={onSelect}
-                onOpenFile={onOpenFile}
-                onContextMenu={onContextMenu}
-                onInsertReference={onInsertReference}
-                onCopyRelativePath={onCopyRelativePath}
-                onRenameSubmit={onRenameSubmit}
-                onDelete={onDelete}
-                onCreatingNameChange={onCreatingNameChange}
-                onCreatingKeyDown={onCreatingKeyDown}
-                onCreatingBlur={onCreatingBlur}
-                getRelativePath={getRelativePath}
-              />
-            ))
-          ) : hasTargetLoaded && targetListing.entries && targetListing.entries.length === 0 ? (
-            <div
-              className={css.row}
-              style={{
-                paddingLeft: `${(depth + 1) * indentStep + 8}px`,
-                opacity: 0.45,
-                fontStyle: 'italic',
-                fontSize: '12px',
-              }}
-            >
-              Empty folder
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  )
-})
-
 export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, initialCwd }) => {
   const [rootPath, setRootPath] = useState<string>(initialCwd ?? '')
   const [levels, setLevels] = useState<Record<string, FsListing>>({})
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set())
   const [selected, setSelected] = useState<Set<string>>(() => new Set())
   const [focusedPath, setFocusedPath] = useState<string | null>(null)
+  const [searchInput, setSearchInput] = useState('')
   const [filterText, setFilterText] = useState('')
+  const [searchLoading, setSearchLoading] = useState(false)
+  const [matchCount, setMatchCount] = useState<number | null>(null)
+  const [matchingPaths, setMatchingPaths] = useState<Set<string> | null>(null)
+  const [ancestorPaths, setAncestorPaths] = useState<Set<string> | null>(null)
+  const savedExpandedRef = useRef<Set<string> | null>(null)
   const [searchOpen, setSearchOpen] = useState(false)
   const [optionsOpen, setOptionsOpen] = useState(false)
   const [options, setOptions] = useState<ExplorerOptions>(() => loadExplorerOptions())
@@ -412,12 +66,18 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
   const [gitData, setGitData] = useState<GitStatusResult>({ isRepo: false, entries: [] })
   const [creating, setCreating] = useState<{ parentDir: string; isDir: boolean } | null>(null)
   const [creatingName, setCreatingName] = useState('')
+  const [renamingPath, setRenamingPath] = useState<string | null>(null)
+  const [deletingTarget, setDeletingTarget] = useState<{
+    entry: FsEntry
+    relativePath: string
+  } | null>(null)
   const [contextMenu, setContextMenu] = useState<{
     x: number
     y: number
     entry: FsEntry
     relativePath: string
   } | null>(null)
+  const [emptyContextMenu, setEmptyContextMenu] = useState<{ x: number; y: number } | null>(null)
 
   const treeBodyRef = useRef<HTMLDivElement>(null)
   const createInputRef = useRef<HTMLInputElement>(null)
@@ -435,7 +95,6 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
     saveExplorerOptions({ ...DEFAULT_OPTIONS })
   }, [])
 
-  // Calculate dynamic scale metrics
   const baseRowHeight = options.density === 'compact' ? 20 : options.density === 'relaxed' ? 28 : 24
   const baseFontSize = options.density === 'compact' ? 11.5 : options.density === 'relaxed' ? 14 : 13
   const baseIconSize = options.density === 'compact' ? 14 : options.density === 'relaxed' ? 18 : 16
@@ -452,148 +111,99 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
         '--dsh-row-height': `${rowHeight}px`,
         '--dsh-font-size': `${fontSize}px`,
         '--dsh-icon-size': `${iconSize}px`,
-        '--dsh-scale': `${options.scale}`,
-      } as React.CSSProperties),
-    [rowHeight, fontSize, iconSize, options.scale]
+        '--dsh-indent-step': `${indentStep}px`,
+      }) as React.CSSProperties,
+    [rowHeight, fontSize, iconSize, indentStep]
   )
 
   useEffect(() => {
-    if (sessionId) {
-      setLastKnownSessionId(sessionId)
-    }
+    if (sessionId) setLastKnownSessionId(sessionId)
   }, [sessionId])
 
-  // Resolve active session root if not provided
   useEffect(() => {
-    if (rootPath) return
-    const sessions = safeService(ctx, 'sessions')
-    const snapshot = sessions?.list?.getSnapshot?.()
-    const activeId = sessionId ?? sessions?.active?.id ?? sessions?.current?.id ?? snapshot?.ids?.[0]
-
-    if (activeId && snapshot?.byId?.[activeId]?.cwd) {
-      setRootPath(snapshot.byId[activeId].cwd)
+    if (initialCwd && !rootPath) {
+      setRootPath(initialCwd)
       return
     }
-
-    if (snapshot?.byId) {
-      const first = Object.values(snapshot.byId).find((s: any) => s?.cwd) as any
-      if (first?.cwd) {
-        setRootPath(first.cwd)
-        return
+    if (!rootPath) {
+      let isMounted = true
+      fetchTree(sessionId)
+        .then((listing) => {
+          if (!isMounted) return
+          if (listing && listing.path) {
+            setRootPath(listing.path)
+            setLevels({ [listing.path]: listing })
+          }
+        })
+        .catch((err) => {
+          if (!isMounted) return
+          setErrorMessage(err?.message || 'Failed to connect to file service')
+        })
+      return () => {
+        isMounted = false
       }
     }
-
-    const workspaces = safeService(ctx, 'workspaces')
-    const ws = workspaces?.list?.getSnapshot?.()
-    const item = ws?.items?.find((w: any) => w.sessionIds?.includes(activeId)) ?? ws?.items?.[0]
-    if (item?.path) {
-      setRootPath(item.path)
-      return
-    }
-
-    setLoading(true)
-    fetchTree(activeId)
-      .then((listing) => {
-        const normPath = listing.path.replace(/\\/g, '/')
-        setRootPath(listing.path)
-        setLevels((prev) => ({
-          ...prev,
-          [listing.path]: listing,
-          [normPath]: listing,
-        }))
-        setExpanded((prev) => new Set(prev).add(listing.path))
-      })
-      .catch((err) => {
-        console.warn('[dsh-explorer] root fetchTree error:', err)
-        setErrorMessage(err?.message || 'Failed to connect to file service')
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [rootPath, sessionId, ctx])
+  }, [sessionId, initialCwd, rootPath])
 
   const reloadDirectory = useCallback(
-    async (dir: string) => {
-      setLoading(true)
-      setErrorMessage(null)
-      const normDir = dir.replace(/\\/g, '/')
+    async (dir: string): Promise<void> => {
       try {
-        const sessions = safeService(ctx, 'sessions')
-        const snapshot = sessions?.list?.getSnapshot?.()
-        const activeId = sessionId ?? sessions?.active?.id ?? snapshot?.ids?.[0]
-        const listing = await fetchTree(activeId, dir)
-
-        if (listing) {
-          const normListingPath = listing.path.replace(/\\/g, '/')
-          setLevels((prev) => ({
+        setErrorMessage(null)
+        const listing = await fetchTree(sessionId, dir)
+        setLevels((prev) => {
+          const norm = dir.replace(/\\/g, '/')
+          const back = dir.replace(/\//g, '\\')
+          return {
             ...prev,
             [dir]: listing,
-            [normDir]: listing,
-            [listing.path]: listing,
-            [normListingPath]: listing,
-          }))
-        }
+            [norm]: listing,
+            [back]: listing,
+          }
+        })
       } catch (err: any) {
-        console.warn('[dsh-explorer] failed to load dir:', dir, err)
         setErrorMessage(err?.message || 'Failed to load directory')
-      } finally {
-        setLoading(false)
       }
     },
-    [sessionId, ctx]
+    [sessionId]
   )
 
   const reloadGit = useCallback(
-    async (dir: string) => {
+    async (dir?: string) => {
+      const target = dir || rootPath
+      if (!target && !sessionId) return
       try {
-        const sessions = safeService(ctx, 'sessions')
-        const activeId = sessionId ?? sessions?.active?.id
-        const git = await fetchGitStatus(activeId, dir)
-        setGitData(git)
+        const res = await fetchGitStatus(target, sessionId)
+        setGitData(res)
       } catch {
-        // Ignore
+        setGitData({ isRepo: false, entries: [] })
       }
     },
-    [sessionId, ctx]
+    [rootPath, sessionId]
   )
 
-  const expandedRef = useRef(expanded)
-  useEffect(() => {
-    expandedRef.current = expanded
-  }, [expanded])
-
   const refreshAll = useCallback(async () => {
     if (!rootPath) return
-    const currentExpanded = Array.from(expandedRef.current)
-    const dirsToRefresh = Array.from(new Set([rootPath, ...currentExpanded]))
+    reloadGit(rootPath)
     try {
-      const [batch, rootListing] = await Promise.all([
-        fetchBatchTree(dirsToRefresh).catch(() => ({} as Record<string, FsListing>)),
-        fetchTree(sessionId, rootPath).catch(() => null),
-      ])
-      const mergedBatch: Record<string, FsListing> = { ...batch }
-      if (rootListing) {
-        mergedBatch[rootPath] = rootListing
-        if (rootListing.path) mergedBatch[rootListing.path] = rootListing
+      const currentExpanded = Array.from(expanded)
+      const dirsToFetch = Array.from(new Set([rootPath, ...currentExpanded]))
+      const batchResult = await fetchBatchTree(dirsToFetch)
+
+      const mergedBatch: Record<string, FsListing> = {}
+      for (const [k, v] of Object.entries(batchResult)) {
+        mergedBatch[k] = v
+        mergedBatch[k.replace(/\\/g, '/')] = v
       }
 
+      const normRoot = rootPath.replace(/\\/g, '/').toLowerCase()
+
       setLevels((prev) => {
-        const next = { ...prev }
-        for (const [dirKey, listing] of Object.entries(mergedBatch)) {
-          if (!listing) continue
-          const norm = dirKey.replace(/\\/g, '/')
-          next[dirKey] = listing
-          next[norm] = listing
-          if (listing.path) {
-            next[listing.path] = listing
-            next[listing.path.replace(/\\/g, '/')] = listing
-          }
-        }
-        for (const path of dirsToRefresh) {
-          const norm = path.replace(/\\/g, '/')
-          if (!mergedBatch[path] && !mergedBatch[norm] && path !== rootPath) {
-            delete next[path]
-            delete next[norm]
+        const next: Record<string, FsListing> = { ...prev, ...mergedBatch }
+        for (const key of Object.keys(prev)) {
+          const normKey = key.replace(/\\/g, '/').toLowerCase()
+          if (normKey === normRoot) continue
+          if (!mergedBatch[key] && !mergedBatch[key.replace(/\\/g, '/')] && !mergedBatch[key.replace(/\//g, '\\')]) {
+            delete next[key]
           }
         }
         return next
@@ -603,103 +213,30 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
         let changed = false
         const next = new Set(prev)
         for (const expPath of prev) {
-          if (expPath === rootPath) continue
-          const normExp = expPath.replace(/\\/g, '/')
-          if (!mergedBatch[expPath] && !mergedBatch[normExp]) {
+          const normExp = expPath.replace(/\\/g, '/').toLowerCase()
+          if (normExp === normRoot) continue
+          if (!mergedBatch[expPath] && !mergedBatch[expPath.replace(/\\/g, '/')] && !mergedBatch[expPath.replace(/\//g, '\\')]) {
             next.delete(expPath)
             changed = true
           }
         }
         return changed ? next : prev
       })
-
-      reloadGit(rootPath)
     } catch (err) {
       console.warn('[dsh-explorer] refreshAll failed:', err)
     }
-  }, [rootPath, sessionId, reloadGit])
+  }, [rootPath, expanded, reloadGit])
 
   useEffect(() => {
     if (!rootPath) return
     refreshAll()
     setExpanded((prev) => new Set(prev).add(rootPath))
-  }, [rootPath, refreshAll])
-
-  // Live real-time synchronizer (SSE stream + WebSocket + Window focus + Heartbeat)
-  useEffect(() => {
-    if (!rootPath) return
-
-    let debounceTimer: ReturnType<typeof setTimeout> | null = null
-    const scheduleRefresh = () => {
-      if (debounceTimer) clearTimeout(debounceTimer)
-      debounceTimer = setTimeout(() => {
-        refreshAll()
-      }, 100)
-    }
+  }, [rootPath])
 
-    // 1. Primary: Server-Sent Events (SSE) native stream
-    let es: EventSource | null = null
-    try {
-      const sseUrl = `/dsh-explorer/api/events?dir=${encodeURIComponent(rootPath)}`
-      es = new EventSource(sseUrl)
-      es.onmessage = (e) => {
-        try {
-          const data = JSON.parse(e.data)
-          if (data.type === 'connected') return
-        } catch {}
-        scheduleRefresh()
-      }
-    } catch (err) {
-      console.warn('[dsh-explorer] SSE init error:', err)
-    }
-
-    // 2. Secondary: WebSocket fallback / complement
-    let ws: WebSocket | null = null
-    try {
-      const loc = window.location
-      const host = loc.host || (loc.port ? `127.0.0.1:${loc.port}` : '127.0.0.1')
-      const wsProtocol = loc.protocol === 'https:' ? 'wss:' : 'ws:'
-      const wsUrl = `${wsProtocol}//${host}/dsh-explorer/api/watch?dir=${encodeURIComponent(rootPath)}`
-      ws = new WebSocket(wsUrl)
-      ws.onmessage = () => {
-        scheduleRefresh()
-      }
-    } catch {
-      // Ignore ws errors
-    }
-
-    // 3. Window focus and visibility listeners (immediate sync on returning to DSH)
-    const onFocus = () => {
-      scheduleRefresh()
-    }
-    const onVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        scheduleRefresh()
-      }
-    }
-    window.addEventListener('focus', onFocus)
-    document.addEventListener('visibilitychange', onVisibilityChange)
-
-    // 4. Fallback periodic sync (every 3 seconds when document is visible)
-    const interval = setInterval(() => {
-      if (document.visibilityState === 'visible') {
-        scheduleRefresh()
-      }
-    }, 3000)
-
-    return () => {
-      if (debounceTimer) clearTimeout(debounceTimer)
-      clearInterval(interval)
-      window.removeEventListener('focus', onFocus)
-      document.removeEventListener('visibilitychange', onVisibilityChange)
-      if (es) {
-        try { es.close() } catch {}
-      }
-      if (ws) {
-        try { ws.close() } catch {}
-      }
-    }
-  }, [rootPath, refreshAll])
+  useLiveSync({
+    rootPath,
+    onRefresh: refreshAll,
+  })
 
   const toggleExpand = useCallback(
     async (path: string) => {
@@ -733,13 +270,226 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
     [rootPath]
   )
 
+  const levelsRef = useRef(levels)
+  useEffect(() => {
+    levelsRef.current = levels
+  }, [levels])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setFilterText(searchInput)
+    }, 200)
+    return () => clearTimeout(timer)
+  }, [searchInput])
+
+  useEffect(() => {
+    const query = filterText.trim()
+    if (!query || !rootPath) {
+      setMatchingPaths(null)
+      setAncestorPaths(null)
+      setMatchCount(null)
+      setSearchLoading(false)
+      if (savedExpandedRef.current) {
+        setExpanded(savedExpandedRef.current)
+        savedExpandedRef.current = null
+      }
+      return
+    }
+
+    if (!savedExpandedRef.current) {
+      savedExpandedRef.current = new Set(expanded)
+    }
+
+    let isCancelled = false
+    const abortCtrl = new AbortController()
+
+    setSearchLoading(true)
+
+    const runSearch = async () => {
+      try {
+        const backendResult = await fetchSearchWorkspace(rootPath, query, sessionId, abortCtrl.signal)
+        if (isCancelled) return
+
+        const currentLevels = levelsRef.current
+        const matchSet = new Set<string>()
+        const ancSet = new Set<string>()
+        const missingDirs = new Set<string>()
+
+        const normRoot = rootPath.replace(/\\/g, '/').replace(/\/+$/, '')
+        const nativeRoot = rootPath.replace(/\//g, '\\').replace(/\\+$/, '')
+
+        for (const m of backendResult.matches) {
+          const normP = m.path.replace(/\\/g, '/').toLowerCase()
+          const nativeP = m.path.replace(/\//g, '\\').toLowerCase()
+          const normRel = m.relativePath.replace(/\\/g, '/').replace(/^\.\//, '').replace(/^\/+/, '').toLowerCase()
+          const nativeRel = m.relativePath.replace(/\//g, '\\').toLowerCase()
+
+          matchSet.add(normP)
+          matchSet.add(nativeP)
+          matchSet.add(normRel)
+          matchSet.add(nativeRel)
+          matchSet.add(m.path)
+          matchSet.add(m.path.toLowerCase())
+          matchSet.add(m.relativePath)
+          matchSet.add(m.relativePath.toLowerCase())
+
+          if (m.isDir) {
+            const dirNorm = m.path.replace(/\\/g, '/')
+            const dirNative = m.path.replace(/\//g, '\\')
+            if (!currentLevels[m.path] && !currentLevels[dirNorm] && !currentLevels[dirNative]) {
+              missingDirs.add(dirNative)
+            }
+          }
+
+          const segments = normRel.split('/')
+          const depth = segments.length - 1
+          let currentRel = ''
+          for (let i = 0; i < depth; i++) {
+            currentRel = currentRel ? `${currentRel}/${segments[i]}` : segments[i]!
+            ancSet.add(currentRel.toLowerCase())
+
+            const fullDirNorm = `${normRoot}/${currentRel}`
+            const fullDirNative = `${nativeRoot}\\${currentRel.replace(/\//g, '\\')}`
+
+            ancSet.add(fullDirNorm.toLowerCase())
+            ancSet.add(fullDirNative.toLowerCase())
+            ancSet.add(fullDirNorm)
+            ancSet.add(fullDirNative)
+
+            if (!currentLevels[fullDirNorm] && !currentLevels[fullDirNative] && !currentLevels[fullDirNorm.toLowerCase()] && !currentLevels[fullDirNative.toLowerCase()]) {
+              missingDirs.add(fullDirNative)
+            }
+          }
+        }
+
+        for (const [, listing] of Object.entries(currentLevels)) {
+          if (!listing?.entries) continue
+          for (const ent of listing.entries) {
+            const entRel = getRelativePath(ent.path)
+            const normP = ent.path.replace(/\\/g, '/').toLowerCase()
+            const nativeP = ent.path.replace(/\//g, '\\').toLowerCase()
+            const normRel = entRel.replace(/\\/g, '/').replace(/^\.\//, '').replace(/^\/+/, '').toLowerCase()
+            const nativeRel = entRel.replace(/\//g, '\\').toLowerCase()
+            if (ent.name.toLowerCase().includes(query.toLowerCase()) || normRel.includes(query.toLowerCase())) {
+              matchSet.add(normP)
+              matchSet.add(nativeP)
+              matchSet.add(normRel)
+              matchSet.add(nativeRel)
+              matchSet.add(ent.path)
+              matchSet.add(ent.path.toLowerCase())
+              matchSet.add(entRel)
+              matchSet.add(entRel.toLowerCase())
+
+              const segs = normRel.split('/')
+              const d = segs.length - 1
+              let cur = ''
+              for (let i = 0; i < d; i++) {
+                cur = cur ? `${cur}/${segs[i]}` : segs[i]!
+                ancSet.add(cur.toLowerCase())
+                const fullCurNorm = `${normRoot}/${cur}`
+                const fullCurNative = `${nativeRoot}\\${cur.replace(/\//g, '\\')}`
+                ancSet.add(fullCurNorm.toLowerCase())
+                ancSet.add(fullCurNative.toLowerCase())
+                ancSet.add(fullCurNorm)
+                ancSet.add(fullCurNative)
+                if (!currentLevels[fullCurNorm] && !currentLevels[fullCurNative]) {
+                  missingDirs.add(fullCurNative)
+                }
+              }
+            }
+          }
+        }
+
+        if (missingDirs.size > 0 && !isCancelled) {
+          const dirsList = Array.from(new Set(Array.from(missingDirs).map((d) => d.replace(/\//g, '\\'))))
+          let fetchedMap: Record<string, FsListing> = {}
+
+          try {
+            const batch = await fetchBatchTree(dirsList.slice(0, 100))
+            if (batch && typeof batch === 'object') {
+              fetchedMap = batch
+            }
+          } catch {
+            fetchedMap = {}
+          }
+
+          const unreturned = dirsList.filter((d) => !fetchedMap[d] && !fetchedMap[d.replace(/\\/g, '/')] && !fetchedMap[d.replace(/\//g, '\\')])
+          if (unreturned.length > 0 && !isCancelled) {
+            const fallbacks = await Promise.all(
+              unreturned.slice(0, 60).map(async (dir) => {
+                try {
+                  const listing = await fetchTree(sessionId, dir)
+                  return { dir, listing }
+                } catch {
+                  return null
+                }
+              })
+            )
+            for (const r of fallbacks) {
+              if (r && r.listing) {
+                fetchedMap[r.dir] = r.listing
+              }
+            }
+          }
+
+          if (!isCancelled && Object.keys(fetchedMap).length > 0) {
+            setLevels((prev) => {
+              const next = { ...prev }
+              for (const [k, v] of Object.entries(fetchedMap)) {
+                if (!v) continue
+                const norm = k.replace(/\\/g, '/')
+                const back = k.replace(/\//g, '\\')
+                next[k] = v
+                next[norm] = v
+                next[back] = v
+                next[norm.toLowerCase()] = v
+                next[back.toLowerCase()] = v
+              }
+              return next
+            })
+          }
+        }
+
+        if (!isCancelled) {
+          setMatchingPaths(matchSet)
+          setAncestorPaths(ancSet)
+          setMatchCount(backendResult.matches.length)
+          setSearchLoading(false)
+
+          setExpanded((prev) => {
+            const next = new Set(prev)
+            for (const anc of ancSet) {
+              next.add(anc)
+            }
+            return next
+          })
+        }
+      } catch (err: any) {
+        if (!isCancelled && err?.name !== 'AbortError') {
+          setSearchLoading(false)
+        }
+      }
+    }
+
+    runSearch()
+
+    return () => {
+      isCancelled = true
+      abortCtrl.abort()
+    }
+  }, [filterText, rootPath, sessionId, getRelativePath])
+
   const gitStatusMap = useMemo(() => {
     const map = new Map<string, string>()
-    for (const entry of gitData.entries) {
-      const p = entry.path.replace(/\\/g, '/').toLowerCase()
+    const normRoot = rootPath ? rootPath.replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase() : ''
+    for (const entry of gitData?.entries ?? []) {
+      if (!entry || !entry.path) continue
+      const p = entry.path.replace(/\\/g, '/').replace(/^\.\//, '').replace(/^\/+/, '').toLowerCase()
       map.set(p, entry.xy)
+      if (normRoot) {
+        map.set(`${normRoot}/${p}`, entry.xy)
+      }
 
-      // Bubble up to ancestor folders so parent directories reflect modified/untracked state
       let parent = p
       while (true) {
         const lastSlash = parent.lastIndexOf('/')
@@ -749,51 +499,78 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
         const existing = map.get(parent)
         if (!existing) {
           map.set(parent, entry.xy)
+          if (normRoot) map.set(`${normRoot}/${parent}`, entry.xy)
         } else if (entry.xy.includes('M') && !existing.includes('M')) {
           map.set(parent, ' M')
+          if (normRoot) map.set(`${normRoot}/${parent}`, ' M')
         }
       }
     }
     return map
-  }, [gitData])
+  }, [gitData, rootPath])
 
-  // Flattened array of currently visible rows for keyboard navigation
   const visibleFlatRows = useMemo(() => {
-    const normRoot = rootPath.replace(/\\/g, '/')
-    const rootListing = levels[rootPath] ?? levels[normRoot]
-    if (!rootPath || !rootListing) return []
+    if (!rootPath) return []
+    const normRootLower = rootPath.replace(/\\/g, '/').toLowerCase()
+    const rootListing =
+      levels[rootPath] ??
+      levels[rootPath.replace(/\\/g, '/')] ??
+      levels[rootPath.replace(/\//g, '\\')] ??
+      Object.entries(levels).find(([k]) => k.replace(/\\/g, '/').toLowerCase() === normRootLower)?.[1]
+    if (!rootListing || !Array.isArray(rootListing.entries)) return []
     const rows: { entry: FsEntry; relativePath: string }[] = []
 
+    const isSearchActive = Boolean(filterText && matchingPaths)
+
     const walk = (dir: string) => {
-      const normD = dir.replace(/\\/g, '/')
-      const listing = levels[dir] ?? levels[normD]
-      if (!listing) return
+      const normD = dir.replace(/\\/g, '/').toLowerCase()
+      const listing =
+        levels[dir] ??
+        levels[dir.replace(/\\/g, '/')] ??
+        levels[dir.replace(/\//g, '\\')] ??
+        Object.entries(levels).find(([k]) => k.replace(/\\/g, '/').toLowerCase() === normD)?.[1]
+      if (!listing || !Array.isArray(listing.entries)) return
 
       for (const entry of listing.entries) {
+        if (!entry) continue
         if (!options.showHiddenFiles && (entry.hidden || entry.name.startsWith('.'))) {
           continue
         }
         const rel = getRelativePath(entry.path)
-        if (filterText) {
-          const match =
-            entry.name.toLowerCase().includes(filterText.toLowerCase()) ||
-            rel.toLowerCase().includes(filterText.toLowerCase())
-          if (!match && !entry.isDir) continue
+        const normRel = rel.replace(/\\/g, '/').replace(/^\.\//, '').replace(/^\/+/, '').toLowerCase()
+        const normEntry = entry.path.replace(/\\/g, '/').toLowerCase()
+
+        if (isSearchActive && matchingPaths && ancestorPaths) {
+          const isDirect =
+            matchingPaths.has(normRel) ||
+            matchingPaths.has(normEntry) ||
+            matchingPaths.has(entry.path) ||
+            matchingPaths.has(entry.path.toLowerCase())
+          if (entry.isDir) {
+            const isAnc =
+              ancestorPaths.has(normRel) ||
+              ancestorPaths.has(normEntry) ||
+              ancestorPaths.has(entry.path) ||
+              ancestorPaths.has(entry.path.toLowerCase())
+            if (!isDirect && !isAnc) continue
+          } else {
+            if (!isDirect) continue
+          }
         }
 
         if (options.compactFolders && entry.isDir) {
           const chain = [entry]
           let curr = entry
-          let currL = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')]
-          while (currL && currL.entries) {
+          let currL = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')] ?? levels[curr.path.replace(/\//g, '\\')]
+          while (currL && Array.isArray(currL.entries)) {
             const valid = options.showHiddenFiles
               ? currL.entries
-              : currL.entries.filter((c) => !c.hidden && !c.name.startsWith('.'))
+              : currL.entries.filter((c) => c && !c.hidden && !c.name.startsWith('.'))
             if (valid.length === 1 && valid[0]!.isDir) {
               const next = valid[0]!
               chain.push(next)
               curr = next
-              currL = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')]
+              currL = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')] ?? levels[curr.path.replace(/\//g, '\\')]
             } else {
               break
             }
@@ -801,7 +578,8 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
           if (chain.length > 1) {
             const compactRel = getRelativePath(curr.path)
             rows.push({ entry: curr, relativePath: compactRel })
-            if (expanded.has(entry.path) || expanded.has(curr.path) || Boolean(filterText)) {
+            const isExp = isSearchActive || expanded.has(entry.path) || expanded.has(curr.path)
+            if (isExp) {
               walk(curr.path)
             }
             continue
@@ -810,7 +588,8 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
 
         rows.push({ entry, relativePath: rel })
 
-        if (entry.isDir && (expanded.has(entry.path) || Boolean(filterText))) {
+        const isFolderExpanded = isSearchActive || expanded.has(entry.path)
+        if (entry.isDir && isFolderExpanded) {
           walk(entry.path)
         }
       }
@@ -818,54 +597,60 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
 
     walk(rootPath)
     return rows
-  }, [rootPath, levels, expanded, filterText, getRelativePath, options.showHiddenFiles, options.compactFolders])
-
-  // Keyboard navigation
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (visibleFlatRows.length === 0) return
-    const currentIndex = visibleFlatRows.findIndex((r) => r.entry.path === focusedPath)
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      const nextIndex = currentIndex < visibleFlatRows.length - 1 ? currentIndex + 1 : 0
-      const nextRow = visibleFlatRows[nextIndex]
-      if (nextRow) {
-        setFocusedPath(nextRow.entry.path)
-        setSelected(new Set([nextRow.entry.path]))
-      }
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      const prevIndex = currentIndex > 0 ? currentIndex - 1 : visibleFlatRows.length - 1
-      const prevRow = visibleFlatRows[prevIndex]
-      if (prevRow) {
-        setFocusedPath(prevRow.entry.path)
-        setSelected(new Set([prevRow.entry.path]))
-      }
-    } else if (e.key === 'ArrowRight') {
-      const currentRow = visibleFlatRows[currentIndex]
-      if (currentRow?.entry.isDir && !expanded.has(currentRow.entry.path)) {
-        e.preventDefault()
-        toggleExpand(currentRow.entry.path)
-      }
-    } else if (e.key === 'ArrowLeft') {
-      const currentRow = visibleFlatRows[currentIndex]
-      if (currentRow?.entry.isDir && expanded.has(currentRow.entry.path)) {
-        e.preventDefault()
-        toggleExpand(currentRow.entry.path)
-      }
-    } else if (e.key === 'Enter') {
-      const currentRow = visibleFlatRows[currentIndex]
-      if (currentRow) {
-        e.preventDefault()
-        if (currentRow.entry.isDir) {
-          toggleExpand(currentRow.entry.path)
-        } else {
-          const activeId = sessionId ?? safeService(ctx, 'sessions')?.active?.id ?? ''
-          insertMentionToComposer(ctx, activeId, currentRow.relativePath, false)
+  }, [rootPath, levels, expanded, filterText, matchingPaths, ancestorPaths, getRelativePath, options.showHiddenFiles, options.compactFolders])
+
+  const handleExpandAll = useCallback(async () => {
+    const allDirs = new Set<string>()
+    if (rootPath) allDirs.add(rootPath)
+    for (const [dirPath, listing] of Object.entries(levels)) {
+      allDirs.add(dirPath)
+      if (listing?.entries) {
+        for (const entry of listing.entries) {
+          if (entry.isDir) {
+            allDirs.add(entry.path)
+          }
         }
       }
     }
-  }
+    setExpanded(allDirs)
+
+    const unloadedDirs = Array.from(allDirs).filter((p) => {
+      const norm = p.replace(/\\/g, '/')
+      return !levels[p] && !levels[norm]
+    })
+    if (unloadedDirs.length > 0) {
+      try {
+        const batch = await fetchBatchTree(unloadedDirs)
+        setLevels((prev) => ({ ...prev, ...batch }))
+      } catch {}
+    }
+  }, [rootPath, levels])
+
+  const handleDelete = useCallback((entry: FsEntry, relativePath?: string) => {
+    const rel = relativePath ?? getRelativePath(entry.path)
+    setDeletingTarget({ entry, relativePath: rel })
+  }, [getRelativePath])
+
+  const handleConfirmDelete = useCallback(async () => {
+    if (!deletingTarget) return
+    await apiDelete(deletingTarget.entry.path)
+    refreshAll()
+  }, [deletingTarget, refreshAll])
+
+  const handleKeyDown = useKeyboardNav({
+    visibleFlatRows,
+    focusedPath,
+    expanded,
+    setFocusedPath,
+    setSelected,
+    toggleExpand,
+    onMention: (rel) => {
+      const activeId = sessionId ?? safeService(ctx, 'sessions')?.active?.id ?? ''
+      insertMentionToComposer(ctx, activeId, rel, false)
+    },
+    onStartRename: (path) => setRenamingPath(path),
+    onDelete: (entry, rel) => handleDelete(entry, rel),
+  })
 
   const handleRowSelect = (entryPath: string, e: React.MouseEvent) => {
     setFocusedPath(entryPath)
@@ -897,7 +682,7 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
       refreshAll()
       setExpanded((prev) => new Set(prev).add(parent))
     } catch (err: any) {
-      alert(err.message || 'Operation failed')
+      console.error('[dsh-explorer] Operation failed:', err)
     } finally {
       setCreating(null)
       setCreatingName('')
@@ -905,21 +690,12 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
   }
 
   const handleRename = async (entryPath: string, newName: string) => {
+    setRenamingPath(null)
     try {
       await apiRename(entryPath, newName)
       refreshAll()
     } catch (err: any) {
-      alert(err.message || 'Rename failed')
-    }
-  }
-
-  const handleDelete = async (entry: FsEntry) => {
-    if (!confirm(`Are you sure you want to delete "${entry.name}"?`)) return
-    try {
-      await apiDelete(entry.path)
-      refreshAll()
-    } catch (err: any) {
-      alert(err.message || 'Delete failed')
+      console.error('[dsh-explorer] Rename failed:', err)
     }
   }
 
@@ -944,8 +720,12 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
     [ctx, sessionId]
   )
 
-  const title = rootPath ? baseName(rootPath) : 'EXPLORER'
-  const rootListing = levels[rootPath] ?? levels[rootPath.replace(/\\/g, '/')]
+  const normRootLower = rootPath ? rootPath.replace(/\\/g, '/').toLowerCase() : ''
+  const rootListing =
+    levels[rootPath] ??
+    levels[rootPath.replace(/\\/g, '/')] ??
+    levels[rootPath.replace(/\//g, '\\')] ??
+    (normRootLower ? Object.entries(levels).find(([k]) => k.replace(/\\/g, '/').toLowerCase() === normRootLower)?.[1] : undefined)
 
   return (
     <div
@@ -953,10 +733,18 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
       style={containerStyles}
     >
       <ExplorerHeader
-        title={`EXPLORER: ${title}`}
+        title={rootPath || 'EXPLORER'}
         searchOpen={searchOpen}
         optionsOpen={optionsOpen}
-        onToggleSearch={() => setSearchOpen(!searchOpen)}
+        onToggleSearch={() => {
+          if (searchOpen) {
+            setSearchInput('')
+            setFilterText('')
+            setSearchOpen(false)
+          } else {
+            setSearchOpen(true)
+          }
+        }}
         onToggleOptions={() => setOptionsOpen(!optionsOpen)}
         onNewFile={() => {
           setCreating({ parentDir: rootPath, isDir: false })
@@ -969,6 +757,7 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
         onRefresh={() => {
           refreshAll()
         }}
+        onExpandAll={handleExpandAll}
         onCollapseAll={() => {
           setExpanded(new Set())
         }}
@@ -985,9 +774,12 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
 
       {searchOpen && (
         <ExplorerSearch
-          value={filterText}
-          onChange={setFilterText}
+          value={searchInput}
+          loading={searchLoading}
+          matchCount={matchCount}
+          onChange={setSearchInput}
           onClose={() => {
+            setSearchInput('')
             setFilterText('')
             setSearchOpen(false)
           }}
@@ -999,13 +791,20 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
         className={css.treeBody}
         tabIndex={0}
         onKeyDown={handleKeyDown}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          setContextMenu(null)
+          setEmptyContextMenu({
+            x: e.clientX,
+            y: e.clientY,
+          })
+        }}
         onDragOver={(e) => {
           e.preventDefault()
           e.dataTransfer.dropEffect = 'copy'
         }}
         onDrop={handleExplorerDrop}
       >
-        {/* Root inline creation */}
         {creating && creating.parentDir === rootPath && (
           <div className={css.row} style={{ paddingLeft: `${indentStep + 8}px` }}>
             <span className={css.iconWrap}>{creating.isDir ? '📁' : '📄'}</span>
@@ -1026,8 +825,7 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
           </div>
         )}
 
-        {/* Tree Nodes with Motion Collapse */}
-        {rootListing?.entries.map((entry) => (
+        {(rootListing?.entries ?? []).map((entry) => (
           <TreeNode
             key={entry.path}
             entry={entry}
@@ -1038,8 +836,11 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
             expanded={expanded}
             selected={selected}
             focusedPath={focusedPath}
+            renamingPath={renamingPath}
             gitStatusMap={gitStatusMap}
             filterText={filterText}
+            matchingPaths={matchingPaths}
+            ancestorPaths={ancestorPaths}
             creating={creating}
             creatingName={creatingName}
             createInputRef={createInputRef}
@@ -1052,6 +853,8 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
             onOpenFile={handleOpenFile}
             onContextMenu={(ent, rel, e) => {
               e.preventDefault()
+              e.stopPropagation()
+              setEmptyContextMenu(null)
               setContextMenu({
                 x: e.clientX,
                 y: e.clientY,
@@ -1066,6 +869,8 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
             onCopyRelativePath={(rel) => {
               navigator.clipboard.writeText(rel)
             }}
+            onStartRename={(path) => setRenamingPath(path)}
+            onCancelRename={() => setRenamingPath(null)}
             onRenameSubmit={(path, newName) => handleRename(path, newName)}
             onDelete={handleDelete}
             onCreatingNameChange={setCreatingName}
@@ -1080,12 +885,12 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
 
         {visibleFlatRows.length === 0 && !creating && (
           <div className={css.emptyState}>
-            {loading
-              ? 'Loading workspace files...'
+            {loading || searchLoading
+              ? 'Searching workspace files...'
               : errorMessage
               ? `Error: ${errorMessage}`
               : filterText
-              ? 'No matching files found'
+              ? `No files matching "${filterText}"`
               : !options.showHiddenFiles
               ? 'Only hidden files present (enable in options)'
               : 'Empty directory'}
@@ -1111,7 +916,7 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
               const content = await fetchFileContent(contextMenu.entry.path)
               insertSnippetToComposer(ctx, activeId, contextMenu.relativePath, content)
             } catch (err: any) {
-              alert(err.message || 'Failed to read file')
+              console.error('[dsh-explorer] Failed to read file:', err)
             }
           }}
           onCopyPath={() => {
@@ -1130,8 +935,45 @@ export const ExplorerView: React.FC<ExplorerViewProps> = ({ ctx, sessionId, init
           }}
           onRename={() => {
             setFocusedPath(contextMenu.entry.path)
+            setRenamingPath(contextMenu.entry.path)
           }}
-          onDelete={() => handleDelete(contextMenu.entry)}
+          onDelete={() => handleDelete(contextMenu.entry, contextMenu.relativePath)}
+        />
+      )}
+
+      {emptyContextMenu && (
+        <ExplorerEmptyContextMenu
+          x={emptyContextMenu.x}
+          y={emptyContextMenu.y}
+          onClose={() => setEmptyContextMenu(null)}
+          onNewFile={() => {
+            setCreating({ parentDir: rootPath, isDir: false })
+            setCreatingName('')
+          }}
+          onNewFolder={() => {
+            setCreating({ parentDir: rootPath, isDir: true })
+            setCreatingName('')
+          }}
+          onToggleSearch={() => {
+            setSearchOpen((prev) => !prev)
+          }}
+          onExpandAll={handleExpandAll}
+          onCollapseAll={() => {
+            setExpanded(new Set())
+          }}
+          onRefresh={refreshAll}
+          onOpenOptions={() => {
+            setOptionsOpen(true)
+          }}
+        />
+      )}
+
+      {deletingTarget && (
+        <ExplorerDeleteModal
+          entry={deletingTarget.entry}
+          relativePath={deletingTarget.relativePath}
+          onConfirm={handleConfirmDelete}
+          onClose={() => setDeletingTarget(null)}
         />
       )}
     </div>