Merge pull request #1246 from kubet/fix/stream-restore-on-thread-navigation

fix: stream restore on thread navigation

Author: kubet

frontend/src/app/(dashboard)/projects/[projectId]/thread/[threadId]/page.tsx

@@ -29,6 +29,8 @@ import { ThreadError, UpgradeDialog, ThreadLayout } from '../_components';
 import { useVncPreloader } from '@/hooks/useVncPreloader';
 import { useThreadAgent } from '@/hooks/react-query/agents/use-agents';
 import { AgentRunLimitDialog } from '@/components/thread/agent-run-limit-dialog';
+import { useQueryClient } from '@tanstack/react-query';
+import { threadKeys } from '@/hooks/react-query/threads/keys';
 
 export default function ThreadPage({
   params,
@@ -42,6 +44,7 @@ export default function ThreadPage({
   const { projectId, threadId } = unwrappedParams;
   const isMobile = useIsMobile();
   const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
 
   // State
   const [newMessage, setNewMessage] = useState('');
@@ -61,7 +64,7 @@ export default function ThreadPage({
     runningCount: number;
     runningThreadIds: string[];
   } | null>(null);
-  
+
 
   // Refs - simplified for flex-column-reverse
   const latestMessageRef = useRef<HTMLDivElement>(null);
@@ -184,14 +187,14 @@ export default function ThreadPage({
       } else {
         // If this is a user message, replace any optimistic user message with temp ID
         if (message.type === 'user') {
-          const optimisticIndex = prev.findIndex(m => 
-            m.type === 'user' && 
+          const optimisticIndex = prev.findIndex(m =>
+            m.type === 'user' &&
             m.message_id?.startsWith('temp-') &&
             m.content === message.content
           );
           if (optimisticIndex !== -1) {
             // Replace the optimistic message with the real one
-            return prev.map((m, index) => 
+            return prev.map((m, index) =>
               index === optimisticIndex ? message : m
             );
           }
@@ -329,7 +332,7 @@ export default function ThreadPage({
           if (error instanceof AgentRunLimitError) {
             console.log("Caught AgentRunLimitError:", error.detail);
             const { running_thread_ids, running_count } = error.detail;
-            
+
             // Show the dialog with limit information
             setAgentLimitData({
               runningCount: running_count,
@@ -460,13 +463,13 @@ export default function ThreadPage({
   }, [initialPanelOpenAttempted, messages, toolCalls, initialLoadCompleted, setIsSidePanelOpen, setCurrentToolIndex]);
 
   useEffect(() => {
-    console.log('[STREAM STUFF] Stream effect triggered:', { 
-      agentRunId, 
-      currentHookRunId, 
-      initialLoadCompleted, 
-      userInitiatedRun 
+    console.log('[STREAM STUFF] Stream effect triggered:', {
+      agentRunId,
+      currentHookRunId,
+      initialLoadCompleted,
+      userInitiatedRun
     });
-    
+
     // Start streaming if user initiated a run (don't wait for initialLoadCompleted for first-time users)
     if (agentRunId && agentRunId !== currentHookRunId && userInitiatedRun) {
       console.log('[STREAM STUFF] User-initiated stream starting for agentRunId:', agentRunId);
@@ -575,12 +578,12 @@ export default function ThreadPage({
   useEffect(() => {
     const handleScroll = () => {
       if (!scrollContainerRef.current) return;
-      
+
       const scrollTop = scrollContainerRef.current.scrollTop;
       const scrollHeight = scrollContainerRef.current.scrollHeight;
       const clientHeight = scrollContainerRef.current.clientHeight;
       const threshold = 100;
-      
+
       // With flex-column-reverse, scrollTop becomes NEGATIVE when scrolling up
       // Show button when scrollTop < -threshold (scrolled up enough from bottom)
       const shouldShow = scrollTop < -threshold && scrollHeight > clientHeight;
@@ -592,7 +595,7 @@ export default function ThreadPage({
       scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
       // Check initial state
       setTimeout(() => handleScroll(), 100);
-      
+
       return () => {
         scrollContainer.removeEventListener('scroll', handleScroll);
       };

frontend/src/app/(dashboard)/projects/[projectId]/thread/_hooks/useThreadData.ts

@@ -46,8 +46,14 @@ export function useThreadData(threadId: string, projectId: string): UseThreadDat
   const projectQuery = useProjectQuery(projectId);
   const agentRunsQuery = useAgentRunsQuery(threadId);
 
+
   useEffect(() => {
     let isMounted = true;
+    
+    // Reset refs when thread changes
+    agentRunsCheckedRef.current = false;
+    messagesLoadedRef.current = false;
+    initialLoadCompleted.current = false;
 
     async function initializeData() {
       if (!initialLoadCompleted.current) setIsLoading(true);
@@ -72,6 +78,8 @@ export function useThreadData(threadId: string, projectId: string): UseThreadDat
         }
 
         if (messagesQuery.data && !messagesLoadedRef.current) {
+         
+
           const unifiedMessages = (messagesQuery.data || [])
             .filter((msg) => msg.type !== 'status')
             .map((msg: ApiMessageType) => ({
@@ -86,7 +94,6 @@ export function useThreadData(threadId: string, projectId: string): UseThreadDat
             }));
 
           setMessages(unifiedMessages);
-          console.log('[PAGE] Loaded Messages (excluding status, keeping browser_state):', unifiedMessages.length);
           messagesLoadedRef.current = true;
 
           if (!hasInitiallyScrolled.current) {
@@ -95,26 +102,19 @@ export function useThreadData(threadId: string, projectId: string): UseThreadDat
         }
 
         if (agentRunsQuery.data && !agentRunsCheckedRef.current && isMounted) {
-          console.log('[PAGE] Checking for active agent runs...');
+         
+          
           agentRunsCheckedRef.current = true;
-
-          // Only check for very recent agent runs (last 30 seconds) to avoid false positives
-          const thirtySecondsAgo = new Date(Date.now() - 30 * 1000);
-          const recentActiveRun = agentRunsQuery.data.find((run) => {
-            const runCreatedAt = new Date(run.started_at || 0);
-            return run.status === 'running' && runCreatedAt > thirtySecondsAgo;
-          });
 
-          if (recentActiveRun && isMounted) {
-            console.log('[PAGE] Found recent active run on load:', recentActiveRun.id);
-            setAgentRunId(recentActiveRun.id);
+          // Check for any running agents - no time restrictions!
+          const runningRuns = agentRunsQuery.data.filter(r => r.status === 'running');
+          if (runningRuns.length > 0) {
+            const latestRunning = runningRuns[0]; // Use first running agent
+            setAgentRunId(latestRunning.id);
             setAgentStatus('running');
           } else {
-            console.log('[PAGE] No recent active agent runs found');
-            if (isMounted) {
-              setAgentStatus('idle');
-              setAgentRunId(null);
-            }
+            setAgentStatus('idle');
+            setAgentRunId(null);
           }
         }