jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/DragContext.tsx

@@ -17,6 +17,7 @@ import {
 } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import type { WorkItem } from '@/lib/db';
+import { shadow } from '@/lib/shadows';
 
 type DropHandler = (itemId: number, newStatus: string) => Promise<void>;
 type ReorderHandler = (itemId: number, pointerY: number) => Promise<void>;
@@ -47,15 +48,11 @@ interface DragContextType {
   draggedItem: WorkItem | null;
   activeDropZone: string | null;
   activeEpicZone: string | null;
-  dragPosition: { x: number; y: number };
-  draggedCardHeight: 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;
-  registerCardPosition: (id: number, rect: DOMRect) => void;
-  unregisterCard: (id: number) => void;
   getCardPositions: () => CardPosition[];
 }
 
@@ -64,15 +61,11 @@ const DragContext = createContext<DragContextType>({
   draggedItem: null,
   activeDropZone: null,
   activeEpicZone: null,
-  dragPosition: { x: 0, y: 0 },
-  draggedCardHeight: 0,
   setDraggedItem: () => {},
   registerDropZone: () => {},
   unregisterDropZone: () => {},
   registerEpicDropZone: () => {},
   unregisterEpicDropZone: () => {},
-  registerCardPosition: () => {},
-  unregisterCard: () => {},
   getCardPositions: () => [],
 });
 
@@ -118,12 +111,8 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
   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 [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 draggedItemRef = useRef<WorkItem | null>(null);
   const pointerPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 
@@ -159,22 +148,16 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
     epicDropZonesRef.current.delete(id);
   }, []);
 
