jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/KanbanBoard.tsx

@@ -1,9 +1,8 @@
-'use client';
 
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo, memo } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import type { WorkItem, InFlightItem, KanbanGroup } from '@/lib/db';
 import type { UndoAction } from '@/lib/undoStack';
-import type { Session } from '../contexts/ClaudeSessionContext';
 import { DragProvider } from './DragContext';
 import { DraggableCard } from './DraggableCard';
 import { DropZone } from './DropZone';
@@ -42,9 +41,10 @@ interface KanbanColumnProps {
   count: number;
   onAdd?: () => void;
   addDisabled?: boolean;
+  scrollRef?: React.RefObject<HTMLDivElement | null>;
 }
 
-function KanbanColumn({ title, children, count, onAdd, addDisabled }: KanbanColumnProps) {
+function KanbanColumn({ title, children, count, onAdd, addDisabled, scrollRef }: KanbanColumnProps) {
   const testId = title.toLowerCase().replace(/\s+/g, '-') + '-column';
   return (
     <div className="flex-1 max-w-[600px] flex flex-col min-h-0" data-testid={testId}>
@@ -78,7 +78,7 @@ function KanbanColumn({ title, children, count, onAdd, addDisabled }: KanbanColu
             </span>
           </div>
         </div>
-        <div className="overflow-y-auto flex-1 min-h-0 px-1 -mx-1">
+        <div ref={scrollRef} className="overflow-y-auto overflow-x-hidden flex-1 min-h-0 px-3 -mx-3" style={{ contain: 'paint' }}>
           {children}
         </div>
       </div>
@@ -145,19 +145,20 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
     const itemMap = new Map(backlogItems.map(item => [item.id, item]));
     const visualOrder = cardPositions.map(pos => itemMap.get(pos.id)!).filter(Boolean);
 
-    // Calculate proper midpoint display_order between surrounding items
+    // Calculate proper midpoint display_order between surrounding items.
+    // Fallback uses id * INCREMENT to match the sort comparator and give proper gaps.
     let newOrder: number;
     if (visualOrder.length === 0) {
       newOrder = DISPLAY_ORDER_INCREMENT;
     } else if (insertIndex === 0) {
-      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id;
+      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id * DISPLAY_ORDER_INCREMENT;
       newOrder = firstOrder - DISPLAY_ORDER_INCREMENT;
     } else if (insertIndex >= visualOrder.length) {
-      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id;
+      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id * DISPLAY_ORDER_INCREMENT;
       newOrder = lastOrder + DISPLAY_ORDER_INCREMENT;
     } else {
-      const before = visualOrder[insertIndex - 1].display_order ?? visualOrder[insertIndex - 1].id;
-      const after = visualOrder[insertIndex].display_order ?? visualOrder[insertIndex].id;
+      const before = visualOrder[insertIndex - 1].display_order ?? visualOrder[insertIndex - 1].id * DISPLAY_ORDER_INCREMENT;
+      const after = visualOrder[insertIndex].display_order ?? visualOrder[insertIndex].id * DISPLAY_ORDER_INCREMENT;
       newOrder = Math.floor((before + after) / 2);
     }
 
@@ -175,8 +176,8 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
       onReorder={handleBacklogReorder}
       allowReorder={true}
       className="rounded-lg p-3 -m-3 min-h-[100px]"
-      highlightClassName="ring-2 ring-amber-400 bg-amber-100/50 dark:bg-amber-900/30"
-      reorderHighlightClassName="ring-2 ring-purple-400 bg-purple-100/50 dark:bg-purple-900/30"
+      highlightClassName="ring-2 ring-[#819D9F] bg-[#E8EEEF]/50 dark:bg-[#819D9F]/20"
+      reorderHighlightClassName="ring-2 ring-[#E3D985] bg-[#F9F7E8]/50 dark:bg-[#E3D985]/20"
       data-testid="backlog-drop-zone"
     >
       {children}
@@ -184,6 +185,153 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
   );
 }
 
+// Virtualized list of EpicGroups within a column's scroll container.
+// Each EpicGroup is a virtual row — off-screen groups are not rendered at all,
+// saving DOM nodes and mount/unmount overhead.
+type VirtualRow =
+  | { type: 'group'; key: string; group: KanbanGroup }
+  | { type: 'showMore' }
+  | { type: 'empty' };
+
+interface VirtualizedEpicListProps {
+  entries: [string, KanbanGroup][];
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  scrollMargin?: number;
+  hasMore: boolean;
+  onShowMore: () => void;
+  emptyMessage?: string;
+  // EpicGroup props pass-through
+  inFlightByEpic?: Map<number, InFlightItem[]>;
+  isDraggable?: boolean;
+  onTitleSave?: (id: number, newTitle: string) => Promise<void>;
+  onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
+  onReject?: (id: number, reason: string) => Promise<void>;
+  onRestart?: (id: number) => void;
+  onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
+  onOrderChange?: (id: number, newOrder: number) => Promise<void>;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
+  activeSessionIds?: Set<string>;
+  onOpenSession?: (id: string) => void;
+  onCloseSession?: (id: string) => void;
+  onError?: (message: string) => void;
+  usageAllowed?: boolean;
+  animatingItemId?: number | null;
+  onAnimationComplete?: () => void;
+}
+
+const VirtualizedEpicList = memo(function VirtualizedEpicList({
+  entries,
+  scrollRef,
+  scrollMargin = 0,
+  hasMore,
+  onShowMore,
+  emptyMessage,
+  inFlightByEpic,
+  isDraggable,
+  onTitleSave,
+  onStatusChange,
+  onReject,
+  onRestart,
+  onEpicAssign,
+  onOrderChange,
+  onTriggerClaude,
+  activeSessionIds,
+  onOpenSession,
+  onCloseSession,
+  onError,
+  usageAllowed,
+  animatingItemId,
+  onAnimationComplete,
+}: VirtualizedEpicListProps) {
+  const rows = useMemo<VirtualRow[]>(() => {
+    const r: VirtualRow[] = [];
+    for (const [key, group] of entries) {
+      r.push({ type: 'group', key, group });
+    }
+    if (hasMore) r.push({ type: 'showMore' });
+    if (entries.length === 0 && emptyMessage) r.push({ type: 'empty' });
+    return r;
+  }, [entries, hasMore, emptyMessage]);
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: (index) => {
+      const row = rows[index];
+      if (!row || row.type === 'showMore' || row.type === 'empty') return 44;
+      // Estimate: header (~36px) + cards * ~95px per card + group padding
+      const isStandalone = !row.group.epicTitle && row.group.items.length === 1;
+      return isStandalone
+        ? 82 + 8   // card height + spacing
+        : 36 + row.group.items.length * 95 + 24; // header + cards + spacing
+    },
+    scrollMargin,
+    overscan: 3,
+  });
+
+  if (rows.length === 0) return null;
+
+  return (
+    <div style={{ height: virtualizer.getTotalSize(), position: 'relative', width: '100%' }}>
+      {virtualizer.getVirtualItems().map((virtualItem) => {
+        const row = rows[virtualItem.index];
+        // Bottom padding replaces EpicGroup's mb-* (margin is invisible with absolute positioning)
+        const isStandalone = row.type === 'group' && !row.group.epicTitle && row.group.items.length === 1;
+        const rowPaddingBottom = row.type === 'group' ? (isStandalone ? 8 : 24) : 0;
+        return (
+          <div
+            key={virtualItem.key}
+            data-index={virtualItem.index}
+            ref={virtualizer.measureElement}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              transform: `translateY(${virtualItem.start - scrollMargin}px)`,
+              paddingBottom: rowPaddingBottom,
+            }}
+          >
+            {row.type === 'group' ? (
+              <EpicGroup
+                epicId={row.group.epicId}
+                epicTitle={row.group.epicTitle}
+                items={row.group.items}
+                isInFlight={row.group.epicId ? inFlightByEpic?.has(row.group.epicId) : false}
+                inFlightItems={row.group.epicId ? inFlightByEpic?.get(row.group.epicId) : undefined}
+                isDraggable={isDraggable}
+                onTitleSave={onTitleSave}
+                onStatusChange={onStatusChange}
+                onReject={onReject}
+                onRestart={onRestart}
+                onEpicAssign={onEpicAssign}
+                onOrderChange={onOrderChange}
+                onTriggerClaude={onTriggerClaude}
+                activeSessionIds={activeSessionIds}
+                onOpenSession={onOpenSession}
+                onCloseSession={onCloseSession}
+                onError={onError}
+                usageAllowed={usageAllowed}
+                animatingItemId={animatingItemId}
+                onAnimationComplete={onAnimationComplete}
+              />
+            ) : row.type === 'showMore' ? (
+              <button
+                onClick={onShowMore}
+                className="w-full mt-3 py-2 text-sm text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50 rounded-lg transition-colors duration-200 ease-out"
+              >
+                Show more
+              </button>
+            ) : (
+              <p className="text-base text-zinc-500 text-center py-4">{emptyMessage}</p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
 interface KanbanBoardProps {
   inFlight: InFlightItem[];
   backlog: Map<string, KanbanGroup>;
@@ -198,7 +346,7 @@ interface KanbanBoardProps {
   // Multi-session support
   onOpenSession?: (id: string) => void;
   onCloseSession?: (id: string) => void;
-  activeSessions?: Map<string, Session>;
+  activeSessionIds?: Set<string>;
   // Undo/redo support
   onUndo?: () => Promise<UndoAction | null>;
   onRedo?: () => Promise<UndoAction | null>;
@@ -206,6 +354,8 @@ interface KanbanBoardProps {
   canRedo?: boolean;
   // Error handler for drag-drop operations
   onError?: (message: string) => void;
+  // Pre-built status map from data-bridge (avoids O(N) rebuild per render)
+  itemStatusMap?: Map<number, string>;
   // Add to backlog
   onAddToBacklog?: () => void;
   // Usage limits
@@ -215,10 +365,28 @@ interface KanbanBoardProps {
   onExternalAnimationComplete?: () => void;
 }
 
-export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onReject, onRestart, onOrderChange, onEpicAssign, onTriggerClaude, onOpenSession, onCloseSession, activeSessions, onUndo, onRedo, canUndo, canRedo, onError, onAddToBacklog, usageAllowed = true, externalAnimatingItemId, onExternalAnimationComplete }: KanbanBoardProps) {
+export const KanbanBoard = memo(function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onReject, onRestart, onOrderChange, onEpicAssign, onTriggerClaude, onOpenSession, onCloseSession, activeSessionIds, onUndo, onRedo, canUndo, canRedo, onError, itemStatusMap: externalStatusMap, onAddToBacklog, usageAllowed = true, externalAnimatingItemId, onExternalAnimationComplete }: KanbanBoardProps) {
   const backlogCount = inFlight.length + Array.from(backlog.values()).reduce((sum, g) => sum + g.items.length, 0);
   const doneCount = Array.from(done.values()).reduce((sum, g) => sum + g.items.length, 0);
 
+  // Scroll container refs for virtualized columns
+  const backlogScrollRef = useRef<HTMLDivElement>(null);
+  const doneScrollRef = useRef<HTMLDivElement>(null);
+
+  // Measure non-virtualized content above the backlog virtualizer (In Flight + divider)
+  // so the virtualizer knows the correct scroll offset
+  const preBacklogRef = useRef<HTMLDivElement>(null);
+  const [backlogScrollMargin, setBacklogScrollMargin] = useState(0);
+  useEffect(() => {
+    const el = preBacklogRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      setBacklogScrollMargin(entries[0]?.borderBoxSize?.[0]?.blockSize ?? el.offsetHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   // Lazy loading state for backlog and done columns
   const [showAllBacklog, setShowAllBacklog] = useState(false);
   const [showAllDone, setShowAllDone] = useState(false);
@@ -226,8 +394,14 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
   const backlogEntries = useMemo(() => Array.from(backlog.entries()), [backlog]);
   const doneEntries = useMemo(() => Array.from(done.entries()), [done]);
   const backlogLimit = Math.max(0, BACKLOG_VISIBLE_LIMIT - inFlight.length);
-  const { visible: visibleBacklog, hasMore: hasMoreBacklog } = getVisibleEntries(backlogEntries, backlogLimit, showAllBacklog);
-  const { visible: visibleDone, hasMore: hasMoreDone } = getVisibleEntries(doneEntries, DONE_VISIBLE_LIMIT, showAllDone);
+  const { visible: visibleBacklog, hasMore: hasMoreBacklog } = useMemo(
+    () => getVisibleEntries(backlogEntries, backlogLimit, showAllBacklog),
+    [backlogEntries, backlogLimit, showAllBacklog]
+  );
+  const { visible: visibleDone, hasMore: hasMoreDone } = useMemo(
+    () => getVisibleEntries(doneEntries, DONE_VISIBLE_LIMIT, showAllDone),
+    [doneEntries, showAllDone]
+  );
 
   // Keyboard shortcuts for undo/redo (Cmd+Z / Cmd+Shift+Z)
   useEffect(() => {
@@ -262,18 +436,21 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
   }, [onUndo, onRedo, canUndo, canRedo]);
 
   // Build a map of epic IDs to their in-flight items
-  const inFlightByEpic = new Map<number, InFlightItem[]>();
-  for (const item of inFlight) {
-    const epicId = item.parent_id || item.epic_id;
-    if (epicId) {
-      const existing = inFlightByEpic.get(epicId);
-      if (existing) {
-        existing.push(item);
-      } else {
-        inFlightByEpic.set(epicId, [item]);
+  const inFlightByEpic = useMemo(() => {
+    const map = new Map<number, InFlightItem[]>();
+    for (const item of inFlight) {
+      const epicId = item.parent_id || item.epic_id;
+      if (epicId) {
+        const existing = map.get(epicId);
+        if (existing) {
+          existing.push(item);
+        } else {
+          map.set(epicId, [item]);
+        }
       }
     }
-  }
+    return map;
+  }, [inFlight]);
 
   // Board-level animation state - tracks which item is playing the completion animation
   const [internalAnimatingItemId, setInternalAnimatingItemId] = useState<number | null>(null);
@@ -282,24 +459,8 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
   // Merge internal (UI-driven) and external (CLI/DB-driven) animation triggers
   const animatingItemId = internalAnimatingItemId ?? externalAnimatingItemId ?? null;
 
-  // Build a map of all item IDs to their current status for checking if transitioning to done
-  const itemStatusMap = useMemo(() => {
-    const map = new Map<number, string>();
-    for (const item of inFlight) {
-      map.set(item.id, item.status);
-    }
-    for (const group of backlog.values()) {
-      for (const item of group.items) {
-        map.set(item.id, item.status);
-      }
-    }
-    for (const group of done.values()) {
-      for (const item of group.items) {
-        map.set(item.id, item.status);
-      }
-    }
-    return map;
-  }, [inFlight, backlog, done]);
+  // Use pre-built statusMap from data-bridge when available (avoids O(N) rebuild)
+  const itemStatusMap = externalStatusMap ?? new Map<number, string>();
 
   // Wrapper for onStatusChange that intercepts "done" transitions to play animation first
   const handleStatusChangeWithAnimation = useCallback(async (id: number, newStatus: string) => {
@@ -309,6 +470,12 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
 
     // If transitioning to done from non-done status, play animation first in backlog/in-flight
     if (newStatus === 'done' && currentStatus !== 'done') {
+      // Flush any existing pending change before replacing (rapid acceptance race)
+      if (pendingStatusChangeRef.current) {
+        const { id: prevId, status: prevStatus } = pendingStatusChangeRef.current;
+        pendingStatusChangeRef.current = null;
+        onStatusChange(prevId, prevStatus);
+      }
       pendingStatusChangeRef.current = { id, status: newStatus };
       setInternalAnimatingItemId(id);
       return;
@@ -334,10 +501,18 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
     }
   }, [onStatusChange, internalAnimatingItemId, externalAnimatingItemId, onExternalAnimationComplete]);
 
+  // Map for O(1) lookup in drag overlay instead of O(N) find
+  const inFlightMap = useMemo(() => {
+    const map = new Map<number, InFlightItem>();
+    for (const item of inFlight) {
+      map.set(item.id, item);
+    }
+    return map;
+  }, [inFlight]);
+
   // Render function for the drag overlay
   const renderDragOverlay = useCallback((item: WorkItem) => {
-    // Find epic title if this is an in-flight item
-    const inFlightItem = inFlight.find(i => i.id === item.id);
+    const inFlightItem = inFlightMap.get(item.id);
     const epicTitle = inFlightItem?.epicTitle || null;
     const isInFlightCard = inFlightItem !== undefined;
 
@@ -349,113 +524,99 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
         isInFlight={isInFlightCard}
       />
     );
-  }, [inFlight]);
+  }, [inFlightMap]);
 
   return (
     <DragProvider renderDragOverlay={renderDragOverlay} onRemoveFromEpic={onEpicAssign} onError={onError}>
-    <div className="flex gap-4 overflow-x-auto h-full" data-testid="kanban-board">
+    {/* height: --main-h (from AppShell ResizeObserver) minus page py-4 padding */}
+    <div className="flex gap-4 overflow-x-auto" style={{ height: 'calc(var(--main-h, 100vh) - 2rem)' }} data-testid="kanban-board">
       {/* Backlog Column */}
-      <KanbanColumn title="Backlog" count={backlogCount} onAdd={onAddToBacklog} addDisabled={!usageAllowed}>
-        {/* In Flight Section - Drop Zone */}
-        <DropZone
-          targetStatus="in_progress"
-          onDrop={async (itemId, newStatus) => {
-            await handleStatusChangeWithAnimation(itemId, newStatus);
-          }}
-          className="rounded-lg mb-6 p-3 -m-3"
-          highlightClassName="ring-2 ring-[#819D9F] bg-[#819D9F]/10 dark:bg-[#819D9F]/20"
-          data-testid="in-flight-drop-zone"
-        >
-          {inFlight.length > 0 ? (
-            <div data-testid="in-flight-section" className="bg-[#e8f0f0] dark:bg-[#819D9F]/20 rounded-lg p-3 -m-1">
-              <div className="flex items-center gap-2 text-base font-medium text-[#5a7d7f] dark:text-[#a3bfc0] mb-3">
-                <img src="/in-flight-seagull.svg" alt="" className="w-5 h-5" />
-                <span>In Flight</span>
+      <KanbanColumn title="Backlog" count={backlogCount} onAdd={onAddToBacklog} addDisabled={!usageAllowed} scrollRef={backlogScrollRef}>
+        {/* Non-virtualized section: In Flight + divider (measured for scrollMargin) */}
+        <div ref={preBacklogRef}>
+          {/* In Flight Section - Drop Zone */}
+          <DropZone
+            targetStatus="in_progress"
+            onDrop={async (itemId, newStatus) => {
+              await handleStatusChangeWithAnimation(itemId, newStatus);
+            }}
+            className="rounded-lg mb-6 p-3 -m-3"
+            highlightClassName="ring-2 ring-[#819D9F] bg-[#819D9F]/10 dark:bg-[#819D9F]/20"
+            data-testid="in-flight-drop-zone"
+          >
+            {inFlight.length > 0 ? (
+              <div data-testid="in-flight-section" className="bg-[#e8f0f0] dark:bg-[#819D9F]/20 rounded-lg p-3 -m-1">
+                <div className="flex items-center gap-2 text-base font-medium text-[#5a7d7f] dark:text-[#a3bfc0] mb-3">
+                  <img src="/in-flight-seagull.png" alt="" className="w-6 h-6 object-contain" />
+                  <span>In Flight</span>
+                </div>
+                <div className="space-y-3">
+                  {inFlight.map((item) => (
+                    <DraggableCard key={item.id} item={item}>
+                      <KanbanCard
+                        item={item}
+                        epicTitle={item.epicTitle}
+                        showEpic={true}
+                        isInFlight={true}
+                        onTitleSave={onTitleSave}
+                        onStatusChange={handleStatusChangeWithAnimation}
+                        onReject={onReject}
+                        onRestart={onRestart}
+                        onTriggerClaude={onTriggerClaude}
+                        hasActiveSession={activeSessionIds?.has(String(item.id))}
+                        onOpenSession={onOpenSession}
+                        onCloseSession={onCloseSession}
+                        usageAllowed={usageAllowed}
+                        isCompletingAnimation={animatingItemId === item.id}
+                        onAnimationComplete={handleAnimationComplete}
+                      />
+                    </DraggableCard>
+                  ))}
+                </div>
               </div>
-              <div className="space-y-3">
-                {inFlight.map((item) => (
-                  <DraggableCard key={item.id} item={item}>
-                    <KanbanCard
-                      item={item}
-                      epicTitle={item.epicTitle}
-                      showEpic={true}
-                      isInFlight={true}
-                      onTitleSave={onTitleSave}
-                      onStatusChange={handleStatusChangeWithAnimation}
-                      onReject={onReject}
-                      onRestart={onRestart}
-                      onTriggerClaude={onTriggerClaude}
-                      hasActiveSession={activeSessions?.has(String(item.id))}
-                      onOpenSession={onOpenSession}
-                      onCloseSession={onCloseSession}
-                      usageAllowed={usageAllowed}
-                      isCompletingAnimation={animatingItemId === item.id}
-                      onAnimationComplete={handleAnimationComplete}
-                    />
-                  </DraggableCard>
-                ))}
+            ) : (
+              <div className="flex items-center gap-2 text-base font-medium text-zinc-400 dark:text-zinc-500 py-3">
+                <img src="/in-flight-seagull.png" alt="" className="w-6 h-6 object-contain opacity-50" />
+                <span>Drop here to start work</span>
               </div>
-            </div>
-          ) : (
-            <div className="flex items-center gap-2 text-base font-medium text-zinc-400 dark:text-zinc-500 py-3">
-              <img src="/in-flight-seagull.svg" alt="" className="w-5 h-5 opacity-50" />
-              <span>Drop here to start work</span>
-            </div>
-          )}
-        </DropZone>
+            )}
+          </DropZone>
 
-        {/* Divider if both sections have content */}
-        {(inFlight.length > 0 || backlog.size > 0) && (
-          <hr className="border-zinc-300 dark:border-zinc-700 my-6" />
-        )}
+          {/* Divider if both sections have content */}
+          {(inFlight.length > 0 || backlog.size > 0) && (
+            <hr className="border-zinc-300 dark:border-zinc-700 my-6" />
+          )}
+        </div>
 
-        {/* Backlog Section - Drop Zone with Reordering */}
+        {/* Virtualized Backlog Section - Drop Zone with Reordering */}
         <BacklogDropZoneWrapper
           backlog={backlog}
           onStatusChange={handleStatusChangeWithAnimation}
           onOrderChange={onOrderChange}
         >
-          <div>
-            {/* Grouped Backlog Items (lazy loaded) */}
-            {visibleBacklog.map(([key, group]) => (
-              <EpicGroup
-                key={key}
-                epicId={group.epicId}
-                epicTitle={group.epicTitle}
-                items={group.items}
-                isInFlight={group.epicId ? inFlightByEpic.has(group.epicId) : false}
-                inFlightItems={group.epicId ? inFlightByEpic.get(group.epicId) : undefined}
-                onTitleSave={onTitleSave}
-                onStatusChange={handleStatusChangeWithAnimation}
-                onReject={onReject}
-                onRestart={onRestart}
-                onEpicAssign={onEpicAssign}
-                onOrderChange={onOrderChange}
-                onTriggerClaude={onTriggerClaude}
-                activeSessions={activeSessions}
-                onOpenSession={onOpenSession}
-                onCloseSession={onCloseSession}
-                onError={onError}
-                usageAllowed={usageAllowed}
-                animatingItemId={animatingItemId}
-                onAnimationComplete={handleAnimationComplete}
-              />
-            ))}
-
-            {hasMoreBacklog && (
-              <button
-                onClick={() => setShowAllBacklog(true)}
-                className="w-full mt-3 py-2 text-sm text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50 rounded-lg transition-colors duration-200 ease-out"
-                data-testid="backlog-show-more"
-              >
-                Show more
-              </button>
-            )}
-
-            {backlog.size === 0 && (
-              <p className="text-base text-zinc-500 text-center py-4">Drop items here for backlog</p>
-            )}
-          </div>
+          <VirtualizedEpicList
+            entries={visibleBacklog}
+            scrollRef={backlogScrollRef}
+            scrollMargin={backlogScrollMargin}
+            hasMore={hasMoreBacklog}
+            onShowMore={() => setShowAllBacklog(true)}
+            emptyMessage={backlog.size === 0 ? 'Drop items here for backlog' : undefined}
+            inFlightByEpic={inFlightByEpic}
+            onTitleSave={onTitleSave}
+            onStatusChange={handleStatusChangeWithAnimation}
+            onReject={onReject}
+            onRestart={onRestart}
+            onEpicAssign={onEpicAssign}
+            onOrderChange={onOrderChange}
+            onTriggerClaude={onTriggerClaude}
+            activeSessionIds={activeSessionIds}
+            onOpenSession={onOpenSession}
+            onCloseSession={onCloseSession}
+            onError={onError}
+            usageAllowed={usageAllowed}
+            animatingItemId={animatingItemId}
+            onAnimationComplete={handleAnimationComplete}
+          />
         </BacklogDropZoneWrapper>
 
         {backlogCount === 0 && inFlight.length === 0 && (
@@ -464,7 +625,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
       </KanbanColumn>
 
       {/* Done Column */}
-      <KanbanColumn title="Done" count={doneCount}>
+      <KanbanColumn title="Done" count={doneCount} scrollRef={doneScrollRef}>
         <DropZone
           targetStatus="done"
           onDrop={async (itemId, newStatus) => {
@@ -474,40 +635,25 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
           highlightClassName="ring-2 ring-zinc-400 bg-zinc-100/50 dark:bg-zinc-800/50"
           data-testid="done-drop-zone"
         >
-          {visibleDone.map(([key, group]) => (
-            <EpicGroup
-              key={key}
-              epicId={group.epicId}
-              epicTitle={group.epicTitle}
-              items={group.items}
-              isDraggable={true}
-              onTitleSave={onTitleSave}
-              onStatusChange={handleStatusChangeWithAnimation}
-              onReject={onReject}
-              activeSessions={activeSessions}
-              onOpenSession={onOpenSession}
-              onCloseSession={onCloseSession}
-              onError={onError}
-              usageAllowed={usageAllowed}
-            />
-          ))}
-
-          {hasMoreDone && (
-            <button
-              onClick={() => setShowAllDone(true)}
-              className="w-full mt-3 py-2 text-sm text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50 rounded-lg transition-colors duration-200 ease-out"
-              data-testid="done-show-more"
-            >
-              Show more
-            </button>
-          )}
-
-          {doneCount === 0 && (
-            <p className="text-base text-zinc-500 text-center py-4">Drop here to mark complete</p>
-          )}
+          <VirtualizedEpicList
+            entries={visibleDone}
+            scrollRef={doneScrollRef}
+            hasMore={hasMoreDone}
+            onShowMore={() => setShowAllDone(true)}
+            emptyMessage={doneCount === 0 ? 'Drop here to mark complete' : undefined}
+            isDraggable={true}
+            onTitleSave={onTitleSave}
+            onStatusChange={handleStatusChangeWithAnimation}
+            onReject={onReject}
+            activeSessionIds={activeSessionIds}
+            onOpenSession={onOpenSession}
+            onCloseSession={onCloseSession}
+            onError={onError}
+            usageAllowed={usageAllowed}
+          />
         </DropZone>
       </KanbanColumn>
     </div>
     </DragProvider>
   );
-}
+});