@@ -1,13 +1,95 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { AlertCircle, ChevronDown, ChevronRight, Loader2, RefreshCw, Search } from 'lucide-react';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 
+import type { FileNode } from '@/types/protocol';
 import type { FC } from 'react';
 
 import { FileIcon, FolderIcon } from '@/components/files';
-import { useFileTree, useFileTreeItem } from '@/hooks/use-file-tree';
+import { useFileTree } from '@/hooks/use-file-tree';
 import { cn } from '@/lib/utils';
 import { useFileStore } from '@/stores/file-store';
 
+// ═══════════════════════════════════════════════════════════════
+// Types
+// ═══════════════════════════════════════════════════════════════
+
+/** Flattened tree item for virtualization */
+interface FlatTreeItem {
+  /** Full path to the file/folder */
+  path: string;
+  /** Depth in tree (0 = root level) */
+  depth: number;
+  /** The node data */
+  node: FileNode;
+}
+
+// ═══════════════════════════════════════════════════════════════
+// Constants
+// ═══════════════════════════════════════════════════════════════
+
+/** Height of each row in pixels */
+const ROW_HEIGHT = 24;
+
+/** Overscan - render extra rows above/below viewport for smooth scrolling */
+const OVERSCAN = 10;
+
+// ═══════════════════════════════════════════════════════════════
+// Tree Flattening (Iterative to avoid stack overflow on deep trees)
+// ═══════════════════════════════════════════════════════════════
+
+/**
+ * Flatten the tree into a list for virtualization.
+ * Uses iterative approach to handle deeply nested structures.
+ * Only includes visible items (expanded folders show their children).
+ */
+function flattenTree(
+  rootChildren: readonly FileNode[],
+  treeNodes: Record<string, FileNode[]>,
+  expandedFolders: Set<string>
+): FlatTreeItem[] {
+  const result: FlatTreeItem[] = [];
+
+  // Stack holds: [nodes to process, current depth, index in nodes]
+  interface StackFrame {
+    nodes: readonly FileNode[];
+    depth: number;
+    index: number;
+  }
+
+  const stack: StackFrame[] = [{ nodes: rootChildren, depth: 0, index: 0 }];
+
+  while (stack.length > 0) {
+    const frame = stack[stack.length - 1];
+    if (!frame) break; // Type guard (shouldn't happen but satisfies TS)
+
+    if (frame.index >= frame.nodes.length) {
+      // Done with this level, pop stack
+      stack.pop();
+      continue;
+    }
+
+    const node = frame.nodes[frame.index];
+    if (!node) {
+      frame.index++;
+      continue;
+    }
+    frame.index++;
+
+    result.push({ path: node.path, depth: frame.depth, node });
+
+    // If expanded directory with children, push children onto stack
+    if (node.isDirectory && expandedFolders.has(node.path)) {
+      const children = treeNodes[node.path];
+      if (children && children.length > 0) {
+        stack.push({ nodes: children, depth: frame.depth + 1, index: 0 });
+      }
+    }
+  }
+
+  return result;
+}
+
 // ═══════════════════════════════════════════════════════════════
 // File Explorer Component
 // ═══════════════════════════════════════════════════════════════
@@ -28,8 +110,29 @@ export const FileExplorer: FC<FileExplorerProps> = ({ collapsed = false }) => {
     retryFolder,
   } = useFileTree();
 
+  // Get tree state for flattening - these selectors are stable (Immer)
+  const treeNodes = useFileStore((s) => s.treeNodes);
+  const expandedFolders = useFileStore((s) => s.expandedFolders);
   const selectTreePath = useFileStore((s) => s.selectTreePath);
 
+  // Flatten tree for virtualization
+  // Recalculates when tree structure or expansion state changes
+  const flatItems = useMemo(
+    () => flattenTree(rootChildren, treeNodes, expandedFolders),
+    [rootChildren, treeNodes, expandedFolders]
+  );
+
+  // Virtualizer setup
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: flatItems.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+    // Maintain scroll position when items change
+    getItemKey: (index) => flatItems[index]?.path ?? index,
+  });
+
   const handleOpenQuickSearch = useCallback((): void => {
     window.dispatchEvent(new CustomEvent('openCommandPalette'));
   }, []);
@@ -38,6 +141,8 @@ export const FileExplorer: FC<FileExplorerProps> = ({ collapsed = false }) => {
     return null;
   }
 
