From 70922a3525f2098ea71aa9bdff1fd9dbd7989ccb Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Tue, 16 Dec 2025 17:50:43 +0800
Subject: [PATCH] Implement interaction features in Step5Interaction component
 and add routing for interaction view

- Introduced the Step5Interaction component for user interaction with report agents and simulation profiles.
- Added chat functionality to communicate with report agents and selected simulation agents.
- Implemented a survey feature to gather responses from multiple agents.
- Enhanced routing by adding a new InteractionView for seamless navigation to the interaction interface.
- Updated the router configuration to include the new interaction route.
- Improved UI elements and styles for better user experience in the interaction process.
---
 frontend/src/api/report.js                   |    8 +
 frontend/src/api/simulation.js               |    8 +
 frontend/src/components/Step4Report.vue      |   49 +
 frontend/src/components/Step5Interaction.vue | 1917 ++++++++++++++++++
 frontend/src/router/index.js                 |    7 +
 frontend/src/views/InteractionView.vue       |  350 ++++
 6 files changed, 2339 insertions(+)
 create mode 100644 frontend/src/components/Step5Interaction.vue
 create mode 100644 frontend/src/views/InteractionView.vue

diff --git a/frontend/src/api/report.js b/frontend/src/api/report.js
index e4eefa2..c89a67d 100644
--- a/frontend/src/api/report.js
+++ b/frontend/src/api/report.js
@@ -41,3 +41,11 @@ export const getConsoleLog = (reportId, fromLine = 0) => {
 export const getReport = (reportId) => {
   return service.get(`/api/report/${reportId}`)
 }
+
+/**
+ * 与 Report Agent 对话
+ * @param {Object} data - { simulation_id, message, chat_history? }
+ */
+export const chatWithReport = (data) => {
+  return requestWithRetry(() => service.post('/api/report/chat', data), 3, 1000)
+}
diff --git a/frontend/src/api/simulation.js b/frontend/src/api/simulation.js
index 33efca0..96404c6 100644
--- a/frontend/src/api/simulation.js
+++ b/frontend/src/api/simulation.js
@@ -168,3 +168,11 @@ export const getEnvStatus = (data) => {
   return service.post('/api/simulation/env-status', data)
 }
 
+/**
+ * 批量采访 Agent
+ * @param {Object} data - { simulation_id, interviews: [{ agent_id, prompt }] }
+ */
+export const interviewAgents = (data) => {
+  return requestWithRetry(() => service.post('/api/simulation/interview/batch', data), 3, 1000)
+}
+
diff --git a/frontend/src/components/Step4Report.vue b/frontend/src/components/Step4Report.vue
index 9bb3017..eadbd13 100644
--- a/frontend/src/components/Step4Report.vue
+++ b/frontend/src/components/Step4Report.vue
@@ -126,6 +126,15 @@
             </div>
           </div>
 
+          <!-- Next Step Button - 在完成后显示 -->
+          <button v-if="isComplete" class="next-step-btn" @click="goToInteraction">
+            <span>进入深度互动</span>
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+              <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+          </button>
+
           <div class="workflow-divider"></div>
         </div>
 
@@ -383,8 +392,11 @@
 
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted, nextTick, h, reactive } from 'vue'
+import { useRouter } from 'vue-router'
 import { getAgentLog, getConsoleLog } from '../api/report'
 
