diff --git a/src/agentkit/server/frontend/src/components/chat/BoardStatusView.vue b/src/agentkit/server/frontend/src/components/chat/BoardStatusView.vue
index c152a97..d4e9078 100644
--- a/src/agentkit/server/frontend/src/components/chat/BoardStatusView.vue
+++ b/src/agentkit/server/frontend/src/components/chat/BoardStatusView.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 
 const chatStore = useChatStore()
 </script>
diff --git a/src/agentkit/server/frontend/src/components/chat/ChatMessage.vue b/src/agentkit/server/frontend/src/components/chat/ChatMessage.vue
index aae750d..e24338d 100644
--- a/src/agentkit/server/frontend/src/components/chat/ChatMessage.vue
+++ b/src/agentkit/server/frontend/src/components/chat/ChatMessage.vue
@@ -18,7 +18,7 @@
 import MessageShell from './messages/MessageShell.vue'
 import { computed } from 'vue'
 import { useMessageRenderer } from './helpers/useMessageRenderer'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 import type { IChatMessage } from '@/api/types'
 
 interface Props {
diff --git a/src/agentkit/server/frontend/src/components/chat/PhaseIndicator.vue b/src/agentkit/server/frontend/src/components/chat/PhaseIndicator.vue
index 9a08107..613b2e0 100644
--- a/src/agentkit/server/frontend/src/components/chat/PhaseIndicator.vue
+++ b/src/agentkit/server/frontend/src/components/chat/PhaseIndicator.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 
 const chatStore = useChatStore()
 
diff --git a/src/agentkit/server/frontend/src/components/layout/AgentLayout.vue b/src/agentkit/server/frontend/src/components/layout/AgentLayout.vue
index 2469740..744802d 100644
--- a/src/agentkit/server/frontend/src/components/layout/AgentLayout.vue
+++ b/src/agentkit/server/frontend/src/components/layout/AgentLayout.vue
@@ -110,7 +110,7 @@ import {
   DesktopOutlined,
   CalendarOutlined,
 } from '@ant-design/icons-vue'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 import TopNav from './TopNav.vue'
 import TitleBar from './TitleBar.vue'
 import SplitPane from './SplitPane.vue'
diff --git a/src/agentkit/server/frontend/src/components/layout/SideNav.vue b/src/agentkit/server/frontend/src/components/layout/SideNav.vue
index c8bd86b..9b4d042 100644
--- a/src/agentkit/server/frontend/src/components/layout/SideNav.vue
+++ b/src/agentkit/server/frontend/src/components/layout/SideNav.vue
@@ -71,7 +71,7 @@ import {
   RiseOutlined,
   SettingOutlined,
 } from '@ant-design/icons-vue'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 
 const router = useRouter()
 const route = useRoute()
diff --git a/src/agentkit/server/frontend/src/components/layout/TopNav.vue b/src/agentkit/server/frontend/src/components/layout/TopNav.vue
index 970ba88..0a83c6b 100644
--- a/src/agentkit/server/frontend/src/components/layout/TopNav.vue
+++ b/src/agentkit/server/frontend/src/components/layout/TopNav.vue
@@ -67,7 +67,7 @@ import {
   TeamOutlined,
   TableOutlined,
 } from '@ant-design/icons-vue'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 import { useThemeStore } from '@/stores/theme'
 import { useAuthStore } from '@/stores/auth'
 
diff --git a/src/agentkit/server/frontend/src/components/layout/tabs/DocumentsTab.vue b/src/agentkit/server/frontend/src/components/layout/tabs/DocumentsTab.vue
index c1e3fd3..ffcfb57 100644
--- a/src/agentkit/server/frontend/src/components/layout/tabs/DocumentsTab.vue
+++ b/src/agentkit/server/frontend/src/components/layout/tabs/DocumentsTab.vue
@@ -44,7 +44,7 @@ import { FolderOpenOutlined } from '@ant-design/icons-vue'
 import { Empty } from 'ant-design-vue'
 import DocumentCard from '@/components/chat/messages/DocumentCard.vue'
 import { useDocumentsStore } from '@/stores/documents'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 
 const documentsStore = useDocumentsStore()
 const chatStore = useChatStore()
diff --git a/src/agentkit/server/frontend/src/stores/chat.ts b/src/agentkit/server/frontend/src/stores/chat.ts
deleted file mode 100644
index 13f446d..0000000
--- a/src/agentkit/server/frontend/src/stores/chat.ts
+++ /dev/null
@@ -1,2025 +0,0 @@
-import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import { apiClient } from "@/api/client";
-import { useTeamStore } from "@/stores/team";
-import { useDocumentsStore } from "@/stores/documents";
-import { useCalendarStore } from "@/stores/calendar";
-import { isDocumentMeta } from "@/api/documents";
-import type {
-  IChatMessage,
-  IConversation,
-  IChatRequest,
-  WsClientMessage,
-  WsServerMessage,
-  IDebateStartedData,
-  IDebateArgumentData,
-  IDebateRoundSummaryData,
-  IDebateResolvedData,
-  ICollaborationContract,
-  ICollaborationContractDefinedData,
-  ICollaborationNotice,
-  IReviewResult,
-  IRiskFlag,
-  ICollaborationGraphData,
-} from "@/api/types";
-
-function generateId(): string {
-  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-}
-
-/**
- * Structured streaming progress entries. Token deltas are aggregated into
- * a single entry that is updated in place so the UI doesn't spam one
- * "步骤 3: turn.token" line per chunk.
- */
-export type StreamingStepType =
-  | "routing"
-  | "thinking"
-  | "tool_call"
-  | "tool_result"
-  | "streaming"
-  | "final_answer"
-  | "team_event"
-  | "board_event"
-  | "milestone";
-
-export interface IStreamingStep {
-  id: string;
-  type: StreamingStepType;
-  label: string;
-  detail?: string;
-  /** Aggregate counter for `streaming` (chars streamed) or `tool_call` (duration ms). */
-  counter?: number;
-  status: "running" | "success" | "error";
-  /** Updated monotonically; used as a render hint for the streaming entry. */
-  ts: number;
-}
-
-export const useChatStore = defineStore("chat", () => {
-  // --- State ---
-  const conversations = ref<IConversation[]>([]);
-  const currentConversationId = ref<string | null>(null);
-  const isWsConnected = ref(false);
-  const ws = ref<WebSocket | null>(null);
-  // Guard against cascading 404 recovery when multiple conversations are stale
-  let _is404Recovering = false;
-  /**
-   * Per-conversation in-flight tracking. The UI's `isCurrentLoading` derives
-   * from the current conversation being in this set, so other tabs remain
-   * fully usable while one is waiting on the agent.
-   */
-  const pendingConversations = ref<Set<string>>(new Set());
-  const pendingLastUsedAt = ref<Map<string, number>>(new Map());
-  const streamingStepsByConv = ref<Map<string, IStreamingStep[]>>(new Map());
-
-  // --- Step helpers (structured, aggregated, per-conversation) ---
-  function getConvSteps(convId: string): IStreamingStep[] {
-    let arr = streamingStepsByConv.value.get(convId);
-    if (!arr) {
-      arr = [];
-      streamingStepsByConv.value.set(convId, arr);
-    }
-    return arr;
-  }
-
-  function appendStep(
-    step: Omit<IStreamingStep, "id" | "ts">,
-    convId: string = currentConversationId.value ?? "",
-  ): void {
-    if (!convId) return;
-    getConvSteps(convId).push({ ...step, id: generateId(), ts: Date.now() });
-  }
-
-  function updateLastStep(
-    predicate: (s: IStreamingStep) => boolean,
-    patch: Partial<IStreamingStep>,
-    convId: string = currentConversationId.value ?? "",
-  ): void {
-    if (!convId) return;
-    const arr = streamingStepsByConv.value.get(convId);
-    if (!arr) return;
-    const idx = [...arr].reverse().findIndex(predicate);
-    if (idx === -1) return;
-    const realIdx = arr.length - 1 - idx;
-    arr[realIdx] = { ...arr[realIdx], ...patch, ts: Date.now() };
-  }
-
-  function clearConvSteps(convId: string): void {
-    // Delete the key entirely rather than setting an empty array —
-    // otherwise the Map grows unboundedly across conversations.
-    streamingStepsByConv.value.delete(convId);
-  }
-
-  // --- Per-conversation pending tracking ---
-  function markConversationPending(convId: string): void {
-    pendingConversations.value = new Set(pendingConversations.value).add(
-      convId,
-    );
-    pendingLastUsedAt.value = new Map(pendingLastUsedAt.value).set(
-      convId,
-      Date.now(),
-    );
-  }
-
-  function markConversationDone(convId: string): void {
-    const next = new Set(pendingConversations.value);
-    next.delete(convId);
-    pendingConversations.value = next;
-    const last = new Map(pendingLastUsedAt.value);
-    last.delete(convId);
-    pendingLastUsedAt.value = last;
-  }
-
-  /**
-   * Resolve which conversation an incoming WS message belongs to.
-   *
-   * The backend protocol currently does NOT tag server→client messages with
-   * `conversation_id`, so we route by recency: pick the most recently used
-   * pending conversation. This is a heuristic — it works as long as users
-   * don't fire two requests in quick succession across conversations. We
-   * bias toward the *current* view if it's still pending, which is what the
-   * user is watching right now.
-   */
-  function resolveIncomingConvId(): string {
-    const cid = currentConversationId.value;
-    if (cid && pendingConversations.value.has(cid)) return cid;
-    // Fall back to the most recently used pending conversation.
-    let best: string | null = null;
-    let bestTs = 0;
-    pendingLastUsedAt.value.forEach((ts, id) => {
-      if (pendingConversations.value.has(id) && ts > bestTs) {
-        best = id;
-        bestTs = ts;
-      }
-    });
-    return best ?? cid ?? "";
-  }
-
-  // Board Meeting state (transient, only active during a board discussion)
-  const boardState = ref<{
-    topic: string;
-    experts: Array<{
-      name: string;
-      avatar: string;
-      color: string;
-      is_moderator: boolean;
-      persona: string;
-    }>;
-    max_rounds: number;
-    current_round: number;
-    status: "discussing" | "concluding" | "completed" | "dissolved";
-  } | null>(null);
-
-  const isBoardMode = computed(
-    () => boardState.value !== null && boardState.value.status === "discussing",
-  );
-
-  // PLAN_EXEC phase state (U4) — tracks current phase + violations for the
-  // PhaseIndicator component. Set when the first phase_* event arrives.
-  // Reset on conversation switch or final_answer.
-  const currentPhase = ref<string | null>(null);
-  const phaseViolations = ref<
-    Array<{
-      phase: string;
-      tool: string;
-      message: string;
-      violation_kind: string;
-      command_preview?: string;
-      ts: number;
-    }>
-  >([]);
-  const isPlanExec = computed(() => currentPhase.value !== null);
-
-  function resetPlanExecState(): void {
-    currentPhase.value = null;
-    phaseViolations.value = [];
-  }
-
-  // Debate state (transient, only active during a debate collaboration)
-  const debateState = ref<{
-    topic: string;
-    participants: string[];
-    current_round: number;
-    max_rounds: number;
-    status: "debating" | "resolved" | "cancelled";
-  } | null>(null);
-
-  // PM Collaboration state (transient, only active during a PM-mode team task)
-  // Tracks contracts, notices, reviews, and risks for the collaboration graph.
-  const collaborationState = ref<ICollaborationGraphData | null>(null);
-
-  // --- Getters ---
-  const currentConversation = computed<IConversation | undefined>(() => {
-    return conversations.value.find(
-      (c) => c.id === currentConversationId.value,
-    );
-  });
-
-  const currentMessages = computed<IChatMessage[]>(() => {
-    return currentConversation.value?.messages ?? [];
-  });
-
-  /**
-   * `true` only when the *currently viewed* conversation is waiting on the
-   * agent. Other in-flight conversations do NOT block the input box.
-   */
-  const isCurrentLoading = computed<boolean>(() => {
-    const cid = currentConversationId.value;
-    return !!cid && pendingConversations.value.has(cid);
-  });
-
-  /**
-   * Streaming progress for the currently viewed conversation only. Switching
-   * tabs does not clear another tab's progress.
-   */
-  const currentStreamingSteps = computed<IStreamingStep[]>(() => {
-    const cid = currentConversationId.value;
-    if (!cid) return [];
-    return streamingStepsByConv.value.get(cid) ?? [];
-  });
-
-  // --- Actions ---
-
-  /** Load all conversations from the server */
-  async function loadConversations(): Promise<void> {
-    try {
-      const data = await apiClient.getConversations();
-      // Normalize server response: backend returns {id, created_at, updated_at, message_count}
-      // but frontend IConversation expects {id, title, messages, created_at, updated_at}
-      conversations.value = data.map((conv: IConversation) => ({
-        id: conv.id,
-        title: conv.title || "对话",
-        messages: Array.isArray(conv.messages) ? conv.messages : [],
-        created_at: conv.created_at,
-        updated_at: conv.updated_at,
-      }));
-    } catch (error) {
-      console.error("Failed to load conversations:", error);
-    }
-  }
-
-  /** Select a conversation by ID and load its messages */
-  async function selectConversation(id: string, force = false): Promise<void> {
-    currentConversationId.value = id;
-    // streamingSteps are scoped per conversation, so switching tabs does NOT
-    // clear another conversation's in-flight progress.
-
-    // P2 #10: 会话隔离 — 切换会话时重置 collaborationState，避免跨会话数据泄漏。
-    // 若新会话已有 collaboration_graph 消息，则从消息中恢复状态。
-    collaborationState.value = null;
-
-    // Load full conversation with messages if not already loaded (or when forced)
-    const conv = conversations.value.find((c) => c.id === id);
-    // 本地临时会话尚未同步到服务端，跳过获取避免 404
-    if (
-      !conv?.is_local &&
-      (force || !conv || !conv.messages || conv.messages.length === 0)
-    ) {
-      try {
-        const fullConv = await apiClient.getConversation(id);
-        if (conv) {
-          conv.messages = fullConv.messages || [];
-          // P0 #1 fix: never let the server's placeholder title ("对话")
-          // overwrite a real title we already have locally. If the server
-          // returns the placeholder, keep whatever the list view had.
-          const serverTitle = fullConv.title || "";
-          const localTitle = conv.title || "";
-          const isServerPlaceholder =
-            serverTitle === "对话" || serverTitle.trim() === "";
-          const isLocalReal =
-            localTitle && localTitle !== "新对话" && localTitle !== "对话";
-          if (serverTitle && !isServerPlaceholder) {
-            conv.title = serverTitle;
-          } else if (!isLocalReal) {
-            // Both sides have no real title — accept server's placeholder
-            conv.title = serverTitle || localTitle || "对话";
-          }
-          conv.created_at = fullConv.created_at || conv.created_at;
-          conv.updated_at = fullConv.updated_at || conv.updated_at;
-        } else {
-          // P1 #7 fix: If the conversation is not in the local list (e.g.
-          // after a page refresh), add it from the fetched data instead
-          // of silently discarding the result.
-          const serverTitle = fullConv.title || "新对话";
-          conversations.value.unshift({
-            id: fullConv.id || id,
-            title: serverTitle === "对话" ? "新对话" : serverTitle,
-            messages: fullConv.messages || [],
-            created_at: fullConv.created_at || new Date().toISOString(),
-            updated_at: fullConv.updated_at || new Date().toISOString(),
-          });
-        }
-      } catch (error) {
-        const isNotFound = (error as { status?: number })?.status === 404;
-        if (isNotFound) {
-          // 该会话在服务端已不存在（本地临时 ID 或已被删除），清理本地状态
-          conversations.value = conversations.value.filter((c) => c.id !== id);
-          streamingStepsByConv.value.delete(id);
-          pendingConversations.value.delete(id);
-          pendingLastUsedAt.value.delete(id);
-          if (currentConversationId.value === id) {
-            currentConversationId.value = null;
-            boardState.value = null;
-            debateState.value = null;
-            // 自动切换到下一个可用会话，没有则新建
-            // Guard against cascading 404s when multiple stale conversations exist
-            if (!_is404Recovering) {
-              _is404Recovering = true;
-              try {
-                if (conversations.value.length > 0) {
-                  await selectConversation(conversations.value[0].id);
-                } else {
-                  createConversation();
-                }
-              } finally {
-                _is404Recovering = false;
-              }
-            }
-          }
-        } else {
-          console.error("Failed to load conversation messages:", error);
-        }
-      }
-    }
-
-    // P2 #10: 恢复 collaborationState — 从会话消息中查找 collaboration_graph
-    const restoredConv = conversations.value.find((c) => c.id === id);
-    if (restoredConv?.messages) {
-      const graphMsg = [...restoredConv.messages]
-        .reverse()
-        .find(
-          (m) =>
-            m.message_type === "collaboration_graph" && m.collaboration_graph,
-        );
-      if (graphMsg?.collaboration_graph) {
-        collaborationState.value = {
-          contracts: [...graphMsg.collaboration_graph.contracts],
-          notices: [...graphMsg.collaboration_graph.notices],
-          reviews: [...graphMsg.collaboration_graph.reviews],
-          risks: [...graphMsg.collaboration_graph.risks],
-        };
-      }
-    }
-  }
-
-  /** Create a new empty conversation */
-  function createConversation(): void {
-    const newConversation: IConversation = {
-      id: generateId(),
-      title: "新对话",
-      messages: [],
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
-      is_local: true,
-    };
-    conversations.value.unshift(newConversation);
-    currentConversationId.value = newConversation.id;
-    // New conversation starts with empty steps.
-    clearConvSteps(newConversation.id);
-  }
-
-  /** Delete a conversation (server + local state) */
-  async function deleteConversation(id: string): Promise<void> {
-    const conv = conversations.value.find((c) => c.id === id);
-    // Skip API call for local-only conversations (never synced to server)
-    if (!conv?.is_local) {
-      try {
-        await apiClient.deleteConversation(id);
-      } catch (error) {
-        console.error("Failed to delete conversation:", error);
-      }
-    }
-    conversations.value = conversations.value.filter((c) => c.id !== id);
-    streamingStepsByConv.value.delete(id);
-    // ponytail: must also clear pending-* state — selectConversation's 404
-    // handler (line ~297) does this, but deleteConversation previously
-    // omitted it, leaving ghost IDs that _getMostRecentPendingConversation
-    // could return (causing "switch to deleted conversation" UI bugs).
-    pendingConversations.value.delete(id);
-    pendingLastUsedAt.value.delete(id);
-    markConversationDone(id);
-    if (currentConversationId.value === id) {
-      currentConversationId.value = null;
-      boardState.value = null;
-      debateState.value = null;
-      // Auto-switch to next available or create new (consistent with 404 handler)
-      if (conversations.value.length > 0) {
-        await selectConversation(conversations.value[0].id);
-      } else {
-        createConversation();
-      }
-    }
-  }
-
-  /** Send a message using REST API (fallback) */
-  async function sendMessage(
-    message: string,
-    sources?: string[],
-  ): Promise<void> {
-    if (!currentConversationId.value) {
-      createConversation();
-    }
-
-    const conversationId = currentConversationId.value as string;
-
-    // Add user message
-    const userMessage: IChatMessage = {
-      id: generateId(),
-      role: "user",
-      content: message,
-      timestamp: new Date().toISOString(),
-    };
-    appendMessage(conversationId, userMessage);
-
-    // Add placeholder assistant message
-    const assistantMessage: IChatMessage = {
-      id: generateId(),
-      role: "assistant",
-      content: "",
-      timestamp: new Date().toISOString(),
-      status: "pending",
-    };
-    appendMessage(conversationId, assistantMessage);
-
-    markConversationPending(conversationId);
-
-    try {
-      const request: IChatRequest = {
-        message,
-        conversation_id: conversationId,
-        sources,
-      };
-      const response = await apiClient.chat(request);
-
-      // Update assistant message with response
-      updateMessage(conversationId, assistantMessage.id, {
-        content: response.message,
-        matched_skill: response.matched_skill,
-        routing_method: response.routing_method,
-        confidence: response.confidence,
-        task_id: response.task_id,
-        status: response.status,
-      });
-
-      // Update conversation title from first message
-      const conv = conversations.value.find((c) => c.id === conversationId);
-      if (conv) {
-        conv.is_local = false;
-        if (conv.messages.length <= 2) {
-          conv.title =
-            message.length > 20 ? `${message.substring(0, 20)}...` : message;
-        }
-      }
-    } catch (error) {
-      updateMessage(conversationId, assistantMessage.id, {
-        content: `请求失败: ${error instanceof Error ? error.message : "未知错误"}`,
-        status: "completed",
-      });
-    } finally {
-      markConversationDone(conversationId);
-    }
-  }
-
-  /** Send a message via WebSocket for streaming */
-  async function sendWsMessage(
-    message: string,
-    sources?: string[],
-    model?: string,
-  ): Promise<void> {
-    if (!currentConversationId.value) {
-      createConversation();
-    }
-
-    // Check WebSocket state BEFORE creating messages to avoid duplicates
-    if (!ws.value || ws.value.readyState !== WebSocket.OPEN) {
-      // Fallback to REST directly — sendMessage will create its own messages
-      await sendMessage(message, sources);
-      return;
-    }
-
-    const conversationId = currentConversationId.value as string;
-
-    // Add user message
-    const userMessage: IChatMessage = {
-      id: generateId(),
-      role: "user",
-      content: message,
-      timestamp: new Date().toISOString(),
-    };
-    appendMessage(conversationId, userMessage);
-
-    // Add placeholder assistant message
-    const assistantMessage: IChatMessage = {
-      id: generateId(),
-      role: "assistant",
-      content: "",
-      timestamp: new Date().toISOString(),
-      status: "pending",
-    };
-    appendMessage(conversationId, assistantMessage);
-
-    markConversationPending(conversationId);
-    clearConvSteps(conversationId);
-
-    const wsMessage: WsClientMessage = {
-      type: "chat",
-      message,
-      sources,
-      conversation_id: conversationId,
-      model,
-    };
-
-    // Problem 7: catch send() exceptions (e.g. connection closed mid-send)
-    try {
-      ws.value.send(JSON.stringify(wsMessage));
-    } catch (error) {
-      console.error("WebSocket send failed, falling back to REST:", error);
-      // Remove the placeholder messages we just added; sendMessage will re-add them
-      const conv = conversations.value.find((c) => c.id === conversationId);
-      if (conv) {
-        conv.messages = conv.messages.filter(
-          (m) => m.id !== userMessage.id && m.id !== assistantMessage.id,
-        );
-      }
-      markConversationDone(conversationId);
-      await sendMessage(message, sources);
-      return;
-    }
-
-    // Update conversation title from first user message
-    const conv = conversations.value.find((c) => c.id === conversationId);
-    if (conv && conv.title === "新对话") {
-      conv.title =
-        message.length > 20 ? `${message.substring(0, 20)}...` : message;
-    }
-  }
-
-  /** Connect to WebSocket for real-time streaming */
-  let _heartbeatTimer: ReturnType<typeof setInterval> | null = null;
-  let _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-  let _intentionalDisconnect = false;
-
-  function connectWebSocket(): void {
-    // Problem 6: also skip if already CONNECTING to avoid orphan sockets
-    if (
-      ws.value &&
-      (ws.value.readyState === WebSocket.OPEN ||
-        ws.value.readyState === WebSocket.CONNECTING)
-    ) {
-      return;
-    }
-
-    _intentionalDisconnect = false;
-    const socket = apiClient.createWebSocket();
-
-    socket.onopen = () => {
-      isWsConnected.value = true;
-      console.log("WebSocket connected");
-      // Start heartbeat: send ping every 30s to keep connection alive
-      if (_heartbeatTimer) clearInterval(_heartbeatTimer);
-      _heartbeatTimer = setInterval(() => {
-        if (ws.value && ws.value.readyState === WebSocket.OPEN) {
-          ws.value.send(JSON.stringify({ type: "ping" }));
-        }
-      }, 30000);
-      // Check for running tasks to resume after reconnection
-      _recoverTaskAfterReconnect();
-    };
-
-    socket.onmessage = (event: MessageEvent) => {
-      try {
-        const data = JSON.parse(event.data as string) as WsServerMessage;
-        console.log("[Chat WS] Received:", data.type, data);
-        handleWsMessage(data);
-      } catch (error) {
-        console.error("Failed to parse WebSocket message:", error);
-      }
-    };
-
-    socket.onclose = () => {
-      isWsConnected.value = false;
-      // P2 #21 fix: clear per-conversation pending state to prevent stuck
-      // loading state during disconnect. _recoverTaskAfterReconnect will
-      // re-mark conversations pending if an active task is found.
-      pendingConversations.value = new Set();
-      pendingLastUsedAt.value = new Map();
-      // Clear stale streaming steps — _recoverTaskAfterReconnect will
-      // rebuild them from replayed events if an active task is found.
-      streamingStepsByConv.value = new Map();
-      console.log("WebSocket disconnected");
-      if (_heartbeatTimer) {
-        clearInterval(_heartbeatTimer);
-        _heartbeatTimer = null;
-      }
-      // Problem 1: do not auto-reconnect after an intentional disconnect
-      if (_intentionalDisconnect) {
-        return;
-      }
-      // Auto reconnect after 3 seconds
-      if (_reconnectTimer) clearTimeout(_reconnectTimer);
-      _reconnectTimer = setTimeout(() => {
-        if (!ws.value || ws.value.readyState === WebSocket.CLOSED) {
-          connectWebSocket();
-        }
-      }, 3000);
-    };
-
-    socket.onerror = (error) => {
-      console.error("WebSocket error:", error);
-      isWsConnected.value = false;
-    };
-
-    ws.value = socket;
-  }
-
-  /** Disconnect WebSocket */
-  function disconnectWebSocket(): void {
-    _intentionalDisconnect = true;
-    if (_reconnectTimer) {
-      clearTimeout(_reconnectTimer);
-      _reconnectTimer = null;
-    }
-    if (_heartbeatTimer) {
-      clearInterval(_heartbeatTimer);
-      _heartbeatTimer = null;
-    }
-    if (ws.value) {
-      ws.value.close();
-      ws.value = null;
-      isWsConnected.value = false;
-    }
-  }
-
-  /** Stop the in-flight generation by sending a `cancel` WS message.
-   *
-   * The backend (`/api/v1/portal/ws`) handles `{"type":"cancel"}` by
-   * cancelling the active asyncio task and replying with a `result`
-   * event whose `data.status === "cancelled"`. That `result` event
-   * clears `isLoading` via the normal handler — so this function only
-   * needs to send the cancel message and guard against send failures.
-   */
-  function stopGeneration(): void {
-    const cid = currentConversationId.value;
-    if (!ws.value || ws.value.readyState !== WebSocket.OPEN) {
-      // No open socket — just clear the current conversation's pending state.
-      if (cid) {
-        markConversationDone(cid);
-        clearConvSteps(cid);
-      }
-      return;
-    }
-    try {
-      const cancelMsg: WsClientMessage = { type: "cancel" };
-      ws.value.send(JSON.stringify(cancelMsg));
-    } catch (error) {
-      console.error("Failed to send cancel message:", error);
-      if (cid) {
-        markConversationDone(cid);
-        clearConvSteps(cid);
-      }
-    }
-  }
-
-  /** After WebSocket reconnects, check for running tasks and resume them */
-  async function _recoverTaskAfterReconnect(): Promise<void> {
-    if (!currentConversationId.value) return;
-
-    try {
-      // Problem 2: query both 'running' and 'pending' tasks — a task may be
-      // in PENDING state if the background worker hasn't picked it up yet.
-      const [runningTasks, pendingTasks] = await Promise.all([
-        apiClient.listTasks("running"),
-        apiClient.listTasks("pending"),
-      ]);
-      const candidates = [...runningTasks, ...pendingTasks];
-      const activeTask = candidates.find(
-        (t) => t.metadata?.conversation_id === currentConversationId.value,
-      );
-
-      if (activeTask && ws.value && ws.value.readyState === WebSocket.OPEN) {
-        // P1 #12 fix: Clear the last pending assistant message's accumulated
-        // content before resuming. The EventQueue will replay buffered events
-        // from the beginning of the task, so any partial content already
-        // accumulated before disconnect would be duplicated if not cleared.
-        const conv = conversations.value.find(
-          (c) => c.id === currentConversationId.value,
-        );
-        if (conv) {
-          const lastPendingAssistant = [...conv.messages]
-            .reverse()
-            .find((m) => m.role === "assistant" && m.status === "pending");
-          if (lastPendingAssistant) {
-            updateMessage(
-              currentConversationId.value,
-              lastPendingAssistant.id,
-              {
-                content: "",
-                thinking: "",
-                tool_calls: [],
-              },
-            );
-          }
-        }
-        // Problem 5: only mark conversation pending if we can actually send
-        // the resume
-        const cid = currentConversationId.value;
-        if (cid) markConversationPending(cid);
-        try {
-          ws.value.send(
-            JSON.stringify({
-              type: "resume",
-              task_id: activeTask.task_id,
-              conversation_id: currentConversationId.value,
-            }),
-          );
-        } catch (error) {
-          console.error("Failed to send resume message:", error);
-          if (cid) markConversationDone(cid);
-        }
-      } else {
-        // No active task — force reload conversation messages (may include
-        // completed results persisted while disconnected).
-        await selectConversation(currentConversationId.value, true);
-      }
-    } catch (error) {
-      console.error("Failed to recover task after reconnect:", error);
-    }
-  }
-
-  // --- Internal helpers ---
-
-  /** Get team store lazily — safe to call inside actions after Pinia is installed */
-  let _teamStore: ReturnType<typeof useTeamStore> | null = null;
-  function _getTeamStore() {
-    if (!_teamStore) {
-      _teamStore = useTeamStore();
-    }
-    return _teamStore;
-  }
-
-  /** Get calendar store lazily — safe to call inside actions after Pinia is installed */
-  let _calendarStore: ReturnType<typeof useCalendarStore> | null = null;
-  function _getCalendarStore() {
-    if (!_calendarStore) {
-      _calendarStore = useCalendarStore();
-    }
-    return _calendarStore;
-  }
-
-  /** Ensure a collaboration_graph message exists in the conversation and update
-   *  it with the latest graph data. Creates the message if absent. */
-  function upsertCollaborationGraph(
-    conversationId: string,
-    graphData: ICollaborationGraphData,
-  ): void {
-    const conv = conversations.value.find((c) => c.id === conversationId);
-    if (!conv) return;
-    const existing = [...conv.messages]
-      .reverse()
-      .find((m) => m.message_type === "collaboration_graph");
-    if (existing) {
-      updateMessage(conversationId, existing.id, {
-        collaboration_graph: {
-          contracts: [...graphData.contracts],
-          notices: [...graphData.notices],
-          reviews: [...graphData.reviews],
-          risks: [...graphData.risks],
-        },
-      });
-    } else {
-      const graphMsg: IChatMessage = {
-        id: generateId(),
-        role: "assistant",
-        content: "",
-        timestamp: new Date().toISOString(),
-        status: "completed",
-        message_type: "collaboration_graph",
-        collaboration_graph: {
-          contracts: [...graphData.contracts],
-          notices: [...graphData.notices],
-          reviews: [...graphData.reviews],
-          risks: [...graphData.risks],
-        },
-      };
-      appendMessage(conversationId, graphMsg);
-    }
-  }
-
-  /** Ensure collaborationState is initialized; return the live data object. */
-  function _ensureCollaborationState(): ICollaborationGraphData {
-    if (!collaborationState.value) {
-      collaborationState.value = {
-        contracts: [],
-        notices: [],
-        reviews: [],
-        risks: [],
-      };
-    }
-    return collaborationState.value;
-  }
-
-  function handleWsMessage(data: WsServerMessage): void {
-    // Discriminated union narrowing: each `case` branch narrows `data` to a
-    // specific variant of WsServerMessage, so typed fields can be accessed
-    // directly from `data` (or `data.data` for variants with a nested payload).
-    switch (data.type) {
-      case "connected": {
-        // Backend confirms conversation — update local ID if backend assigned a different one
-        const serverConvId = data.conversation_id;
-        const localId = currentConversationId.value;
-        const conv = conversations.value.find((c) => c.id === localId);
-        if (conv) {
-          conv.is_local = false;
-          if (serverConvId && serverConvId !== localId) {
-            conv.id = serverConvId;
-            currentConversationId.value = serverConvId;
-          }
-        }
-        break;
-      }
-
-      case "routing": {
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        const lastAssistantMsg = [...conv.messages]
-          .reverse()
-          .find((m) => m.role === "assistant");
-        if (lastAssistantMsg) {
-          updateMessage(conversationId, lastAssistantMsg.id, {
-            matched_skill: data.skill,
-            confidence: data.confidence,
-            routing_method: data.method,
-          });
-        }
-        appendStep(
-          {
-            type: "routing",
-            label: "智能路由",
-            detail: `${data.skill} · 置信度 ${(data.confidence * 100).toFixed(1)}%`,
-            status: "success",
-          },
-          conversationId,
-        );
-        break;
-      }
-
-      case "step": {
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        const lastAssistantMsg = [...conv.messages]
-          .reverse()
-          .find((m) => m.role === "assistant");
-        const stepInfo = data.data;
-        const innerData = stepInfo.data as Record<string, unknown>;
-        const eventType = stepInfo.event_type as string | undefined;
-        // Aggregate token deltas into a single "streaming" step. We only push
-        // a new step on transitions between non-token types, otherwise the
-        // list explodes with one entry per token.
-        if (eventType === "token" || eventType === "turn.token") {
-          const chunk = (innerData.delta ??
-            innerData.output ??
-            innerData.content ??
-            "") as string;
-          const deltaLen = chunk?.length ?? 0;
-          const convSteps =
-            streamingStepsByConv.value.get(conversationId) ?? [];
-          const hasStreaming = convSteps.some(
-            (s) => s.type === "streaming" && s.status === "running",
-          );
-          if (!hasStreaming) {
-            appendStep(
-              {
-                type: "streaming",
-                label: "正在生成回答",
-                status: "running",
-                counter: 0,
-              },
-              conversationId,
-            );
-          }
-          // Accumulate chars into the running streaming step (counter is
-          // cumulative, not per-chunk).  We inline the lookup instead of
-          // using ``updateLastStep`` because the patch needs the previous
-          // value — and a backward for-loop avoids the [...arr].reverse()
-          // allocation on every token (hot path).
-          const arr = streamingStepsByConv.value.get(conversationId);
-          if (arr) {
-            for (let i = arr.length - 1; i >= 0; i--) {
-              const s = arr[i];
-              if (s.type === "streaming" && s.status === "running") {
-                arr[i] = {
-                  ...s,
-                  counter: (s.counter ?? 0) + (deltaLen > 0 ? deltaLen : 1),
-                  ts: Date.now(),
-                };
-                break;
-              }
-            }
-          }
-        } else if (eventType === "final_answer") {
-          // Mark the streaming step as completed (if any) then add final.
-          updateLastStep(
-            (s) => s.type === "streaming" && s.status === "running",
-            { status: "success" },
-            conversationId,
-          );
-          appendStep(
-            {
-              type: "final_answer",
-              label: "生成最终回答",
-              status: "running",
-            },
-            conversationId,
-          );
-        } else if (eventType === "tool_call") {
-          const toolName = (innerData.tool_name ||
-            innerData.name ||
-            "#") as string;
-          // Mark the streaming step done if present.
-          updateLastStep(
-            (s) => s.type === "streaming" && s.status === "running",
-            { status: "success" },
-            conversationId,
-          );
-          appendStep(
-            {
-              type: "tool_call",
-              label: "调用工具",
-              detail: toolName,
-              status: "running",
-            },
-            conversationId,
-          );
-        } else if (eventType === "tool_result") {
-          const toolName = (innerData.tool_name || innerData.name) as
-            | string
-            | undefined;
-          const ok = !innerData.error;
-          updateLastStep(
-            (s) => s.type === "tool_call" && s.status === "running",
-            { status: ok ? "success" : "error", detail: toolName },
-            conversationId,
-          );
-          // Detect document creation results and update documents store (U8)
-          if (ok && toolName === "document" && innerData.document) {
-            try {
-              if (isDocumentMeta(innerData.document)) {
-                const documentsStore = useDocumentsStore();
-                documentsStore.addDocument(conversationId, innerData.document);
-              } else {
-                console.warn(
-                  "Malformed document payload from tool_result:",
-                  innerData.document,
-                );
-              }
-            } catch (e) {
-              // Store not yet initialized or malformed payload — non-fatal
-              console.warn("Failed to add document to store:", e);
-            }
-          }
-        } else if (eventType === "thinking") {
-          appendStep(
-            {
-              type: "thinking",
-              label: "深度思考",
-              status: "success",
-            },
-            conversationId,
-          );
-        } else if (
-          eventType === "turn.started" ||
-          eventType === "turn.created"
-        ) {
-          // Phase marker — silence; user already sees the spinner.
-        } else if (
-          eventType === "turn.thinking" ||
-          eventType === "turn.result"
-        ) {
-          // Already handled by thinking/final_answer; ignore.
-        } else {
-          appendStep(
-            {
-              type: "milestone",
-              label: `${eventType || "progress"}`,
-              detail: stepInfo.step ? `step ${stepInfo.step}` : undefined,
-              status: "running",
-            },
-            conversationId,
-          );
-        }
-
-        // Track tool calls for ToolCallCard rendering
-        if (lastAssistantMsg) {
-          const toolCalls = lastAssistantMsg.tool_calls || [];
-
-          if (stepInfo.event_type === "tool_call") {
-            const tcId = `tc-${stepInfo.step || toolCalls.length}`;
-            const toolName = (innerData.tool_name ||
-              innerData.name ||
-              "unknown") as string;
-            const params = innerData.arguments
-              ? typeof innerData.arguments === "string"
-                ? innerData.arguments
-                : JSON.stringify(innerData.arguments, null, 2)
-              : undefined;
-            toolCalls.push({
-              id: tcId,
-              name: toolName,
-              status: "running",
-              params: params
-                ? params.length > 500
-                  ? params.substring(0, 500) + "..."
-                  : params
-                : undefined,
-            });
-            updateMessage(conversationId, lastAssistantMsg.id, {
-              tool_calls: [...toolCalls],
-            });
-          } else if (stepInfo.event_type === "tool_result") {
-            // Find the last running tool call and update it
-            const lastRunning = [...toolCalls]
-              .reverse()
-              .find((tc) => tc.status === "running");
-            if (lastRunning) {
-              const resultStr = innerData.output
-                ? typeof innerData.output === "string"
-                  ? innerData.output
-                  : JSON.stringify(innerData.output, null, 2)
-                : "";
-              lastRunning.status = innerData.error ? "error" : "completed";
-              lastRunning.result =
-                resultStr.length > 2000
-                  ? resultStr.substring(0, 2000) + "..."
-                  : resultStr;
-              lastRunning.error = innerData.error as string | undefined;
-              lastRunning.duration = innerData.duration as number | undefined;
-              updateMessage(conversationId, lastAssistantMsg.id, {
-                tool_calls: [...toolCalls],
-              });
-            }
-          } else if (stepInfo.event_type === "thinking") {
-            // Accumulate thinking content for ThinkingBlock rendering
-            const thinkingChunk = (innerData.content ||
-              innerData.thought ||
-              "") as string;
-            if (thinkingChunk && lastAssistantMsg) {
-              updateMessage(conversationId, lastAssistantMsg.id, {
-                thinking: (lastAssistantMsg.thinking || "") + thinkingChunk,
-              });
-            }
-          }
-        }
-
-        // Accumulate final_answer content for streaming display
-        if (stepInfo.event_type === "final_answer" && lastAssistantMsg) {
-          const chunk = (innerData.output || "") as string;
-          if (chunk) {
-            updateMessage(conversationId, lastAssistantMsg.id, {
-              content: (lastAssistantMsg.content || "") + chunk,
-            });
-          }
-        }
-        break;
-      }
-
-      case "result": {
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        const lastAssistantMsg = [...conv.messages]
-          .reverse()
-          .find((m) => m.role === "assistant");
-        // Backend sends: {type: "result", data: {message: "..."}} or {data: {status, content}}
-        const content = data.data.message || data.data.content || "";
-        if (lastAssistantMsg) {
-          // Only overwrite if we didn't already stream the content
-          const finalContent = content || lastAssistantMsg.content || "";
-          updateMessage(conversationId, lastAssistantMsg.id, {
-            content: finalContent,
-            status: "completed",
-          });
-        }
-        // Update conversation title from first user message
-        const firstUserMsg = conv.messages.find((m) => m.role === "user");
-        if (firstUserMsg && conv.title === "新对话") {
-          conv.title =
-            firstUserMsg.content.length > 20
-              ? `${firstUserMsg.content.substring(0, 20)}...`
-              : firstUserMsg.content;
-        }
-        markConversationDone(conversationId);
-        // Clear steps for this conversation so they don't accumulate
-        // across multiple interactions.  The UI has already transitioned
-        // to showing the final assistant message.
-        clearConvSteps(conversationId);
-        // Reset PLAN_EXEC phase state — the conversation is done.
-        resetPlanExecState();
-        break;
-      }
-
-      case "error": {
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        const lastAssistantMsg = [...conv.messages]
-          .reverse()
-          .find((m) => m.role === "assistant");
-        if (lastAssistantMsg) {
-          updateMessage(conversationId, lastAssistantMsg.id, {
-            message_type: "error",
-            status: "error",
-            error_detail: data.data.message || "未知错误",
-            content: lastAssistantMsg.content || "",
-          });
-        } else {
-          const errorMsg: IChatMessage = {
-            id: generateId(),
-            role: "assistant",
-            content: "",
-            timestamp: new Date().toISOString(),
-            status: "error",
-            message_type: "error",
-            error_detail: data.data.message || "未知错误",
-          };
-          appendMessage(conversationId, errorMsg);
-        }
-        markConversationDone(conversationId);
-        clearConvSteps(conversationId);
-        break;
-      }
-
-      case "team_formed": {
-        // Reset collaboration state for a fresh team
-        collaborationState.value = null;
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const teamStore = _getTeamStore();
-        if (teamStore) {
-          teamStore.setTeamState(data.data);
-        }
-        appendStep(
-          {
-            type: "team_event",
-            label: "组建专家团",
-            detail: data.data.experts.map((e) => e.name).join("、"),
-            status: "success",
-          },
-          conversationId,
-        );
-        break;
-      }
-
-      case "expert_step": {
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        // Dedup: append to existing expert message if one exists for this expert
-        const existingExpertMsg = [...conv.messages]
-          .reverse()
-          .find(
-            (m) =>
-              m.expert_id === data.data.expert_id && m.status === "pending",
-          );
-        if (existingExpertMsg) {
-          updateMessage(conversationId, existingExpertMsg.id, {
-            content:
-              (existingExpertMsg.content || "") + (data.data.content || ""),
-          });
-        } else {
-          const expertMsg: IChatMessage = {
-            id: generateId(),
-            role: "assistant",
-            content: data.data.content || "",
-            timestamp: new Date().toISOString(),
-            status: "pending",
-            expert_id: data.data.expert_id,
-            expert_name: data.data.expert_name,
-            expert_color: data.data.expert_color,
-            message_type: "chat",
-          };
-          appendMessage(conversationId, expertMsg);
-        }
-        appendStep(
-          {
-            type: "team_event",
-            label: data.data.expert_name || "专家",
-            detail: data.data.step ? `步骤 ${data.data.step}` : undefined,
-            status: "running",
-          },
-          conversationId,
-        );
-        break;
-      }
-
-      case "expert_result": {
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        const expertMsg: IChatMessage = {
-          id: generateId(),
-          role: "assistant",
-          content: data.data.content || "",
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          expert_id: data.data.expert_id,
-          expert_name: data.data.expert_name,
-          expert_color: data.data.expert_color,
-          message_type: "chat",
-        };
-        appendMessage(conversationId, expertMsg);
-        break;
-      }
-
-      case "plan_update": {
-        const teamStore = _getTeamStore();
-        if (teamStore) {
-          teamStore.updatePhases(data.data.plan_phases);
-        }
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        const existingPlanMsg = [...conv.messages]
-          .reverse()
-          .find((m) => m.message_type === "plan_update");
-        if (existingPlanMsg) {
-          updateMessage(conversationId, existingPlanMsg.id, {
-            plan_phases: data.data.plan_phases,
-          });
-        } else {
-          const planMsg: IChatMessage = {
-            id: generateId(),
-            role: "assistant",
-            content: "",
-            timestamp: new Date().toISOString(),
-            status: "completed",
-            message_type: "plan_update",
-            plan_phases: data.data.plan_phases,
-          };
-          appendMessage(conversationId, planMsg);
-        }
-
-        // U5: Extract collaboration contracts from plan_phases and populate
-        // collaborationState + collaboration_graph message. The backend
-        // includes contracts inside plan_update (not as a separate event).
-        const extractedContracts: Array<
-          ICollaborationContract & { phase_id: string; phase_name: string }
-        > = [];
-        for (const phase of data.data.plan_phases) {
-          if (
-            phase.collaboration_contracts &&
-            phase.collaboration_contracts.length > 0
-          ) {
-            for (const c of phase.collaboration_contracts) {
-              extractedContracts.push({
-                from_expert: c.from_expert,
-                to_expert: c.to_expert,
-                content_description: c.content_description,
-                status: c.status,
-                phase_id: phase.id,
-                phase_name: phase.name,
-              });
-            }
-          }
-        }
-        if (extractedContracts.length > 0) {
-          const collab = _ensureCollaborationState();
-          collab.contracts = extractedContracts;
-          upsertCollaborationGraph(conversationId, collab);
-          appendStep(
-            {
-              type: "team_event",
-              label: "协作契约定义",
-              detail: `${extractedContracts.length} 项契约`,
-              status: "success",
-            },
-            conversationId,
-          );
-        }
-        break;
-      }
-
-      case "team_synthesis": {
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const conv = conversations.value.find((c) => c.id === conversationId);
-        if (!conv) break;
-        const synthesisMsg: IChatMessage = {
-          id: generateId(),
-          role: "assistant",
-          content: data.data.content || "",
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          message_type: "milestone",
-        };
-        appendMessage(conversationId, synthesisMsg);
-        break;
-      }
-
-      case "team_dissolved": {
-        const teamStore = _getTeamStore();
-        if (teamStore) {
-          teamStore.clearTeam();
-        }
-        // Clear collaboration state — team is done
-        collaborationState.value = null;
-        const cid = resolveIncomingConvId();
-        if (cid) {
-          appendStep(
-            {
-              type: "team_event",
-              label: "专家团队已解散",
-              status: "success",
-            },
-            cid,
-          );
-        }
-        break;
-      }
-
-      case "phase_started": {
-        const teamStore = _getTeamStore();
-        if (teamStore?.teamState) {
-          teamStore.updatePhaseStatus(data.data.phase_id, "in_progress");
-          const cid = resolveIncomingConvId();
-          if (cid) {
-            appendStep(
-              {
-                type: "team_event",
-                label: "阶段开始",
-                detail: `${data.data.phase_name} · ${data.data.assigned_expert}`,
-                status: "running",
-              },
-              cid,
-            );
-          }
-        }
-        break;
-      }
-
-      case "phase_completed": {
-        const teamStore = _getTeamStore();
-        if (teamStore?.teamState) {
-          teamStore.updatePhaseStatus(
-            data.data.phase_id,
-            "completed",
-            data.data.result_summary,
-          );
-          const cid = resolveIncomingConvId();
-          if (cid) {
-            appendStep(
-              {
-                type: "team_event",
-                label: "阶段完成",
-                detail: data.data.phase_name,
-                status: "success",
-              },
-              cid,
-            );
-          }
-        }
-        break;
-      }
-
-      case "phase_failed": {
-        const teamStore = _getTeamStore();
-        if (teamStore?.teamState) {
-          teamStore.updatePhaseStatus(
-            data.data.phase_id,
-            "failed",
-            data.data.error,
-          );
-          const cid = resolveIncomingConvId();
-          if (cid) {
-            appendStep(
-              {
-                type: "team_event",
-                label: "阶段失败",
-                detail: `${data.data.phase_name} · ${data.data.error || ""}`,
-                status: "error",
-              },
-              cid,
-            );
-          }
-        }
-        break;
-      }
-
-      // ── PLAN_EXEC (U4) — phase lifecycle events from ReActEngine ────────
-
-      case "phase_changed": {
-        currentPhase.value = data.data.phase;
-        const cid = resolveIncomingConvId();
-        if (cid) {
-          appendStep(
-            {
-              type: "milestone",
-              label: "阶段切换",
-              detail: `${data.data.previous || "—"} → ${data.data.phase}`,
-              status: "success",
-            },
-            cid,
-          );
-        }
-        break;
-      }
-
-      case "phase_violation": {
-        // Track current phase from violation data.
-        currentPhase.value = data.data.current_phase;
-        const violation = {
-          phase: data.data.current_phase,
-          tool: data.data.tool,
-          message: data.data.message,
-          violation_kind: data.data.violation_kind,
-          command_preview: data.data.command_preview,
-          ts: Date.now(),
-        };
-        phaseViolations.value = [...phaseViolations.value, violation].slice(-5);
-        // Toast notification via ant-design-vue message.
-        import("ant-design-vue").then(({ message }) => {
-          message.warning(
-            `[${data.data.current_phase}] 工具 ${data.data.tool} 被拦截: ${data.data.message}`,
-            5,
-          );
-        });
-        const cid = resolveIncomingConvId();
-        if (cid) {
-          appendStep(
-            {
-              type: "team_event",
-              label: "阶段违规",
-              detail: `${data.data.current_phase} · ${data.data.tool}`,
-              status: "error",
-            },
-            cid,
-          );
-        }
-        break;
-      }
-
-      // ── Board Meeting 模式事件 ────────────────────────────────────────
-
-      case "board_started": {
-        const boardData = data.data;
-        // Initialize board state
-        boardState.value = {
-          topic: boardData.topic,
-          experts: boardData.experts.map((e) => ({
-            name: e.name,
-            avatar: e.avatar,
-            color: e.color,
-            is_moderator: e.is_moderator,
-            persona: e.persona,
-          })),
-          max_rounds: boardData.max_rounds,
-          current_round: 0,
-          status: "discussing",
-        };
-        // Push a structured banner message so the renderer can show BoardBannerCard
-        const conversationId = resolveIncomingConvId();
-        if (conversationId) {
-          appendStep(
-            {
-              type: "board_event",
-              label: "私董会开启",
-              detail: `主题「${boardData.topic}」 · ${boardData.experts.length} 位专家 · 最多 ${boardData.max_rounds} 轮`,
-              status: "success",
-            },
-            conversationId,
-          );
-          const startMsg: IChatMessage = {
-            id: generateId(),
-            role: "assistant",
-            content: `🏛️ 私董会开始：${boardData.topic}`,
-            timestamp: new Date().toISOString(),
-            status: "completed",
-            message_type: "board_started",
-            board_started: boardData,
-            board_round: 0,
-          };
-          appendMessage(conversationId, startMsg);
-        }
-        break;
-      }
-
-      case "expert_speech": {
-        const speechData = data.data;
-        // Update current round in board state
-        if (
-          boardState.value &&
-          speechData.round > boardState.value.current_round
-        ) {
-          boardState.value.current_round = speechData.round;
-        }
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const speechMsg: IChatMessage = {
-          id: generateId(),
-          role: "assistant",
-          content: speechData.content || "",
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          expert_name: speechData.expert_name,
-          expert_color: speechData.expert_color,
-          expert_avatar: speechData.expert_avatar,
-          message_type: "board_speech",
-          board_round: speechData.round,
-          board_role: speechData.role,
-        };
-        appendMessage(conversationId, speechMsg);
-        appendStep(
-          {
-            type: "board_event",
-            label: `${speechData.expert_avatar || ""} ${speechData.expert_name}`,
-            detail: `第 ${speechData.round} 轮${speechData.role === "moderator" ? " · 主持" : ""}`,
-            status: "success",
-          },
-          conversationId,
-        );
-        break;
-      }
-
-      case "round_summary": {
-        const summaryData = data.data;
-        const conversationId = resolveIncomingConvId();
-        if (!conversationId) break;
-        const summaryMsg: IChatMessage = {
-          id: generateId(),
-          role: "assistant",
-          content: summaryData.content || "",
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          expert_name: summaryData.moderator_name,
-          message_type: "board_summary",
-          board_round: summaryData.round,
-          board_role: "summary",
-        };
-        appendMessage(conversationId, summaryMsg);
-        appendStep(
-          {
-            type: "board_event",
-            label: `第 ${summaryData.round} 轮小结`,
-            detail: summaryData.continue ? "继续讨论" : "即将结束",
-            status: "success",
-          },
-          conversationId,
-        );
-        break;
-      }
-
-      case "user_intervention": {
-        const interventionData = data.data;
-        const cid = resolveIncomingConvId();
-        if (cid) {
-          appendStep(
-            {
-              type: "board_event",
-              label: "用户干预",
-              detail: (interventionData.content || "").slice(0, 50),
-              status: "success",
-            },
-            cid,
-          );
-        }
-        break;
-      }
-
-      case "board_concluded": {
-        const conclusionData = data.data;
-        // Update board state to completed
-        if (boardState.value) {
-          boardState.value.status = "completed";
-        }
-        // Push a structured conclusion message so the renderer can show BoardConclusionCard
-        const conversationId = resolveIncomingConvId();
-        if (conversationId) {
-          appendStep(
-            {
-              type: "board_event",
-              label: "私董会结束",
-              detail: `共 ${conclusionData.total_rounds} 轮${conclusionData.error ? " · 异常" : ""}`,
-              status: conclusionData.error ? "error" : "success",
-            },
-            conversationId,
-          );
-          const conclusionMsg: IChatMessage = {
-            id: generateId(),
-            role: "assistant",
-            content: conclusionData.summary || "私董会已结束",
-            timestamp: new Date().toISOString(),
-            status: "completed",
-            message_type: "board_conclusion",
-            board_conclusion: conclusionData,
-            board_round: conclusionData.total_rounds,
-          };
-          appendMessage(conversationId, conclusionMsg);
-        }
-        // Clear board state after a short delay to allow UI to update
-        setTimeout(() => {
-          boardState.value = null;
-        }, 1000);
-        break;
-      }
-
-      // ── Debate events (U5) ──────────────────────────────────────────
-
-      case "debate_started": {
-        const d = data.data as IDebateStartedData;
-        debateState.value = {
-          topic: d.topic,
-          participants: d.participants,
-          current_round: 0,
-          max_rounds: d.max_rounds,
-          status: "debating",
-        };
-        const sessionId = resolveIncomingConvId();
-        if (!sessionId) break;
-        appendMessage(sessionId, {
-          id: generateId(),
-          role: "assistant",
-          content: d.opening,
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          message_type: "debate_started",
-          debate_topic: d.topic,
-          debate_participants: d.participants,
-          debate_opening: d.opening,
-        });
-        appendStep(
-          {
-            type: "team_event",
-            label: "辩论开始",
-            detail: d.topic.slice(0, 40),
-            status: "success",
-          },
-          sessionId,
-        );
-        break;
-      }
-
-      case "expert_argument": {
-        const d = data.data as IDebateArgumentData;
-        debateState.value = {
-          ...(debateState.value as NonNullable<typeof debateState.value>),
-          current_round: d.round,
-        };
-        const sessionId = resolveIncomingConvId();
-        if (!sessionId) break;
-        appendMessage(sessionId, {
-          id: generateId(),
-          role: "assistant",
-          content: d.content,
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          message_type: "debate_argument",
-          expert_name: d.expert_name,
-          expert_color: d.expert_color,
-          debate_topic: d.topic,
-          debate_round: d.round,
-        });
-        appendStep(
-          {
-            type: "team_event",
-            label: d.expert_name,
-            detail: `辩论第${d.round}轮`,
-            status: "success",
-          },
-          sessionId,
-        );
-        break;
-      }
-
-      case "debate_round_summary": {
-        const d = data.data as IDebateRoundSummaryData;
-        const sessionId = resolveIncomingConvId();
-        if (!sessionId) break;
-        appendMessage(sessionId, {
-          id: generateId(),
-          role: "assistant",
-          content: d.content,
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          message_type: "debate_summary",
-          expert_name: d.moderator_name,
-          debate_round: d.round,
-          debate_moderator: d.moderator_name,
-        });
-        appendStep(
-          {
-            type: "team_event",
-            label: d.moderator_name,
-            detail: `第${d.round}轮小结`,
-            status: "success",
-          },
-          sessionId,
-        );
-        break;
-      }
-
-      case "debate_resolved": {
-        const d = data.data as IDebateResolvedData;
-        if (debateState.value) {
-          debateState.value = { ...debateState.value, status: "resolved" };
-        }
-        const sessionId = resolveIncomingConvId();
-        if (!sessionId) break;
-        appendMessage(sessionId, {
-          id: generateId(),
-          role: "assistant",
-          content: d.conclusion,
-          timestamp: new Date().toISOString(),
-          status: "completed",
-          message_type: "debate_resolved",
-          debate_decision: d.decision,
-          debate_rationale: d.rationale,
-        });
-        appendStep(
-          {
-            type: "team_event",
-            label: "辩论裁决",
-            detail: d.decision,
-            status: "success",
-          },
-          sessionId,
-        );
-        // Clear debate state after 1 second (same pattern as board_concluded)
-        setTimeout(() => {
-          debateState.value = null;
-        }, 1000);
-        break;
-      }
-
-      case "team_intervention_ack": {
-        // User intervention was accepted by the server — no message needed,
-        // just a step entry for visibility.
-        const d = data.data as { content: string };
-        const sessionId = resolveIncomingConvId();
-        if (!sessionId) break;
-        appendStep(
-          {
-            type: "team_event",
-            label: "用户干预",
-            detail: d.content.slice(0, 40),
-            status: "success",
-          },
-          sessionId,
-        );
-        break;
-      }
-
-      // ── PM Collaboration (U5) 事件 ──────────────────────────────────
-
-      case "collaboration_contract_defined": {
-        const d = data.data as ICollaborationContractDefinedData;
-        const collab = _ensureCollaborationState();
-        // Replace contracts for this phase, keep contracts from other phases
-        const others = collab.contracts.filter(
-          (c) => c.phase_id !== d.phase_id,
-        );
-        const newContracts: Array<
-          ICollaborationContract & { phase_id: string; phase_name: string }
-        > = d.contracts.map((c) => ({
-          from_expert: c.from_expert,
-          to_expert: c.to_expert,
-          content_description: c.content_description,
-          status: c.status,
-          phase_id: d.phase_id,
-          phase_name: d.phase_name,
-        }));
-        collab.contracts = [...others, ...newContracts];
-        const sessionId = resolveIncomingConvId();
-        if (sessionId) {
-          upsertCollaborationGraph(sessionId, collab);
-          appendStep(
-            {
-              type: "team_event",
-              label: "协作契约定义",
-              detail: `${newContracts.length} 项契约 · ${d.phase_name}`,
-              status: "success",
-            },
-            sessionId,
-          );
-        }
-        break;
-      }
-
-      case "collaboration_notice": {
-        const d = data.data as ICollaborationNotice;
-        const collab = _ensureCollaborationState();
-        // Dedup by output_key to avoid duplicate notices on replay
-        if (
-          !collab.notices.some(
-            (n) =>
-              n.output_key === d.output_key && n.from_expert === d.from_expert,
-          )
-        ) {
-          collab.notices.push(d);
-        }
-        // P2 #11: 更新契约状态 — 将匹配的契约从 pending/delivered 标记为 delivered
-        // 使协作关系图的边状态实时反映交付进度
-        for (const c of collab.contracts) {
-          if (
-            c.from_expert === d.from_expert &&
-            c.to_expert === d.to_expert &&
-            c.status === "pending"
-          ) {
-            c.status = "delivered";
-          }
-        }
-        const sessionId = resolveIncomingConvId();
-        if (sessionId) {
-          upsertCollaborationGraph(sessionId, collab);
-          appendStep(
-            {
-              type: "team_event",
-              label: "协作通知",
-              detail: `${d.from_expert} → ${d.to_expert}`,
-              status: "success",
-            },
-            sessionId,
-          );
-        }
-        break;
-      }
-
-      case "review_result": {
-        const d = data.data as IReviewResult;
-        const collab = _ensureCollaborationState();
-        // Replace any existing review for the same phase to keep latest state
-        collab.reviews = collab.reviews.filter(
-          (r) => r.phase_id !== d.phase_id,
-        );
-        collab.reviews.push(d);
-        const sessionId = resolveIncomingConvId();
-        if (sessionId) {
-          // Update the collaboration graph with new review status (node colors)
-          upsertCollaborationGraph(sessionId, collab);
-          // Create a dedicated ReviewResultCard message
-          appendMessage(sessionId, {
-            id: generateId(),
-            role: "assistant",
-            content: d.feedback || (d.passed ? "验收通过" : "验收未通过"),
-            timestamp: new Date().toISOString(),
-            status: "completed",
-            message_type: "review_result",
-            review_result: d,
-            expert_name: d.expert,
-          });
-          appendStep(
-            {
-              type: "team_event",
-              label: d.passed
-                ? "验收通过"
-                : d.final_status === "failed"
-                  ? "验收失败"
-                  : "要求返工",
-              detail: d.phase_name,
-              status: d.passed ? "success" : "error",
-            },
-            sessionId,
-          );
-        }
-        break;
-      }
-
-      case "risk_flagged": {
-        const d = data.data as IRiskFlag;
-        const collab = _ensureCollaborationState();
-        // Dedup by expert + phase + description to avoid duplicates on replay
-        if (
-          !collab.risks.some(
-            (r) =>
-              r.expert === d.expert &&
-              r.phase_id === d.phase_id &&
-              r.risk_description === d.risk_description,
-          )
-        ) {
-          collab.risks.push(d);
-        }
-        const sessionId = resolveIncomingConvId();
-        if (sessionId) {
-          // Update the collaboration graph to show risk marker on the node
-          upsertCollaborationGraph(sessionId, collab);
-          // Create a dedicated RiskFlagCard message
-          appendMessage(sessionId, {
-            id: generateId(),
-            role: "assistant",
-            content: d.risk_description,
-            timestamp: new Date().toISOString(),
-            status: "completed",
-            message_type: "risk_flagged",
-            risk_flag: d,
-            expert_name: d.expert_name || d.expert,
-          });
-          appendStep(
-            {
-              type: "team_event",
-              label: "风险标记",
-              detail: `${d.expert_name || d.expert}: ${d.risk_description.slice(0, 30)}`,
-              status: "error",
-            },
-            sessionId,
-          );
-        }
-        break;
-      }
-
-      // ── Calendar events (KTD-10) ─────────────────────────────────────
-
-      case "calendar_event_created":
-      case "calendar_reminder":
-      case "calendar_invitation":
-      case "calendar_sync_conflict": {
-        _getCalendarStore().handleWsEvent(data);
-        break;
-      }
-    }
-  }
-
-  function appendMessage(conversationId: string, message: IChatMessage): void {
-    const conv = conversations.value.find((c) => c.id === conversationId);
-    if (conv) {
-      if (!Array.isArray(conv.messages)) {
-        conv.messages = [];
-      }
-      conv.messages.push(message);
-      conv.updated_at = new Date().toISOString();
-    }
-  }
-
-  function updateMessage(
-    conversationId: string,
-    messageId: string,
-    updates: Partial<IChatMessage>,
-  ): void {
-    const conv = conversations.value.find((c) => c.id === conversationId);
-    if (!conv) return;
-    const msg = conv.messages.find((m) => m.id === messageId);
-    if (msg) {
-      Object.assign(msg, updates);
-    }
-  }
-
-  /** Resend the last user message in the current conversation */
-  async function resendLastUserMessage(): Promise<void> {
-    const conversationId = currentConversationId.value;
-    if (!conversationId) return;
-    if (pendingConversations.value.has(conversationId)) return;
-    const conv = conversations.value.find((c) => c.id === conversationId);
-    if (!conv) return;
-    const lastUserMsg = [...conv.messages]
-      .reverse()
-      .find((m) => m.role === "user");
-    if (!lastUserMsg) return;
-    const content = lastUserMsg.content.trim();
-    if (!content) return;
-    await sendWsMessage(content);
-  }
-
-  return {
-    // State
-    conversations,
-    currentConversationId,
-    isWsConnected,
-    ws,
-    pendingConversations,
-    streamingStepsByConv,
-    boardState,
-    debateState,
-    collaborationState,
-    // PLAN_EXEC (U4)
-    currentPhase,
-    phaseViolations,
-    isPlanExec,
-    // Legacy aliases (derive from current conversation for backward compat).
-    // New code should use `isCurrentLoading` / `currentStreamingSteps` instead.
-    isLoading: isCurrentLoading,
-    streamingSteps: currentStreamingSteps,
-    // Getters
-    currentConversation,
-    currentMessages,
-    isCurrentLoading,
-    currentStreamingSteps,
-    isBoardMode,
-    // Actions
-    loadConversations,
-    selectConversation,
-    createConversation,
-    deleteConversation,
-    sendMessage,
-    sendWsMessage,
-    resendLastUserMessage,
-    stopGeneration,
-    connectWebSocket,
-    disconnectWebSocket,
-  };
-});
diff --git a/src/agentkit/server/frontend/src/stores/chatSocket.ts b/src/agentkit/server/frontend/src/stores/chatSocket.ts
new file mode 100644
index 0000000..c059f87
--- /dev/null
+++ b/src/agentkit/server/frontend/src/stores/chatSocket.ts
@@ -0,0 +1,165 @@
+import { ref, type Ref } from "vue";
+import { apiClient } from "@/api/client";
+import type { WsServerMessage } from "@/api/types";
+
+/**
+ * Resolve which conversation an incoming WS message belongs to.
+ *
+ * The backend protocol currently does NOT tag server→client messages with
+ * `conversation_id`, so we route by recency: pick the most recently used
+ * pending conversation. This is a heuristic — it works as long as users
+ * don't fire two requests in quick succession across conversations. We
+ * bias toward the *current* view if it's still pending, which is what the
+ * user is watching right now.
+ *
+ * Exported as a pure function so it can be unit-tested without Pinia.
+ */
+export function resolveIncomingConvId(
+  currentConversationId: string | null,
+  pendingConversations: Set<string>,
+  pendingLastUsedAt: Map<string, number>,
+): string {
+  if (currentConversationId && pendingConversations.has(currentConversationId)) {
+    return currentConversationId;
+  }
+  // Fall back to the most recently used pending conversation.
+  let best: string | null = null;
+  let bestTs = 0;
+  pendingLastUsedAt.forEach((ts, id) => {
+    if (pendingConversations.has(id) && ts > bestTs) {
+      best = id;
+      bestTs = ts;
+    }
+  });
+  return best ?? currentConversationId ?? "";
+}
+
+export interface ChatSocketOptions {
+  currentConversationId: Ref<string | null>;
+  pendingConversations: Ref<Set<string>>;
+  pendingLastUsedAt: Ref<Map<string, number>>;
+  /** Invoked for each parsed server message (→ dispatchWsEvent). */
+  onMessage: (data: WsServerMessage) => void;
+  /** Invoked after the socket reopens (→ _recoverTaskAfterReconnect). */
+  onReconnect: () => void | Promise<void>;
+  /** Invoked when the socket closes (→ clear stream-side state). */
+  onDisconnect: () => void;
+}
+
+/**
+ * WebSocket lifecycle composable: connection, 30s heartbeat, and 3s
+ * auto-reconnect guarded by `_intentionalDisconnect` to prevent cascading
+ * reconnects after an explicit `disconnectWebSocket()`.
+ */
+export function useChatSocket(options: ChatSocketOptions) {
+  const isWsConnected = ref(false);
+  const ws = ref<WebSocket | null>(null);
+  let _heartbeatTimer: ReturnType<typeof setInterval> | null = null;
+  let _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  let _intentionalDisconnect = false;
+
+  function connectWebSocket(): void {
+    // Problem 6: also skip if already CONNECTING to avoid orphan sockets
+    if (
+      ws.value &&
+      (ws.value.readyState === WebSocket.OPEN ||
+        ws.value.readyState === WebSocket.CONNECTING)
+    ) {
+      return;
+    }
+
+    _intentionalDisconnect = false;
+    const socket = apiClient.createWebSocket();
+
+    socket.onopen = () => {
+      isWsConnected.value = true;
+      console.log("WebSocket connected");
+      // Start heartbeat: send ping every 30s to keep connection alive
+      if (_heartbeatTimer) clearInterval(_heartbeatTimer);
+      _heartbeatTimer = setInterval(() => {
+        if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+          ws.value.send(JSON.stringify({ type: "ping" }));
+        }
+      }, 30000);
+      // Check for running tasks to resume after reconnection
+      void options.onReconnect();
+    };
+
+    socket.onmessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data as string) as WsServerMessage;
+        console.log("[Chat WS] Received:", data.type, data);
+        options.onMessage(data);
+      } catch (error) {
+        console.error("Failed to parse WebSocket message:", error);
+      }
+    };
+
+    socket.onclose = () => {
+      isWsConnected.value = false;
+      // P2 #21 fix: clear per-conversation pending state to prevent stuck
+      // loading state during disconnect. onReconnect will re-mark
+      // conversations pending if an active task is found.
+      options.pendingConversations.value = new Set();
+      options.pendingLastUsedAt.value = new Map();
+      // Notify stream side to clear stale streaming steps.
+      options.onDisconnect();
+      console.log("WebSocket disconnected");
+      if (_heartbeatTimer) {
+        clearInterval(_heartbeatTimer);
+        _heartbeatTimer = null;
+      }
+      // Problem 1: do not auto-reconnect after an intentional disconnect
+      if (_intentionalDisconnect) {
+        return;
+      }
+      // Auto reconnect after 3 seconds
+      if (_reconnectTimer) clearTimeout(_reconnectTimer);
+      _reconnectTimer = setTimeout(() => {
+        if (!ws.value || ws.value.readyState === WebSocket.CLOSED) {
+          connectWebSocket();
+        }
+      }, 3000);
+    };
+
+    socket.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      isWsConnected.value = false;
+    };
+
+    ws.value = socket;
+  }
+
+  /** Disconnect WebSocket and suppress auto-reconnect. */
+  function disconnectWebSocket(): void {
+    _intentionalDisconnect = true;
+    if (_reconnectTimer) {
+      clearTimeout(_reconnectTimer);
+      _reconnectTimer = null;
+    }
+    if (_heartbeatTimer) {
+      clearInterval(_heartbeatTimer);
+      _heartbeatTimer = null;
+    }
+    if (ws.value) {
+      ws.value.close();
+      ws.value = null;
+      isWsConnected.value = false;
+    }
+  }
+
+  return {
+    isWsConnected,
+    ws,
+    connectWebSocket,
+    disconnectWebSocket,
+    // Bound resolver using the latest option refs (for dispatchWsEvent ctx).
+    // Arrow form avoids shadowing the exported pure function above.
+    resolveIncomingConvId: () =>
+      resolveIncomingConvId(
+        options.currentConversationId.value,
+        options.pendingConversations.value,
+        options.pendingLastUsedAt.value,
+      ),
+  };
+}
diff --git a/src/agentkit/server/frontend/src/stores/chatStore.ts b/src/agentkit/server/frontend/src/stores/chatStore.ts
new file mode 100644
index 0000000..580614f
--- /dev/null
+++ b/src/agentkit/server/frontend/src/stores/chatStore.ts
@@ -0,0 +1,498 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { apiClient } from "@/api/client";
+import { useTeamStore } from "@/stores/team";
+import { useDocumentsStore } from "@/stores/documents";
+import { useCalendarStore } from "@/stores/calendar";
+import { useChatSocket } from "@/stores/chatSocket";
+import { useChatStream } from "@/stores/chatStream";
+import type {
+  IChatMessage,
+  IConversation,
+  WsClientMessage,
+} from "@/api/types";
+
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+export const useChatStore = defineStore("chat", () => {
+  // --- State (chatStore-owned) ---
+  const conversations = ref<IConversation[]>([]);
+  const currentConversationId = ref<string | null>(null);
+  // Per-conversation in-flight tracking; isCurrentLoading derives from the
+  // current conversation being in this set, so other tabs remain usable.
+  const pendingConversations = ref<Set<string>>(new Set());
+  const pendingLastUsedAt = ref<Map<string, number>>(new Map());
+  let _is404Recovering = false;
+
+  // --- Message helpers (chatStore-owned, shared with chatStream) ---
+  function appendMessage(conversationId: string, message: IChatMessage): void {
+    const conv = conversations.value.find((c) => c.id === conversationId);
+    if (conv) {
+      if (!Array.isArray(conv.messages)) conv.messages = [];
+      conv.messages.push(message);
+      conv.updated_at = new Date().toISOString();
+    }
+  }
+
+  function updateMessage(
+    conversationId: string,
+    messageId: string,
+    updates: Partial<IChatMessage>,
+  ): void {
+    const conv = conversations.value.find((c) => c.id === conversationId);
+    if (!conv) return;
+    const msg = conv.messages.find((m) => m.id === messageId);
+    if (msg) Object.assign(msg, updates);
+  }
+
+  function markConversationPending(convId: string): void {
+    pendingConversations.value = new Set(pendingConversations.value).add(convId);
+    pendingLastUsedAt.value = new Map(pendingLastUsedAt.value).set(convId, Date.now());
+  }
+
+  function markConversationDone(convId: string): void {
+    const next = new Set(pendingConversations.value); next.delete(convId);
+    pendingConversations.value = next;
+    const last = new Map(pendingLastUsedAt.value); last.delete(convId);
+    pendingLastUsedAt.value = last;
+  }
+
+  // --- Lazy cross-store accessors (passed to chatStream as deps) ---
+  let _teamStore: ReturnType<typeof useTeamStore> | null = null;
+  let _calendarStore: ReturnType<typeof useCalendarStore> | null = null;
+  const _getTeamStore = () => (_teamStore ??= useTeamStore());
+  const _getCalendarStore = () => (_calendarStore ??= useCalendarStore());
+  const _getDocumentsStore = () => useDocumentsStore();
+
+  // --- chatStream: streaming state + dispatchWsEvent ---
+  const stream = useChatStream({
+    conversations,
+    currentConversationId,
+    appendMessage,
+    updateMessage,
+    markConversationDone,
+    resolveIncomingConvId: () => socket.resolveIncomingConvId(),
+    getTeamStore: _getTeamStore,
+    getCalendarStore: _getCalendarStore,
+    getDocumentsStore: _getDocumentsStore,
+  });
+
+  // --- chatSocket: WebSocket lifecycle + resolveIncomingConvId ---
+  const socket = useChatSocket({
+    currentConversationId,
+    pendingConversations,
+    pendingLastUsedAt,
+    onMessage: (data) => stream.dispatch(data),
+    onReconnect: () => _recoverTaskAfterReconnect(),
+    onDisconnect: () => stream.clearAllStreamState(),
+  });
+
+  // --- Getters (chatStore-owned) ---
+  const currentConversation = computed<IConversation | undefined>(() =>
+    conversations.value.find((c) => c.id === currentConversationId.value),
+  );
+  const currentMessages = computed<IChatMessage[]>(
+    () => currentConversation.value?.messages ?? [],
+  );
+  // `true` only when the current conversation is waiting on the agent.
+  const isCurrentLoading = computed<boolean>(() => {
+    const cid = currentConversationId.value;
+    return !!cid && pendingConversations.value.has(cid);
+  });
+
+  // --- Actions ---
+
+  /** Load all conversations from the server */
+  async function loadConversations(): Promise<void> {
+    try {
+      const data = await apiClient.getConversations();
+      conversations.value = data.map((conv: IConversation) => ({
+        id: conv.id,
+        title: conv.title || "对话",
+        messages: Array.isArray(conv.messages) ? conv.messages : [],
+        created_at: conv.created_at,
+        updated_at: conv.updated_at,
+      }));
+    } catch (error) {
+      console.error("Failed to load conversations:", error);
+    }
+  }
+
+  /** Select a conversation by ID and load its messages */
+  async function selectConversation(id: string, force = false): Promise<void> {
+    currentConversationId.value = id;
+    // P2 #10: 会话隔离 — 切换会话时重置 collaborationState，避免跨会话数据泄漏。
+    stream.collaborationState.value = null;
+
+    const conv = conversations.value.find((c) => c.id === id);
+    // 本地临时会话尚未同步到服务端，跳过获取避免 404
+    if (
+      !conv?.is_local &&
+      (force || !conv || !conv.messages || conv.messages.length === 0)
+    ) {
+      try {
+        const fullConv = await apiClient.getConversation(id);
+        if (conv) {
+          conv.messages = fullConv.messages || [];
+          // P0 #1 fix: never let the server's placeholder title ("对话")
+          // overwrite a real title we already have locally.
+          const serverTitle = fullConv.title || "";
+          const localTitle = conv.title || "";
+          const isServerPlaceholder =
+            serverTitle === "对话" || serverTitle.trim() === "";
+          const isLocalReal =
+            localTitle && localTitle !== "新对话" && localTitle !== "对话";
+          if (serverTitle && !isServerPlaceholder) conv.title = serverTitle;
+          else if (!isLocalReal) conv.title = serverTitle || localTitle || "对话";
+          conv.created_at = fullConv.created_at || conv.created_at;
+          conv.updated_at = fullConv.updated_at || conv.updated_at;
+        } else {
+          // P1 #7 fix: If the conversation is not in the local list, add it.
+          const serverTitle = fullConv.title || "新对话";
+          conversations.value.unshift({
+            id: fullConv.id || id,
+            title: serverTitle === "对话" ? "新对话" : serverTitle,
+            messages: fullConv.messages || [],
+            created_at: fullConv.created_at || new Date().toISOString(),
+            updated_at: fullConv.updated_at || new Date().toISOString(),
+          });
+        }
+      } catch (error) {
+        const isNotFound = (error as { status?: number })?.status === 404;
+        if (isNotFound) {
+          conversations.value = conversations.value.filter((c) => c.id !== id);
+          stream.streamingStepsByConv.value.delete(id);
+          pendingConversations.value.delete(id);
+          pendingLastUsedAt.value.delete(id);
+          if (currentConversationId.value === id) {
+            currentConversationId.value = null;
+            stream.boardState.value = null;
+            stream.debateState.value = null;
+            // 自动切换到下一个可用会话，没有则新建（防止级联 404）
+            if (!_is404Recovering) {
+              _is404Recovering = true;
+              try {
+                if (conversations.value.length > 0) {
+                  await selectConversation(conversations.value[0].id);
+                } else {
+                  createConversation();
+                }
+              } finally {
+                _is404Recovering = false;
+              }
+            }
+          }
+        } else {
+          console.error("Failed to load conversation messages:", error);
+        }
+      }
+    }
+
+    // P2 #10: 恢复 collaborationState — 从会话消息中查找 collaboration_graph
+    const restoredConv = conversations.value.find((c) => c.id === id);
+    const graphMsg = restoredConv?.messages
+      ? [...restoredConv.messages]
+          .reverse()
+          .find((m) => m.message_type === "collaboration_graph" && m.collaboration_graph)
+      : undefined;
+    if (graphMsg?.collaboration_graph) {
+      stream.collaborationState.value = {
+        contracts: [...graphMsg.collaboration_graph.contracts],
+        notices: [...graphMsg.collaboration_graph.notices],
+        reviews: [...graphMsg.collaboration_graph.reviews],
+        risks: [...graphMsg.collaboration_graph.risks],
+      };
+    }
+  }
+
+  /** Create a new empty conversation */
+  function createConversation(): void {
+    const newConversation: IConversation = {
+      id: generateId(),
+      title: "新对话",
+      messages: [],
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      is_local: true,
+    };
+    conversations.value.unshift(newConversation);
+    currentConversationId.value = newConversation.id;
+    stream.clearConvSteps(newConversation.id);
+  }
+
+  /** Delete a conversation (server + local state) */
+  async function deleteConversation(id: string): Promise<void> {
+    const conv = conversations.value.find((c) => c.id === id);
+    if (!conv?.is_local) {
+      try {
+        await apiClient.deleteConversation(id);
+      } catch (error) {
+        console.error("Failed to delete conversation:", error);
+      }
+    }
+    conversations.value = conversations.value.filter((c) => c.id !== id);
+    stream.streamingStepsByConv.value.delete(id);
+    pendingConversations.value.delete(id);
+    pendingLastUsedAt.value.delete(id);
+    markConversationDone(id);
+    if (currentConversationId.value === id) {
+      currentConversationId.value = null;
+      stream.boardState.value = null;
+      stream.debateState.value = null;
+      if (conversations.value.length > 0) {
+        await selectConversation(conversations.value[0].id);
+      } else {
+        createConversation();
+      }
+    }
+  }
+
+  /** Append a user message + pending assistant placeholder; returns both. */
+  function _appendUserAndAssistant(
+    conversationId: string,
+    content: string,
+  ): { userId: string; assistantId: string } {
+    const userId = generateId();
+    appendMessage(conversationId, {
+      id: userId,
+      role: "user",
+      content,
+      timestamp: new Date().toISOString(),
+    });
+    const assistantId = generateId();
+    appendMessage(conversationId, {
+      id: assistantId,
+      role: "assistant",
+      content: "",
+      timestamp: new Date().toISOString(),
+      status: "pending",
+    });
+    return { userId, assistantId };
+  }
+
+  /** Send a message using REST API (fallback) */
+  async function sendMessage(
+    message: string,
+    sources?: string[],
+  ): Promise<void> {
+    if (!currentConversationId.value) createConversation();
+    const conversationId = currentConversationId.value as string;
+    const { assistantId } = _appendUserAndAssistant(conversationId, message);
+    markConversationPending(conversationId);
+
+    try {
+      const response = await apiClient.chat({
+        message,
+        conversation_id: conversationId,
+        sources,
+      });
+      updateMessage(conversationId, assistantId, {
+        content: response.message,
+        matched_skill: response.matched_skill,
+        routing_method: response.routing_method,
+        confidence: response.confidence,
+        task_id: response.task_id,
+        status: response.status,
+      });
+      const conv = conversations.value.find((c) => c.id === conversationId);
+      if (conv) {
+        conv.is_local = false;
+        if (conv.messages.length <= 2) {
+          conv.title =
+            message.length > 20 ? `${message.substring(0, 20)}...` : message;
+        }
+      }
+    } catch (error) {
+      updateMessage(conversationId, assistantId, {
+        content: `请求失败: ${error instanceof Error ? error.message : "未知错误"}`,
+        status: "completed",
+      });
+    } finally {
+      markConversationDone(conversationId);
+    }
+  }
+
+  /** Send a message via WebSocket for streaming */
+  async function sendWsMessage(
+    message: string,
+    sources?: string[],
+    model?: string,
+  ): Promise<void> {
+    if (!currentConversationId.value) createConversation();
+
+    // Check WebSocket state BEFORE creating messages to avoid duplicates
+    if (!socket.ws.value || socket.ws.value.readyState !== WebSocket.OPEN) {
+      await sendMessage(message, sources);
+      return;
+    }
+
+    const conversationId = currentConversationId.value as string;
+    const { userId, assistantId } = _appendUserAndAssistant(
+      conversationId,
+      message,
+    );
+    markConversationPending(conversationId);
+    stream.clearConvSteps(conversationId);
+
+    // Problem 7: catch send() exceptions (e.g. connection closed mid-send)
+    try {
+      socket.ws.value.send(
+        JSON.stringify({
+          type: "chat",
+          message,
+          sources,
+          conversation_id: conversationId,
+          model,
+        } as WsClientMessage),
+      );
+    } catch (error) {
+      console.error("WebSocket send failed, falling back to REST:", error);
+      const conv = conversations.value.find((c) => c.id === conversationId);
+      if (conv) {
+        conv.messages = conv.messages.filter(
+          (m) => m.id !== userId && m.id !== assistantId,
+        );
+      }
+      markConversationDone(conversationId);
+      await sendMessage(message, sources);
+      return;
+    }
+
+    // Update conversation title from first user message
+    const conv = conversations.value.find((c) => c.id === conversationId);
+    if (conv && conv.title === "新对话") {
+      conv.title =
+        message.length > 20 ? `${message.substring(0, 20)}...` : message;
+    }
+  }
+
+  /** Stop the in-flight generation by sending a `cancel` WS message. */
+  function stopGeneration(): void {
+    const cid = currentConversationId.value;
+    if (!socket.ws.value || socket.ws.value.readyState !== WebSocket.OPEN) {
+      if (cid) {
+        markConversationDone(cid);
+        stream.clearConvSteps(cid);
+      }
+      return;
+    }
+    try {
+      const cancelMsg: WsClientMessage = { type: "cancel" };
+      socket.ws.value.send(JSON.stringify(cancelMsg));
+    } catch (error) {
+      console.error("Failed to send cancel message:", error);
+      if (cid) {
+        markConversationDone(cid);
+        stream.clearConvSteps(cid);
+      }
+    }
+  }
+
+  /** After WebSocket reconnects, check for running tasks and resume them. */
+  async function _recoverTaskAfterReconnect(): Promise<void> {
+    const cid = currentConversationId.value;
+    if (!cid) return;
+    try {
+      // Problem 2: query both 'running' and 'pending' tasks.
+      const [runningTasks, pendingTasks] = await Promise.all([
+        apiClient.listTasks("running"),
+        apiClient.listTasks("pending"),
+      ]);
+      const activeTask = [...runningTasks, ...pendingTasks].find(
+        (t) => t.metadata?.conversation_id === cid,
+      );
+      const canResume =
+        activeTask &&
+        socket.ws.value &&
+        socket.ws.value.readyState === WebSocket.OPEN;
+      if (!canResume) {
+        // No active task — force reload conversation messages.
+        await selectConversation(cid, true);
+        return;
+      }
+      // P1 #12 fix: Clear the last pending assistant message's accumulated
+      // content before resuming (replay would duplicate it otherwise).
+      const conv = conversations.value.find((c) => c.id === cid);
+      const lastPending = conv
+        ? [...conv.messages]
+            .reverse()
+            .find((m) => m.role === "assistant" && m.status === "pending")
+        : undefined;
+      if (lastPending) {
+        updateMessage(cid, lastPending.id, {
+          content: "",
+          thinking: "",
+          tool_calls: [],
+        });
+      }
+      markConversationPending(cid);
+      try {
+        socket.ws.value?.send(
+          JSON.stringify({
+            type: "resume",
+            task_id: activeTask!.task_id,
+            conversation_id: cid,
+          }),
+        );
+      } catch (error) {
+        console.error("Failed to send resume message:", error);
+        markConversationDone(cid);
+      }
+    } catch (error) {
+      console.error("Failed to recover task after reconnect:", error);
+    }
+  }
+
+  /** Resend the last user message in the current conversation */
+  async function resendLastUserMessage(): Promise<void> {
+    const conversationId = currentConversationId.value;
+    if (!conversationId) return;
+    if (pendingConversations.value.has(conversationId)) return;
+    const conv = conversations.value.find((c) => c.id === conversationId);
+    if (!conv) return;
+    const lastUserMsg = [...conv.messages]
+      .reverse()
+      .find((m) => m.role === "user");
+    if (!lastUserMsg) return;
+    const content = lastUserMsg.content.trim();
+    if (!content) return;
+    await sendWsMessage(content);
+  }
+
+  return {
+    conversations,
+    currentConversationId,
+    isWsConnected: socket.isWsConnected,
+    ws: socket.ws,
+    pendingConversations,
+    // Stream-owned state (re-exported for component compat)
+    streamingStepsByConv: stream.streamingStepsByConv,
+    boardState: stream.boardState,
+    debateState: stream.debateState,
+    collaborationState: stream.collaborationState,
+    currentPhase: stream.currentPhase,
+    phaseViolations: stream.phaseViolations,
+    isPlanExec: stream.isPlanExec,
+    // Legacy aliases for backward compat
+    isLoading: isCurrentLoading,
+    streamingSteps: stream.currentStreamingSteps,
+    currentConversation,
+    currentMessages,
+    isCurrentLoading,
+    currentStreamingSteps: stream.currentStreamingSteps,
+    isBoardMode: stream.isBoardMode,
+    // Actions
+    loadConversations,
+    selectConversation,
+    createConversation,
+    deleteConversation,
+    sendMessage,
+    sendWsMessage,
+    resendLastUserMessage,
+    stopGeneration,
+    connectWebSocket: socket.connectWebSocket,
+    disconnectWebSocket: socket.disconnectWebSocket,
+  };
+});
diff --git a/src/agentkit/server/frontend/src/stores/chatStream.ts b/src/agentkit/server/frontend/src/stores/chatStream.ts
new file mode 100644
index 0000000..366f847
--- /dev/null
+++ b/src/agentkit/server/frontend/src/stores/chatStream.ts
@@ -0,0 +1,1557 @@
+import { ref, computed, type Ref } from "vue";
+import { useTeamStore } from "@/stores/team";
+import { useDocumentsStore } from "@/stores/documents";
+import { useCalendarStore } from "@/stores/calendar";
+import { isDocumentMeta } from "@/api/documents";
+import type {
+  IChatMessage,
+  IConversation,
+  ICollaborationGraphData,
+  ICollaborationContract,
+  ICollaborationContractDefinedData,
+  ICollaborationNotice,
+  IReviewResult,
+  IRiskFlag,
+  IDebateStartedData,
+  IDebateArgumentData,
+  IDebateRoundSummaryData,
+  IDebateResolvedData,
+  WsServerMessage,
+} from "@/api/types";
+
+// ── Types (moved from chat.ts) ─────────────────────────────────────────
+
+/**
+ * Structured streaming progress entries. Token deltas are aggregated into
+ * a single entry that is updated in place so the UI doesn't spam one
+ * "步骤 3: turn.token" line per chunk.
+ */
+export type StreamingStepType =
+  | "routing"
+  | "thinking"
+  | "tool_call"
+  | "tool_result"
+  | "streaming"
+  | "final_answer"
+  | "team_event"
+  | "board_event"
+  | "milestone";
+
+export interface IStreamingStep {
+  id: string;
+  type: StreamingStepType;
+  label: string;
+  detail?: string;
+  /** Aggregate counter for `streaming` (chars streamed) or `tool_call` (duration ms). */
+  counter?: number;
+  status: "running" | "success" | "error";
+  /** Updated monotonically; used as a render hint for the streaming entry. */
+  ts: number;
+}
+
+/** Board Meeting transient state. */
+export interface BoardState {
+  topic: string;
+  experts: Array<{
+    name: string;
+    avatar: string;
+    color: string;
+    is_moderator: boolean;
+    persona: string;
+  }>;
+  max_rounds: number;
+  current_round: number;
+  status: "discussing" | "concluding" | "completed" | "dissolved";
+}
+
+/** Debate transient state. */
+export interface DebateState {
+  topic: string;
+  participants: string[];
+  current_round: number;
+  max_rounds: number;
+  status: "debating" | "resolved" | "cancelled";
+}
+
+/** PLAN_EXEC phase violation record. */
+export interface PhaseViolation {
+  phase: string;
+  tool: string;
+  message: string;
+  violation_kind: string;
+  command_preview?: string;
+  ts: number;
+}
+
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+// ── ChatStreamState: deps bag for dispatchWsEvent ──────────────────────
+
+/**
+ * The set of reactive refs + mutation helpers that `dispatchWsEvent` needs.
+ * Designed so a unit test can construct a fixture state without Pinia.
+ *
+ * Stream-owned state (streamingStepsByConv, currentPhase, phaseViolations,
+ * boardState, debateState, collaborationState) is created by `useChatStream`
+ * and exposed here. ChatStore-owned state (conversations, currentConversationId)
+ * and helpers (appendMessage, updateMessage, markConversationDone,
+ * resolveIncomingConvId) are passed in as deps.
+ */
+export interface ChatStreamState {
+  // Stream-owned reactive state
+  streamingStepsByConv: Ref<Map<string, IStreamingStep[]>>;
+  currentPhase: Ref<string | null>;
+  phaseViolations: Ref<PhaseViolation[]>;
+  boardState: Ref<BoardState | null>;
+  debateState: Ref<DebateState | null>;
+  collaborationState: Ref<ICollaborationGraphData | null>;
+
+  // Read access to chatStore state
+  conversations: Ref<IConversation[]>;
+  currentConversationId: Ref<string | null>;
+
+  // ChatStore mutation helpers
+  appendMessage: (conversationId: string, message: IChatMessage) => void;
+  updateMessage: (
+    conversationId: string,
+    messageId: string,
+    updates: Partial<IChatMessage>,
+  ) => void;
+  markConversationDone: (conversationId: string) => void;
+  resolveIncomingConvId: () => string;
+
+  // Cross-store accessors (lazy)
+  getTeamStore: () => ReturnType<typeof useTeamStore> | null;
+  getCalendarStore: () => ReturnType<typeof useCalendarStore>;
+  getDocumentsStore: () => ReturnType<typeof useDocumentsStore>;
+}
+
+// ── Stream helpers (operate on stream-owned state) ─────────────────────
+
+export function getConvSteps(
+  streamingStepsByConv: Ref<Map<string, IStreamingStep[]>>,
+  convId: string,
+): IStreamingStep[] {
+  let arr = streamingStepsByConv.value.get(convId);
+  if (!arr) {
+    arr = [];
+    streamingStepsByConv.value.set(convId, arr);
+  }
+  return arr;
+}
+
+export function appendStep(
+  streamingStepsByConv: Ref<Map<string, IStreamingStep[]>>,
+  step: Omit<IStreamingStep, "id" | "ts">,
+  convId: string,
+): void {
+  if (!convId) return;
+  getConvSteps(streamingStepsByConv, convId).push({
+    ...step,
+    id: generateId(),
+    ts: Date.now(),
+  });
+}
+
+export function updateLastStep(
+  streamingStepsByConv: Ref<Map<string, IStreamingStep[]>>,
+  predicate: (s: IStreamingStep) => boolean,
+  patch: Partial<IStreamingStep>,
+  convId: string,
+): void {
+  if (!convId) return;
+  const arr = streamingStepsByConv.value.get(convId);
+  if (!arr) return;
+  const idx = [...arr].reverse().findIndex(predicate);
+  if (idx === -1) return;
+  const realIdx = arr.length - 1 - idx;
+  arr[realIdx] = { ...arr[realIdx], ...patch, ts: Date.now() };
+}
+
+export function clearConvSteps(
+  streamingStepsByConv: Ref<Map<string, IStreamingStep[]>>,
+  convId: string,
+): void {
+  // Delete the key entirely rather than setting an empty array —
+  // otherwise the Map grows unboundedly across conversations.
+  streamingStepsByConv.value.delete(convId);
+}
+
+export function resetPlanExecState(state: ChatStreamState): void {
+  state.currentPhase.value = null;
+  state.phaseViolations.value = [];
+}
+
+/** Ensure collaborationState is initialized; return the live data object. */
+export function ensureCollaborationState(
+  state: ChatStreamState,
+): ICollaborationGraphData {
+  if (!state.collaborationState.value) {
+    state.collaborationState.value = {
+      contracts: [],
+      notices: [],
+      reviews: [],
+      risks: [],
+    };
+  }
+  return state.collaborationState.value;
+}
+
+/**
+ * Ensure a collaboration_graph message exists in the conversation and update
+ * it with the latest graph data. Creates the message if absent.
+ */
+export function upsertCollaborationGraph(
+  state: ChatStreamState,
+  conversationId: string,
+  graphData: ICollaborationGraphData,
+): void {
+  const conv = state.conversations.value.find((c) => c.id === conversationId);
+  if (!conv) return;
+  const existing = [...conv.messages]
+    .reverse()
+    .find((m) => m.message_type === "collaboration_graph");
+  if (existing) {
+    state.updateMessage(conversationId, existing.id, {
+      collaboration_graph: {
+        contracts: [...graphData.contracts],
+        notices: [...graphData.notices],
+        reviews: [...graphData.reviews],
+        risks: [...graphData.risks],
+      },
+    });
+  } else {
+    const graphMsg: IChatMessage = {
+      id: generateId(),
+      role: "assistant",
+      content: "",
+      timestamp: new Date().toISOString(),
+      status: "completed",
+      message_type: "collaboration_graph",
+      collaboration_graph: {
+        contracts: [...graphData.contracts],
+        notices: [...graphData.notices],
+        reviews: [...graphData.reviews],
+        risks: [...graphData.risks],
+      },
+    };
+    state.appendMessage(conversationId, graphMsg);
+  }
+}
+
+// ── dispatchWsEvent: pure event dispatcher ─────────────────────────────
+
+/**
+ * Discriminated-union dispatcher for WsServerMessage. Each `case` branch
+ * narrows `event` to a specific variant so typed fields can be accessed
+ * directly. Mutates `state` (stream-owned refs + chatStore helpers passed
+ * via the state bag) — no module-level state access, so unit tests can
+ * construct a fixture state and call this directly.
+ *
+ * Behavior is preserved bit-for-bit from the original `handleWsMessage`
+ * in chat.ts (lines 821–1946 before refactor).
+ */
+export function dispatchWsEvent(
+  event: WsServerMessage,
+  state: ChatStreamState,
+): void {
+  switch (event.type) {
+    case "connected": {
+      // Backend confirms conversation — update local ID if backend assigned a different one
+      const serverConvId = event.conversation_id;
+      const localId = state.currentConversationId.value;
+      const conv = state.conversations.value.find((c) => c.id === localId);
+      if (conv) {
+        conv.is_local = false;
+        if (serverConvId && serverConvId !== localId) {
+          conv.id = serverConvId;
+          state.currentConversationId.value = serverConvId;
+        }
+      }
+      break;
+    }
+
+    case "routing": {
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      const lastAssistantMsg = [...conv.messages]
+        .reverse()
+        .find((m) => m.role === "assistant");
+      if (lastAssistantMsg) {
+        state.updateMessage(conversationId, lastAssistantMsg.id, {
+          matched_skill: event.skill,
+          confidence: event.confidence,
+          routing_method: event.method,
+        });
+      }
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "routing",
+          label: "智能路由",
+          detail: `${event.skill} · 置信度 ${(event.confidence * 100).toFixed(1)}%`,
+          status: "success",
+        },
+        conversationId,
+      );
+      break;
+    }
+
+    case "step": {
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      const lastAssistantMsg = [...conv.messages]
+        .reverse()
+        .find((m) => m.role === "assistant");
+      const stepInfo = event.data;
+      const innerData = stepInfo.data as Record<string, unknown>;
+      const eventType = stepInfo.event_type as string | undefined;
+      // Aggregate token deltas into a single "streaming" step. We only push
+      // a new step on transitions between non-token types, otherwise the
+      // list explodes with one entry per token.
+      if (eventType === "token" || eventType === "turn.token") {
+        const chunk = (innerData.delta ??
+          innerData.output ??
+          innerData.content ??
+          "") as string;
+        const deltaLen = chunk?.length ?? 0;
+        const convSteps =
+          state.streamingStepsByConv.value.get(conversationId) ?? [];
+        const hasStreaming = convSteps.some(
+          (s) => s.type === "streaming" && s.status === "running",
+        );
+        if (!hasStreaming) {
+          appendStep(
+            state.streamingStepsByConv,
+            {
+              type: "streaming",
+              label: "正在生成回答",
+              status: "running",
+              counter: 0,
+            },
+            conversationId,
+          );
+        }
+        // Accumulate chars into the running streaming step (counter is
+        // cumulative, not per-chunk).  We inline the lookup instead of
+        // using ``updateLastStep`` because the patch needs the previous
+        // value — and a backward for-loop avoids the [...arr].reverse()
+        // allocation on every token (hot path).
+        const arr = state.streamingStepsByConv.value.get(conversationId);
+        if (arr) {
+          for (let i = arr.length - 1; i >= 0; i--) {
+            const s = arr[i];
+            if (s.type === "streaming" && s.status === "running") {
+              arr[i] = {
+                ...s,
+                counter: (s.counter ?? 0) + (deltaLen > 0 ? deltaLen : 1),
+                ts: Date.now(),
+              };
+              break;
+            }
+          }
+        }
+      } else if (eventType === "final_answer") {
+        // Mark the streaming step as completed (if any) then add final.
+        updateLastStep(
+          state.streamingStepsByConv,
+          (s) => s.type === "streaming" && s.status === "running",
+          { status: "success" },
+          conversationId,
+        );
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "final_answer",
+            label: "生成最终回答",
+            status: "running",
+          },
+          conversationId,
+        );
+      } else if (eventType === "tool_call") {
+        const toolName = (innerData.tool_name ||
+          innerData.name ||
+          "#") as string;
+        // Mark the streaming step done if present.
+        updateLastStep(
+          state.streamingStepsByConv,
+          (s) => s.type === "streaming" && s.status === "running",
+          { status: "success" },
+          conversationId,
+        );
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "tool_call",
+            label: "调用工具",
+            detail: toolName,
+            status: "running",
+          },
+          conversationId,
+        );
+      } else if (eventType === "tool_result") {
+        const toolName = (innerData.tool_name || innerData.name) as
+          | string
+          | undefined;
+        const ok = !innerData.error;
+        updateLastStep(
+          state.streamingStepsByConv,
+          (s) => s.type === "tool_call" && s.status === "running",
+          { status: ok ? "success" : "error", detail: toolName },
+          conversationId,
+        );
+        // Detect document creation results and update documents store (U8)
+        if (ok && toolName === "document" && innerData.document) {
+          try {
+            if (isDocumentMeta(innerData.document)) {
+              const documentsStore = state.getDocumentsStore();
+              documentsStore.addDocument(conversationId, innerData.document);
+            } else {
+              console.warn(
+                "Malformed document payload from tool_result:",
+                innerData.document,
+              );
+            }
+          } catch (e) {
+            // Store not yet initialized or malformed payload — non-fatal
+            console.warn("Failed to add document to store:", e);
+          }
+        }
+      } else if (eventType === "thinking") {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "thinking",
+            label: "深度思考",
+            status: "success",
+          },
+          conversationId,
+        );
+      } else if (
+        eventType === "turn.started" ||
+        eventType === "turn.created"
+      ) {
+        // Phase marker — silence; user already sees the spinner.
+      } else if (
+        eventType === "turn.thinking" ||
+        eventType === "turn.result"
+      ) {
+        // Already handled by thinking/final_answer; ignore.
+      } else {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "milestone",
+            label: `${eventType || "progress"}`,
+            detail: stepInfo.step ? `step ${stepInfo.step}` : undefined,
+            status: "running",
+          },
+          conversationId,
+        );
+      }
+
+      // Track tool calls for ToolCallCard rendering
+      if (lastAssistantMsg) {
+        const toolCalls = lastAssistantMsg.tool_calls || [];
+
+        if (stepInfo.event_type === "tool_call") {
+          const tcId = `tc-${stepInfo.step || toolCalls.length}`;
+          const toolName = (innerData.tool_name ||
+            innerData.name ||
+            "unknown") as string;
+          const params = innerData.arguments
+            ? typeof innerData.arguments === "string"
+              ? innerData.arguments
+              : JSON.stringify(innerData.arguments, null, 2)
+            : undefined;
+          toolCalls.push({
+            id: tcId,
+            name: toolName,
+            status: "running",
+            params: params
+              ? params.length > 500
+                ? params.substring(0, 500) + "..."
+                : params
+              : undefined,
+          });
+          state.updateMessage(conversationId, lastAssistantMsg.id, {
+            tool_calls: [...toolCalls],
+          });
+        } else if (stepInfo.event_type === "tool_result") {
+          // Find the last running tool call and update it
+          const lastRunning = [...toolCalls]
+            .reverse()
+            .find((tc) => tc.status === "running");
+          if (lastRunning) {
+            const resultStr = innerData.output
+              ? typeof innerData.output === "string"
+                ? innerData.output
+                : JSON.stringify(innerData.output, null, 2)
+              : "";
+            lastRunning.status = innerData.error ? "error" : "completed";
+            lastRunning.result =
+              resultStr.length > 2000
+                ? resultStr.substring(0, 2000) + "..."
+                : resultStr;
+            lastRunning.error = innerData.error as string | undefined;
+            lastRunning.duration = innerData.duration as number | undefined;
+            state.updateMessage(conversationId, lastAssistantMsg.id, {
+              tool_calls: [...toolCalls],
+            });
+          }
+        } else if (stepInfo.event_type === "thinking") {
+          // Accumulate thinking content for ThinkingBlock rendering
+          const thinkingChunk = (innerData.content ||
+            innerData.thought ||
+            "") as string;
+          if (thinkingChunk && lastAssistantMsg) {
+            state.updateMessage(conversationId, lastAssistantMsg.id, {
+              thinking: (lastAssistantMsg.thinking || "") + thinkingChunk,
+            });
+          }
+        }
+      }
+
+      // Accumulate final_answer content for streaming display
+      if (stepInfo.event_type === "final_answer" && lastAssistantMsg) {
+        const chunk = (innerData.output || "") as string;
+        if (chunk) {
+          state.updateMessage(conversationId, lastAssistantMsg.id, {
+            content: (lastAssistantMsg.content || "") + chunk,
+          });
+        }
+      }
+      break;
+    }
+
+    case "result": {
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      const lastAssistantMsg = [...conv.messages]
+        .reverse()
+        .find((m) => m.role === "assistant");
+      // Backend sends: {type: "result", data: {message: "..."}} or {data: {status, content}}
+      const content = event.data.message || event.data.content || "";
+      if (lastAssistantMsg) {
+        // Only overwrite if we didn't already stream the content
+        const finalContent = content || lastAssistantMsg.content || "";
+        state.updateMessage(conversationId, lastAssistantMsg.id, {
+          content: finalContent,
+          status: "completed",
+        });
+      }
+      // Update conversation title from first user message
+      const firstUserMsg = conv.messages.find((m) => m.role === "user");
+      if (firstUserMsg && conv.title === "新对话") {
+        conv.title =
+          firstUserMsg.content.length > 20
+            ? `${firstUserMsg.content.substring(0, 20)}...`
+            : firstUserMsg.content;
+      }
+      state.markConversationDone(conversationId);
+      // Clear steps for this conversation so they don't accumulate
+      // across multiple interactions.  The UI has already transitioned
+      // to showing the final assistant message.
+      clearConvSteps(state.streamingStepsByConv, conversationId);
+      // Reset PLAN_EXEC phase state — the conversation is done.
+      resetPlanExecState(state);
+      break;
+    }
+
+    case "error": {
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      const lastAssistantMsg = [...conv.messages]
+        .reverse()
+        .find((m) => m.role === "assistant");
+      if (lastAssistantMsg) {
+        state.updateMessage(conversationId, lastAssistantMsg.id, {
+          message_type: "error",
+          status: "error",
+          error_detail: event.data.message || "未知错误",
+          content: lastAssistantMsg.content || "",
+        });
+      } else {
+        const errorMsg: IChatMessage = {
+          id: generateId(),
+          role: "assistant",
+          content: "",
+          timestamp: new Date().toISOString(),
+          status: "error",
+          message_type: "error",
+          error_detail: event.data.message || "未知错误",
+        };
+        state.appendMessage(conversationId, errorMsg);
+      }
+      state.markConversationDone(conversationId);
+      clearConvSteps(state.streamingStepsByConv, conversationId);
+      break;
+    }
+
+    case "team_formed": {
+      // Reset collaboration state for a fresh team
+      state.collaborationState.value = null;
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const teamStore = state.getTeamStore();
+      if (teamStore) {
+        teamStore.setTeamState(event.data);
+      }
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "team_event",
+          label: "组建专家团",
+          detail: event.data.experts.map((e) => e.name).join("、"),
+          status: "success",
+        },
+        conversationId,
+      );
+      break;
+    }
+
+    case "expert_step": {
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      // Dedup: append to existing expert message if one exists for this expert
+      const existingExpertMsg = [...conv.messages]
+        .reverse()
+        .find(
+          (m) =>
+            m.expert_id === event.data.expert_id && m.status === "pending",
+        );
+      if (existingExpertMsg) {
+        state.updateMessage(conversationId, existingExpertMsg.id, {
+          content:
+            (existingExpertMsg.content || "") + (event.data.content || ""),
+        });
+      } else {
+        const expertMsg: IChatMessage = {
+          id: generateId(),
+          role: "assistant",
+          content: event.data.content || "",
+          timestamp: new Date().toISOString(),
+          status: "pending",
+          expert_id: event.data.expert_id,
+          expert_name: event.data.expert_name,
+          expert_color: event.data.expert_color,
+          message_type: "chat",
+        };
+        state.appendMessage(conversationId, expertMsg);
+      }
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "team_event",
+          label: event.data.expert_name || "专家",
+          detail: event.data.step ? `步骤 ${event.data.step}` : undefined,
+          status: "running",
+        },
+        conversationId,
+      );
+      break;
+    }
+
+    case "expert_result": {
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      const expertMsg: IChatMessage = {
+        id: generateId(),
+        role: "assistant",
+        content: event.data.content || "",
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        expert_id: event.data.expert_id,
+        expert_name: event.data.expert_name,
+        expert_color: event.data.expert_color,
+        message_type: "chat",
+      };
+      state.appendMessage(conversationId, expertMsg);
+      break;
+    }
+
+    case "plan_update": {
+      const teamStore = state.getTeamStore();
+      if (teamStore) {
+        teamStore.updatePhases(event.data.plan_phases);
+      }
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      const existingPlanMsg = [...conv.messages]
+        .reverse()
+        .find((m) => m.message_type === "plan_update");
+      if (existingPlanMsg) {
+        state.updateMessage(conversationId, existingPlanMsg.id, {
+          plan_phases: event.data.plan_phases,
+        });
+      } else {
+        const planMsg: IChatMessage = {
+          id: generateId(),
+          role: "assistant",
+          content: "",
+          timestamp: new Date().toISOString(),
+          status: "completed",
+          message_type: "plan_update",
+          plan_phases: event.data.plan_phases,
+        };
+        state.appendMessage(conversationId, planMsg);
+      }
+
+      // U5: Extract collaboration contracts from plan_phases and populate
+      // collaborationState + collaboration_graph message. The backend
+      // includes contracts inside plan_update (not as a separate event).
+      const extractedContracts: Array<
+        ICollaborationContract & { phase_id: string; phase_name: string }
+      > = [];
+      for (const phase of event.data.plan_phases) {
+        if (
+          phase.collaboration_contracts &&
+          phase.collaboration_contracts.length > 0
+        ) {
+          for (const c of phase.collaboration_contracts) {
+            extractedContracts.push({
+              from_expert: c.from_expert,
+              to_expert: c.to_expert,
+              content_description: c.content_description,
+              status: c.status,
+              phase_id: phase.id,
+              phase_name: phase.name,
+            });
+          }
+        }
+      }
+      if (extractedContracts.length > 0) {
+        const collab = ensureCollaborationState(state);
+        collab.contracts = extractedContracts;
+        upsertCollaborationGraph(state, conversationId, collab);
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "team_event",
+            label: "协作契约定义",
+            detail: `${extractedContracts.length} 项契约`,
+            status: "success",
+          },
+          conversationId,
+        );
+      }
+      break;
+    }
+
+    case "team_synthesis": {
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const conv = state.conversations.value.find(
+        (c) => c.id === conversationId,
+      );
+      if (!conv) break;
+      const synthesisMsg: IChatMessage = {
+        id: generateId(),
+        role: "assistant",
+        content: event.data.content || "",
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        message_type: "milestone",
+      };
+      state.appendMessage(conversationId, synthesisMsg);
+      break;
+    }
+
+    case "team_dissolved": {
+      const teamStore = state.getTeamStore();
+      if (teamStore) {
+        teamStore.clearTeam();
+      }
+      // Clear collaboration state — team is done
+      state.collaborationState.value = null;
+      const cid = state.resolveIncomingConvId();
+      if (cid) {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "team_event",
+            label: "专家团队已解散",
+            status: "success",
+          },
+          cid,
+        );
+      }
+      break;
+    }
+
+    case "phase_started": {
+      const teamStore = state.getTeamStore();
+      if (teamStore?.teamState) {
+        teamStore.updatePhaseStatus(event.data.phase_id, "in_progress");
+        const cid = state.resolveIncomingConvId();
+        if (cid) {
+          appendStep(
+            state.streamingStepsByConv,
+            {
+              type: "team_event",
+              label: "阶段开始",
+              detail: `${event.data.phase_name} · ${event.data.assigned_expert}`,
+              status: "running",
+            },
+            cid,
+          );
+        }
+      }
+      break;
+    }
+
+    case "phase_completed": {
+      const teamStore = state.getTeamStore();
+      if (teamStore?.teamState) {
+        teamStore.updatePhaseStatus(
+          event.data.phase_id,
+          "completed",
+          event.data.result_summary,
+        );
+        const cid = state.resolveIncomingConvId();
+        if (cid) {
+          appendStep(
+            state.streamingStepsByConv,
+            {
+              type: "team_event",
+              label: "阶段完成",
+              detail: event.data.phase_name,
+              status: "success",
+            },
+            cid,
+          );
+        }
+      }
+      break;
+    }
+
+    case "phase_failed": {
+      const teamStore = state.getTeamStore();
+      if (teamStore?.teamState) {
+        teamStore.updatePhaseStatus(
+          event.data.phase_id,
+          "failed",
+          event.data.error,
+        );
+        const cid = state.resolveIncomingConvId();
+        if (cid) {
+          appendStep(
+            state.streamingStepsByConv,
+            {
+              type: "team_event",
+              label: "阶段失败",
+              detail: `${event.data.phase_name} · ${event.data.error || ""}`,
+              status: "error",
+            },
+            cid,
+          );
+        }
+      }
+      break;
+    }
+
+    // ── PLAN_EXEC (U4) — phase lifecycle events from ReActEngine ────────
+
+    case "phase_changed": {
+      state.currentPhase.value = event.data.phase;
+      const cid = state.resolveIncomingConvId();
+      if (cid) {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "milestone",
+            label: "阶段切换",
+            detail: `${event.data.previous || "—"} → ${event.data.phase}`,
+            status: "success",
+          },
+          cid,
+        );
+      }
+      break;
+    }
+
+    case "phase_violation": {
+      // Track current phase from violation data.
+      state.currentPhase.value = event.data.current_phase;
+      const violation: PhaseViolation = {
+        phase: event.data.current_phase,
+        tool: event.data.tool,
+        message: event.data.message,
+        violation_kind: event.data.violation_kind,
+        command_preview: event.data.command_preview,
+        ts: Date.now(),
+      };
+      state.phaseViolations.value = [
+        ...state.phaseViolations.value,
+        violation,
+      ].slice(-5);
+      // Toast notification via ant-design-vue message.
+      import("ant-design-vue").then(({ message }) => {
+        message.warning(
+          `[${event.data.current_phase}] 工具 ${event.data.tool} 被拦截: ${event.data.message}`,
+          5,
+        );
+      });
+      const cid = state.resolveIncomingConvId();
+      if (cid) {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "team_event",
+            label: "阶段违规",
+            detail: `${event.data.current_phase} · ${event.data.tool}`,
+            status: "error",
+          },
+          cid,
+        );
+      }
+      break;
+    }
+
+    // ── Board Meeting 模式事件 ────────────────────────────────────────
+
+    case "board_started": {
+      const boardData = event.data;
+      // Initialize board state
+      state.boardState.value = {
+        topic: boardData.topic,
+        experts: boardData.experts.map((e) => ({
+          name: e.name,
+          avatar: e.avatar,
+          color: e.color,
+          is_moderator: e.is_moderator,
+          persona: e.persona,
+        })),
+        max_rounds: boardData.max_rounds,
+        current_round: 0,
+        status: "discussing",
+      };
+      // Push a structured banner message so the renderer can show BoardBannerCard
+      const conversationId = state.resolveIncomingConvId();
+      if (conversationId) {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "board_event",
+            label: "私董会开启",
+            detail: `主题「${boardData.topic}」 · ${boardData.experts.length} 位专家 · 最多 ${boardData.max_rounds} 轮`,
+            status: "success",
+          },
+          conversationId,
+        );
+        const startMsg: IChatMessage = {
+          id: generateId(),
+          role: "assistant",
+          content: `🏛️ 私董会开始：${boardData.topic}`,
+          timestamp: new Date().toISOString(),
+          status: "completed",
+          message_type: "board_started",
+          board_started: boardData,
+          board_round: 0,
+        };
+        state.appendMessage(conversationId, startMsg);
+      }
+      break;
+    }
+
+    case "expert_speech": {
+      const speechData = event.data;
+      // Update current round in board state
+      if (
+        state.boardState.value &&
+        speechData.round > state.boardState.value.current_round
+      ) {
+        state.boardState.value.current_round = speechData.round;
+      }
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const speechMsg: IChatMessage = {
+        id: generateId(),
+        role: "assistant",
+        content: speechData.content || "",
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        expert_name: speechData.expert_name,
+        expert_color: speechData.expert_color,
+        expert_avatar: speechData.expert_avatar,
+        message_type: "board_speech",
+        board_round: speechData.round,
+        board_role: speechData.role,
+      };
+      state.appendMessage(conversationId, speechMsg);
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "board_event",
+          label: `${speechData.expert_avatar || ""} ${speechData.expert_name}`,
+          detail: `第 ${speechData.round} 轮${speechData.role === "moderator" ? " · 主持" : ""}`,
+          status: "success",
+        },
+        conversationId,
+      );
+      break;
+    }
+
+    case "round_summary": {
+      const summaryData = event.data;
+      const conversationId = state.resolveIncomingConvId();
+      if (!conversationId) break;
+      const summaryMsg: IChatMessage = {
+        id: generateId(),
+        role: "assistant",
+        content: summaryData.content || "",
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        expert_name: summaryData.moderator_name,
+        message_type: "board_summary",
+        board_round: summaryData.round,
+        board_role: "summary",
+      };
+      state.appendMessage(conversationId, summaryMsg);
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "board_event",
+          label: `第 ${summaryData.round} 轮小结`,
+          detail: summaryData.continue ? "继续讨论" : "即将结束",
+          status: "success",
+        },
+        conversationId,
+      );
+      break;
+    }
+
+    case "user_intervention": {
+      const interventionData = event.data;
+      const cid = state.resolveIncomingConvId();
+      if (cid) {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "board_event",
+            label: "用户干预",
+            detail: (interventionData.content || "").slice(0, 50),
+            status: "success",
+          },
+          cid,
+        );
+      }
+      break;
+    }
+
+    case "board_concluded": {
+      const conclusionData = event.data;
+      // Update board state to completed
+      if (state.boardState.value) {
+        state.boardState.value.status = "completed";
+      }
+      // Push a structured conclusion message so the renderer can show BoardConclusionCard
+      const conversationId = state.resolveIncomingConvId();
+      if (conversationId) {
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "board_event",
+            label: "私董会结束",
+            detail: `共 ${conclusionData.total_rounds} 轮${conclusionData.error ? " · 异常" : ""}`,
+            status: conclusionData.error ? "error" : "success",
+          },
+          conversationId,
+        );
+        const conclusionMsg: IChatMessage = {
+          id: generateId(),
+          role: "assistant",
+          content: conclusionData.summary || "私董会已结束",
+          timestamp: new Date().toISOString(),
+          status: "completed",
+          message_type: "board_conclusion",
+          board_conclusion: conclusionData,
+          board_round: conclusionData.total_rounds,
+        };
+        state.appendMessage(conversationId, conclusionMsg);
+      }
+      // Clear board state after a short delay to allow UI to update
+      setTimeout(() => {
+        state.boardState.value = null;
+      }, 1000);
+      break;
+    }
+
+    // ── Debate events (U5) ──────────────────────────────────────────
+
+    case "debate_started": {
+      const d = event.data as IDebateStartedData;
+      state.debateState.value = {
+        topic: d.topic,
+        participants: d.participants,
+        current_round: 0,
+        max_rounds: d.max_rounds,
+        status: "debating",
+      };
+      const sessionId = state.resolveIncomingConvId();
+      if (!sessionId) break;
+      state.appendMessage(sessionId, {
+        id: generateId(),
+        role: "assistant",
+        content: d.opening,
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        message_type: "debate_started",
+        debate_topic: d.topic,
+        debate_participants: d.participants,
+        debate_opening: d.opening,
+      });
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "team_event",
+          label: "辩论开始",
+          detail: d.topic.slice(0, 40),
+          status: "success",
+        },
+        sessionId,
+      );
+      break;
+    }
+
+    case "expert_argument": {
+      const d = event.data as IDebateArgumentData;
+      state.debateState.value = {
+        ...(state.debateState.value as NonNullable<DebateState>),
+        current_round: d.round,
+      };
+      const sessionId = state.resolveIncomingConvId();
+      if (!sessionId) break;
+      state.appendMessage(sessionId, {
+        id: generateId(),
+        role: "assistant",
+        content: d.content,
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        message_type: "debate_argument",
+        expert_name: d.expert_name,
+        expert_color: d.expert_color,
+        debate_topic: d.topic,
+        debate_round: d.round,
+      });
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "team_event",
+          label: d.expert_name,
+          detail: `辩论第${d.round}轮`,
+          status: "success",
+        },
+        sessionId,
+      );
+      break;
+    }
+
+    case "debate_round_summary": {
+      const d = event.data as IDebateRoundSummaryData;
+      const sessionId = state.resolveIncomingConvId();
+      if (!sessionId) break;
+      state.appendMessage(sessionId, {
+        id: generateId(),
+        role: "assistant",
+        content: d.content,
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        message_type: "debate_summary",
+        expert_name: d.moderator_name,
+        debate_round: d.round,
+        debate_moderator: d.moderator_name,
+      });
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "team_event",
+          label: d.moderator_name,
+          detail: `第${d.round}轮小结`,
+          status: "success",
+        },
+        sessionId,
+      );
+      break;
+    }
+
+    case "debate_resolved": {
+      const d = event.data as IDebateResolvedData;
+      if (state.debateState.value) {
+        state.debateState.value = {
+          ...state.debateState.value,
+          status: "resolved",
+        };
+      }
+      const sessionId = state.resolveIncomingConvId();
+      if (!sessionId) break;
+      state.appendMessage(sessionId, {
+        id: generateId(),
+        role: "assistant",
+        content: d.conclusion,
+        timestamp: new Date().toISOString(),
+        status: "completed",
+        message_type: "debate_resolved",
+        debate_decision: d.decision,
+        debate_rationale: d.rationale,
+      });
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "team_event",
+          label: "辩论裁决",
+          detail: d.decision,
+          status: "success",
+        },
+        sessionId,
+      );
+      // Clear debate state after 1 second (same pattern as board_concluded)
+      setTimeout(() => {
+        state.debateState.value = null;
+      }, 1000);
+      break;
+    }
+
+    case "team_intervention_ack": {
+      // User intervention was accepted by the server — no message needed,
+      // just a step entry for visibility.
+      const d = event.data as { content: string };
+      const sessionId = state.resolveIncomingConvId();
+      if (!sessionId) break;
+      appendStep(
+        state.streamingStepsByConv,
+        {
+          type: "team_event",
+          label: "用户干预",
+          detail: d.content.slice(0, 40),
+          status: "success",
+        },
+        sessionId,
+      );
+      break;
+    }
+
+    // ── PM Collaboration (U5) 事件 ──────────────────────────────────
+
+    case "collaboration_contract_defined": {
+      const d = event.data as ICollaborationContractDefinedData;
+      const collab = ensureCollaborationState(state);
+      // Replace contracts for this phase, keep contracts from other phases
+      const others = collab.contracts.filter((c) => c.phase_id !== d.phase_id);
+      const newContracts: Array<
+        ICollaborationContract & { phase_id: string; phase_name: string }
+      > = d.contracts.map((c) => ({
+        from_expert: c.from_expert,
+        to_expert: c.to_expert,
+        content_description: c.content_description,
+        status: c.status,
+        phase_id: d.phase_id,
+        phase_name: d.phase_name,
+      }));
+      collab.contracts = [...others, ...newContracts];
+      const sessionId = state.resolveIncomingConvId();
+      if (sessionId) {
+        upsertCollaborationGraph(state, sessionId, collab);
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "team_event",
+            label: "协作契约定义",
+            detail: `${newContracts.length} 项契约 · ${d.phase_name}`,
+            status: "success",
+          },
+          sessionId,
+        );
+      }
+      break;
+    }
+
+    case "collaboration_notice": {
+      const d = event.data as ICollaborationNotice;
+      const collab = ensureCollaborationState(state);
+      // Dedup by output_key to avoid duplicate notices on replay
+      if (
+        !collab.notices.some(
+          (n) =>
+            n.output_key === d.output_key && n.from_expert === d.from_expert,
+        )
+      ) {
+        collab.notices.push(d);
+      }
+      // P2 #11: 更新契约状态 — 将匹配的契约从 pending/delivered 标记为 delivered
+      // 使协作关系图的边状态实时反映交付进度
+      for (const c of collab.contracts) {
+        if (
+          c.from_expert === d.from_expert &&
+          c.to_expert === d.to_expert &&
+          c.status === "pending"
+        ) {
+          c.status = "delivered";
+        }
+      }
+      const sessionId = state.resolveIncomingConvId();
+      if (sessionId) {
+        upsertCollaborationGraph(state, sessionId, collab);
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "team_event",
+            label: "协作通知",
+            detail: `${d.from_expert} → ${d.to_expert}`,
+            status: "success",
+          },
+          sessionId,
+        );
+      }
+      break;
+    }
+
+    case "review_result": {
+      const d = event.data as IReviewResult;
+      const collab = ensureCollaborationState(state);
+      // Replace any existing review for the same phase to keep latest state
+      collab.reviews = collab.reviews.filter((r) => r.phase_id !== d.phase_id);
+      collab.reviews.push(d);
+      const sessionId = state.resolveIncomingConvId();
+      if (sessionId) {
+        // Update the collaboration graph with new review status (node colors)
+        upsertCollaborationGraph(state, sessionId, collab);
+        // Create a dedicated ReviewResultCard message
+        state.appendMessage(sessionId, {
+          id: generateId(),
+          role: "assistant",
+          content: d.feedback || (d.passed ? "验收通过" : "验收未通过"),
+          timestamp: new Date().toISOString(),
+          status: "completed",
+          message_type: "review_result",
+          review_result: d,
+          expert_name: d.expert,
+        });
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "team_event",
+            label: d.passed
+              ? "验收通过"
+              : d.final_status === "failed"
+                ? "验收失败"
+                : "要求返工",
+            detail: d.phase_name,
+            status: d.passed ? "success" : "error",
+          },
+          sessionId,
+        );
+      }
+      break;
+    }
+
+    case "risk_flagged": {
+      const d = event.data as IRiskFlag;
+      const collab = ensureCollaborationState(state);
+      // Dedup by expert + phase + description to avoid duplicates on replay
+      if (
+        !collab.risks.some(
+          (r) =>
+            r.expert === d.expert &&
+            r.phase_id === d.phase_id &&
+            r.risk_description === d.risk_description,
+        )
+      ) {
+        collab.risks.push(d);
+      }
+      const sessionId = state.resolveIncomingConvId();
+      if (sessionId) {
+        // Update the collaboration graph to show risk marker on the node
+        upsertCollaborationGraph(state, sessionId, collab);
+        // Create a dedicated RiskFlagCard message
+        state.appendMessage(sessionId, {
+          id: generateId(),
+          role: "assistant",
+          content: d.risk_description,
+          timestamp: new Date().toISOString(),
+          status: "completed",
+          message_type: "risk_flagged",
+          risk_flag: d,
+          expert_name: d.expert_name || d.expert,
+        });
+        appendStep(
+          state.streamingStepsByConv,
+          {
+            type: "team_event",
+            label: "风险标记",
+            detail: `${d.expert_name || d.expert}: ${d.risk_description.slice(0, 30)}`,
+            status: "error",
+          },
+          sessionId,
+        );
+      }
+      break;
+    }
+
+    // ── Calendar events (KTD-10) ─────────────────────────────────────
+
+    case "calendar_event_created":
+    case "calendar_reminder":
+    case "calendar_invitation":
+    case "calendar_sync_conflict": {
+      state.getCalendarStore().handleWsEvent(event);
+      break;
+    }
+  }
+}
+
+// ── useChatStream composable ───────────────────────────────────────────
+
+export interface ChatStreamDeps {
+  /** Read access to chatStore state. */
+  conversations: Ref<IConversation[]>;
+  currentConversationId: Ref<string | null>;
+  /** ChatStore mutation helpers. */
+  appendMessage: (conversationId: string, message: IChatMessage) => void;
+  updateMessage: (
+    conversationId: string,
+    messageId: string,
+    updates: Partial<IChatMessage>,
+  ) => void;
+  markConversationDone: (conversationId: string) => void;
+  resolveIncomingConvId: () => string;
+  /** Cross-store lazy accessors. */
+  getTeamStore: () => ReturnType<typeof useTeamStore> | null;
+  getCalendarStore: () => ReturnType<typeof useCalendarStore>;
+  getDocumentsStore: () => ReturnType<typeof useDocumentsStore>;
+}
+
+/**
+ * Stream-side composable: owns streaming progress, PLAN_EXEC phase state,
+ * board/debate/collaboration transient state, and the dispatchWsEvent
+ * entry point. State owned here is mutated by `dispatchWsEvent` (the pure
+ * function above); chatStore wires its own state + helpers in as deps.
+ */
+export function useChatStream(deps: ChatStreamDeps) {
+  // --- Stream-owned state ---
+  const streamingStepsByConv = ref<Map<string, IStreamingStep[]>>(new Map());
+  const currentPhase = ref<string | null>(null);
+  const phaseViolations = ref<PhaseViolation[]>([]);
+  const boardState = ref<BoardState | null>(null);
+  const debateState = ref<DebateState | null>(null);
+  const collaborationState = ref<ICollaborationGraphData | null>(null);
+
+  // --- Getters ---
+  const isBoardMode = computed(
+    () => boardState.value !== null && boardState.value.status === "discussing",
+  );
+  const isPlanExec = computed(() => currentPhase.value !== null);
+  const currentStreamingSteps = computed<IStreamingStep[]>(() => {
+    const cid = deps.currentConversationId.value;
+    if (!cid) return [];
+    return streamingStepsByConv.value.get(cid) ?? [];
+  });
+
+  // --- Stream-bound step helpers (close over local streamingStepsByConv) ---
+  function getConvStepsLocal(convId: string): IStreamingStep[] {
+    return getConvSteps(streamingStepsByConv, convId);
+  }
+  function appendStepLocal(
+    step: Omit<IStreamingStep, "id" | "ts">,
+    convId: string = deps.currentConversationId.value ?? "",
+  ): void {
+    appendStep(streamingStepsByConv, step, convId);
+  }
+  function updateLastStepLocal(
+    predicate: (s: IStreamingStep) => boolean,
+    patch: Partial<IStreamingStep>,
+    convId: string = deps.currentConversationId.value ?? "",
+  ): void {
+    updateLastStep(streamingStepsByConv, predicate, patch, convId);
+  }
+  function clearConvStepsLocal(convId: string): void {
+    clearConvSteps(streamingStepsByConv, convId);
+  }
+  function resetPlanExecStateLocal(): void {
+    currentPhase.value = null;
+    phaseViolations.value = [];
+  }
+  /** Clear all stream state — called when the socket closes. */
+  function clearAllStreamState(): void {
+    streamingStepsByConv.value = new Map();
+  }
+
+  // --- Build the ChatStreamState used by dispatchWsEvent ---
+  const state: ChatStreamState = {
+    streamingStepsByConv,
+    currentPhase,
+    phaseViolations,
+    boardState,
+    debateState,
+    collaborationState,
+    conversations: deps.conversations,
+    currentConversationId: deps.currentConversationId,
+    appendMessage: deps.appendMessage,
+    updateMessage: deps.updateMessage,
+    markConversationDone: deps.markConversationDone,
+    resolveIncomingConvId: deps.resolveIncomingConvId,
+    getTeamStore: deps.getTeamStore,
+    getCalendarStore: deps.getCalendarStore,
+    getDocumentsStore: deps.getDocumentsStore,
+  };
+
+  /** Dispatch a WsServerMessage through the stream. */
+  function dispatch(event: WsServerMessage): void {
+    dispatchWsEvent(event, state);
+  }
+
+  return {
+    // Stream-owned state
+    streamingStepsByConv,
+    currentPhase,
+    phaseViolations,
+    boardState,
+    debateState,
+    collaborationState,
+    // Getters
+    isBoardMode,
+    isPlanExec,
+    currentStreamingSteps,
+    // Step helpers
+    getConvSteps: getConvStepsLocal,
+    appendStep: appendStepLocal,
+    updateLastStep: updateLastStepLocal,
+    clearConvSteps: clearConvStepsLocal,
+    resetPlanExecState: resetPlanExecStateLocal,
+    clearAllStreamState,
+    // Dispatcher
+    dispatch,
+    // Raw state bag (for tests / advanced consumers)
+    state,
+  };
+}
diff --git a/src/agentkit/server/frontend/src/views/ChatView.vue b/src/agentkit/server/frontend/src/views/ChatView.vue
index b22ad64..f77b72e 100644
--- a/src/agentkit/server/frontend/src/views/ChatView.vue
+++ b/src/agentkit/server/frontend/src/views/ChatView.vue
@@ -103,7 +103,7 @@ import {
   CloseOutlined,
   ThunderboltOutlined,
 } from '@ant-design/icons-vue'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore } from '@/stores/chatStore'
 import ChatSidebar from '@/components/chat/ChatSidebar.vue'
 import ChatMessage from '@/components/chat/ChatMessage.vue'
 import ChatInput from '@/components/chat/ChatInput.vue'