+  const virtualItems = virtualizer.getVirtualItems();
+
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
@@ -70,7 +175,7 @@ export const FileExplorer: FC<FileExplorerProps> = ({ collapsed = false }) => {
       </div>
 
       {/* Tree content */}
-      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+      <div ref={parentRef} className="flex-1 overflow-y-auto overflow-x-hidden">
         {/* Root error state */}
         {rootError ? (
           <div className="flex flex-col items-center justify-center py-8 px-4 text-center">
@@ -95,18 +200,31 @@ export const FileExplorer: FC<FileExplorerProps> = ({ collapsed = false }) => {
             <span className="text-sm">No files found</span>
           </div>
         ) : (
-          <div className="py-1">
-            {rootChildren.map((node) => (
-              <FileTreeItem
-                key={node.path}
-                path={node.path}
-                depth={0}
-                onToggle={toggleFolder}
-                onOpen={openFile}
-                onSelect={selectTreePath}
-                onRetry={retryFolder}
-              />
-            ))}
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualItems.map((virtualRow) => {
+              const item = flatItems[virtualRow.index];
+              if (!item) return null;
+              return (
+                <FileTreeRow
+                  key={item.path}
+                  path={item.path}
+                  depth={item.depth}
+                  node={item.node}
+                  top={virtualRow.start}
+                  height={virtualRow.size}
+                  onToggle={toggleFolder}
+                  onOpen={openFile}
+                  onSelect={selectTreePath}
+                  onRetry={retryFolder}
+                />
+              );
+            })}
           </div>
         )}
       </div>
@@ -115,44 +233,44 @@ export const FileExplorer: FC<FileExplorerProps> = ({ collapsed = false }) => {
 };
 
 // ═══════════════════════════════════════════════════════════════
-// File Tree Item Component (Memoized for Performance)
+// File Tree Row Component (Virtualized, Memoized)
 // ═══════════════════════════════════════════════════════════════
 
-interface FileTreeItemProps {
+interface FileTreeRowProps {
   readonly path: string;
   readonly depth: number;
+  readonly node: FileNode;
+  readonly top: number;
+  readonly height: number;
   readonly onToggle: (path: string) => void;
   readonly onOpen: (path: string) => void;
   readonly onSelect: (path: string | null) => void;
   readonly onRetry: (path: string) => void;
 }
 
 /**
- * Memoized tree item that subscribes to ONLY its own state.
+ * Single virtualized row in the file tree.
  *
- * This prevents cascading re-renders:
- * - Parent expanding doesn't re-render siblings
- * - Sibling selection doesn't re-render other siblings
- * - Each item only re-renders when ITS state changes
+ * Uses Zustand selectors for minimal re-renders:
+ * - Only re-renders when THIS row's state changes
+ * - Not affected by other rows expanding/selecting
  */
-const FileTreeItem: FC<FileTreeItemProps> = memo(
-  ({ path, depth, onToggle, onOpen, onSelect, onRetry }) => {
-    // Subscribe to only this item's state (prevents cascading re-renders)
-    const { node, isExpanded, isLoading, isSelected, error, children } = useFileTreeItem(path);
+const FileTreeRow: FC<FileTreeRowProps> = memo(
+  ({ path, depth, node, top, height, onToggle, onOpen, onSelect, onRetry }) => {
+    // Subscribe to only this row's state
+    const isExpanded = useFileStore((s) => s.expandedFolders.has(path));
+    const isLoading = useFileStore((s) => s.loadingPaths.has(path));
+    const isSelected = useFileStore((s) => s.selectedTreePath === path);
+    const error = useFileStore((s) => s.errorPaths.get(path) ?? null);
 
     const handleClick = useCallback((): void => {
-      if (!node) return;
-
       if (node.isDirectory) {
-        // Toggle expansion (hook auto-fetches children if needed)
         onToggle(path);
       } else {
-        // Select the file in explorer
         onSelect(path);
-        // Open file in the viewer (hook handles content fetch + LSP)
         onOpen(path);
       }
-    }, [node, path, onToggle, onSelect, onOpen]);
+    }, [node.isDirectory, path, onToggle, onSelect, onOpen]);
 
     const handleRetry = useCallback(
       (e: React.MouseEvent): void => {
@@ -162,86 +280,74 @@ const FileTreeItem: FC<FileTreeItemProps> = memo(
       [path, onRetry]
     );
 
-    // Node not found (shouldn't happen, but be defensive)
-    if (!node) {
-      return null;
-    }
-
     const indentPx = depth * 12 + 8;
 
     return (
-      <>
-        <button
-          className={cn(
-            'flex items-center w-full h-6 text-sm hover:bg-accent/50 transition-colors',
-            isSelected && 'bg-accent text-accent-foreground'
-          )}
-          style={{ paddingLeft: indentPx }}
-          onClick={handleClick}
-          title={path}
-        >
-          {/* Expand/collapse chevron for directories */}
-          <span className="w-4 h-4 flex items-center justify-center shrink-0">
-            {node.isDirectory ? (
-              isLoading ? (
-                <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
-              ) : error ? (
-                <AlertCircle className="h-3 w-3 text-destructive" />
-              ) : isExpanded ? (
-                <ChevronDown className="h-3 w-3 text-muted-foreground" />
-              ) : (
-                <ChevronRight className="h-3 w-3 text-muted-foreground" />
-              )
-            ) : null}
-          </span>
-
-          {/* Icon */}
-          <span className="w-4 h-4 flex items-center justify-center shrink-0 mr-1">
-            {node.isDirectory ? (
-              <FolderIcon folderName={node.name} isOpen={isExpanded} className="h-4 w-4" />
+      <button
+        className={cn(
+          'flex items-center w-full text-sm hover:bg-accent/50 transition-colors',
+          isSelected && 'bg-accent text-accent-foreground'
+        )}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height,
+          transform: `translateY(${String(top)}px)`,
+          paddingLeft: indentPx,
+        }}
+        onClick={handleClick}
+        title={path}
+      >
+        {/* Expand/collapse chevron for directories */}
+        <span className="w-4 h-4 flex items-center justify-center shrink-0">
+          {node.isDirectory ? (
+            isLoading ? (
+              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+            ) : error ? (
+              <AlertCircle className="h-3 w-3 text-destructive" />
+            ) : isExpanded ? (
+              <ChevronDown className="h-3 w-3 text-muted-foreground" />
             ) : (
-              <FileIcon fileName={node.name} className="h-4 w-4" />
-            )}
-          </span>
+              <ChevronRight className="h-3 w-3 text-muted-foreground" />
+            )
+          ) : null}
+        </span>
 
-          {/* Name */}
-          <span className="truncate text-left flex-1">{node.name}</span>
+        {/* Icon */}
+        <span className="w-4 h-4 flex items-center justify-center shrink-0 mr-1">
+          {node.isDirectory ? (
+            <FolderIcon folderName={node.name} isOpen={isExpanded} className="h-4 w-4" />
+          ) : (
+            <FileIcon fileName={node.name} className="h-4 w-4" />
+          )}
+        </span>
 
-          {/* Error retry button */}
-          {error ? (
-            <span
-              className="text-xs text-destructive hover:underline px-1"
-              onClick={handleRetry}
-              role="button"
-              tabIndex={0}
-            >
-              retry
-            </span>
-          ) : null}
-        </button>
-
-        {/* Children (if directory is expanded and loaded) */}
-        {node.isDirectory && isExpanded && !error && children.length > 0 ? (
-          <div>
-            {children.map((child) => (
-              <FileTreeItem
-                key={child.path}
-                path={child.path}
-                depth={depth + 1}
-                onToggle={onToggle}
-                onOpen={onOpen}
-                onSelect={onSelect}
-                onRetry={onRetry}
-              />
-            ))}
-          </div>
+        {/* Name */}
+        <span className="truncate text-left flex-1">{node.name}</span>
+
+        {/* Error retry button */}
+        {error ? (
+          <span
+            className="text-xs text-destructive hover:underline px-1"
+            onClick={handleRetry}
+            role="button"
+            tabIndex={0}
+          >
+            retry
+          </span>
         ) : null}
-      </>
+      </button>
     );
   },
-  // Custom comparison - only re-render if path or depth changes
-  // State changes are handled by the hook's selectors
-  (prevProps, nextProps) => prevProps.path === nextProps.path && prevProps.depth === nextProps.depth
+  // Custom comparison - re-render if position, identity, or node name changes
+  (prevProps, nextProps) =>
+    prevProps.path === nextProps.path &&
+    prevProps.depth === nextProps.depth &&
+    prevProps.node.name === nextProps.node.name &&
+    prevProps.top === nextProps.top &&
+    prevProps.height === nextProps.height
 );
 
-FileTreeItem.displayName = 'FileTreeItem';
+FileTreeRow.displayName = 'FileTreeRow';