jettypod 4.4.83 → 4.4.84

package/apps/dashboard/components/DragContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState, useCallback, useRef, ReactNode } from 'react';
+import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import type { WorkItem } from '@/lib/db';
 
@@ -27,14 +27,21 @@ interface CardPosition {
   rect: DOMRect;
 }
 
+interface InsertionPreview {
+  afterCardId: number | null; // null means insert at beginning
+  zoneId: string; // epic zone or drop zone id
+}
+
 interface DragContextType {
   isDragging: boolean;
   draggedItem: WorkItem | null;
   activeDropZone: string | null;
   activeEpicZone: string | null;
+  insertionPreview: InsertionPreview | null;
   dragPosition: { x: number; y: number };
   dragOffset: { x: number; y: number };
   draggedCardWidth: number;
+  draggedCardHeight: number;
   setDraggedItem: (item: WorkItem | null) => void;
   registerDropZone: (id: string, info: DropZoneInfo) => void;
   unregisterDropZone: (id: string) => void;
@@ -53,9 +60,11 @@ const DragContext = createContext<DragContextType>({
   draggedItem: null,
   activeDropZone: null,
   activeEpicZone: null,
+  insertionPreview: null,
   dragPosition: { x: 0, y: 0 },
   dragOffset: { x: 0, y: 0 },
   draggedCardWidth: 0,
+  draggedCardHeight: 0,
   setDraggedItem: () => {},
   registerDropZone: () => {},
   unregisterDropZone: () => {},
@@ -72,19 +81,23 @@ const DragContext = createContext<DragContextType>({
 interface DragProviderProps {
   children: ReactNode;
   renderDragOverlay?: (item: WorkItem) => ReactNode;
+  onRemoveFromEpic?: EpicAssignHandler;
 }
 
-export function DragProvider({ children, renderDragOverlay }: DragProviderProps) {
+export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic }: DragProviderProps) {
   const [draggedItem, setDraggedItem] = useState<WorkItem | null>(null);
   const [activeDropZone, setActiveDropZone] = useState<string | null>(null);
   const [activeEpicZone, setActiveEpicZone] = useState<string | null>(null);
+  const [insertionPreview, setInsertionPreview] = useState<InsertionPreview | null>(null);
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [draggedCardWidth, setDraggedCardWidth] = useState(0);
+  const [draggedCardHeight, setDraggedCardHeight] = useState(0);
   const dropZonesRef = useRef<Map<string, DropZoneInfo>>(new Map());
   const epicDropZonesRef = useRef<Map<string, EpicDropZoneInfo>>(new Map());
   const cardPositionsRef = useRef<Map<number, DOMRect>>(new Map());
   const pointerPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const draggedItemRef = useRef<WorkItem | null>(null);
 
   const registerDropZone = useCallback((id: string, info: DropZoneInfo) => {
     dropZonesRef.current.set(id, info);
@@ -103,10 +116,12 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
   }, []);
 
   const registerCardPosition = useCallback((id: number, rect: DOMRect) => {
+    console.log('[DragContext] registerCardPosition:', id, 'rect:', { top: rect.top, bottom: rect.bottom });
     cardPositionsRef.current.set(id, rect);
   }, []);
 
   const unregisterCard = useCallback((id: number) => {
+    console.log('[DragContext] unregisterCard:', id);
     cardPositionsRef.current.delete(id);
   }, []);
 
@@ -115,6 +130,7 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
     cardPositionsRef.current.forEach((rect, id) => {
       positions.push({ id, rect });
     });
+    console.log('[DragContext] getCardPositions:', positions.length, 'positions', positions.map(p => ({ id: p.id, midY: (p.rect.top + p.rect.bottom) / 2 })));
     return positions;
   }, []);
 
@@ -142,6 +158,32 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
 
     setActiveDropZone(foundZone);
     setActiveEpicZone(foundEpicZone);
+
+    // Calculate insertion preview based on pointer position
+    const zoneId = foundEpicZone || foundZone;
+    if (zoneId && draggedItemRef.current) {
+      const allPositions = Array.from(cardPositionsRef.current.entries())
+        .filter(([id]) => id !== draggedItemRef.current?.id)
+        .map(([id, rect]) => ({
+          id,
+          midY: (rect.top + rect.bottom) / 2,
+        }))
+        .sort((a, b) => a.midY - b.midY);
+
+      // Find which card the pointer is after
+      let afterCardId: number | null = null;
+      for (const pos of allPositions) {
+        if (y > pos.midY) {
+          afterCardId = pos.id;
+        } else {
+          break;
+        }
+      }
+
+      setInsertionPreview({ afterCardId, zoneId });
+    } else {
+      setInsertionPreview(null);
+    }
   }, []);
 
   const startDrag = useCallback((item: WorkItem, cardRect: DOMRect, pointerX: number, pointerY: number) => {
@@ -151,52 +193,106 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
     setDragOffset({ x: offsetX, y: offsetY });
     setDragPosition({ x: pointerX, y: pointerY });
     setDraggedCardWidth(cardRect.width);
+    setDraggedCardHeight(cardRect.height);
     setDraggedItem(item);
+    draggedItemRef.current = item;
   }, []);
 
   const handleDrop = useCallback(async () => {
+    console.log('[DragContext] handleDrop called:', {
+      draggedItem: draggedItem ? { id: draggedItem.id, parent_id: draggedItem.parent_id, epic_id: draggedItem.epic_id } : null,
+      activeEpicZone,
+      activeDropZone
+    });
     if (!draggedItem) return;
 
     // Check for epic drop zone first (more specific drop target)
     if (activeEpicZone) {
       const epicZoneInfo = epicDropZonesRef.current.get(activeEpicZone);
+      console.log('[DragContext] epicZoneInfo:', epicZoneInfo ? { epicId: epicZoneInfo.epicId, hasOnReorder: !!epicZoneInfo.onReorder } : null);
       if (epicZoneInfo) {
         const currentEpicId = draggedItem.parent_id || draggedItem.epic_id;
+        console.log('[DragContext] currentEpicId:', currentEpicId, 'targetEpicId:', epicZoneInfo.epicId);
 
         // Same epic - reorder within epic
         if (currentEpicId === epicZoneInfo.epicId && epicZoneInfo.onReorder) {
+          console.log('[DragContext] Same epic - calling onReorder');
           await epicZoneInfo.onReorder(draggedItem.id, pointerPositionRef.current.y);
           return;
         }
 
         // Different epic - assign to new epic
         if (currentEpicId !== epicZoneInfo.epicId) {
+          console.log('[DragContext] Different epic - calling onEpicAssign');
           await epicZoneInfo.onEpicAssign(draggedItem.id, epicZoneInfo.epicId);
           return;
         }
       }
     }
 
-    // Otherwise handle status drop zone
-    if (!activeDropZone) return;
+    // Check if card is being removed from an epic (dropped outside all epic zones)
+    const currentEpicId = draggedItem.parent_id || draggedItem.epic_id;
+    if (!activeEpicZone && currentEpicId && onRemoveFromEpic) {
+      console.log('[DragContext] Removing from epic - card has epic_id but dropped outside epic zones');
+      await onRemoveFromEpic(draggedItem.id, null);
+      // Continue to also handle status change if needed
+    }
+
+    // Handle status drop zone
+    if (!activeDropZone) {
+      console.log('[DragContext] No activeDropZone, returning');
+      return;
+    }
 
     const zoneInfo = dropZonesRef.current.get(activeDropZone);
-    if (!zoneInfo) return;
+    if (!zoneInfo) {
+      console.log('[DragContext] No zoneInfo for activeDropZone:', activeDropZone);
+      return;
+    }
+
+    console.log('[DragContext] Status drop zone:', { targetStatus: zoneInfo.targetStatus, itemStatus: draggedItem.status, hasOnReorder: !!zoneInfo.onReorder });
 
     // Check if this is a status change or a reorder
     if (draggedItem.status !== zoneInfo.targetStatus) {
       // Status change
+      console.log('[DragContext] Status change - calling onDrop');
       await zoneInfo.onDrop(draggedItem.id, zoneInfo.targetStatus);
     } else if (zoneInfo.onReorder) {
       // Reorder within same status
+      console.log('[DragContext] Same status - calling onReorder');
       await zoneInfo.onReorder(draggedItem.id, pointerPositionRef.current.y);
+    } else {
+      console.log('[DragContext] Same status but no onReorder handler');
     }
-  }, [activeDropZone, activeEpicZone, draggedItem]);
+  }, [activeDropZone, activeEpicZone, draggedItem, onRemoveFromEpic]);
 
   // Calculate overlay position (pointer position minus offset = card top-left)
   const overlayX = dragPosition.x - dragOffset.x;
   const overlayY = dragPosition.y - dragOffset.y;
 
