jettypod 4.4.78 → 4.4.80

package/apps/dashboard/components/DragContext.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { createContext, useContext, useState, useCallback, useRef, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 import type { WorkItem } from '@/lib/db';
 
 type DropHandler = (itemId: number, newStatus: string) => Promise<void>;
@@ -26,12 +27,16 @@ interface DragContextType {
   draggedItem: WorkItem | null;
   activeDropZone: string | null;
   activeEpicZone: string | null;
+  dragPosition: { x: number; y: number };
+  dragOffset: { x: number; y: number };
+  draggedCardWidth: number;
   setDraggedItem: (item: WorkItem | null) => void;
   registerDropZone: (id: string, info: DropZoneInfo) => void;
   unregisterDropZone: (id: string) => void;
   registerEpicDropZone: (id: string, info: EpicDropZoneInfo) => void;
   unregisterEpicDropZone: (id: string) => void;
   updatePointerPosition: (x: number, y: number) => void;
+  startDrag: (item: WorkItem, cardRect: DOMRect, pointerX: number, pointerY: number) => void;
   handleDrop: () => Promise<void>;
 }
 
@@ -40,19 +45,31 @@ const DragContext = createContext<DragContextType>({
   draggedItem: null,
   activeDropZone: null,
   activeEpicZone: null,
+  dragPosition: { x: 0, y: 0 },
+  dragOffset: { x: 0, y: 0 },
+  draggedCardWidth: 0,
   setDraggedItem: () => {},
   registerDropZone: () => {},
   unregisterDropZone: () => {},
   registerEpicDropZone: () => {},
   unregisterEpicDropZone: () => {},
   updatePointerPosition: () => {},
+  startDrag: () => {},
   handleDrop: async () => {},
 });
 
-export function DragProvider({ children }: { children: ReactNode }) {
+interface DragProviderProps {
+  children: ReactNode;
+  renderDragOverlay?: (item: WorkItem) => ReactNode;
+}
+
+export function DragProvider({ children, renderDragOverlay }: DragProviderProps) {
   const [draggedItem, setDraggedItem] = useState<WorkItem | null>(null);
   const [activeDropZone, setActiveDropZone] = useState<string | null>(null);
   const [activeEpicZone, setActiveEpicZone] = useState<string | null>(null);
+  const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [draggedCardWidth, setDraggedCardWidth] = useState(0);
   const dropZonesRef = useRef<Map<string, DropZoneInfo>>(new Map());
   const epicDropZonesRef = useRef<Map<string, EpicDropZoneInfo>>(new Map());
   const pointerPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
@@ -75,6 +92,7 @@ export function DragProvider({ children }: { children: ReactNode }) {
 
   const updatePointerPosition = useCallback((x: number, y: number) => {
     pointerPositionRef.current = { x, y };
+    setDragPosition({ x, y });
     let foundZone: string | null = null;
     let foundEpicZone: string | null = null;
 
@@ -98,6 +116,18 @@ export function DragProvider({ children }: { children: ReactNode }) {
     setActiveEpicZone(foundEpicZone);
   }, []);
 
+  const startDrag = useCallback((item: WorkItem, cardRect: DOMRect, pointerX: number, pointerY: number) => {
+    console.log('[DragContext] startDrag called', { item: item.id, cardRect, pointerX, pointerY });
+    // Calculate offset from pointer to card's top-left corner
+    const offsetX = pointerX - cardRect.left;
+    const offsetY = pointerY - cardRect.top;
+    console.log('[DragContext] Setting drag state', { offsetX, offsetY, width: cardRect.width });
+    setDragOffset({ x: offsetX, y: offsetY });
+    setDragPosition({ x: pointerX, y: pointerY });
+    setDraggedCardWidth(cardRect.width);
+    setDraggedItem(item);
+  }, []);
+
   const handleDrop = useCallback(async () => {
     if (!draggedItem) return;
 
@@ -137,6 +167,20 @@ export function DragProvider({ children }: { children: ReactNode }) {
     }
   }, [activeDropZone, activeEpicZone, draggedItem]);
 
+  // Calculate overlay position (pointer position minus offset = card top-left)
+  const overlayX = dragPosition.x - dragOffset.x;
+  const overlayY = dragPosition.y - dragOffset.y;
+
+  // Debug: log portal render conditions
+  console.log('[DragContext] Portal render check', {
+    hasDraggedItem: !!draggedItem,
+    hasRenderOverlay: !!renderDragOverlay,
+    hasDocument: typeof document !== 'undefined',
+    overlayX,
+    overlayY,
+    draggedCardWidth,
+  });
+
   return (
     <DragContext.Provider
       value={{
@@ -144,16 +188,63 @@ export function DragProvider({ children }: { children: ReactNode }) {
         draggedItem,
         activeDropZone,
         activeEpicZone,
+        dragPosition,
+        dragOffset,
+        draggedCardWidth,
         setDraggedItem,
         registerDropZone,
         unregisterDropZone,
         registerEpicDropZone,
         unregisterEpicDropZone,
         updatePointerPosition,
+        startDrag,
         handleDrop,
       }}
     >
       {children}
+      {/* Drag overlay - rendered via portal to escape overflow containers */}
+      {draggedItem && renderDragOverlay && typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            style={{
+              position: 'fixed',
+              left: overlayX,
+              top: overlayY,
+              width: draggedCardWidth,
+              zIndex: 9999,
+              pointerEvents: 'none',
+              transform: 'scale(1.02)',
+              boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)',
+              border: '4px solid red',
+              background: 'rgba(255, 0, 0, 0.1)',
+            }}
+          >
+            {renderDragOverlay(draggedItem)}
+          </div>,
+          document.body
+        )
+      }
+      {/* TEST: Always-visible portal to verify createPortal works */}
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            style={{
+              position: 'fixed',
+              bottom: 20,
+              right: 20,
+              padding: '10px 20px',
+              background: 'green',
+              color: 'white',
+              fontWeight: 'bold',
+              zIndex: 9999,
+              borderRadius: 8,
+            }}
+          >
+            Portal Works! Dragging: {draggedItem ? `#${draggedItem.id}` : 'none'}
+          </div>,
+          document.body
+        )
+      }
     </DragContext.Provider>
   );
 }

package/apps/dashboard/components/DraggableCard.tsx

@@ -12,16 +12,24 @@ interface DraggableCardProps {
 }
 
 export function DraggableCard({ item, children, disabled = false }: DraggableCardProps) {
-  const { setDraggedItem, updatePointerPosition, handleDrop } = useDragContext();
+  const { startDrag, setDraggedItem, updatePointerPosition, handleDrop } = useDragContext();
   const wasDraggingRef = useRef(false);
+  const cardRef = useRef<HTMLDivElement>(null);
 
   if (disabled) {
     return <>{children}</>;
   }
 
-  const handleDragStart = () => {
+  const handleDragStart = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    console.log('[DraggableCard] handleDragStart fired', { itemId: item.id, point: info.point });
     wasDraggingRef.current = true;
-    setDraggedItem(item);
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect();
+      console.log('[DraggableCard] Card rect:', rect);
+      startDrag(item, rect, info.point.x, info.point.y);
+    } else {
+      console.warn('[DraggableCard] cardRef.current is null!');
+    }
   };
 
   const handleDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
@@ -44,14 +52,13 @@ export function DraggableCard({ item, children, disabled = false }: DraggableCar
 
   return (
     <motion.div
+      ref={cardRef}
       drag
       dragSnapToOrigin
       dragElastic={0.1}
       whileDrag={{
-        scale: 1.02,
-        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)',
-        zIndex: 50,
         cursor: 'grabbing',
+        opacity: 0,
       }}
       onDragStart={handleDragStart}
       onDrag={handleDrag}

package/apps/dashboard/components/KanbanBoard.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import type { WorkItem, InFlightItem, KanbanGroup } from '@/lib/db';
+import type { UndoAction } from '@/lib/undoStack';
 import { EditableTitle } from './EditableTitle';
 import { CardMenu } from './CardMenu';
 import { DragProvider, useDragContext } from './DragContext';
@@ -89,7 +90,7 @@ interface KanbanCardProps {
   showEpic?: boolean;
   isInFlight?: boolean;
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
-  onStatusChange?: (id: number, newStatus: string) => Promise<void>;
+  onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
 }
 
 function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange }: KanbanCardProps) {
@@ -249,7 +250,7 @@ interface EpicGroupProps {
   isInFlight?: boolean;
   isDraggable?: boolean;
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
-  onStatusChange?: (id: number, newStatus: string) => Promise<void>;
+  onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
 }
@@ -418,16 +419,53 @@ interface KanbanBoardProps {
   backlog: Map<string, KanbanGroup>;
   done: Map<string, KanbanGroup>;
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
-  onStatusChange?: (id: number, newStatus: string) => Promise<void>;
+  onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
+  // Undo/redo support
+  onUndo?: () => Promise<UndoAction | null>;
+  onRedo?: () => Promise<UndoAction | null>;
+  canUndo?: boolean;
+  canRedo?: boolean;
 }
 
-export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onOrderChange, onEpicAssign }: KanbanBoardProps) {
+export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onOrderChange, onEpicAssign, onUndo, onRedo, canUndo, canRedo }: 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);
   const backlogContainerRef = useRef<HTMLDivElement>(null);
 
