jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/RealTimeKanbanWrapper.tsx

@@ -1,20 +1,20 @@
 'use client';
 
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
 import { KanbanBoard } from './KanbanBoard';
+import { OnboardingWelcome } from './OnboardingWelcome';
 import { useToast } from './Toast';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
-import { useClaudeSession } from '../contexts/ClaudeSessionContext';
+import { useSessionState, useSessionActions, useSessionPersistence } from '../contexts/ClaudeSessionContext';
 import { useConnectionStatus } from '../contexts/ConnectionStatusContext';
-import type { InFlightItem, KanbanGroup, WorkItem } from '@/lib/db';
-import { UndoStack, type UndoAction } from '@/lib/undoStack';
+import { useUsage } from '../contexts/UsageContext';
+import type { InFlightItem, KanbanGroup } from '@/lib/db';
 import { getRegistry } from '@/lib/stream-manager-registry';
-
-interface KanbanData {
-  inFlight: InFlightItem[];
-  backlog: Map<string, KanbanGroup>;
-  done: Map<string, KanbanGroup>;
-}
+import { getWebSocketUrl } from '@/lib/utils';
+import { type KanbanData, findItemById, getOnboardingItems, buildStatusMap, buildModeMap } from '@/lib/kanban-utils';
+import { useKanbanUndo } from '../hooks/useKanbanUndo';
+import { useKanbanAnimation } from '../hooks/useKanbanAnimation';
 
 interface RealTimeKanbanWrapperProps {
   initialData: {
@@ -22,33 +22,17 @@ interface RealTimeKanbanWrapperProps {
     backlog: [string, KanbanGroup][];
     done: [string, KanbanGroup][];
   };
-}
-
-// Helper to find item by ID in the kanban data
-function findItemById(data: KanbanData, id: number): { item: InFlightItem; status: string } | null {
-  // Check in-flight (status: in_progress)
-  const inFlightItem = data.inFlight.find(item => item.id === id);
-  if (inFlightItem) return { item: inFlightItem, status: 'in_progress' };
-
-  // Check backlog groups
-  for (const group of data.backlog.values()) {
-    const backlogItem = group.items.find(item => item.id === id);
-    if (backlogItem) return { item: backlogItem as InFlightItem, status: 'backlog' };
-  }
-
-  // Check done groups
-  for (const group of data.done.values()) {
-    const doneItem = group.items.find(item => item.id === id);
-    if (doneItem) return { item: doneItem as InFlightItem, status: 'done' };
-  }
-
-  return null;
+  isBlank?: boolean;
+  projectPath?: string;
 }
 
 // Component uses context providers from AppShell (ToastProvider, ClaudeSessionProvider)
 // DO NOT wrap with duplicate providers - it creates isolated context state
-export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProps) {
+export function RealTimeKanbanWrapper({ initialData, isBlank, projectPath }: RealTimeKanbanWrapperProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
   const { showToast } = useToast();
+  const { allowed: usageAllowed } = useUsage();
   const [data, setData] = useState<KanbanData>(() => ({
     inFlight: initialData.inFlight,
     backlog: new Map(initialData.backlog),
@@ -56,69 +40,44 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
   }));
   const [statusError, setStatusError] = useState<string | null>(null);
 
+  // Ref to latest data — lets callbacks read current data without closing over it,
+  // keeping function references stable across data changes (preserves memo on cards)
+  const dataRef = useRef(data);
+  dataRef.current = data;
+
   // Use ClaudeSessionContext for session state and actions
-  // Note: ClaudePanel is rendered by AppShell, which handles most session UI
-  // This component only needs session state for KanbanBoard integration
+  const { sessions, standaloneSessions } = useSessionState();
+  const { setClaudePanelOpen, openSession, switchSession, closeSession, createAddToBacklogSession, sendMessage } = useSessionActions();
+  const { setSessions } = useSessionPersistence();
+
+  // Onboarding state: show OnboardingWelcome instead of KanbanBoard for blank projects
+  const [showOnboarding, setShowOnboarding] = useState(!!isBlank);
+  const onboardingItems = useMemo(() => getOnboardingItems(data), [data]);
+
+  // Animation state
   const {
-    setClaudePanelOpen,
-    sessions,
-    setSessions,
-    standaloneSessions,
-    openSession,
-    switchSession,
-    createAddToBacklogSession,
-  } = useClaudeSession();
-
-  // Undo/redo stack - created once per component instance
-  const [undoStack] = useState(() => new UndoStack());
-  const [undoRedoVersion, setUndoRedoVersion] = useState(0); // Force re-render on stack changes
-
-  // External completion animation state
-  const [externalAnimatingItemId, setExternalAnimatingItemId] = useState<number | null>(null);
-  const pendingDataRef = useRef<KanbanData | null>(null);
-
-  // Track items animated internally so WebSocket handler skips them
-  const lastInternallyAnimatedIdRef = useRef<number | null>(null);
-
-  // Build a status map from kanban data (item id -> status string)
-  const buildStatusMap = useCallback((kanbanData: KanbanData): Map<number, string> => {
-    const map = new Map<number, string>();
-    for (const item of kanbanData.inFlight) {
-      map.set(item.id, item.status);
-    }
-    for (const group of kanbanData.backlog.values()) {
-      for (const item of group.items) {
-        map.set(item.id, item.status);
-      }
-    }
-    for (const group of kanbanData.done.values()) {
-      for (const item of group.items) {
-        map.set(item.id, item.status);
-      }
+    externalAnimatingItemId,
+    setExternalAnimatingItemId,
+    pendingDataRef,
+    lastInternallyAnimatedIdRef,
+    handleExternalAnimationComplete: rawHandleExternalAnimationComplete,
+  } = useKanbanAnimation();
+
+  // Wrap animation complete to apply pending data
+  const handleExternalAnimationComplete = useCallback(() => {
+    const pending = rawHandleExternalAnimationComplete();
+    if (pending) {
+      setData(pending);
     }
-    return map;
-  }, []);
-
-  // Build a mode map from kanban data (feature id -> mode) for detecting mode transitions
-  const buildModeMap = useCallback((kanbanData: KanbanData): Map<number, string | null> => {
-    const map = new Map<number, string | null>();
-    const collectFeatures = (items: WorkItem[]) => {
-      for (const item of items) {
-        if (item.type === 'feature') {
-          map.set(item.id, item.mode);
-        }
-      }
-    };
-    collectFeatures(kanbanData.inFlight);
-    for (const group of kanbanData.backlog.values()) collectFeatures(group.items);
-    for (const group of kanbanData.done.values()) collectFeatures(group.items);
-    return map;
-  }, []);
+  }, [rawHandleExternalAnimationComplete]);
 
   // Track previous mode per feature to detect transitions
-  // Initialized lazily on first use (ref starts null, populated on first db_change)
   const previousModeMapRef = useRef<Map<number, string | null> | null>(null);
 
+  // Debounce + abort for WS-triggered kanban fetches
+  const dbChangeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const kanbanFetchAbortRef = useRef<AbortController | null>(null);
+
   const refreshData = useCallback(async (): Promise<KanbanData> => {
     const kanbanResponse = await fetch('/api/kanban');
     const newData = await kanbanResponse.json();
@@ -138,10 +97,8 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
       let hasChanges = false;
 
       for (const [sessionId, session] of updated.entries()) {
-        // Skip standalone sessions (they're not tied to work items)
         if (standaloneSessions.some(s => s.id === sessionId)) continue;
 
-        // Find the work item in kanban data
         const workItemId = parseInt(sessionId, 10);
         if (isNaN(workItemId)) continue;
 
@@ -156,95 +113,17 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
     });
   }, [standaloneSessions]);
 
-  const handleMessage = useCallback(async (message: WebSocketMessage) => {
-    if (message.type === 'db_change') {
-      // Snapshot current statuses before fetching new data
-      const oldStatusMap = buildStatusMap(data);
-
-      // Snapshot the internally-animated ID BEFORE the async fetch.
-      // handleStatusChange may clear this ref while our fetch is in flight,
-      // so we must capture it synchronously when the message arrives.
-      const internallyAnimatedId = lastInternallyAnimatedIdRef.current;
-
-      // Fetch new data without applying it yet
-      const kanbanResponse = await fetch('/api/kanban');
-      const rawData = await kanbanResponse.json();
-      const newKanbanData: KanbanData = {
-        inFlight: rawData.inFlight,
-        backlog: new Map(rawData.backlog),
-        done: new Map(rawData.done),
-      };
-      const newStatusMap = buildStatusMap(newKanbanData);
-
-      // Detect feature mode changes and inject gate cards into active sessions
-      const newModeMap = buildModeMap(newKanbanData);
-      if (previousModeMapRef.current) {
-        const registry = getRegistry();
-        for (const [featureId, newMode] of newModeMap) {
-          const oldMode = previousModeMapRef.current.get(featureId);
-          if (newMode && newMode !== oldMode) {
-            // Feature mode changed — inject gate into its session if active
-            const sessionId = String(featureId);
-            const streamManager = registry.get(sessionId);
-            if (streamManager) {
-              streamManager.injectGate(`mode-${newMode}-start`);
-            }
-          }
-        }
-      }
-      previousModeMapRef.current = newModeMap;
-
-      // Check if any item transitioned to done externally
-      let newlyDoneItemId: number | null = null;
-      for (const [id, newStatus] of newStatusMap) {
-        const oldStatus = oldStatusMap.get(id);
-        if (newStatus === 'done' && oldStatus && oldStatus !== 'done') {
-          newlyDoneItemId = id;
-          break; // Animate one at a time
-        }
-      }
-
-      if (newlyDoneItemId !== null && externalAnimatingItemId === null) {
-        // Skip if this item was just animated internally (UI-driven completion).
-        // We check the snapshot taken before the async fetch, not the current ref,
-        // because handleStatusChange clears the ref after refreshData completes —
-        // which can happen while our fetch is still in flight.
-        if (internallyAnimatedId === newlyDoneItemId) {
-          setData(newKanbanData);
-          syncSessionTitles(newKanbanData);
-          return;
-        }
-        // Hold new data, play animation on the old data first
-        pendingDataRef.current = newKanbanData;
-        setExternalAnimatingItemId(newlyDoneItemId);
-        syncSessionTitles(newKanbanData);
-      } else {
-        // No external completion to animate - apply data immediately
-        setData(newKanbanData);
-        syncSessionTitles(newKanbanData);
-      }
-    }
-  }, [data, buildStatusMap, buildModeMap, syncSessionTitles, externalAnimatingItemId]);
-
-  const handleTitleSave = useCallback(async (id: number, newTitle: string) => {
-    await fetch(`/api/work/${id}/title`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ title: newTitle }),
-    });
-    await refreshData();
-  }, [refreshData]);
+  // Undo/redo — use ref to break circular dependency with handleStatusChange
+  const pushActionRef = useRef<ReturnType<typeof useKanbanUndo>['pushAction']>(() => {});
 
   const handleStatusChange = useCallback(async (id: number, newStatus: string, skipUndo = false): Promise<{ success: boolean; notFound?: boolean }> => {
     setStatusError(null);
 
-    // Find the item to get its current status and title before the change
-    const found = findItemById(data, id);
+    const found = findItemById(dataRef.current, id);
     const previousStatus = found?.status;
     const itemTitle = found?.item.title ?? `Item #${id}`;
 
     try {
-      // Track internally-animated items so WebSocket handler skips the duplicate animation
       if (newStatus === 'done') {
         lastInternallyAnimatedIdRef.current = id;
       }
@@ -266,21 +145,18 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
         }
       }
 
-      // Push to undo stack if this is a user-initiated change (not undo/redo)
       if (!skipUndo && previousStatus && previousStatus !== newStatus) {
-        undoStack.push({
+        pushActionRef.current({
           type: 'status_change',
           itemId: id,
           itemTitle,
           before: previousStatus,
           after: newStatus,
+          timestamp: Date.now(),
         });
-        setUndoRedoVersion(v => v + 1); // Trigger re-render
       }
 
       await refreshData();
-      // Clear the internal animation guard after data is refreshed.
-      // This ensures all WebSocket db_change messages from this write are ignored.
       if (newStatus === 'done') {
         lastInternallyAnimatedIdRef.current = null;
       }
@@ -289,12 +165,105 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
       setStatusError('Failed to update status');
       return { success: false };
     }
-  }, [refreshData, data, undoStack]);
+  }, [refreshData, lastInternallyAnimatedIdRef]);
+
+  const { pushAction, handleUndo, handleRedo, canUndo, canRedo } = useKanbanUndo({
+    onStatusChange: handleStatusChange,
+    showToast,
+  });
+  pushActionRef.current = pushAction;
+
+  const handleMessage = useCallback((message: WebSocketMessage) => {
+    if (message.type === 'db_change') {
+      // Debounce: clear any pending fetch, coalesce rapid db_change events
+      if (dbChangeTimerRef.current) {
+        clearTimeout(dbChangeTimerRef.current);
+      }
+
+      dbChangeTimerRef.current = setTimeout(async () => {
+        // Abort any in-flight fetch from a previous db_change
+        if (kanbanFetchAbortRef.current) {
+          kanbanFetchAbortRef.current.abort();
+        }
+        const abortController = new AbortController();
+        kanbanFetchAbortRef.current = abortController;
+
+        const oldStatusMap = buildStatusMap(dataRef.current);
+        const internallyAnimatedId = lastInternallyAnimatedIdRef.current;
+
+        let rawData;
+        try {
+          const kanbanResponse = await fetch('/api/kanban', { signal: abortController.signal });
+          rawData = await kanbanResponse.json();
+        } catch (e: unknown) {
+          if (e instanceof DOMException && e.name === 'AbortError') return;
+          throw e;
+        }
+
+        const newKanbanData: KanbanData = {
+          inFlight: rawData.inFlight,
+          backlog: new Map(rawData.backlog),
+          done: new Map(rawData.done),
+        };
+        const newStatusMap = buildStatusMap(newKanbanData);
+
+        // Detect feature mode changes and inject gate cards into active sessions
+        const newModeMap = buildModeMap(newKanbanData);
+        if (previousModeMapRef.current) {
+          const registry = getRegistry();
+          for (const [featureId, newMode] of newModeMap) {
+            const oldMode = previousModeMapRef.current.get(featureId);
+            if (newMode && newMode !== oldMode) {
+              const sessionId = String(featureId);
+              const streamManager = registry.get(sessionId);
+              if (streamManager) {
+                streamManager.injectGate(`mode-${newMode}-start`);
+              }
+            }
+          }
+        }
+        previousModeMapRef.current = newModeMap;
+
+        // Check if any item transitioned to done externally
+        let newlyDoneItemId: number | null = null;
+        for (const [id, newStatus] of newStatusMap) {
+          const oldStatus = oldStatusMap.get(id);
+          if (newStatus === 'done' && oldStatus && oldStatus !== 'done') {
+            newlyDoneItemId = id;
+            break;
+          }
+        }
+
+        if (newlyDoneItemId !== null && externalAnimatingItemId === null) {
+          if (internallyAnimatedId === newlyDoneItemId) {
+            setData(newKanbanData);
+            syncSessionTitles(newKanbanData);
+            return;
+          }
+          pendingDataRef.current = newKanbanData;
+          setExternalAnimatingItemId(newlyDoneItemId);
+          syncSessionTitles(newKanbanData);
+        } else {
+          setData(newKanbanData);
+          syncSessionTitles(newKanbanData);
+        }
+      }, 150);
+    }
+  }, [syncSessionTitles, externalAnimatingItemId, lastInternallyAnimatedIdRef, pendingDataRef, setExternalAnimatingItemId]);
+
+  const handleTitleSave = useCallback(async (id: number, newTitle: string) => {
+    await fetch(`/api/work/${id}/title`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title: newTitle }),
+    });
+    await refreshData();
+  }, [refreshData]);
 
   const handleReject = useCallback(async (id: number, reason: string) => {
     setStatusError(null);
 
-    const found = findItemById(data, id);
+    const found = findItemById(dataRef.current, id);
     const previousStatus = found?.status;
     const itemTitle = found?.item.title ?? `Item #${id}`;
 
@@ -309,24 +278,38 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
         return;
       }
 
-      // Push to undo stack
       if (previousStatus && previousStatus !== 'in_progress') {
-        undoStack.push({
+        pushAction({
           type: 'status_change',
           itemId: id,
           itemTitle,
           before: previousStatus,
           after: 'in_progress',
+          timestamp: Date.now(),
         });
-        setUndoRedoVersion(v => v + 1);
       }
 
       await refreshData();
       showToast(`Rejected: "${itemTitle}" — ${reason}`);
+
+      // Open chat session for the rejected item so Claude can address the rejection
+      const sessionId = String(id);
+      const itemType = found?.item.type ?? 'chore';
+      openSession(sessionId, itemTitle, itemType, false, null, true);
+
+      // Inject rejection gate card on next tick
+      // (after React state updates from openSession have been committed)
+      setTimeout(() => {
+        const registry = getRegistry();
+        const streamManager = registry.get(sessionId);
+        if (streamManager) {
+          streamManager.injectGate('rejection', { reason });
+        }
+      }, 0);
     } catch {
       setStatusError('Failed to reject item');
     }
-  }, [refreshData, data, undoStack, showToast]);
+  }, [refreshData, pushAction, showToast, openSession]);
 
   const handleOrderChange = useCallback(async (id: number, newOrder: number) => {
     try {
@@ -358,120 +341,69 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
     }
   }, [refreshData, showToast]);
 
