jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/DragContext.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react';
 import {
@@ -17,6 +16,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>;
@@ -53,6 +53,8 @@ interface DragContextType {
   registerEpicDropZone: (id: string, info: EpicDropZoneInfo) => void;
   unregisterEpicDropZone: (id: string) => void;
   getCardPositions: () => CardPosition[];
+  /** Ref to current pointer position — read by EpicGroups for insertion preview without per-group listeners */
+  pointerPositionRef: React.RefObject<{ x: number; y: number }>;
 }
 
 const DragContext = createContext<DragContextType>({
@@ -66,6 +68,7 @@ const DragContext = createContext<DragContextType>({
   registerEpicDropZone: () => {},
   unregisterEpicDropZone: () => {},
   getCardPositions: () => [],
+  pointerPositionRef: { current: { x: 0, y: 0 } },
 });
 
 interface DragProviderProps {
@@ -114,6 +117,13 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
   const epicDropZonesRef = useRef<Map<string, EpicDropZoneInfo>>(new Map());
   const draggedItemRef = useRef<WorkItem | null>(null);
   const pointerPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  // Generation counter — prevents stale async handleDragEnd finally blocks
+  // from clearing state that belongs to a newer drag operation.
+  const dragGenRef = useRef(0);
+
+  // Ref mirrors for change detection — prevents re-renders when zone hasn't changed
+  const activeDropZoneRef = useRef<string | null>(null);
+  const activeEpicZoneRef = useRef<string | null>(null);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -147,9 +157,18 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
     epicDropZonesRef.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)
+  // Read fresh card positions from DOM — cached for 150ms so multiple
+  // EpicGroups reading positions across renders reuse the same measurements.
+  const positionCacheRef = useRef<{ frame: number; positions: CardPosition[] } | null>(null);
   const getCardPositions = useCallback((): CardPosition[] => {
+    const frame = performance.now();
+    // Reuse cached positions within 150ms — card positions don't change
+    // meaningfully during a drag gesture. Matches EpicGroup's rAF throttle
+    // interval so querySelectorAll + getBoundingClientRect only runs once
+    // per visible update, avoiding layout thrashing on slower hardware.
+    if (positionCacheRef.current && frame - positionCacheRef.current.frame < 150) {
+      return positionCacheRef.current.positions;
+    }
     const positions: CardPosition[] = [];
     const elements = document.querySelectorAll<HTMLElement>('[data-item-id]');
     elements.forEach((el) => {
@@ -158,6 +177,7 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
         positions.push({ id, rect: el.getBoundingClientRect() });
       }
     });
+    positionCacheRef.current = { frame, positions };
     return positions;
   }, []);
 
@@ -169,6 +189,7 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
   const handleDragStart = useCallback((event: DragStartEvent) => {
     const item = event.active.data.current?.item as WorkItem | undefined;
     if (item) {
+      dragGenRef.current += 1;
       setDraggedItem(item);
       draggedItemRef.current = item;
     }
@@ -203,44 +224,53 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
     }
 
     const overId = String(over.id);
+    let newDropZone: string | null = null;
+    let newEpicZone: string | null = null;
+    const px = pointerPositionRef.current.x;
+    const py = pointerPositionRef.current.y;
 
-    // Check if it's an epic zone
     if (overId.startsWith('epic-')) {
-      setActiveEpicZone(overId);
-      // Also check if there's an underlying status zone
-      let foundStatusZone: string | null = null;
-      dropZonesRef.current.forEach((info, id) => {
+      newEpicZone = overId;
+      // Check which nested status zone the pointer is in (live rects)
+      for (const [id, info] of dropZonesRef.current) {
         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) {
-          foundStatusZone = id;
+        if (px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom) {
+          newDropZone = id;
+          break;
         }
-      });
-      setActiveDropZone(foundStatusZone);
+      }
     } else if (dropZonesRef.current.has(overId)) {
-      setActiveDropZone(overId);
-      // 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) => {
+      newDropZone = overId;
+      // Check which nested epic zone the pointer is in (live rects)
+      for (const [id, info] of epicDropZonesRef.current) {
         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;
+        if (px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom) {
+          newEpicZone = id;
+          break;
         }
-      });
-      setActiveEpicZone(foundEpicZone);
-    } else {
-      setActiveDropZone(null);
-      setActiveEpicZone(null);
+      }
+    }
+
+    // Only update state when zone actually changed — prevents redundant re-renders
+    // when pointer stays within the same zone across collision events.
+    if (newDropZone !== activeDropZoneRef.current) {
+      activeDropZoneRef.current = newDropZone;
+      setActiveDropZone(newDropZone);
+    }
+    if (newEpicZone !== activeEpicZoneRef.current) {
+      activeEpicZoneRef.current = newEpicZone;
+      setActiveEpicZone(newEpicZone);
     }
   }, []);
 
   const handleDragEnd = useCallback(async (event: DragEndEvent) => {
     const { over, activatorEvent, delta } = event;
+    // Snapshot the current drag generation so the finally block can detect
+    // whether a new drag started while we were awaiting the drop handler.
+    const endGen = dragGenRef.current;
+
+    // Clear position cache so drop handlers get fresh DOM measurements
+    positionCacheRef.current = null;
 
     // Get final pointer position (both x and y needed for epic zone bounds check)
     const pointerEvent = activatorEvent as PointerEvent;
@@ -268,44 +298,47 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
       const overId = over ? String(over.id) : null;
       const isEpicZoneDrop = overId?.startsWith('epic-') ?? false;
 
-      // Check for epic zone drop first (higher precedence)
-      if (isEpicZoneDrop && overId) {
-        const epicZoneInfo = epicDropZonesRef.current.get(overId);
-        if (epicZoneInfo) {
-          // Same epic - reorder within epic
-          if (currentEpicId === epicZoneInfo.epicId && epicZoneInfo.onReorder) {
-            await epicZoneInfo.onReorder(item.id, pointerPositionRef.current.y);
-          } else if (currentEpicId !== epicZoneInfo.epicId) {
-            // Different epic - assign to new epic
-            await epicZoneInfo.onEpicAssign(item.id, epicZoneInfo.epicId);
-          }
-        }
-      } else if (overId) {
-        // 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;
+      // Helper: resolve drop target from pointer position against live DOM rects.
+      // Used both when dnd-kit returns a status zone (epic zones are nested) and
+      // as a fallback when collision detection misses (over === null). This
+      // prevents dropped reorders from being silently swallowed when the pointer
+      // is near zone boundaries — especially common when dragging upward.
+      const resolveFromPointer = (): { epicZone: string | null; dropZone: string | null } => {
+        const px = pointerPositionRef.current.x;
+        const py = pointerPositionRef.current.y;
+        let epicZone: string | null = null;
+        let dropZone: 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 (px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom) {
+            epicZone = id;
           }
         });
+        for (const [id, info] of dropZonesRef.current) {
+          const rect = info.element.getBoundingClientRect();
+          if (px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom) {
+            dropZone = id;
+            break;
+          }
+        }
+        return { epicZone, dropZone };
+      };
 
-        if (resolvedEpicZone) {
-          // Pointer is within an epic zone - route to epic handler
-          const epicZoneInfo = epicDropZonesRef.current.get(resolvedEpicZone);
+      // Helper: route a resolved drop to the appropriate handler
+      const routeDrop = async (epicZone: string | null, dropZone: string | null) => {
+        if (epicZone) {
+          const epicZoneInfo = epicDropZonesRef.current.get(epicZone);
           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);
             }
+            return;
           }
-        } else {
-          // Truly a status zone drop
-          const zoneInfo = dropZonesRef.current.get(overId);
+        }
+        if (dropZone) {
+          const zoneInfo = dropZonesRef.current.get(dropZone);
           if (zoneInfo) {
             if (item.status !== zoneInfo.targetStatus) {
               await zoneInfo.onDrop(item.id, zoneInfo.targetStatus);
@@ -314,18 +347,50 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
             }
           }
         }
