refactor(frontend): 修复刷新页面后流式消息丢失的问题，修复会话页面偶发白屏的问题

frontend/src/apis/client.ts

@@ -120,8 +120,8 @@ class APIClient {
     }
   }
 
-  async get<T>(endpoint: string): Promise<T> {
-    return this.request<T>(endpoint, { method: 'GET' })
+  async get<T>(endpoint: string, options?: RequestInit): Promise<T> {
+    return this.request<T>(endpoint, { method: 'GET', ...options })
   }
 
   async post<T>(endpoint: string, data?: unknown): Promise<T> {

frontend/src/apis/tasks.ts

@@ -286,8 +286,8 @@ export const taskApis = {
     return apiClient.put(`/tasks/${id}`, data)
   },
 
-  getTaskDetail: async (id: number): Promise<TaskDetail> => {
-    return apiClient.get(`/tasks/${id}`)
+  getTaskDetail: async (id: number, signal?: AbortSignal): Promise<TaskDetail> => {
+    return apiClient.get(`/tasks/${id}`, signal ? { signal } : undefined)
   },
 
   // Send a message. If task_id not provided, create task first, then send.

frontend/src/app/(tasks)/chat/error.tsx

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2025 Weibo, Inc.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+'use client'
+
+import { useEffect } from 'react'
+import { useTranslation } from '@/hooks/useTranslation'
+import { Button } from '@/components/ui/button'
+
+/**
+ * Next.js error boundary for the chat route.
+ * Catches rendering errors in ChatPageDesktop/ChatPageMobile and shows
+ * a recovery UI instead of a blank white screen.
+ */
+export default function ChatError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  const { t } = useTranslation('common')
+
+  useEffect(() => {
+    console.error('[ChatError] Caught rendering error:', error)
+  }, [error])
+
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-base">
+      <div className="flex flex-col items-center gap-4 text-center">
+        <p className="text-sm text-text-secondary">{t('errors.request_failed')}</p>
+        <Button variant="primary" onClick={reset}>
+          {t('actions.retry')}
+        </Button>
+      </div>
+    </div>
+  )
+}

frontend/src/app/(tasks)/chat/page.tsx

@@ -19,18 +19,29 @@ import { useIsMobile } from '@/features/layout/hooks/useMediaQuery'
 import { useUser } from '@/features/common/UserContext'
 import { useTaskContext } from '@/features/tasks/contexts/taskContext'
 
+// Loading skeleton for dynamic chat page imports
+function ChatPageSkeleton() {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-base">
+      <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-primary" />
+    </div>
+  )
+}
+
 // Dynamic imports for mobile and desktop page components with code splitting
 const ChatPageDesktop = dynamic(
   () => import('./ChatPageDesktop').then(mod => ({ default: mod.ChatPageDesktop })),
   {
     ssr: false,
+    loading: () => <ChatPageSkeleton />,
   }
 )
 
 const ChatPageMobile = dynamic(
   () => import('./ChatPageMobile').then(mod => ({ default: mod.ChatPageMobile })),
   {
     ssr: false,
+    loading: () => <ChatPageSkeleton />,
   }
 )
 

frontend/src/features/tasks/components/chat/ChatArea.tsx

@@ -25,6 +25,7 @@ import { useTranslation } from '@/hooks/useTranslation'
 import { useRouter } from 'next/navigation'
 import { useTaskContext } from '../../contexts/taskContext'
 import { useTaskStateMachine } from '../../hooks/useTaskStateMachine'
+import { useHasMessages } from '../../hooks/useHasMessages'
 import { Button } from '@/components/ui/button'
 import { useScrollManagement } from '../hooks/useScrollManagement'
 import { useFloatingInput } from '../hooks/useFloatingInput'