+const router = useRouter()
+
 const props = defineProps({
   reportId: String,
   simulationId: String,
@@ -393,6 +405,13 @@ const props = defineProps({
 
 const emit = defineEmits(['add-log', 'update-status'])
 
+// Navigation
+const goToInteraction = () => {
+  if (props.reportId) {
+    router.push({ name: 'Interaction', params: { reportId: props.reportId } })
+  }
+}
+
 // State
 const agentLogs = ref([])
 const consoleLogs = ref([])
@@ -3344,6 +3363,36 @@ watch(() => props.reportId, (newId) => {
   font-size: 14px;
 }
 
+.next-step-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: calc(100% - 40px);
+  margin: 4px 20px 0 20px;
+  padding: 14px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFFFFF;
+  background: #1F2937;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.next-step-btn:hover {
+  background: #374151;
+}
+
+.next-step-btn svg {
+  transition: transform 0.2s ease;
+}
+
+.next-step-btn:hover svg {
+  transform: translateX(4px);
+}
+
 /* Workflow Empty */
 .workflow-empty {
   display: flex;
diff --git a/frontend/src/components/Step5Interaction.vue b/frontend/src/components/Step5Interaction.vue
new file mode 100644
index 0000000..068a8d3
--- /dev/null
+++ b/frontend/src/components/Step5Interaction.vue
@@ -0,0 +1,1917 @@
+<template>
+  <div class="interaction-panel">
+    <!-- Main Split Layout -->
+    <div class="main-split-layout">
+      <!-- LEFT PANEL: Report Style -->
+      <div class="left-panel report-style" ref="leftPanel">
+        <div v-if="reportOutline" class="report-content-wrapper">
+          <!-- Report Header -->
+          <div class="report-header-block">
+            <div class="report-meta">
+              <span class="report-tag">Prediction Report</span>
+              <span class="report-id">ID: {{ reportId || 'REF-2024-X92' }}</span>
+            </div>
+            <h1 class="main-title">{{ reportOutline.title }}</h1>
+            <p class="sub-title">{{ reportOutline.summary }}</p>
+            <div class="header-divider"></div>
+          </div>
+
+          <!-- Sections List -->
+          <div class="sections-list">
+            <div 
+              v-for="(section, idx) in reportOutline.sections" 
+              :key="idx"
+              class="report-section-item"
+              :class="{ 
+                'is-active': currentSectionIndex === idx + 1,
+                'is-completed': isSectionCompleted(idx + 1),
+                'is-pending': !isSectionCompleted(idx + 1) && currentSectionIndex !== idx + 1
+              }"
+            >
+              <div class="section-header-row" @click="toggleSectionCollapse(idx)" :class="{ 'clickable': isSectionCompleted(idx + 1) }">
+                <h3 class="section-title">{{ section.title }}</h3>
+                <svg 
+                  v-if="isSectionCompleted(idx + 1)" 
+                  class="collapse-icon" 
+                  :class="{ 'is-collapsed': collapsedSections.has(idx) }"
+                  viewBox="0 0 24 24" 
+                  width="20" 
+                  height="20" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  stroke-width="2"
+                >
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </div>
+              
+              <div class="section-body" v-show="!collapsedSections.has(idx)">
+                <!-- Completed Content -->
+                <div v-if="generatedSections[idx + 1]" class="generated-content" v-html="renderMarkdown(generatedSections[idx + 1])"></div>
+                
+                <!-- Loading State -->
+                <div v-else-if="currentSectionIndex === idx + 1" class="loading-state">
+                  <div class="loading-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                      <circle cx="12" cy="12" r="10" stroke-width="4" stroke="#E5E7EB"></circle>
+                      <path d="M12 2a10 10 0 0 1 10 10" stroke-width="4" stroke="#4B5563" stroke-linecap="round"></path>
+                    </svg>
+                  </div>
+                  <span class="loading-text">正在生成{{ section.title }}...</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Waiting State -->
+        <div v-if="!reportOutline" class="waiting-placeholder">
+          <div class="waiting-animation">
+            <div class="waiting-ring"></div>
+            <div class="waiting-ring"></div>
+            <div class="waiting-ring"></div>
+          </div>
+          <span class="waiting-text">Waiting for Report Agent...</span>
+        </div>
+      </div>
+
+      <!-- RIGHT PANEL: Interaction Interface -->
+      <div class="right-panel" ref="rightPanel">
+        <!-- Tab Switcher -->
+        <div class="interaction-header">
+          <div class="tab-switcher">
+            <button 
+              class="tab-btn"
+              :class="{ active: activeTab === 'chat' }"
+              @click="activeTab = 'chat'"
+            >
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+              <span>单独对话</span>
+            </button>
+            <button 
+              class="tab-btn"
+              :class="{ active: activeTab === 'survey' }"
+              @click="activeTab = 'survey'"
+            >
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M9 11l3 3L22 4"></path>
+                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+              </svg>
+              <span>问卷调查</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Chat Mode -->
+        <div v-if="activeTab === 'chat'" class="chat-container">
+          <!-- Target Selector -->
+          <div class="target-selector">
+            <div class="selector-label">对话对象</div>
+            <div class="selector-options">
+              <button 
+                class="target-option"
+                :class="{ active: chatTarget === 'report_agent' }"
+                @click="selectChatTarget('report_agent')"
+              >
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+                </svg>
+                <span>Report Agent</span>
+              </button>
+              <div class="agent-dropdown" v-if="profiles.length > 0">
+                <button 
+                  class="target-option agent-option"
+                  :class="{ active: chatTarget === 'agent' }"
+                  @click="toggleAgentDropdown"
+                >
+                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="12" cy="7" r="4"></circle>
+                  </svg>
+                  <span>{{ selectedAgent ? selectedAgent.username : '选择模拟个体' }}</span>
+                  <svg class="dropdown-arrow" :class="{ open: showAgentDropdown }" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                  </svg>
+                </button>
+                <div v-if="showAgentDropdown" class="dropdown-menu">
+                  <div 
+                    v-for="(agent, idx) in profiles" 
+                    :key="idx"
+                    class="dropdown-item"
+                    @click="selectAgent(agent, idx)"
+                  >
+                    <div class="agent-avatar">{{ (agent.username || 'A')[0] }}</div>
+                    <div class="agent-info">
+                      <span class="agent-name">{{ agent.username }}</span>
+                      <span class="agent-role">{{ agent.profession || '未知职业' }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Chat Messages -->
+          <div class="chat-messages" ref="chatMessages">
+            <div v-if="chatHistory.length === 0" class="chat-empty">
+              <div class="empty-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                </svg>
+              </div>
+              <p class="empty-text">
+                {{ chatTarget === 'report_agent' ? '与 Report Agent 对话，深入了解报告内容' : '与模拟个体对话，了解他们的观点' }}
+              </p>
+            </div>
+            <div 
+              v-for="(msg, idx) in chatHistory" 
+              :key="idx"
+              class="chat-message"
+              :class="msg.role"
+            >
+              <div class="message-avatar">
+                <span v-if="msg.role === 'user'">U</span>
+                <span v-else>{{ msg.role === 'assistant' && chatTarget === 'report_agent' ? 'R' : (selectedAgent?.username?.[0] || 'A') }}</span>
+              </div>
+              <div class="message-content">
+                <div class="message-header">
+                  <span class="sender-name">
+                    {{ msg.role === 'user' ? 'You' : (chatTarget === 'report_agent' ? 'Report Agent' : (selectedAgent?.username || 'Agent')) }}
+                  </span>
+                  <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
+                </div>
+                <div class="message-text" v-html="renderMarkdown(msg.content)"></div>
+              </div>
+            </div>
+            <div v-if="isSending" class="chat-message assistant">
+              <div class="message-avatar">
+                <span>{{ chatTarget === 'report_agent' ? 'R' : (selectedAgent?.username?.[0] || 'A') }}</span>
+              </div>
+              <div class="message-content">
+                <div class="typing-indicator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Chat Input -->
+          <div class="chat-input-area">
+            <textarea 
+              v-model="chatInput"
+              class="chat-input"
+              placeholder="输入您的问题..."
+              @keydown.enter.exact.prevent="sendMessage"
+              :disabled="isSending || (!selectedAgent && chatTarget === 'agent')"
+              rows="1"
+              ref="chatInputRef"
+            ></textarea>
+            <button 
+              class="send-btn"
+              @click="sendMessage"
+              :disabled="!chatInput.trim() || isSending || (!selectedAgent && chatTarget === 'agent')"
+            >
+              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="22" y1="2" x2="11" y2="13"></line>
+                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Survey Mode -->
+        <div v-if="activeTab === 'survey'" class="survey-container">
+          <!-- Survey Setup -->
+          <div class="survey-setup">
+            <div class="setup-section">
+              <div class="section-header">
+                <span class="section-title">选择调查对象</span>
+                <span class="selection-count">已选 {{ selectedAgents.size }} / {{ profiles.length }}</span>
+              </div>
+              <div class="agents-grid">
+                <label 
+                  v-for="(agent, idx) in profiles" 
+                  :key="idx"
+                  class="agent-checkbox"
+                  :class="{ checked: selectedAgents.has(idx) }"
+                >
+                  <input 
+                    type="checkbox" 
+                    :checked="selectedAgents.has(idx)"
+                    @change="toggleAgentSelection(idx)"
+                  >
+                  <div class="checkbox-avatar">{{ (agent.username || 'A')[0] }}</div>
+                  <div class="checkbox-info">
+                    <span class="checkbox-name">{{ agent.username }}</span>
+                    <span class="checkbox-role">{{ agent.profession || '未知职业' }}</span>
+                  </div>
+                  <div class="checkbox-indicator">
+                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3">
+                      <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                  </div>
+                </label>
+              </div>
+              <div class="selection-actions">
+                <button class="action-link" @click="selectAllAgents">全选</button>
+                <span class="action-divider">|</span>
+                <button class="action-link" @click="clearAgentSelection">清空</button>
+              </div>
+            </div>
+
+            <div class="setup-section">
+              <div class="section-header">
+                <span class="section-title">问卷问题</span>
+              </div>
+              <textarea 
+                v-model="surveyQuestion"
+                class="survey-input"
+                placeholder="输入您想问所有被选中对象的问题..."
+                rows="3"
+              ></textarea>
+            </div>
+
+            <button 
+              class="survey-submit-btn"
+              :disabled="selectedAgents.size === 0 || !surveyQuestion.trim() || isSurveying"
+              @click="submitSurvey"
+            >
+              <span v-if="isSurveying" class="loading-spinner"></span>
+              <span v-else>发送问卷</span>
+            </button>
+          </div>
+
+          <!-- Survey Results -->
+          <div v-if="surveyResults.length > 0" class="survey-results">
+            <div class="results-header">
+              <span class="results-title">调查结果</span>
+              <span class="results-count">{{ surveyResults.length }} 条回复</span>
+            </div>
+            <div class="results-list">
+              <div 
+                v-for="(result, idx) in surveyResults" 
+                :key="idx"
+                class="result-card"
+              >
+                <div class="result-header">
+                  <div class="result-avatar">{{ (result.agent_name || 'A')[0] }}</div>
+                  <div class="result-info">
+                    <span class="result-name">{{ result.agent_name }}</span>
+                    <span class="result-role">{{ result.profession || '未知职业' }}</span>
+                  </div>
+                </div>
+                <div class="result-question">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                  </svg>
+                  <span>{{ result.question }}</span>
+                </div>
+                <div class="result-answer" v-html="renderMarkdown(result.answer)"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Console Logs -->
+    <div class="console-logs">
+      <div class="log-header">
+        <span class="log-title">INTERACTION LOG</span>
+        <span class="log-id">{{ simulationId || 'NO_SIMULATION' }}</span>
+      </div>
+      <div class="log-content" ref="logContent">
+        <div class="log-line" v-for="(log, idx) in systemLogs" :key="idx">
+          <span class="log-time">{{ log.time }}</span>
+          <span class="log-msg">{{ log.msg }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { chatWithReport, getReport, getAgentLog } from '../api/report'
+import { interviewAgents, getSimulationProfilesRealtime } from '../api/simulation'
+
+const props = defineProps({
+  reportId: String,
+  simulationId: String,
+  systemLogs: Array
+})
+
+const emit = defineEmits(['add-log', 'update-status'])
+
+// State
+const activeTab = ref('chat')
+const chatTarget = ref('report_agent')
+const showAgentDropdown = ref(false)
+const selectedAgent = ref(null)
+const selectedAgentIndex = ref(null)
+
+// Chat State
+const chatInput = ref('')
+const chatHistory = ref([])
+const isSending = ref(false)
+const chatMessages = ref(null)
+const chatInputRef = ref(null)
+
+// Survey State
+const selectedAgents = ref(new Set())
+const surveyQuestion = ref('')
+const surveyResults = ref([])
+const isSurveying = ref(false)
+
+// Report Data
+const reportOutline = ref(null)
+const generatedSections = ref({})
+const collapsedSections = ref(new Set())
+const currentSectionIndex = ref(null)
+const profiles = ref([])
+
+// Helper Methods
+const isSectionCompleted = (sectionIndex) => {
+  return !!generatedSections.value[sectionIndex]
+}
+
+// Refs
+const leftPanel = ref(null)
+const rightPanel = ref(null)
+const logContent = ref(null)
+
+// Methods
+const addLog = (msg) => {
+  emit('add-log', msg)
+}
+
+const toggleSectionCollapse = (idx) => {
+  if (!generatedSections.value[idx + 1]) return
+  const newSet = new Set(collapsedSections.value)
+  if (newSet.has(idx)) {
+    newSet.delete(idx)
+  } else {
+    newSet.add(idx)
+  }
+  collapsedSections.value = newSet
+}
+
+const selectChatTarget = (target) => {
+  chatTarget.value = target
+  if (target === 'report_agent') {
+    showAgentDropdown.value = false
+  }
+}
+
+const toggleAgentDropdown = () => {
+  showAgentDropdown.value = !showAgentDropdown.value
+  if (showAgentDropdown.value) {
+    chatTarget.value = 'agent'
+  }
+}
+
+const selectAgent = (agent, idx) => {
+  selectedAgent.value = agent
+  selectedAgentIndex.value = idx
+  chatTarget.value = 'agent'
+  showAgentDropdown.value = false
+  chatHistory.value = [] // Reset chat history for new agent
+  addLog(`选择对话对象: ${agent.username}`)
+}
+
+const formatTime = (timestamp) => {
+  if (!timestamp) return ''
+  try {
+    return new Date(timestamp).toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit'
+    })
+  } catch {
+    return ''
+  }
+}
+
+const renderMarkdown = (content) => {
+  if (!content) return ''
+  
+  let processedContent = content.replace(/^##\s+.+\n+/, '')
+  let html = processedContent.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="code-block"><code>$2</code></pre>')
+  html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
+  html = html.replace(/^#### (.+)$/gm, '<h5 class="md-h5">$1</h5>')
+  html = html.replace(/^### (.+)$/gm, '<h4 class="md-h4">$1</h4>')
+  html = html.replace(/^## (.+)$/gm, '<h3 class="md-h3">$1</h3>')
+  html = html.replace(/^# (.+)$/gm, '<h2 class="md-h2">$1</h2>')
+  html = html.replace(/^> (.+)$/gm, '<blockquote class="md-quote">$1</blockquote>')
+  html = html.replace(/^- (.+)$/gm, '<li class="md-li">$1</li>')
+  html = html.replace(/(<li class="md-li">[\s\S]*?<\/li>)(\s*<li)/g, '$1$2')
+  html = html.replace(/(<li class="md-li">.*<\/li>)+/g, '<ul class="md-ul">$&</ul>')
+  html = html.replace(/^\d+\. (.+)$/gm, '<li class="md-oli">$1</li>')
+  html = html.replace(/(<li class="md-oli">.*<\/li>)+/g, '<ol class="md-ol">$&</ol>')
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>')
+  html = html.replace(/_(.+?)_/g, '<em>$1</em>')
+  html = html.replace(/^---$/gm, '<hr class="md-hr">')
+  html = html.replace(/\n\n/g, '</p><p class="md-p">')
+  html = html.replace(/\n/g, '<br>')
+  html = '<p class="md-p">' + html + '</p>'
+  html = html.replace(/<p class="md-p"><\/p>/g, '')
+  html = html.replace(/<p class="md-p">(<h[2-5])/g, '$1')
+  html = html.replace(/(<\/h[2-5]>)<\/p>/g, '$1')
+  html = html.replace(/<p class="md-p">(<ul|<ol|<blockquote|<pre|<hr)/g, '$1')
+  html = html.replace(/(<\/ul>|<\/ol>|<\/blockquote>|<\/pre>)<\/p>/g, '$1')
+  
+  return html
+}
+
+// Chat Methods
+const sendMessage = async () => {
+  if (!chatInput.value.trim() || isSending.value) return
+  
+  const message = chatInput.value.trim()
+  chatInput.value = ''
+  
+  // Add user message
+  chatHistory.value.push({
+    role: 'user',
+    content: message,
+    timestamp: new Date().toISOString()
+  })
+  
+  scrollToBottom()
+  isSending.value = true
+  
+  try {
+    if (chatTarget.value === 'report_agent') {
+      await sendToReportAgent(message)
+    } else {
+      await sendToAgent(message)
+    }
+  } catch (err) {
+    addLog(`发送失败: ${err.message}`)
+    chatHistory.value.push({
+      role: 'assistant',
+      content: `抱歉，发生了错误: ${err.message}`,
+      timestamp: new Date().toISOString()
+    })
+  } finally {
+    isSending.value = false
+    scrollToBottom()
+  }
+}
+
+const sendToReportAgent = async (message) => {
+  addLog(`向 Report Agent 发送: ${message.substring(0, 50)}...`)
+  
+  // Build chat history for API
+  const historyForApi = chatHistory.value
+    .filter(msg => msg.role !== 'user' || msg.content !== message)
+    .slice(-10) // Keep last 10 messages
+    .map(msg => ({
+      role: msg.role,
+      content: msg.content
+    }))
+  
+  const res = await chatWithReport({
+    simulation_id: props.simulationId,
+    message: message,
+    chat_history: historyForApi
+  })
+  
+  if (res.success && res.data) {
+    chatHistory.value.push({
+      role: 'assistant',
+      content: res.data.response || res.data.answer || '无响应',
+      timestamp: new Date().toISOString()
+    })
+    addLog('Report Agent 已回复')
+  } else {
+    throw new Error(res.error || '请求失败')
+  }
+}
+
+const sendToAgent = async (message) => {
+  if (!selectedAgent.value || selectedAgentIndex.value === null) {
+    throw new Error('请先选择一个模拟个体')
+  }
+  
+  addLog(`向 ${selectedAgent.value.username} 发送: ${message.substring(0, 50)}...`)
+  
+  // Build prompt with chat history
+  let prompt = message
+  if (chatHistory.value.length > 1) {
+    const historyContext = chatHistory.value
+      .filter(msg => msg.content !== message)
+      .slice(-6)
+      .map(msg => `${msg.role === 'user' ? '提问者' : '你'}：${msg.content}`)
+      .join('\n')
+    prompt = `以下是我们之前的对话：\n${historyContext}\n\n现在我的新问题是：${message}`
+  }
+  
+  const res = await interviewAgents({
+    simulation_id: props.simulationId,
+    interviews: [{
+      agent_id: selectedAgentIndex.value,
+      prompt: prompt
+    }]
+  })
+  
+  if (res.success && res.data) {
+    const results = res.data.results || res.data
+    if (results && results.length > 0) {
+      chatHistory.value.push({
+        role: 'assistant',
+        content: results[0].response || results[0].answer || '无响应',
+        timestamp: new Date().toISOString()
+      })
+      addLog(`${selectedAgent.value.username} 已回复`)
+    } else {
+      throw new Error('无响应数据')
+    }
+  } else {
+    throw new Error(res.error || '请求失败')
+  }
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (chatMessages.value) {
+      chatMessages.value.scrollTop = chatMessages.value.scrollHeight
+    }
+  })
+}
+
+// Survey Methods
+const toggleAgentSelection = (idx) => {
+  const newSet = new Set(selectedAgents.value)
+  if (newSet.has(idx)) {
+    newSet.delete(idx)
+  } else {
+    newSet.add(idx)
+  }
+  selectedAgents.value = newSet
+}
+
+const selectAllAgents = () => {
+  const newSet = new Set()
+  profiles.value.forEach((_, idx) => newSet.add(idx))
+  selectedAgents.value = newSet
+}
+
+const clearAgentSelection = () => {
+  selectedAgents.value = new Set()
+}
+
+const submitSurvey = async () => {
+  if (selectedAgents.value.size === 0 || !surveyQuestion.value.trim()) return
+  
+  isSurveying.value = true
+  addLog(`发送问卷给 ${selectedAgents.value.size} 个对象...`)
+  
+  try {
+    const interviews = Array.from(selectedAgents.value).map(idx => ({
+      agent_id: idx,
+      prompt: surveyQuestion.value.trim()
+    }))
+    
+    const res = await interviewAgents({
+      simulation_id: props.simulationId,
+      interviews: interviews
+    })
+    
+    if (res.success && res.data) {
+      const results = res.data.results || res.data
+      surveyResults.value = results.map((result, i) => {
+        const agentIdx = interviews[i].agent_id
+        const agent = profiles.value[agentIdx]
+        return {
+          agent_id: agentIdx,
+          agent_name: agent?.username || `Agent ${agentIdx}`,
+          profession: agent?.profession,
+          question: surveyQuestion.value.trim(),
+          answer: result.response || result.answer || '无响应'
+        }
+      })
+      addLog(`收到 ${surveyResults.value.length} 条回复`)
+    } else {
+      throw new Error(res.error || '请求失败')
+    }
+  } catch (err) {
+    addLog(`问卷发送失败: ${err.message}`)
+  } finally {
+    isSurveying.value = false
+  }
+}
+
+// Load Report Data
+const loadReportData = async () => {
+  if (!props.reportId) return
+  
+  try {
+    addLog(`加载报告数据: ${props.reportId}`)
+    
+    // Get report info
+    const reportRes = await getReport(props.reportId)
+    if (reportRes.success && reportRes.data) {
+      // Load agent logs to get report outline and sections
+      await loadAgentLogs()
+    }
+  } catch (err) {
+    addLog(`加载报告失败: ${err.message}`)
+  }
+}
+
+const loadAgentLogs = async () => {
+  if (!props.reportId) return
+  
+  try {
+    const res = await getAgentLog(props.reportId, 0)
+    if (res.success && res.data) {
+      const logs = res.data.logs || []
+      
+      logs.forEach(log => {
+        if (log.action === 'planning_complete' && log.details?.outline) {
+          reportOutline.value = log.details.outline
+        }
+        
+        if (log.action === 'section_complete' && log.section_index < 100 && log.details?.content) {
+          generatedSections.value[log.section_index] = log.details.content
+        }
+      })
+      
+      addLog('报告数据加载完成')
+    }
+  } catch (err) {
+    addLog(`加载报告日志失败: ${err.message}`)
+  }
+}
+
+const loadProfiles = async () => {
+  if (!props.simulationId) return
+  
+  try {
+    const res = await getSimulationProfilesRealtime(props.simulationId, 'reddit')
+    if (res.success && res.data) {
+      profiles.value = res.data.profiles || []
+      addLog(`加载了 ${profiles.value.length} 个模拟个体`)
+    }
+  } catch (err) {
+    addLog(`加载模拟个体失败: ${err.message}`)
+  }
+}
+
+// Click outside to close dropdown
+const handleClickOutside = (e) => {
+  const dropdown = document.querySelector('.agent-dropdown')
+  if (dropdown && !dropdown.contains(e.target)) {
+    showAgentDropdown.value = false
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  addLog('Step5 深度互动初始化')
+  loadReportData()
+  loadProfiles()
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+watch(() => props.reportId, (newId) => {
+  if (newId) {
+    loadReportData()
+  }
+}, { immediate: true })
+
+watch(() => props.simulationId, (newId) => {
+  if (newId) {
+    loadProfiles()
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.interaction-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #F8F9FA;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow: hidden;
+}
+
+/* Main Split Layout */
+.main-split-layout {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Left Panel - Report Style (与 Step4Report.vue 完全一致) */
+.left-panel.report-style {
+  width: 45%;
+  min-width: 450px;
+  background: #FFFFFF;
+  border-right: 1px solid #E5E7EB;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 30px 50px 60px 50px;
+}
+
+.left-panel::-webkit-scrollbar {
+  width: 6px;
+}
+
+.left-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.left-panel::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+  transition: background 0.3s ease;
+}
+
+.left-panel:hover::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.left-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+/* Report Header */
+.report-content-wrapper {
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.report-header-block {
+  margin-bottom: 50px;
+}
+
+.report-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.report-tag {
+  background: #000000;
+  color: #FFFFFF;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 4px 8px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.report-id {
+  font-size: 11px;
+  color: #9CA3AF;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.main-title {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 36px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.2;
+  margin: 0 0 16px 0;
+  letter-spacing: -0.02em;
+}
+
+.sub-title {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 16px;
+  color: #6B7280;
+  font-style: italic;
+  line-height: 1.6;
+  margin: 0 0 30px 0;
+  font-weight: 400;
+}
+
+.header-divider {
+  height: 1px;
+  background: #E5E7EB;
+  width: 100%;
+}
+
+/* Sections List */
+.sections-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.report-section-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.section-header-row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  transition: background-color 0.2s ease;
+  padding: 8px 12px;
+  margin: -8px -12px;
+  border-radius: 8px;
+}
+
+.section-header-row.clickable {
+  cursor: pointer;
+}
+
+.section-header-row.clickable:hover {
+  background-color: #F9FAFB;
+}
+
+.collapse-icon {
+  margin-left: auto;
+  color: #9CA3AF;
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.collapse-icon.is-collapsed {
+  transform: rotate(-90deg);
+}
+
+.section-number {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 16px;
+  color: #E5E7EB;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.section-title {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 24px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+  transition: color 0.3s ease;
+}
+
+/* States */
+.report-section-item.is-pending .section-number {
+  color: #E5E7EB;
+}
+.report-section-item.is-pending .section-title {
+  color: #D1D5DB;
+}
+
+.report-section-item.is-active .section-number,
+.report-section-item.is-completed .section-number {
+  color: #9CA3AF;
+}
+
+.report-section-item.is-active .section-title,
+.report-section-item.is-completed .section-title {
+  color: #111827;
+}
+
+.section-body {
+  padding-left: 28px;
+  overflow: hidden;
+}
+
+/* Generated Content */
+.generated-content {
+  font-family: 'Inter', -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #374151;
+}
+
+.generated-content :deep(p) {
+  margin-bottom: 1em;
+}
+
+.generated-content :deep(.md-h2),
+.generated-content :deep(.md-h3),
+.generated-content :deep(.md-h4) {
+  font-family: 'Times New Roman', Times, serif;
+  color: #111827;
+  margin-top: 1.5em;
+  margin-bottom: 0.8em;
+  font-weight: 700;
+}
+
+.generated-content :deep(.md-h2) { font-size: 20px; border-bottom: 1px solid #F3F4F6; padding-bottom: 8px; }
+.generated-content :deep(.md-h3) { font-size: 18px; }
+.generated-content :deep(.md-h4) { font-size: 16px; }
+
+.generated-content :deep(.md-ul),
+.generated-content :deep(.md-ol) {
+  padding-left: 20px;
+  margin-bottom: 1em;
+}
+
+.generated-content :deep(.md-li) {
+  margin-bottom: 0.5em;
+}
+
+.generated-content :deep(.md-quote) {
+  border-left: 3px solid #E5E7EB;
+  padding-left: 16px;
+  margin: 1.5em 0;
+  color: #6B7280;
+  font-style: italic;
+  font-family: 'Times New Roman', Times, serif;
+}
+
+.generated-content :deep(.code-block) {
+  background: #F9FAFB;
+  padding: 12px;
+  border-radius: 6px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  overflow-x: auto;
+  margin: 1em 0;
+  border: 1px solid #E5E7EB;
+}
+
+.generated-content :deep(strong) {
+  font-weight: 600;
+  color: #111827;
+}
+
+/* Loading State */
+.loading-state {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #6B7280;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.loading-icon {
+  width: 18px;
+  height: 18px;
+  animation: spin 1s linear infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-text {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 15px;
+  color: #4B5563;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Content Styles Override */
+.generated-content :deep(.md-h2) {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 18px;
+  margin-top: 0;
+}
+
+/* Waiting Placeholder */
+.waiting-placeholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 40px;
+  color: #9CA3AF;
+}
+
+.waiting-animation {
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+.waiting-ring {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 2px solid #E5E7EB;
+  border-radius: 50%;
+  animation: ripple 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.waiting-ring:nth-child(2) {
+  animation-delay: 0.4s;
+}
+
+.waiting-ring:nth-child(3) {
+  animation-delay: 0.8s;
+}
+
+@keyframes ripple {
+  0% { transform: scale(0.5); opacity: 1; }
+  100% { transform: scale(1.5); opacity: 0; }
+}
+
+.waiting-text {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+/* Right Panel - Interaction */
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  overflow: hidden;
+}
+
+/* Interaction Header */
+.interaction-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid #E5E7EB;
+  background: #FAFAFA;
+}
+
+.tab-switcher {
+  display: flex;
+  gap: 8px;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #6B7280;
+  background: transparent;
+  border: 1px solid #E5E7EB;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-btn:hover {
+  background: #F9FAFB;
+  border-color: #D1D5DB;
+}
+
+.tab-btn.active {
+  background: #1F2937;
+  color: #FFFFFF;
+  border-color: #1F2937;
+}
+
+.tab-btn svg {
+  flex-shrink: 0;
+}
+
+/* Chat Container */
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Target Selector */
+.target-selector {
+  padding: 16px 24px;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.selector-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #9CA3AF;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 10px;
+}
+
+.selector-options {
+  display: flex;
+  gap: 12px;
+}
+
+.target-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+  background: #F9FAFB;
+  border: 1px solid #E5E7EB;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.target-option:hover {
+  border-color: #D1D5DB;
+}
+
+.target-option.active {
+  background: #1F2937;
+  color: #FFFFFF;
+  border-color: #1F2937;
+}
+
+/* Agent Dropdown */
+.agent-dropdown {
+  position: relative;
+}
+
+.agent-option {
+  min-width: 180px;
+  justify-content: flex-start;
+}
+
+.dropdown-arrow {
+  margin-left: auto;
+  transition: transform 0.2s ease;
+}
+
+.dropdown-arrow.open {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 100;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.dropdown-item:hover {
+  background: #F9FAFB;
+}
+
+.agent-avatar {
+  width: 32px;
+  height: 32px;
+  background: #1F2937;
+  color: #FFFFFF;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.agent-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.agent-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1F2937;
+}
+
+.agent-role {
+  font-size: 11px;
+  color: #9CA3AF;
+}
+
+/* Chat Messages */
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  color: #9CA3AF;
+}
+
+.empty-icon {
+  opacity: 0.3;
+}
+
+.empty-text {
+  font-size: 14px;
+  text-align: center;
+  max-width: 280px;
+  line-height: 1.6;
+}
+
+.chat-message {
+  display: flex;
+  gap: 12px;
+}
+
+.chat-message.user {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.chat-message.user .message-avatar {
+  background: #1F2937;
+  color: #FFFFFF;
+}
+
+.chat-message.assistant .message-avatar {
+  background: #F3F4F6;
+  color: #374151;
+}
+
+.message-content {
+  max-width: 70%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chat-message.user .message-content {
+  align-items: flex-end;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chat-message.user .message-header {
+  flex-direction: row-reverse;
+}
+
+.sender-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.message-time {
+  font-size: 11px;
+  color: #9CA3AF;
+}
+
+.message-text {
+  padding: 12px 16px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.chat-message.user .message-text {
+  background: #1F2937;
+  color: #FFFFFF;
+  border-bottom-right-radius: 4px;
+}
+
+.chat-message.assistant .message-text {
+  background: #F3F4F6;
+  color: #374151;
+  border-bottom-left-radius: 4px;
+}
+
+/* Typing Indicator */
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+  background: #F3F4F6;
+  border-radius: 12px;
+  border-bottom-left-radius: 4px;
+}
+
+.typing-indicator span {
+  width: 8px;
+  height: 8px;
+  background: #9CA3AF;
+  border-radius: 50%;
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) { animation-delay: 0s; }
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typing {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-8px); }
+}
+
+/* Chat Input */
+.chat-input-area {
+  padding: 16px 24px;
+  border-top: 1px solid #E5E7EB;
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.chat-input {
+  flex: 1;
+  padding: 12px 16px;
+  font-size: 14px;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  resize: none;
+  font-family: inherit;
+  line-height: 1.5;
+  transition: border-color 0.2s ease;
+}
+
+.chat-input:focus {
+  outline: none;
+  border-color: #1F2937;
+}
+
+.chat-input:disabled {
+  background: #F9FAFB;
+  cursor: not-allowed;
+}
+
+.send-btn {
+  width: 44px;
+  height: 44px;
+  background: #1F2937;
+  color: #FFFFFF;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+}
+
+.send-btn:hover:not(:disabled) {
+  background: #374151;
+}
+
+.send-btn:disabled {
+  background: #E5E7EB;
+  color: #9CA3AF;
+  cursor: not-allowed;
+}
+
+/* Survey Container */
+.survey-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.survey-setup {
+  padding: 24px;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.setup-section {
+  margin-bottom: 24px;
+}
+
+.setup-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.selection-count {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+
+/* Agents Grid */
+.agents-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.agent-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #F9FAFB;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.agent-checkbox:hover {
+  border-color: #D1D5DB;
+}
+
+.agent-checkbox.checked {
+  background: #F0FDF4;
+  border-color: #10B981;
+}
+
+.agent-checkbox input {
+  display: none;
+}
+
+.checkbox-avatar {
+  width: 28px;
+  height: 28px;
+  background: #E5E7EB;
+  color: #374151;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.agent-checkbox.checked .checkbox-avatar {
+  background: #10B981;
+  color: #FFFFFF;
+}
+
+.checkbox-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.checkbox-name {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: #1F2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkbox-role {
+  display: block;
+  font-size: 10px;
+  color: #9CA3AF;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkbox-indicator {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #E5E7EB;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.agent-checkbox.checked .checkbox-indicator {
+  background: #10B981;
+  border-color: #10B981;
+  color: #FFFFFF;
+}
+
+.checkbox-indicator svg {
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all 0.2s ease;
+}
+
+.agent-checkbox.checked .checkbox-indicator svg {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.selection-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.action-link {
+  font-size: 12px;
+  color: #6B7280;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.action-link:hover {
+  color: #1F2937;
+  text-decoration: underline;
+}
+
+.action-divider {
+  color: #E5E7EB;
+}
+
+/* Survey Input */
+.survey-input {
+  width: 100%;
+  padding: 14px 16px;
+  font-size: 14px;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  resize: none;
+  font-family: inherit;
+  line-height: 1.5;
+  transition: border-color 0.2s ease;
+}
+
+.survey-input:focus {
+  outline: none;
+  border-color: #1F2937;
+}
+
+.survey-submit-btn {
+  width: 100%;
+  padding: 14px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFFFFF;
+  background: #1F2937;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.survey-submit-btn:hover:not(:disabled) {
+  background: #374151;
+}
+
+.survey-submit-btn:disabled {
+  background: #E5E7EB;
+  color: #9CA3AF;
+  cursor: not-allowed;
+}
+
+.loading-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #FFFFFF;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Survey Results */
+.survey-results {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.results-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1F2937;
+}
+
+.results-count {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+
+.results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.result-card {
+  background: #F9FAFB;
+  border: 1px solid #E5E7EB;
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.result-avatar {
+  width: 36px;
+  height: 36px;
+  background: #1F2937;
+  color: #FFFFFF;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.result-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.result-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1F2937;
+}
+
+.result-role {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+
+.result-question {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #6B7280;
+}
+
+.result-question svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.result-answer {
+  font-size: 14px;
+  line-height: 1.7;
+  color: #374151;
+}
+
+/* Console Logs */
+.console-logs {
+  background: #000;
+  color: #DDD;
+  padding: 16px;
+  font-family: 'JetBrains Mono', monospace;
+  border-top: 1px solid #222;
+  flex-shrink: 0;
+}
+
+.log-header {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #333;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  font-size: 10px;
+  color: #666;
+}
+
+.log-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 80px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.log-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.log-content::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 2px;
+}
+
+.log-line {
+  font-size: 11px;
+  display: flex;
+  gap: 12px;
+  line-height: 1.5;
+}
+
+.log-time {
+  color: #555;
+  min-width: 75px;
+}
+
+.log-msg {
+  color: #BBB;
+  word-break: break-all;
+}
+
+/* Markdown Styles */
+:deep(.md-p) {
+  margin: 0 0 12px 0;
+}
+
+:deep(.md-h2) {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1F2937;
+  margin: 24px 0 12px 0;
+}
+
+:deep(.md-h3) {
+  font-size: 16px;
+  font-weight: 600;
+  color: #374151;
+  margin: 20px 0 10px 0;
+}
+
+:deep(.md-h4) {
+  font-size: 14px;
+  font-weight: 600;
+  color: #4B5563;
+  margin: 16px 0 8px 0;
+}
+
+:deep(.md-h5) {
+  font-size: 13px;
+  font-weight: 600;
+  color: #6B7280;
+  margin: 12px 0 6px 0;
+}
+
+:deep(.md-ul), :deep(.md-ol) {
+  margin: 12px 0;
+  padding-left: 24px;
+}
+
+:deep(.md-li), :deep(.md-oli) {
+  margin: 6px 0;
+}
+
+:deep(.md-quote) {
+  margin: 12px 0;
+  padding: 12px 16px;
+  background: #F9FAFB;
+  border-left: 3px solid #1F2937;
+  color: #4B5563;
+}
+
+:deep(.code-block) {
+  margin: 12px 0;
+  padding: 12px 16px;
+  background: #1F2937;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+:deep(.code-block code) {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  color: #E5E7EB;
+}
+
+:deep(.inline-code) {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  background: #F3F4F6;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #1F2937;
+}
+
+:deep(.md-hr) {
+  border: none;
+  border-top: 1px solid #E5E7EB;
+  margin: 24px 0;
+}
+</style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 7616224..62d2320 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -4,6 +4,7 @@ import Process from '../views/MainView.vue'
 import SimulationView from '../views/SimulationView.vue'
 import SimulationRunView from '../views/SimulationRunView.vue'
 import ReportView from '../views/ReportView.vue'
+import InteractionView from '../views/InteractionView.vue'
 
 const routes = [
   {
@@ -34,6 +35,12 @@ const routes = [
     name: 'Report',
     component: ReportView,
     props: true
+  },
+  {
+    path: '/interaction/:reportId',
+    name: 'Interaction',
+    component: InteractionView,
+    props: true
   }
 ]
 
diff --git a/frontend/src/views/InteractionView.vue b/frontend/src/views/InteractionView.vue
new file mode 100644
index 0000000..1dc27f5
--- /dev/null
+++ b/frontend/src/views/InteractionView.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="main-view">
+    <!-- Header -->
+    <header class="app-header">
+      <div class="header-left">
+        <div class="brand" @click="router.push('/')">MIROFISH</div>
+      </div>
+      
+      <div class="header-center">
+        <div class="view-switcher">
+          <button 
+            v-for="mode in ['graph', 'split', 'workbench']" 
+            :key="mode"
+            class="switch-btn"
+            :class="{ active: viewMode === mode }"
+            @click="viewMode = mode"
+          >
+            {{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
+          </button>
+        </div>
+      </div>
+
+      <div class="header-right">
+        <div class="workflow-step">
+          <span class="step-num">Step 5/5</span>
+          <span class="step-name">深度互动</span>
+        </div>
+        <div class="step-divider"></div>
+        <span class="status-indicator" :class="statusClass">
+          <span class="dot"></span>
+          {{ statusText }}
+        </span>
+      </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <main class="content-area">
+      <!-- Left Panel: Graph -->
+      <div class="panel-wrapper left" :style="leftPanelStyle">
+        <GraphPanel 
+          :graphData="graphData"
+          :loading="graphLoading"
+          :currentPhase="5"
+          :isSimulating="false"
+          @refresh="refreshGraph"
+          @toggle-maximize="toggleMaximize('graph')"
+        />
+      </div>
+
+      <!-- Right Panel: Step5 深度互动 -->
+      <div class="panel-wrapper right" :style="rightPanelStyle">
+        <Step5Interaction
+          :reportId="currentReportId"
+          :simulationId="simulationId"
+          :systemLogs="systemLogs"
+          @add-log="addLog"
+          @update-status="updateStatus"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import GraphPanel from '../components/GraphPanel.vue'
+import Step5Interaction from '../components/Step5Interaction.vue'
+import { getProject, getGraphData } from '../api/graph'
+import { getSimulation } from '../api/simulation'
+import { getReport } from '../api/report'
+
+const route = useRoute()
+const router = useRouter()
+
+// Props
+const props = defineProps({
+  reportId: String
+})
+
+// Layout State - 默认切换到工作台视角
+const viewMode = ref('workbench')
+
+// Data State
+const currentReportId = ref(route.params.reportId)
+const simulationId = ref(null)
+const projectData = ref(null)
+const graphData = ref(null)
+const graphLoading = ref(false)
+const systemLogs = ref([])
+const currentStatus = ref('ready') // ready | processing | completed | error
+
+// --- Computed Layout Styles ---
+const leftPanelStyle = computed(() => {
+  if (viewMode.value === 'graph') return { width: '100%', opacity: 1, transform: 'translateX(0)' }
+  if (viewMode.value === 'workbench') return { width: '0%', opacity: 0, transform: 'translateX(-20px)' }
+  return { width: '50%', opacity: 1, transform: 'translateX(0)' }
+})
+
+const rightPanelStyle = computed(() => {
+  if (viewMode.value === 'workbench') return { width: '100%', opacity: 1, transform: 'translateX(0)' }
+  if (viewMode.value === 'graph') return { width: '0%', opacity: 0, transform: 'translateX(20px)' }
+  return { width: '50%', opacity: 1, transform: 'translateX(0)' }
+})
+
+// --- Status Computed ---
+const statusClass = computed(() => {
+  return currentStatus.value
+})
+
+const statusText = computed(() => {
+  if (currentStatus.value === 'error') return 'Error'
+  if (currentStatus.value === 'completed') return 'Completed'
+  if (currentStatus.value === 'processing') return 'Processing'
+  return 'Ready'
+})
+
+// --- Helpers ---
+const addLog = (msg) => {
+  const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) + '.' + new Date().getMilliseconds().toString().padStart(3, '0')
+  systemLogs.value.push({ time, msg })
+  if (systemLogs.value.length > 200) {
+    systemLogs.value.shift()
+  }
+}
+
+const updateStatus = (status) => {
+  currentStatus.value = status
+}
+
+// --- Layout Methods ---
+const toggleMaximize = (target) => {
+  if (viewMode.value === target) {
+    viewMode.value = 'split'
+  } else {
+    viewMode.value = target
+  }
+}
+
+// --- Data Logic ---
+const loadReportData = async () => {
+  try {
+    addLog(`加载报告数据: ${currentReportId.value}`)
+    
+    // 获取 report 信息以获取 simulation_id
+    const reportRes = await getReport(currentReportId.value)
+    if (reportRes.success && reportRes.data) {
+      const reportData = reportRes.data
+      simulationId.value = reportData.simulation_id
+      
+      if (simulationId.value) {
+        // 获取 simulation 信息
+        const simRes = await getSimulation(simulationId.value)
+        if (simRes.success && simRes.data) {
+          const simData = simRes.data
+          
+          // 获取 project 信息
+          if (simData.project_id) {
+            const projRes = await getProject(simData.project_id)
+            if (projRes.success && projRes.data) {
+              projectData.value = projRes.data
+              addLog(`项目加载成功: ${projRes.data.project_id}`)
+              
+              // 获取 graph 数据
+              if (projRes.data.graph_id) {
+                await loadGraph(projRes.data.graph_id)
+              }
+            }
+          }
+        }
+      }
+    } else {
+      addLog(`获取报告信息失败: ${reportRes.error || '未知错误'}`)
+    }
+  } catch (err) {
+    addLog(`加载异常: ${err.message}`)
+  }
+}
+
+const loadGraph = async (graphId) => {
+  graphLoading.value = true
+  
+  try {
+    const res = await getGraphData(graphId)
+    if (res.success) {
+      graphData.value = res.data
+      addLog('图谱数据加载成功')
+    }
+  } catch (err) {
+    addLog(`图谱加载失败: ${err.message}`)
+  } finally {
+    graphLoading.value = false
+  }
+}
+
+const refreshGraph = () => {
+  if (projectData.value?.graph_id) {
+    loadGraph(projectData.value.graph_id)
+  }
+}
+
+// Watch route params
+watch(() => route.params.reportId, (newId) => {
+  if (newId && newId !== currentReportId.value) {
+    currentReportId.value = newId
+    loadReportData()
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  addLog('InteractionView 初始化')
+  loadReportData()
+})
+</script>
+
+<style scoped>
+.main-view {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #FFF;
+  overflow: hidden;
+  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Header */
+.app-header {
+  height: 60px;
+  border-bottom: 1px solid #EAEAEA;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: #FFF;
+  z-index: 100;
+  position: relative;
+}
+
+.header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.brand {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 800;
+  font-size: 18px;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.view-switcher {
+  display: flex;
+  background: #F5F5F5;
+  padding: 4px;
+  border-radius: 6px;
+  gap: 4px;
+}
+
+.switch-btn {
+  border: none;
+  background: transparent;
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.switch-btn.active {
+  background: #FFF;
+  color: #000;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.workflow-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.step-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  color: #999;
+}
+
+.step-name {
+  font-weight: 700;
+  color: #000;
+}
+
+.step-divider {
+  width: 1px;
+  height: 14px;
+  background-color: #E0E0E0;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #CCC;
+}
+
+.status-indicator.ready .dot { background: #4CAF50; }
+.status-indicator.processing .dot { background: #FF9800; animation: pulse 1s infinite; }
+.status-indicator.completed .dot { background: #4CAF50; }
+.status-indicator.error .dot { background: #F44336; }
+
+@keyframes pulse { 50% { opacity: 0.5; } }
+
+/* Content */
+.content-area {
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.panel-wrapper {
+  height: 100%;
+  overflow: hidden;
+  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, transform 0.3s ease;
+  will-change: width, opacity, transform;
+}
+
+.panel-wrapper.left {
+  border-right: 1px solid #EAEAEA;
+}
+</style>