jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/EpicGroup.tsx

@@ -1,15 +1,10 @@
-'use client';
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-import Link from 'next/link';
-import { AnimatePresence } from 'framer-motion';
+import { useCallback, useRef, useEffect, useState, memo } from 'react';
+import { Link } from 'react-router-dom';
 import { useDroppable } from '@dnd-kit/core';
 import type { WorkItem, InFlightItem } from '@/lib/db';
-import type { Session } from '../contexts/ClaudeSessionContext';
 import { KanbanCard } from './KanbanCard';
 import { useDragContext } from './DragContext';
 import { DraggableCard } from './DraggableCard';
-import { PlaceholderCard } from './PlaceholderCard';
 import { TypeIcon } from './TypeIcon';
 
 // Safe bounds for display_order to prevent overflow
@@ -31,7 +26,7 @@ export interface EpicGroupProps {
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
   onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
-  activeSessions?: Map<string, Session>;
+  activeSessionIds?: Set<string>;
   onOpenSession?: (id: string) => void;
   onCloseSession?: (id: string) => void;
   onError?: (message: string) => void;
@@ -41,19 +36,9 @@ export interface EpicGroupProps {
   onAnimationComplete?: () => void;
 }
 
-export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlightItems, isDraggable = true, onTitleSave, onStatusChange, onReject, onRestart, onEpicAssign, onOrderChange, onTriggerClaude, activeSessions, onOpenSession, onCloseSession, onError, usageAllowed = true, animatingItemId, onAnimationComplete }: EpicGroupProps) {
+export const EpicGroup = memo(function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlightItems, isDraggable = true, onTitleSave, onStatusChange, onReject, onRestart, onEpicAssign, onOrderChange, onTriggerClaude, activeSessionIds, onOpenSession, onCloseSession, onError, usageAllowed = true, animatingItemId, onAnimationComplete }: EpicGroupProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const { isDragging, draggedItem, activeEpicZone, activeDropZone, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
-
-  // Local pointer tracking - only this component needs pointer Y for insertion preview.
-  // Using local state avoids re-rendering every context consumer at 60fps.
-  const [pointerY, setPointerY] = useState(0);
-  useEffect(() => {
-    if (!isDragging) return;
-    const onPointerMove = (e: PointerEvent) => { setPointerY(e.clientY); };
-    window.addEventListener('pointermove', onPointerMove);
-    return () => window.removeEventListener('pointermove', onPointerMove);
-  }, [isDragging]);
+  const { isDragging, draggedItem, activeEpicZone, activeDropZone, registerEpicDropZone, unregisterEpicDropZone, getCardPositions, pointerPositionRef } = useDragContext();
 
   // Use @dnd-kit's useDroppable for epic zone collision detection
   const zoneId = epicId !== null ? `epic-${epicId}` : undefined;
@@ -122,19 +107,20 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
     const itemMap = new Map(currentItems.map(item => [item.id, item]));
     const visualOrder = cardPositions.map(pos => itemMap.get(pos.id)!).filter(Boolean);
 
-    // Calculate proper midpoint display_order between surrounding items
+    // Calculate proper midpoint display_order between surrounding items.
+    // Fallback uses id * INCREMENT to match the sort comparator and give proper gaps.
     let newOrder: number;
     if (visualOrder.length === 0) {
       newOrder = DISPLAY_ORDER_INCREMENT;
     } else if (insertIndex === 0) {
-      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id;
+      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id * DISPLAY_ORDER_INCREMENT;
       newOrder = firstOrder - DISPLAY_ORDER_INCREMENT;
     } else if (insertIndex >= visualOrder.length) {
-      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id;
+      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id * DISPLAY_ORDER_INCREMENT;
       newOrder = lastOrder + DISPLAY_ORDER_INCREMENT;
     } else {
-      const before = visualOrder[insertIndex - 1].display_order ?? visualOrder[insertIndex - 1].id;
-      const after = visualOrder[insertIndex].display_order ?? visualOrder[insertIndex].id;
+      const before = visualOrder[insertIndex - 1].display_order ?? visualOrder[insertIndex - 1].id * DISPLAY_ORDER_INCREMENT;
+      const after = visualOrder[insertIndex].display_order ?? visualOrder[insertIndex].id * DISPLAY_ORDER_INCREMENT;
       newOrder = Math.floor((before + after) / 2);
     }
 
@@ -190,31 +176,62 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
   // 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
+  // Insertion preview — tracks pointer position via rAF loop so the line
+  // moves continuously even when DragContext change guards suppress re-renders.
   const showPreview = (showReorderHighlight || showRemoveFromEpicZone || showHighlight || showUngroupedReorder) && draggedItem;
-  let insertAfterItemId: number | null | undefined = undefined; // undefined = no preview, null = at beginning
+  const [insertAfterItemId, setInsertAfterItemId] = useState<number | null | undefined>(undefined);
 
-  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);
+  useEffect(() => {
+    if (!showPreview || !draggedItem) {
+      setInsertAfterItemId(undefined);
+      return;
+    }
 
-    // Find which card the pointer is after
-    insertAfterItemId = null; // Default to beginning
-    for (const pos of groupPositions) {
-      if (pointerY > pos.midY) {
-        insertAfterItemId = pos.id;
-      } else {
-        break;
+    // Build item ID set once — items array is stable during a drag
+    const itemIds = new Set(items.map(item => item.id));
+    const dragId = draggedItem.id;
+
+    let rafId: number;
+    let lastTickTime = 0;
+    // Reusable array to avoid allocations per frame
+    const groupPositions: Array<{ id: number; midY: number }> = [];
+
+    const tick = () => {
+      const now = performance.now();
+      // Throttle to ~100ms — fast enough for smooth preview, avoids layout
+      // thrashing on slower hardware (Intel Macs).
+      if (now - lastTickTime < 100) {
+        rafId = requestAnimationFrame(tick);
+        return;
       }
-    }
-  }
+      lastTickTime = now;
+
+      const allPositions = getCardPositions();
+      groupPositions.length = 0;
+      for (const pos of allPositions) {
+        if (itemIds.has(pos.id) && pos.id !== dragId) {
+          groupPositions.push({ id: pos.id, midY: (pos.rect.top + pos.rect.bottom) / 2 });
+        }
+      }
+      groupPositions.sort((a, b) => a.midY - b.midY);
+
+      const currentPointerY = pointerPositionRef.current.y;
+      let newInsert: number | null = null;
+      for (const pos of groupPositions) {
+        if (currentPointerY > pos.midY) {
+          newInsert = pos.id;
+        } else {
+          break;
+        }
+      }
+
+      setInsertAfterItemId(prev => prev === newInsert ? prev : newInsert);
+      rafId = requestAnimationFrame(tick);
+    };
+
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, [showPreview, draggedItem, items, getCardPositions, pointerPositionRef]);
 
   if (items.length === 0 && !showHighlight && !showReorderHighlight && !shouldRenderUngroupedZone) return null;
 
@@ -224,13 +241,13 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
   return (
     <div
       ref={setRefs}
-      className={`${isStandaloneItem ? 'mb-2' : 'mb-6 p-3 -mx-3'} rounded-lg transition-[color,background-color,box-shadow] duration-200 ease-out ${
+      className={`${isStandaloneItem ? 'mb-2' : 'mb-6 p-3 -mx-3'} rounded-lg transition-[color,background-color] duration-200 ease-out ${
         showHighlight
-          ? 'ring-2 ring-indigo-400 bg-indigo-100/50 dark:bg-indigo-900/30'
+          ? 'ring-2 ring-[#819D9F] bg-[#E8EEEF]/50 dark:bg-[#819D9F]/20'
           : showReorderHighlight
-          ? 'ring-2 ring-purple-400 bg-purple-100/50 dark:bg-purple-900/30'
+          ? 'ring-2 ring-[#E3D985] bg-[#F9F7E8]/50 dark:bg-[#E3D985]/20'
           : showRemoveFromEpicZone
-          ? 'ring-2 ring-orange-400 bg-orange-100/50 dark:bg-orange-900/30'
+          ? 'ring-2 ring-[#E57A44] bg-[#FCEEE6]/50 dark:bg-[#E57A44]/20'
           : ''
       }`}
       data-epic-id={epicId}
@@ -238,7 +255,8 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
       {epicTitle && (
         <div className="flex items-center gap-3 mb-3">
           <Link
-            href={`/work/${epicId}`}
+            to={`/work/${epicId}`}
+            viewTransition
             className="group/epic flex items-center gap-1.5 text-base font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
           >
             <TypeIcon type="epic" />
@@ -263,12 +281,12 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
             </span>
           )}
           {showHighlight && (
-            <span className="text-xs px-2 py-1 rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300">
+            <span className="text-xs px-2 py-1 rounded bg-[#E8EEEF] text-[#4A6365] dark:bg-[#819D9F]/20 dark:text-[#819D9F]">
               drop to assign
             </span>
           )}
           {showReorderHighlight && (
-            <span className="text-xs px-2 py-1 rounded bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300">
+            <span className="text-xs px-2 py-1 rounded bg-[#F9F7E8] text-[#8B7D2F] dark:bg-[#E3D985]/20 dark:text-[#E3D985]">
               reorder
             </span>
           )}
@@ -277,27 +295,33 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
       {/* Ungrouped section header - shown when dragging from epic */}
       {isUngroupedSection && showRemoveFromEpicZone && items.length === 0 && (
         <div className="flex items-center gap-3 py-4">
-          <span className="text-base font-medium text-orange-600 dark:text-orange-400">
+          <span className="text-base font-medium text-[#E57A44] dark:text-[#E57A44]">
             Drop here to remove from epic
           </span>
         </div>
       )}
       {isUngroupedSection && items.length > 0 && isDraggable && showRemoveFromEpicZone && (
         <div className="flex items-center gap-3 mb-3">
-          <span className="text-xs px-2 py-1 rounded bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300">
+          <span className="text-xs px-2 py-1 rounded bg-[#FCEEE6] text-[#9E4A1E] dark:bg-[#E57A44]/20 dark:text-[#E57A44]">
             drop to remove from epic
           </span>
         </div>
       )}
       <div className="space-y-3">
-        {/* Placeholder at the beginning (insertAfterItemId === null) */}
-        <AnimatePresence>
-          {insertAfterItemId === null && (
-            <PlaceholderCard key="placeholder-start" />
-          )}
-        </AnimatePresence>
-        {items.map((item) => (
+        {items.map((item, index) => (
           <div key={item.id}>
+            {/* CSS insertion indicator — replaces AnimatePresence+PlaceholderCard for less overhead */}
+            {index === 0 && insertAfterItemId === null && (
+              <div
+                data-testid="drag-placeholder"
+                style={{
+                  height: 3,
+                  borderRadius: 2,
+                  background: 'linear-gradient(90deg, transparent, #819D9F, transparent)',
+                  margin: '2px 8px 8px',
+                }}
+              />
+            )}
             <DraggableCard item={item} disabled={!isDraggable}>
               <KanbanCard
                 item={item}
@@ -306,7 +330,7 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
                 onReject={onReject}
                 onRestart={onRestart}
                 onTriggerClaude={onTriggerClaude}
-                hasActiveSession={activeSessions?.has(String(item.id))}
+                hasActiveSession={activeSessionIds?.has(String(item.id))}
                 onOpenSession={onOpenSession}
                 onCloseSession={onCloseSession}
                 usageAllowed={usageAllowed}
@@ -315,15 +339,21 @@ export function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlig
                 isHighlighted={false}
               />
             </DraggableCard>
-            {/* Placeholder after this card */}
-            <AnimatePresence>
-              {insertAfterItemId === item.id && (
-                <PlaceholderCard key={`placeholder-${item.id}`} />
-              )}
-            </AnimatePresence>
+            {/* CSS insertion indicator after this card */}
+            {insertAfterItemId === item.id && (
+              <div
+                data-testid="drag-placeholder"
+                style={{
+                  height: 3,
+                  borderRadius: 2,
+                  background: 'linear-gradient(90deg, transparent, #819D9F, transparent)',
+                  margin: '8px 8px 2px',
+                }}
+              />
+            )}
           </div>
         ))}
       </div>
     </div>
   );
-}
+});

package/apps/dashboard/components/GateCard.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState } from 'react';
 import type { ClaudeMessage } from '../lib/session-stream-manager';

package/apps/dashboard/components/GateChoiceCard.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState } from 'react';
 
@@ -58,7 +57,7 @@ export function GateChoiceCard({
                   onMouseLeave={() => setHoveredId(null)}
                   disabled={disabled && !isSelected}
                   className={`
-                    w-full text-left rounded-xl border-2 p-4 transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-out
+                    w-full text-left rounded-xl border-2 p-4 transition-[color,background-color,border-color] duration-200 ease-out
                     ${isSelected
                       ? 'border-[#819D9F] dark:border-[#819D9F] bg-[#e8f0f0] dark:bg-[#819D9F]/20 ring-2 ring-[#819D9F]/30'
                       : 'border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-600'

package/apps/dashboard/components/InstallClaudeScreen.tsx

@@ -1,7 +1,4 @@
-'use client';
-
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
 import { Button } from '@/components/ui/Button';
 
 const statusMessages = [
@@ -73,12 +70,11 @@ export function InstallClaudeScreen({
       <div className="max-w-md w-full space-y-10">
         {/* Logo */}
         <div className="flex flex-col items-center space-y-6">
-          <Image
+          <img
             src="/jettypod_wordmark.png"
             alt="JettyPod"
             width={160}
             height={40}
-            priority
           />
           {!isInstalling && !isSuccess && (
             <>

package/apps/dashboard/components/JettyLoader.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState, useEffect } from 'react';