create-visualbuild-app 0.1.0 → 1.0.0

package/visual-app-builder/src/components/ProjectExplorer.tsx

@@ -1,1054 +1,1054 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  createProjectEntry,
-  deleteProjectEntry,
-  listProjectDirectory,
-  listProjectDirectories,
-  moveProjectEntry,
-  renameProjectEntry,
-  type ProjectEntry,
-} from '../utils/projectFiles'
-
-interface ProjectExplorerProps {
-  selectedPath: string | null
-  onSelectFile: (path: string | null) => void
-}
-
-interface FileSystemChangeDetail {
-  type: 'filesystem-change'
-  path: string
-  action: 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir'
-}
-
-type CreateState = {
-  parentPath: string
-  kind: 'file' | 'directory'
-} | null
-
-const initiallyOpenDirectories = new Set(['', 'src', 'src/pages'])
-
-export default function ProjectExplorer({
-  selectedPath,
-  onSelectFile,
-}: ProjectExplorerProps) {
-  const [rootName, setRootName] = useState('Project')
-  const [entriesByDirectory, setEntriesByDirectory] = useState<
-    Record<string, ProjectEntry[]>
-  >({})
-  const [openDirectories, setOpenDirectories] = useState(
-    () => new Set(initiallyOpenDirectories)
-  )
-  const [selectedDirectory, setSelectedDirectory] = useState('')
-  const [createState, setCreateState] = useState<CreateState>(null)
-  const [renamePath, setRenamePath] = useState<string | null>(null)
-  const [moveTarget, setMoveTarget] = useState<ProjectEntry | null>(null)
-  const [deleteTarget, setDeleteTarget] = useState<ProjectEntry | null>(null)
-  const [busyPath, setBusyPath] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const mounted = useRef(true)
-
-  const pruneMissingDirectory = useCallback((directoryPath: string) => {
-    if (!directoryPath) return
-
-    setOpenDirectories(
-      (current) =>
-        new Set(
-          Array.from(current).filter(
-            (path) => !isPathWithin(path, directoryPath)
-          )
-        )
-    )
-    setEntriesByDirectory((current) =>
-      Object.fromEntries(
-        Object.entries(current)
-          .filter(([path]) => !isPathWithin(path, directoryPath))
-          .map(([path, entries]) => [
-            path,
-            entries.filter(
-              (entry) => !isPathWithin(entry.path, directoryPath)
-            ),
-          ])
-      )
-    )
-    setSelectedDirectory((current) =>
-      isPathWithin(current, directoryPath)
-        ? getParentPath(directoryPath)
-        : current
-    )
-    setError(null)
-  }, [])
-
-  const loadDirectory = useCallback(
-    async (directoryPath: string) => {
-      try {
-        const result = await listProjectDirectory(directoryPath)
-
-        if (!mounted.current) return
-        setRootName(result.rootName)
-        setEntriesByDirectory((current) => ({
-          ...current,
-          [directoryPath]: result.entries,
-        }))
-        setError(null)
-      } catch (loadError) {
-        if (!mounted.current) return
-
-        if (
-          directoryPath &&
-          isMissingProjectPathError(getErrorMessage(loadError))
-        ) {
-          pruneMissingDirectory(directoryPath)
-          return
-        }
-
-        setError(getErrorMessage(loadError))
-      }
-    },
-    [pruneMissingDirectory]
-  )
-
-  const refreshOpenDirectories = useCallback(async () => {
-    await Promise.all(
-      Array.from(openDirectories, (directoryPath) =>
-        loadDirectory(directoryPath)
-      )
-    )
-  }, [loadDirectory, openDirectories])
-
-  useEffect(() => {
-    mounted.current = true
-    void refreshOpenDirectories()
-
-    return () => {
-      mounted.current = false
-    }
-  }, [refreshOpenDirectories])
-
-  useEffect(() => {
-    const interval = window.setInterval(() => {
-      void refreshOpenDirectories()
-    }, 3000)
-
-    return () => window.clearInterval(interval)
-  }, [refreshOpenDirectories])
-
-  useEffect(() => {
-    const refresh = (event: Event) => {
-      const detail = (event as CustomEvent<FileSystemChangeDetail>).detail
-
-      if (
-        detail?.type === 'filesystem-change' &&
-        detail.action === 'unlinkDir'
-      ) {
-        const removedPath = detail.path.replace(/\\/g, '/')
-        pruneMissingDirectory(removedPath)
-        void loadDirectory(getParentPath(removedPath))
-        return
-      }
-
-      void refreshOpenDirectories()
-    }
-
-    window.addEventListener('visualbuild:filesystem-changed', refresh)
-    return () =>
-      window.removeEventListener('visualbuild:filesystem-changed', refresh)
-  }, [loadDirectory, pruneMissingDirectory, refreshOpenDirectories])
-
-  const selectedParentDirectory = useMemo(() => {
-    if (!selectedPath) return selectedDirectory
-    const entry = findEntry(entriesByDirectory, selectedPath)
-
-    if (entry?.kind === 'directory') return entry.path
-    return getParentPath(selectedPath)
-  }, [entriesByDirectory, selectedDirectory, selectedPath])
-
-  const toggleDirectory = (directoryPath: string) => {
-    setSelectedDirectory(directoryPath)
-    onSelectFile(null)
-    setOpenDirectories((current) => {
-      const next = new Set(current)
-
-      if (next.has(directoryPath)) {
-        next.delete(directoryPath)
-      } else {
-        next.add(directoryPath)
-        void loadDirectory(directoryPath)
-      }
-
-      return next
-    })
-  }
-
-  const startCreate = (kind: 'file' | 'directory') => {
-    setCreateState({ parentPath: selectedParentDirectory, kind })
-    setRenamePath(null)
-    setError(null)
-  }
-
-  const handleCreate = async (name: string) => {
-    if (!createState) return
-    setBusyPath(createState.parentPath || '/')
-
-    try {
-      const entry = await createProjectEntry(
-        createState.parentPath,
-        name,
-        createState.kind
-      )
-      setCreateState(null)
-      setOpenDirectories((current) =>
-        new Set(current).add(createState.parentPath)
-      )
-      await loadDirectory(createState.parentPath)
-
-      if (entry.kind === 'directory') {
-        onSelectFile(null)
-        setSelectedDirectory(entry.path)
-        setOpenDirectories((current) => new Set(current).add(entry.path))
-        await loadDirectory(entry.path)
-      } else {
-        onSelectFile(entry.path)
-      }
-    } catch (createError) {
-      setError(getErrorMessage(createError))
-    } finally {
-      setBusyPath(null)
-    }
-  }
-
-  const handleRename = async (entry: ProjectEntry, name: string) => {
-    setBusyPath(entry.path)
-
-    try {
-      const renamed = await renameProjectEntry(entry.path, name)
-      const parentPath = getParentPath(entry.path)
-      setRenamePath(null)
-      await loadDirectory(parentPath)
-
-      if (entry.kind === 'directory') {
-        setEntriesByDirectory((current) =>
-          renameDirectoryCache(current, entry.path, renamed.path)
-        )
-        setOpenDirectories((current) =>
-          renameOpenDirectories(current, entry.path, renamed.path)
-        )
-        setSelectedDirectory((current) =>
-          replacePathPrefix(current, entry.path, renamed.path)
-        )
-      }
-
-      if (selectedPath) {
-        const nextSelectedPath = replacePathPrefix(
-          selectedPath,
-          entry.path,
-          renamed.path
-        )
-
-        if (nextSelectedPath !== selectedPath) {
-          onSelectFile(nextSelectedPath)
-        }
-      }
-    } catch (renameError) {
-      setError(getErrorMessage(renameError))
-    } finally {
-      setBusyPath(null)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (!deleteTarget) return
-    const target = deleteTarget
-    setDeleteTarget(null)
-    setBusyPath(target.path)
-
-    try {
-      await deleteProjectEntry(target.path)
-      const parentPath = getParentPath(target.path)
-      await loadDirectory(parentPath)
-
-      if (selectedPath && isPathWithin(selectedPath, target.path)) {
-        onSelectFile(null)
-      }
-
-      if (isPathWithin(selectedDirectory, target.path)) {
-        setSelectedDirectory(parentPath)
-      }
-
-      setOpenDirectories((current) =>
-        new Set(
-          Array.from(current).filter(
-            (directoryPath) => !isPathWithin(directoryPath, target.path)
-          )
-        )
-      )
-      setEntriesByDirectory((current) =>
-        Object.fromEntries(
-          Object.entries(current).filter(
-            ([directoryPath]) => !isPathWithin(directoryPath, target.path)
-          )
-        )
-      )
-    } catch (deleteError) {
-      setError(getErrorMessage(deleteError))
-    } finally {
-      setBusyPath(null)
-    }
-  }
-
-  const handleMove = async (parentPath: string) => {
-    if (!moveTarget) return
-    const entry = moveTarget
-    setMoveTarget(null)
-    setBusyPath(entry.path)
-
-    try {
-      const moved = await moveProjectEntry(entry.path, parentPath)
-      const previousParentPath = getParentPath(entry.path)
-      setEntriesByDirectory((current) =>
-        renameDirectoryCache(current, entry.path, moved.path)
-      )
-      setOpenDirectories((current) =>
-        renameOpenDirectories(current, entry.path, moved.path)
-      )
-      setSelectedDirectory((current) =>
-        replacePathPrefix(current, entry.path, moved.path)
-      )
-
-      if (selectedPath) {
-        const nextSelectedPath = replacePathPrefix(
-          selectedPath,
-          entry.path,
-          moved.path
-        )
-
-        if (nextSelectedPath !== selectedPath) {
-          onSelectFile(nextSelectedPath)
-        }
-      }
-
-      await Promise.all([
-        loadDirectory(previousParentPath),
-        loadDirectory(parentPath),
-      ])
-    } catch (moveError) {
-      setError(getErrorMessage(moveError))
-    } finally {
-      setBusyPath(null)
-    }
-  }
-
-  return (
-    <div className="flex h-full min-h-0 flex-col text-[11px]">
-      <div className="flex shrink-0 items-center gap-1 border-b border-white/[0.05] px-2 py-1.5">
-        <ExplorerAction label="New file" onClick={() => startCreate('file')} />
-        <ExplorerAction
-          label="New folder"
-          onClick={() => startCreate('directory')}
-        />
-        <ExplorerAction
-          label="Refresh"
-          onClick={() => void refreshOpenDirectories()}
-        />
-      </div>
-
-      {createState && (
-        <NameEditor
-          label={createState.kind === 'file' ? 'New file' : 'New folder'}
-          parentPath={createState.parentPath}
-          onCancel={() => setCreateState(null)}
-          onSubmit={(name) => void handleCreate(name)}
-        />
-      )}
-
-      {error && (
-        <div className="mx-2 mt-2 rounded border border-red-400/20 bg-red-500/10 px-2 py-1.5 text-[10px] leading-4 text-red-300">
-          {error}
-        </div>
-      )}
-
-      <div className="min-h-0 flex-1 overflow-auto px-1.5 py-1.5">
-        <ProjectTreeRow
-          name={rootName}
-          path=""
-          kind="directory"
-          depth={0}
-          isOpen={openDirectories.has('')}
-          isSelected={!selectedPath && selectedDirectory === ''}
-          isBusy={busyPath === '/'}
-          onSelect={() => toggleDirectory('')}
-        />
-        {openDirectories.has('') &&
-          <ProjectEntries
-            directoryPath=""
-            depth={1}
-            entriesByDirectory={entriesByDirectory}
-            openDirectories={openDirectories}
-            selectedPath={selectedPath}
-            selectedDirectory={selectedDirectory}
-            renamePath={renamePath}
-            busyPath={busyPath}
-            onToggleDirectory={toggleDirectory}
-            onSelectFile={(path) => {
-              setSelectedDirectory(getParentPath(path))
-              onSelectFile(path)
-            }}
-            onStartRename={(path) => {
-              setCreateState(null)
-              setRenamePath(path)
-            }}
-            onRename={handleRename}
-            onCancelRename={() => setRenamePath(null)}
-            onMove={setMoveTarget}
-            onDelete={setDeleteTarget}
-          />}
-      </div>
-
-      {deleteTarget && (
-        <DeleteDialog
-          entry={deleteTarget}
-          onCancel={() => setDeleteTarget(null)}
-          onConfirm={() => void handleDelete()}
-        />
-      )}
-      {moveTarget && (
-        <MoveDialog
-          entry={moveTarget}
-          initialParentPath={getParentPath(moveTarget.path)}
-          onCancel={() => setMoveTarget(null)}
-          onConfirm={(parentPath) => void handleMove(parentPath)}
-        />
-      )}
-    </div>
-  )
-}
-
-function ProjectEntries({
-  directoryPath,
-  depth,
-  entriesByDirectory,
-  openDirectories,
-  selectedPath,
-  selectedDirectory,
-  renamePath,
-  busyPath,
-  onToggleDirectory,
-  onSelectFile,
-  onStartRename,
-  onRename,
-  onCancelRename,
-  onMove,
-  onDelete,
-}: {
-  directoryPath: string
-  depth: number
-  entriesByDirectory: Record<string, ProjectEntry[]>
-  openDirectories: Set<string>
-  selectedPath: string | null
-  selectedDirectory: string
-  renamePath: string | null
-  busyPath: string | null
-  onToggleDirectory: (path: string) => void
-  onSelectFile: (path: string) => void
-  onStartRename: (path: string) => void
-  onRename: (entry: ProjectEntry, name: string) => Promise<void>
-  onCancelRename: () => void
-  onMove: (entry: ProjectEntry) => void
-  onDelete: (entry: ProjectEntry) => void
-}): React.ReactNode {
-  const entries = entriesByDirectory[directoryPath]
-
-  if (!entries) {
-    return (
-      <div
-        className="py-1 text-[10px] text-gray-600"
-        style={{ paddingLeft: `${depth * 0.8 + 1.25}rem` }}
-      >
-        Loading...
-      </div>
-    )
-  }
-
-  if (entries.length === 0) {
-    return (
-      <div
-        className="py-1 text-[10px] text-gray-600"
-        style={{ paddingLeft: `${depth * 0.8 + 1.25}rem` }}
-      >
-        Empty folder
-      </div>
-    )
-  }
-
-  return (
-    <>
-      {entries.map((entry) => {
-        const isDirectory = entry.kind === 'directory'
-        const isOpen = isDirectory && openDirectories.has(entry.path)
-
-        return (
-          <div key={entry.path}>
-            {renamePath === entry.path ? (
-              <InlineRename
-                entry={entry}
-                depth={depth}
-                onCancel={onCancelRename}
-                onSubmit={(name) => void onRename(entry, name)}
-              />
-            ) : (
-              <ProjectTreeRow
-                name={entry.name}
-                path={entry.path}
-                kind={entry.kind}
-                depth={depth}
-                isOpen={isOpen}
-                isSelected={
-                  isDirectory
-                    ? !selectedPath && selectedDirectory === entry.path
-                    : selectedPath === entry.path
-                }
-                isBusy={busyPath === entry.path}
-                onSelect={() =>
-                  isDirectory
-                    ? onToggleDirectory(entry.path)
-                    : onSelectFile(entry.path)
-                }
-                onRename={() => onStartRename(entry.path)}
-                onMove={() => onMove(entry)}
-                onDelete={() => onDelete(entry)}
-              />
-            )}
-            {isOpen && (
-              <ProjectEntries
-                directoryPath={entry.path}
-                depth={depth + 1}
-                entriesByDirectory={entriesByDirectory}
-                openDirectories={openDirectories}
-                selectedPath={selectedPath}
-                selectedDirectory={selectedDirectory}
-                renamePath={renamePath}
-                busyPath={busyPath}
-                onToggleDirectory={onToggleDirectory}
-                onSelectFile={onSelectFile}
-                onStartRename={onStartRename}
-                onRename={onRename}
-                onCancelRename={onCancelRename}
-                onMove={onMove}
-                onDelete={onDelete}
-              />
-            )}
-          </div>
-        )
-      })}
-    </>
-  )
-}
-
-function ProjectTreeRow({
-  name,
-  path,
-  kind,
-  depth,
-  isOpen,
-  isSelected,
-  isBusy,
-  onSelect,
-  onRename,
-  onMove,
-  onDelete,
-}: {
-  name: string
-  path: string
-  kind: ProjectEntry['kind']
-  depth: number
-  isOpen: boolean
-  isSelected: boolean
-  isBusy: boolean
-  onSelect: () => void
-  onRename?: () => void
-  onMove?: () => void
-  onDelete?: () => void
-}) {
-  const isDirectory = kind === 'directory'
-
-  return (
-    <div
-      className={`group flex min-h-7 items-center rounded transition-colors ${
-        isSelected
-          ? 'bg-accent/30 text-white'
-          : 'text-gray-400 hover:bg-white/[0.05] hover:text-gray-100'
-      }`}
-      style={{ paddingLeft: `${depth * 0.8}rem` }}
-      title={path || name}
-    >
-      <button
-        type="button"
-        onClick={onSelect}
-        className="flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 py-1 pr-1 text-left"
-      >
-        <span className="flex w-3 shrink-0 items-center justify-center text-[9px] text-gray-500">
-          {isDirectory ? (isOpen ? 'v' : '>') : kind === 'symlink' ? '@' : ''}
-        </span>
-        <span className="truncate">{name}</span>
-        {isBusy && <span className="text-[9px] text-blue-300">...</span>}
-      </button>
-      {(onRename || onMove || onDelete) && (
-        <div className="mr-1 hidden shrink-0 items-center gap-0.5 group-hover:flex group-focus-within:flex">
-          {onRename && (
-            <RowAction label="Rename" text="R" onClick={onRename} />
-          )}
-          {onMove && (
-            <RowAction label="Move" text="M" onClick={onMove} />
-          )}
-          {onDelete && (
-            <RowAction label="Delete" text="x" danger onClick={onDelete} />
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function ExplorerAction({ label, onClick }: { label: string; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="min-w-0 flex-1 cursor-pointer rounded bg-white/[0.04] px-1.5 py-1 text-[9px] text-gray-400 transition-colors hover:bg-white/[0.09] hover:text-white"
-      title={label}
-    >
-      {label}
-    </button>
-  )
-}
-
-function RowAction({
-  label,
-  text,
-  danger = false,
-  onClick,
-}: {
-  label: string
-  text: string
-  danger?: boolean
-  onClick: () => void
-}) {
-  return (
-    <button
-      type="button"
-      onClick={(event) => {
-        event.stopPropagation()
-        onClick()
-      }}
-      className={`flex h-5 w-5 cursor-pointer items-center justify-center rounded text-[9px] transition-colors ${
-        danger
-          ? 'text-gray-500 hover:bg-red-500 hover:text-white'
-          : 'text-gray-500 hover:bg-white/[0.1] hover:text-white'
-      }`}
-      aria-label={`${label} ${text}`}
-      title={label}
-    >
-      {text}
-    </button>
-  )
-}
-
-function NameEditor({
-  label,
-  parentPath,
-  onCancel,
-  onSubmit,
-}: {
-  label: string
-  parentPath: string
-  onCancel: () => void
-  onSubmit: (name: string) => void
-}) {
-  const [name, setName] = useState('')
-
-  return (
-    <form
-      className="shrink-0 border-b border-white/[0.05] bg-black/10 px-2 py-2"
-      onSubmit={(event) => {
-        event.preventDefault()
-        if (name.trim()) onSubmit(name.trim())
-      }}
-    >
-      <p className="mb-1 truncate text-[9px] uppercase tracking-wide text-gray-500">
-        {label} in {parentPath || '/'}
-      </p>
-      <div className="flex gap-1">
-        <input
-          autoFocus
-          value={name}
-          onChange={(event) => setName(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') onCancel()
-          }}
-          className="h-7 min-w-0 flex-1 rounded border border-blue-400/70 bg-[#11141a] px-2 text-[11px] text-white outline-none"
-          aria-label={label}
-        />
-        <button
-          type="submit"
-          className="cursor-pointer rounded bg-blue-500 px-2 text-[10px] font-medium text-white hover:bg-blue-400"
-        >
-          Add
-        </button>
-        <button
-          type="button"
-          onClick={onCancel}
-          className="cursor-pointer rounded bg-white/[0.06] px-2 text-[10px] text-gray-300 hover:bg-white/[0.1]"
-        >
-          Cancel
-        </button>
-      </div>
-    </form>
-  )
-}
-
-function InlineRename({
-  entry,
-  depth,
-  onCancel,
-  onSubmit,
-}: {
-  entry: ProjectEntry
-  depth: number
-  onCancel: () => void
-  onSubmit: (name: string) => void
-}) {
-  const [name, setName] = useState(entry.name)
-
-  return (
-    <form
-      className="flex min-h-7 items-center gap-1 pr-1"
-      style={{ paddingLeft: `${depth * 0.8 + 0.75}rem` }}
-      onSubmit={(event) => {
-        event.preventDefault()
-        if (name.trim() && name.trim() !== entry.name) onSubmit(name.trim())
-        else onCancel()
-      }}
-    >
-      <input
-        autoFocus
-        value={name}
-        onChange={(event) => setName(event.target.value)}
-        onBlur={() => {
-          const nextName = name.trim()
-          if (nextName && nextName !== entry.name) onSubmit(nextName)
-          else onCancel()
-        }}
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') onCancel()
-        }}
-        onFocus={(event) => selectFileName(event.currentTarget, entry.kind)}
-        className="h-6 min-w-0 flex-1 rounded border border-blue-400 bg-[#11141a] px-1.5 text-[11px] text-white outline-none"
-        aria-label={`Rename ${entry.name}`}
-      />
-    </form>
-  )
-}
-
-function MoveDialog({
-  entry,
-  initialParentPath,
-  onCancel,
-  onConfirm,
-}: {
-  entry: ProjectEntry
-  initialParentPath: string
-  onCancel: () => void
-  onConfirm: (parentPath: string) => void
-}) {
-  const [directories, setDirectories] = useState<ProjectEntry[]>([])
-  const [selectedPath, setSelectedPath] = useState<string | null>(null)
-  const [query, setQuery] = useState('')
-  const [isOpen, setIsOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(true)
-  const [loadError, setLoadError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let active = true
-
-    void listProjectDirectories()
-      .then((projectDirectories) => {
-        if (!active) return
-
-        setDirectories(
-          projectDirectories.filter((directory) => {
-            if (directory.path === initialParentPath) return false
-            if (entry.kind !== 'directory') return true
-
-            return (
-              directory.path !== entry.path &&
-              !directory.path.startsWith(`${entry.path}/`)
-            )
-          })
-        )
-        setLoadError(null)
-      })
-      .catch((error) => {
-        if (!active) return
-        setLoadError(getErrorMessage(error))
-      })
-      .finally(() => {
-        if (active) setIsLoading(false)
-      })
-
-    return () => {
-      active = false
-    }
-  }, [entry.kind, entry.path, initialParentPath])
-
-  const selectedDirectory = directories.find(
-    (directory) => directory.path === selectedPath
-  )
-  const normalizedQuery = query.trim().toLowerCase()
-  const filteredDirectories = directories.filter(
-    (directory) =>
-      !normalizedQuery ||
-      directory.name.toLowerCase().includes(normalizedQuery) ||
-      directory.path.toLowerCase().includes(normalizedQuery)
-  )
-
-  return (
-    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/45 px-4 backdrop-blur-[2px]">
-      <form
-        className="w-[400px] max-w-full rounded-md border border-white/10 bg-[#181b21] p-4 shadow-2xl"
-        onSubmit={(event) => {
-          event.preventDefault()
-          if (selectedPath !== null) onConfirm(selectedPath)
-        }}
-        onKeyDown={(event) => {
-          if (event.key !== 'Escape') return
-
-          if (isOpen) {
-            setIsOpen(false)
-          } else {
-            onCancel()
-          }
-        }}
-      >
-        <p className="text-sm font-medium text-white">Move {entry.name}</p>
-        <div className="relative mt-3">
-          <p className="text-[10px] uppercase tracking-wide text-gray-500">
-            Destination folder
-          </p>
-          <button
-            autoFocus
-            type="button"
-            onClick={() => {
-              if (!isLoading && !loadError && directories.length > 0) {
-                setIsOpen((current) => !current)
-              }
-            }}
-            className="mt-1 flex h-9 w-full cursor-pointer items-center gap-3 rounded border border-white/10 bg-[#11141a] px-2.5 text-left text-xs text-white outline-none transition-colors hover:border-white/20 focus:border-blue-400 disabled:cursor-not-allowed disabled:text-gray-500"
-            aria-label="Choose destination folder"
-            aria-expanded={isOpen}
-            aria-haspopup="listbox"
-            disabled={isLoading || Boolean(loadError) || directories.length === 0}
-          >
-            <span className="min-w-0 flex-1 truncate font-medium">
-              {isLoading
-                ? 'Loading folders...'
-                : loadError
-                  ? 'Could not load folders'
-                  : selectedDirectory?.name || 'Choose a folder'}
-            </span>
-            {selectedDirectory && (
-              <span className="max-w-[58%] truncate text-[10px] text-gray-500">
-                {selectedDirectory.path}
-              </span>
-            )}
-            <span className="shrink-0 text-[10px] text-gray-500">
-              {isOpen ? '^' : 'v'}
-            </span>
-          </button>
-
-          {isOpen && (
-            <div className="absolute left-0 right-0 top-full z-10 mt-1 overflow-hidden rounded-md border border-white/10 bg-[#11141a] shadow-2xl">
-              <div className="border-b border-white/[0.07] p-2">
-                <input
-                  value={query}
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search folders"
-                  className="h-8 w-full rounded border border-white/10 bg-[#181b21] px-2 text-xs text-white outline-none placeholder:text-gray-600 focus:border-blue-400"
-                  aria-label="Search destination folders"
-                />
-              </div>
-              <div
-                className="max-h-52 overflow-y-auto p-1"
-                role="listbox"
-                aria-label="Destination folders"
-              >
-                {filteredDirectories.length > 0 ? (
-                  filteredDirectories.map((directory) => (
-                    <button
-                      key={directory.path}
-                      type="button"
-                      role="option"
-                      aria-selected={selectedPath === directory.path}
-                      onClick={() => {
-                        setSelectedPath(directory.path)
-                        setIsOpen(false)
-                        setQuery('')
-                      }}
-                      className={`flex w-full cursor-pointer items-center gap-3 rounded px-2.5 py-2 text-left transition-colors ${
-                        selectedPath === directory.path
-                          ? 'bg-blue-500/20 text-white'
-                          : 'text-gray-300 hover:bg-white/[0.07] hover:text-white'
-                      }`}
-                    >
-                      <span className="min-w-0 flex-1 truncate text-xs font-medium">
-                        {directory.name}
-                      </span>
-                      <span className="max-w-[62%] truncate text-[10px] text-gray-500">
-                        {directory.path}
-                      </span>
-                    </button>
-                  ))
-                ) : (
-                  <p className="px-2.5 py-3 text-center text-[10px] text-gray-500">
-                    No matching folders
-                  </p>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-        {loadError && (
-          <p className="mt-2 text-[10px] leading-4 text-red-300">
-            {loadError}
-          </p>
-        )}
-        {!isLoading && !loadError && directories.length === 0 && (
-          <p className="mt-2 text-[10px] leading-4 text-gray-500">
-            No other valid folders are available in this project.
-          </p>
-        )}
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="cursor-pointer rounded bg-white/[0.07] px-3 py-1.5 text-xs text-gray-200 hover:bg-white/[0.12]"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            disabled={selectedPath === null}
-            className="cursor-pointer rounded bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-400 disabled:cursor-not-allowed disabled:bg-blue-500/30 disabled:text-white/40"
-          >
-            Move
-          </button>
-        </div>
-      </form>
-    </div>
-  )
-}
-
-function DeleteDialog({
-  entry,
-  onCancel,
-  onConfirm,
-}: {
-  entry: ProjectEntry
-  onCancel: () => void
-  onConfirm: () => void
-}) {
-  return (
-    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/45 px-4 backdrop-blur-[2px]">
-      <div className="w-[360px] max-w-full rounded-md border border-white/10 bg-[#181b21] p-4 shadow-2xl">
-        <p className="text-sm font-medium text-white">Delete {entry.name}?</p>
-        <p className="mt-1 text-xs leading-5 text-gray-400">
-          {entry.kind === 'directory'
-            ? 'This folder and everything inside it will be removed.'
-            : 'This file will be removed from the user app.'}
-        </p>
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="cursor-pointer rounded bg-white/[0.07] px-3 py-1.5 text-xs text-gray-200 hover:bg-white/[0.12]"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={onConfirm}
-            className="cursor-pointer rounded bg-red-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-400"
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function findEntry(
-  entriesByDirectory: Record<string, ProjectEntry[]>,
-  path: string
-) {
-  return Object.values(entriesByDirectory)
-    .flat()
-    .find((entry) => entry.path === path)
-}
-
-function getParentPath(path: string) {
-  const separatorIndex = path.lastIndexOf('/')
-  return separatorIndex === -1 ? '' : path.slice(0, separatorIndex)
-}
-
-function isPathWithin(path: string, parentPath: string) {
-  return path === parentPath || path.startsWith(`${parentPath}/`)
-}
-
-function replacePathPrefix(path: string, oldPrefix: string, newPrefix: string) {
-  if (!isPathWithin(path, oldPrefix)) return path
-  return `${newPrefix}${path.slice(oldPrefix.length)}`
-}
-
-function renameDirectoryCache(
-  cache: Record<string, ProjectEntry[]>,
-  oldPath: string,
-  newPath: string
-) {
-  return Object.fromEntries(
-    Object.entries(cache).map(([directoryPath, entries]) => [
-      replacePathPrefix(directoryPath, oldPath, newPath),
-      entries.map((entry) => ({
-        ...entry,
-        path: replacePathPrefix(entry.path, oldPath, newPath),
-      })),
-    ])
-  )
-}
-
-function renameOpenDirectories(
-  directories: Set<string>,
-  oldPath: string,
-  newPath: string
-) {
-  return new Set(
-    Array.from(directories, (directoryPath) =>
-      replacePathPrefix(directoryPath, oldPath, newPath)
-    )
-  )
-}
-
-function selectFileName(input: HTMLInputElement, kind: ProjectEntry['kind']) {
-  const dotIndex = kind === 'file' ? input.value.lastIndexOf('.') : -1
-  input.setSelectionRange(0, dotIndex > 0 ? dotIndex : input.value.length)
-}
-
-function getErrorMessage(error: unknown) {
-  return error instanceof Error ? error.message : 'Project file operation failed'
-}
-
-function isMissingProjectPathError(message: string) {
-  return (
-    /\bENOENT\b/i.test(message) ||
-    /no such file or directory/i.test(message) ||
-    /request failed with 404/i.test(message)
-  )
-}
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  createProjectEntry,
+  deleteProjectEntry,
+  listProjectDirectory,
+  listProjectDirectories,
+  moveProjectEntry,
+  renameProjectEntry,
+  type ProjectEntry,
+} from '../utils/projectFiles'
+
+interface ProjectExplorerProps {
+  selectedPath: string | null
+  onSelectFile: (path: string | null) => void
+}
+
+interface FileSystemChangeDetail {
+  type: 'filesystem-change'
+  path: string
+  action: 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir'
+}
+
+type CreateState = {
+  parentPath: string
+  kind: 'file' | 'directory'
+} | null
+
+const initiallyOpenDirectories = new Set(['', 'src', 'src/pages'])
+
+export default function ProjectExplorer({
+  selectedPath,
+  onSelectFile,
+}: ProjectExplorerProps) {
+  const [rootName, setRootName] = useState('Project')
+  const [entriesByDirectory, setEntriesByDirectory] = useState<
+    Record<string, ProjectEntry[]>
+  >({})
+  const [openDirectories, setOpenDirectories] = useState(
+    () => new Set(initiallyOpenDirectories)
+  )
+  const [selectedDirectory, setSelectedDirectory] = useState('')
+  const [createState, setCreateState] = useState<CreateState>(null)
+  const [renamePath, setRenamePath] = useState<string | null>(null)
+  const [moveTarget, setMoveTarget] = useState<ProjectEntry | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<ProjectEntry | null>(null)
+  const [busyPath, setBusyPath] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const mounted = useRef(true)
+
+  const pruneMissingDirectory = useCallback((directoryPath: string) => {
+    if (!directoryPath) return
+
+    setOpenDirectories(
+      (current) =>
+        new Set(
+          Array.from(current).filter(
+            (path) => !isPathWithin(path, directoryPath)
+          )
+        )
+    )
+    setEntriesByDirectory((current) =>
+      Object.fromEntries(
+        Object.entries(current)
+          .filter(([path]) => !isPathWithin(path, directoryPath))
+          .map(([path, entries]) => [
+            path,
+            entries.filter(
+              (entry) => !isPathWithin(entry.path, directoryPath)
+            ),
+          ])
+      )
+    )
+    setSelectedDirectory((current) =>
+      isPathWithin(current, directoryPath)
+        ? getParentPath(directoryPath)
+        : current
+    )
+    setError(null)
+  }, [])
+
+  const loadDirectory = useCallback(
+    async (directoryPath: string) => {
+      try {
+        const result = await listProjectDirectory(directoryPath)
+
+        if (!mounted.current) return
+        setRootName(result.rootName)
+        setEntriesByDirectory((current) => ({
+          ...current,
+          [directoryPath]: result.entries,
+        }))
+        setError(null)
+      } catch (loadError) {
+        if (!mounted.current) return
+
+        if (
+          directoryPath &&
+          isMissingProjectPathError(getErrorMessage(loadError))
+        ) {
+          pruneMissingDirectory(directoryPath)
+          return
+        }
+
+        setError(getErrorMessage(loadError))
+      }
+    },
+    [pruneMissingDirectory]
+  )
+
+  const refreshOpenDirectories = useCallback(async () => {
+    await Promise.all(
+      Array.from(openDirectories, (directoryPath) =>
+        loadDirectory(directoryPath)
+      )
+    )
+  }, [loadDirectory, openDirectories])
+
+  useEffect(() => {
+    mounted.current = true
+    void refreshOpenDirectories()
+
+    return () => {
+      mounted.current = false
+    }
+  }, [refreshOpenDirectories])
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      void refreshOpenDirectories()
+    }, 3000)
+
+    return () => window.clearInterval(interval)
+  }, [refreshOpenDirectories])
+
+  useEffect(() => {
+    const refresh = (event: Event) => {
+      const detail = (event as CustomEvent<FileSystemChangeDetail>).detail
+
+      if (
+        detail?.type === 'filesystem-change' &&
+        detail.action === 'unlinkDir'
+      ) {
+        const removedPath = detail.path.replace(/\\/g, '/')
+        pruneMissingDirectory(removedPath)
+        void loadDirectory(getParentPath(removedPath))
+        return
+      }
+
+      void refreshOpenDirectories()
+    }
+
+    window.addEventListener('visualbuild:filesystem-changed', refresh)
+    return () =>
+      window.removeEventListener('visualbuild:filesystem-changed', refresh)
+  }, [loadDirectory, pruneMissingDirectory, refreshOpenDirectories])
+
+  const selectedParentDirectory = useMemo(() => {
+    if (!selectedPath) return selectedDirectory
+    const entry = findEntry(entriesByDirectory, selectedPath)
+
+    if (entry?.kind === 'directory') return entry.path
+    return getParentPath(selectedPath)
+  }, [entriesByDirectory, selectedDirectory, selectedPath])
+
+  const toggleDirectory = (directoryPath: string) => {
+    setSelectedDirectory(directoryPath)
+    onSelectFile(null)
+    setOpenDirectories((current) => {
+      const next = new Set(current)
+
+      if (next.has(directoryPath)) {
+        next.delete(directoryPath)
+      } else {
+        next.add(directoryPath)
+        void loadDirectory(directoryPath)
+      }
+
+      return next
+    })
+  }
+
+  const startCreate = (kind: 'file' | 'directory') => {
+    setCreateState({ parentPath: selectedParentDirectory, kind })
+    setRenamePath(null)
+    setError(null)
+  }
+
+  const handleCreate = async (name: string) => {
+    if (!createState) return
+    setBusyPath(createState.parentPath || '/')
+
+    try {
+      const entry = await createProjectEntry(
+        createState.parentPath,
+        name,
+        createState.kind
+      )
+      setCreateState(null)
+      setOpenDirectories((current) =>
+        new Set(current).add(createState.parentPath)
+      )
+      await loadDirectory(createState.parentPath)
+
+      if (entry.kind === 'directory') {
+        onSelectFile(null)
+        setSelectedDirectory(entry.path)
+        setOpenDirectories((current) => new Set(current).add(entry.path))
+        await loadDirectory(entry.path)
+      } else {
+        onSelectFile(entry.path)
+      }
+    } catch (createError) {
+      setError(getErrorMessage(createError))
+    } finally {
+      setBusyPath(null)
+    }
+  }
+
+  const handleRename = async (entry: ProjectEntry, name: string) => {
+    setBusyPath(entry.path)
+
+    try {
+      const renamed = await renameProjectEntry(entry.path, name)
+      const parentPath = getParentPath(entry.path)
+      setRenamePath(null)
+      await loadDirectory(parentPath)
+
+      if (entry.kind === 'directory') {
+        setEntriesByDirectory((current) =>
+          renameDirectoryCache(current, entry.path, renamed.path)
+        )
+        setOpenDirectories((current) =>
+          renameOpenDirectories(current, entry.path, renamed.path)
+        )
+        setSelectedDirectory((current) =>
+          replacePathPrefix(current, entry.path, renamed.path)
+        )
+      }
+
+      if (selectedPath) {
+        const nextSelectedPath = replacePathPrefix(
+          selectedPath,
+          entry.path,
+          renamed.path
+        )
+
+        if (nextSelectedPath !== selectedPath) {
+          onSelectFile(nextSelectedPath)
+        }
+      }
+    } catch (renameError) {
+      setError(getErrorMessage(renameError))
+    } finally {
+      setBusyPath(null)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    const target = deleteTarget
+    setDeleteTarget(null)
+    setBusyPath(target.path)
+
+    try {
+      await deleteProjectEntry(target.path)
+      const parentPath = getParentPath(target.path)
+      await loadDirectory(parentPath)
+
+      if (selectedPath && isPathWithin(selectedPath, target.path)) {
+        onSelectFile(null)
+      }
+
+      if (isPathWithin(selectedDirectory, target.path)) {
+        setSelectedDirectory(parentPath)
+      }
+
+      setOpenDirectories((current) =>
+        new Set(
+          Array.from(current).filter(
+            (directoryPath) => !isPathWithin(directoryPath, target.path)
+          )
+        )
+      )
+      setEntriesByDirectory((current) =>
+        Object.fromEntries(
+          Object.entries(current).filter(
+            ([directoryPath]) => !isPathWithin(directoryPath, target.path)
+          )
+        )
+      )
+    } catch (deleteError) {
+      setError(getErrorMessage(deleteError))
+    } finally {
+      setBusyPath(null)
+    }
+  }
+
+  const handleMove = async (parentPath: string) => {
+    if (!moveTarget) return
+    const entry = moveTarget
+    setMoveTarget(null)
+    setBusyPath(entry.path)
+
+    try {
+      const moved = await moveProjectEntry(entry.path, parentPath)
+      const previousParentPath = getParentPath(entry.path)
+      setEntriesByDirectory((current) =>
+        renameDirectoryCache(current, entry.path, moved.path)
+      )
+      setOpenDirectories((current) =>
+        renameOpenDirectories(current, entry.path, moved.path)
+      )
+      setSelectedDirectory((current) =>
+        replacePathPrefix(current, entry.path, moved.path)
+      )
+
+      if (selectedPath) {
+        const nextSelectedPath = replacePathPrefix(
+          selectedPath,
+          entry.path,
+          moved.path
+        )
+
+        if (nextSelectedPath !== selectedPath) {
+          onSelectFile(nextSelectedPath)
+        }
+      }
+
+      await Promise.all([
+        loadDirectory(previousParentPath),
+        loadDirectory(parentPath),
+      ])
+    } catch (moveError) {
+      setError(getErrorMessage(moveError))
+    } finally {
+      setBusyPath(null)
+    }
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col text-[11px]">
+      <div className="flex shrink-0 items-center gap-1 border-b border-white/[0.05] px-2 py-1.5">
+        <ExplorerAction label="New file" onClick={() => startCreate('file')} />
+        <ExplorerAction
+          label="New folder"
+          onClick={() => startCreate('directory')}
+        />
+        <ExplorerAction
+          label="Refresh"
+          onClick={() => void refreshOpenDirectories()}
+        />
+      </div>
+
+      {createState && (
+        <NameEditor
+          label={createState.kind === 'file' ? 'New file' : 'New folder'}
+          parentPath={createState.parentPath}
+          onCancel={() => setCreateState(null)}
+          onSubmit={(name) => void handleCreate(name)}
+        />
+      )}
+
+      {error && (
+        <div className="mx-2 mt-2 rounded border border-red-400/20 bg-red-500/10 px-2 py-1.5 text-[10px] leading-4 text-red-300">
+          {error}
+        </div>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-auto px-1.5 py-1.5">
+        <ProjectTreeRow
+          name={rootName}
+          path=""
+          kind="directory"
+          depth={0}
+          isOpen={openDirectories.has('')}
+          isSelected={!selectedPath && selectedDirectory === ''}
+          isBusy={busyPath === '/'}
+          onSelect={() => toggleDirectory('')}
+        />
+        {openDirectories.has('') &&
+          <ProjectEntries
+            directoryPath=""
+            depth={1}
+            entriesByDirectory={entriesByDirectory}
+            openDirectories={openDirectories}
+            selectedPath={selectedPath}
+            selectedDirectory={selectedDirectory}
+            renamePath={renamePath}
+            busyPath={busyPath}
+            onToggleDirectory={toggleDirectory}
+            onSelectFile={(path) => {
+              setSelectedDirectory(getParentPath(path))
+              onSelectFile(path)
+            }}
+            onStartRename={(path) => {
+              setCreateState(null)
+              setRenamePath(path)
+            }}
+            onRename={handleRename}
+            onCancelRename={() => setRenamePath(null)}
+            onMove={setMoveTarget}
+            onDelete={setDeleteTarget}
+          />}
+      </div>
+
+      {deleteTarget && (
+        <DeleteDialog
+          entry={deleteTarget}
+          onCancel={() => setDeleteTarget(null)}
+          onConfirm={() => void handleDelete()}
+        />
+      )}
+      {moveTarget && (
+        <MoveDialog
+          entry={moveTarget}
+          initialParentPath={getParentPath(moveTarget.path)}
+          onCancel={() => setMoveTarget(null)}
+          onConfirm={(parentPath) => void handleMove(parentPath)}
+        />
+      )}
+    </div>
+  )
+}
+
+function ProjectEntries({
+  directoryPath,
+  depth,
+  entriesByDirectory,
+  openDirectories,
+  selectedPath,
+  selectedDirectory,
+  renamePath,
+  busyPath,
+  onToggleDirectory,
+  onSelectFile,
+  onStartRename,
+  onRename,
+  onCancelRename,
+  onMove,
+  onDelete,
+}: {
+  directoryPath: string
+  depth: number
+  entriesByDirectory: Record<string, ProjectEntry[]>
+  openDirectories: Set<string>
+  selectedPath: string | null
+  selectedDirectory: string
+  renamePath: string | null
+  busyPath: string | null
+  onToggleDirectory: (path: string) => void
+  onSelectFile: (path: string) => void
+  onStartRename: (path: string) => void
+  onRename: (entry: ProjectEntry, name: string) => Promise<void>
+  onCancelRename: () => void
+  onMove: (entry: ProjectEntry) => void
+  onDelete: (entry: ProjectEntry) => void
+}): React.ReactNode {
+  const entries = entriesByDirectory[directoryPath]
+
+  if (!entries) {
+    return (
+      <div
+        className="py-1 text-[10px] text-gray-600"
+        style={{ paddingLeft: `${depth * 0.8 + 1.25}rem` }}
+      >
+        Loading...
+      </div>
+    )
+  }
+
+  if (entries.length === 0) {
+    return (
+      <div
+        className="py-1 text-[10px] text-gray-600"
+        style={{ paddingLeft: `${depth * 0.8 + 1.25}rem` }}
+      >
+        Empty folder
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {entries.map((entry) => {
+        const isDirectory = entry.kind === 'directory'
+        const isOpen = isDirectory && openDirectories.has(entry.path)
+
+        return (
+          <div key={entry.path}>
+            {renamePath === entry.path ? (
+              <InlineRename
+                entry={entry}
+                depth={depth}
+                onCancel={onCancelRename}
+                onSubmit={(name) => void onRename(entry, name)}
+              />
+            ) : (
+              <ProjectTreeRow
+                name={entry.name}
+                path={entry.path}
+                kind={entry.kind}
+                depth={depth}
+                isOpen={isOpen}
+                isSelected={
+                  isDirectory
+                    ? !selectedPath && selectedDirectory === entry.path
+                    : selectedPath === entry.path
+                }
+                isBusy={busyPath === entry.path}
+                onSelect={() =>
+                  isDirectory
+                    ? onToggleDirectory(entry.path)
+                    : onSelectFile(entry.path)
+                }
+                onRename={() => onStartRename(entry.path)}
+                onMove={() => onMove(entry)}
+                onDelete={() => onDelete(entry)}
+              />
+            )}
+            {isOpen && (
+              <ProjectEntries
+                directoryPath={entry.path}
+                depth={depth + 1}
+                entriesByDirectory={entriesByDirectory}
+                openDirectories={openDirectories}
+                selectedPath={selectedPath}
+                selectedDirectory={selectedDirectory}
+                renamePath={renamePath}
+                busyPath={busyPath}
+                onToggleDirectory={onToggleDirectory}
+                onSelectFile={onSelectFile}
+                onStartRename={onStartRename}
+                onRename={onRename}
+                onCancelRename={onCancelRename}
+                onMove={onMove}
+                onDelete={onDelete}
+              />
+            )}
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+function ProjectTreeRow({
+  name,
+  path,
+  kind,
+  depth,
+  isOpen,
+  isSelected,
+  isBusy,
+  onSelect,
+  onRename,
+  onMove,
+  onDelete,
+}: {
+  name: string
+  path: string
+  kind: ProjectEntry['kind']
+  depth: number
+  isOpen: boolean
+  isSelected: boolean
+  isBusy: boolean
+  onSelect: () => void
+  onRename?: () => void
+  onMove?: () => void
+  onDelete?: () => void
+}) {
+  const isDirectory = kind === 'directory'
+
+  return (
+    <div
+      className={`group flex min-h-7 items-center rounded transition-colors ${
+        isSelected
+          ? 'bg-accent/30 text-white'
+          : 'text-gray-400 hover:bg-white/[0.05] hover:text-gray-100'
+      }`}
+      style={{ paddingLeft: `${depth * 0.8}rem` }}
+      title={path || name}
+    >
+      <button
+        type="button"
+        onClick={onSelect}
+        className="flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 py-1 pr-1 text-left"
+      >
+        <span className="flex w-3 shrink-0 items-center justify-center text-[9px] text-gray-500">
+          {isDirectory ? (isOpen ? 'v' : '>') : kind === 'symlink' ? '@' : ''}
+        </span>
+        <span className="truncate">{name}</span>
+        {isBusy && <span className="text-[9px] text-blue-300">...</span>}
+      </button>
+      {(onRename || onMove || onDelete) && (
+        <div className="mr-1 hidden shrink-0 items-center gap-0.5 group-hover:flex group-focus-within:flex">
+          {onRename && (
+            <RowAction label="Rename" text="R" onClick={onRename} />
+          )}
+          {onMove && (
+            <RowAction label="Move" text="M" onClick={onMove} />
+          )}
+          {onDelete && (
+            <RowAction label="Delete" text="x" danger onClick={onDelete} />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ExplorerAction({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="min-w-0 flex-1 cursor-pointer rounded bg-white/[0.04] px-1.5 py-1 text-[9px] text-gray-400 transition-colors hover:bg-white/[0.09] hover:text-white"
+      title={label}
+    >
+      {label}
+    </button>
+  )
+}
+
+function RowAction({
+  label,
+  text,
+  danger = false,
+  onClick,
+}: {
+  label: string
+  text: string
+  danger?: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation()
+        onClick()
+      }}
+      className={`flex h-5 w-5 cursor-pointer items-center justify-center rounded text-[9px] transition-colors ${
+        danger
+          ? 'text-gray-500 hover:bg-red-500 hover:text-white'
+          : 'text-gray-500 hover:bg-white/[0.1] hover:text-white'
+      }`}
+      aria-label={`${label} ${text}`}
+      title={label}
+    >
+      {text}
+    </button>
+  )
+}
+
+function NameEditor({
+  label,
+  parentPath,
+  onCancel,
+  onSubmit,
+}: {
+  label: string
+  parentPath: string
+  onCancel: () => void
+  onSubmit: (name: string) => void
+}) {
+  const [name, setName] = useState('')
+
+  return (
+    <form
+      className="shrink-0 border-b border-white/[0.05] bg-black/10 px-2 py-2"
+      onSubmit={(event) => {
+        event.preventDefault()
+        if (name.trim()) onSubmit(name.trim())
+      }}
+    >
+      <p className="mb-1 truncate text-[9px] uppercase tracking-wide text-gray-500">
+        {label} in {parentPath || '/'}
+      </p>
+      <div className="flex gap-1">
+        <input
+          autoFocus
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') onCancel()
+          }}
+          className="h-7 min-w-0 flex-1 rounded border border-blue-400/70 bg-[#11141a] px-2 text-[11px] text-white outline-none"
+          aria-label={label}
+        />
+        <button
+          type="submit"
+          className="cursor-pointer rounded bg-blue-500 px-2 text-[10px] font-medium text-white hover:bg-blue-400"
+        >
+          Add
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="cursor-pointer rounded bg-white/[0.06] px-2 text-[10px] text-gray-300 hover:bg-white/[0.1]"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
+
+function InlineRename({
+  entry,
+  depth,
+  onCancel,
+  onSubmit,
+}: {
+  entry: ProjectEntry
+  depth: number
+  onCancel: () => void
+  onSubmit: (name: string) => void
+}) {
+  const [name, setName] = useState(entry.name)
+
+  return (
+    <form
+      className="flex min-h-7 items-center gap-1 pr-1"
+      style={{ paddingLeft: `${depth * 0.8 + 0.75}rem` }}
+      onSubmit={(event) => {
+        event.preventDefault()
+        if (name.trim() && name.trim() !== entry.name) onSubmit(name.trim())
+        else onCancel()
+      }}
+    >
+      <input
+        autoFocus
+        value={name}
+        onChange={(event) => setName(event.target.value)}
+        onBlur={() => {
+          const nextName = name.trim()
+          if (nextName && nextName !== entry.name) onSubmit(nextName)
+          else onCancel()
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') onCancel()
+        }}
+        onFocus={(event) => selectFileName(event.currentTarget, entry.kind)}
+        className="h-6 min-w-0 flex-1 rounded border border-blue-400 bg-[#11141a] px-1.5 text-[11px] text-white outline-none"
+        aria-label={`Rename ${entry.name}`}
+      />
+    </form>
+  )
+}
+
+function MoveDialog({
+  entry,
+  initialParentPath,
+  onCancel,
+  onConfirm,
+}: {
+  entry: ProjectEntry
+  initialParentPath: string
+  onCancel: () => void
+  onConfirm: (parentPath: string) => void
+}) {
+  const [directories, setDirectories] = useState<ProjectEntry[]>([])
+  const [selectedPath, setSelectedPath] = useState<string | null>(null)
+  const [query, setQuery] = useState('')
+  const [isOpen, setIsOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let active = true
+
+    void listProjectDirectories()
+      .then((projectDirectories) => {
+        if (!active) return
+
+        setDirectories(
+          projectDirectories.filter((directory) => {
+            if (directory.path === initialParentPath) return false
+            if (entry.kind !== 'directory') return true
+
+            return (
+              directory.path !== entry.path &&
+              !directory.path.startsWith(`${entry.path}/`)
+            )
+          })
+        )
+        setLoadError(null)
+      })
+      .catch((error) => {
+        if (!active) return
+        setLoadError(getErrorMessage(error))
+      })
+      .finally(() => {
+        if (active) setIsLoading(false)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [entry.kind, entry.path, initialParentPath])
+
+  const selectedDirectory = directories.find(
+    (directory) => directory.path === selectedPath
+  )
+  const normalizedQuery = query.trim().toLowerCase()
+  const filteredDirectories = directories.filter(
+    (directory) =>
+      !normalizedQuery ||
+      directory.name.toLowerCase().includes(normalizedQuery) ||
+      directory.path.toLowerCase().includes(normalizedQuery)
+  )
+
+  return (
+    <div data-vb-editor-chrome className="fixed inset-0 z-[110] flex items-center justify-center bg-black/45 px-4 backdrop-blur-[2px]">
+      <form
+        className="w-[400px] max-w-full rounded-md border border-white/10 bg-[#181b21] p-4 shadow-2xl"
+        onSubmit={(event) => {
+          event.preventDefault()
+          if (selectedPath !== null) onConfirm(selectedPath)
+        }}
+        onKeyDown={(event) => {
+          if (event.key !== 'Escape') return
+
+          if (isOpen) {
+            setIsOpen(false)
+          } else {
+            onCancel()
+          }
+        }}
+      >
+        <p className="text-sm font-medium text-white">Move {entry.name}</p>
+        <div className="relative mt-3">
+          <p className="text-[10px] uppercase tracking-wide text-gray-500">
+            Destination folder
+          </p>
+          <button
+            autoFocus
+            type="button"
+            onClick={() => {
+              if (!isLoading && !loadError && directories.length > 0) {
+                setIsOpen((current) => !current)
+              }
+            }}
+            className="mt-1 flex h-9 w-full cursor-pointer items-center gap-3 rounded border border-white/10 bg-[#11141a] px-2.5 text-left text-xs text-white outline-none transition-colors hover:border-white/20 focus:border-blue-400 disabled:cursor-not-allowed disabled:text-gray-500"
+            aria-label="Choose destination folder"
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            disabled={isLoading || Boolean(loadError) || directories.length === 0}
+          >
+            <span className="min-w-0 flex-1 truncate font-medium">
+              {isLoading
+                ? 'Loading folders...'
+                : loadError
+                  ? 'Could not load folders'
+                  : selectedDirectory?.name || 'Choose a folder'}
+            </span>
+            {selectedDirectory && (
+              <span className="max-w-[58%] truncate text-[10px] text-gray-500">
+                {selectedDirectory.path}
+              </span>
+            )}
+            <span className="shrink-0 text-[10px] text-gray-500">
+              {isOpen ? '^' : 'v'}
+            </span>
+          </button>
+
+          {isOpen && (
+            <div className="absolute left-0 right-0 top-full z-10 mt-1 overflow-hidden rounded-md border border-white/10 bg-[#11141a] shadow-2xl">
+              <div className="border-b border-white/[0.07] p-2">
+                <input
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Search folders"
+                  className="h-8 w-full rounded border border-white/10 bg-[#181b21] px-2 text-xs text-white outline-none placeholder:text-gray-600 focus:border-blue-400"
+                  aria-label="Search destination folders"
+                />
+              </div>
+              <div
+                className="max-h-52 overflow-y-auto p-1"
+                role="listbox"
+                aria-label="Destination folders"
+              >
+                {filteredDirectories.length > 0 ? (
+                  filteredDirectories.map((directory) => (
+                    <button
+                      key={directory.path}
+                      type="button"
+                      role="option"
+                      aria-selected={selectedPath === directory.path}
+                      onClick={() => {
+                        setSelectedPath(directory.path)
+                        setIsOpen(false)
+                        setQuery('')
+                      }}
+                      className={`flex w-full cursor-pointer items-center gap-3 rounded px-2.5 py-2 text-left transition-colors ${
+                        selectedPath === directory.path
+                          ? 'bg-blue-500/20 text-white'
+                          : 'text-gray-300 hover:bg-white/[0.07] hover:text-white'
+                      }`}
+                    >
+                      <span className="min-w-0 flex-1 truncate text-xs font-medium">
+                        {directory.name}
+                      </span>
+                      <span className="max-w-[62%] truncate text-[10px] text-gray-500">
+                        {directory.path}
+                      </span>
+                    </button>
+                  ))
+                ) : (
+                  <p className="px-2.5 py-3 text-center text-[10px] text-gray-500">
+                    No matching folders
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        {loadError && (
+          <p className="mt-2 text-[10px] leading-4 text-red-300">
+            {loadError}
+          </p>
+        )}
+        {!isLoading && !loadError && directories.length === 0 && (
+          <p className="mt-2 text-[10px] leading-4 text-gray-500">
+            No other valid folders are available in this project.
+          </p>
+        )}
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="cursor-pointer rounded bg-white/[0.07] px-3 py-1.5 text-xs text-gray-200 hover:bg-white/[0.12]"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={selectedPath === null}
+            className="cursor-pointer rounded bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-400 disabled:cursor-not-allowed disabled:bg-blue-500/30 disabled:text-white/40"
+          >
+            Move
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function DeleteDialog({
+  entry,
+  onCancel,
+  onConfirm,
+}: {
+  entry: ProjectEntry
+  onCancel: () => void
+  onConfirm: () => void
+}) {
+  return (
+    <div data-vb-editor-chrome className="fixed inset-0 z-[110] flex items-center justify-center bg-black/45 px-4 backdrop-blur-[2px]">
+      <div className="w-[360px] max-w-full rounded-md border border-white/10 bg-[#181b21] p-4 shadow-2xl">
+        <p className="text-sm font-medium text-white">Delete {entry.name}?</p>
+        <p className="mt-1 text-xs leading-5 text-gray-400">
+          {entry.kind === 'directory'
+            ? 'This folder and everything inside it will be removed.'
+            : 'This file will be removed from the user app.'}
+        </p>
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="cursor-pointer rounded bg-white/[0.07] px-3 py-1.5 text-xs text-gray-200 hover:bg-white/[0.12]"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className="cursor-pointer rounded bg-red-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-400"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function findEntry(
+  entriesByDirectory: Record<string, ProjectEntry[]>,
+  path: string
+) {
+  return Object.values(entriesByDirectory)
+    .flat()
+    .find((entry) => entry.path === path)
+}
+
+function getParentPath(path: string) {
+  const separatorIndex = path.lastIndexOf('/')
+  return separatorIndex === -1 ? '' : path.slice(0, separatorIndex)
+}
+
+function isPathWithin(path: string, parentPath: string) {
+  return path === parentPath || path.startsWith(`${parentPath}/`)
+}
+
+function replacePathPrefix(path: string, oldPrefix: string, newPrefix: string) {
+  if (!isPathWithin(path, oldPrefix)) return path
+  return `${newPrefix}${path.slice(oldPrefix.length)}`
+}
+
+function renameDirectoryCache(
+  cache: Record<string, ProjectEntry[]>,
+  oldPath: string,
+  newPath: string
+) {
+  return Object.fromEntries(
+    Object.entries(cache).map(([directoryPath, entries]) => [
+      replacePathPrefix(directoryPath, oldPath, newPath),
+      entries.map((entry) => ({
+        ...entry,
+        path: replacePathPrefix(entry.path, oldPath, newPath),
+      })),
+    ])
+  )
+}
+
+function renameOpenDirectories(
+  directories: Set<string>,
+  oldPath: string,
+  newPath: string
+) {
+  return new Set(
+    Array.from(directories, (directoryPath) =>
+      replacePathPrefix(directoryPath, oldPath, newPath)
+    )
+  )
+}
+
+function selectFileName(input: HTMLInputElement, kind: ProjectEntry['kind']) {
+  const dotIndex = kind === 'file' ? input.value.lastIndexOf('.') : -1
+  input.setSelectionRange(0, dotIndex > 0 ? dotIndex : input.value.length)
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : 'Project file operation failed'
+}
+
+function isMissingProjectPathError(message: string) {
+  return (
+    /\bENOENT\b/i.test(message) ||
+    /no such file or directory/i.test(message) ||
+    /request failed with 404/i.test(message)
+  )
+}