jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/KanbanBoard.tsx

@@ -1,726 +1,39 @@
 'use client';
 
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { AnimatePresence } from 'framer-motion';
-import { useDroppable } from '@dnd-kit/core';
 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) => void;
-  hasActiveSession?: boolean;
-  onOpenSession?: (id: string) => void;
-  // Animation state lifted to board level
-  isCompletingAnimation?: boolean;
-  onAnimationComplete?: () => void;
-}
-
-function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange, onReject, onTriggerClaude, hasActiveSession, onOpenSession, isCompletingAnimation = false, onAnimationComplete }: 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);
-      }
-    }
-  };
-
-  const canStart = item.status === 'backlog' || item.status === 'cancelled';
-
-  // A top-level item is reviewable when it's in-flight (in_progress) or in the done column
-  // Non-top-level items (chores/bugs with parents) are not reviewable
-  const isTopLevel = !item.parent_id;
-  const isReviewable = isTopLevel && (item.status === 'in_progress' || item.status === 'done');
-
-  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();
-
-  return (
-    <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>
-            )}
-            {/* Start button - shown for backlog/cancelled items */}
-            {canStart && onStatusChange && (
-              <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>
-            )}
-            {/* 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>
-            )}
-            {onStatusChange && (
-              <CardMenu
-                itemId={item.id}
-                itemTitle={item.title}
-                itemType={item.type}
-                currentStatus={item.status}
-                onStatusChange={handleStatusChange}
-                onTriggerClaude={onTriggerClaude}
-                hasActiveSession={hasActiveSession}
-                onOpenSession={onOpenSession}
-              />
-            )}
-          </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>
-  );
-}
-
-// 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) => void;
-  activeSessions?: Map<string, Session>;
-  onOpenSession?: (id: string) => void;
-  onError?: (message: string) => void;
-  // Animation state lifted to board level
-  animatingItemId?: number | null;
-  onAnimationComplete?: () => void;
-}
-
-function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onReject, onEpicAssign, onOrderChange, onTriggerClaude, activeSessions, onOpenSession, onError, animatingItemId, onAnimationComplete }: EpicGroupProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { isDragging, draggedItem, activeEpicZone, activeDropZone, dragPosition, draggedCardHeight, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
-
-  // 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;
-    }
-
-    // Get current item IDs from ref
-    const itemIds = new Set(itemsRef.current.map(item => item.id));
-
-    // Use cached card positions from registry, filtered to this epic's items
-    const allPositions = getCardPositions();
-    const cardPositions = allPositions
-      .filter(pos => itemIds.has(pos.id) && pos.id !== itemId)
-      .map(pos => ({
-        id: pos.id,
-        midY: (pos.rect.top + pos.rect.bottom) / 2,
-      }));
-
-    // Skip reorder if this is the only item in the epic (no other cards to reorder against)
-    if (cardPositions.length === 0) {
-      return;
-    }
-
-    // Sort by Y position
-    cardPositions.sort((a, b) => a.midY - b.midY);
-
-    // 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;
-      }
-    }
-
-    // Calculate new display_order with bounds checking
-    let newOrder = insertIndex * DISPLAY_ORDER_INCREMENT;
-    // Clamp to safe bounds to prevent overflow
-    newOrder = Math.max(MIN_DISPLAY_ORDER, Math.min(MAX_DISPLAY_ORDER, newOrder));
-
-    try {
-      await onOrderChangeRef.current(itemId, newOrder);
-    } catch (error) {
-      // Notify user via callback instead of alert() - items remain in original order
-      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 (dragPosition.y > pos.midY) {
-        insertAfterItemId = pos.id;
-      } else {
-        break;
-      }
-    }
+  const visible: [string, KanbanGroup][] = [];
+  let count = 0;
+  for (const entry of entries) {
+    if (count >= limit) break;
+    visible.push(entry);
+    count += entry[1].items.length;
   }
-
-  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" height={draggedCardHeight} />
-          )}
-        </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}
-                isCompletingAnimation={animatingItemId === item.id}
-                onAnimationComplete={onAnimationComplete}
-              />
-            </DraggableCard>
-            {/* Placeholder after this card */}
-            <AnimatePresence>
-              {insertAfterItemId === item.id && (
-                <PlaceholderCard key={`placeholder-${item.id}`} height={draggedCardHeight} />
-              )}
-            </AnimatePresence>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+  return { visible, totalCount, hasMore: count < totalCount };
 }
 
 interface KanbanColumnProps {
@@ -728,45 +41,44 @@ interface KanbanColumnProps {
   children: React.ReactNode;
   count: number;
   onAdd?: () => void;
+  addDisabled?: boolean;
 }
 
-function KanbanColumn({ title, children, count, onAdd }: KanbanColumnProps) {
+function KanbanColumn({ title, children, count, onAdd, addDisabled }: 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}
-                className="p-1 rounded 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 transition-colors"
+                disabled={addDisabled}
+                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' : `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">
+        <div className="overflow-y-auto flex-1 min-h-0 px-1 -mx-1">
           {children}
         </div>
       </div>
@@ -795,25 +107,30 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
   const handleBacklogReorder = useCallback(async (itemId: number, pointerY: number) => {
     if (!onOrderChangeRef.current) return;
 
-    // Get current backlog item IDs from ref
-    const backlogItemIds = new Set<number>();
+    // Collect all backlog items (excluding dragged item) with their data
+    const backlogItems: WorkItem[] = [];
     for (const group of backlogRef.current.values()) {
       for (const item of group.items) {
-        backlogItemIds.add(item.id);
+        if (item.id !== itemId) {
+          backlogItems.push(item);
+        }
       }
     }
 
-    // Use cached card positions from registry, filtered to backlog items
+    if (backlogItems.length === 0) return;
+
+    // Read fresh positions from DOM (not stale cache)
     const allPositions = getCardPositions();
+    const backlogItemIds = new Set(backlogItems.map(item => item.id));
     const cardPositions = allPositions
-      .filter(pos => backlogItemIds.has(pos.id) && pos.id !== itemId)
+      .filter(pos => backlogItemIds.has(pos.id))
       .map(pos => ({
         id: pos.id,
         midY: (pos.rect.top + pos.rect.bottom) / 2,
-      }));
+      }))
+      .sort((a, b) => a.midY - b.midY);
 
-    // Sort by Y position
-    cardPositions.sort((a, b) => a.midY - b.midY);
+    if (cardPositions.length === 0) return;
 
     // Find insertion index based on pointer Y
     let insertIndex = cardPositions.length;
@@ -824,9 +141,26 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
       }
     }
 