+  // Wrap setDraggedItem to also clear ref and preview
+  const handleSetDraggedItem = useCallback((item: WorkItem | null) => {
+    setDraggedItem(item);
+    draggedItemRef.current = item;
+    if (!item) {
+      setInsertionPreview(null);
+    }
+  }, []);
+
+  // Cancel drag on Escape key
+  useEffect(() => {
+    if (!draggedItem) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleSetDraggedItem(null);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [draggedItem, handleSetDraggedItem]);
+
   return (
     <DragContext.Provider
       value={{
@@ -204,10 +300,12 @@ export function DragProvider({ children, renderDragOverlay }: DragProviderProps)
         draggedItem,
         activeDropZone,
         activeEpicZone,
+        insertionPreview,
         dragPosition,
         dragOffset,
         draggedCardWidth,
-        setDraggedItem,
+        draggedCardHeight,
+        setDraggedItem: handleSetDraggedItem,
         registerDropZone,
         unregisterDropZone,
         registerEpicDropZone,

package/apps/dashboard/components/DraggableCard.tsx

@@ -83,6 +83,10 @@ export function DraggableCard({ item, children, disabled = false }: DraggableCar
       whileDrag={{
         cursor: 'grabbing',
         opacity: 0,
+        height: 0,
+        marginBottom: 0,
+        padding: 0,
+        overflow: 'hidden',
       }}
       onDragStart={handleDragStart}
       onDrag={handleDrag}

package/apps/dashboard/components/KanbanBoard.tsx

@@ -3,6 +3,7 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { AnimatePresence } from 'framer-motion';
 import type { WorkItem, InFlightItem, KanbanGroup } from '@/lib/db';
 import type { UndoAction } from '@/lib/undoStack';
 import { EditableTitle } from './EditableTitle';
@@ -10,6 +11,7 @@ import { CardMenu } from './CardMenu';
 import { DragProvider, useDragContext } from './DragContext';
 import { DraggableCard } from './DraggableCard';
 import { DropZone } from './DropZone';
+import { PlaceholderCard } from './PlaceholderCard';
 
 const typeIcons: Record<string, string> = {
   epic: '🎯',
@@ -257,26 +259,42 @@ interface EpicGroupProps {
 
 function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onEpicAssign, onOrderChange }: EpicGroupProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const { isDragging, draggedItem, activeEpicZone, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
+  const { isDragging, draggedItem, activeEpicZone, activeDropZone, dragPosition, draggedCardHeight, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
 
-  // Get item IDs in this epic for filtering
-  const itemIds = useMemo(() => new Set(items.map(item => item.id)), [items]);
+  // Use ref for items to avoid re-registering drop zone when items change
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
 
-  // Handle reorder within this epic - calculate new display_order based on pointer Y
+  // Use ref for callbacks to keep drop zone registration stable
+  const onOrderChangeRef = useRef(onOrderChange);
+  onOrderChangeRef.current = onOrderChange;
+
+  // Stable reorder handler that reads from refs
   const handleEpicReorder = useCallback(async (itemId: number, pointerY: number) => {
-    if (!onOrderChange) return;
+    console.log('[EpicGroup] handleEpicReorder called:', { itemId, pointerY, epicId });
+    if (!onOrderChangeRef.current) {
+      console.log('[EpicGroup] No onOrderChange, returning');
+      return;
+    }
+
+    // Get current item IDs from ref
+    const itemIds = new Set(itemsRef.current.map(item => item.id));
+    console.log('[EpicGroup] itemIds in this epic:', Array.from(itemIds));
 
     // Use cached card positions from registry, filtered to this epic's items
     const allPositions = getCardPositions();
+    console.log('[EpicGroup] allPositions:', allPositions.length);
     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,
       }));
+    console.log('[EpicGroup] filtered cardPositions:', cardPositions);
 
     // Skip reorder if this is the only item in the epic (no other cards to reorder against)
     if (cardPositions.length === 0) {
+      console.log('[EpicGroup] No other cards to reorder against, returning');
       return;
     }
 
@@ -294,18 +312,21 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
 
     // Calculate new display_order using index * 10
     const newOrder = insertIndex * 10;
+    console.log('[EpicGroup] Calculated insertIndex:', insertIndex, 'newOrder:', newOrder, 'for itemId:', itemId);
 
     try {
-      await onOrderChange(itemId, newOrder);
+      console.log('[EpicGroup] Calling onOrderChange...');
+      await onOrderChangeRef.current(itemId, newOrder);
+      console.log('[EpicGroup] onOrderChange completed successfully');
     } catch (error) {
       // Log error and notify user - items remain in original order since state wasn't updated
-      console.error('Failed to reorder item:', error);
+      console.error('[EpicGroup] Failed to reorder item:', error);
       // Show user-friendly error notification
       alert('Failed to reorder item. Please try again.');
     }
-  }, [onOrderChange, getCardPositions, itemIds]);
+  }, [getCardPositions]);
 
-  // Register as epic drop zone
+  // Register as epic drop zone - stable registration that doesn't change with items
   useEffect(() => {
     if (!containerRef.current || !onEpicAssign || epicId === null) return;
 
@@ -314,13 +335,13 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
       epicId,
       element: containerRef.current,
       onEpicAssign,
-      onReorder: onOrderChange ? handleEpicReorder : undefined,
+      onReorder: handleEpicReorder,
     });
 
     return () => {
       unregisterEpicDropZone(zoneId);
     };
-  }, [epicId, onEpicAssign, onOrderChange, handleEpicReorder, registerEpicDropZone, unregisterEpicDropZone]);
+  }, [epicId, onEpicAssign, handleEpicReorder, registerEpicDropZone, unregisterEpicDropZone]);
 
   // Check if this epic zone is the active drop target
   const isActiveTarget = activeEpicZone === `epic-${epicId}`;
