fix(agent-chat): 聊天状态按 agent 隔离，切换不再串台/互相阻塞

AgentChat.vue 之前把 sending/streaming/streamContent/thinkingText/ thinkingContent/subAgents/acpLog/messages/activeConvId 全部做成页面级单例 ref，不区分是哪个 agent 的。切 agent 时既不取消上一个还在跑的读流循环，也不重置这些状态，导致三个连环症状：①思考中/等待回复横幅带着切过去；②只要有任意一个 agent 在跑，所有 agent 的输入框都被同一个 sending 锁成"等待回复中"；③A 流式输出时切去看 B，A 的内容被当成 B 的渲染，A 说完那句话直接被 push 进 B 的消息列表。改为按 agentId 存一份 reactive Map（chatStates），模板读"当前选中 agent"那一份 slice；handleSend/handleEvent 认发起时捕获的 requestAgentId 写自己的 slice，不认 "用户现在选中的是谁"。switchAgent 不再无条件清空目标 agent 状态——只有它空闲时才去刷新/定位会话，正在生成就原样展示缓存，回切能看到完整后台进度。真机验证：向 Master 发消息流式生成期间切到另一个 agent，输入框未被锁定、无状态污染，切回 Master 能看到完整正确的输出。顺带把已经在这个文件里的一处未提交小改动（agent 列表排序：Master 置顶）一并收进这次提交，不是本次改动的一部分。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

fix(agent-chat): 聊天状态按 agent 隔离，切换不再串台/互相阻塞
AgentChat.vue 之前把 sending/streaming/streamContent/thinkingText/ thinkingContent/subAgents/acpLog/messages/activeConvId 全部做成页面级单例 ref，不区分是哪个 agent 的。切 agent 时既不取消上一个还在跑的读流循环，也不重置这些状态，导致三个连环症状：①思考中/等待回复横幅带着切过去；②只要有任意一个 agent 在跑，所有 agent 的输入框都被同一个 sending 锁成"等待回复中"；③A 流式输出时切去看 B，A 的内容被当成 B 的渲染，A 说完那句话直接被 push 进 B 的消息列表。改为按 agentId 存一份 reactive Map（chatStates），模板读"当前选中 agent"那一份 slice；handleSend/handleEvent 认发起时捕获的 requestAgentId 写自己的 slice，不认 "用户现在选中的是谁"。switchAgent 不再无条件清空目标 agent 状态——只有它空闲时才去刷新/定位会话，正在生成就原样展示缓存，回切能看到完整后台进度。真机验证：向 Master 发消息流式生成期间切到另一个 agent，输入框未被锁定、无状态污染，切回 Master 能看到完整正确的输出。顺带把已经在这个文件里的一处未提交小改动（agent 列表排序：Master 置顶）一并收进这次提交，不是本次改动的一部分。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
yibo · 宜博
1 parent d48457ac
Showing 1 changed file with 161 additions and 125 deletions
web/src/views/AgentChat.vue
@@ -58,7 +58,7 @@
               v-for="conv in filteredConversations"
               :key="conv.conversationId || conv.id"
               class="conv-card"
-              :class="{ active: activeConvId === (conv.conversationId || conv.id) }"
+              :class="{ active: chatState.activeConvId === (conv.conversationId || conv.id) }"
               @click="switchConversation(conv.conversationId || conv.id)"
             >
               <div class="conv-card-top">
@@ -86,7 +86,7 @@
         <!-- 第3列: 消息区 -->
         <section class="chat-panel">
-          <div v-if="messages.length === 0 && !streaming" class="welcome-screen">
+          <div v-if="chatState.messages.length === 0 && !chatState.streaming" class="welcome-screen">
             <div class="welcome-content">
               <div class="welcome-emoji">{{ agentInfo.emoji || '🏗️' }}</div>
               <h2 class="welcome-title">{{ agentInfo.name || 'Agent' }}</h2>
@@ -99,7 +99,7 @@
             </div>
           </div>
           <div v-else ref="messageListRef" class="message-list">
-            <div v-for="(msg, idx) in messages" :key="idx" class="msg-row" :class="`msg-${msg.role}`">
+            <div v-for="(msg, idx) in chatState.messages" :key="idx" class="msg-row" :class="`msg-${msg.role}`">
               <div class="msg-avatar" :class="`avatar-${msg.role}`">{{ msg.role === 'user' ? '👤' : (agentInfo.emoji || '🏗️') }}</div>
               <div class="msg-body">
                 <div class="msg-header">