-  const registerCardPosition = useCallback((id: number, rect: DOMRect) => {
-    cardPositionsRef.current.set(id, rect);
-  }, []);
-
-  const unregisterCard = useCallback((id: number) => {
-    // Don't unregister if this is the dragged card
-    if (draggedItemRef.current?.id === id) {
-      return;
-    }
-    cardPositionsRef.current.delete(id);
-  }, []);
-
+  // Read fresh card positions from DOM - avoids stale cached positions
+  // that cause jank when cards shift during drag (collapsed dragged card, placeholders)
   const getCardPositions = useCallback((): CardPosition[] => {
     const positions: CardPosition[] = [];
-    cardPositionsRef.current.forEach((rect, id) => {
-      positions.push({ id, rect });
+    const elements = document.querySelectorAll<HTMLElement>('[data-item-id]');
+    elements.forEach((el) => {
+      const id = Number(el.getAttribute('data-item-id'));
+      if (!isNaN(id) && el.offsetHeight > 0) {
+        positions.push({ id, rect: el.getBoundingClientRect() });
+      }
     });
     return positions;
   }, []);
@@ -189,40 +172,34 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
     if (item) {
       setDraggedItem(item);
       draggedItemRef.current = item;
-      // Get the card height from the dragging element
-      const rect = event.active.rect.current.initial;
-      if (rect) {
-        setDraggedCardHeight(rect.height);
-      }
     }
   }, []);
 
   const handleDragMove = useCallback((event: { activatorEvent: Event; delta: { x: number; y: number } }) => {
-    // Track pointer position for insertion preview calculations
+    // Update ref for reorder calculations (state update handled by native pointermove)
     const pointerEvent = event.activatorEvent as PointerEvent;
     if (pointerEvent) {
       const x = pointerEvent.clientX + event.delta.x;
       const y = pointerEvent.clientY + event.delta.y;
       pointerPositionRef.current = { x, y };
-      setDragPosition({ x, y });
     }
   }, []);
 
   const handleDragOver = useCallback((event: DragOverEvent) => {
     const { over, activatorEvent, delta } = event;
 
-    // Update pointer position
+    // Update pointer ref (state update handled by native pointermove)
     const pointerEvent = activatorEvent as PointerEvent;
     if (pointerEvent) {
       const x = pointerEvent.clientX + delta.x;
       const y = pointerEvent.clientY + delta.y;
       pointerPositionRef.current = { x, y };
-      setDragPosition({ x, y });
     }
 
     if (!over) {
-      setActiveDropZone(null);
-      setActiveEpicZone(null);
+      // Don't clear zone state on null - collision detection has gaps during drag
+      // that cause the insertion preview to flicker/disappear. Zones are properly
+      // cleared when drag ends or is cancelled.
       return;
     }
 
@@ -244,7 +221,19 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
       setActiveDropZone(foundStatusZone);
     } else if (dropZonesRef.current.has(overId)) {
       setActiveDropZone(overId);
-      setActiveEpicZone(null);
+      // Epic zones are nested inside status zones, so collision detection
+      // frequently returns the status zone instead. Check if pointer is
+      // also within an epic zone (mirror of status zone check above).
+      let foundEpicZone: string | null = null;
+      epicDropZonesRef.current.forEach((info, id) => {
+        const rect = info.element.getBoundingClientRect();
+        const x = pointerPositionRef.current.x;
+        const y = pointerPositionRef.current.y;
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+          foundEpicZone = id;
+        }
+      });
+      setActiveEpicZone(foundEpicZone);
     } else {
       setActiveDropZone(null);
       setActiveEpicZone(null);
@@ -254,11 +243,13 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
   const handleDragEnd = useCallback(async (event: DragEndEvent) => {
     const { over, activatorEvent, delta } = event;
 
-    // Get final pointer position
+    // Get final pointer position (both x and y needed for epic zone bounds check)
     const pointerEvent = activatorEvent as PointerEvent;
     if (pointerEvent) {
-      const y = pointerEvent.clientY + delta.y;
-      pointerPositionRef.current.y = y;
+      pointerPositionRef.current = {
+        x: pointerEvent.clientX + delta.x,
+        y: pointerEvent.clientY + delta.y,
+      };
     }
 
     const item = draggedItemRef.current;
@@ -291,27 +282,43 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
           }
         }
       } else if (overId) {
-        // Dropped on a status zone
-        const zoneInfo = dropZonesRef.current.get(overId);
-        if (zoneInfo) {
-          // Check if this is a status change or a reorder
-          if (item.status !== zoneInfo.targetStatus) {
-            // Status change
-            await zoneInfo.onDrop(item.id, zoneInfo.targetStatus);
-          } else if (zoneInfo.onReorder) {
-            // Reorder within same status
-            await zoneInfo.onReorder(item.id, pointerPositionRef.current.y);
+        // Collision detection returned a status zone, but epic zones are nested
+        // inside status zones. Check if pointer is actually within an epic zone.
+        let resolvedEpicZone: string | null = null;
+        epicDropZonesRef.current.forEach((info, id) => {
+          const rect = info.element.getBoundingClientRect();
+          const x = pointerPositionRef.current.x;
+          const y = pointerPositionRef.current.y;
+          if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+            resolvedEpicZone = id;
+          }
+        });
+
+        if (resolvedEpicZone) {
+          // Pointer is within an epic zone - route to epic handler
+          const epicZoneInfo = epicDropZonesRef.current.get(resolvedEpicZone);
+          if (epicZoneInfo) {
+            if (currentEpicId === epicZoneInfo.epicId && epicZoneInfo.onReorder) {
+              await epicZoneInfo.onReorder(item.id, pointerPositionRef.current.y);
+            } else if (currentEpicId !== epicZoneInfo.epicId) {
+              await epicZoneInfo.onEpicAssign(item.id, epicZoneInfo.epicId);
+            }
+          }
+        } else {
+          // Truly a status zone drop
+          const zoneInfo = dropZonesRef.current.get(overId);
+          if (zoneInfo) {
+            if (item.status !== zoneInfo.targetStatus) {
+              await zoneInfo.onDrop(item.id, zoneInfo.targetStatus);
+            } else if (zoneInfo.onReorder) {
+              await zoneInfo.onReorder(item.id, pointerPositionRef.current.y);
+            }
           }
-        } else if (currentEpicId && onRemoveFromEpic) {
-          // Dropped on unknown zone - remove from epic if applicable
-          await onRemoveFromEpic(item.id, null);
-        }
-      } else {
-        // Dropped outside all zones
-        if (currentEpicId && onRemoveFromEpic) {
-          await onRemoveFromEpic(item.id, null);
         }
       }
+      // over: null means collision detection missed - treat as no-op.
+      // Same gap issue we handle in handleDragOver. Don't remove from epic
+      // just because the collision detection had a gap at the moment of drop.
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Failed to complete drop operation';
       onError?.(errorMessage);
@@ -351,15 +358,11 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
         draggedItem,
         activeDropZone,
         activeEpicZone,
-        dragPosition,
-        draggedCardHeight,
         setDraggedItem: handleSetDraggedItem,
         registerDropZone,
         unregisterDropZone,
         registerEpicDropZone,
         unregisterEpicDropZone,
-        registerCardPosition,
-        unregisterCard,
         getCardPositions,
       }}
     >