@@ -335,7 +356,45 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
   // Show reorder highlight when dragging within same epic (purple)
   const showReorderHighlight = isActiveTarget && isSameEpic;
 
-  if (items.length === 0 && !showHighlight && !showReorderHighlight) return null;
+  // 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;
+      }
+    }
+  }
+
+  if (items.length === 0 && !showHighlight && !showReorderHighlight && !shouldRenderUngroupedZone) return null;
 
   return (
     <div
@@ -345,6 +404,8 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
           ? '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}
@@ -375,11 +436,43 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
           )}
         </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 && (
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-xs font-medium text-zinc-400 dark:text-zinc-500">Ungrouped</span>
+          {showRemoveFromEpicZone && (
+            <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) => (
-          <DraggableCard key={item.id} item={item} disabled={!isDraggable}>
-            <KanbanCard item={item} onTitleSave={onTitleSave} onStatusChange={onStatusChange} />
-          </DraggableCard>
+          <div key={item.id}>
+            <DraggableCard item={item} disabled={!isDraggable}>
+              <KanbanCard item={item} onTitleSave={onTitleSave} onStatusChange={onStatusChange} />
+            </DraggableCard>
+            {/* Placeholder after this card */}
+            <AnimatePresence>
+              {insertAfterItemId === item.id && (
+                <PlaceholderCard key={`placeholder-${item.id}`} height={draggedCardHeight} />
+              )}
+            </AnimatePresence>
+          </div>
         ))}
       </div>
     </div>