@@ -117,24 +117,24 @@
                 </div>
               </div>
             </div>
-            <div v-if="streaming" class="msg-row msg-assistant streaming">
+            <div v-if="chatState.streaming" class="msg-row msg-assistant streaming">
               <div class="msg-avatar avatar-assistant">{{ agentInfo.emoji || '🏗️' }}</div>
               <div class="msg-body">
                 <div class="msg-header"><span class="msg-role">{{ agentInfo.name }}</span><span class="typing-indicator"><span></span><span></span><span></span></span></div>
-                <div class="msg-content" v-html="renderMarkdown(streamContent)"></div>
+                <div class="msg-content" v-html="renderMarkdown(chatState.streamContent)"></div>
               </div>
             </div>
-            <div v-if="sending && thinkingContent" class="thinking-block">
-              <div class="thinking-header" @click="showThinking = !showThinking">
+            <div v-if="chatState.sending && chatState.thinkingContent" class="thinking-block">
+              <div class="thinking-header" @click="chatState.showThinking = !chatState.showThinking">
                 <div class="thinking-pulse"></div>
-                <span class="thinking-label">{{ streaming ? '💭 思考完成' : '💭 思考中...' }}</span>
-                <span class="thinking-toggle">{{ showThinking ? '▼' : '▶' }}</span>
+                <span class="thinking-label">{{ chatState.streaming ? '💭 思考完成' : '💭 思考中...' }}</span>
+                <span class="thinking-toggle">{{ chatState.showThinking ? '▼' : '▶' }}</span>
               </div>
-              <div v-if="showThinking" class="thinking-content">{{ thinkingContent }}</div>
+              <div v-if="chatState.showThinking" class="thinking-content">{{ chatState.thinkingContent }}</div>
             </div>
-            <div v-if="sending && !streaming && !thinkingContent" class="thinking-row">
+            <div v-if="chatState.sending && !chatState.streaming && !chatState.thinkingContent" class="thinking-row">
               <div class="thinking-pulse"></div>
-              <span class="thinking-text">{{ thinkingText }}</span>
+              <span class="thinking-text">{{ chatState.thinkingText }}</span>
             </div>
           </div>
           <div class="chat-input-area" @dragover.prevent="dragOver = true" @dragleave.prevent="dragOver = false" @drop.prevent="handleDrop">
@@ -160,28 +160,28 @@
             <div class="input-box" :class="{ focused: inputFocused }">
               <button class="attach-btn" @click="triggerFileInput" title="上传文件">📎</button>
               <input type="file" ref="fileInputRef" multiple style="display:none" @change="handleFileSelect" />
-              <textarea ref="inputRef" v-model="inputText" :disabled="sending" :placeholder="sending ? '等待回复中...' : '跟 ' + agentInfo.name + ' 对话...'" class="msg-textarea" rows="1" @keydown="handleKeydown" @focus="inputFocused = true" @blur="inputFocused = false" @input="autoResize" @paste="handlePaste"></textarea>
-              <button v-if="sending" class="send-btn stop-btn" @click="handleStop">⏹</button>
-              <button v-else class="send-btn" :class="{ ready: (inputText.trim() || pendingFiles.length) && !sending }" :disabled="!inputText.trim() && !pendingFiles.length" @click="handleSend">➤</button>
+              <textarea ref="inputRef" v-model="inputText" :disabled="chatState.sending" :placeholder="chatState.sending ? '等待回复中...' : '跟 ' + agentInfo.name + ' 对话...'" class="msg-textarea" rows="1" @keydown="handleKeydown" @focus="inputFocused = true" @blur="inputFocused = false" @input="autoResize" @paste="handlePaste"></textarea>
+              <button v-if="chatState.sending" class="send-btn stop-btn" @click="handleStop">⏹</button>
+              <button v-else class="send-btn" :class="{ ready: (inputText.trim() || pendingFiles.length) && !chatState.sending }" :disabled="!inputText.trim() && !pendingFiles.length" @click="handleSend">➤</button>
             </div>