+  // Keyboard shortcuts for undo/redo (Cmd+Z / Cmd+Shift+Z)
+  useEffect(() => {
+    const handleKeyDown = async (e: KeyboardEvent) => {
+      // Only handle if Cmd (Mac) or Ctrl (Windows/Linux) is pressed
+      const isMod = e.metaKey || e.ctrlKey;
+      if (!isMod || e.key.toLowerCase() !== 'z') return;
+
+      // Don't intercept if user is typing in an input field
+      const target = e.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+        return;
+      }
+
+      e.preventDefault();
+
+      if (e.shiftKey) {
+        // Cmd+Shift+Z = Redo
+        if (onRedo && canRedo) {
+          await onRedo();
+        }
+      } else {
+        // Cmd+Z = Undo
+        if (onUndo && canUndo) {
+          await onUndo();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onUndo, onRedo, canUndo, canRedo]);
+
   // Build a set of epic IDs that have in-flight items
   const inFlightEpicIds = new Set<number>();
   for (const item of inFlight) {
@@ -490,8 +528,25 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
     await onOrderChange(itemId, newOrder);
   }, [getAllBacklogItems, onOrderChange]);
 
+  // Render function for the drag overlay
+  const renderDragOverlay = useCallback((item: WorkItem) => {
+    // Find epic title if this is an in-flight item
+    const inFlightItem = inFlight.find(i => i.id === item.id);
+    const epicTitle = inFlightItem?.epicTitle || null;
+    const isInFlightCard = inFlightItem !== undefined;
+
+    return (
+      <KanbanCard
+        item={item}
+        epicTitle={epicTitle}
+        showEpic={isInFlightCard}
+        isInFlight={isInFlightCard}
+      />
+    );
+  }, [inFlight]);
+
   return (
-    <DragProvider>
+    <DragProvider renderDragOverlay={renderDragOverlay}>
     <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/RealTimeKanbanWrapper.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { KanbanBoard } from './KanbanBoard';
 import { RecentDecisionsWidget } from './RecentDecisionsWidget';
+import { ToastProvider, useToast } from './Toast';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
 import type { InFlightItem, KanbanGroup, Decision } from '@/lib/db';
+import { UndoStack, type UndoAction } from '@/lib/undoStack';
 
 interface KanbanData {
   inFlight: InFlightItem[];
@@ -21,7 +23,37 @@ interface RealTimeKanbanWrapperProps {
   initialDecisions: Decision[];
 }
 
+// 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;
+}
+
 export function RealTimeKanbanWrapper({ initialData, initialDecisions }: RealTimeKanbanWrapperProps) {
+  return (
+    <ToastProvider>
+      <RealTimeKanbanContent initialData={initialData} initialDecisions={initialDecisions} />
+    </ToastProvider>
+  );
+}
+
+function RealTimeKanbanContent({ initialData, initialDecisions }: RealTimeKanbanWrapperProps) {
+  const { showToast } = useToast();
   const [data, setData] = useState<KanbanData>(() => ({
     inFlight: initialData.inFlight,
     backlog: new Map(initialData.backlog),
@@ -30,6 +62,10 @@ export function RealTimeKanbanWrapper({ initialData, initialDecisions }: RealTim
   const [decisions, setDecisions] = useState<Decision[]>(initialDecisions);
   const [statusError, setStatusError] = useState<string | null>(null);
 
+  // Undo/redo stack - created once per component instance
+  const [undoStack] = useState(() => new UndoStack());
+  const [undoRedoVersion, setUndoRedoVersion] = useState(0); // Force re-render on stack changes
+
   const refreshData = useCallback(async () => {
     const [kanbanResponse, decisionsResponse] = await Promise.all([
       fetch('/api/kanban'),
@@ -63,8 +99,14 @@ export function RealTimeKanbanWrapper({ initialData, initialDecisions }: RealTim
     await refreshData();
   }, [refreshData]);
 
-  const handleStatusChange = useCallback(async (id: number, newStatus: string) => {
+  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 previousStatus = found?.status;
+    const itemTitle = found?.item.title ?? `Item #${id}`;
+
     try {
       const response = await fetch(`/api/work/${id}/status`, {
         method: 'PATCH',
@@ -74,17 +116,34 @@ export function RealTimeKanbanWrapper({ initialData, initialDecisions }: RealTim
       if (!response.ok) {
         if (response.status === 404) {
           setStatusError('Item no longer exists');
+          await refreshData();
+          return { success: false, notFound: true };
         } else {
           setStatusError('Failed to update status');
+          await refreshData();
+          return { success: false };
         }
-        await refreshData();
-        return;
       }
+
+      // Push to undo stack if this is a user-initiated change (not undo/redo)
+      if (!skipUndo && previousStatus && previousStatus !== newStatus) {
+        undoStack.push({
+          type: 'status_change',
+          itemId: id,
+          itemTitle,
+          before: previousStatus,
+          after: newStatus,
+        });
+        setUndoRedoVersion(v => v + 1); // Trigger re-render
+      }
+
       await refreshData();
+      return { success: true };
     } catch {
       setStatusError('Failed to update status');
+      return { success: false };
     }
-  }, [refreshData]);
+  }, [refreshData, data, undoStack]);
 
   const handleOrderChange = useCallback(async (id: number, newOrder: number) => {
     try {
@@ -112,6 +171,82 @@ export function RealTimeKanbanWrapper({ initialData, initialDecisions }: RealTim
     }
   }, [refreshData]);
 
+  // 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;
+    }
+
+    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;
+    }
+
+    // Show success toast notification
+    showToast(`Redone: "${action.itemTitle}" moved to ${formatStatus(action.after)}`);
+
+    return action;
+  }, [undoStack, handleStatusChange, showToast]);
+
+  // Expose undo stack state
+  const canUndo = undoStack.canUndo();
+  const canRedo = undoStack.canRedo();
+
   const wsUrl = typeof window !== 'undefined'
     ? `ws://${window.location.hostname}:8080`
     : 'ws://localhost:8080';
@@ -171,6 +306,10 @@ export function RealTimeKanbanWrapper({ initialData, initialDecisions }: RealTim
             onStatusChange={handleStatusChange}
             onOrderChange={handleOrderChange}
             onEpicAssign={handleEpicAssign}
+            onUndo={handleUndo}
+            onRedo={handleRedo}
+            canUndo={canUndo}
+            canRedo={canRedo}
           />
         </div>
         <div className="w-60 flex-shrink-0">

package/apps/dashboard/components/Toast.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+interface Toast {
+  id: string;
+  message: string;
+  type?: 'info' | 'success' | 'error';
+}
+
+interface ToastContextValue {
+  showToast: (message: string, type?: Toast['type']) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+const TOAST_DURATION = 3000;
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback((message: string, type: Toast['type'] = 'info') => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    setToasts(prev => [...prev, { id, message, type }]);
+
+    // Auto-dismiss after duration
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id));
+    }, TOAST_DURATION);
+  }, []);
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <ToastContainer toasts={toasts} onDismiss={dismissToast} />
+    </ToastContext.Provider>
+  );
+}
+
+function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2" data-testid="toast-container">
+      <AnimatePresence mode="popLayout">
+        {toasts.map(toast => (
+          <motion.div
+            key={toast.id}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -10, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className={`px-4 py-2 rounded-lg shadow-lg text-sm font-medium cursor-pointer ${
+              toast.type === 'success'
+                ? 'bg-green-600 text-white'
+                : toast.type === 'error'
+                ? 'bg-red-600 text-white'
+                : 'bg-zinc-800 text-white dark:bg-zinc-700'
+            }`}
+            onClick={() => onDismiss(toast.id)}
+            data-testid="toast"
+          >
+            {toast.message}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}