jettypod 4.4.115 → 4.4.118

package/apps/dashboard/components/DragContext.tsx

@@ -47,15 +47,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 +60,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 +110,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 +147,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 +171,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 +220,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 +242,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 +281,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 +357,11 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
         draggedItem,
         activeDropZone,
         activeEpicZone,
-        dragPosition,
-        draggedCardHeight,
         setDraggedItem: handleSetDraggedItem,
         registerDropZone,
         unregisterDropZone,
         registerEpicDropZone,
         unregisterEpicDropZone,
-        registerCardPosition,
-        unregisterCard,
         getCardPositions,
       }}
     >
@@ -374,7 +376,14 @@ 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={{

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/GateCard.tsx

@@ -5,6 +5,7 @@ import type { ClaudeMessage } from '../lib/session-stream-manager';
 import { GateChoiceCard } from './GateChoiceCard';
 import type { ChoiceOption } from './GateChoiceCard';
 import { ModeStartCard, isModeStartGate } from './ModeStartCard';
+import { TipCard } from './TipCard';
 
 // Gate display configuration matching JettyPod design system
 const GATE_CONFIG: Record<string, {
@@ -117,6 +118,17 @@ const GATE_CONFIG: Record<string, {
     darkText: 'dark:text-zinc-300',
     fileMono: 'text-indigo-600',
   },
+  'tip': {
+    emoji: '💡',
+    label: 'Tip',
+    bg: 'bg-teal-50',
+    darkBg: 'dark:bg-teal-900/20',
+    border: 'border-teal-200',
+    darkBorder: 'dark:border-teal-800',
+    text: 'text-zinc-700',
+    darkText: 'dark:text-zinc-300',
+    fileMono: 'text-teal-600',
+  },
 };
 
 const DEFAULT_CONFIG = {
@@ -207,6 +219,15 @@ export function GateCard({ message, isLatest = false, onAnswerQuestion, answered
     return <ModeStartCard gateType={gateType} />;
   }
 
+  // Tip gates render as dismissible guidance cards
+  if (gateType === 'tip') {
+    const tipId = (gateData.id as string) || `tip-${message.timestamp}`;
+    const icon = (gateData.icon as string) || '💡';
+    const title = (gateData.title as string) || 'Tip';
+    const body = (gateData.body as string) || '';
+    return <TipCard tipId={tipId} icon={icon} title={title} body={body} />;
+  }
+
   // Question gates render as interactive choice cards
   if (gateType === 'question') {
     const question = (gateData.question as string) || 'A decision is needed';

package/apps/dashboard/components/InstallClaudeScreen.tsx

@@ -1,20 +1,74 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
 
+const statusMessages = [
+  "Downloading Claude Code...",
+  "Setting Up Environment...",
+  "Configuring Permissions...",
+  "Almost There...",
+];
+
 interface InstallClaudeScreenProps {
   onInstall: () => void;
   isInstalling: boolean;
-  installProgress?: string;
+  isSuccess: boolean;
 }
 
 export function InstallClaudeScreen({
   onInstall,
   isInstalling,
-  installProgress,
+  isSuccess,
 }: InstallClaudeScreenProps) {
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!isInstalling || isSuccess) return;
+    const interval = setInterval(() => {
+      setMessageIndex((prev) => (prev + 1) % statusMessages.length);
+    }, 2500);
+    return () => clearInterval(interval);
+  }, [isInstalling, isSuccess]);
+
+  useEffect(() => {
+    if (!isInstalling || isSuccess) return;
+    const interval = setInterval(() => {
+      setProgress((prev) => Math.min(prev + 2, 90));
+    }, 300);
+    return () => clearInterval(interval);
+  }, [isInstalling, isSuccess]);
+
+  useEffect(() => {
+    if (isSuccess) setProgress(100);
+  }, [isSuccess]);
+
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
+      <style jsx>{`
+        @keyframes pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.5; transform: scale(1.1); }
+        }
+        @keyframes drawCheck {
+          to { stroke-dashoffset: 0; }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        .pulse-dot {
+          animation: pulse 1.5s ease-in-out infinite;
+        }
+        .checkmark-draw {
+          animation: drawCheck 0.6s ease-out forwards;
+        }
+        .fade-in {
+          animation: fadeIn 0.4s ease-out forwards;
+        }
+      `}</style>
+
       <div className="max-w-md w-full space-y-8">
         {/* Logo */}
         <div className="flex flex-col items-center space-y-4">
@@ -25,27 +79,73 @@ export function InstallClaudeScreen({
             height={40}
             priority
           />
-          <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
-            Claude Code Required
-          </h1>
-          <p className="text-zinc-500 dark:text-zinc-400 text-center">
-            JettyPod requires Claude Code to be installed.
-            Click below to install it automatically.
-          </p>
+          {!isInstalling && !isSuccess && (
+            <>
+              <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
+                Claude Code Required
+              </h1>
+              <p className="text-zinc-500 dark:text-zinc-400 text-center">
+                JettyPod requires Claude Code to be installed.
+                Click below to install it automatically.
+              </p>
+            </>
+          )}
         </div>
 
-        {/* Install Button or Progress */}
+        {/* Install Button / Progress / Success */}
         <div className="pt-4">
-          {isInstalling ? (
-            <div className="space-y-4" data-testid="install-progress">
-              <div className="w-full py-3 px-6 rounded-xl font-medium text-center bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300">
-                Installing Claude Code...
+          {isSuccess ? (
+            <div className="flex flex-col items-center space-y-6 fade-in" data-testid="install-success">
+              {/* Animated Checkmark */}
+              <div
+                className="w-20 h-20 rounded-full flex items-center justify-center"
+                style={{ backgroundColor: '#819D9F' }}
+              >
+                <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+                  <polyline
+                    points="10,20 18,28 30,12"
+                    stroke="white"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    fill="none"
+                    strokeDasharray="40"
+                    strokeDashoffset="40"
+                    className="checkmark-draw"
+                  />
+                </svg>
+              </div>
+
+              <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
+                Claude Code Installed
+              </h2>
+              <p className="text-zinc-500 dark:text-zinc-400 text-center">
+                Redirecting you to connect your account...
+              </p>
+            </div>
+          ) : isInstalling ? (
+            <div className="space-y-6" data-testid="install-progress">
+              {/* Pulse dot + status message */}
+              <div className="flex items-center justify-center space-x-3">
+                <div
+                  className="w-3 h-3 rounded-full pulse-dot"
+                  style={{ backgroundColor: '#819D9F' }}
+                />
+                <span className="text-zinc-600 dark:text-zinc-300 font-medium">
+                  {statusMessages[messageIndex]}
+                </span>
+              </div>
+
+              {/* Progress bar */}
+              <div className="w-full h-1 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-300 ease-out"
+                  style={{
+                    width: `${progress}%`,
+                    background: 'linear-gradient(90deg, #c8d9da, #819D9F)',
+                  }}
+                />
               </div>
-              {installProgress && (
-                <pre className="bg-zinc-100 dark:bg-zinc-800 p-4 rounded-lg text-sm text-zinc-600 dark:text-zinc-300 overflow-auto max-h-48">
-                  {installProgress}
-                </pre>
-              )}
             </div>
           ) : (
             <button
@@ -73,18 +173,20 @@ export function InstallClaudeScreen({
           )}
         </div>
 
-        {/* Info Section */}
-        <div className="pt-8 space-y-4">
-          <div className="border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 text-zinc-500 dark:text-zinc-400 text-sm">
-            <p>
-              <strong className="text-zinc-700 dark:text-zinc-300">What is Claude Code?</strong>
-            </p>
-            <p className="mt-2">
-              Claude Code is an AI-powered coding assistant by Anthropic.
-              JettyPod uses it to help you plan and build software.
-            </p>
+        {/* Info Section - only show when idle */}
+        {!isInstalling && !isSuccess && (
+          <div className="pt-8 space-y-4">
+            <div className="border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 text-zinc-500 dark:text-zinc-400 text-sm">
+              <p>
+                <strong className="text-zinc-700 dark:text-zinc-300">What is Claude Code?</strong>
+              </p>
+              <p className="mt-2">
+                Claude Code is an AI-powered coding assistant by Anthropic.
+                JettyPod uses it to help you plan and build software.
+              </p>
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );