dsh-explorer 0.0.0-stage → 0.1.1

package/src/client/ExplorerView.tsx

@@ -0,0 +1,981 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import css from './explorer.module.css'
+import {
+  fetchTree,
+  fetchBatchTree,
+  fetchGitStatus,
+  fetchSearchWorkspace,
+  apiCreateNewFile,
+  apiCreateDirectory,
+  apiRename,
+  apiDelete,
+  fetchFileContent,
+  type FsEntry,
+  type FsListing,
+  type GitStatusResult,
+} 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 './utils/options.ts'
+import {
+  insertMentionToComposer,
+  insertSnippetToComposer,
+  setLastKnownSessionId,
+  baseName,
+} from './utils/conversation-draft.ts'
+import { openFileInTab, safeService } from './utils/open-tab.ts'
+
+export { openFileInTab }
+
+interface ExplorerViewProps {
+  ctx: any
+  sessionId?: string
+  initialCwd?: string
+}
+
+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())
+  const [loading, setLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  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)
+
+  const handleUpdateOptions = useCallback((patch: Partial<ExplorerOptions>) => {
+    setOptions((prev) => {
+      const next = { ...prev, ...patch }
+      saveExplorerOptions(next)
+      return next
+    })
+  }, [])
+
+  const handleResetOptions = useCallback(() => {
+    setOptions({ ...DEFAULT_OPTIONS })
+    saveExplorerOptions({ ...DEFAULT_OPTIONS })
+  }, [])
+
+  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
+  const baseIndent = options.density === 'compact' ? 12 : options.density === 'relaxed' ? 20 : 16
+
+  const rowHeight = Math.round(baseRowHeight * options.scale)
+  const fontSize = Math.round(baseFontSize * options.scale)
+  const iconSize = Math.round(baseIconSize * options.scale)
+  const indentStep = Math.round(baseIndent * options.scale)
+
+  const containerStyles = useMemo(
+    () =>
+      ({
+        '--dsh-row-height': `${rowHeight}px`,
+        '--dsh-font-size': `${fontSize}px`,
+        '--dsh-icon-size': `${iconSize}px`,
+        '--dsh-indent-step': `${indentStep}px`,
+      }) as React.CSSProperties,
+    [rowHeight, fontSize, iconSize, indentStep]
+  )
+
+  useEffect(() => {
+    if (sessionId) setLastKnownSessionId(sessionId)
+  }, [sessionId])
+
+  useEffect(() => {
+    if (initialCwd && !rootPath) {
+      setRootPath(initialCwd)
+      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
+      }
+    }
+  }, [sessionId, initialCwd, rootPath])
+
+  const reloadDirectory = useCallback(
+    async (dir: string): Promise<void> => {
+      try {
+        setErrorMessage(null)
+        const listing = await fetchTree(sessionId, dir)
+        setLevels((prev) => {
+          const norm = dir.replace(/\\/g, '/')
+          const back = dir.replace(/\//g, '\\')
+          return {
+            ...prev,
+            [dir]: listing,
+            [norm]: listing,
+            [back]: listing,
+          }
+        })
+      } catch (err: any) {
+        setErrorMessage(err?.message || 'Failed to load directory')
+      }
+    },
+    [sessionId]
+  )
+
+  const reloadGit = useCallback(
+    async (dir?: string) => {
+      const target = dir || rootPath
+      if (!target && !sessionId) return
+      try {
+        const res = await fetchGitStatus(target, sessionId)
+        setGitData(res)
+      } catch {
+        setGitData({ isRepo: false, entries: [] })
+      }
+    },
+    [rootPath, sessionId]
+  )
+
+  const refreshAll = useCallback(async () => {
+    if (!rootPath) return
+    reloadGit(rootPath)
+    try {
+      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: 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
+      })
+
+      setExpanded((prev) => {
+        let changed = false
+        const next = new Set(prev)
+        for (const expPath of prev) {
+          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
+      })
+    } catch (err) {
+      console.warn('[dsh-explorer] refreshAll failed:', err)
+    }
+  }, [rootPath, expanded, reloadGit])
+
+  useEffect(() => {
+    if (!rootPath) return
+    refreshAll()
+    setExpanded((prev) => new Set(prev).add(rootPath))
+  }, [rootPath])
+
+  useLiveSync({
+    rootPath,
+    onRefresh: refreshAll,
+  })
+
+  const toggleExpand = useCallback(
+    async (path: string) => {
+      setExpanded((prev) => {
+        const next = new Set(prev)
+        if (next.has(path)) {
+          next.delete(path)
+        } else {
+          next.add(path)
+          const norm = path.replace(/\\/g, '/')
+          if (!levels[path] && !levels[norm]) {
+            reloadDirectory(path)
+          }
+        }
+        return next
+      })
+    },
+    [levels, reloadDirectory]
+  )
+
+  const getRelativePath = useCallback(
+    (fullPath: string): string => {
+      if (!rootPath) return fullPath
+      const normRoot = rootPath.replace(/\\/g, '/').replace(/\/+$/, '')
+      const normTarget = fullPath.replace(/\\/g, '/')
+      if (normTarget.toLowerCase().startsWith(`${normRoot.toLowerCase()}/`)) {
+        return normTarget.slice(normRoot.length + 1)
+      }
+      return fullPath
+    },
+    [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>()
+    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)
+      }
+
+      let parent = p
+      while (true) {
+        const lastSlash = parent.lastIndexOf('/')
+        if (lastSlash === -1) break
+        parent = parent.slice(0, lastSlash)
+        if (!parent) break
+        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, rootPath])
+
+  const visibleFlatRows = useMemo(() => {
+    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, '/').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)
+        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, '/')] ?? levels[curr.path.replace(/\//g, '\\')]
+          while (currL && Array.isArray(currL.entries)) {
+            const valid = options.showHiddenFiles
+              ? currL.entries
+              : 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, '/')] ?? levels[curr.path.replace(/\//g, '\\')]
+            } else {
+              break
+            }
+          }
+          if (chain.length > 1) {
+            const compactRel = getRelativePath(curr.path)
+            rows.push({ entry: curr, relativePath: compactRel })
+            const isExp = isSearchActive || expanded.has(entry.path) || expanded.has(curr.path)
+            if (isExp) {
+              walk(curr.path)
+            }
+            continue
+          }
+        }
+
+        rows.push({ entry, relativePath: rel })
+
+        const isFolderExpanded = isSearchActive || expanded.has(entry.path)
+        if (entry.isDir && isFolderExpanded) {
+          walk(entry.path)
+        }
+      }
+    }
+
+    walk(rootPath)
+    return rows
+  }, [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)
+    if (e.ctrlKey || e.metaKey) {
+      setSelected((prev) => {
+        const next = new Set(prev)
+        if (next.has(entryPath)) next.delete(entryPath)
+        else next.add(entryPath)
+        return next
+      })
+    } else {
+      setSelected(new Set([entryPath]))
+    }
+  }
+
+  const handleCreateSubmit = async () => {
+    if (!creating || !creatingName.trim()) {
+      setCreating(null)
+      return
+    }
+    const name = creatingName.trim()
+    const parent = creating.parentDir
+    try {
+      if (creating.isDir) {
+        await apiCreateDirectory(parent, name)
+      } else {
+        await apiCreateNewFile(parent, name)
+      }
+      refreshAll()
+      setExpanded((prev) => new Set(prev).add(parent))
+    } catch (err: any) {
+      console.error('[dsh-explorer] Operation failed:', err)
+    } finally {
+      setCreating(null)
+      setCreatingName('')
+    }
+  }
+
+  const handleRename = async (entryPath: string, newName: string) => {
+    setRenamingPath(null)
+    try {
+      await apiRename(entryPath, newName)
+      refreshAll()
+    } catch (err: any) {
+      console.error('[dsh-explorer] Rename failed:', err)
+    }
+  }
+
+  const handleExplorerDrop = async (e: React.DragEvent) => {
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      e.preventDefault()
+      e.stopPropagation()
+      const targetDir = rootPath
+      for (let i = 0; i < e.dataTransfer.files.length; i++) {
+        const file = e.dataTransfer.files[i]!
+        const uploadUrl = `/dsh-explorer/api/upload?dir=${encodeURIComponent(targetDir)}&relativePath=${encodeURIComponent(file.name)}`
+        await fetch(uploadUrl, { method: 'POST', body: file })
+      }
+      refreshAll()
+    }
+  }
+
+  const handleOpenFile = useCallback(
+    (filePath: string, relPath: string) => {
+      openFileInTab(ctx, sessionId ?? '', filePath, relPath)
+    },
+    [ctx, sessionId]
+  )
+
+  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
+      className={`${css.container} ${!options.enableMotion ? css.noMotion : ''}`}
+      style={containerStyles}
+    >
+      <ExplorerHeader
+        title={rootPath || 'EXPLORER'}
+        searchOpen={searchOpen}
+        optionsOpen={optionsOpen}
+        onToggleSearch={() => {
+          if (searchOpen) {
+            setSearchInput('')
+            setFilterText('')
+            setSearchOpen(false)
+          } else {
+            setSearchOpen(true)
+          }
+        }}
+        onToggleOptions={() => setOptionsOpen(!optionsOpen)}
+        onNewFile={() => {
+          setCreating({ parentDir: rootPath, isDir: false })
+          setCreatingName('')
+        }}
+        onNewFolder={() => {
+          setCreating({ parentDir: rootPath, isDir: true })
+          setCreatingName('')
+        }}
+        onRefresh={() => {
+          refreshAll()
+        }}
+        onExpandAll={handleExpandAll}
+        onCollapseAll={() => {
+          setExpanded(new Set())
+        }}
+      />
+
+      {optionsOpen && (
+        <ExplorerOptionsModal
+          options={options}
+          onChange={handleUpdateOptions}
+          onReset={handleResetOptions}
+          onClose={() => setOptionsOpen(false)}
+        />
+      )}
+
+      {searchOpen && (
+        <ExplorerSearch
+          value={searchInput}
+          loading={searchLoading}
+          matchCount={matchCount}
+          onChange={setSearchInput}
+          onClose={() => {
+            setSearchInput('')
+            setFilterText('')
+            setSearchOpen(false)
+          }}
+        />
+      )}
+
+      <div
+        ref={treeBodyRef}
+        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}
+      >
+        {creating && creating.parentDir === rootPath && (
+          <div className={css.row} style={{ paddingLeft: `${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) => setCreatingName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleCreateSubmit()
+                else if (e.key === 'Escape') setCreating(null)
+              }}
+              onBlur={handleCreateSubmit}
+            />
+          </div>
+        )}
+
+        {(rootListing?.entries ?? []).map((entry) => (
+          <TreeNode
+            key={entry.path}
+            entry={entry}
+            depth={0}
+            parentDir={rootPath}
+            rootPath={rootPath}
+            levels={levels}
+            expanded={expanded}
+            selected={selected}
+            focusedPath={focusedPath}
+            renamingPath={renamingPath}
+            gitStatusMap={gitStatusMap}
+            filterText={filterText}
+            matchingPaths={matchingPaths}
+            ancestorPaths={ancestorPaths}
+            creating={creating}
+            creatingName={creatingName}
+            createInputRef={createInputRef}
+            options={options}
+            indentStep={indentStep}
+            iconSize={iconSize}
+            reloadDirectory={reloadDirectory}
+            onToggle={toggleExpand}
+            onSelect={handleRowSelect}
+            onOpenFile={handleOpenFile}
+            onContextMenu={(ent, rel, e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setEmptyContextMenu(null)
+              setContextMenu({
+                x: e.clientX,
+                y: e.clientY,
+                entry: ent,
+                relativePath: rel,
+              })
+            }}
+            onInsertReference={(rel, isDir) => {
+              const activeId = sessionId ?? safeService(ctx, 'sessions')?.active?.id ?? ''
+              insertMentionToComposer(ctx, activeId, rel, isDir)
+            }}
+            onCopyRelativePath={(rel) => {
+              navigator.clipboard.writeText(rel)
+            }}
+            onStartRename={(path) => setRenamingPath(path)}
+            onCancelRename={() => setRenamingPath(null)}
+            onRenameSubmit={(path, newName) => handleRename(path, newName)}
+            onDelete={handleDelete}
+            onCreatingNameChange={setCreatingName}
+            onCreatingKeyDown={(e) => {
+              if (e.key === 'Enter') handleCreateSubmit()
+              else if (e.key === 'Escape') setCreating(null)
+            }}
+            onCreatingBlur={handleCreateSubmit}
+            getRelativePath={getRelativePath}
+          />
+        ))}
+
+        {visibleFlatRows.length === 0 && !creating && (
+          <div className={css.emptyState}>
+            {loading || searchLoading
+              ? 'Searching workspace files...'
+              : errorMessage
+              ? `Error: ${errorMessage}`
+              : filterText
+              ? `No files matching "${filterText}"`
+              : !options.showHiddenFiles
+              ? 'Only hidden files present (enable in options)'
+              : 'Empty directory'}
+          </div>
+        )}
+      </div>
+
+      {contextMenu && (
+        <ExplorerContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          entry={contextMenu.entry}
+          relativePath={contextMenu.relativePath}
+          onClose={() => setContextMenu(null)}
+          onOpenFile={() => handleOpenFile(contextMenu.entry.path, contextMenu.relativePath)}
+          onInsertReference={() => {
+            const activeId = sessionId ?? safeService(ctx, 'sessions')?.active?.id ?? ''
+            insertMentionToComposer(ctx, activeId, contextMenu.relativePath, contextMenu.entry.isDir)
+          }}
+          onInsertSnippet={async () => {
+            const activeId = sessionId ?? safeService(ctx, 'sessions')?.active?.id ?? ''
+            try {
+              const content = await fetchFileContent(contextMenu.entry.path)
+              insertSnippetToComposer(ctx, activeId, contextMenu.relativePath, content)
+            } catch (err: any) {
+              console.error('[dsh-explorer] Failed to read file:', err)
+            }
+          }}
+          onCopyPath={() => {
+            navigator.clipboard.writeText(contextMenu.entry.path)
+          }}
+          onCopyRelativePath={() => {
+            navigator.clipboard.writeText(contextMenu.relativePath)
+          }}
+          onNewFile={() => {
+            setCreating({ parentDir: contextMenu.entry.path, isDir: false })
+            setCreatingName('')
+          }}
+          onNewFolder={() => {
+            setCreating({ parentDir: contextMenu.entry.path, isDir: true })
+            setCreatingName('')
+          }}
+          onRename={() => {
+            setFocusedPath(contextMenu.entry.path)
+            setRenamingPath(contextMenu.entry.path)
+          }}
+          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>
+  )
+}