-            <div class="input-hint">Shift+Enter 换行 · {{ messages.length }} 条消息<template v-if="pendingFiles.length"> · {{ pendingFiles.length }} 个待上传文件</template><template v-if="uploadedFiles.length"> · 📎 {{ uploadedFiles.length }} 个附件</template></div>
+            <div class="input-hint">Shift+Enter 换行 · {{ chatState.messages.length }} 条消息<template v-if="pendingFiles.length"> · {{ pendingFiles.length }} 个待上传文件</template><template v-if="uploadedFiles.length"> · 📎 {{ uploadedFiles.length }} 个附件</template></div>
           </div>
         </section>
         <!-- 第4列: ACP 事件 -->
         <aside class="acp-panel">
-          <div class="col-header"><span>⚡ ACP Events</span><span class="acp-count">{{ acpLog.length }}</span></div>
+          <div class="col-header"><span>⚡ ACP Events</span><span class="acp-count">{{ chatState.acpLog.length }}</span></div>
           <div class="acp-list">
-            <div v-if="acpLog.length > 0" class="acp-card">
-              <div class="acp-card-header"><span>⚡ Event Stream</span><span v-if="sending" class="badge-live">LIVE</span></div>
+            <div v-if="chatState.acpLog.length > 0" class="acp-card">
+              <div class="acp-card-header"><span>⚡ Event Stream</span><span v-if="chatState.sending" class="badge-live">LIVE</span></div>
               <div class="acp-log-stream">
-                <div v-for="(evt, i) in acpLog" :key="i" class="acp-event-line" :class="'acp-' + evt.type">
+                <div v-for="(evt, i) in chatState.acpLog" :key="i" class="acp-event-line" :class="'acp-' + evt.type">
                   <span class="acp-icon">{{ evt.icon }}</span>
                   <span class="acp-text">{{ evt.text }}</span>
                 </div>
               </div>
             </div>
-            <div v-for="(sub, callId) in subAgents" :key="'live-'+callId" class="sub-log-card" :class="sub.status">
+            <div v-for="(sub, callId) in chatState.subAgents" :key="'live-'+callId" class="sub-log-card" :class="sub.status">
               <div class="sub-log-card-header" @click="sub.collapsed = !sub.collapsed">
                 <span class="sub-log-icon">{{ sub.status === 'running' ? '🚀' : (sub.status === 'success' ? '✅' : '❌') }}</span>
                 <span class="sub-log-agent">{{ sub.agent }}</span>
@@ -190,7 +190,7 @@
               </div>
               <div v-if="!sub.collapsed" class="sub-log-content terminal">{{ sub.content || '等待输出...' }}</div>
             </div>
-            <div v-for="log in subLogList" :key="log.file" class="sub-log-card" :class="log.status">
+            <div v-for="log in chatState.subLogList" :key="log.file" class="sub-log-card" :class="log.status">
               <div class="sub-log-card-header" @click="log.collapsed = !log.collapsed">
                 <span class="sub-log-icon">{{ log.status === 'success' ? '✅' : (log.status === 'error' ? '❌' : '⏳') }}</span>
                 <span class="sub-log-agent">{{ log.agent }}</span>
@@ -198,7 +198,7 @@
               </div>
               <div v-if="!log.collapsed" class="sub-log-content terminal">{{ log.content }}</div>
             </div>
-            <div v-if="acpLog.length === 0 && subLogList.length === 0 && Object.keys(subAgents).length === 0" class="acp-empty">
+            <div v-if="chatState.acpLog.length === 0 && chatState.subLogList.length === 0 && Object.keys(chatState.subAgents).length === 0" class="acp-empty">
               发送消息后，ACP 事件<br>将在这里实时显示
             </div>
           </div>
@@ -326,7 +326,7 @@
 </template>
 <script setup>