@@ -422,20 +515,23 @@ interface BacklogDropZoneWrapperProps {
 function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, children }: BacklogDropZoneWrapperProps) {
   const { getCardPositions } = useDragContext();
 
-  // Get all backlog item IDs for filtering positions
-  const backlogItemIds = useMemo(() => {
-    const ids = new Set<number>();
-    for (const group of backlog.values()) {
-      for (const item of group.items) {
-        ids.add(item.id);
-      }
-    }
-    return ids;
-  }, [backlog]);
+  // Use refs to keep handler stable
+  const backlogRef = useRef(backlog);
+  backlogRef.current = backlog;
+  const onOrderChangeRef = useRef(onOrderChange);
+  onOrderChangeRef.current = onOrderChange;
 
   // Handle reorder within backlog - calculate new display_order based on pointer Y
   const handleBacklogReorder = useCallback(async (itemId: number, pointerY: number) => {
-    if (!onOrderChange) return;
+    if (!onOrderChangeRef.current) return;
+
+    // Get current backlog item IDs from ref
+    const backlogItemIds = new Set<number>();
+    for (const group of backlogRef.current.values()) {
+      for (const item of group.items) {
+        backlogItemIds.add(item.id);
+      }
+    }
 
     // Use cached card positions from registry, filtered to backlog items
     const allPositions = getCardPositions();
@@ -462,8 +558,8 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
     // Use index * 10 to leave room for future insertions
     const newOrder = insertIndex * 10;
 
-    await onOrderChange(itemId, newOrder);
-  }, [onOrderChange, getCardPositions, backlogItemIds]);
+    await onOrderChangeRef.current(itemId, newOrder);
+  }, [getCardPositions]);
 
   return (
     <DropZone
@@ -561,7 +657,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
   }, [inFlight]);
 
   return (
-    <DragProvider renderDragOverlay={renderDragOverlay}>
+    <DragProvider renderDragOverlay={renderDragOverlay} onRemoveFromEpic={onEpicAssign}>
     <div className="flex gap-4 overflow-x-auto h-full" data-testid="kanban-board">
       {/* Backlog Column */}
       <KanbanColumn title="Backlog" count={backlogCount}>

package/apps/dashboard/components/PlaceholderCard.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface PlaceholderCardProps {
+  height: number;
+  minHeight?: number;
+}
+
+const DEFAULT_MIN_HEIGHT = 40;
+
+export function PlaceholderCard({ height, minHeight = DEFAULT_MIN_HEIGHT }: PlaceholderCardProps) {
+  const effectiveHeight = Math.max(height, minHeight);
+
+  return (
+    <motion.div
+      data-testid="drag-placeholder"
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 0.6, height: effectiveHeight }}
+      exit={{ opacity: 0, height: 0 }}
+      transition={{ duration: 0.2, ease: 'easeOut' }}
+      style={{
+        borderRadius: 8,
+        border: '2px dashed rgba(100, 116, 139, 0.4)',
+        backgroundColor: 'rgba(100, 116, 139, 0.1)',
+        marginBottom: 8,
+      }}
+    />
+  );
+}

package/apps/dashboard/components/RealTimeKanbanWrapper.tsx

