@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/editor/EditorFileTree.tsx

@@ -0,0 +1,903 @@
+/**
+ * Editor file tree — virtualized with @tanstack/react-virtual.
+ *
+ * Renders project files with file-type icons, sensitive-file lock icons,
+ * directory expand/collapse, context menu, inline file creation, and drag & drop.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { Button } from '@renderer/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@renderer/components/ui/dialog';
+import { useStore } from '@renderer/store';
+import { sortTreeNodes } from '@renderer/utils/fileTreeBuilder';
+import {
+  getBasename,
+  isPathPrefix,
+  joinPath,
+  lastSeparatorIndex,
+  splitPath,
+} from '@shared/utils/platformPath';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ChevronDown, ChevronRight, Folder, FolderOpen, Lock } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { EditorContextMenu } from './EditorContextMenu';
+import { FileIcon } from './FileIcon';
+import { GitStatusBadge } from './GitStatusBadge';
+import { NewFileDialog } from './NewFileDialog';
+
+import type { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
+import type { TreeNode } from '@renderer/utils/fileTreeBuilder';
+import type { FileTreeEntry, GitFileStatusType } from '@shared/types/editor';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface EditorFileTreeProps {
+  selectedFilePath: string | null;
+  onFileSelect: (filePath: string) => void;
+  /** Trigger "Create Task" with a file mention from context menu */
+  onCreateTask?: (filePath: string) => void;
+  /** Trigger "Write Teammate" with a file mention from context menu */
+  onSendMessage?: (filePath: string) => void;
+}
+
+interface NewItemState {
+  parentDir: string;
+  type: 'file' | 'directory';
+}
+
+/** Flat item for virtualization */
+interface FlatTreeItem {
+  node: TreeNode<FileTreeEntry>;
+  depth: number;
+  isExpanded: boolean;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const ITEM_HEIGHT = 28;
+const INDENT_PX = 12;
+const MAX_DEPTH = 12;
+const AUTO_EXPAND_DELAY_MS = 500;
+
+// =============================================================================
+// Component
+// =============================================================================
+
+// Render counter for debugging — tracks how often the tree re-renders
+let fileTreeRenderCount = 0;
+
+export const EditorFileTree = ({
+  selectedFilePath,
+  onFileSelect,
+  onCreateTask,
+  onSendMessage,
+}: EditorFileTreeProps): React.ReactElement => {
+  fileTreeRenderCount++;
+  if (fileTreeRenderCount % 5 === 0) {
+    console.debug(`[perf] EditorFileTree render #${fileTreeRenderCount}`);
+  }
+  // Data selectors — grouped with useShallow to prevent unnecessary re-renders
+  const { fileTree, expandedDirs, loading, error, gitFiles, projectPath } = useStore(
+    useShallow((s) => ({
+      fileTree: s.editorFileTree,
+      expandedDirs: s.editorExpandedDirs,
+      loading: s.editorFileTreeLoading,
+      error: s.editorFileTreeError,
+      gitFiles: s.editorGitFiles,
+      projectPath: s.editorProjectPath,
+    }))
+  );
+
+  // Actions — stable references in Zustand, no grouping needed
+  const expandDirectory = useStore((s) => s.expandDirectory);
+  const collapseDirectory = useStore((s) => s.collapseDirectory);
+  const createFileInTree = useStore((s) => s.createFileInTree);
+  const createDirInTree = useStore((s) => s.createDirInTree);
+  const deleteFileFromTree = useStore((s) => s.deleteFileFromTree);
+  const moveFileInTree = useStore((s) => s.moveFileInTree);
+  const renameFileInTree = useStore((s) => s.renameFileInTree);
+  const openFile = useStore((s) => s.openFile);
+
+  const [newItemState, setNewItemState] = useState<NewItemState | null>(null);
+  const [renamingPath, setRenamingPath] = useState<string | null>(null);
+  const [deleteConfirmPath, setDeleteConfirmPath] = useState<string | null>(null);
+  const [draggedItem, setDraggedItem] = useState<FlatTreeItem | null>(null);
+  const [dropTargetPath, setDropTargetPath] = useState<string | null>(null);
+  const autoExpandTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Defer DnD initialization — mount tree without drag/drop first, enable after idle
+  const [dndReady, setDndReady] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      requestAnimationFrame(() => setDndReady(true));
+    });
+    return () => cancelAnimationFrame(id);
+  }, []);
+
+  // Cleanup auto-expand timer on unmount
+  useEffect(() => {
+    return () => {
+      if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current);
+    };
+  }, []);
+
+  // DnD sensors — 5px distance to prevent accidental drags
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // Convert hierarchical FileTreeEntry[] → TreeNode[] (respects entry.type)
+  const treeNodes = useMemo(() => {
+    if (!fileTree) return [];
+    const t0 = performance.now();
+    const nodes = sortTreeNodes(convertEntriesToNodes(fileTree));
+    const ms = performance.now() - t0;
+    if (ms > 2) console.debug(`[perf] treeNodes: ${ms.toFixed(1)}ms, nodes=${nodes.length}`);
+    return nodes;
+  }, [fileTree]);
+
+  // Flatten tree into visible items list for virtualization
+  // expandedDirs is keyed by absolute path, and node.fullPath = entry.path (absolute)
+  const flatItems = useMemo(() => {
+    const t0 = performance.now();
+    const items: FlatTreeItem[] = [];
+    flattenVisible(treeNodes, expandedDirs, items, 0);
+    const ms = performance.now() - t0;
+    if (ms > 2) console.debug(`[perf] flatItems: ${ms.toFixed(1)}ms, items=${items.length}`);
+    return items;
+  }, [treeNodes, expandedDirs]);
+
+  // Lookup: fullPath → FlatTreeItem (for drag start)
+  const flatItemsByPath = useMemo(() => {
+    const map = new Map<string, FlatTreeItem>();
+    for (const item of flatItems) {
+      map.set(item.node.fullPath, item);
+    }
+    return map;
+  }, [flatItems]);
+
+  // Compute insertion index for inline new-item input
+  const newItemInsert = useMemo(() => {
+    if (!newItemState) return null;
+    const { parentDir } = newItemState;
+
+    const parentIdx = flatItems.findIndex((fi) => fi.node.fullPath === parentDir);
+
+    if (parentIdx === -1) {
+      // parentDir is the project root (not a node in flatItems) — insert at top
+      return { index: 0, depth: 0 };
+    }
+
+    // Insert right after the parent directory node (top of its children)
+    return { index: parentIdx + 1, depth: flatItems[parentIdx].depth + 1 };
+  }, [newItemState, flatItems]);
+
+  // Virtual scrolling — reduced overscan during initial mount, increase during drag
+  const virtualizer = useVirtualizer({
+    count: flatItems.length + (newItemInsert ? 1 : 0),
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: !dndReady ? 3 : draggedItem ? 20 : 10,
+  });
+
+  // Scroll to file when selectedFilePath changes (e.g. from revealFileInEditor)
+  useEffect(() => {
+    if (!selectedFilePath) return;
+    const idx = flatItems.findIndex((fi) => fi.node.fullPath === selectedFilePath);
+    if (idx >= 0) {
+      virtualizer.scrollToIndex(idx, { align: 'center' });
+    }
+  }, [selectedFilePath, flatItems, virtualizer]);
+
+  // Git status lookup: absolute path → status type
+  const gitStatusMap = useMemo(() => {
+    const t0 = performance.now();
+    const map = new Map<string, GitFileStatusType>();
+    if (!gitFiles?.length || !projectPath) return map;
+    for (const file of gitFiles) {
+      const absPath = joinPath(projectPath, ...splitPath(file.path));
+      map.set(absPath, file.status);
+    }
+    const ms = performance.now() - t0;
+    if (ms > 2) console.debug(`[perf] gitStatusMap: ${ms.toFixed(1)}ms, files=${gitFiles.length}`);
+    return map;
+  }, [gitFiles, projectPath]);
+
+  // Active node path for selection highlight (fullPath = absolute path)
+  const activeNodePath = selectedFilePath;
+
+  const handleNodeClick = useCallback(
+    (node: TreeNode<FileTreeEntry>) => {
+      if (!node.data) return;
+      if (node.data.isSensitive) return;
+      if (node.isFile) {
+        onFileSelect(node.data.path);
+      } else {
+        // fullPath = absolute path = entry.path
+        if (expandedDirs[node.fullPath]) {
+          collapseDirectory(node.fullPath);
+        } else {
+          void expandDirectory(node.fullPath);
+        }
+      }
+    },
+    [onFileSelect, expandedDirs, expandDirectory, collapseDirectory]
+  );
+
+  // Context menu handlers — expand parent directory so the input appears inline
+  const handleNewFile = useCallback(
+    (parentDir: string) => {
+      if (parentDir !== projectPath && !expandedDirs[parentDir]) {
+        void expandDirectory(parentDir);
+      }
+      setNewItemState({ parentDir, type: 'file' });
+    },
+    [projectPath, expandedDirs, expandDirectory]
+  );
+
+  const handleNewFolder = useCallback(
+    (parentDir: string) => {
+      if (parentDir !== projectPath && !expandedDirs[parentDir]) {
+        void expandDirectory(parentDir);
+      }
+      setNewItemState({ parentDir, type: 'directory' });
+    },
+    [projectPath, expandedDirs, expandDirectory]
+  );
+
+  const handleDelete = useCallback((path: string) => {
+    setDeleteConfirmPath(path);
+  }, []);
+
+  const handleConfirmDelete = useCallback(async () => {
+    if (!deleteConfirmPath) return;
+    await deleteFileFromTree(deleteConfirmPath);
+    setDeleteConfirmPath(null);
+  }, [deleteConfirmPath, deleteFileFromTree]);
+
+  const handleCancelDelete = useCallback(() => {
+    setDeleteConfirmPath(null);
+  }, []);
+
+  const handleRename = useCallback((path: string) => {
+    setRenamingPath(path);
+  }, []);
+
+  const handleRenameSubmit = useCallback(
+    async (newName: string) => {
+      if (!renamingPath) return;
+      await renameFileInTree(renamingPath, newName);
+      setRenamingPath(null);
+    },
+    [renamingPath, renameFileInTree]
+  );
+
+  const handleRenameCancel = useCallback(() => {
+    setRenamingPath(null);
+  }, []);
+
+  const handleNewItemSubmit = useCallback(
+    async (name: string) => {
+      if (!newItemState) return;
+      if (newItemState.type === 'file') {
+        const filePath = await createFileInTree(newItemState.parentDir, name);
+        if (filePath) openFile(filePath);
+      } else {
+        await createDirInTree(newItemState.parentDir, name);
+      }
+      setNewItemState(null);
+    },
+    [newItemState, createFileInTree, createDirInTree, openFile]
+  );
+
+  const handleNewItemCancel = useCallback(() => {
+    setNewItemState(null);
+  }, []);
+
+  // ─── Drag & Drop handlers ──────────────────────────────────────────────────
+
+  const clearAutoExpandTimer = useCallback(() => {
+    if (autoExpandTimerRef.current) {
+      clearTimeout(autoExpandTimerRef.current);
+      autoExpandTimerRef.current = null;
+    }
+  }, []);
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const id = String(event.active.id);
+      const item = flatItemsByPath.get(id);
+      if (item) setDraggedItem(item);
+    },
+    [flatItemsByPath]
+  );
+
+  const handleDragOver = useCallback(
+    (event: DragOverEvent) => {
+      const { over } = event;
+      if (!over || !draggedItem) {
+        setDropTargetPath(null);
+        clearAutoExpandTimer();
+        return;
+      }
+
+      const overId = String(over.id);
+      let targetDir: string | null = null;
+
+      if (overId === 'root-drop-zone') {
+        targetDir = projectPath;
+      } else if (overId.startsWith('drop:')) {
+        // Directory drop target
+        targetDir = overId.slice(5);
+      } else {
+        // File — drop into its parent directory
+        const item = flatItemsByPath.get(overId);
+        if (item) {
+          const p = item.node.fullPath;
+          targetDir = p.substring(0, lastSeparatorIndex(p));
+        }
+      }
+
+      if (targetDir !== dropTargetPath) {
+        setDropTargetPath(targetDir);
+        clearAutoExpandTimer();
+
+        // Auto-expand collapsed folders after 500ms hover
+        if (targetDir && targetDir !== projectPath && !expandedDirs[targetDir]) {
+          autoExpandTimerRef.current = setTimeout(() => {
+            void expandDirectory(targetDir);
+          }, AUTO_EXPAND_DELAY_MS);
+        }
+      }
+    },
+    [
+      draggedItem,
+      dropTargetPath,
+      projectPath,
+      flatItemsByPath,
+      expandedDirs,
+      expandDirectory,
+      clearAutoExpandTimer,
+    ]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      clearAutoExpandTimer();
+      const sourcePath = draggedItem?.node.fullPath;
+
+      if (!sourcePath || !dropTargetPath || !event.over) {
+        setDraggedItem(null);
+        setDropTargetPath(null);
+        return;
+      }
+
+      const destDir = dropTargetPath;
+      const sourceParent = sourcePath.substring(0, lastSeparatorIndex(sourcePath));
+
+      // Validation: same folder = no-op
+      if (sourceParent === destDir) {
+        setDraggedItem(null);
+        setDropTargetPath(null);
+        return;
+      }
+
+      // Validation: parent → child prevention
+      if (isPathPrefix(sourcePath, destDir)) {
+        setDraggedItem(null);
+        setDropTargetPath(null);
+        return;
+      }
+
+      // Validation: sensitive files
+      if (draggedItem?.node.data?.isSensitive) {
+        setDraggedItem(null);
+        setDropTargetPath(null);
+        return;
+      }
+
+      void moveFileInTree(sourcePath, destDir);
+
+      setDraggedItem(null);
+      setDropTargetPath(null);
+    },
+    [draggedItem, dropTargetPath, moveFileInTree, clearAutoExpandTimer]
+  );
+
+  const handleDragCancel = useCallback(() => {
+    clearAutoExpandTimer();
+    setDraggedItem(null);
+    setDropTargetPath(null);
+  }, [clearAutoExpandTimer]);
+
+  // ─── Early returns ─────────────────────────────────────────────────────────
+
+  if (error) {
+    return <div className="p-3 text-xs text-red-400">文件加载失败：{error}</div>;
+  }
+
+  if (loading && !fileTree) {
+    return <div className="p-3 text-xs text-text-muted">正在加载文件...</div>;
+  }
+
+  if (treeNodes.length === 0) {
+    return <div className="p-3 text-xs text-text-muted">未找到文件</div>;
+  }
+
+  return (
+    <EditorContextMenu
+      projectPath={projectPath}
+      onNewFile={handleNewFile}
+      onNewFolder={handleNewFolder}
+      onDelete={handleDelete}
+      onRename={handleRename}
+      onCreateTask={onCreateTask}
+      onSendMessage={onSendMessage}
+    >
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+        autoScroll={{ threshold: { x: 0, y: 0.15 } }}
+      >
+        <RootDropZone
+          ref={scrollRef}
+          projectPath={projectPath}
+          isDropTarget={dropTargetPath === projectPath}
+        >
+          <div
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualItem) => {
+              const { index } = virtualItem;
+
+              // Render inline new-item input at the correct tree position
+              if (index === newItemInsert?.index) {
+                return (
+                  <div
+                    key="__new-item-input__"
+                    style={{
+                      position: 'absolute',
+                      top: `${virtualItem.start}px`,
+                      left: 0,
+                      width: '100%',
+                      height: `${virtualItem.size}px`,
+                      paddingLeft: `${Math.min(newItemInsert.depth, MAX_DEPTH) * INDENT_PX}px`,
+                    }}
+                  >
+                    <NewFileDialog
+                      type={newItemState!.type}
+                      parentDir={newItemState!.parentDir}
+                      onSubmit={handleNewItemSubmit}
+                      onCancel={handleNewItemCancel}
+                    />
+                  </div>
+                );
+              }
+
+              // Adjust index for items after the insertion point
+              const flatIdx = newItemInsert && index > newItemInsert.index ? index - 1 : index;
+              const item = flatItems[flatIdx];
+
+              return (
+                <div
+                  key={item.node.fullPath}
+                  style={{
+                    position: 'absolute',
+                    top: `${virtualItem.start}px`,
+                    left: 0,
+                    width: '100%',
+                    height: `${virtualItem.size}px`,
+                  }}
+                >
+                  <DraggableTreeItem
+                    item={item}
+                    activeNodePath={activeNodePath}
+                    gitStatus={gitStatusMap.get(item.node.fullPath)}
+                    dropTargetPath={dropTargetPath}
+                    isDragActive={!!draggedItem}
+                    onClick={handleNodeClick}
+                    isRenaming={renamingPath === item.node.fullPath}
+                    onRenameSubmit={handleRenameSubmit}
+                    onRenameCancel={handleRenameCancel}
+                  />
+                </div>
+              );
+            })}
+          </div>
+          {/* Spacer at bottom — drop here to move to project root */}
+          {draggedItem && (
+            <div className="h-16 w-full shrink-0" aria-label="拖到此处可移到项目根目录" />
+          )}
+        </RootDropZone>
+        <DragOverlay dropAnimation={null}>
+          {draggedItem && <DragOverlayFileItem item={draggedItem} />}
+        </DragOverlay>
+      </DndContext>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={!!deleteConfirmPath} onOpenChange={(open) => !open && handleCancelDelete()}>
+        <DialogContent className="w-96 max-w-96">
+          <DialogHeader>
+            <DialogTitle className="text-sm">移到废纸篓</DialogTitle>
+            <DialogDescription>
+              将 &ldquo;{deleteConfirmPath ? getBasename(deleteConfirmPath) : ''}&rdquo;
+              移到废纸篓？
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" size="sm" onClick={handleCancelDelete}>
+              取消
+            </Button>
+            <Button variant="destructive" size="sm" onClick={() => void handleConfirmDelete()}>
+              移到废纸篓
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </EditorContextMenu>
+  );
+};
+
+// =============================================================================
+// Root drop zone (drop files to project root)
+// =============================================================================
+
+const RootDropZone = React.forwardRef<
+  HTMLDivElement,
+  { projectPath: string | null; isDropTarget: boolean; children: React.ReactNode }
+>(({ projectPath, isDropTarget, children }, ref) => {
+  const { setNodeRef } = useDroppable({
+    id: 'root-drop-zone',
+    data: { isRoot: true, path: projectPath },
+  });
+
+  // Combine forwarded ref with droppable ref
+  const combinedRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      setNodeRef(el);
+      if (typeof ref === 'function') ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref, setNodeRef]
+  );
+
+  return (
+    <div
+      ref={combinedRef}
+      className={`scrollbar-thin h-full overflow-y-auto transition-colors ${
+        isDropTarget ? 'bg-blue-400/5 ring-1 ring-inset ring-blue-400/30' : ''
+      }`}
+      role="tree"
+    >
+      {children}
+    </div>
+  );
+});
+
+RootDropZone.displayName = 'RootDropZone';
+
+// =============================================================================
+// Draggable + droppable tree item
+// =============================================================================
+
+interface DraggableTreeItemProps {
+  item: FlatTreeItem;
+  activeNodePath: string | null;
+  gitStatus?: GitFileStatusType;
+  dropTargetPath: string | null;
+  isDragActive: boolean;
+  onClick: (node: TreeNode<FileTreeEntry>) => void;
+  isRenaming?: boolean;
+  onRenameSubmit?: (newName: string) => void;
+  onRenameCancel?: () => void;
+}
+
+/* eslint-disable react/jsx-props-no-spreading -- dnd-kit requires prop spreading for drag attributes, listeners, and data attributes */
+const DraggableTreeItem = React.memo(
+  ({
+    item,
+    activeNodePath,
+    gitStatus,
+    dropTargetPath,
+    isDragActive,
+    onClick,
+    isRenaming,
+    onRenameSubmit,
+    onRenameCancel,
+  }: DraggableTreeItemProps): React.ReactElement => {
+    const { node, depth, isExpanded } = item;
+    const isSelected = activeNodePath === node.fullPath;
+    const visualDepth = Math.min(depth, MAX_DEPTH);
+    const isSensitive = node.data?.isSensitive;
+
+    // Draggable setup
+    const {
+      attributes,
+      listeners,
+      setNodeRef: setDragRef,
+      isDragging,
+    } = useDraggable({
+      id: node.fullPath,
+      data: { node, depth },
+      disabled: !!isSensitive,
+    });
+
+    // Droppable setup — only directories are drop targets
+    const { setNodeRef: setDropRef } = useDroppable({
+      id: 'drop:' + node.fullPath,
+      data: { node },
+      disabled: node.isFile,
+    });
+
+    // Combine refs
+    const ref = useCallback(
+      (el: HTMLDivElement | null) => {
+        setDragRef(el);
+        if (!node.isFile) setDropRef(el);
+      },
+      [setDragRef, setDropRef, node.isFile]
+    );
+
+    // Visual: highlight drop target directory and its visible children
+    const isDropTarget = !node.isFile && dropTargetPath === node.fullPath;
+    const isInsideDropTarget =
+      dropTargetPath != null &&
+      dropTargetPath !== node.fullPath &&
+      isPathPrefix(dropTargetPath, node.fullPath);
+
+    const dataAttrs: Record<string, string> = {};
+    if (node.data) {
+      dataAttrs['data-editor-path'] = node.data.path;
+      dataAttrs['data-editor-type'] = node.data.type;
+      if (node.data.isSensitive) dataAttrs['data-editor-sensitive'] = 'true';
+    }
+
+    const handleClick = (): void => {
+      if (!isDragActive) onClick(node);
+    };
+    const handleKeyDown = (e: React.KeyboardEvent): void => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleClick();
+      }
+    };
+
+    // Render icon
+    let icon: React.ReactNode;
+    if (node.data?.isSensitive) {
+      icon = <Lock className="size-3.5 shrink-0 text-yellow-500" />;
+    } else if (node.isFile) {
+      icon = <FileIcon fileName={node.name} className="size-3.5" />;
+    } else if (isExpanded) {
+      icon = <FolderOpen className="size-3.5 shrink-0 text-text-muted" />;
+    } else {
+      icon = <Folder className="size-3.5 shrink-0 text-text-muted" />;
+    }
+
+    return (
+      <div
+        ref={ref}
+        {...attributes}
+        {...listeners}
+        role="treeitem"
+        aria-selected={node.isFile ? isSelected : undefined}
+        aria-expanded={!node.isFile ? isExpanded : undefined}
+        className={`flex h-full cursor-pointer select-none items-center gap-1 truncate px-2 text-xs transition-colors hover:bg-surface-raised ${
+          isSelected ? 'bg-surface-raised text-text' : 'text-text-secondary'
+        } ${isDragging ? 'opacity-30' : ''} ${
+          isDropTarget ? 'rounded bg-blue-400/10 ring-2 ring-blue-400/50' : ''
+        } ${isInsideDropTarget && !isDropTarget ? 'border-l-2 border-l-blue-400/40 bg-blue-400/5' : ''}`}
+        style={{ paddingLeft: `${visualDepth * INDENT_PX + 8}px` }}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        title={node.data?.path ?? node.fullPath}
+        {...dataAttrs}
+      >
+        {!node.isFile &&
+          (isExpanded ? (
+            <ChevronDown className="size-3 shrink-0 text-text-muted" />
+          ) : (
+            <ChevronRight className="size-3 shrink-0 text-text-muted" />
+          ))}
+        {icon}
+        {isRenaming ? (
+          <InlineRenameInput
+            initialName={node.name}
+            onSubmit={onRenameSubmit!}
+            onCancel={onRenameCancel!}
+          />
+        ) : (
+          <span className="truncate">{node.name}</span>
+        )}
+        {!isRenaming && gitStatus && <GitStatusBadge status={gitStatus} />}
+      </div>
+    );
+  }
+);
+
+DraggableTreeItem.displayName = 'DraggableTreeItem';
+/* eslint-enable react/jsx-props-no-spreading -- re-enable after DraggableTreeItem component */
+
+// =============================================================================
+// Drag overlay ghost
+// =============================================================================
+
+const DragOverlayFileItem = ({ item }: { item: FlatTreeItem }): React.ReactElement => {
+  const { node } = item;
+
+  let icon: React.ReactNode;
+  if (node.isFile) {
+    icon = <FileIcon fileName={node.name} className="size-3.5" />;
+  } else {
+    icon = <FolderOpen className="size-3.5 text-text-muted" />;
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 rounded border border-border-emphasis bg-surface-overlay px-3 py-1 text-xs text-text shadow-lg">
+      {icon}
+      <span className="truncate">{node.name}</span>
+    </div>
+  );
+};
+
+// =============================================================================
+// Inline rename input
+// =============================================================================
+
+const InlineRenameInput = ({
+  initialName,
+  onSubmit,
+  onCancel,
+}: {
+  initialName: string;
+  onSubmit: (newName: string) => void;
+  onCancel: () => void;
+}): React.ReactElement => {
+  const [value, setValue] = useState(initialName);
+  const submitted = useRef(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus + select on mount (delayed to survive Radix/DnD focus interference)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const input = inputRef.current;
+      if (!input) return;
+      input.focus();
+      const dotIdx = initialName.lastIndexOf('.');
+      if (dotIdx > 0) {
+        input.setSelectionRange(0, dotIdx);
+      } else {
+        input.select();
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [initialName]);
+
+  // Click-outside → submit (replaces unreliable onBlur)
+  useEffect(() => {
+    const handlePointerDown = (e: PointerEvent): void => {
+      if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
+        doSubmit();
+      }
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener('pointerdown', handlePointerDown, true);
+    }, 150);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- doSubmit reads value via ref pattern
+  }, []);
+
+  const doSubmit = (): void => {
+    if (submitted.current) return;
+    submitted.current = true;
+    const trimmed = inputRef.current?.value.trim() ?? '';
+    if (trimmed && trimmed !== initialName) {
+      onSubmit(trimmed);
+    } else {
+      onCancel();
+    }
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          doSubmit();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          onCancel();
+        }
+        e.stopPropagation();
+      }}
+      onBlur={() => requestAnimationFrame(() => inputRef.current?.focus())}
+      onClick={(e) => e.stopPropagation()}
+      className="min-w-0 flex-1 rounded border border-blue-400/50 bg-surface px-1 py-0 text-xs text-text outline-none focus:ring-1 focus:ring-blue-400/50"
+    />
+  );
+};
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+/** Convert hierarchical FileTreeEntry[] into TreeNode[] using entry.type for classification. */
+function convertEntriesToNodes(entries: unknown): TreeNode<FileTreeEntry>[] {
+  if (!Array.isArray(entries)) return [];
+
+  return entries.flatMap((rawEntry) => {
+    if (!rawEntry || typeof rawEntry !== 'object') return [];
+    const entry = rawEntry as Partial<FileTreeEntry>;
+    if (
+      typeof entry.name !== 'string' ||
+      typeof entry.path !== 'string' ||
+      (entry.type !== 'file' && entry.type !== 'directory')
+    ) {
+      return [];
+    }
+
+    const normalizedEntry: FileTreeEntry = {
+      ...entry,
+      children: Array.isArray(entry.children) ? entry.children : undefined,
+    } as FileTreeEntry;
+
+    return [{
+      name: normalizedEntry.name,
+      fullPath: normalizedEntry.path, // absolute path — matches expandedDirs keys
+      isFile: normalizedEntry.type === 'file',
+      data: normalizedEntry,
+      children: convertEntriesToNodes(normalizedEntry.children),
+    }];
+  });
+}
+
+/** Flatten tree into visible items list (DFS, respecting expanded state) */
+function flattenVisible(
+  nodes: TreeNode<FileTreeEntry>[],
+  expandedPaths: Record<string, boolean>,
+  result: FlatTreeItem[],
+  depth: number
+): void {
+  for (const node of nodes) {
+    const isExpanded = !node.isFile && expandedPaths[node.fullPath] === true;
+    result.push({ node, depth, isExpanded });
+    if (isExpanded && node.children.length > 0) {
+      flattenVisible(node.children, expandedPaths, result, depth + 1);
+    }
+  }
+}