-  // Error handler for drag-and-drop operations
   const handleDragError = useCallback((message: string) => {
     showToast(message, 'error');
   }, [showToast]);
 
-  // Helper to format status for display
-  const formatStatus = (status: string): string => {
-    switch (status) {
-      case 'in_progress': return 'In Flight';
-      case 'backlog': return 'Backlog';
-      case 'done': return 'Done';
-      default: return status;
-    }
-  };
-
-  // Undo the most recent status change
-  const handleUndo = useCallback(async (): Promise<UndoAction | null> => {
-    const action = undoStack.undo();
-    if (!action) return null;
-
-    // Revert the status change (skipUndo=true to prevent adding to undo stack)
-    const result = await handleStatusChange(action.itemId, action.before, true);
-    setUndoRedoVersion(v => v + 1);
-
-    if (result.notFound) {
-      // Item was deleted - show error toast (statusError already set by handleStatusChange)
-      // The action is already removed from undo stack and won't be in redo stack
-      // because we didn't push it back - just leave it removed
-      showToast(`Item no longer exists: "${action.itemTitle}" was deleted`, 'error');
-      return null;
-    }
-
-    if (!result.success) {
-      // Other error - push action back to undo stack so user can retry
-      undoStack.push({
-        type: action.type,
-        itemId: action.itemId,
-        itemTitle: action.itemTitle,
-        before: action.after, // Swap because we want to retry undoing
-        after: action.before,
-      });
-      return null;
-    }
-
-    // Show success toast notification
-    showToast(`Undone: "${action.itemTitle}" moved back to ${formatStatus(action.before)}`);
-
-    return action;
-  }, [undoStack, handleStatusChange, showToast]);
-
-  // Redo the most recently undone status change
-  const handleRedo = useCallback(async (): Promise<UndoAction | null> => {
-    const action = undoStack.redo();
-    if (!action) return null;
-
-    // Re-apply the status change (skipUndo=true to prevent adding to undo stack)
-    const result = await handleStatusChange(action.itemId, action.after, true);
-    setUndoRedoVersion(v => v + 1);
-
-    if (result.notFound) {
-      // Item was deleted - show error toast
-      showToast(`Item no longer exists: "${action.itemTitle}" was deleted`, 'error');
-      return null;
-    }
+  // Claude panel handlers
+  const handleTriggerClaude = useCallback((id: number, title: string, type: string, conversational?: boolean, description?: string | null) => {
+    openSession(String(id), title, type, conversational, description);
+  }, [openSession]);
 
-    if (!result.success) {
-      // Other error - push action back to redo stack so user can retry
-      // Note: This is a simplification; in production you might want more sophisticated retry logic
-      return null;
-    }
+  const handleOpenSession = useCallback(async (id: string) => {
+    await switchSession(id);
+    setClaudePanelOpen(true);
+  }, [switchSession, setClaudePanelOpen]);
 
-    // Show success toast notification
-    showToast(`Redone: "${action.itemTitle}" moved to ${formatStatus(action.after)}`);
+  const handleCloseSession = useCallback((id: string) => {
+    closeSession(id);
+  }, [closeSession]);
 
-    return action;
-  }, [undoStack, handleStatusChange, showToast]);
+  const handleRestart = useCallback((id: number) => {
+    const found = findItemById(dataRef.current, id);
+    if (!found) return;
 
-  // Expose undo stack state
-  const canUndo = undoStack.canUndo();
-  const canRedo = undoStack.canRedo();
+    const sessionId = String(id);
+    const itemTitle = found.item.title ?? `Item #${id}`;
+    const itemType = found.item.type ?? 'chore';
+    const reason = found.item.rejection_reason;
+    if (!reason) return;
 
-  // Called when external completion animation finishes - apply the pending data
-  const handleExternalAnimationComplete = useCallback(() => {
-    setExternalAnimatingItemId(null);
-    if (pendingDataRef.current) {
-      setData(pendingDataRef.current);
-      pendingDataRef.current = null;
-    }
-  }, []);
+    openSession(sessionId, itemTitle, itemType);
 
-  // Claude panel handlers - multi-session support
-  const handleTriggerClaude = useCallback((id: number, title: string, type: string) => {
-    // Use context's openSession - handles existing session check, creation, and streaming
-    openSession(String(id), title, type);
+    setTimeout(() => {
+      const registry = getRegistry();
+      const streamManager = registry.get(sessionId);
+      if (streamManager) {
+        streamManager.injectGate('rejection', { reason });
+      }
+    }, 0);
   }, [openSession]);
 
-  // Open an existing session (for card icon click)
-  const handleOpenSession = useCallback(async (id: string) => {
-    // Use context's switchSession to load content, then open panel
-    await switchSession(id);
-    setClaudePanelOpen(true);
-  }, [switchSession, setClaudePanelOpen]);
-
-  // Add to backlog handler - uses context's specialized method
   const handleAddToBacklog = useCallback(async () => {
     await createAddToBacklogSession();
   }, [createAddToBacklogSession]);
 
-  const wsUrl = typeof window !== 'undefined'
-    ? `ws://${window.location.hostname}:47808`
-    : 'ws://localhost:47808';
+  // Onboarding: when user clicks start on first chore, transition to normal view
+  const handleStartOnboardingChore = useCallback(async (id: number, title: string) => {
+    await handleStatusChange(id, 'in_progress');
+    const found = findItemById(dataRef.current, id);
+    const type = found?.item.type ?? 'chore';
+    const description = found?.item.description ?? null;
+    openSession(String(id), title, type, true, description);
+    setShowOnboarding(false);
+  }, [handleStatusChange, openSession]);
+
+  // Cleanup debounce timer and in-flight fetch on unmount
+  useEffect(() => {
+    return () => {
+      if (dbChangeTimerRef.current) clearTimeout(dbChangeTimerRef.current);
+      if (kanbanFetchAbortRef.current) kanbanFetchAbortRef.current.abort();
+    };
+  }, []);
 
   const { isConnected, isReconnecting } = useWebSocket({
-    url: wsUrl,
+    url: getWebSocketUrl(),
     onMessage: handleMessage,
   });
 
@@ -482,9 +414,32 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
     setConnectionStatus(status);
   }, [isConnected, isReconnecting, setConnectionStatus]);
 
