feat: 收口前端状态边界并增强聊天观测

拆分 chat/session 与 system 状态域，并把高级页控制逻辑从页面组件中抽离，降低页面和运行时耦合。把 transport 自动选择、协议展示和聊天时延指标串起来，便于后续灰度验证与性能调优。

Author: shijiashuai

docs/architecture.md

@@ -116,18 +116,22 @@ UI 层尽量“只读 store + 调用高层 action”，避免直接操作底层
 - 默认保留 SSE，WebSocket 作为增强模式接入，不把页面逻辑和具体传输协议绑定。
 - 给 transport 增加连接态、重连策略、超时和 server capability 探测。
 - 支持通过 `VITE_CHAT_TRANSPORT=http|sse|websocket` 切换策略，便于灰度验证。
+- `auto` 模式下新增运行时 probe：优先尝试 WebSocket 握手，失败则回落到 SSE，再退化到 HTTP；当前结果同步到 `systemStore.chatTransportMode`。
 
 ### Phase 3: 拆分状态域
 
 - 将当前 store 按 `session/chat`、`avatar/runtime`、`system/connection` 三个域拆分。
 - 减少 3D 渲染状态和聊天 UI 状态的相互影响，降低页面级组件重渲染。
 - 将可序列化状态和不可序列化运行时对象彻底分开。
+- 当前已完成第一步：`sessionId/chatHistory` 与消息增删改逻辑已迁移到独立 `chatSessionStore`，`digitalHumanStore` 保留跨域协调动作 `initSession`。
+- 当前已完成第二步：`error/isLoading/connectionStatus/isConnected` 已迁移到独立 `systemStore`，连接健康检查、聊天错误反馈、HUD 与输入区状态展示均已接入新域。
 
 ### Phase 4: 体验与性能优化
 
 - Viewer 根据设备能力动态调节粒子数、阴影、DPR 和后处理开关。
 - 为聊天区、设置面板、模型加载过程补充 skeleton/placeholder，减少跳变感。
 - 增加前端性能埋点：首屏加载、模型加载耗时、首 token 时间、完整回复时间。
+- 当前已完成首轮聊天指标采集：最近一次对话的 `firstTokenMs` 与 `responseCompleteMs` 已记录到 `systemStore.chatPerformance`，并在 `TopHUD` 中展示。
 
 ## 7. 本轮已落地优化
 
@@ -137,3 +141,8 @@ UI 层尽量“只读 store + 调用高层 action”，避免直接操作底层
 - 聊天 hook 改为 selector 订阅，减少因 store 全量订阅带来的额外重渲染。
 - 新增统一 `chat transport` 抽象，并让 orchestrator 改为依赖 transport 而不是直接依赖具体协议实现。
 - 修复流式降级到 fallback 时丢失 `connectionStatus/error` 的问题。
+- 抽离独立 `chatSessionStore`，将聊天消息与会话 ID 从 `digitalHumanStore` 中分域，降低聊天 UI 对主运行时 store 的耦合。
+- 抽离独立 `systemStore`，将连接状态、加载态和错误态从 `digitalHumanStore` 中分域，进一步收窄主 store 职责边界。
+- 新增 chat transport capability probe，并在健康检查时刷新自动选择结果，为后续 WebSocket 灰度与能力探测打基础。
+- 抽离 `useAdvancedDigitalHumanController`，将高级页面的业务控制逻辑从布局组件中移出，降低页面组件复杂度并为后续 controller 测试留出边界。
+- 增加聊天性能快照采集与 HUD 可视化，可直接观察最近一次请求的首 token 时间和完整响应时间。

src/__tests__/TopHUD.test.tsx

@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import TopHUD from '../components/TopHUD';
+import { useDigitalHumanStore } from '../store/digitalHumanStore';
+import { useChatSessionStore } from '../store/chatSessionStore';
+import { useSystemStore } from '../store/systemStore';
+
+describe('TopHUD', () => {
+  beforeEach(() => {
+    useDigitalHumanStore.setState({
+      currentBehavior: 'idle',
+    });
+    useChatSessionStore.setState({
+      sessionId: 'session_test',
+      chatHistory: [],
+    });
+    useSystemStore.setState({
+      isConnected: true,
+      connectionStatus: 'connected',
+      isLoading: false,
+      error: null,
+      lastErrorTime: null,
+      chatTransportMode: 'sse',
+      chatPerformance: {
+        status: 'idle',
+        firstTokenMs: null,
+        responseCompleteMs: null,
+        startedAt: null,
+        completedAt: null,
+      },
+    });
+  });
+
+  it('shows the current transport mode from system store', () => {
+    render(<TopHUD onToggleSettings={vi.fn()} onReconnect={vi.fn()} onNewSession={vi.fn()} />);
+
+    expect(screen.getByText('协议:')).toBeInTheDocument();
+    expect(screen.getByText('SSE')).toBeInTheDocument();
+  });
+
+  it('maps websocket mode to a user-facing label', () => {
+    useSystemStore.setState({ chatTransportMode: 'websocket' });
+
+    render(<TopHUD onToggleSettings={vi.fn()} onReconnect={vi.fn()} onNewSession={vi.fn()} />);
+
+    expect(screen.getByText('WebSocket')).toBeInTheDocument();
+  });
+
+  it('shows latest chat timing metrics when available', () => {
+    useSystemStore.setState({
+      chatPerformance: {
+        status: 'completed',
+        firstTokenMs: 120,
+        responseCompleteMs: 560,
+        startedAt: 1000,
+        completedAt: 1560,
+      },
+    });
+
+    render(<TopHUD onToggleSettings={vi.fn()} onReconnect={vi.fn()} onNewSession={vi.fn()} />);
+
+    expect(screen.getByText('120ms')).toBeInTheDocument();
+    expect(screen.getByText('560ms')).toBeInTheDocument();
+  });
+});