-    // Calculate new display_order with bounds checking
-    let newOrder = insertIndex * DISPLAY_ORDER_INCREMENT;
-    // Clamp to safe bounds to prevent overflow
+    // Map visual positions to items for display_order midpoint calculation
+    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
+    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));
 
     await onOrderChangeRef.current(itemId, newOrder);
@@ -840,7 +174,7 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
       }}
       onReorder={handleBacklogReorder}
       allowReorder={true}
-      className="rounded-lg p-2 -m-2 min-h-[100px]"
+      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"
       data-testid="backlog-drop-zone"
@@ -857,11 +191,13 @@ 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) => void;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
   // Multi-session support
   onOpenSession?: (id: string) => void;
+  onCloseSession?: (id: string) => void;
   activeSessions?: Map<string, Session>;
   // Undo/redo support
   onUndo?: () => Promise<UndoAction | null>;
@@ -872,15 +208,27 @@ interface KanbanBoardProps {
   onError?: (message: string) => void;
   // Add to backlog
   onAddToBacklog?: () => void;
+  // Usage limits
+  usageAllowed?: boolean;
   // External animation trigger (e.g., from CLI/DB completions detected via WebSocket)
   externalAnimatingItemId?: number | null;
   onExternalAnimationComplete?: () => void;
 }
 