diff --git a/src/agentkit/server/frontend/tests/unit/stores/chat-phase.test.ts b/src/agentkit/server/frontend/tests/unit/stores/chat-phase.test.ts
index 7e86aa5..d576851 100644
--- a/src/agentkit/server/frontend/tests/unit/stores/chat-phase.test.ts
+++ b/src/agentkit/server/frontend/tests/unit/stores/chat-phase.test.ts
@@ -40,7 +40,7 @@ describe('chat store — PLAN_EXEC phase state (U4)', () => {
   })
 
   it('exposes currentPhase, phaseViolations, isPlanExec with initial values', async () => {
-    const { useChatStore } = await import('@/stores/chat')
+    const { useChatStore } = await import('@/stores/chatStore')
     const store = useChatStore()
     expect(store.currentPhase).toBeNull()
     expect(store.phaseViolations).toEqual([])
@@ -48,7 +48,7 @@ describe('chat store — PLAN_EXEC phase state (U4)', () => {
   })
 
   it('isPlanExec is true when currentPhase is set', async () => {
-    const { useChatStore } = await import('@/stores/chat')
+    const { useChatStore } = await import('@/stores/chatStore')
     const store = useChatStore()
     store.currentPhase = 'planning'
     expect(store.isPlanExec).toBe(true)
@@ -59,7 +59,7 @@ describe('chat store — PLAN_EXEC phase state (U4)', () => {
     // the cap is enforced inside the case handler, not as a setter.
     // This test verifies the array is accessible; the cap-at-5 behavior
     // is exercised through handleWsMessage in the U5 E2E test.
-    const { useChatStore } = await import('@/stores/chat')
+    const { useChatStore } = await import('@/stores/chatStore')
     const store = useChatStore()
     for (let i = 0; i < 7; i++) {
       store.phaseViolations = [
diff --git a/src/agentkit/server/frontend/tests/unit/stores/chatSocket.test.ts b/src/agentkit/server/frontend/tests/unit/stores/chatSocket.test.ts
new file mode 100644
index 0000000..71d8c34
--- /dev/null
+++ b/src/agentkit/server/frontend/tests/unit/stores/chatSocket.test.ts
@@ -0,0 +1,255 @@
+/**
+ * Unit tests for chatSocket (U5).
+ *
+ * Covers the exported pure function `resolveIncomingConvId` (heuristic
+ * conversation routing) and the `useChatSocket` composable's lifecycle
+ * behaviors (heartbeat setup, intentional disconnect suppression, reconnect
+ * scheduling). WebSocket injection is mocked at the apiClient level.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { useChatSocket, resolveIncomingConvId } from '@/stores/chatSocket'
+import { apiClient } from '@/api/client'
+import type { WsServerMessage } from '@/api/types'
+
+// happy-dom does not expose numeric WebSocket constants on the global, but
+// chatSocket.ts references `WebSocket.OPEN` / `WebSocket.CONNECTING` /
+// `WebSocket.CLOSED`. Install a minimal stub before any test runs.
+;(globalThis as unknown as { WebSocket: unknown }).WebSocket = {
+  CONNECTING: 0,
+  OPEN: 1,
+  CLOSING: 2,
+  CLOSED: 3,
+}
+
+// ── Mock apiClient.createWebSocket ────────────────────────────────────
+
+const WS_CONNECTING = 0
+const WS_OPEN = 1
+const WS_CLOSED = 3
+
+interface FakeSocket {
+  onopen: (() => void) | null
+  onmessage: ((e: { data: string }) => void) | null
+  onclose: (() => void) | null
+  onerror: ((e: unknown) => void) | null
+  readyState: number
+  send: ReturnType<typeof vi.fn>
+  close: ReturnType<typeof vi.fn>
+}
+
+function createFakeSocket(): FakeSocket {
+  let state = WS_CONNECTING
+  return {
+    onopen: null,
+    onmessage: null,
+    onclose: null,
+    onerror: null,
+    readyState: state,
+    send: vi.fn(),
+    close: vi.fn(() => {
+      state = WS_CLOSED
+      // Reflect the new state on the returned object so callers see CLOSED.
+      ;(fakeSocket as FakeSocket).readyState = WS_CLOSED
+    }),
+  }
+}
+
+let fakeSocket: FakeSocket
+
+vi.mock('@/api/client', () => ({
+  apiClient: {
+    createWebSocket: vi.fn(() => {
+      fakeSocket = createFakeSocket()
+      return fakeSocket
+    }),
+  },
+}))
+
+// ── resolveIncomingConvId (pure) ─────────────────────────────────────
+
+describe('resolveIncomingConvId (pure)', () => {
+  it('returns currentConversationId when it is pending', () => {
+    const id = resolveIncomingConvId(
+      'current',
+      new Set(['current', 'other']),
+      new Map([
+        ['current', 100],
+        ['other', 200],
+      ]),
+    )
+    expect(id).toBe('current')
+  })
+
+  it('falls back to most-recently-used pending conversation', () => {
+    const id = resolveIncomingConvId(
+      null,
+      new Set(['a', 'b']),
+      new Map([
+        ['a', 100],
+        ['b', 300],
+      ]),
+    )
+    expect(id).toBe('b')
+  })
+
+  it('skips conversations that are not currently pending', () => {
+    const id = resolveIncomingConvId(
+      null,
+      new Set(['a']),
+      new Map([
+        ['a', 100],
+        ['stale', 999],
+      ]),
+    )
+    expect(id).toBe('a')
+  })
+
+  it('returns currentConversationId when no pending conv exists', () => {
+    const id = resolveIncomingConvId(
+      'current',
+      new Set(),
+      new Map([['old', 100]]),
+    )
+    expect(id).toBe('current')
+  })
+
+  it('returns empty string when nothing resolves', () => {
+    const id = resolveIncomingConvId(null, new Set(), new Map())
+    expect(id).toBe('')
+  })
+})
+
+// ── useChatSocket lifecycle ──────────────────────────────────────────
+
+describe('useChatSocket', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    ;(apiClient.createWebSocket as ReturnType<typeof vi.fn>).mockClear()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  function makeSocket() {
+    const currentConversationId = ref<string | null>('c1')
+    const pendingConversations = ref<Set<string>>(new Set())
+    const pendingLastUsedAt = ref<Map<string, number>>(new Map())
+    const onMessage = vi.fn()
+    const onReconnect = vi.fn()
+    const onDisconnect = vi.fn()
+
+    const socket = useChatSocket({
+      currentConversationId,
+      pendingConversations,
+      pendingLastUsedAt,
+      onMessage,
+      onReconnect,
+      onDisconnect,
+    })
+    return { socket, currentConversationId, pendingConversations, pendingLastUsedAt, onMessage, onReconnect, onDisconnect }
+  }
+
+  it('connectWebSocket: opens socket and fires onReconnect on open', () => {
+    const { socket, onReconnect } = makeSocket()
+    socket.connectWebSocket()
+    expect(fakeSocket.readyState).toBe(WS_CONNECTING)
+    fakeSocket.readyState = WS_OPEN
+    fakeSocket.onopen?.()
+    expect(socket.isWsConnected.value).toBe(true)
+    expect(onReconnect).toHaveBeenCalled()
+  })
+
+  it('heartbeat: sends ping every 30s while open', () => {
+    const { socket } = makeSocket()
+    socket.connectWebSocket()
+    fakeSocket.readyState = WS_OPEN
+    fakeSocket.onopen?.()
+    expect(fakeSocket.send).not.toHaveBeenCalled()
+    vi.advanceTimersByTime(30000)
+    expect(fakeSocket.send).toHaveBeenCalledWith(JSON.stringify({ type: 'ping' }))
+    vi.advanceTimersByTime(30000)
+    expect(fakeSocket.send).toHaveBeenCalledTimes(2)
+  })
+
+  it('onmessage: parses JSON and forwards to onMessage callback', () => {
+    const { socket, onMessage } = makeSocket()
+    socket.connectWebSocket()
+    fakeSocket.readyState = WS_OPEN
+    fakeSocket.onopen?.()
+    const event: WsServerMessage = { type: 'pong' }
+    fakeSocket.onmessage?.({ data: JSON.stringify(event) })
+    expect(onMessage).toHaveBeenCalledWith(event)
+  })
+
+  it('onmessage: swallows malformed JSON without crashing', () => {
+    const { socket, onMessage } = makeSocket()
+    socket.connectWebSocket()
+    fakeSocket.readyState = WS_OPEN
+    fakeSocket.onopen?.()
+    fakeSocket.onmessage?.({ data: 'not-json' })
+    expect(onMessage).not.toHaveBeenCalled()
+  })
+
+  it('onclose: schedules reconnect after 3s when not intentional', () => {
+    const { socket, pendingConversations, pendingLastUsedAt, onDisconnect } = makeSocket()
+    socket.connectWebSocket()
+    fakeSocket.readyState = WS_OPEN
+    fakeSocket.onopen?.()
+    pendingConversations.value.add('c1')
+    pendingLastUsedAt.value.set('c1', 1)
+
+    fakeSocket.readyState = WS_CLOSED
+    fakeSocket.onclose?.()
+
+    expect(socket.isWsConnected.value).toBe(false)
+    expect(onDisconnect).toHaveBeenCalled()
+    // P2 #21 fix: pending state cleared on close so UI doesn't stay stuck.
+    expect(pendingConversations.value.has('c1')).toBe(false)
+    // Reconnect not yet — 3s delay.
+    const createWs = apiClient.createWebSocket as ReturnType<typeof vi.fn>
+    expect(createWs).toHaveBeenCalledTimes(1)
+    vi.advanceTimersByTime(3000)
+    expect(createWs).toHaveBeenCalledTimes(2)
+  })
+
+  it('disconnectWebSocket: suppresses auto-reconnect', () => {
+    const { socket } = makeSocket()
+    socket.connectWebSocket()
+    fakeSocket.readyState = WS_OPEN
+    fakeSocket.onopen?.()
+
+    socket.disconnectWebSocket()
+    expect(fakeSocket.close).toHaveBeenCalled()
+    expect(socket.isWsConnected.value).toBe(false)
+
+    const createWs = apiClient.createWebSocket as ReturnType<typeof vi.fn>
+    const callsBefore = createWs.mock.calls.length
+    // Even if onclose fires later, no reconnect should happen.
+    fakeSocket.readyState = WS_CLOSED
+    fakeSocket.onclose?.()
+    vi.advanceTimersByTime(10000)
+    expect(createWs.mock.calls.length).toBe(callsBefore)
+  })
+
+  it('connectWebSocket: skips when socket already OPEN', () => {
+    const { socket } = makeSocket()
+    socket.connectWebSocket()
+    fakeSocket.readyState = WS_OPEN
+    fakeSocket.onopen?.()
+    const firstSocket = fakeSocket
+
+    socket.connectWebSocket() // should be a no-op
+    expect(fakeSocket).toBe(firstSocket)
+  })
+
+  it('connectWebSocket: skips when socket is CONNECTING', () => {
+    const { socket } = makeSocket()
+    socket.connectWebSocket()
+    // fakeSocket starts in CONNECTING state
+    const firstSocket = fakeSocket
+    socket.connectWebSocket()
+    expect(fakeSocket).toBe(firstSocket)
+  })
+})
diff --git a/src/agentkit/server/frontend/tests/unit/stores/chatStream.test.ts b/src/agentkit/server/frontend/tests/unit/stores/chatStream.test.ts
new file mode 100644
index 0000000..86f72a1
--- /dev/null
+++ b/src/agentkit/server/frontend/tests/unit/stores/chatStream.test.ts
@@ -0,0 +1,563 @@
+/**
+ * Unit tests for chatStream.dispatchWsEvent (U5).
+ *
+ * dispatchWsEvent is a pure function over ChatStreamState, so we construct
+ * a fixture state bag (no Pinia required) and assert state mutations
+ * directly. Covers the major WS event branches: connected, routing, step
+ * (token/thinking/tool_call/tool_result/final_answer), result, error,
+ * team_formed, expert_step, expert_result, plan_update, phase_changed,
+ * phase_violation, board_started.
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref, type Ref } from 'vue'
+import {
+  dispatchWsEvent,
+  type ChatStreamState,
+  type IStreamingStep,
+} from '@/stores/chatStream'
+import type {
+  IChatMessage,
+  IConversation,
+  IExpertTeamState,
+  ITeamPlanPhase,
+  WsServerMessage,
+} from '@/api/types'
+
+// Mock ant-design-vue so phase_violation's dynamic import doesn't blow up.
+vi.mock('ant-design-vue', () => ({
+  message: { warning: vi.fn() },
+}))
+
+// Mock isDocumentMeta to true so tool_result document payloads are accepted.
+vi.mock('@/api/documents', () => ({
+  isDocumentMeta: vi.fn(() => true),
+}))
+
+interface Fixture {
+  state: ChatStreamState
+  conversations: Ref<IConversation[]>
+  currentConversationId: Ref<string | null>
+  appendMessageSpy: ReturnType<typeof vi.fn>
+  updateMessageSpy: ReturnType<typeof vi.fn>
+  markConversationDoneSpy: ReturnType<typeof vi.fn>
+  teamStore: {
+    teamState: IExpertTeamState | null
+    setTeamState: ReturnType<typeof vi.fn>
+    updatePhases: ReturnType<typeof vi.fn>
+    updatePhaseStatus: ReturnType<typeof vi.fn>
+    clearTeam: ReturnType<typeof vi.fn>
+  }
+  calendarStore: { handleWsEvent: ReturnType<typeof vi.fn> }
+  documentsStore: { addDocument: ReturnType<typeof vi.fn> }
+}
+
+function createFixture(convId: string = 'conv-1'): Fixture {
+  const conversations = ref<IConversation[]>([
+    {
+      id: convId,
+      title: '新对话',
+      messages: [],
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    },
+  ])
+  const currentConversationId = ref<string | null>(convId)
+  const appendMessageSpy = vi.fn((cid: string, msg: IChatMessage) => {
+    const conv = conversations.value.find((c) => c.id === cid)
+    if (conv) conv.messages.push(msg)
+  })
+  const updateMessageSpy = vi.fn(
+    (cid: string, mid: string, updates: Partial<IChatMessage>) => {
+      const conv = conversations.value.find((c) => c.id === cid)
+      if (!conv) return
+      const msg = conv.messages.find((m) => m.id === mid)
+      if (msg) Object.assign(msg, updates)
+    },
+  )
+  const markConversationDoneSpy = vi.fn()
+
+  const teamStore = {
+    teamState: null as IExpertTeamState | null,
+    setTeamState: vi.fn(),
+    updatePhases: vi.fn(),
+    updatePhaseStatus: vi.fn(),
+    clearTeam: vi.fn(),
+  }
+  const calendarStore = { handleWsEvent: vi.fn() }
+  const documentsStore = { addDocument: vi.fn() }
+
+  // The deps bag types expect full Pinia Store<...> instances; the fixture
+  // only needs the slice of methods dispatchWsEvent actually calls, so we
+  // cast through unknown to satisfy the type without pulling in the real
+  // stores (which would drag in their own deps and side effects).
+  const state: ChatStreamState = {
+    streamingStepsByConv: ref(new Map<string, IStreamingStep[]>()),
+    currentPhase: ref<string | null>(null),
+    phaseViolations: ref([]),
+    boardState: ref(null),
+    debateState: ref(null),
+    collaborationState: ref(null),
+    conversations,
+    currentConversationId,
+    appendMessage: appendMessageSpy,
+    updateMessage: updateMessageSpy,
+    markConversationDone: markConversationDoneSpy,
+    resolveIncomingConvId: () => currentConversationId.value ?? '',
+    getTeamStore: () => teamStore as unknown as ChatStreamState["getTeamStore"] extends () => infer R ? R : never,
+    getCalendarStore: () => calendarStore as unknown as ChatStreamState["getCalendarStore"] extends () => infer R ? R : never,
+    getDocumentsStore: () => documentsStore as unknown as ChatStreamState["getDocumentsStore"] extends () => infer R ? R : never,
+  }
+
+  return {
+    state,
+    conversations,
+    currentConversationId,
+    appendMessageSpy,
+    updateMessageSpy,
+    markConversationDoneSpy,
+    teamStore,
+    calendarStore,
+    documentsStore,
+  }
+}
+
+/** Push a pending assistant placeholder so routing/step cases have a target. */
+function seedAssistant(f: Fixture, id = 'a1'): IChatMessage {
+  const msg: IChatMessage = {
+    id,
+    role: 'assistant',
+    content: '',
+    timestamp: new Date().toISOString(),
+    status: 'pending',
+  }
+  f.conversations.value[0].messages.push(msg)
+  return msg
+}
+
+describe('dispatchWsEvent', () => {
+  let f: Fixture
+  beforeEach(() => {
+    f = createFixture()
+  })
+
+  // ── 1. connected ───────────────────────────────────────────────────
+  it('connected: marks local conv as synced and adopts server conversation_id', () => {
+    f.conversations.value[0].is_local = true
+    f.currentConversationId.value = 'local-1'
+    f.conversations.value[0].id = 'local-1'
+
+    dispatchWsEvent(
+      { type: 'connected', conversation_id: 'server-1' },
+      f.state,
+    )
+
+    expect(f.conversations.value[0].is_local).toBe(false)
+    expect(f.conversations.value[0].id).toBe('server-1')
+    expect(f.currentConversationId.value).toBe('server-1')
+  })
+
+  // ── 2. routing ─────────────────────────────────────────────────────
+  it('routing: tags last assistant message with skill/confidence/method', () => {
+    const a = seedAssistant(f)
+    dispatchWsEvent(
+      { type: 'routing', skill: 'code_review', confidence: 0.92, method: 'react' },
+      f.state,
+    )
+    expect(a.matched_skill).toBe('code_review')
+    expect(a.confidence).toBe(0.92)
+    expect(a.routing_method).toBe('react')
+    // A "routing" streaming step should also be appended.
+    const steps = f.state.streamingStepsByConv.value.get('conv-1') ?? []
+    expect(steps.some((s) => s.type === 'routing')).toBe(true)
+  })
+
+  // ── 3. step: token ─────────────────────────────────────────────────
+  it('step(token): creates a streaming step and accumulates counter', () => {
+    seedAssistant(f)
+    dispatchWsEvent(
+      {
+        type: 'step',
+        data: {
+          event_type: 'token',
+          step: 1,
+          data: { delta: 'hello' },
+          timestamp: new Date().toISOString(),
+        },
+      },
+      f.state,
+    )
+    dispatchWsEvent(
+      {
+        type: 'step',
+        data: {
+          event_type: 'token',
+          step: 2,
+          data: { delta: 'world' },
+          timestamp: new Date().toISOString(),
+        },
+      },
+      f.state,
+    )
+    const steps = f.state.streamingStepsByConv.value.get('conv-1') ?? []
+    const streamingSteps = steps.filter((s) => s.type === 'streaming')
+    expect(streamingSteps).toHaveLength(1)
+    expect(streamingSteps[0].counter).toBeGreaterThanOrEqual(10)
+  })
+
+  // ── 4. step: thinking ──────────────────────────────────────────────
+  it('step(thinking): appends thinking step and accumulates thinking content', () => {
+    const a = seedAssistant(f)
+    dispatchWsEvent(
+      {
+        type: 'step',
+        data: {
+          event_type: 'thinking',
+          step: 1,
+          data: { content: 'hmm' },
+          timestamp: new Date().toISOString(),
+        },
+      },
+      f.state,
+    )
+    dispatchWsEvent(
+      {
+        type: 'step',
+        data: {
+          event_type: 'thinking',
+          step: 2,
+          data: { content: ' hmm2' },
+          timestamp: new Date().toISOString(),
+        },
+      },
+      f.state,
+    )
+    expect(a.thinking).toBe('hmm hmm2')
+    const steps = f.state.streamingStepsByConv.value.get('conv-1') ?? []
+    expect(steps.some((s) => s.type === 'thinking')).toBe(true)
+  })
+
+  // ── 5. step: tool_call + tool_result ───────────────────────────────
+  it('step(tool_call then tool_result): tracks tool_calls on assistant message', () => {
+    const a = seedAssistant(f)
+    dispatchWsEvent(
+      {
+        type: 'step',
+        data: {
+          event_type: 'tool_call',
+          step: 1,
+          data: { tool_name: 'search', arguments: { q: 'x' } },
+          timestamp: new Date().toISOString(),
+        },
+      },
+      f.state,
+    )
+    expect(a.tool_calls).toHaveLength(1)
+    expect(a.tool_calls?.[0].name).toBe('search')
+    expect(a.tool_calls?.[0].status).toBe('running')
+
+    dispatchWsEvent(
+      {
+        type: 'step',
+        data: {
+          event_type: 'tool_result',
+          step: 2,
+          data: { tool_name: 'search', output: 'result', duration: 12 },
+          timestamp: new Date().toISOString(),
+        },
+      },
+      f.state,
+    )
+    expect(a.tool_calls?.[0].status).toBe('completed')
+    expect(a.tool_calls?.[0].result).toBe('result')
+    expect(a.tool_calls?.[0].duration).toBe(12)
+  })
+
+  // ── 6. result ──────────────────────────────────────────────────────
+  it('result: finalizes assistant content, clears steps, marks done', () => {
+    const a = seedAssistant(f)
+    dispatchWsEvent(
+      { type: 'result', data: { message: 'final answer' } },
+      f.state,
+    )
+    expect(a.content).toBe('final answer')
+    expect(a.status).toBe('completed')
+    expect(f.markConversationDoneSpy).toHaveBeenCalledWith('conv-1')
+    expect(f.state.streamingStepsByConv.value.has('conv-1')).toBe(false)
+  })
+
+  // ── 7. error ───────────────────────────────────────────────────────
+  it('error: mutates last assistant to error state and marks done', () => {
+    const a = seedAssistant(f)
+    dispatchWsEvent(
+      { type: 'error', data: { message: 'boom' } },
+      f.state,
+    )
+    expect(a.message_type).toBe('error')
+    expect(a.status).toBe('error')
+    expect(a.error_detail).toBe('boom')
+    expect(f.markConversationDoneSpy).toHaveBeenCalledWith('conv-1')
+  })
+
+  it('error: appends a new error message when no assistant placeholder exists', () => {
+    f.conversations.value[0].messages = []
+    dispatchWsEvent(
+      { type: 'error', data: { message: 'no-assistant' } },
+      f.state,
+    )
+    expect(f.conversations.value[0].messages).toHaveLength(1)
+    const m = f.conversations.value[0].messages[0]
+    expect(m.message_type).toBe('error')
+    expect(m.error_detail).toBe('no-assistant')
+  })
+
+  // ── 8. team_formed ─────────────────────────────────────────────────
+  it('team_formed: resets collaborationState and forwards to teamStore', () => {
+    f.state.collaborationState.value = {
+      contracts: [],
+      notices: [],
+      reviews: [],
+      risks: [],
+    }
+    const teamData: IExpertTeamState = {
+      team_id: 't1',
+      status: 'forming',
+      experts: [
+        {
+          id: 'e1',
+          name: 'Lead',
+          persona: '',
+          avatar: '',
+          color: '',
+          is_lead: true,
+          bound_skills: [],
+          status: 'active',
+        },
+      ],
+      plan_phases: [],
+      lead_expert: 'e1',
+    }
+    dispatchWsEvent({ type: 'team_formed', data: teamData }, f.state)
+    expect(f.state.collaborationState.value).toBeNull()
+    expect(f.teamStore.setTeamState).toHaveBeenCalledWith(teamData)
+    const steps = f.state.streamingStepsByConv.value.get('conv-1') ?? []
+    expect(steps.some((s) => s.type === 'team_event')).toBe(true)
+  })
+
+  // ── 9. expert_step ─────────────────────────────────────────────────
+  it('expert_step: appends an expert-tagged assistant message and step', () => {
+    dispatchWsEvent(
+      {
+        type: 'expert_step',
+        data: {
+          expert_id: 'e1',
+          expert_name: 'Alice',
+          expert_color: '#f00',
+          content: 'partial',
+          step: '1',
+        },
+      },
+      f.state,
+    )
+    const msgs = f.conversations.value[0].messages
+    expect(msgs).toHaveLength(1)
+    expect(msgs[0].expert_id).toBe('e1')
+    expect(msgs[0].expert_name).toBe('Alice')
+    expect(msgs[0].content).toBe('partial')
+    // Same-expert follow-up accumulates into the existing pending message.
+    dispatchWsEvent(
+      {
+        type: 'expert_step',
+        data: {
+          expert_id: 'e1',
+          expert_name: 'Alice',
+          expert_color: '#f00',
+          content: '+more',
+          step: '2',
+        },
+      },
+      f.state,
+    )
+    expect(msgs).toHaveLength(1)
+    expect(msgs[0].content).toBe('partial+more')
+  })
+
+  // ── 10. expert_result ──────────────────────────────────────────────
+  it('expert_result: appends a completed expert-tagged message', () => {
+    dispatchWsEvent(
+      {
+        type: 'expert_result',
+        data: {
+          expert_id: 'e1',
+          expert_name: 'Alice',
+          expert_color: '#f00',
+          content: 'done',
+        },
+      },
+      f.state,
+    )
+    const msgs = f.conversations.value[0].messages
+    expect(msgs).toHaveLength(1)
+    expect(msgs[0].status).toBe('completed')
+    expect(msgs[0].expert_id).toBe('e1')
+    expect(msgs[0].content).toBe('done')
+  })
+
+  // ── 11. plan_update ────────────────────────────────────────────────
+  it('plan_update: forwards phases to teamStore and upserts plan_update message', () => {
+    const phases: ITeamPlanPhase[] = [
+      {
+        id: 'p1',
+        name: 'Phase 1',
+        assigned_expert: 'e1',
+        depends_on: [],
+        status: 'pending',
+      },
+    ]
+    dispatchWsEvent({ type: 'plan_update', data: { plan_phases: phases } }, f.state)
+    expect(f.teamStore.updatePhases).toHaveBeenCalledWith(phases)
+    const msgs = f.conversations.value[0].messages
+    expect(msgs).toHaveLength(1)
+    expect(msgs[0].message_type).toBe('plan_update')
+    expect(msgs[0].plan_phases).toStrictEqual(phases)
+    // A second plan_update should update the existing message in place.
+    dispatchWsEvent({ type: 'plan_update', data: { plan_phases: phases } }, f.state)
+    expect(msgs).toHaveLength(1)
+  })
+
+  // ── 12. plan_update with collaboration_contracts ───────────────────
+  it('plan_update: extracts collaboration_contracts into collaborationState', () => {
+    const phases: ITeamPlanPhase[] = [
+      {
+        id: 'p1',
+        name: 'Phase 1',
+        assigned_expert: 'e1',
+        depends_on: [],
+        status: 'pending',
+        collaboration_contracts: [
+          {
+            from_expert: 'e1',
+            to_expert: 'e2',
+            content_description: 'interface spec',
+            status: 'pending',
+          },
+        ],
+      },
+    ]
+    dispatchWsEvent({ type: 'plan_update', data: { plan_phases: phases } }, f.state)
+    expect(f.state.collaborationState.value).not.toBeNull()
+    expect(f.state.collaborationState.value?.contracts).toHaveLength(1)
+    expect(f.state.collaborationState.value?.contracts[0].phase_id).toBe('p1')
+    // A collaboration_graph message should also be upserted.
+    const graphMsg = f.conversations.value[0].messages.find(
+      (m) => m.message_type === 'collaboration_graph',
+    )
+    expect(graphMsg).toBeDefined()
+  })
+
+  // ── 13. phase_changed (PLAN_EXEC) ──────────────────────────────────
+  it('phase_changed: sets currentPhase and appends a milestone step', () => {
+    dispatchWsEvent(
+      { type: 'phase_changed', data: { phase: 'planning', previous: 'init' } },
+      f.state,
+    )
+    expect(f.state.currentPhase.value).toBe('planning')
+    const steps = f.state.streamingStepsByConv.value.get('conv-1') ?? []
+    expect(steps.some((s) => s.type === 'milestone' && s.label === '阶段切换')).toBe(true)
+  })
+
+  // ── 14. phase_violation (PLAN_EXEC) ────────────────────────────────
+  it('phase_violation: records violation (capped at 5) and sets currentPhase', () => {
+    for (let i = 0; i < 7; i++) {
+      dispatchWsEvent(
+        {
+          type: 'phase_violation',
+          data: {
+            current_phase: 'planning',
+            tool: `tool_${i}`,
+            message: `blocked ${i}`,
+            violation_kind: 'tool_not_allowed',
+          },
+        },
+        f.state,
+      )
+    }
+    expect(f.state.currentPhase.value).toBe('planning')
+    expect(f.state.phaseViolations.value).toHaveLength(5)
+    // The most recent violation should be the last one we sent.
+    expect(f.state.phaseViolations.value[4].tool).toBe('tool_6')
+  })
+
+  // ── 15. board_started ──────────────────────────────────────────────
+  it('board_started: initializes boardState and appends board_started message', () => {
+    dispatchWsEvent(
+      {
+        type: 'board_started',
+        data: {
+          team_id: 't1',
+          topic: 'roadmap',
+          experts: [
+            {
+              name: 'Mod',
+              avatar: '🦊',
+              color: '#f00',
+              is_moderator: true,
+              persona: 'moderator',
+            },
+          ],
+          max_rounds: 3,
+        },
+      },
+      f.state,
+    )
+    expect(f.state.boardState.value).not.toBeNull()
+    expect(f.state.boardState.value?.topic).toBe('roadmap')
+    expect(f.state.boardState.value?.current_round).toBe(0)
+    expect(f.state.boardState.value?.status).toBe('discussing')
+    const msgs = f.conversations.value[0].messages
+    expect(msgs.some((m) => m.message_type === 'board_started')).toBe(true)
+  })
+
+  // ── 16. team_dissolved ─────────────────────────────────────────────
+  it('team_dissolved: clears teamStore and collaborationState', () => {
+    f.state.collaborationState.value = {
+      contracts: [],
+      notices: [],
+      reviews: [],
+      risks: [],
+    }
+    dispatchWsEvent(
+      { type: 'team_dissolved', data: { team_id: 't1' } },
+      f.state,
+    )
+    expect(f.teamStore.clearTeam).toHaveBeenCalled()
+    expect(f.state.collaborationState.value).toBeNull()
+  })
+
+  // ── 17. calendar events route to calendarStore ─────────────────────
+  it('calendar_event_created: delegates to calendarStore.handleWsEvent', () => {
+    const event = {
+      type: 'calendar_event_created',
+      data: {
+        event: {
+          id: 'ev1',
+          title: 'standup',
+        },
+      },
+    } as unknown as WsServerMessage
+    dispatchWsEvent(event, f.state)
+    expect(f.calendarStore.handleWsEvent).toHaveBeenCalledWith(event)
+  })
+
+  // ── 18. resolveIncomingConvId fallback (no pending conv) ───────────
+  it('routing: skips mutation when conversation cannot be resolved', () => {
+    f.currentConversationId.value = null
+    f.state.resolveIncomingConvId = () => ''
+    const a = seedAssistant(f)
+    dispatchWsEvent(
+      { type: 'routing', skill: 's', confidence: 0.5, method: 'm' },
+      f.state,
+    )
+    expect(a.matched_skill).toBeUndefined()
+  })
+})