@@ -374,12 +377,19 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
       >
         {children}
         {/* Drag overlay - uses @dnd-kit's built-in DragOverlay */}
-        <DragOverlay dropAnimation={null}>
+        <DragOverlay dropAnimation={{
+          duration: 150,
+          easing: 'ease',
+          keyframes: ({ transform }) => [
+            { opacity: 1, transform: transform.initial ? `translate3d(${transform.initial.x}px, ${transform.initial.y}px, 0)` : undefined },
+            { opacity: 0, transform: transform.initial ? `translate3d(${transform.initial.x}px, ${transform.initial.y}px, 0)` : undefined },
+          ],
+        }}>
           {draggedItem && renderDragOverlay ? (
             <div
               style={{
                 transform: 'scale(1.02)',
-                boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)',
+                boxShadow: shadow.overlay,
                 borderRadius: 8,
                 overflow: 'hidden',
               }}

package/apps/dashboard/components/DraggableCard.tsx

@@ -12,8 +12,7 @@ interface DraggableCardProps {
 }
 
 export function DraggableCard({ item, children, disabled = false }: DraggableCardProps) {
-  const { registerCardPosition, unregisterCard, draggedItem, setDraggedItem } = useDragContext();
-  const cardRef = useRef<HTMLDivElement>(null);
+  const { draggedItem, setDraggedItem } = useDragContext();
   const prevDisabledRef = useRef(disabled);
 
   const {
@@ -33,65 +32,26 @@ export function DraggableCard({ item, children, disabled = false }: DraggableCar
     const isNowDisabled = disabled;
     prevDisabledRef.current = disabled;
 
-    // If this card was being dragged and just became disabled, cancel the drag
     if (wasEnabled && isNowDisabled && draggedItem?.id === item.id) {
       setDraggedItem(null);
     }
   }, [disabled, draggedItem, item.id, setDraggedItem]);
 
-  // Register card position for optimized reorder calculations
-  useEffect(() => {
-    if (disabled || !cardRef.current) return;
-
-    const updatePosition = () => {
-      if (cardRef.current) {
-        registerCardPosition(item.id, cardRef.current.getBoundingClientRect());
-      }
-    };
-
-    // Initial registration
-    updatePosition();
-
-    // Update on resize/layout changes
-    const resizeObserver = new ResizeObserver(updatePosition);
-    resizeObserver.observe(cardRef.current);
-
-    // Update on scroll (positions are viewport-relative)
-    const scrollHandler = () => updatePosition();
-    window.addEventListener('scroll', scrollHandler, true);
-
-    return () => {
-      unregisterCard(item.id);
-      resizeObserver.disconnect();
-      window.removeEventListener('scroll', scrollHandler, true);
-    };
-  }, [item.id, disabled, registerCardPosition, unregisterCard]);
-
-  // Combine refs
-  const setRefs = (node: HTMLDivElement | null) => {
-    setNodeRef(node);
-    (cardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
-  };
-
   if (disabled) {
     return <>{children}</>;
   }
 
-  // When dragging, hide the original card (overlay shows the dragged version)
+  // When dragging, fade the original card but keep its space to prevent layout jumping.
+  // The DragOverlay shows the card at the cursor; the thin insertion line shows where it'll land.
   const style = {
-    // Only apply transform when not using drag overlay (which we are using)
-    // So we keep the original position and hide it instead
-    opacity: isDragging ? 0 : 1,
-    height: isDragging ? 0 : 'auto',
-    overflow: isDragging ? 'hidden' : 'visible',
-    padding: isDragging ? 0 : undefined,
-    marginBottom: isDragging ? 0 : undefined,
+    opacity: isDragging ? 0.2 : 1,
+    transition: 'opacity 150ms ease',
     touchAction: 'none' as const,
   };
 
   return (
     <div
-      ref={setRefs}
+      ref={setNodeRef}
       style={style}
       className="cursor-grab active:cursor-grabbing"
       data-draggable="true"

package/apps/dashboard/components/DropZone.tsx

@@ -23,7 +23,7 @@ export function DropZone({
   allowReorder = false,
   children,
   className = '',
-  highlightClassName = 'ring-2 ring-blue-400 bg-blue-50/50 dark:bg-blue-900/20',
+  highlightClassName = 'ring-2 ring-[#819D9F] bg-[#819D9F]/10 dark:bg-[#819D9F]/20',
   reorderHighlightClassName = 'ring-2 ring-amber-400 bg-amber-50/50 dark:bg-amber-900/20',
   'data-testid': testId,
 }: DropZoneProps) {
@@ -72,7 +72,7 @@ export function DropZone({
   return (
     <div
       ref={setRefs}
-      className={`${className} ${isValidTarget && isActive ? activeHighlight : ''} transition-all duration-200`}
+      className={`${className} ${isValidTarget && isActive ? activeHighlight : ''} transition-[color,background-color,box-shadow] duration-200 ease-out`}
       data-testid={testId}
       data-drop-zone={targetStatus}
       data-is-active={isActive}

package/apps/dashboard/components/EditableDetailDescription.tsx

@@ -81,7 +81,7 @@ export function EditableDetailDescription({ description, itemId }: EditableDetai
           className={`w-full text-zinc-700 dark:text-zinc-300 bg-white dark:bg-zinc-700 border rounded px-2 py-1.5 focus:outline-none focus:ring-2 resize-y ${
             error
               ? 'border-red-500 focus:ring-red-500'
-              : 'border-zinc-300 dark:border-zinc-600 focus:ring-blue-500'
+              : 'border-zinc-300 dark:border-zinc-600 focus:ring-[#819D9F]'
           }`}
         />
         {error && (

package/apps/dashboard/components/EditableTitle.tsx

@@ -7,12 +7,15 @@ interface EditableTitleProps {
   itemId: number;
   onSave: (id: number, newTitle: string) => Promise<void>;
   variant?: 'card' | 'page';
+  isEditing?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+  clickToEdit?: boolean;
 }
 
 const variantStyles = {
   card: {
-    display: 'text-sm text-zinc-900 dark:text-zinc-100 leading-snug cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded px-1 py-0.5 -mx-1 -my-0.5',
-    input: 'text-sm text-zinc-900 dark:text-zinc-100 leading-snug w-full bg-white dark:bg-zinc-700 border rounded px-1 py-0.5 focus:outline-none focus:ring-2',
+    display: 'text-base font-medium text-zinc-900 dark:text-zinc-100 leading-snug cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded px-1 py-0.5 -mx-1 -my-0.5',
+    input: 'text-base font-medium text-zinc-900 dark:text-zinc-100 leading-snug w-full bg-white dark:bg-zinc-700 border rounded px-1 py-0.5 focus:outline-none focus:ring-2',
   },
   page: {
     display: 'text-2xl font-bold text-zinc-900 dark:text-zinc-100 cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded px-1 py-0.5 -mx-1 -my-0.5',
@@ -20,8 +23,13 @@ const variantStyles = {
   },
 };
 
-export function EditableTitle({ title, itemId, onSave, variant = 'card' }: EditableTitleProps) {
-  const [isEditing, setIsEditing] = useState(false);
+export function EditableTitle({ title, itemId, onSave, variant = 'card', isEditing: externalIsEditing, onEditingChange, clickToEdit = true }: EditableTitleProps) {
+  const [internalIsEditing, setInternalIsEditing] = useState(false);
+  const isEditing = externalIsEditing ?? internalIsEditing;
+  const setIsEditing = (value: boolean) => {
+    setInternalIsEditing(value);
+    onEditingChange?.(value);
+  };
   const [editValue, setEditValue] = useState(title);
   const [error, setError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -33,7 +41,15 @@ export function EditableTitle({ title, itemId, onSave, variant = 'card' }: Edita
     }
   }, [isEditing]);
 
+  useEffect(() => {
+    if (isEditing) {
+      setEditValue(title);
+      setError(null);
+    }
+  }, [isEditing, title]);
+
   const handleClick = (e: React.MouseEvent) => {
+    if (!clickToEdit) return;
     e.preventDefault();
     e.stopPropagation();
     setEditValue(title);
@@ -93,7 +109,7 @@ export function EditableTitle({ title, itemId, onSave, variant = 'card' }: Edita
           className={`${variantStyles[variant].input} ${
             error
               ? 'border-red-500 focus:ring-red-500'
-              : 'border-zinc-300 dark:border-zinc-600 focus:ring-blue-500'
+              : 'border-zinc-300 dark:border-zinc-600 focus:ring-[#819D9F]'
           }`}
         />
         {error && (
@@ -103,10 +119,14 @@ export function EditableTitle({ title, itemId, onSave, variant = 'card' }: Edita
     );
   }
 
+  const displayClass = clickToEdit
+    ? variantStyles[variant].display
+    : variantStyles[variant].display.replace('cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded px-1 py-0.5 -mx-1 -my-0.5', '');
+
   return (
     <p
       onClick={handleClick}
-      className={variantStyles[variant].display}
+      className={displayClass}
     >
       {title}
     </p>

package/apps/dashboard/components/ElapsedTimer.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+// Persist timer start timestamps outside the component so they survive remounts (e.g., tab switches)
+const timerStartTimes = new Map<string, number>();
+
+export function ElapsedTimer({ isStreaming, timerKey }: { isStreaming: boolean; timerKey: string }) {
+  const [elapsed, setElapsed] = useState(() => {
+    const existing = timerStartTimes.get(timerKey);
+    return existing ? Math.floor((Date.now() - existing) / 1000) : 0;
+  });
+
+  useEffect(() => {
+    if (isStreaming) {
+      // Start or continue timing — reuse persisted start time if available
+      if (!timerStartTimes.has(timerKey)) {
+        timerStartTimes.set(timerKey, Date.now());
+      }
+      // Immediately sync elapsed value for this timerKey (prevents stale value on tab switch)
+      const startTime = timerStartTimes.get(timerKey);
+      if (startTime != null) {
+        setElapsed(Math.floor((Date.now() - startTime) / 1000));
+      }
+      const interval = setInterval(() => {
+        const startTime = timerStartTimes.get(timerKey);
+        if (startTime != null) {
+          setElapsed(Math.floor((Date.now() - startTime) / 1000));
+        }
+      }, 1000);
+      return () => clearInterval(interval);
+    } else {
+      // Reset when not streaming
+      timerStartTimes.delete(timerKey);
+      setElapsed(0);
+    }
+  }, [isStreaming, timerKey]);
+
+  if (!isStreaming) return null;
+
+  const minutes = Math.floor(elapsed / 60);
+  const seconds = elapsed % 60;
+  const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+
+  return (
+    <div
+      className="text-xs text-zinc-500"
+      style={{ width: '3rem', flexShrink: 0, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}
+      data-testid="elapsed-timer"
+    >
+      {display}
+    </div>
+  );
+}