feat: add realtime connection status handling and display in conversations page

web/app/(console)/conversations/page.tsx

@@ -267,10 +267,10 @@ export default function ConversationsPage() {
             <>
               <Avatar className="size-8 shrink-0 lg:size-9">
                 <AvatarImage src="" />
-                <AvatarFallback>客</AvatarFallback>
+              <AvatarFallback>客</AvatarFallback>
               </Avatar>
               <div className="min-w-0">
-                <p className="truncate font-medium leading-tight">
+                <p className="min-w-0 truncate font-medium leading-tight">
                   {conversation.subject}
                 </p>
                 <p className="mt-0.5 truncate text-xs text-muted-foreground sm:text-sm">

web/components/realtime-connection-status.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export type RealtimeConnectionStatusValue =
+  | "connecting"
+  | "connected"
+  | "disconnected";
+
+type RealtimeConnectionStatusProps = {
+  status: RealtimeConnectionStatusValue;
+  compact?: boolean;
+};
+
+const statusText: Record<RealtimeConnectionStatusValue, string> = {
+  connecting: "实时通道连接中",
+  connected: "实时通道已连接",
+  disconnected: "实时通道已断开",
+};
+
+const compactStatusText: Record<RealtimeConnectionStatusValue, string> = {
+  connecting: "平台实时：连接中",
+  connected: "平台实时：在线",
+  disconnected: "平台实时：已断开",
+};
+
+export function RealtimeConnectionStatus({
+  status,
+  compact = false,
+}: RealtimeConnectionStatusProps) {
+  const toneClass =
+    status === "connected"
+      ? "border-emerald-200/80 bg-emerald-50 text-emerald-700"
+      : status === "connecting"
+        ? "border-amber-200/80 bg-amber-50 text-amber-700"
+        : "border-slate-200/80 bg-slate-100 text-slate-600";
+
+  return (
+    <div
+      className={cn(
+        compact
+          ? "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[10px] font-medium tracking-[0.01em]"
+          : "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] font-medium tracking-[0.02em]",
+        toneClass,
+      )}
+    >
+      <span
+        className={cn(
+          "inline-block size-2 rounded-full",
+          status === "connected"
+            ? "bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.14)]"
+            : status === "connecting"
+              ? "bg-amber-500 shadow-[0_0_0_4px_rgba(245,158,11,0.16)]"
+              : "bg-slate-400 shadow-[0_0_0_4px_rgba(148,163,184,0.14)]",
+        )}
+      />
+      <span>
+        {compact
+          ? compactStatusText[status]
+          : statusText[status]}
+      </span>
+    </div>
+  );
+}

web/components/site-header.tsx

@@ -3,7 +3,9 @@
 import { useEffect, useRef } from "react"
 import { usePathname } from "next/navigation"
 
+import { RealtimeConnectionStatus } from "@/components/realtime-connection-status"
 import { getPageTitle } from "@/lib/navigation"
+import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
 import { ThemeToggle } from "@/components/theme-toggle"
 import {
   Breadcrumb,
@@ -20,7 +22,10 @@ export function SiteHeader() {
   const pathname = usePathname()
   const { open, setOpen, isMobile } = useSidebar()
   const pageTitle = getPageTitle(pathname)
+  const realtimeStatus = useAgentConversationsStore((state) => state.realtimeStatus)
   const hasRestoredRef = useRef(false)
+  const showConversationRealtime =
+    pathname === "/conversations" || pathname.startsWith("/conversations/")
 
   useEffect(() => {
     if (hasRestoredRef.current || isMobile) {
@@ -57,7 +62,12 @@ export function SiteHeader() {
             <Breadcrumb>
               <BreadcrumbList>
                 <BreadcrumbItem>
-                  <BreadcrumbPage>{pageTitle}</BreadcrumbPage>
+                  <div className="flex items-center gap-2">
+                    <BreadcrumbPage>{pageTitle}</BreadcrumbPage>
+                    {showConversationRealtime ? (
+                      <RealtimeConnectionStatus status={realtimeStatus} compact />
+                    ) : null}
+                  </div>
                 </BreadcrumbItem>
               </BreadcrumbList>
             </Breadcrumb>

web/hooks/use-agent-conversation-realtime.ts

@@ -17,6 +17,7 @@ export function useAgentConversationRealtime() {
   const syncLatestMessages = useAgentConversationsStore(
     (state) => state.syncLatestMessages,
   )
+  const setRealtimeStatus = useAgentConversationsStore((state) => state.setRealtimeStatus)
   const websocketRef = useRef<WebSocket | null>(null)
   const reconnectTimerRef = useRef<number | null>(null)
   const pingTimerRef = useRef<number | null>(null)
@@ -67,8 +68,10 @@ export function useAgentConversationRealtime() {
 
       let socket: WebSocket
       try {
+        setRealtimeStatus("connecting")
         socket = new WebSocket(createAdminWebSocketUrl())
       } catch (error) {
+        setRealtimeStatus("disconnected")
         toast.error(error instanceof Error ? error.message : "连接实时服务失败")
         scheduleReconnect()
         return
@@ -80,6 +83,7 @@ export function useAgentConversationRealtime() {
         console.info("[agent-realtime] websocket connected", {
           url: socket.url,
         })
+        setRealtimeStatus("connected")
         reconnectAttemptRef.current = 0
         if (pingTimerRef.current) {
           window.clearInterval(pingTimerRef.current)
@@ -191,6 +195,7 @@ export function useAgentConversationRealtime() {
           reason: event.reason,
           wasClean: event.wasClean,
         })
+        setRealtimeStatus("disconnected")
         if (pingTimerRef.current) {
           window.clearInterval(pingTimerRef.current)
           pingTimerRef.current = null
@@ -207,6 +212,7 @@ export function useAgentConversationRealtime() {
           url: socket.url,
           readyState: socket.readyState,
         })
+        setRealtimeStatus("disconnected")
         scheduleReconnect()
       }
     }
@@ -222,9 +228,10 @@ export function useAgentConversationRealtime() {
       if (socket) {
         socket.close()
       }
+      setRealtimeStatus("disconnected")
       subscribedConversationIdRef.current = null
     }
-  }, [loadConversations, syncLatestMessages])
+  }, [loadConversations, setRealtimeStatus, syncLatestMessages])
 
   useEffect(() => {
     const socket = websocketRef.current

web/lib/stores/agent-conversations.ts

@@ -14,6 +14,7 @@ import {
   type AgentConversation,
   type AgentMessage,
 } from "@/lib/api/agent"
+import type { RealtimeConnectionStatusValue } from "@/components/realtime-connection-status"
 import { summarizeIMMessage } from "@/lib/im-message"
 import { generateUUID } from "@/lib/utils"
 
@@ -126,8 +127,10 @@ type AgentConversationsStore = {
   uploadingAsset: boolean
   recallingMessageId: number
   readingMessageId: number
+  realtimeStatus: RealtimeConnectionStatusValue
   setSearchKeyword: (keyword: string) => void
   setConversationFilter: (filter: AgentConversationFilterKey) => void
+  setRealtimeStatus: (status: RealtimeConnectionStatusValue) => void
   setConversationTags: (
     conversationId: number,
     tags: AgentConversation["tags"]
@@ -164,6 +167,7 @@ export const useAgentConversationsStore = create<AgentConversationsStore>((set,
   uploadingAsset: false,
   recallingMessageId: 0,
   readingMessageId: 0,
+  realtimeStatus: "connecting",
 
   setSearchKeyword: (keyword) => {
     set({ searchKeyword: keyword })
@@ -173,6 +177,10 @@ export const useAgentConversationsStore = create<AgentConversationsStore>((set,
     set({ conversationFilter: filter })
   },
 
+  setRealtimeStatus: (status) => {
+    set({ realtimeStatus: status })
+  },
+
   setConversationTags: (conversationId, tags) => {
     set((state) => ({
       conversations: state.conversations.map((item) =>