jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/ClaudePanelInput.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState, useRef, useCallback, useEffect, KeyboardEvent, ChangeEvent } from 'react';
 import { m, AnimatePresence } from 'framer-motion';
@@ -40,13 +39,33 @@ export function ClaudePanelInput({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const lastEscapeTimeRef = useRef<number>(0);
 
+  // Per-session draft map: save/restore draft text when switching tabs
+  const draftsRef = useRef(new Map<string, string>());
+  const prevSessionRef = useRef(activeSessionId);
+  const messageRef = useRef(message);
+  messageRef.current = message;
+
+  useEffect(() => {
+    const prevId = prevSessionRef.current;
+    if (prevId && prevId !== activeSessionId) {
+      draftsRef.current.set(prevId, messageRef.current);
+    }
+    const restored = activeSessionId ? draftsRef.current.get(activeSessionId) ?? '' : '';
+    setMessage(restored);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+    prevSessionRef.current = activeSessionId;
+  }, [activeSessionId]);
+
   // Use external image state if provided (panel-level drag-drop), otherwise internal
   const attachedImages = externalImages ?? internalImages;
   const setAttachedImages = onImagesChange ?? setInternalImages;
 
-  // Auto-focus textarea when active session changes (new session or tab switch)
+  // Auto-focus textarea on mount and when active session changes.
+  // The mount case handles when ClaudePanelInput replaces ReviewFooter after rejection.
   useEffect(() => {
-    if (activeSessionId && textareaRef.current) {
+    if (textareaRef.current) {
       textareaRef.current.focus();
     }
   }, [activeSessionId]);
@@ -107,7 +126,7 @@ export function ClaudePanelInput({
     >
       <div
         className={`
-          relative rounded-lg border-2 transition-[border-color,box-shadow] duration-200 ease-out
+          relative rounded-lg border-2 transition-[border-color] duration-200 ease-out
           ${isFocused ? 'border-[#819D9F] bg-white' : 'border-zinc-300 bg-white'}
           ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
         `}

package/apps/dashboard/components/ConnectClaudeScreen.tsx

@@ -1,7 +1,4 @@
-'use client';
-
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
 import { Button } from '@/components/ui/Button';
 
 type ConnectState = 'idle' | 'waiting' | 'success' | 'error';
@@ -93,12 +90,11 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
       <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
           />
           <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
             Connect Claude Code

package/apps/dashboard/components/CopyableId.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState } from 'react';
 
@@ -59,7 +58,7 @@ export function CopyableId({ id, title, type, size = 'sm' }: CopyableIdProps) {
   return (
     <button
       onClick={handleCopy}
-      className={`flex items-center gap-1 text-zinc-400 font-mono -mx-1 rounded cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 active:scale-95 transition-[color,background-color,transform] duration-200 ease-out ${sizeClasses}`}
+      className={`flex items-center gap-1 text-zinc-400 font-mono -mx-1 rounded cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 active:scale-95 transition-[color,background-color] duration-200 ease-out ${sizeClasses}`}
       title={`Copy: #${id} ${title} (${type})`}
     >
       <span>#{id}</span>

package/apps/dashboard/components/DetailReviewActions.tsx

@@ -1,30 +1,25 @@
-'use client';
-
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { dataBridge } from '@/lib/data-bridge';
 
 interface DetailReviewActionsProps {
   workItemId: number;
 }
 
 export function DetailReviewActions({ workItemId }: DetailReviewActionsProps) {
-  const router = useRouter();
+  const navigate = useNavigate();
   const [showRejectInput, setShowRejectInput] = useState(false);
   const [rejectReason, setRejectReason] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleAccept = async () => {
     setIsSubmitting(true);
-    const res = await fetch(`/api/work/${workItemId}/status`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ status: 'done' }),
-    });
-    if (res.ok) {
-      router.push('/');
-    } else {
+    try {
+      await dataBridge.updateStatus(workItemId, 'done');
+      navigate('/');
+    } catch {
       setIsSubmitting(false);
     }
   };
@@ -32,14 +27,10 @@ export function DetailReviewActions({ workItemId }: DetailReviewActionsProps) {
   const handleRejectConfirm = async () => {
     if (!rejectReason.trim()) return;
     setIsSubmitting(true);
-    const res = await fetch(`/api/work/${workItemId}/status`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ status: 'in_progress', rejectionReason: rejectReason.trim() }),
-    });
-    if (res.ok) {
-      router.push(`/?rejected=${workItemId}&reason=${encodeURIComponent(rejectReason.trim())}`);
-    } else {
+    try {
+      await dataBridge.updateStatus(workItemId, 'in_progress', rejectReason.trim());
+      navigate(`/?rejected=${workItemId}&reason=${encodeURIComponent(rejectReason.trim())}`);
+    } catch {
       setIsSubmitting(false);
     }
   };

package/apps/dashboard/components/DragContext.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react';
 import {
@@ -54,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>({
@@ -67,6 +68,7 @@ const DragContext = createContext<DragContextType>({
   registerEpicDropZone: () => {},
   unregisterEpicDropZone: () => {},
   getCardPositions: () => [],
+  pointerPositionRef: { current: { x: 0, y: 0 } },
 });
 
 interface DragProviderProps {
@@ -115,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, {
@@ -148,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) => {
@@ -159,6 +177,7 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
         positions.push({ id, rect: el.getBoundingClientRect() });
       }
     });
+    positionCacheRef.current = { frame, positions };
     return positions;
   }, []);
 
@@ -170,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;
     }
@@ -204,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;
@@ -269,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);
@@ -315,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]);
 
@@ -335,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
@@ -364,6 +431,7 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
         registerEpicDropZone,
         unregisterEpicDropZone,
         getCardPositions,
+        pointerPositionRef,
       }}
     >
       <DndContext
@@ -392,6 +460,8 @@ export function DragProvider({ children, renderDragOverlay, onRemoveFromEpic, on
                 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,7 +15,7 @@ interface DropZoneProps {
   'data-testid'?: string;
 }
 
-export function DropZone({
+export const DropZone = memo(function DropZone({
   targetStatus,
   onDrop,
   onReorder,
@@ -24,7 +23,7 @@ export function DropZone({
   children,
   className = '',
   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',
+  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-[color,background-color,box-shadow] duration-200 ease-out`}
+      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 ?? '');

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';
 

package/apps/dashboard/components/ElapsedTimer.tsx

@@ -1,8 +1,9 @@
-'use client';
 
 import { useState, useEffect } from 'react';
 
-// Persist timer start timestamps outside the component so they survive remounts (e.g., tab switches)
+// 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 }) {
@@ -16,6 +17,11 @@ export function ElapsedTimer({ isStreaming, timerKey }: { isStreaming: boolean;
       // 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);
@@ -28,7 +34,13 @@ export function ElapsedTimer({ isStreaming, timerKey }: { isStreaming: boolean;
           setElapsed(Math.floor((Date.now() - startTime) / 1000));
         }
       }, 1000);
-      return () => clearInterval(interval);
+      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);