+  // Handle rejection from detail page — open chat session for the rejected item
+  useEffect(() => {
+    const rejectedId = searchParams.get('rejected');
+    const reason = searchParams.get('reason');
+    if (!rejectedId || !reason) return;
+
+    // Clean the URL immediately
+    router.replace('/', { scroll: false });
+
+    const found = findItemById(dataRef.current, parseInt(rejectedId, 10));
+    const itemTitle = found?.item.title ?? `Item #${rejectedId}`;
+    const itemType = found?.item.type ?? 'chore';
+
+    openSession(rejectedId, itemTitle, itemType, false, null, true);
+
+    setTimeout(() => {
+      const registry = getRegistry();
+      const streamManager = registry.get(rejectedId);
+      if (streamManager) {
+        streamManager.injectGate('rejection', { reason });
+      }
+    }, 0);
+  }, [searchParams, router, openSession]);
+
   return (
     <div className="h-full flex flex-col">
-      {/* Status Error Display */}
       {statusError && (
         <div
           className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded-lg flex items-center justify-between flex-shrink-0"
@@ -501,29 +456,38 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
         </div>
       )}
       <div className="flex-1 min-h-0">
-        <KanbanBoard
-          inFlight={data.inFlight}
-          backlog={data.backlog}
-          done={data.done}
-          onTitleSave={handleTitleSave}
-          onStatusChange={handleStatusChange}
-          onReject={handleReject}
-          onOrderChange={handleOrderChange}
-          onEpicAssign={handleEpicAssign}
-          onTriggerClaude={handleTriggerClaude}
-          onOpenSession={handleOpenSession}
-          activeSessions={sessions}
-          onUndo={handleUndo}
-          onRedo={handleRedo}
-          canUndo={canUndo}
-          canRedo={canRedo}
-          onError={handleDragError}
-          onAddToBacklog={handleAddToBacklog}
-          externalAnimatingItemId={externalAnimatingItemId}
-          onExternalAnimationComplete={handleExternalAnimationComplete}
-        />
+        {showOnboarding ? (
+          <OnboardingWelcome
+            onboardingItems={onboardingItems}
+            onStartChore={handleStartOnboardingChore}
+          />
+        ) : (
+          <KanbanBoard
+            inFlight={data.inFlight}
+            backlog={data.backlog}
+            done={data.done}
+            onTitleSave={handleTitleSave}
+            onStatusChange={handleStatusChange}
+            onReject={handleReject}
+            onRestart={handleRestart}
+            onOrderChange={handleOrderChange}
+            onEpicAssign={handleEpicAssign}
+            onTriggerClaude={handleTriggerClaude}
+            onOpenSession={handleOpenSession}
+            onCloseSession={handleCloseSession}
+            activeSessions={sessions}
+            onUndo={handleUndo}
+            onRedo={handleRedo}
+            canUndo={canUndo}
+            canRedo={canRedo}
+            onError={handleDragError}
+            onAddToBacklog={handleAddToBacklog}
+            usageAllowed={usageAllowed}
+            externalAnimatingItemId={externalAnimatingItemId}
+            onExternalAnimationComplete={handleExternalAnimationComplete}
+          />
+        )}
       </div>
-      {/* ClaudePanel is rendered by AppShell - DO NOT duplicate here */}
     </div>
   );
 }