+      };
+
+      // Check for epic zone drop first (higher precedence)
+      if (isEpicZoneDrop && overId) {
+        const epicZoneInfo = epicDropZonesRef.current.get(overId);
+        if (epicZoneInfo) {
+          // Same epic - reorder within epic
+          if (currentEpicId === epicZoneInfo.epicId && epicZoneInfo.onReorder) {
+            await epicZoneInfo.onReorder(item.id, pointerPositionRef.current.y);
+          } else if (currentEpicId !== epicZoneInfo.epicId) {
+            // Different epic - assign to new epic
+            await epicZoneInfo.onEpicAssign(item.id, epicZoneInfo.epicId);
+          }
+        }
+      } else if (overId) {
+        // Collision detection returned a status zone, but epic zones are nested
+        // inside status zones. Check pointer against live rects to find the real target.
+        const { epicZone, dropZone } = resolveFromPointer();
+        await routeDrop(epicZone, dropZone || overId);
+      } else {
+        // Collision detection missed (over === null) — common when pointer is
+        // near zone boundaries during upward drags. Fall back to pointer
+        // position against live DOM rects instead of silently dropping the op.
+        const { epicZone, dropZone } = resolveFromPointer();
+        if (epicZone || dropZone) {
+          await routeDrop(epicZone, dropZone);
+        }
       }
