jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/KanbanBoard.tsx

@@ -1,807 +1,38 @@
-'use client';
 
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useDroppable } from '@dnd-kit/core';
+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 { EditableTitle } from './EditableTitle';
-import { CardMenu } from './CardMenu';
-import { DragProvider, useDragContext } from './DragContext';
+import { DragProvider } from './DragContext';
 import { DraggableCard } from './DraggableCard';
 import { DropZone } from './DropZone';
-import { PlaceholderCard } from './PlaceholderCard';
-import { CopyableId } from './CopyableId';
-import { WaveCompletionAnimation } from './WaveCompletionAnimation';
-
-const typeIcons: Record<string, string> = {
-  epic: '🎯',
-  feature: '✨',
-  chore: '🔧',
-  bug: '🐛',
-};
-
-const modeLabels: Record<string, { label: string; color: string }> = {
-  speed: { label: 'speed', color: 'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300' },
-  stable: { label: 'stable', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300' },
-  production: { label: 'prod', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/50 dark:text-purple-300' },
-};
-
-function getModeLabel(item: WorkItem): string {
-  if (!item.mode) return '';
-  const base = modeLabels[item.mode]?.label || item.mode;
-  if (item.current_step && item.total_steps) {
-    return `${base} ${item.current_step}/${item.total_steps}`;
+import { KanbanCard } from './KanbanCard';
+import { EpicGroup, MIN_DISPLAY_ORDER, MAX_DISPLAY_ORDER, DISPLAY_ORDER_INCREMENT } from './EpicGroup';
+import { useDragContext } from './DragContext';
+import { shadow } from '@/lib/shadows';
+
+const BACKLOG_VISIBLE_LIMIT = 45;
+const DONE_VISIBLE_LIMIT = 15;
+
+// Returns the subset of entries to render, respecting soft epic-group boundaries.
+// If adding a group would cross the limit but the count before it was under, include it fully.
+function getVisibleEntries(
+  entries: [string, KanbanGroup][],
+  limit: number,
+  showAll: boolean
+): { visible: [string, KanbanGroup][]; totalCount: number; hasMore: boolean } {
+  const totalCount = entries.reduce((sum, [, g]) => sum + g.items.length, 0);
+  if (showAll || totalCount <= limit) {
+    return { visible: entries, totalCount, hasMore: false };
   }
-  return base;
-}
-
-
-// Session indicator icon - shows when item has an active Claude session
-function SessionIndicatorIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-    </svg>
-  );
-}
-
-interface KanbanCardProps {
-  item: WorkItem;
-  epicTitle?: string | null;
-  showEpic?: boolean;
-  isInFlight?: 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>;
-  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
-  hasActiveSession?: boolean;
-  onOpenSession?: (id: string) => void;
-  usageAllowed?: boolean;
-  // Animation state lifted to board level
-  isCompletingAnimation?: boolean;
-  onAnimationComplete?: () => void;
-  isHighlighted?: boolean;
-}
-
-function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange, onReject, onTriggerClaude, hasActiveSession, onOpenSession, usageAllowed = true, isCompletingAnimation = false, onAnimationComplete, isHighlighted = false }: KanbanCardProps) {
-  const [expanded, setExpanded] = useState(false);
-  const [showRejectInput, setShowRejectInput] = useState(false);
-  const [rejectReason, setRejectReason] = useState('');
-  const router = useRouter();
-
-  const handleOpenSession = (e: React.MouseEvent) => {
-    e.stopPropagation(); // Prevent card navigation
-    if (onOpenSession) {
-      onOpenSession(String(item.id));
-    }
-  };
-
-  const handleStart = async (e: React.MouseEvent) => {
-    e.stopPropagation(); // Prevent card navigation
-    if (onStatusChange) {
-      await onStatusChange(item.id, 'in_progress');
-      if (onTriggerClaude) {
-        onTriggerClaude(item.id, item.title, item.type, !!item.conversational, item.description);
-      }
-    }
-  };
-
-  const canStart = item.status === 'backlog' || item.status === 'cancelled';
-
-  // An item is reviewable when it has ready_for_review flag set
-  // This applies to kanban-visible items: features, standalone chores/bugs, and items under epics
-  const isReviewable = !!item.ready_for_review;
-
-  const handleAccept = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onStatusChange) {
-      await onStatusChange(item.id, 'done');
-    }
-  };
-
-  const handleRejectClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setShowRejectInput(true);
-  };
-
-  const handleRejectConfirm = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onReject && rejectReason.trim()) {
-      await onReject(item.id, rejectReason.trim());
-      setShowRejectInput(false);
-      setRejectReason('');
-    }
-  };
-
-  const handleRejectCancel = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setShowRejectInput(false);
-    setRejectReason('');
-  };
-
-  // Calculate chores for expandable section
-  const allChores = item.chores || [];
-  const incompleteChores = allChores.filter(c => c.status !== 'done');
-  const hasChores = allChores.length > 0;
-  const hasIncompleteChores = incompleteChores.length > 0;
-
-  // Calculate bugs for expandable section
-  const allBugs = item.bugs || [];
-  const incompleteBugs = allBugs.filter(b => b.status !== 'done');
-  const hasBugs = allBugs.length > 0;
-
-  const handleCardClick = () => {
-    router.push(`/work/${item.id}`);
-  };
-
-  const handleTitleSave = async (id: number, newTitle: string) => {
-    if (onTitleSave) {
-      await onTitleSave(id, newTitle);
-    }
-  };
-
-  // Status changes are now handled by the board-level wrapper that triggers animation
-  const handleStatusChange = async (id: number, newStatus: string) => {
-    if (onStatusChange) {
-      await onStatusChange(id, newStatus);
-    }
-  };
-
-  const isDone = item.status === 'done';
-
-  const getCardStyles = () => {
-    const baseElevation = `
-      0 1px 2px rgba(0, 0, 0, 0.03),
-      0 2px 4px rgba(0, 0, 0, 0.03),
-      0 4px 8px rgba(0, 0, 0, 0.02)
-    `;
-    const hoverElevation = `
-      0 2px 4px rgba(0, 0, 0, 0.04),
-      0 4px 8px rgba(0, 0, 0, 0.04),
-      0 8px 16px rgba(0, 0, 0, 0.03),
-      0 12px 24px rgba(129, 157, 159, 0.08)
-    `;
-
-    if (isDone) {
-      return {
-        className: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800',
-        boxShadow: baseElevation,
-        hoverBoxShadow: hoverElevation,
-      };
-    }
-    if (isInFlight) {
-      return {
-        className: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800',
-        boxShadow: baseElevation,
-        hoverBoxShadow: hoverElevation,
-      };
-    }
-    return {
-      className: 'bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700',
-      boxShadow: baseElevation,
-      hoverBoxShadow: hoverElevation,
-    };
-  };
-
-  const cardStyles = getCardStyles();
-
-  const cardContent = (
-    <WaveCompletionAnimation isPlaying={isCompletingAnimation} onComplete={onAnimationComplete || (() => {})}>
-      <div
-        className={`rounded-xl border transition-all duration-200 hover:-translate-y-0.5 ${cardStyles.className}`}
-        style={{ boxShadow: cardStyles.boxShadow }}
-        onMouseEnter={(e) => { e.currentTarget.style.boxShadow = cardStyles.hoverBoxShadow; }}
-        onMouseLeave={(e) => { e.currentTarget.style.boxShadow = cardStyles.boxShadow; }}
-        data-testid={`kanban-card-${item.id}`}>
-        <div
-          onClick={handleCardClick}
-          className="block p-3 cursor-pointer"
-        >
-        <div className="flex items-start gap-2">
-          <span className="text-sm flex-shrink-0">{typeIcons[item.type] || '📄'}</span>
-          <div className="flex-1 min-w-0">
-            {isDone ? (
-              /* Compact layout for done cards: ID and title inline, no mode badge */
-              <div className="flex items-start gap-2">
-                <CopyableId id={item.id} title={item.title} type={item.type} />
-                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
-                  {item.title || <span className="text-zinc-400 italic">(Untitled)</span>}
-                </span>
-              </div>
-            ) : (
-              /* Standard layout: ID + mode badge on line 1, title below */
-              <>
-                <div className="flex items-center gap-2 mb-1 flex-wrap">
-                  <CopyableId id={item.id} title={item.title} type={item.type} />
-                  {item.mode && modeLabels[item.mode] && (
-                    <span className={`text-xs px-1.5 py-0.5 rounded ${modeLabels[item.mode].color}`}>
-                      {getModeLabel(item)}
-                    </span>
-                  )}
-                </div>
-                <EditableTitle
-                  title={item.title}
-                  itemId={item.id}
-                  onSave={handleTitleSave}
-                />
-              </>
-            )}
-            {showEpic && epicTitle && (
-              <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1.5 flex items-center gap-1">
-                <span>🎯</span>
-                <span>{epicTitle}</span>
-              </p>
-            )}
-          </div>
-          <div className="flex items-center gap-1">
-            {/* Accept/Reject buttons - shown for reviewable top-level items */}
-            {isReviewable && item.status !== 'done' && onStatusChange && (
-              <button
-                onClick={handleAccept}
-                className="p-1 rounded hover:bg-green-100 dark:hover:bg-green-900/30 text-green-600 dark:text-green-400 transition-colors"
-                aria-label="Accept work item"
-                data-testid={`accept-button-${item.id}`}
-                title="Accept"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
-              </button>
-            )}
-            {isReviewable && onReject && (
-              <button
-                onClick={handleRejectClick}
-                className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 transition-colors"
-                aria-label="Reject work item"
-                data-testid={`reject-button-${item.id}`}
-                title="Reject"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            )}
-            {/* Session indicator - clickable icon to reopen session */}
-            {hasActiveSession && (
-              <button
-                onClick={handleOpenSession}
-                className="p-1.5 rounded hover:bg-zinc-100 dark:hover:bg-zinc-700 text-blue-500 transition-colors"
-                aria-label="Open active session"
-                data-testid={`session-indicator-${item.id}`}
-                title="Open session"
-              >
-                <SessionIndicatorIcon className="w-4 h-4" />
-              </button>
-            )}
-            {/* Start button - shown for backlog/cancelled items */}
-            {canStart && onStatusChange && (
-              isHighlighted ? (
-                <motion.button
-                  onClick={handleStart}
-                  className="px-2 py-0.5 text-xs rounded border border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400"
-                  animate={{
-                    backgroundColor: [
-                      'rgba(59, 130, 246, 0)',
-                      'rgba(59, 130, 246, 0.15)',
-                      'rgba(59, 130, 246, 0)',
-                    ],
-                  }}
-                  transition={{
-                    duration: 2,
-                    repeat: Infinity,
-                    ease: 'easeInOut',
-                  }}
-                  aria-label="Start work"
-                  data-testid={`start-button-${item.id}`}
-                >
-                  start
-                </motion.button>
-              ) : (
-                <button
-                  onClick={handleStart}
-                  className="px-2 py-0.5 text-xs rounded border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 text-zinc-600 dark:text-zinc-400 transition-colors"
-                  aria-label="Start work"
-                  data-testid={`start-button-${item.id}`}
-                >
-                  start
-                </button>
-              )
-            )}
-            {onStatusChange && (
-              <CardMenu
-                itemId={item.id}
-                itemTitle={item.title}
-                itemType={item.type}
-                itemDescription={item.description}
-                conversational={!!item.conversational}
-                currentStatus={item.status}
-                onStatusChange={handleStatusChange}
-                onTriggerClaude={onTriggerClaude}
-                hasActiveSession={hasActiveSession}
-                onOpenSession={onOpenSession}
-                usageAllowed={usageAllowed}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-      {/* Rejection reason input */}
-      {showRejectInput && (
-        <div className="px-3 pb-3 border-t border-zinc-200 dark:border-zinc-700" onClick={(e) => e.stopPropagation()}>
-          <div className="mt-2">
-            <input
-              type="text"
-              value={rejectReason}
-              onChange={(e) => setRejectReason(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && rejectReason.trim()) {
-                  handleRejectConfirm(e as unknown as React.MouseEvent);
-                }
-                if (e.key === 'Escape') {
-                  handleRejectCancel(e as unknown as React.MouseEvent);
-                }
-              }}
-              placeholder="Rejection reason..."
-              className="w-full text-xs px-2 py-1.5 rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-1 focus:ring-red-400"
-              autoFocus
-              data-testid={`reject-reason-input-${item.id}`}
-            />
-            <div className="flex items-center gap-1 mt-1.5">
-              <button
-                onClick={handleRejectConfirm}
-                disabled={!rejectReason.trim()}
-                className="px-2 py-0.5 text-xs rounded bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                data-testid={`reject-confirm-${item.id}`}
-              >
-                Reject
-              </button>
-              <button
-                onClick={handleRejectCancel}
-                className="px-2 py-0.5 text-xs rounded border border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
-                data-testid={`reject-cancel-${item.id}`}
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-      {/* Rejected indicator */}
-      {item.rejection_reason && (
-        <div className="px-3 pb-2 border-t border-red-200 dark:border-red-800">
-          <div className="mt-1.5 flex items-start gap-1.5 text-xs text-red-600 dark:text-red-400">
-            <span className="flex-shrink-0">⚠️</span>
-            <span className="italic">{item.rejection_reason}</span>
-          </div>
-        </div>
-      )}
-      {/* Show expandable section for features with chores or bugs */}
-      {(hasChores || hasBugs) && (
-        <div className={`border-t ${isDone ? 'border-green-200 dark:border-green-800' : 'border-zinc-200 dark:border-zinc-700'}`}>
-          <button
-            onClick={() => setExpanded(!expanded)}
-            className={`w-full px-3 py-1.5 flex items-start gap-1.5 text-xs transition-colors ${
-              isDone
-                ? 'text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30'
-                : 'text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700/50'
-            }`}
-          >
-            <span className="mt-0.5">{expanded ? '▼' : '▶'}</span>
-            <div className="flex flex-col gap-0.5">
-              {hasChores && (
-                <div className="flex items-center gap-1.5">
-                  <span>🔧</span>
-                  <span>
-                    {isDone
-                      ? `${allChores.length === 0 ? 'no' : allChores.length} chore${allChores.length !== 1 ? 's' : ''}`
-                      : `${incompleteChores.length === 0 ? 'no' : incompleteChores.length}${item.mode ? ` ${item.mode} mode` : ''} chore${incompleteChores.length !== 1 ? 's' : ''} left`}
-                  </span>
-                </div>
-              )}
-              {hasBugs && (
-                <div className="flex items-center gap-1.5">
-                  <span>🐛</span>
-                  <span>
-                    {isDone
-                      ? `${allBugs.length === 0 ? 'no' : allBugs.length} bug${allBugs.length !== 1 ? 's' : ''}`
-                      : `${incompleteBugs.length === 0 ? 'no' : incompleteBugs.length} bug${incompleteBugs.length !== 1 ? 's' : ''} left`}
-                  </span>
-                </div>
-              )}
-            </div>
-          </button>
-          {expanded && (
-            <div className="px-3 pb-2 space-y-1">
-              {allChores.map((chore) => {
-                const isComplete = chore.status === 'done';
-                return (
-                  <Link
-                    key={chore.id}
-                    href={`/work/${chore.id}`}
-                    className={`block py-1 px-2 text-xs rounded transition-colors ${
-                      isComplete
-                        ? 'bg-green-100 dark:bg-green-900/30 border border-green-200 dark:border-green-800/50'
-                        : 'hover:bg-zinc-100 dark:hover:bg-zinc-700'
-                    }`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className={`font-mono ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{chore.id}</span>
-                      {!isDone && chore.mode && modeLabels[chore.mode] && (
-                        <span className={`px-1 py-0.5 rounded text-[10px] ${modeLabels[chore.mode].color}`}>
-                          {getModeLabel(chore)}
-                        </span>
-                      )}
-                      <span className={`truncate ${
-                        isComplete
-                          ? 'text-zinc-500'
-                          : 'text-zinc-700 dark:text-zinc-300'
-                      }`}>
-                        {chore.title || <span className="text-zinc-400 italic">(Untitled)</span>}
-                      </span>
-                    </div>
-                  </Link>
-                );
-              })}
-              {allBugs.map((bug) => {
-                const isComplete = bug.status === 'done';
-                return (
-                  <Link
-                    key={bug.id}
-                    href={`/work/${bug.id}`}
-                    className={`block py-1 px-2 text-xs rounded transition-colors ${
-                      isComplete
-                        ? 'bg-green-100 dark:bg-green-900/30 border border-green-200 dark:border-green-800/50'
-                        : 'hover:bg-zinc-100 dark:hover:bg-zinc-700'
-                    }`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className={`font-mono ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{bug.id}</span>
-                      <span>🐛</span>
-                      <span className={`truncate ${
-                        isComplete
-                          ? 'text-zinc-500'
-                          : 'text-zinc-700 dark:text-zinc-300'
-                      }`}>
-                        {bug.title || <span className="text-zinc-400 italic">(Untitled)</span>}
-                      </span>
-                    </div>
-                  </Link>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      )}
-      </div>
-    </WaveCompletionAnimation>
-  );
-
-  if (isHighlighted) {
-    return (
-      <motion.div
-        animate={{
-          boxShadow: [
-            '0 0 0 0px rgba(129, 157, 159, 0)',
-            '0 0 0 3px rgba(129, 157, 159, 0.4)',
-            '0 0 0 0px rgba(129, 157, 159, 0)',
-          ],
-        }}
-        transition={{
-          duration: 2,
-          repeat: Infinity,
-          ease: 'easeInOut',
-        }}
-        className="rounded-xl"
-      >
-        {cardContent}
-      </motion.div>
-    );
+  const visible: [string, KanbanGroup][] = [];
+  let count = 0;
+  for (const entry of entries) {
+    if (count >= limit) break;
+    visible.push(entry);
+    count += entry[1].items.length;
   }
-
-  return cardContent;
-}
-
-// Safe bounds for display_order to prevent overflow
-const MIN_DISPLAY_ORDER = 0;
-const MAX_DISPLAY_ORDER = Number.MAX_SAFE_INTEGER - 1000;
-const DISPLAY_ORDER_INCREMENT = 10;
-
-interface EpicGroupProps {
-  epicId: number | null;
-  epicTitle: string | null;
-  items: WorkItem[];
-  isInFlight?: boolean;
-  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>;
-  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;
-  activeSessions?: Map<string, Session>;
-  onOpenSession?: (id: string) => void;
-  onError?: (message: string) => void;
-  usageAllowed?: boolean;
-  // Animation state lifted to board level
-  animatingItemId?: number | null;
-  onAnimationComplete?: () => void;
-  isBlank?: boolean;
-}
-
-function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onReject, onEpicAssign, onOrderChange, onTriggerClaude, activeSessions, onOpenSession, onError, usageAllowed = true, animatingItemId, onAnimationComplete, isBlank }: EpicGroupProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { isDragging, draggedItem, activeEpicZone, activeDropZone, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
-
-  // Local pointer tracking - only this component needs pointer Y for insertion preview.
-  // Using local state avoids re-rendering every context consumer at 60fps.
-  const [pointerY, setPointerY] = useState(0);
-  useEffect(() => {
-    if (!isDragging) return;
-    const onPointerMove = (e: PointerEvent) => { setPointerY(e.clientY); };
-    window.addEventListener('pointermove', onPointerMove);
-    return () => window.removeEventListener('pointermove', onPointerMove);
-  }, [isDragging]);
-
-  // Use @dnd-kit's useDroppable for epic zone collision detection
-  const zoneId = epicId !== null ? `epic-${epicId}` : undefined;
-  const { setNodeRef } = useDroppable({
-    id: zoneId || 'ungrouped',
-    disabled: epicId === null, // Don't use droppable for ungrouped section
-    data: { epicId },
-  });
-
-  // Combine refs
-  const setRefs = useCallback((node: HTMLDivElement | null) => {
-    if (epicId !== null) {
-      setNodeRef(node);
-    }
-    (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
-  }, [epicId, setNodeRef]);
-
-  // Use ref for items to avoid re-registering drop zone when items change
-  const itemsRef = useRef(items);
-  itemsRef.current = items;
-
-  // Use ref for callbacks to keep drop zone registration stable
-  const onOrderChangeRef = useRef(onOrderChange);
-  onOrderChangeRef.current = onOrderChange;
-
-  // Use ref for error handler to keep reorder handler stable
-  const onErrorRef = useRef(onError);
-  onErrorRef.current = onError;
-
-  // Stable reorder handler that reads from refs
-  const handleEpicReorder = useCallback(async (itemId: number, pointerY: number) => {
-    if (!onOrderChangeRef.current) {
-      return;
-    }
-
-    const currentItems = itemsRef.current.filter(item => item.id !== itemId);
-    if (currentItems.length === 0) {
-      return;
-    }
-
-    // Read fresh positions from DOM (not stale cache)
-    const allPositions = getCardPositions();
-    const itemIds = new Set(currentItems.map(item => item.id));
-    const cardPositions = allPositions
-      .filter(pos => itemIds.has(pos.id))
-      .map(pos => ({
-        id: pos.id,
-        midY: (pos.rect.top + pos.rect.bottom) / 2,
-      }))
-      .sort((a, b) => a.midY - b.midY);
-
-    if (cardPositions.length === 0) {
-      return;
-    }
-
-    // Find insertion index based on pointer Y
-    let insertIndex = cardPositions.length;
-    for (let i = 0; i < cardPositions.length; i++) {
-      if (pointerY < cardPositions[i].midY) {
-        insertIndex = i;
-        break;
-      }
-    }
-
-    // Map visual positions to items for display_order midpoint calculation
-    const itemMap = new Map(currentItems.map(item => [item.id, item]));
-    const visualOrder = cardPositions.map(pos => itemMap.get(pos.id)!).filter(Boolean);
-
-    // Calculate proper midpoint display_order between surrounding items
-    let newOrder: number;
-    if (visualOrder.length === 0) {
-      newOrder = DISPLAY_ORDER_INCREMENT;
-    } else if (insertIndex === 0) {
-      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id;
-      newOrder = firstOrder - DISPLAY_ORDER_INCREMENT;
-    } else if (insertIndex >= visualOrder.length) {
-      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id;
-      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;
-      newOrder = Math.floor((before + after) / 2);
-    }
-
-    newOrder = Math.max(MIN_DISPLAY_ORDER, Math.min(MAX_DISPLAY_ORDER, newOrder));
-
-    try {
-      await onOrderChangeRef.current(itemId, newOrder);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Failed to reorder item. Please try again.';
-      onErrorRef.current?.(errorMessage);
-    }
-  }, [getCardPositions]);
-
-  // Register as epic drop zone - stable registration that doesn't change with items
-  useEffect(() => {
-    if (!containerRef.current || !onEpicAssign || epicId === null) return;
-
-    const zoneId = `epic-${epicId}`;
-    registerEpicDropZone(zoneId, {
-      epicId,
-      element: containerRef.current,
-      onEpicAssign,
-      onReorder: handleEpicReorder,
-    });
-
-    return () => {
-      unregisterEpicDropZone(zoneId);
-    };
-  }, [epicId, onEpicAssign, handleEpicReorder, registerEpicDropZone, unregisterEpicDropZone]);
-
-  // Check if this epic zone is the active drop target
-  const isActiveTarget = activeEpicZone === `epic-${epicId}`;
-
-  // Check if the dragged item is from a different epic or same epic
-  const draggedItemEpicId = draggedItem ? (draggedItem.parent_id || draggedItem.epic_id) : null;
-  const isDifferentEpic = isDragging && draggedItem && draggedItemEpicId !== epicId;
-  const isSameEpic = isDragging && draggedItem && draggedItemEpicId === epicId;
-
-  // Show highlight when dragging an item from different epic over this group (indigo)
-  const showHighlight = isActiveTarget && isDifferentEpic;
-  // Show reorder highlight when dragging within same epic (purple)
-  const showReorderHighlight = isActiveTarget && isSameEpic;
-
-  // For ungrouped section (epicId === null)
-  const isUngroupedSection = epicId === null;
-  // Check if cursor is over this ungrouped section (not over any epic zone, but over backlog drop zone)
-  const isOverUngroupedSection = isUngroupedSection && !activeEpicZone && activeDropZone;
-
-  // Render the ungrouped zone when dragging from an epic (provides drop target), but only highlight when cursor is over it
-  const shouldRenderUngroupedZone = isUngroupedSection && isDragging && draggedItemEpicId !== null;
-  const showRemoveFromEpicZone = isOverUngroupedSection && isDragging && draggedItemEpicId !== null;
-
-  // Show reorder for ungrouped section when dragging an ungrouped card and cursor is over it
-  const showUngroupedReorder = isOverUngroupedSection && isDragging && draggedItemEpicId === null;
-
-  // Calculate insertion preview for this group - only for the active zone
-  const showPreview = (showReorderHighlight || showRemoveFromEpicZone || showHighlight || showUngroupedReorder) && draggedItem;
-  let insertAfterItemId: number | null | undefined = undefined; // undefined = no preview, null = at beginning
-
-  if (showPreview && draggedItem) {
-    const allPositions = getCardPositions();
-    const itemIds = new Set(items.map(item => item.id));
-    const groupPositions = allPositions
-      .filter(pos => itemIds.has(pos.id) && pos.id !== draggedItem.id)
-      .map(pos => ({
-        id: pos.id,
-        midY: (pos.rect.top + pos.rect.bottom) / 2,
-      }))
-      .sort((a, b) => a.midY - b.midY);
-
-    // Find which card the pointer is after
-    insertAfterItemId = null; // Default to beginning
-    for (const pos of groupPositions) {
-      if (pointerY > pos.midY) {
-        insertAfterItemId = pos.id;
-      } else {
-        break;
-      }
-    }
-  }
-
-  if (items.length === 0 && !showHighlight && !showReorderHighlight && !shouldRenderUngroupedZone) return null;
-
-  // Standalone done items (single item, no epic) use tighter spacing
-  const isStandaloneItem = !epicTitle && items.length === 1;
-
-  return (
-    <div
-      ref={setRefs}
-      className={`${isStandaloneItem ? 'mb-2' : 'mb-4 p-2 -mx-2'} rounded-lg transition-all ${
-        showHighlight
-          ? 'ring-2 ring-indigo-400 bg-indigo-100/50 dark:bg-indigo-900/30'
-          : showReorderHighlight
-          ? 'ring-2 ring-purple-400 bg-purple-100/50 dark:bg-purple-900/30'
-          : showRemoveFromEpicZone
-          ? 'ring-2 ring-orange-400 bg-orange-100/50 dark:bg-orange-900/30'
-          : ''
-      }`}
-      data-epic-id={epicId}
-    >
-      {epicTitle && (
-        <div className="flex items-center gap-2 mb-2">
-          <Link
-            href={`/work/${epicId}`}
-            className="flex items-center gap-1.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
-          >
-            <span>🎯</span>
-            <span>{epicTitle}</span>
-          </Link>
-          {isInFlight && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
-              in flight
-            </span>
-          )}
-          {showHighlight && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300">
-              drop to assign
-            </span>
-          )}
-          {showReorderHighlight && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300">
-              reorder
-            </span>
-          )}
-        </div>
-      )}
-      {/* Ungrouped section header - shown when dragging from epic */}
-      {isUngroupedSection && showRemoveFromEpicZone && items.length === 0 && (
-        <div className="flex items-center gap-2 py-3">
-          <span className="text-xs font-medium text-orange-600 dark:text-orange-400">
-            Drop here to remove from epic
-          </span>
-        </div>
-      )}
-      {isUngroupedSection && items.length > 0 && isDraggable && showRemoveFromEpicZone && (
-        <div className="flex items-center gap-2 mb-2">
-          <span className="text-xs px-1.5 py-0.5 rounded bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300">
-            drop to remove from epic
-          </span>
-        </div>
-      )}
-      <div className="space-y-2">
-        {/* Placeholder at the beginning (insertAfterItemId === null) */}
-        <AnimatePresence>
-          {insertAfterItemId === null && (
-            <PlaceholderCard key="placeholder-start" />
-          )}
-        </AnimatePresence>
-        {items.map((item) => (
-          <div key={item.id}>
-            <DraggableCard item={item} disabled={!isDraggable}>
-              <KanbanCard
-                item={item}
-                onTitleSave={onTitleSave}
-                onStatusChange={onStatusChange}
-                onReject={onReject}
-                onTriggerClaude={onTriggerClaude}
-                hasActiveSession={activeSessions?.has(String(item.id))}
-                onOpenSession={onOpenSession}
-                usageAllowed={usageAllowed}
-                isCompletingAnimation={animatingItemId === item.id}
-                onAnimationComplete={onAnimationComplete}
-                isHighlighted={isBlank && item.status === 'backlog' && item.title === 'Align on the user journey'}
-              />
-            </DraggableCard>
-            {/* Placeholder after this card */}
-            <AnimatePresence>
-              {insertAfterItemId === item.id && (
-                <PlaceholderCard key={`placeholder-${item.id}`} />
-              )}
-            </AnimatePresence>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+  return { visible, totalCount, hasMore: count < totalCount };
 }
 
 interface KanbanColumnProps {
@@ -810,51 +41,44 @@ 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 min-w-[300px] max-w-[400px] flex flex-col min-h-0" data-testid={testId}>
+    <div className="flex-1 max-w-[600px] flex flex-col min-h-0" data-testid={testId}>
       <div
-        className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-3 flex flex-col flex-1 min-h-0"
-        style={{
-          boxShadow: `
-            0 1px 2px rgba(0, 0, 0, 0.04),
-            0 2px 4px rgba(0, 0, 0, 0.04),
-            0 4px 8px rgba(0, 0, 0, 0.04),
-            0 8px 16px rgba(0, 0, 0, 0.02),
-            inset 0 1px 0 rgba(255, 255, 255, 0.5)
-          `,
-        }}
+        className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-4 flex flex-col flex-1 min-h-0"
+        style={{ boxShadow: shadow.sm }}
       >
-        <div className="flex items-center justify-between mb-3 flex-shrink-0">
+        <div className="flex items-center justify-between mb-4 flex-shrink-0">
           <h2 className="font-semibold text-zinc-900 dark:text-zinc-100">{title}</h2>
           <div className="flex items-center gap-2">
             {onAdd && (
               <button
                 onClick={onAdd}
                 disabled={addDisabled}
-                className={`p-1 rounded transition-colors ${
+                className={`p-1 rounded transition-colors duration-200 ease-out ${
                   addDisabled
                     ? 'text-zinc-300 dark:text-zinc-700 cursor-not-allowed'
                     : 'hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300'
                 }`}
                 aria-label={`Add to ${title.toLowerCase()}`}
                 data-testid={`${testId}-add-button`}
-                title={addDisabled ? 'Weekly usage limit reached' : undefined}
+                title={addDisabled ? 'Weekly usage limit reached' : `Add to ${title.toLowerCase()}`}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                 </svg>
               </button>
             )}
-            <span className="text-xs bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 px-2 py-0.5 rounded-full">
+            <span className="text-xs bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 px-3 py-1 rounded-full">
               {count}
             </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>
@@ -921,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);
     }
 
@@ -950,9 +175,9 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
       }}
       onReorder={handleBacklogReorder}
       allowReorder={true}
-      className="rounded-lg p-2 -m-2 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"
+      className="rounded-lg p-3 -m-3 min-h-[100px]"
+      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}
@@ -960,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>;
@@ -967,12 +339,14 @@ interface KanbanBoardProps {
   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;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
   onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
   // Multi-session support
   onOpenSession?: (id: string) => void;
-  activeSessions?: Map<string, Session>;
+  onCloseSession?: (id: string) => void;
+  activeSessionIds?: Set<string>;
   // Undo/redo support
   onUndo?: () => Promise<UndoAction | null>;
   onRedo?: () => Promise<UndoAction | null>;
@@ -980,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
@@ -987,13 +363,46 @@ interface KanbanBoardProps {
   // External animation trigger (e.g., from CLI/DB completions detected via WebSocket)
   externalAnimatingItemId?: number | null;
   onExternalAnimationComplete?: () => void;
-  isBlank?: boolean;
 }
 
-export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onReject, onOrderChange, onEpicAssign, onTriggerClaude, onOpenSession, activeSessions, onUndo, onRedo, canUndo, canRedo, onError, onAddToBacklog, usageAllowed = true, externalAnimatingItemId, onExternalAnimationComplete, isBlank }: 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);
+
+  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 } = 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(() => {
     const handleKeyDown = async (e: KeyboardEvent) => {
@@ -1026,14 +435,22 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [onUndo, onRedo, canUndo, canRedo]);
 
-  // Build a set of epic IDs that have in-flight items
-  const inFlightEpicIds = new Set<number>();
-  for (const item of inFlight) {
-    const epicId = item.parent_id || item.epic_id;
-    if (epicId) {
-      inFlightEpicIds.add(epicId);
+  // Build a map of epic IDs to their in-flight items
+  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);
@@ -1042,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) => {
@@ -1069,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;
@@ -1094,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;
 
@@ -1109,141 +524,136 @@ 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-4 p-2 -m-2"
-          highlightClassName="ring-2 ring-blue-400 bg-blue-100/50 dark:bg-blue-900/30"
-          data-testid="in-flight-drop-zone"
-        >
-          {inFlight.length > 0 ? (
-            <div data-testid="in-flight-section">
-              <div className="flex items-center gap-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 mb-2">
-                <span>🔥</span>
-                <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-2">
-                {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}
-                      onTriggerClaude={onTriggerClaude}
-                      hasActiveSession={activeSessions?.has(String(item.id))}
-                      onOpenSession={onOpenSession}
-                      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-1.5 text-xs font-medium text-zinc-400 dark:text-zinc-500 py-2">
-              <span>🔥</span>
-              <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-4" />
-        )}
+          {/* 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 */}
-            {Array.from(backlog.entries()).map(([key, group]) => (
-              <EpicGroup
-                key={key}
-                epicId={group.epicId}
-                epicTitle={group.epicTitle}
-                items={group.items}
-                isInFlight={group.epicId ? inFlightEpicIds.has(group.epicId) : false}
-                onTitleSave={onTitleSave}
-                onStatusChange={handleStatusChangeWithAnimation}
-                onReject={onReject}
-                onEpicAssign={onEpicAssign}
-                onOrderChange={onOrderChange}
-                onTriggerClaude={onTriggerClaude}
-                activeSessions={activeSessions}
-                onOpenSession={onOpenSession}
-                onError={onError}
-                usageAllowed={usageAllowed}
-                animatingItemId={animatingItemId}
-                onAnimationComplete={handleAnimationComplete}
-                isBlank={isBlank}
-              />
-            ))}
-
-            {backlog.size === 0 && (
-              <p className="text-sm 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 && (
-          <p className="text-sm text-zinc-500 text-center py-4">No items in backlog</p>
+          <p className="text-base text-zinc-500 text-center py-4">No items in backlog</p>
         )}
       </KanbanColumn>
 
       {/* Done Column */}
-      <KanbanColumn title="Done" count={doneCount}>
+      <KanbanColumn title="Done" count={doneCount} scrollRef={doneScrollRef}>
         <DropZone
           targetStatus="done"
           onDrop={async (itemId, newStatus) => {
             await handleStatusChangeWithAnimation(itemId, newStatus);
           }}
-          className="rounded-lg p-2 -m-2 min-h-[100px]"
-          highlightClassName="ring-2 ring-green-400 bg-green-100/50 dark:bg-green-900/30"
+          className="rounded-lg p-3 -m-3 min-h-[100px]"
+          highlightClassName="ring-2 ring-zinc-400 bg-zinc-100/50 dark:bg-zinc-800/50"
           data-testid="done-drop-zone"
         >
-          {Array.from(done.entries()).map(([key, group]) => (
-            <EpicGroup
-              key={key}
-              epicId={group.epicId}
-              epicTitle={group.epicTitle}
-              items={group.items}
-              isDraggable={true}
-              onTitleSave={onTitleSave}
-              onStatusChange={handleStatusChangeWithAnimation}
-              onReject={onReject}
-              onEpicAssign={onEpicAssign}
-              activeSessions={activeSessions}
-              onOpenSession={onOpenSession}
-              onError={onError}
-              usageAllowed={usageAllowed}
-            />
-          ))}
-
-          {doneCount === 0 && (
-            <p className="text-sm 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>
   );
-}
+});