-import { ref, computed, nextTick, watch, onMounted } from 'vue'
+import { ref, reactive, computed, nextTick, watch, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppNav from '@/components/AppNav.vue'
 import FileNode from '@/components/FileNode.vue'
@@ -356,9 +356,11 @@ const groupedAgents = computed(() =&gt; {
     groups[comp].push(a)
   })
-  // Sort each group by lastActiveAt descending
+  // Master agent 置顶，其余按 lastActiveAt 降序
   Object.keys(groups).forEach(k => {
     groups[k].sort((a, b) => {
+      if (a.type === 'master') return -1
+      if (b.type === 'master') return 1
       const ta = a.lastActiveAt ? new Date(a.lastActiveAt).getTime() : 0
       const tb = b.lastActiveAt ? new Date(b.lastActiveAt).getTime() : 0
       return tb - ta
@@ -378,6 +380,25 @@ const groupedAgents = computed(() =&gt; {
 })
 const activeTab = ref('chat') // 'chat' | 'detail'
+// 每个 agent 独立一份聊天态（messages/sending/streaming/思考栏/ACP 面板…），
+// 键是 agentId。切换 agent 只是换了 chatState 指向哪个 slice 来渲染，
+// 后台的 fetch 读流循环(handleSend/handleEvent) 认准发起时捕获的 agentId 写自己那份，
+// 不认"当前选中的 agent 是谁"——这样 A 在流式输出时切去看 B，A 不会被打断，
+// B 也不会被 A 的内容/思考栏/等待态污染，回切 A 能看到它这期间的完整进度。
+const chatStates = reactive(new Map())
+function ensureChatState(id) {
+  if (!chatStates.has(id)) {
+    chatStates.set(id, {
+      messages: [], activeConvId: null,
+      sending: false, streaming: false, streamContent: '',
+      subAgents: {}, subLogList: [], acpLog: [],
+      thinkingText: '🏗️ 启动中...', thinkingContent: '', showThinking: true,
+    })
+  }
+  return chatStates.get(id)
+}
+const chatState = computed(() => ensureChatState(agentId.value))
+
 const agentInfo = ref({ name: 'Agent Creator', emoji: '🏗️', type: 'meta', status: 'ready', greeting: '', bootstrapFiles: [] })
 // 状态映射：英文 -> 中文
@@ -429,21 +450,10 @@ const filteredConversations = computed(() =&gt; {
   if (convFilter.value === 'all') return conversations.value
   return conversations.value.filter(c => getConvType(c.conversationId || c.id) === convFilter.value)
 })
-const messages = ref([])
 const inputText = ref('')
 const inputFocused = ref(false)
-const sending = ref(false)
-const streaming = ref(false)
-const streamContent = ref('')
-const subAgents = ref({})
-const subLogList = ref([])
-const acpLog = ref([])
-const thinkingText = ref('🏗️ 启动中...')
-const thinkingContent = ref('')
-const showThinking = ref(true)
 const messageListRef = ref(null)
 const inputRef = ref(null)
-const activeConvId = ref(null)
 // Detail mode state
 const fileTree = ref(null)
@@ -516,16 +526,16 @@ async function uploadPendingFiles() {
   for (const pf of pendingFiles.value) {
     formData.append('files', pf.file)
   }
-  if (activeConvId.value) {
-    formData.append('conversationId', activeConvId.value)
+  if (chatState.value.activeConvId) {
+    formData.append('conversationId', chatState.value.activeConvId)
   }
   try {
     const r = await fetch(`/api/agent/${agentId.value}/upload`, { method: 'POST', body: formData })
     if (r.ok) {
       const data = await r.json()
       // Auto-set convId if server created one
-      if (data.conversationId && !activeConvId.value) {
-        activeConvId.value = data.conversationId
+      if (data.conversationId && !chatState.value.activeConvId) {
+        chatState.value.activeConvId = data.conversationId
       }
       uploadedFiles.value.push(...(data.uploaded || []))
       pendingFiles.value = []
@@ -536,9 +546,9 @@ async function uploadPendingFiles() {
 }
 async function loadUploadedFiles() {
-  if (!agentId.value || !activeConvId.value) { uploadedFiles.value = []; return }
+  if (!agentId.value || !chatState.value.activeConvId) { uploadedFiles.value = []; return }
   try {
-    const r = await fetch(`/api/agent/${agentId.value}/uploads/${activeConvId.value}`)
+    const r = await fetch(`/api/agent/${agentId.value}/uploads/${chatState.value.activeConvId}`)
     if (r.ok) uploadedFiles.value = await r.json()
     else uploadedFiles.value = []
   } catch { uploadedFiles.value = [] }
@@ -652,16 +662,17 @@ async function loadConversations() {
 async function loadConversation(convId) {
   if (!agentId.value) return
+  const st = chatState.value
   try {
     const r = await fetch(`/api/agent/${agentId.value}/conversations/${convId}`)
     if (r.ok) {
       const conv = await r.json()
-      messages.value = conv.messages || []
+      st.messages = conv.messages || []
       if (conv.subLogs && conv.subLogs.length > 0) {
-        subLogList.value = conv.subLogs.map(l => ({ ...l, collapsed: true }))
-      } else { subLogList.value = [] }
+        st.subLogList = conv.subLogs.map(l => ({ ...l, collapsed: true }))
+      } else { st.subLogList = [] }
     }
-  } catch { messages.value = []; subLogList.value = [] }
+  } catch { st.messages = []; st.subLogList = [] }
 }
 async function loadFileTree() {
@@ -724,15 +735,16 @@ async function deleteFile(filePath) {
 }
 function newConversation() {
-  activeConvId.value = null
-  messages.value = []
-  streamContent.value = ''
-  subAgents.value = {}
-  subLogList.value = []
-  acpLog.value = []
+  const st = chatState.value
+  st.activeConvId = null
+  st.messages = []
+  st.streamContent = ''
+  st.subAgents = {}
+  st.subLogList = []
+  st.acpLog = []
   pendingFiles.value = []
   uploadedFiles.value = []
-  
+
   if (route.params.id) {
     router.replace({ params: { id: route.params.id, agentId: agentId.value, convId: undefined }})
   } else {
@@ -740,22 +752,34 @@ function newConversation() {
   }
 }
+// 切 agent：不清空目标 agent 已经攒下的后台状态（可能正在生成中，或者刚刚生成完毕
+// 还没被看到）——只有它是空闲态时才去定位/刷新它的会话，正在 sending 就原样展示缓存。
 async function switchAgent() {
-  newConversation()
   selectedFile.value = null
   previewContent.value = null
   fileTree.value = null
+  const st = chatState.value
+  if (route.params.id) {
+    router.replace({ params: { id: route.params.id, agentId: agentId.value, convId: st.activeConvId || undefined }})
+  } else {
+    router.replace({ params: { agentId: agentId.value, convId: st.activeConvId || undefined }})
+  }
   await loadAgentInfo()
   await loadConversations()
-  if (filteredConversations.value.length > 0) {
-    const firstId = filteredConversations.value[0].conversationId || filteredConversations.value[0].id
-    await switchConversation(firstId)
+  if (!st.sending) {
+    if (st.activeConvId) {
+      await loadConversation(st.activeConvId)
+    } else if (filteredConversations.value.length > 0) {
+      const firstId = filteredConversations.value[0].conversationId || filteredConversations.value[0].id
+      await switchConversation(firstId)
+    }
   }
   await loadFileTree()
+  scrollToBottom()
 }
 async function switchConversation(convId) {
-  activeConvId.value = convId
+  chatState.value.activeConvId = convId
   if (route.params.id) {
     router.replace({ params: { id: route.params.id, agentId: agentId.value, convId } })
   } else {
@@ -774,13 +798,14 @@ async function deleteConversation(convId) {
     const r = await fetch(`/api/agent/${agentId.value}/conversations/${convId}`, { method: 'DELETE' })
     if (r.ok) {
       conversations.value = conversations.value.filter(c => (c.conversationId || c.id) !== convId)
-      if (activeConvId.value === convId) {
-        activeConvId.value = null
-        messages.value = []
-        streamContent.value = ''
-        subAgents.value = {}
-        subLogList.value = []
-        acpLog.value = []
+      const st = chatState.value
+      if (st.activeConvId === convId) {
+        st.activeConvId = null
+        st.messages = []
+        st.streamContent = ''
+        st.subAgents = {}
+        st.subLogList = []
+        st.acpLog = []
       }
     }
   } catch (e) { console.error('Delete conv error:', e) }
@@ -810,9 +835,14 @@ async function copyText(text) {
 // ─── Chat (SSE) ───
+// requestAgentId 是发起这次发送时的 agent——从这里往下，全部认这个快照，不认
+// "用户现在选中的是谁"。这样切走了也不会打断/污染，切回来能看到完整的后台进度。
 async function handleSend() {
   const text = inputText.value.trim()
-  if ((!text && pendingFiles.value.length === 0) || sending.value || !agentId.value) return
+  const requestAgentId = agentId.value
+  const st = ensureChatState(requestAgentId)
+  if ((!text && pendingFiles.value.length === 0) || st.sending || !requestAgentId) return
+  const isCurrent = () => agentId.value === requestAgentId
   // Upload pending files first
   if (pendingFiles.value.length > 0) {
@@ -821,27 +851,26 @@ async function handleSend() {
   const finalText = text || '请处理我上传的文件。'
   const attachments = uploadedFiles.value.length > 0 ? [...uploadedFiles.value] : []
-  messages.value.push({ role: 'user', content: finalText, timestamp: new Date().toISOString(), attachments })
+  st.messages.push({ role: 'user', content: finalText, timestamp: new Date().toISOString(), attachments })
   inputText.value = ''
   if (inputRef.value) inputRef.value.style.height = 'auto'
-  sending.value = true; streaming.value = false; streamContent.value = ''
-  subAgents.value = {}; acpLog.value = []; thinkingContent.value = ''
-  showThinking.value = true
-  thinkingText.value = `${agentInfo.value.emoji} ${agentInfo.value.name} 思考中...`
-  activeTab.value = 'chat' // ensure we're in chat mode
-  scrollToBottom()
-
-  if (activeConvId.value) {
-    const existsInList = conversations.value.some(c => (c.conversationId || c.id) === activeConvId.value)
+  st.sending = true; st.streaming = false; st.streamContent = ''
+  st.subAgents = {}; st.acpLog = []; st.thinkingContent = ''
+  st.showThinking = true
+  st.thinkingText = `${agentInfo.value.emoji} ${agentInfo.value.name} 思考中...`
+  if (isCurrent()) { activeTab.value = 'chat'; scrollToBottom() }
+
+  if (st.activeConvId && isCurrent()) {
+    const existsInList = conversations.value.some(c => (c.conversationId || c.id) === st.activeConvId)
     if (!existsInList) {
-      conversations.value.unshift({ conversationId: activeConvId.value, title: finalText.slice(0, 50), updatedAt: new Date().toISOString(), messageCount: messages.value.length, status: 'running' })
+      conversations.value.unshift({ conversationId: st.activeConvId, title: finalText.slice(0, 50), updatedAt: new Date().toISOString(), messageCount: st.messages.length, status: 'running' })
     }
   }
   try {
-    const r = await fetch(`/api/agent/${agentId.value}/chat`, {
+    const r = await fetch(`/api/agent/${requestAgentId}/chat`, {
       method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ message: finalText, conversationId: activeConvId.value }),
+      body: JSON.stringify({ message: finalText, conversationId: st.activeConvId }),
     })
     const reader = r.body.getReader()
     const decoder = new TextDecoder()
@@ -855,86 +884,93 @@ async function handleSend() {
       for (const line of lines) {
         if (line.startsWith('event: ')) lastEventType = line.slice(7)
         else if (line.startsWith('data: ')) {
-          try { handleEvent(lastEventType, JSON.parse(line.slice(6))) } catch {}
+          try { handleEvent(st, requestAgentId, lastEventType, JSON.parse(line.slice(6))) } catch {}
         }
       }
     }
-    if (streamContent.value) {
-      messages.value.push({ role: 'assistant', content: streamContent.value, timestamp: new Date().toISOString() })
+    if (st.streamContent) {
+      st.messages.push({ role: 'assistant', content: st.streamContent, timestamp: new Date().toISOString() })
     }
-    await loadConversations()
-    if (activeConvId.value) await loadSubLogs()
+    if (isCurrent()) await loadConversations()
+    if (st.activeConvId) await loadSubLogsFor(requestAgentId, st)
   } catch (err) {
-    messages.value.push({ role: 'assistant', content: `❌ 错误: ${err.message}`, timestamp: new Date().toISOString() })
+    st.messages.push({ role: 'assistant', content: `❌ 错误: ${err.message}`, timestamp: new Date().toISOString() })
   } finally {
-    sending.value = false; streaming.value = false; streamContent.value = ''; thinkingContent.value = ''
+    st.sending = false; st.streaming = false; st.streamContent = ''; st.thinkingContent = ''
   }
 }
-async function loadSubLogs() {
+async function loadSubLogsFor(id, st) {
   try {
-    const r = await fetch(`/api/agent/${agentId.value}/conversations/${activeConvId.value}/sub-logs`)
-    if (r.ok) { const logs = await r.json(); subLogList.value = logs.map(l => ({ ...l, collapsed: true })) }
+    const r = await fetch(`/api/agent/${id}/conversations/${st.activeConvId}/sub-logs`)
+    if (r.ok) { const logs = await r.json(); st.subLogList = logs.map(l => ({ ...l, collapsed: true })) }
   } catch {}
 }
 async function handleStop() {
-  if (!activeConvId.value) return
-  try { await fetch(`/api/agent/${agentId.value}/chat/${activeConvId.value}/stop`, { method: 'POST' }) } catch(e) { console.error('Stop error:', e) }
-  sending.value = false; streaming.value = false
-  messages.value.push({ role: 'assistant', content: `*[已终止]*`, timestamp: new Date().toISOString() })
+  const st = chatState.value
+  if (!st.activeConvId) return
+  try { await fetch(`/api/agent/${agentId.value}/chat/${st.activeConvId}/stop`, { method: 'POST' }) } catch(e) { console.error('Stop error:', e) }
+  st.sending = false; st.streaming = false
+  st.messages.push({ role: 'assistant', content: `*[已终止]*`, timestamp: new Date().toISOString() })
   scrollToBottom()
 }
-function handleEvent(type, data) {
+// st/requestAgentId 是 handleSend 传下来的快照；只有 requestAgentId 仍是当前选中 agent 时
+// 才动 DOM(滚动)/URL/全局对话列表——避免把某个后台 agent 的进度"带"到当前正看的页面上。
+function handleEvent(st, requestAgentId, type, data) {
+  const isCurrent = agentId.value === requestAgentId
   switch (type) {
     case 'session':
-      if (data.conversationId && !activeConvId.value) {
-        activeConvId.value = data.conversationId
-        if (route.params.id) {
-          router.replace({ params: { id: route.params.id, agentId: agentId.value, convId: data.conversationId } })
-        } else {
-          router.replace({ params: { agentId: agentId.value, convId: data.conversationId } })
-        }
-        const existsInList = conversations.value.some(c => (c.conversationId || c.id) === data.conversationId)
-        if (!existsInList) {
-          conversations.value.unshift({ conversationId: data.conversationId, title: messages.value.find(m => m.role === 'user')?.content?.slice(0, 50) || '新对话', updatedAt: new Date().toISOString(), messageCount: 1, status: 'running' })
+      if (data.conversationId && !st.activeConvId) {
+        st.activeConvId = data.conversationId
+        if (isCurrent) {
+          if (route.params.id) {
+            router.replace({ params: { id: route.params.id, agentId: requestAgentId, convId: data.conversationId } })
+          } else {
+            router.replace({ params: { agentId: requestAgentId, convId: data.conversationId } })
+          }
+          const existsInList = conversations.value.some(c => (c.conversationId || c.id) === data.conversationId)
+          if (!existsInList) {
+            conversations.value.unshift({ conversationId: data.conversationId, title: st.messages.find(m => m.role === 'user')?.content?.slice(0, 50) || '新对话', updatedAt: new Date().toISOString(), messageCount: 1, status: 'running' })
+          }
         }
       }
       break
     case 'thinking':
-      if (data.message && !data.message.startsWith('🏗️')) { thinkingContent.value += data.message; scrollToBottom() }
-      else { thinkingText.value = data.message || '思考中...' }
+      if (data.message && !data.message.startsWith('🏗️')) { st.thinkingContent += data.message; if (isCurrent) scrollToBottom() }
+      else { st.thinkingText = data.message || '思考中...' }
       break
     case 'agent_output':
-      streaming.value = true; streamContent.value += (data.message || ''); scrollToBottom(); break
+      st.streaming = true; st.streamContent += (data.message || ''); if (isCurrent) scrollToBottom(); break
     case 'tool_call':
-      thinkingText.value = data.message || `🔧 ${data.tool}`
-      acpLog.value.push({ type: 'tool', icon: '🔧', text: `${data.tool}`, ts: Date.now() }); scrollAcpLog(); break
+      st.thinkingText = data.message || `🔧 ${data.tool}`
+      st.acpLog.push({ type: 'tool', icon: '🔧', text: `${data.tool}`, ts: Date.now() }); if (isCurrent) scrollAcpLog(); break
     case 'tool_input':
-      acpLog.value.push({ type: 'input', icon: '📥', text: data.input?.slice(0, 300) || '', ts: Date.now() }); scrollAcpLog(); break
+      st.acpLog.push({ type: 'input', icon: '📥', text: data.input?.slice(0, 300) || '', ts: Date.now() }); if (isCurrent) scrollAcpLog(); break
     case 'tool_result':
-      acpLog.value.push({ type: 'result', icon: '📤', text: data.result?.slice(0, 300) || '', ts: Date.now() }); scrollAcpLog(); break
+      st.acpLog.push({ type: 'result', icon: '📤', text: data.result?.slice(0, 300) || '', ts: Date.now() }); if (isCurrent) scrollAcpLog(); break
     case 'session_cost':
-      acpLog.value.push({ type: 'cost', icon: '💰', text: `$${data.cost?.toFixed(4)} (${((data.duration||0)/1000).toFixed(1)}s)`, ts: Date.now() }); break
+      st.acpLog.push({ type: 'cost', icon: '💰', text: `$${data.cost?.toFixed(4)} (${((data.duration||0)/1000).toFixed(1)}s)`, ts: Date.now() }); break
     case 'acp_raw':
       if (data.method && !data.method.includes('content_block_delta') && !data.method.includes('message_start')) {
-        acpLog.value.push({ type: 'raw', icon: '⚡', text: data.method, ts: Date.now() }); scrollAcpLog()
+        st.acpLog.push({ type: 'raw', icon: '⚡', text: data.method, ts: Date.now() }); if (isCurrent) scrollAcpLog()
       }
       break
     case 'sub_agent':
-      if (!subAgents.value[data.callId]) subAgents.value[data.callId] = { agent: data.agent, status: 'running', content: '', collapsed: false }
+      if (!st.subAgents[data.callId]) st.subAgents[data.callId] = { agent: data.agent, status: 'running', content: '', collapsed: false }
       if (data.event === 'chunk' && data.chunk) {
-        subAgents.value[data.callId].content += data.chunk
-        setTimeout(() => { document.querySelectorAll('.sub-log-content').forEach(el => el.scrollTop = el.scrollHeight) }, 50)
-      } else if (data.event === 'done') subAgents.value[data.callId].status = data.status
-      else if (data.event === 'start') subAgents.value[data.callId].status = 'running'
-      scrollToBottom(); break
+        st.subAgents[data.callId].content += data.chunk
+        if (isCurrent) setTimeout(() => { document.querySelectorAll('.sub-log-content').forEach(el => el.scrollTop = el.scrollHeight) }, 50)
+      } else if (data.event === 'done') st.subAgents[data.callId].status = data.status
+      else if (data.event === 'start') st.subAgents[data.callId].status = 'running'
+      if (isCurrent) scrollToBottom(); break
     case 'error':
-      messages.value.push({ role: 'assistant', content: `❌ ${data.message}`, timestamp: new Date().toISOString() })
-      acpLog.value.push({ type: 'error', icon: '🚨', text: data.message, ts: Date.now() })
-      thinkingText.value = ''; thinkingContent.value = ''
-      scrollToBottom(); scrollAcpLog(); break
+      st.messages.push({ role: 'assistant', content: `❌ ${data.message}`, timestamp: new Date().toISOString() })
+      st.acpLog.push({ type: 'error', icon: '🚨', text: data.message, ts: Date.now() })
+      st.thinkingText = ''; st.thinkingContent = ''
+      if (isCurrent) { scrollToBottom(); scrollAcpLog() }
+      break
   }
 }
@@ -957,7 +993,7 @@ function renderMarkdown(text) {
   catch { return (text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>') }
 }
-watch([messages, streamContent], () => scrollToBottom(), { deep: true })
+watch(chatState, () => scrollToBottom(), { deep: true })
 // Load file tree when switching to detail tab
 watch(activeTab, async (tab) => { if (tab === 'detail' && !fileTree.value) await loadFileTree() })
@@ -975,7 +1011,7 @@ onMounted(async () =&gt; {
   await loadAgentInfo()
   await loadConversations()
   if (route.params.convId) {
-    activeConvId.value = route.params.convId
+    chatState.value.activeConvId = route.params.convId
     await loadConversation(route.params.convId)
     scrollToBottom()
   } else if (filteredConversations.value.length > 0) {