-      // 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);
     } finally {
-      setDraggedItem(null);
-      draggedItemRef.current = null;
-      setActiveDropZone(null);
-      setActiveEpicZone(null);
+      // Only clean up if no new drag has started while we were awaiting.
+      // A newer handleDragStart bumps dragGenRef, so if they differ,
+      // this finally belongs to a stale drag — skip cleanup.
+      if (dragGenRef.current === endGen) {
+        setDraggedItem(null);
+        draggedItemRef.current = null;
+        setActiveDropZone(null);
+        setActiveEpicZone(null);
+        activeDropZoneRef.current = null;
+        activeEpicZoneRef.current = null;
+        positionCacheRef.current = null;
+      }
     }
   }, [onRemoveFromEpic, onError]);
 
@@ -334,6 +399,9 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
     draggedItemRef.current = null;
     setActiveDropZone(null);
     setActiveEpicZone(null);
+    activeDropZoneRef.current = null;
+    activeEpicZoneRef.current = null;
+    positionCacheRef.current = null;
   }, []);
 
   // Cancel drag on Escape key
@@ -363,6 +431,7 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
         registerEpicDropZone,
         unregisterEpicDropZone,
         getCardPositions,
+        pointerPositionRef,
       }}
     >
       <DndContext
@@ -388,9 +457,11 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
             <div
               style={{
                 transform: 'scale(1.02)',
-                boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)',
+                boxShadow: shadow.overlay,
                 borderRadius: 8,
                 overflow: 'hidden',
+                WebkitBackfaceVisibility: 'hidden',
+                backfaceVisibility: 'hidden',
               }}
             >
               {renderDragOverlay(draggedItem)}

package/apps/dashboard/components/DraggableCard.tsx

@@ -1,6 +1,5 @@
-'use client';
 
-import { useRef, useEffect } from 'react';
+import { memo, useRef, useEffect } from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import type { WorkItem } from '@/lib/db';
 import { useDragContext } from './DragContext';
@@ -11,7 +10,7 @@ interface DraggableCardProps {
   disabled?: boolean;
 }
 