-export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onReject, onOrderChange, onEpicAssign, onTriggerClaude, onOpenSession, activeSessions, onUndo, onRedo, canUndo, canRedo, onError, onAddToBacklog, externalAnimatingItemId, onExternalAnimationComplete }: KanbanBoardProps) {
+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) {
   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);
 
+  // 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 } = getVisibleEntries(backlogEntries, backlogLimit, showAllBacklog);
+  const { visible: visibleDone, hasMore: hasMoreDone } = getVisibleEntries(doneEntries, DONE_VISIBLE_LIMIT, showAllDone);
+
   // Keyboard shortcuts for undo/redo (Cmd+Z / Cmd+Shift+Z)
   useEffect(() => {
     const handleKeyDown = async (e: KeyboardEvent) => {
@@ -913,12 +261,17 @@ 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>();
+  // 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) {
-      inFlightEpicIds.add(epicId);
+      const existing = inFlightByEpic.get(epicId);
+      if (existing) {
+        existing.push(item);
+      } else {
+        inFlightByEpic.set(epicId, [item]);
+      }
     }
   }
 
@@ -1002,24 +355,24 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
     <DragProvider renderDragOverlay={renderDragOverlay} onRemoveFromEpic={onEpicAssign} onError={onError}>
     <div className="flex gap-4 overflow-x-auto h-full" data-testid="kanban-board">
       {/* Backlog Column */}
-      <KanbanColumn title="Backlog" count={backlogCount} onAdd={onAddToBacklog}>
+      <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"
+          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">
-              <div className="flex items-center gap-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 mb-2">
-                <span>🔥</span>
+            <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>
               </div>
-              <div className="space-y-2">
+              <div className="space-y-3">
                 {inFlight.map((item) => (
                   <DraggableCard key={item.id} item={item}>
                     <KanbanCard
@@ -1030,9 +383,12 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
                       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}
                     />
@@ -1041,8 +397,8 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
               </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>
+            <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>
           )}
@@ -1050,7 +406,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
 
         {/* Divider if both sections have content */}
         {(inFlight.length > 0 || backlog.size > 0) && (
-          <hr className="border-zinc-300 dark:border-zinc-700 my-4" />
+          <hr className="border-zinc-300 dark:border-zinc-700 my-6" />
         )}
 
         {/* Backlog Section - Drop Zone with Reordering */}
@@ -1060,36 +416,50 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
           onOrderChange={onOrderChange}
         >
           <div>
-            {/* Grouped Backlog Items */}
-            {Array.from(backlog.entries()).map(([key, group]) => (
+            {/* Grouped Backlog Items (lazy loaded) */}
+            {visibleBacklog.map(([key, group]) => (
               <EpicGroup
                 key={key}
                 epicId={group.epicId}
                 epicTitle={group.epicTitle}
                 items={group.items}
-                isInFlight={group.epicId ? inFlightEpicIds.has(group.epicId) : false}
+                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-sm text-zinc-500 text-center py-4">Drop items here for backlog</p>
+              <p className="text-base text-zinc-500 text-center py-4">Drop items here for backlog</p>
             )}
           </div>
         </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>
 
@@ -1100,11 +470,11 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
           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]) => (
+          {visibleDone.map(([key, group]) => (
             <EpicGroup
               key={key}
               epicId={group.epicId}
@@ -1114,15 +484,26 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
               onTitleSave={onTitleSave}
               onStatusChange={handleStatusChangeWithAnimation}
               onReject={onReject}
-              onEpicAssign={onEpicAssign}
               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-sm text-zinc-500 text-center py-4">Drop here to mark complete</p>
+            <p className="text-base text-zinc-500 text-center py-4">Drop here to mark complete</p>
           )}
         </DropZone>
       </KanbanColumn>