src/__tests__/chatTransport.test.ts

@@ -6,13 +6,15 @@ const streamUserInputMock = vi.fn();
 const wsConnectMock = vi.fn();
 const wsSendMock = vi.fn();
 const wsDisconnectMock = vi.fn();
+const probeWebSocketEndpointMock = vi.fn();
 
 vi.mock('../core/dialogue/dialogueService', () => ({
   sendUserInput: (...args: unknown[]) => sendUserInputMock(...args),
   streamUserInput: (...args: unknown[]) => streamUserInputMock(...args),
 }));
 
 vi.mock('../core/dialogue/wsClient', () => ({
+  probeWebSocketEndpoint: (...args: unknown[]) => probeWebSocketEndpointMock(...args),
   MetaHumanWSClient: class {
     connect = (...args: unknown[]) => wsConnectMock(...args);
     send = (...args: unknown[]) => wsSendMock(...args);
@@ -27,6 +29,8 @@ describe('chatTransport', () => {
     wsConnectMock.mockReset();
     wsSendMock.mockReset();
     wsDisconnectMock.mockReset();
+    probeWebSocketEndpointMock.mockReset();
+    probeWebSocketEndpointMock.mockResolvedValue(false);
     vi.resetModules();
   });
 
@@ -120,4 +124,28 @@ describe('chatTransport', () => {
       });
     }
   });
+
+  it('resolves auto mode to websocket after a successful probe', async () => {
+    probeWebSocketEndpointMock.mockResolvedValue(true);
+
+    const { getDefaultChatTransport, resetChatTransportProbeCache, resolveChatTransportMode } =
+      await import('../core/dialogue/chatTransport');
+
+    resetChatTransportProbeCache();
+
+    await expect(resolveChatTransportMode()).resolves.toBe('websocket');
+    expect(getDefaultChatTransport().mode).toBe('websocket');
+  });
+
+  it('keeps auto mode on sse when websocket probe fails', async () => {
+    probeWebSocketEndpointMock.mockResolvedValue(false);
+
+    const { getDefaultChatTransport, resetChatTransportProbeCache, resolveChatTransportMode } =
+      await import('../core/dialogue/chatTransport');
+
+    resetChatTransportProbeCache();
+
+    await expect(resolveChatTransportMode()).resolves.toBe('sse');
+    expect(getDefaultChatTransport().mode).toBe('sse');
+  });
 });

src/__tests__/digitalHuman.test.tsx

@@ -3,6 +3,8 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import DigitalHumanViewer from '../components/DigitalHumanViewer';
 import ControlPanel from '../components/ControlPanel';
 import { useDigitalHumanStore } from '../store/digitalHumanStore';
+import { useChatSessionStore } from '../store/chatSessionStore';
+import { useSystemStore } from '../store/systemStore';
 import { TTSService, ASRService } from '../core/audio/audioService';
 import { handleDialogueResponse } from '../core/dialogue/dialogueOrchestrator';
 import React from 'react';
@@ -246,9 +248,17 @@ describe('DigitalHumanStore', () => {
       currentExpression: 'neutral',
       expressionIntensity: 0.8,
       currentBehavior: 'idle',
+    });
+    useChatSessionStore.setState({
+      sessionId: 'test-session',
       chatHistory: [],
+    });
+    useSystemStore.setState({
       error: null,
       lastErrorTime: null,
+      connectionStatus: 'connected',
+      isConnected: true,
+      isLoading: false,
     });
   });
 