@@ -97,7 +98,8 @@ function ChatAreaContent({
   const { quote, clearQuote, formatQuoteForMessage } = useQuote()
 
   // Task context
-  const { selectedTaskDetail, setSelectedTask, accessDenied } = useTaskContext()
+  const { selectedTask, selectedTaskDetail, setSelectedTask, accessDenied, clearAccessDenied } =
+    useTaskContext()
 
   // Use useTaskStateMachine hook for reactive state updates (SINGLE SOURCE OF TRUTH per AGENTS.md)
   const { state: taskState } = useTaskStateMachine(selectedTaskDetail?.id)
@@ -499,37 +501,13 @@ function ChatAreaContent({
     teams: [...filteredTeams, ...teams],
   })
 
-  // Determine if there are messages to display (full computation)
-  // Note: Now using taskState.messages from state machine instead of selectedTaskDetail.subtasks
-  const hasMessages = useMemo(() => {
-    const hasSelectedTask = selectedTaskDetail && selectedTaskDetail.id
-    const hasNewTaskStream =
-      !selectedTaskDetail?.id && streamHandlers.pendingTaskId && streamHandlers.isStreaming
-    const hasLocalPending = streamHandlers.localPendingMessage !== null
-    // Use taskState from state machine (single source of truth)
-    const hasUnifiedMessages = taskState?.messages && taskState.messages.size > 0
-
-    // If we have a selected task with messages in state machine, show messages
-    if (hasSelectedTask && hasUnifiedMessages) {
-      return true
-    }
-
-    return Boolean(
-      hasSelectedTask ||
-      streamHandlers.hasPendingUserMessage ||
-      streamHandlers.isStreaming ||
-      hasNewTaskStream ||
-      hasLocalPending ||
-      hasUnifiedMessages
-    )
-  }, [
+  // Determine if there are messages to display
+  const hasMessages = useHasMessages({
+    selectedTask,
     selectedTaskDetail,
-    streamHandlers.hasPendingUserMessage,
-    streamHandlers.isStreaming,
-    streamHandlers.pendingTaskId,
-    streamHandlers.localPendingMessage,
-    taskState?.messages,
-  ])
+    taskState,
+    streamHandlers,
+  })
 
   // Note: Team selection is now handled by useTeamSelection hook in TeamSelector component
   // Model selection is handled by useModelSelection hook in ModelSelector component

frontend/src/features/tasks/components/message/MessageBubble.tsx

@@ -45,6 +45,7 @@ import { GeminiAnnotations } from '../chat/GeminiAnnotations'
 import CollapsibleMessage from './CollapsibleMessage'
 import { processCitePatterns } from '../../utils/processCitePatterns'
 import RegenerateModelPopover from './RegenerateModelPopover'
+import { useCopyCleanup } from '../../hooks/useCopyCleanup'
 import VideoConfigBadge from './VideoConfigBadge'
 import type { ClarificationData, FinalPromptData, ClarificationAnswer } from '@/types/api'
 import type { SourceReference, GeminiAnnotation } from '@/types/socket'
@@ -1327,6 +1328,9 @@ const MessageBubble = memo(
       }
     }
 
+    // Handle copy event to clean up extra newlines from DOM structure
+    const handleCopy = useCopyCleanup()
+
     // When editing, expand to full width for better editing experience
     const containerWidthClass = isEditing
       ? 'w-full'
@@ -1348,6 +1352,7 @@ const MessageBubble = memo(
             <div
               className={`${bubbleBaseClasses} ${bubbleTypeClasses}`}
               onMouseUp={handleTextSelection}
+              onCopy={handleCopy}
               data-message-content="true"
             >
               {/* Show header for AI messages */}

frontend/src/features/tasks/contexts/taskContext.tsx

@@ -94,6 +94,9 @@ export const TaskContextProvider = ({ children }: { children: ReactNode }) => {
   // Track task status for notification
   const taskStatusMapRef = useRef<Map<number, TaskStatus>>(new Map())
 
+  // AbortController for cancelling stale getTaskDetail requests during rapid task switching
+  const abortControllerRef = useRef<AbortController | null>(null)
+
   // WebSocket connection for real-time task updates
   const { registerTaskHandlers, isConnected, leaveTask, joinTask, onReconnect } = useSocket()
 
@@ -688,18 +691,27 @@ export const TaskContextProvider = ({ children }: { children: ReactNode }) => {
       return
     }
 
+    // Abort previous in-flight request to prevent stale responses overwriting current data
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort()
+    }
+    const controller = new AbortController()
+    abortControllerRef.current = controller
+
     try {
       // Clear access denied state before fetching
       setAccessDenied(false)
       // Fetch task metadata only (subtasks are now obtained via WebSocket task:join)
-      const updatedTaskDetail = await taskApis.getTaskDetail(selectedTask.id)
+      const updatedTaskDetail = await taskApis.getTaskDetail(selectedTask.id, controller.signal)
 
-      // Note: Workbench data extraction from subtasks is no longer needed here
-      // Subtasks are now managed by TaskStateMachine via WebSocket join response
-      // Workbench data should be obtained from the state machine or WebSocket events
+      // Verify the selected task hasn't changed while the request was in flight
+      if (controller.signal.aborted) return
 
       setSelectedTaskDetail(updatedTaskDetail)
     } catch (error) {
+      // Ignore abort errors - they are expected when switching tasks rapidly
+      if (error instanceof DOMException && error.name === 'AbortError') return
+
       // Check if it's a 403 Forbidden or 404 Not Found error (access denied or task not found)
       // Both cases should show the access denied UI to prevent information leakage
       if (error instanceof ApiError && (error.status === 403 || error.status === 404)) {
@@ -722,6 +734,8 @@ export const TaskContextProvider = ({ children }: { children: ReactNode }) => {
     // Leave previous task room if switching to a different task
     if (previousTaskId !== null && previousTaskId !== currentTaskId) {
       leaveTask(previousTaskId)
+      // Clear stale detail immediately so downstream hooks don't operate on wrong task data
+      setSelectedTaskDetail(null)
     }
 
     // Update the ref to track current task

frontend/src/features/tasks/hooks/useCopyCleanup.ts

@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2025 Weibo, Inc.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { useCallback } from 'react'
+
+/**
+ * Cleans up selected text by:
+ * - Replacing 2+ consecutive newlines with a single newline
+ * - Trimming leading/trailing whitespace
+ */
+export function cleanCopyText(text: string): string {
+  return text.replace(/\n{2,}/g, '\n').trim()
+}
+
+/**
+ * Hook to handle copy events with text cleanup.
+ * Fixes the issue where block-level elements create extra newlines when copying.
+ */
+export function useCopyCleanup() {
+  const handleCopy = useCallback((e: React.ClipboardEvent) => {
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0) return
+
+    const text = cleanCopyText(selection.toString())
+    e.clipboardData.setData('text/plain', text)
+    e.preventDefault()
+  }, [])
+
+  return handleCopy
+}

frontend/src/features/tasks/hooks/useHasMessages.ts

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: 2025 Weibo, Inc.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react'
+import type { TaskDetail } from '../../../types/api'
+import type { TaskStateData } from '../state'
+
+interface StreamHandlersState {
+  hasPendingUserMessage: boolean
+  isStreaming: boolean
+  pendingTaskId: number | null
+  localPendingMessage: unknown | null
+}
+
+interface UseHasMessagesParams {
+  selectedTask: { id: number } | null
+  selectedTaskDetail: TaskDetail | null
+  taskState: TaskStateData | null
+  streamHandlers: StreamHandlersState
+}
+
+/**
+ * Determines if there are messages to display in the chat area.
+ *
+ * Logic breakdown:
+ * - hasSelectedTask: Has loaded task detail with messages
+ * - isLoadingTask: Task is selected but details are still loading (prevents flash)
+ * - hasNewTaskStream: New task being created with streaming
+ * - hasLocalPending: Local pending message waiting to be sent
+ * - hasUnifiedMessages: Messages exist in state machine
+ */
+export function useHasMessages({
+  selectedTask,
+  selectedTaskDetail,
+  taskState,
+  streamHandlers,
+}: UseHasMessagesParams): boolean {
+  return useMemo(() => {
+    const hasSelectedTask = selectedTaskDetail?.id != null
+    const isLoadingTask = selectedTask != null && selectedTaskDetail == null
+    const hasNewTaskStream =
+      !selectedTaskDetail?.id && streamHandlers.pendingTaskId != null && streamHandlers.isStreaming
+    const hasLocalPending = streamHandlers.localPendingMessage != null
+    const hasUnifiedMessages = taskState?.messages != null && taskState.messages.size > 0
+
+    // Fast path: task with messages loaded
+    if (hasSelectedTask && hasUnifiedMessages) {
+      return true
+    }
+
+    // Check any condition that indicates chat should be shown
+    return (
+      hasSelectedTask ||
+      isLoadingTask ||
+      streamHandlers.hasPendingUserMessage ||
+      streamHandlers.isStreaming ||
+      hasNewTaskStream ||
+      hasLocalPending ||
+      hasUnifiedMessages
+    )
+  }, [
+    selectedTask,
+    selectedTaskDetail,
+    taskState?.messages,
+    streamHandlers.hasPendingUserMessage,
+    streamHandlers.isStreaming,
+    streamHandlers.pendingTaskId,
+    streamHandlers.localPendingMessage,
+  ])
+}

frontend/src/features/tasks/hooks/useTaskStateMachine.ts

@@ -9,7 +9,7 @@
  * Handles subscription to state changes and provides convenient accessors.
  */
 
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useMemo, useSyncExternalStore } from 'react'
 import { taskStateManager, TaskStateData, UnifiedMessage, SyncOptions } from '../state'
 
 export interface UseTaskStateMachineResult {
@@ -36,8 +36,13 @@ export function useTaskStateMachine(
 ): UseTaskStateMachineResult {
   const [state, setState] = useState<TaskStateData | null>(null)
 
-  // Check if manager is initialized
-  const isInitialized = taskStateManager.isInitialized()
+  // Reactively track manager initialization via useSyncExternalStore
+  const isInitialized = useSyncExternalStore(
+    taskStateManager.subscribeInit,
+    taskStateManager.getInitialized,
+    // SSR snapshot: always false on server
+    () => false
+  )
 
   // Subscribe to state changes
   // Subscribe to state changes