Improve loading spinner response

frontends/ui/src/features/chat/hooks/use-deep-research.spec.ts

@@ -157,14 +157,16 @@ const mockCreateDeepResearchClient = vi.fn((options: { callbacks: Record<string,
 
 const mockCancelJob = vi.fn()
 const mockGetJobStatus = vi.fn<() => Promise<{ status: string }>>().mockResolvedValue({ status: 'running' })
-const mockGetJobReport = vi.fn<() => Promise<{ has_report: boolean; report?: string }>>().mockResolvedValue({ has_report: false })
+const mockGetJobReport = vi
+  .fn<(jobId: string, authToken?: string) => Promise<{ has_report: boolean; report?: string }>>()
+  .mockResolvedValue({ has_report: false })
 
 vi.mock('@/adapters/api', () => ({
   createDeepResearchClient: (options: { callbacks: Record<string, (...args: unknown[]) => void> }) =>
     mockCreateDeepResearchClient(options),
   cancelJob: (...args: unknown[]) => mockCancelJob(...args),
   getJobStatus: () => mockGetJobStatus(),
-  getJobReport: () => mockGetJobReport(),
+  getJobReport: (jobId: string, authToken?: string) => mockGetJobReport(jobId, authToken),
 }))
 
 import { useChatStore } from '../store'
@@ -595,6 +597,47 @@ describe('useDeepResearch', () => {
       )
     })
 
+    test('onJobStatus success backfills missing report content before finalizing', async () => {
+      mockGetJobReport.mockResolvedValueOnce({
+        has_report: true,
+        report: 'Recovered final report',
+      })
+
+      await setupConnectedHook({
+        reportContent: '',
+        activeDeepResearchMessageId: 'msg-123',
+      })
+
+      vi.mocked(useChatStore).getState = vi.fn(() => ({
+        ...mockStoreState,
+        reportContent: '',
+        deepResearchLLMSteps: [],
+        deepResearchToolCalls: [],
+        deepResearchCitations: [],
+        addErrorCard: mockAddErrorCard,
+        deepResearchOwnerConversationId: 'test-conv-123',
+        activeDeepResearchMessageId: 'msg-123',
+      })) as unknown as typeof useChatStore.getState
+
+      await act(async () => {
+        await mockClient?.callbacks.onJobStatus?.('success', undefined)
+      })
+
+      expect(mockGetJobReport).toHaveBeenCalledWith('job-456', 'mock-id-token')
+      expect(mockSetReportContent).toHaveBeenCalledWith('Recovered final report')
+      expect(mockPatchConversationMessage).toHaveBeenCalledWith(
+        'test-conv-123',
+        'msg-123',
+        expect.objectContaining({
+          deepResearchJobStatus: 'success',
+          isDeepResearchActive: false,
+          showViewReport: true,
+        })
+      )
+      expect(mockSetStreamLoaded).toHaveBeenCalledWith(true)
+      expect(mockCompleteDeepResearch).toHaveBeenCalled()
+    })
+
     test('onJobStatus failure stops todos and shows error', async () => {
       await setupConnectedHook()
 

frontends/ui/src/features/chat/hooks/use-deep-research.ts

@@ -16,6 +16,7 @@ import { useEffect, useRef, useCallback, useState } from 'react'
 import {
   createDeepResearchClient,
   cancelJob,
+  getJobReport,
   type DeepResearchClient,
   type DeepResearchJobStatus,
   type TodoItem,
@@ -248,7 +249,7 @@ export const useDeepResearch = (): UseDeepResearchReturn => {
             }
           },
 
-          onJobStatus: (status, error) => {
+          onJobStatus: async (status, error) => {
             if (buf.active) flushBuffer()
             if (!isOwnerActive()) return
             resetTimeout()
@@ -266,10 +267,23 @@ export const useDeepResearch = (): UseDeepResearchReturn => {
 
             if (status === 'success') {
               setCurrentStatus('complete')
-              const { reportContent: currentReport, deepResearchLLMSteps, deepResearchToolCalls } = state
+              let resolvedReport = state.reportContent
+              if (!resolvedReport?.trim()) {
+                try {
+                  const response = await getJobReport(jobId, idToken || undefined)
+                  if (response.has_report && response.report?.trim()) {
+                    resolvedReport = response.report
+                    setReportContent(response.report)
+                  }
+                } catch (reportError) {
+                  console.warn('Failed to backfill final report after deep research success:', reportError)
+                }
+              }
+
+              const { deepResearchLLMSteps, deepResearchToolCalls } = state
               const totalTokens = deepResearchLLMSteps.reduce((sum, step) => sum + (step.usage?.input_tokens || 0) + (step.usage?.output_tokens || 0), 0)
               const toolCallCount = deepResearchToolCalls.length
-              const hasReport = Boolean(currentReport?.trim())
+              const hasReport = Boolean(resolvedReport?.trim())
 
               if (ownerConvId && messageId) {
                 patchConversationMessage(ownerConvId, messageId, {

frontends/ui/src/features/chat/hooks/use-load-job-data.spec.ts

@@ -151,4 +151,22 @@ describe('useLoadJobData', () => {
       'Failed to get job status: 404'
     )
   })
+
+  test('preserves loaded stream data when fetching missing report for same completed job', async () => {
+    mockStoreState.deepResearchJobId = 'job-123'
+    mockStoreState.deepResearchStreamLoaded = true
+    mockGetJobStatus.mockResolvedValue({ status: 'success' })
+    mockGetJobReport.mockResolvedValue({ has_report: true, report: 'Recovered report' })
+    mockGetJobState.mockResolvedValue({ has_state: false, artifacts: undefined })
+
+    const { result } = renderHook(() => useLoadJobData())
+
+    await act(async () => {
+      await result.current.loadReport('job-123')
+    })
+
+    expect(mockClearDeepResearch).not.toHaveBeenCalled()
+    expect(mockSetReportContent).toHaveBeenCalledWith('Recovered report')
+    expect(mockSetLoadedJobId).toHaveBeenCalledWith('job-123')
+  })
 })

frontends/ui/src/features/chat/hooks/use-load-job-data.ts

@@ -491,6 +491,10 @@ export const useLoadJobData = (): UseLoadJobDataReturn => {
       const hasStreamData =
         currentState.deepResearchJobId === jobId &&
         currentState.deepResearchStreamLoaded
+      const preserveExistingResearchState =
+        !shouldStreamFull &&
+        currentState.deepResearchJobId === jobId &&
+        currentState.deepResearchStreamLoaded
 
       // If we have what we need, just open the panel
       if (hasReportData && (!shouldStreamFull || hasStreamData)) {
@@ -514,7 +518,9 @@ export const useLoadJobData = (): UseLoadJobDataReturn => {
           throw new Error(`Job is still ${jobStatus}. Cannot load data from incomplete job.`)
         }
 
-        clearDeepResearch()
+        if (!preserveExistingResearchState) {
+          clearDeepResearch()
+        }
 
         if (shouldStreamFull) {
           await streamFullJob(jobId)

frontends/ui/src/features/layout/components/ResearchPanel.spec.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { render, screen } from '@/test-utils'
+import { waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi, describe, test, expect, beforeEach } from 'vitest'
 import { ResearchPanel } from './ResearchPanel'
@@ -34,7 +35,16 @@ vi.mock('@/adapters/api', () => ({
 let mockIsDeepResearchStreaming = false
 let mockDeepResearchJobId: string | null = null
 let mockDeepResearchStreamLoaded = false
+let mockCurrentStatus: string | null = null
+let mockReportContent = ''
+let mockDeepResearchTodosCount = 0
+let mockDeepResearchCitationsCount = 0
+let mockDeepResearchLLMStepsCount = 0
+let mockDeepResearchAgentsCount = 0
+let mockDeepResearchToolCallsCount = 0
+let mockDeepResearchFilesCount = 0
 const mockImportJobStream = vi.fn()
+const mockLoadReport = vi.fn().mockResolvedValue(undefined)
 
 const mockCancelCurrentJob = vi.fn()
 
@@ -43,13 +53,30 @@ vi.mock('@/features/chat', () => ({
     isDeepResearchStreaming: boolean
     deepResearchJobId: string | null
     deepResearchStreamLoaded: boolean
+    currentStatus: string | null
+    reportContent: string
+    deepResearchTodos: Array<unknown>
+    deepResearchCitations: Array<unknown>
+    deepResearchLLMSteps: Array<unknown>
+    deepResearchAgents: Array<unknown>
+    deepResearchToolCalls: Array<unknown>
+    deepResearchFiles: Array<unknown>
   }) => unknown) =>
     selector({
       isDeepResearchStreaming: mockIsDeepResearchStreaming,
       deepResearchJobId: mockDeepResearchJobId,
       deepResearchStreamLoaded: mockDeepResearchStreamLoaded,
+      currentStatus: mockCurrentStatus,
+      reportContent: mockReportContent,
+      deepResearchTodos: Array.from({ length: mockDeepResearchTodosCount }),
+      deepResearchCitations: Array.from({ length: mockDeepResearchCitationsCount }),
+      deepResearchLLMSteps: Array.from({ length: mockDeepResearchLLMStepsCount }),
+      deepResearchAgents: Array.from({ length: mockDeepResearchAgentsCount }),
+      deepResearchToolCalls: Array.from({ length: mockDeepResearchToolCallsCount }),
+      deepResearchFiles: Array.from({ length: mockDeepResearchFilesCount }),
     }),
   useLoadJobData: () => ({
+    loadReport: mockLoadReport,
     importStreamOnly: mockImportJobStream,
     isLoading: false,
   }),
@@ -77,7 +104,9 @@ vi.mock('./CitationsTab', () => ({
 
 vi.mock('./ReportTab', () => ({
   ReportTab: ({ children }: { children?: React.ReactNode }) => (
-    <div data-testid="report-tab">Report Tab Content {children}</div>
+    <div data-testid="report-tab">
+      {mockReportContent || 'Report Tab Content'} {children}
+    </div>
   ),
 }))
 
@@ -89,7 +118,16 @@ describe('ResearchPanel', () => {
     mockIsDeepResearchStreaming = false
     mockDeepResearchJobId = null
     mockDeepResearchStreamLoaded = false
+    mockCurrentStatus = null
+    mockReportContent = ''
+    mockDeepResearchTodosCount = 0
+    mockDeepResearchCitationsCount = 0
+    mockDeepResearchLLMStepsCount = 0
+    mockDeepResearchAgentsCount = 0
+    mockDeepResearchToolCallsCount = 0
+    mockDeepResearchFilesCount = 0
     mockImportJobStream.mockClear()
+    mockLoadReport.mockClear()
   })
 
   describe('panel visibility', () => {
@@ -140,6 +178,19 @@ describe('ResearchPanel', () => {
       expect(mockSetResearchPanelTab).toHaveBeenCalledWith('citations')
     })
 
+    test('loads report data when report tab is clicked for a completed job without report content', async () => {
+      const user = userEvent.setup()
+      mockDeepResearchJobId = 'job-123'
+      mockResearchPanelTab = 'tasks'
+
+      render(<ResearchPanel isAuthenticated={true} />)
+
+      await user.click(screen.getByText('Report'))
+
+      expect(mockSetResearchPanelTab).toHaveBeenCalledWith('report')
+      expect(mockLoadReport).toHaveBeenCalledWith('job-123')
+    })
+
     test('displays correct tab content based on researchPanelTab', () => {
       mockResearchPanelTab = 'tasks'
       const { rerender } = render(<ResearchPanel isAuthenticated={true} />)
@@ -225,6 +276,16 @@ describe('ResearchPanel', () => {
       // When not streaming, the generate icon is shown instead of spinner
       expect(screen.queryByLabelText('Researching')).not.toBeInTheDocument()
     })
+
+    test('shows a tab loading spinner while a new deep research job is waiting for first task data', () => {
+      mockIsDeepResearchStreaming = true
+      mockDeepResearchJobId = 'job-123'
+      mockResearchPanelTab = 'tasks'
+
+      render(<ResearchPanel isAuthenticated={true} />)
+
+      expect(screen.getByLabelText('Preparing research tasks...')).toBeInTheDocument()
+    })
   })
 
   describe('children rendering', () => {
@@ -239,6 +300,36 @@ describe('ResearchPanel', () => {
 
       expect(screen.getByTestId('custom-content')).toBeInTheDocument()
     })
+
+    test('shows report content automatically when it arrives while report tab is open', () => {
+      mockResearchPanelTab = 'report'
+      mockIsDeepResearchStreaming = true
+      mockDeepResearchJobId = 'job-123'
+      mockCurrentStatus = 'writing'
+      mockReportContent = ''
+
+      const { rerender } = render(<ResearchPanel isAuthenticated={true} />)
+
+      expect(screen.getByLabelText('Drafting report...')).toBeInTheDocument()
+      expect(screen.queryByText('Recovered final report')).not.toBeInTheDocument()
+
+      mockReportContent = 'Recovered final report'
+      rerender(<ResearchPanel isAuthenticated={true} />)
+
+      expect(screen.queryByLabelText('Drafting report...')).not.toBeInTheDocument()
+      expect(screen.getByText('Recovered final report')).toBeInTheDocument()
+    })
+
+    test('loads report data automatically when panel is already open on report tab', async () => {
+      mockResearchPanelTab = 'report'
+      mockDeepResearchJobId = 'job-123'
+
+      render(<ResearchPanel isAuthenticated={true} />)
+
+      await waitFor(() => {
+        expect(mockLoadReport).toHaveBeenCalledWith('job-123')
+      })
+    })
   })
 
   describe('segmented control groups', () => {
@@ -291,5 +382,19 @@ describe('ResearchPanel', () => {
 
       expect(mockOpenRightPanel).not.toHaveBeenCalled()
     })
+
+    test('loads report data when opening panel directly on report tab for a completed job', async () => {
+      const user = userEvent.setup()
+      mockRightPanel = null
+      mockResearchPanelTab = 'report'
+      mockDeepResearchJobId = 'job-123'
+
+      render(<ResearchPanel isAuthenticated={true} />)
+
+      await user.click(screen.getByTestId('research-panel-toggle'))
+
+      expect(mockOpenRightPanel).toHaveBeenCalledWith('research')
+      expect(mockLoadReport).toHaveBeenCalledWith('job-123')
+    })
   })
 })