-export function DraggableCard({ item, children, disabled = false }: DraggableCardProps) {
+export const DraggableCard = memo(function DraggableCard({ item, children, disabled = false }: DraggableCardProps) {
   const { draggedItem, setDraggedItem } = useDragContext();
   const prevDisabledRef = useRef(disabled);
 
@@ -46,7 +45,6 @@ export function DraggableCard({ item, children, disabled = false }: DraggableCar
   const style = {
     opacity: isDragging ? 0.2 : 1,
     transition: 'opacity 150ms ease',
-    touchAction: 'none' as const,
   };
 
   return (
@@ -62,4 +60,4 @@ export function DraggableCard({ item, children, disabled = false }: DraggableCar
       {children}
     </div>
   );
-}
+});

package/apps/dashboard/components/DropZone.tsx

@@ -1,6 +1,5 @@
-'use client';
 
-import { useRef, useEffect, useId } from 'react';
+import { memo, useRef, useEffect, useId } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import { useDragContext } from './DragContext';
 
@@ -16,15 +15,15 @@ interface DropZoneProps {
   'data-testid'?: string;
 }
 
-export function DropZone({
+export const DropZone = memo(function DropZone({
   targetStatus,
   onDrop,
   onReorder,
   allowReorder = false,
   children,
   className = '',
-  highlightClassName = 'ring-2 ring-blue-400 bg-blue-50/50 dark:bg-blue-900/20',
-  reorderHighlightClassName = 'ring-2 ring-amber-400 bg-amber-50/50 dark:bg-amber-900/20',
+  highlightClassName = 'ring-2 ring-[#819D9F] bg-[#819D9F]/10 dark:bg-[#819D9F]/20',
+  reorderHighlightClassName = 'ring-2 ring-[#E3D985] bg-[#F9F7E8]/50 dark:bg-[#E3D985]/20',
   'data-testid': testId,
 }: DropZoneProps) {
   const { isDragging, draggedItem, activeDropZone, activeEpicZone, registerDropZone, unregisterDropZone } = useDragContext();
@@ -72,7 +71,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] duration-200 ease-out`}
       data-testid={testId}
       data-drop-zone={targetStatus}
       data-is-active={isActive}
@@ -81,4 +80,4 @@ export function DropZone({
       {children}
     </div>
   );
-}
+});

package/apps/dashboard/components/EditableDetailDescription.tsx

@@ -1,15 +1,13 @@
-'use client';
-
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
+import { dataBridge } from '@/lib/data-bridge';
 
 interface EditableDetailDescriptionProps {
   description: string | null;
   itemId: number;
+  onDescriptionChange?: (newDescription: string) => void;
 }
 
-export function EditableDetailDescription({ description, itemId }: EditableDetailDescriptionProps) {
-  const router = useRouter();
+export function EditableDetailDescription({ description, itemId, onDescriptionChange }: EditableDetailDescriptionProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState(description ?? '');
   const [error, setError] = useState<string | null>(null);
@@ -30,12 +28,8 @@ export function EditableDetailDescription({ description, itemId }: EditableDetai
     const newDescription = editValue.trim();
     if (newDescription !== (description ?? '')) {
       try {
-        await fetch(`/api/work/${itemId}/description`, {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ description: newDescription }),
-        });
-        router.refresh();
+        await dataBridge.updateDescription(itemId, newDescription);
+        onDescriptionChange?.(newDescription);
       } catch (err) {
         const message = err instanceof Error ? err.message : 'Unknown error';
         setError(`Failed to save: ${message}`);
@@ -43,7 +37,7 @@ export function EditableDetailDescription({ description, itemId }: EditableDetai
       }
     }
     setIsEditing(false);
-  }, [editValue, description, itemId, router]);
+  }, [editValue, description, itemId]);
 
   const handleClick = () => {
     setEditValue(description ?? '');
@@ -81,7 +75,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/EditableDetailTitle.tsx

@@ -1,25 +1,18 @@
-'use client';
-
 import { useCallback } from 'react';
-import { useRouter } from 'next/navigation';
 import { EditableTitle } from './EditableTitle';
+import { dataBridge } from '@/lib/data-bridge';
 
 interface EditableDetailTitleProps {
   title: string;
   itemId: number;
+  onTitleChange?: (newTitle: string) => void;
 }
 
-export function EditableDetailTitle({ title, itemId }: EditableDetailTitleProps) {
-  const router = useRouter();
-
+export function EditableDetailTitle({ title, itemId, onTitleChange }: EditableDetailTitleProps) {
   const handleSave = useCallback(async (id: number, newTitle: string) => {
-    await fetch(`/api/work/${id}/title`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ title: newTitle }),
-    });
-    router.refresh();
-  }, [router]);
+    await dataBridge.updateTitle(id, newTitle);
+    onTitleChange?.(newTitle);
+  }, [onTitleChange]);
 
   return <EditableTitle title={title} itemId={itemId} onSave={handleSave} variant="page" />;
 }

package/apps/dashboard/components/EditableTitle.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState, useRef, useEffect } from 'react';
 
@@ -7,12 +6,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 +22,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 +40,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 +108,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 +118,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,66 @@
+
+import { useState, useEffect } from 'react';
+
+// Persist timer start timestamps outside the component so they survive remounts (e.g., tab switches).
+// Capped at MAX_ENTRIES to prevent unbounded growth — evicts oldest entry on overflow.
+const MAX_TIMER_ENTRIES = 50;
+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());
+        // Evict oldest entry if Map exceeds cap
+        if (timerStartTimes.size > MAX_TIMER_ENTRIES) {
+          const oldest = timerStartTimes.keys().next().value;
+          if (oldest != null) timerStartTimes.delete(oldest);
+        }
+      }
+      // 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);
+        // Do NOT delete timerStartTimes here — component may unmount due to
+        // navigation while session is still streaming. The start time must
+        // persist so the timer resumes correctly when the user navigates back.
+        // Cleanup happens in the else branch when streaming actually stops.
+      };
+    } 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>
+  );
+}