@@ -291,20 +301,20 @@ describe('DigitalHumanStore', () => {
   });
 
   it('does not add empty chat messages', () => {
-    const { addChatMessage } = useDigitalHumanStore.getState();
+    const { addChatMessage } = useChatSessionStore.getState();
     addChatMessage('user', '   ');
-    expect(useDigitalHumanStore.getState().chatHistory).toHaveLength(0);
+    expect(useChatSessionStore.getState().chatHistory).toHaveLength(0);
   });
 
   it('generates unique chat message ids under the same timestamp', () => {
     const nowSpy = vi.spyOn(Date, 'now').mockReturnValue(1000);
 
     try {
-      const { addChatMessage } = useDigitalHumanStore.getState();
+      const { addChatMessage } = useChatSessionStore.getState();
       addChatMessage('user', '第一条消息');
       addChatMessage('assistant', '第二条消息');
 
-      const [firstMessage, secondMessage] = useDigitalHumanStore.getState().chatHistory;
+      const [firstMessage, secondMessage] = useChatSessionStore.getState().chatHistory;
 
       expect(firstMessage.id).not.toBe(secondMessage.id);
       expect(firstMessage.timestamp).toBe(1000);
@@ -477,7 +487,7 @@ describe('ASRService', () => {
         return useDigitalHumanStore.getState().isMuted;
       },
       get sessionId() {
-        return useDigitalHumanStore.getState().sessionId;
+        return useChatSessionStore.getState().sessionId;
       },
       get currentBehavior() {
         return useDigitalHumanStore.getState().currentBehavior;
@@ -518,8 +528,8 @@ describe('ASRService', () => {
 
 describe('Dialogue orchestration', () => {
   beforeEach(() => {
-    useDigitalHumanStore.getState().clearChatHistory();
-    useDigitalHumanStore.getState().clearError();
+    useChatSessionStore.getState().clearChatHistory();
+    useSystemStore.getState().clearError();
     useDigitalHumanStore.getState().setMuted(false);
     useDigitalHumanStore.getState().setBehavior('idle');
     useDigitalHumanStore.getState().setSpeaking(false);
@@ -548,32 +558,34 @@ describe('Dialogue orchestration', () => {
 
 describe('Error throttle and session lifecycle', () => {
   beforeEach(() => {
-    useDigitalHumanStore.setState({
+    useSystemStore.setState({
       error: null,
       lastErrorTime: null,
-      sessionId: 'test-session',
-      chatHistory: [],
       connectionStatus: 'connected',
       isConnected: true,
       isLoading: false,
     });
+    useChatSessionStore.setState({
+      sessionId: 'test-session',
+      chatHistory: [],
+    });
   });
 
   it('throttles identical error messages within 2 seconds', () => {
     const nowSpy = vi.spyOn(Date, 'now');
 
     try {
       nowSpy.mockReturnValue(1000);
-      useDigitalHumanStore.getState().setError('网络错误');
-      expect(useDigitalHumanStore.getState().error).toBe('网络错误');
+      useSystemStore.getState().setError('网络错误');
+      expect(useSystemStore.getState().error).toBe('网络错误');
 
       nowSpy.mockReturnValue(2000);
-      useDigitalHumanStore.getState().setError('网络错误');
-      expect(useDigitalHumanStore.getState().lastErrorTime).toBe(1000);
+      useSystemStore.getState().setError('网络错误');
+      expect(useSystemStore.getState().lastErrorTime).toBe(1000);
 
       nowSpy.mockReturnValue(3500);
-      useDigitalHumanStore.getState().setError('网络错误');
-      expect(useDigitalHumanStore.getState().lastErrorTime).toBe(3500);
+      useSystemStore.getState().setError('网络错误');
+      expect(useSystemStore.getState().lastErrorTime).toBe(3500);
     } finally {
       nowSpy.mockRestore();
     }
@@ -584,35 +596,36 @@ describe('Error throttle and session lifecycle', () => {
 
     try {
       nowSpy.mockReturnValue(1000);
-      useDigitalHumanStore.getState().setError('错误A');
-      expect(useDigitalHumanStore.getState().error).toBe('错误A');
+      useSystemStore.getState().setError('错误A');
+      expect(useSystemStore.getState().error).toBe('错误A');
 
       nowSpy.mockReturnValue(1500);
-      useDigitalHumanStore.getState().setError('错误B');
-      expect(useDigitalHumanStore.getState().error).toBe('错误B');
-      expect(useDigitalHumanStore.getState().lastErrorTime).toBe(1500);
+      useSystemStore.getState().setError('错误B');
+      expect(useSystemStore.getState().error).toBe('错误B');
+      expect(useSystemStore.getState().lastErrorTime).toBe(1500);
     } finally {
       nowSpy.mockRestore();
     }
   });
 
   it('initSession resets error, loading and connection status', () => {
-    useDigitalHumanStore.setState({
+    useSystemStore.setState({
       error: '旧错误',
       lastErrorTime: 999,
       isLoading: true,
       connectionStatus: 'error',
       isConnected: false,
     });
 
-    const oldSessionId = useDigitalHumanStore.getState().sessionId;
+    const oldSessionId = useChatSessionStore.getState().sessionId;
 
     useDigitalHumanStore.getState().initSession();
 
-    const state = useDigitalHumanStore.getState();
+    const state = useSystemStore.getState();
+    const sessionState = useChatSessionStore.getState();
 
-    expect(state.sessionId).not.toBe(oldSessionId);
-    expect(state.chatHistory).toHaveLength(0);
+    expect(sessionState.sessionId).not.toBe(oldSessionId);
+    expect(sessionState.chatHistory).toHaveLength(0);
     expect(state.error).toBeNull();
     expect(state.lastErrorTime).toBeNull();
     expect(state.isLoading).toBe(false);