@@ -146,15 +146,18 @@ function RealTimeKanbanContent({ initialData, initialDecisions }: RealTimeKanban
   }, [refreshData, data, undoStack]);
 
   const handleOrderChange = useCallback(async (id: number, newOrder: number) => {
+    console.log('[RealTimeKanban] handleOrderChange called:', { id, newOrder });
     try {
-      await fetch(`/api/work/${id}/order`, {
+      const response = await fetch(`/api/work/${id}/order`, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ display_order: newOrder }),
       });
+      console.log('[RealTimeKanban] Order API response:', response.status, await response.clone().json());
       await refreshData();
-    } catch {
-      // Silently fail order changes
+      console.log('[RealTimeKanban] Data refreshed after order change');
+    } catch (error) {
+      console.error('[RealTimeKanban] Order change failed:', error);
     }
   }, [refreshData]);
 

package/apps/dashboard/lib/db.ts

@@ -337,6 +337,15 @@ export function getKanbanData(doneLimit: number = 50): KanbanData {
       }
     }
 
+    // Always ensure an ungrouped entry exists in backlog for drag-drop target
+    if (!backlogGroups.has('ungrouped')) {
+      backlogGroups.set('ungrouped', {
+        epicId: null,
+        epicTitle: null,
+        items: []
+      });
+    }
+
     // Sort done items by completed_at DESC (newest first) within each group
     for (const [, group] of doneGroups) {
       group.items.sort((a, b) => {

package/jettypod.js

@@ -2158,38 +2158,42 @@ switch (command) {
         return null;
       };
 
+      // Kill any stale dashboard processes on ports 3456-3465 BEFORE finding port
+      // This ensures we start fresh on 3456 instead of hopping to higher ports
+      try {
+        const { execSync } = require('child_process');
+        for (let port = BASE_PORT; port < BASE_PORT + 10; port++) {
+          try {
+            const result = execSync(`lsof -ti :${port}`, { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] });
+            const pids = result.trim().split('\n').filter(p => p);
+            for (const pid of pids) {
+              execSync(`kill -9 ${pid}`, { stdio: 'ignore' });
+            }
+          } catch (e) { /* no process on this port */ }
+        }
+      } catch (e) { /* ignore cleanup errors */ }
+
       const availablePort = await findAvailablePort(BASE_PORT);
 
       if (availablePort) {
         // Check if dashboard dependencies are installed (lazy install on first use)
         const dashboardNodeModules = path.join(dashboardPath, 'node_modules');
-        const dashboardNextBuild = path.join(dashboardPath, '.next');
 
-        if (!fs.existsSync(dashboardNodeModules) || !fs.existsSync(dashboardNextBuild)) {
-          console.log('Setting up dashboard for first use...');
+        if (!fs.existsSync(dashboardNodeModules)) {
+          console.log('Installing dashboard dependencies...');
 
           try {
-            // Install dependencies
-            console.log('  Installing dependencies...');
             const { execSync } = require('child_process');
             execSync('npm install', {
               cwd: dashboardPath,
               stdio: 'inherit'
             });
-
-            // Build the dashboard
-            console.log('  Building dashboard...');
-            execSync('npm run build', {
-              cwd: dashboardPath,
-              stdio: 'inherit'
-            });
-
-            console.log('✅ Dashboard setup complete!');
+            console.log('✅ Dependencies installed');
             console.log('');
           } catch (err) {
-            console.error('❌ Failed to set up dashboard:', err.message);
+            console.error('❌ Failed to install dependencies:', err.message);
             console.error('   Try running manually:');
-            console.error(`   cd ${dashboardPath} && npm install && npm run build`);
+            console.error(`   cd ${dashboardPath} && npm install`);
             break;
           }
         }
@@ -2211,9 +2215,9 @@ switch (command) {
         });
         wsProcess.unref();
 
-        // Start dashboard in background with project path
-        console.log('🚀 Starting dashboard...');
-        const dashboardProcess = spawn('npm', ['run', 'start', '--', '-p', String(availablePort)], {
+        // Start dashboard in dev mode for live reload
+        console.log('🚀 Starting dashboard (dev mode)...');
+        const dashboardProcess = spawn('npm', ['run', 'dev', '--', '-p', String(availablePort)], {
           cwd: dashboardPath,
           detached: true,
           stdio: 'ignore',

package/lib/db-import.js

@@ -2,6 +2,109 @@ const fs = require('fs');
 const path = require('path');
 const { getDb, getJettypodDir } = require('./database');
 
+// Valid values for work_items fields
+const VALID_TYPES = ['epic', 'feature', 'chore', 'bug'];
+const VALID_STATUSES = ['backlog', 'todo', 'in_progress', 'done', 'cancelled'];
+
+/**
+ * Validate a single work item against the schema
+ * @param {Object} item - Work item to validate
+ * @param {number} index - Index in array for error messages
+ * @returns {{valid: boolean, errors: string[]}}
+ */
+function validateWorkItem(item, index) {
+  const errors = [];
+
+  if (typeof item !== 'object' || item === null) {
+    return { valid: false, errors: [`Item ${index}: must be an object`] };
+  }
+
+  // Required: id must be a number
+  if (item.id === undefined || item.id === null) {
+    errors.push(`Item ${index}: missing required field 'id'`);
+  } else if (typeof item.id !== 'number' || !Number.isInteger(item.id)) {
+    errors.push(`Item ${index}: 'id' must be an integer`);
+  }
+
+  // Required: type must be a valid string
+  if (item.type === undefined || item.type === null) {
+    errors.push(`Item ${index}: missing required field 'type'`);
+  } else if (typeof item.type !== 'string') {
+    errors.push(`Item ${index}: 'type' must be a string`);
+  } else if (!VALID_TYPES.includes(item.type)) {
+    errors.push(`Item ${index}: 'type' must be one of: ${VALID_TYPES.join(', ')}`);
+  }
+
+  // Required: title must be a string
+  if (item.title === undefined || item.title === null) {
+    errors.push(`Item ${index}: missing required field 'title'`);
+  } else if (typeof item.title !== 'string') {
+    errors.push(`Item ${index}: 'title' must be a string`);
+  }
+
+  // Optional: status must be valid if present
+  if (item.status !== undefined && item.status !== null) {
+    if (typeof item.status !== 'string') {
+      errors.push(`Item ${index}: 'status' must be a string`);
+    } else if (!VALID_STATUSES.includes(item.status)) {
+      errors.push(`Item ${index}: 'status' must be one of: ${VALID_STATUSES.join(', ')}`);
+    }
+  }
+
+  // Optional: parent_id must be integer if present
+  if (item.parent_id !== undefined && item.parent_id !== null) {
+    if (typeof item.parent_id !== 'number' || !Number.isInteger(item.parent_id)) {
+      errors.push(`Item ${index}: 'parent_id' must be an integer`);
+    }
+  }
+
+  // Optional: epic_id must be integer if present
+  if (item.epic_id !== undefined && item.epic_id !== null) {
+    if (typeof item.epic_id !== 'number' || !Number.isInteger(item.epic_id)) {
+      errors.push(`Item ${index}: 'epic_id' must be an integer`);
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
+/**
+ * Validate work.json data structure and content
+ * @param {Object} data - Parsed JSON data
+ * @returns {{valid: boolean, errors: string[]}}
+ */
+function validateWorkJson(data) {
+  const errors = [];
+
+  if (typeof data !== 'object' || data === null) {
+    return { valid: false, errors: ['Data must be an object'] };
+  }
+
+  // work_items must be present and an array
+  if (!data.work_items) {
+    return { valid: false, errors: ['Missing required field: work_items'] };
+  }
+
+  if (!Array.isArray(data.work_items)) {
+    return { valid: false, errors: ['work_items must be an array'] };
+  }
+
+  // Validate each work item
+  data.work_items.forEach((item, index) => {
+    const result = validateWorkItem(item, index);
+    errors.push(...result.errors);
+  });
+
+  // Check for duplicate IDs
+  const ids = data.work_items.map(item => item.id).filter(id => id !== undefined);
+  const duplicates = ids.filter((id, index) => ids.indexOf(id) !== index);
+  if (duplicates.length > 0) {
+    errors.push(`Duplicate work item IDs found: ${[...new Set(duplicates)].join(', ')}`);
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
 /**
  * Import tables from JSON structure into a database
  * @param {sqlite3.Database} db - Database connection
@@ -86,6 +189,18 @@ async function importWorkDb() {
     const jsonContent = fs.readFileSync(jsonPath, 'utf8');
     const data = JSON.parse(jsonContent);
 
+    // Validate schema before importing
+    const validation = validateWorkJson(data);
+    if (!validation.valid) {
+      console.error('Post-checkout hook warning: work.json schema validation failed');
+      validation.errors.slice(0, 5).forEach(err => console.error(`  - ${err}`));
+      if (validation.errors.length > 5) {
+        console.error(`  ... and ${validation.errors.length - 5} more errors`);
+      }
+      console.error('  Database will remain in previous state');
+      return jsonPath;
+    }
+
     const db = getDb();
     await importTables(db, data);
 
@@ -189,5 +304,9 @@ async function importAll() {
 module.exports = {
   importWorkDb,
   importDatabaseDb,
-  importAll
+  importAll,
+  validateWorkJson,
+  validateWorkItem,
+  VALID_TYPES,
+  VALID_STATUSES
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jettypod",
-  "version": "4.4.83",
+  "version": "4.4.84",
   "description": "AI-powered development workflow manager with TDD, BDD, and automatic test generation",
   "main": "jettypod.js",
   "bin": {

package/skills-templates/bug-planning/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: bug-planning
-description: Guide structured bug investigation with symptom capture, hypothesis testing, and root cause identification. Creates bug work item for direct implementation. Use when user reports a bug, mentions unexpected behavior, or says "investigate bug".
+description: Guide structured bug investigation with symptom capture, hypothesis testing, and root cause identification. Invoked by plan-routing when user reports a bug, mentions unexpected behavior, or describes something broken. (project)
 ---
 
 # Bug Planning Skill

package/skills-templates/chore-planning/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: chore-planning
-description: Guide standalone chore planning with automatic type classification and routing to chore-mode. Use when the implementation approach is obvious - refactoring, bug fixes, infrastructure, or simple enhancements where there's no UX decision to make. Key question - "Does this need UX exploration?" No → chore-planning. Yes → feature-planning instead.
+description: Guide standalone chore planning with automatic type classification and routing to chore-mode. Invoked by plan-routing for substantial technical work - refactoring, infrastructure, migrations, or enhancements where the implementation approach is obvious. (project)
 ---
 
 # Chore Planning Skill

package/skills-templates/epic-planning/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: epic-planning
-description: Guide epic planning with feature brainstorming and optional architectural decision prototyping. Use when user asks to plan an epic, mentions planning features for an epic, says "help me plan epic", or when they just created an epic and want to break it down into features.
+description: Guide epic planning with feature brainstorming and optional architectural decision prototyping. Invoked by plan-routing for large multi-feature initiatives that need to be broken down into features. (project)
 ---
 
 # Epic Planning Skill

package/skills-templates/feature-planning/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: feature-planning
-description: Guide feature planning with UX approach exploration and BDD scenario generation. Use when implementing NEW user-facing behavior that requires UX decisions (multiple valid approaches to discuss). NOT for simple/obvious changes like copy tweaks, styling fixes, or adding straightforward functionality. Key question - "Does this need UX exploration?" Yes → feature-planning.
+description: Guide feature planning with UX approach exploration and BDD scenario generation. Invoked by plan-routing when implementing NEW user-facing behavior that requires UX decisions (multiple valid approaches to explore). (project)
 ---
 
 # Feature Planning Skill
@@ -63,49 +63,8 @@ jettypod workflow start feature-planning <feature-id>
 
 This creates an execution record for session resume.
 
-### Step 1B: Route Simple Improvements
-
-**CRITICAL:** Before proceeding with full feature planning, determine if this is a simple improvement.
-
-**Ask the user:**
-
-```
-Is this:
-1. **Simple improvement** - A basic enhancement to existing functionality (e.g., copy change, styling tweak, minor behavior adjustment)
-2. **New functionality** - Adding new capabilities, even if small
-
-Simple improvements skip the full feature planning workflow and use a lightweight process.
-```
-
-**⚡ WAIT for user response.**
-
-**If user says "simple improvement" (or 1):**
-
-Display:
-```
-This is a simple improvement. Routing to the lightweight simple-improvement workflow...
-```
-
-**Then IMMEDIATELY invoke simple-improvement using the Skill tool:**
-```
-Use the Skill tool with skill: "simple-improvement"
-```
-
-**Feature-planning skill ends here for simple improvements.** The simple-improvement skill takes over.
-
----
-
-**If user says "new functionality" (or 2):**
-
-Display:
-```
-Got it - this is new functionality. Let's explore the best approach...
-```
-
 **Proceed to Step 2** (or Step 3 if this is a standalone feature with no parent epic).
 
----
-
 ### Step 2: Check Epic Architectural Decisions
 
 **Skip this step and proceed to Step 3 if `PARENT_EPIC_ID` from Step 1 is null (standalone feature).**

package/skills-templates/plan-routing/SKILL.md

@@ -0,0 +1,188 @@
+---
+name: plan-routing
+description: Route work requests to the appropriate planning skill. Use when user describes work they want to do - "build X", "fix Y", "add Z", "plan W". Analyzes intent and complexity to route to bug-planning, chore-planning, feature-planning, epic-planning, or simple-improvement. (project)
+---
+
+# Plan Routing Skill
+
+Routes user work requests to the correct planning workflow with minimal friction.
+
+## Instructions
+
+When this skill is activated, you are helping route a user's work request to the appropriate planning skill. Follow this structured approach:
+
+### Step 1: Extract Intent Signals
+
+From the user's request, identify work type and complexity signals:
+
+**Work type signals:**
+| Signal Words | Likely Route |
+|--------------|--------------|
+| fix, bug, broken, crash, error, not working, regression | bug-planning |
+| refactor, rename, move, clean up, upgrade, migrate, infrastructure | chore-planning |
+| add, build, create, implement, new feature, capability, workflow | feature-planning |
+| epic, initiative, project, roadmap, multi-feature | epic-planning |
+| tweak, change, update, adjust + small scope | simple-improvement |
+
+**Complexity signals:**
+| Signal | Indicates |
+|--------|-----------|
+| "quick", "small", "just", "simple", "tweak" | Lower complexity |
+| "feature", "workflow", "experience", "redesign" | Higher complexity |
+| References specific file/function | Lower complexity |
+| Describes user-facing behavior change | Higher complexity |
+
+### Step 2: Gather Context (Silent - No Questions)
+
+Before routing, quickly probe the codebase for context. **Do NOT ask the user for this information.**
+
+```bash
+# Check for related existing code
+jettypod impact "<key-term-from-request>"
+```
+
+```bash
+# Check for existing work items
+jettypod backlog | grep -i "<key-term>"
+```
+
+**Assess from results:**
+- Existing code? → Likely modification vs creation
+- Related work items? → May already be planned
+- How many files affected? → Complexity indicator
+
+### Step 3: Route with Stated Assumption
+
+**DO NOT ASK a routing question.** State your routing decision with reasoning.
+
+## Routing Decision Tree
+
+```
+User request
+     │
+     ▼
+Contains bug/fix/broken/error signals?
+     ├─► Yes → bug-planning
+     │
+     ▼
+Describes large multi-feature initiative?
+     ├─► Yes → epic-planning
+     │
+     ▼
+Does this need UX exploration?
+(Multiple valid approaches? User-facing behavior with design choices?)
+     ├─► Yes → feature-planning
+     │
+     ▼
+Is this substantial technical work?
+(Refactoring, infrastructure, migrations, multi-file changes)
+     ├─► Yes → chore-planning
+     │
+     ▼
+Is this a simple, obvious change?
+(Copy, styling, config, minor behavior tweak, one clear approach)
+     └─► Yes → simple-improvement
+```
+
+## Route Definitions
+
+| Route | When to Use | Progression |
+|-------|-------------|-------------|
+| **bug-planning** | Something is broken/not working as expected | Investigation → fix |
+| **epic-planning** | Large initiative spanning multiple features | Break down → plan features |
+| **feature-planning** | New user-facing behavior with UX decisions to make | UX exploration → BDD → speed → stable → production |
+| **chore-planning** | Substantial technical work, clear implementation | speed → stable → production |
+| **simple-improvement** | Obvious change, no UX decisions, small scope | Direct implementation |
+
+## Routing Examples
+
+**→ bug-planning**
+- "The login button doesn't work on mobile"
+- "Getting a crash when I save"
+- "Users are seeing a 500 error"
+
+**→ epic-planning**
+- "We need a full authentication system"
+- "Build out the reporting dashboard"
+- "Plan the v2 API migration"
+
+**→ feature-planning**
+- "Add drag-and-drop reordering for cards"
+- "Implement user notifications"
+- "Build a search feature"
+
+*(Multiple valid UX approaches exist)*
+
+**→ chore-planning**
+- "Refactor the auth module to use the new pattern"
+- "Migrate from Moment.js to date-fns"
+- "Add TypeScript to the utils folder"
+- "Set up CI/CD pipeline"
+
+*(Technical work, obvious approach, but substantial)*
+
+**→ simple-improvement**
+- "Change the button text from 'Submit' to 'Save'"
+- "Make the error message more descriptive"
+- "Add a loading spinner to the save button"
+- "Change the header color to blue"
+- "Add a tooltip to the settings icon"
+
+*(One obvious implementation, no UX exploration needed, just do it)*
+
+## Stating Your Routing Decision
+
+**Bug:**
+```
+Sounds like a bug - [X] isn't working as expected. Let me help you investigate.
+```
+Then invoke bug-planning skill.
+
+**Epic:**
+```
+This is a larger initiative with multiple features. Let's break it down.
+```
+Then invoke epic-planning skill.
+
+**Feature:**
+```
+This adds new user-facing behavior with some design choices to explore. Let me suggest a few approaches.
+```
+Then invoke feature-planning skill.
+
+**Chore:**
+```
+This is technical work with a clear implementation path. Let me help you plan it out.
+```
+Then invoke chore-planning skill.
+
+**Simple improvement:**
+```
+This is a straightforward change. Let me implement it.
+```
+Then invoke simple-improvement skill.
+
+---
+
+**If genuinely ambiguous (rare - should be <20% of cases):**
+```
+I could approach "[brief description]" as:
+- A **simple improvement** - just implement the obvious solution
+- A **feature** - explore a few UX approaches first
+
+Which feels right?
+```
+
+Only ask when you truly cannot decide based on signals and context.
+
+### Step 4: Invoke Target Skill
+
+After stating your routing decision, immediately invoke the appropriate skill using the Skill tool:
+- `bug-planning`
+- `chore-planning`
+- `feature-planning`
+- `epic-planning`
+- `simple-improvement`
+
+**This skill ends after invocation.** The target skill takes over.
+# Stable mode: Verified ambiguous request handling exists

package/skills-templates/simple-improvement/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: simple-improvement
-description: Guide implementation of simple improvements to existing functionality. Use when feature-planning routes here for basic enhancements like copy changes, styling tweaks, or minor behavior adjustments. (project)
+description: Guide implementation of simple improvements to existing functionality. Invoked by plan-routing for straightforward changes like copy changes, styling tweaks, or minor behavior adjustments where the implementation is obvious. (project)
 ---
 
 # Simple Improvement Skill